techniq · techniq · May 29, 2026 · May 29, 2026 · May 29, 2026 · May 29, 2026
diff --git a/.github/workflows/build-preview.yml b/.github/workflows/build-preview.yml
@@ -30,5 +30,5 @@ jobs:
         uses: actions/upload-artifact@v4
         with:
           name: preview-build
-          path: sites/docs/.svelte-kit
+          path: docs/.svelte-kit
           include-hidden-files: true
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -29,12 +29,14 @@ jobs:
 
       - run: pnpm --filter "./packages/*" build
 
+      # Build the docs site before `pnpm check`: it generates the `content-collections`
+      # module at build time, which the type-check then consumes.
+      - run: pnpm --filter "./docs" build
+
       - run: pnpm check
 
       - run: pnpm lint
 
       - run: pnpm test:unit
         env:
           CI: true
-
-      - run: pnpm --filter "./sites/*" build
diff --git a/.github/workflows/deploy-prod.yml b/.github/workflows/deploy-prod.yml
@@ -4,7 +4,7 @@ on:
     branches:
       - main
     paths:
-      - sites/docs/**
+      - docs/**
       - packages/**
 
 jobs:
@@ -36,5 +36,5 @@ jobs:
           githubToken: ${{ secrets.GITHUB_TOKEN }}
           projectName: layerstack
           directory: ./.svelte-kit/cloudflare
-          workingDirectory: sites/docs
+          workingDirectory: docs
           deploymentName: Production
diff --git a/.gitignore b/.gitignore
@@ -8,4 +8,11 @@ coverage/
 .env
 .DS_Store
 
+# Generated by @content-collections and the docs markdown live-code pipeline
+.content-collections/
+.live-code/
+
+# Playwright MCP run artifacts
+.playwright-mcp/
+
 test-*
diff --git a/docs/.prettierignore b/docs/.prettierignore
@@ -0,0 +1,18 @@
+.DS_Store
+node_modules
+/build
+/dist
+/.svelte-kit
+/.content-collections
+/.live-code
+/.wrangler
+/package
+.env
+.env.*
+!.env.example
+coverage/
+
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock
diff --git a/sites/docs/CHANGELOG.md → docs/CHANGELOG.md b/sites/docs/CHANGELOG.md → docs/CHANGELOG.md
diff --git a/sites/docs/LICENSE → docs/LICENSE b/sites/docs/LICENSE → docs/LICENSE
diff --git a/sites/docs/README.md → docs/README.md b/sites/docs/README.md → docs/README.md
diff --git a/docs/content-collections.ts b/docs/content-collections.ts
@@ -0,0 +1,11 @@
+import { createContentConfig } from '@layerstack/docs/content-collections';
+
+export default createContentConfig({
+  // LayerStack is a multi-package monorepo; docs are authored as `reference` content
+  // organized by package under `src/content/reference/<package>/<name>.md`.
+  packageName: 'layerstack',
+  repo: 'techniq/layerstack',
+  branch: 'main',
+  // `docs` -> repo root `packages`
+  packagesRoot: '../packages',
+});
diff --git a/docs/mdsx.config.js b/docs/mdsx.config.js
@@ -0,0 +1,7 @@
+import { createMdsxConfig } from '@layerstack/docs/markdown/config';
+
+export const mdsxConfig = createMdsxConfig({
+  markdownComponentsPath: '@layerstack/docs/markdown/components',
+  exampleComponentPath: '$lib/components',
+  liveCodeComponent: '@layerstack/docs/markdown/components/LiveCode.svelte',
+});
diff --git a/sites/docs/package.json → docs/package.json b/sites/docs/package.json → docs/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "@layerstack/docs",
-  "description": "A collection of Svelte actions, stores and general utils",
+  "name": "@layerstack/docs-site",
+  "description": "Documentation site for LayerStack",
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "private": true,
@@ -12,33 +12,34 @@
     "preview": "vite preview",
     "package": "svelte-package",
     "prepublishOnly": "svelte-package",
-    "check": "svelte-check --tsconfig ./tsconfig.json",
-    "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
     "lint": "prettier --check .",
-    "format": "prettier --write .",
-    "prepare": "svelte-kit sync"
+    "format": "prettier --write ."
   },
   "devDependencies": {
     "@changesets/cli": "^2.29.4",
+    "@content-collections/core": "^0.14.3",
+    "@content-collections/markdown": "^0.1.4",
+    "@content-collections/vite": "^0.2.9",
     "@fortawesome/free-solid-svg-icons": "^6.7.2",
     "@iconify-json/lucide": "^1.2.53",
+    "@iconify-json/simple-icons": "^1.2.84",
     "@sveltejs/adapter-cloudflare": "^7.0.3",
     "@sveltejs/kit": "^2.21.0",
     "@sveltejs/package": "^2.3.11",
     "@sveltejs/vite-plugin-svelte": "^5.0.3",
     "@tailwindcss/typography": "^0.5.16",
     "@tailwindcss/vite": "^4.1.5",
     "@types/d3-array": "^3.2.1",
-    "@types/prismjs": "^1.26.5",
-    "mdsvex": "^0.12.5",
+    "mdsx": "^0.0.7",
     "posthog-js": "^1.239.0",
     "prettier": "^3.5.3",
     "prettier-plugin-svelte": "^3.3.3",
     "rehype-slug": "^6.0.0",
     "svelte": "^5.28.2",
     "svelte-check": "^4.1.6",
-    "svelte-json-tree": "^2.2.0",
-    "svelte-ux": "2.0.0-next.13",
+    "svelte-ux": "2.0.0-next.22",
     "svelte2tsx": "^0.7.36",
     "tailwindcss": "^4.1.5",
     "tslib": "^2.8.1",
@@ -49,7 +50,9 @@
   },
   "type": "module",
   "dependencies": {
+    "@fontsource-variable/inter": "^5.2.8",
     "@fortawesome/fontawesome-common-types": "^6.7.2",
+    "@layerstack/docs": "workspace:*",
     "@layerstack/svelte-actions": "workspace:*",
     "@layerstack/svelte-state": "workspace:*",
     "@layerstack/svelte-stores": "workspace:*",
@@ -59,10 +62,6 @@
     "@mdi/js": "^7.4.47",
     "clsx": "^2.1.1",
     "d3-array": "^3.2.4",
-    "prism-svelte": "^0.5.0",
-    "prism-themes": "^1.9.0",
-    "prismjs": "^1.30.0",
-    "sveld": "^0.22.1",
     "tailwind-merge": "^3.2.0"
   },
   "peerDependencies": {

diff --git a/sites/docs/src/app.d.ts → docs/src/app.d.ts b/sites/docs/src/app.d.ts → docs/src/app.d.ts
@@ -1,4 +1,4 @@
-/// <reference path="../../../packages/svelte-actions/src/lib/types.d.ts" />
+/// <reference path="../../packages/svelte-actions/src/lib/types.d.ts" />
 export * from 'unplugin-icons/types/svelte';
 
 // See https://kit.svelte.dev/docs/types#app

diff --git a/sites/docs/src/app.html → docs/src/app.html b/sites/docs/src/app.html → docs/src/app.html
diff --git a/docs/src/content/guides/LLMs.md b/docs/src/content/guides/LLMs.md
@@ -0,0 +1,49 @@
+---
+title: LLMs
+description: Using the LayerStack documentation with LLMs
+order: 99
+---
+
+<script>
+  import OpenWithButton from '$lib/components/OpenWithButton.svelte';
+</script>
+
+The LayerStack documentation is designed to be useful both for human developers working alongside LLMs and for large language models ingesting the docs directly.
+
+## :icon{name="lucide:user" class="relative -top-1"} For the humans
+
+<OpenWithButton example />
+
+At the top of each documentation page — and demonstrated above — you'll find a button that copies the page's documentation as Markdown to your clipboard. The dropdown also offers handy options such as viewing the source or opening the page in a chat assistant.
+
+::note
+The `View Component source` option is only shown for pages with a linked source file.
+::
+
+## :icon{name="lucide:bot" class="relative -top-1"} For the bots
+
+LayerStack adopts the [llms.txt](https://llmstxt.org/) proposal — a structured, machine-readable format optimized for LLMs — so tools and AI systems can efficiently parse the documentation.
+
+## LLM-friendly documentation
+
+::steps
+
+### Per page
+
+Append `/llms.txt` to any documentation page's URL to get its content as plain-text, LLM-optimized Markdown — the same text the `Copy Page` button copies.
+
+:::tip
+**Standard page**: [/docs/svelte-stores/debounceStore](/docs/svelte-stores/debounceStore)
+
+**LLM-friendly version**: [/docs/svelte-stores/debounceStore/llms.txt](/docs/svelte-stores/debounceStore/llms.txt)
+:::
+
+### Root index
+
+To explore every page in LLM-friendly format, visit the root index at [llms.txt](/llms.txt).
+
+### Complete documentation
+
+For a single, consolidated document containing all of the documentation, see [/docs/llms.txt](/docs/llms.txt).
+
+::
diff --git a/docs/src/content/reference/svelte-actions/dataBackground.md b/docs/src/content/reference/svelte-actions/dataBackground.md
@@ -0,0 +1,19 @@
+---
+title: dataBackground
+description: Set background gradient based on data, similar to Excel.  Typically used within a table
+related: [components/Table, svelte-table/actions/table]
+---
+
+## Usage
+
+```js
+import { dataBackground } from '@layerstack/svelte-actions';
+```
+
+## Basic
+
+:example{name="basic" showCode}
+
+## Tailwind gradient
+
+:example{name="tailwind-gradient" showCode}
diff --git a/docs/src/content/reference/svelte-actions/input.md b/docs/src/content/reference/svelte-actions/input.md
@@ -0,0 +1,47 @@
+---
+title: input
+description: Input element actions — `autoFocus`, `autoHeight`, `blurOnEscape`, `selectOnFocus`, and `debounceEvent`
+related: [components/TextField, components/Input]
+---
+
+## Usage
+
+```js
+import {
+  autoFocus,
+  autoHeight,
+  blurOnEscape,
+  selectOnFocus,
+  debounceEvent,
+} from '@layerstack/svelte-actions';
+```
+
+## autoFocus
+
+Auto focus node when rendered
+
+:example{name="auto-focus" showCode}
+
+## selectOnFocus
+
+Selects the text inside a text node when the node is focused
+
+:example{name="select-on-focus"}
+
+## blurOnEscape
+
+Blurs the node when Escape is pressed
+
+:example{name="blur-on-escape"}
+
+## autoHeight
+
+Automatically resize textarea based on content
+
+:example{name="auto-height"}
+
+## debounceEvent
+
+Debounce any event (input, change, etc)
+
+:example{name="debounce-event"}
diff --git a/docs/src/content/reference/svelte-actions/layout.md b/docs/src/content/reference/svelte-actions/layout.md
@@ -0,0 +1,33 @@
+---
+title: layout
+description: Layout actions — `remainingViewportHeight`, `remainingViewportWidth`, and `overflow`
+related: [components/Overflow]
+---
+
+## Usage
+
+```js
+import {
+  remainingViewportHeight,
+  remainingViewportWidth,
+  overflow,
+} from '@layerstack/svelte-actions';
+```
+
+## remainingViewportHeight
+
+Set `height` or `max-height` to viewport height excluding node's current viewport top
+
+> TODO
+
+## remainingViewportWidth
+
+Set `width` or `max-width` to viewport width excluding node's current viewport left
+
+> TODO
+
+## overflow
+
+Watch for overflow changes (x or y) and dispatch `overflow` event with amount
+
+:example{name="overflow" showCode}
diff --git a/docs/src/content/reference/svelte-actions/mouse.md b/docs/src/content/reference/svelte-actions/mouse.md
@@ -0,0 +1,34 @@
+---
+title: mouse
+description: Mouse interaction actions — `longpress` (press-and-hold) and `movable` (drag tracking)
+---
+
+## Usage
+
+```js
+import { longpress, movable } from '@layerstack/svelte-actions';
+```
+
+## longpress
+
+Dispatch event after element has been pressed for a duration of time
+
+:example{name="longpress"}
+
+## movable
+
+Track mouse position changes from mouse down on node to mouse up
+
+:example{name="movable"}
+
+### With pixel steps / snapping
+
+:example{name="movable-step"}
+
+### With percentage of parent steps / snapping
+
+:example{name="movable-step-percent"}
+
+### x-axis only
+
+:example{name="movable-x-axis"}
diff --git a/docs/src/content/reference/svelte-actions/multi.md b/docs/src/content/reference/svelte-actions/multi.md
@@ -0,0 +1,11 @@
+---
+title: multi
+description: Helper action to handle multiple actions as a single action.  Useful for adding actions for custom components
+related: [components/Button, components/Input, components/TextField]
+---
+
+## Usage
+
+```js
+import { multi } from '@layerstack/svelte-actions';
+```