diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
new file mode 100644
index 00000000..ac1944e7
--- /dev/null
+++ b/.github/workflows/ci.yml
@@ -0,0 +1,30 @@
+name: CI
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+
+jobs:
+  ci:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: pnpm/action-setup@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: "22"
+          cache: pnpm
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      # Every top-level folder must stay pullable on its own — no workspace-only
+      # dependency specifiers (workspace:/catalog:/link:/file:).
+      - name: Lint standalone packages
+        run: pnpm lint:standalone
+
+      - name: Run tests
+        run: pnpm -r test
diff --git a/account-history/package.json b/account-history/package.json
index 52d5d7c3..e39681de 100644
--- a/account-history/package.json
+++ b/account-history/package.json
@@ -7,7 +7,9 @@
   "scripts": {
     "build": "vite build",
     "dev": "vite build --watch",
-    "register": "pw-modules add \"$MODULE_SETTINGS_DOC_URL\" \"$(pushwork url)\""
+    "register": "pw-modules add \"$MODULE_SETTINGS_DOC_URL\" \"$(pushwork url)\"",
+    "test": "vitest run",
+    "test:watch": "vitest"
   },
   "dependencies": {
     "@automerge/automerge-repo-solid-primitives": "2.5.2"
@@ -22,10 +24,12 @@
     "@inkandswitch/patchwork-filesystem": "^0.0.4",
     "@inkandswitch/patchwork-plugins": "^0.0.6",
     "babel-preset-solid": "^1.9.9",
+    "happy-dom": "^15.11.7",
     "solid-js": "^1.9.9",
     "typescript": "^5.9.3",
     "vite": "^7.1.9",
+    "vite-plugin-css-injected-by-js": "^3.5.2",
     "vite-plugin-solid": "^2.11.10",
-    "vite-plugin-css-injected-by-js": "^3.5.2"
+    "vitest": "^3.2.4"
   }
 }
diff --git a/account-history/vitest.config.ts b/account-history/vitest.config.ts
new file mode 100644
index 00000000..715c53e5
--- /dev/null
+++ b/account-history/vitest.config.ts
@@ -0,0 +1,14 @@
+import {defineConfig} from "vitest/config"
+import solid from "vite-plugin-solid"
+
+export default defineConfig({
+  plugins: [solid()],
+  test: {
+    environment: "happy-dom",
+    globals: true,
+    passWithNoTests: true,
+  },
+  resolve: {
+    conditions: ["development", "browser"],
+  },
+})
diff --git a/account-picker/package.json b/account-picker/package.json
index 2959579a..96e11eae 100644
--- a/account-picker/package.json
+++ b/account-picker/package.json
@@ -14,7 +14,9 @@
     "build": "node esbuild/build.ts",
     "dev": "node esbuild/watch.ts",
     "pushwatch": "pnpm dev pushwork",
-    "register": "pw-modules add \"$MODULE_SETTINGS_DOC_URL\" \"$(pushwork url)\""
+    "register": "pw-modules add \"$MODULE_SETTINGS_DOC_URL\" \"$(pushwork url)\"",
+    "test": "vitest run",
+    "test:watch": "vitest"
   },
   "dependencies": {
     "@automerge/automerge": "^3.2.5",
@@ -34,6 +36,10 @@
     "@babel/parser": "7.28.4",
     "babel-preset-solid": "^1.9.9",
     "esbuild": "^0.23.1",
-    "typescript": "^5.8.3"
+    "happy-dom": "^15.11.7",
+    "typescript": "^5.8.3",
+    "vite": "^7.1.9",
+    "vite-plugin-solid": "^2.11.10",
+    "vitest": "^3.2.4"
   }
 }
diff --git a/account-picker/vitest.config.ts b/account-picker/vitest.config.ts
new file mode 100644
index 00000000..715c53e5
--- /dev/null
+++ b/account-picker/vitest.config.ts
@@ -0,0 +1,14 @@
+import {defineConfig} from "vitest/config"
+import solid from "vite-plugin-solid"
+
+export default defineConfig({
+  plugins: [solid()],
+  test: {
+    environment: "happy-dom",
+    globals: true,
+    passWithNoTests: true,
+  },
+  resolve: {
+    conditions: ["development", "browser"],
+  },
+})
diff --git a/add-doc-to-sidebar-button/package.json b/add-doc-to-sidebar-button/package.json
index f59bda98..571cd2ae 100644
--- a/add-doc-to-sidebar-button/package.json
+++ b/add-doc-to-sidebar-button/package.json
@@ -5,12 +5,18 @@
   "main": "./index.js",
   "scripts": {
     "sync": "pushwork sync",
-    "register": "pw-modules add \"$MODULE_SETTINGS_DOC_URL\" \"$(pushwork url)\""
+    "register": "pw-modules add \"$MODULE_SETTINGS_DOC_URL\" \"$(pushwork url)\"",
+    "test": "vitest run",
+    "test:watch": "vitest"
   },
   "dependencies": {
     "@automerge/automerge": "^3.2.5",
     "@automerge/automerge-repo": "^2.6.0-subduction.9",
     "@inkandswitch/patchwork-filesystem": "^0.0.4",
     "@inkandswitch/patchwork-plugins": "^0.0.6"
+  },
+  "devDependencies": {
+    "happy-dom": "^15.11.7",
+    "vitest": "^3.2.4"
   }
 }
diff --git a/add-doc-to-sidebar-button/vitest.config.ts b/add-doc-to-sidebar-button/vitest.config.ts
new file mode 100644
index 00000000..44198156
--- /dev/null
+++ b/add-doc-to-sidebar-button/vitest.config.ts
@@ -0,0 +1,9 @@
+import {defineConfig} from "vitest/config"
+
+export default defineConfig({
+  test: {
+    environment: "happy-dom",
+    globals: true,
+    passWithNoTests: true,
+  },
+})
diff --git a/codemirror-base/package.json b/codemirror-base/package.json
index c8acf38b..5f340753 100644
--- a/codemirror-base/package.json
+++ b/codemirror-base/package.json
@@ -22,7 +22,9 @@
     "build": "node esbuild/build.ts",
     "dev": "node esbuild/watch.ts",
     "pushwatch": "pnpm dev pushwork",
-    "register": "pw-modules add \"$MODULE_SETTINGS_DOC_URL\" \"$(pushwork url)\""
+    "register": "pw-modules add \"$MODULE_SETTINGS_DOC_URL\" \"$(pushwork url)\"",
+    "test": "vitest run",
+    "test:watch": "vitest"
   },
   "dependencies": {
     "@automerge/automerge-codemirror": "^0.2.0",
@@ -49,7 +51,11 @@
     "esbuild": "^0.23.1",
     "eslint": "^9.36.0",
     "globals": "^16.4.0",
+    "happy-dom": "^15.11.7",
     "typescript": "~5.9.3",
-    "typescript-eslint": "^8.45.0"
+    "typescript-eslint": "^8.45.0",
+    "vite": "^7.1.9",
+    "vite-plugin-solid": "^2.11.10",
+    "vitest": "^3.2.4"
   }
 }
diff --git a/codemirror-base/vitest.config.ts b/codemirror-base/vitest.config.ts
new file mode 100644
index 00000000..715c53e5
--- /dev/null
+++ b/codemirror-base/vitest.config.ts
@@ -0,0 +1,14 @@
+import {defineConfig} from "vitest/config"
+import solid from "vite-plugin-solid"
+
+export default defineConfig({
+  plugins: [solid()],
+  test: {
+    environment: "happy-dom",
+    globals: true,
+    passWithNoTests: true,
+  },
+  resolve: {
+    conditions: ["development", "browser"],
+  },
+})
diff --git a/codemirror-markdown/package.json b/codemirror-markdown/package.json
index 564c75a2..7d9e1312 100644
--- a/codemirror-markdown/package.json
+++ b/codemirror-markdown/package.json
@@ -30,7 +30,9 @@
     "build": "node esbuild/build.ts",
     "dev": "node esbuild/watch.ts",
     "pushwatch": "pnpm dev pushwork",
-    "register": "pw-modules add \"$MODULE_SETTINGS_DOC_URL\" \"$(pushwork url)\""
+    "register": "pw-modules add \"$MODULE_SETTINGS_DOC_URL\" \"$(pushwork url)\"",
+    "test": "vitest run",
+    "test:watch": "vitest"
   },
   "dependencies": {
     "@automerge/automerge": "^3.2.5",
@@ -56,7 +58,9 @@
     "esbuild": "^0.23.1",
     "eslint": "^9.36.0",
     "globals": "^16.4.0",
+    "happy-dom": "^15.11.7",
     "typescript": "~5.9.3",
-    "typescript-eslint": "^8.45.0"
+    "typescript-eslint": "^8.45.0",
+    "vitest": "^3.2.4"
   }
 }
diff --git a/codemirror-markdown/vitest.config.ts b/codemirror-markdown/vitest.config.ts
new file mode 100644
index 00000000..44198156
--- /dev/null
+++ b/codemirror-markdown/vitest.config.ts
@@ -0,0 +1,9 @@
+import {defineConfig} from "vitest/config"
+
+export default defineConfig({
+  test: {
+    environment: "happy-dom",
+    globals: true,
+    passWithNoTests: true,
+  },
+})
diff --git a/commands/package.json b/commands/package.json
index 5eda98db..a16fafb5 100644
--- a/commands/package.json
+++ b/commands/package.json
@@ -14,7 +14,9 @@
     "build": "node esbuild/build.ts",
     "dev": "node esbuild/watch.ts",
     "pushwatch": "pnpm dev pushwork",
-    "register": "pw-modules add \"$MODULE_SETTINGS_DOC_URL\" \"$(pushwork url)\""
+    "register": "pw-modules add \"$MODULE_SETTINGS_DOC_URL\" \"$(pushwork url)\"",
+    "test": "vitest run",
+    "test:watch": "vitest"
   },
   "dependencies": {
     "@inkandswitch/patchwork-bootloader": "^0.0.4",
@@ -23,6 +25,8 @@
   },
   "devDependencies": {
     "@automerge/automerge-repo": "^2.6.0-subduction.9",
-    "esbuild": "^0.23.1"
+    "esbuild": "^0.23.1",
+    "happy-dom": "^15.11.7",
+    "vitest": "^3.2.4"
   }
 }
diff --git a/commands/vitest.config.ts b/commands/vitest.config.ts
new file mode 100644
index 00000000..44198156
--- /dev/null
+++ b/commands/vitest.config.ts
@@ -0,0 +1,9 @@
+import {defineConfig} from "vitest/config"
+
+export default defineConfig({
+  test: {
+    environment: "happy-dom",
+    globals: true,
+    passWithNoTests: true,
+  },
+})
diff --git a/comments-view/package.json b/comments-view/package.json
index 06b7ead7..c10baaf0 100644
--- a/comments-view/package.json
+++ b/comments-view/package.json
@@ -8,7 +8,9 @@
     "dev": "vite build --watch",
     "build": "vite build",
     "sync": "vite build && pushwork sync",
-    "register": "pw-modules add \"$MODULE_SETTINGS_DOC_URL\" \"$(pushwork url)\""
+    "register": "pw-modules add \"$MODULE_SETTINGS_DOC_URL\" \"$(pushwork url)\"",
+    "test": "vitest run",
+    "test:watch": "vitest"
   },
   "dependencies": {
     "@automerge/automerge": "3.3.0-fragments.1",
@@ -27,9 +29,11 @@
     "@typescript-eslint/parser": "^8.40.0",
     "eslint": "^9.34.0",
     "globals": "^16.4.0",
+    "happy-dom": "^15.11.7",
     "typescript-eslint": "^8.41.0",
     "vite": "^7.1.9",
     "vite-plugin-css-injected-by-js": "^3.5.2",
-    "vite-plugin-solid": "^2.11.10"
+    "vite-plugin-solid": "^2.11.10",
+    "vitest": "^3.2.4"
   }
 }
diff --git a/comments-view/vitest.config.ts b/comments-view/vitest.config.ts
new file mode 100644
index 00000000..715c53e5
--- /dev/null
+++ b/comments-view/vitest.config.ts
@@ -0,0 +1,14 @@
+import {defineConfig} from "vitest/config"
+import solid from "vite-plugin-solid"
+
+export default defineConfig({
+  plugins: [solid()],
+  test: {
+    environment: "happy-dom",
+    globals: true,
+    passWithNoTests: true,
+  },
+  resolve: {
+    conditions: ["development", "browser"],
+  },
+})
diff --git a/contact/package.json b/contact/package.json
index 4a12948b..237d709e 100644
--- a/contact/package.json
+++ b/contact/package.json
@@ -16,7 +16,9 @@
     "build": "node esbuild/build.ts",
     "dev": "node esbuild/watch.ts",
     "pushwatch": "pnpm dev pushwork",
-    "register": "pw-modules add \"$MODULE_SETTINGS_DOC_URL\" \"$(pushwork url)\""
+    "register": "pw-modules add \"$MODULE_SETTINGS_DOC_URL\" \"$(pushwork url)\"",
+    "test": "vitest run",
+    "test:watch": "vitest"
   },
   "keywords": [],
   "author": "Ink & Switch",
@@ -29,7 +31,7 @@
     "@inkandswitch/patchwork-providers": "^0.2.1",
     "@inkandswitch/patchwork-providers-react": "^0.2.1",
     "@radix-ui/react-avatar": "^1.1.10",
-"lucide-react": "^0.469.0",
+    "lucide-react": "^0.469.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },
@@ -41,6 +43,9 @@
     "@vitejs/plugin-react": "^4.5.1",
     "esbuild": "^0.23.1",
     "eslint-plugin-react-hooks": "^4.6.2",
-    "typescript": "^5.8.3"
+    "happy-dom": "^15.11.7",
+    "typescript": "^5.8.3",
+    "vite": "^7.1.9",
+    "vitest": "^3.2.4"
   }
 }
diff --git a/contact/vitest.config.ts b/contact/vitest.config.ts
new file mode 100644
index 00000000..1dd6c6a6
--- /dev/null
+++ b/contact/vitest.config.ts
@@ -0,0 +1,11 @@
+import {defineConfig} from "vitest/config"
+import react from "@vitejs/plugin-react"
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    environment: "happy-dom",
+    globals: true,
+    passWithNoTests: true,
+  },
+})
diff --git a/doc-openwith/package.json b/doc-openwith/package.json
index 9633edb6..4671ba8f 100644
--- a/doc-openwith/package.json
+++ b/doc-openwith/package.json
@@ -1,5 +1,13 @@
 {
   "name": "document open with",
   "type": "module",
-  "main": "doc-openwith.js"
+  "main": "doc-openwith.js",
+  "devDependencies": {
+    "happy-dom": "^15.11.7",
+    "vitest": "^3.2.4"
+  },
+  "scripts": {
+    "test": "vitest run",
+    "test:watch": "vitest"
+  }
 }
diff --git a/doc-openwith/vitest.config.ts b/doc-openwith/vitest.config.ts
new file mode 100644
index 00000000..44198156
--- /dev/null
+++ b/doc-openwith/vitest.config.ts
@@ -0,0 +1,9 @@
+import {defineConfig} from "vitest/config"
+
+export default defineConfig({
+  test: {
+    environment: "happy-dom",
+    globals: true,
+    passWithNoTests: true,
+  },
+})
diff --git a/doc-presence/package.json b/doc-presence/package.json
index 81e9e3c8..09ed84ec 100644
--- a/doc-presence/package.json
+++ b/doc-presence/package.json
@@ -1,5 +1,13 @@
 {
   "name": "document presence",
   "type": "module",
-  "main": "doc-presence.js"
+  "main": "doc-presence.js",
+  "devDependencies": {
+    "happy-dom": "^15.11.7",
+    "vitest": "^3.2.4"
+  },
+  "scripts": {
+    "test": "vitest run",
+    "test:watch": "vitest"
+  }
 }
diff --git a/doc-presence/vitest.config.ts b/doc-presence/vitest.config.ts
new file mode 100644
index 00000000..44198156
--- /dev/null
+++ b/doc-presence/vitest.config.ts
@@ -0,0 +1,9 @@
+import {defineConfig} from "vitest/config"
+
+export default defineConfig({
+  test: {
+    environment: "happy-dom",
+    globals: true,
+    passWithNoTests: true,
+  },
+})
diff --git a/doc-title/package.json b/doc-title/package.json
index 09464d8c..9a1a93b3 100644
--- a/doc-title/package.json
+++ b/doc-title/package.json
@@ -7,7 +7,9 @@
     "dev": "vite build --watch",
     "build": "vite build",
     "sync": "vite build && pushwork sync",
-    "register": "pw-modules add \"$MODULE_SETTINGS_DOC_URL\" \"$(pushwork url)\""
+    "register": "pw-modules add \"$MODULE_SETTINGS_DOC_URL\" \"$(pushwork url)\"",
+    "test": "vitest run",
+    "test:watch": "vitest"
   },
   "dependencies": {
     "@automerge/automerge": "^3.2.5",
@@ -23,8 +25,10 @@
     "@typescript-eslint/parser": "^8.40.0",
     "eslint": "^9.34.0",
     "globals": "^16.4.0",
+    "happy-dom": "^15.11.7",
     "typescript-eslint": "^8.41.0",
     "vite": "^7.1.9",
-    "vite-plugin-css-injected-by-js": "^3.5.2"
+    "vite-plugin-css-injected-by-js": "^3.5.2",
+    "vitest": "^3.2.4"
   }
 }
diff --git a/doc-title/vitest.config.ts b/doc-title/vitest.config.ts
new file mode 100644
index 00000000..44198156
--- /dev/null
+++ b/doc-title/vitest.config.ts
@@ -0,0 +1,9 @@
+import {defineConfig} from "vitest/config"
+
+export default defineConfig({
+  test: {
+    environment: "happy-dom",
+    globals: true,
+    passWithNoTests: true,
+  },
+})
diff --git a/drafts/package.json b/drafts/package.json
index e392c66d..6377b99b 100644
--- a/drafts/package.json
+++ b/drafts/package.json
@@ -8,7 +8,9 @@
     "dev": "vite build --watch",
     "build": "vite build",
     "sync": "vite build && pushwork sync",
-    "register": "pw-modules add \"$MODULE_SETTINGS_DOC_URL\" \"$(pushwork url)\""
+    "register": "pw-modules add \"$MODULE_SETTINGS_DOC_URL\" \"$(pushwork url)\"",
+    "test": "vitest run",
+    "test:watch": "vitest"
   },
   "dependencies": {
     "@automerge/automerge": "3.3.0-fragments.1",
@@ -26,9 +28,11 @@
     "@typescript-eslint/parser": "^8.40.0",
     "eslint": "^9.34.0",
     "globals": "^16.4.0",
+    "happy-dom": "^15.11.7",
     "typescript-eslint": "^8.41.0",
     "vite": "^7.1.9",
     "vite-plugin-css-injected-by-js": "^3.5.2",
-    "vite-plugin-solid": "^2.11.10"
+    "vite-plugin-solid": "^2.11.10",
+    "vitest": "^3.2.4"
   }
 }
diff --git a/drafts/vitest.config.ts b/drafts/vitest.config.ts
new file mode 100644
index 00000000..715c53e5
--- /dev/null
+++ b/drafts/vitest.config.ts
@@ -0,0 +1,14 @@
+import {defineConfig} from "vitest/config"
+import solid from "vite-plugin-solid"
+
+export default defineConfig({
+  plugins: [solid()],
+  test: {
+    environment: "happy-dom",
+    globals: true,
+    passWithNoTests: true,
+  },
+  resolve: {
+    conditions: ["development", "browser"],
+  },
+})
diff --git a/file/package.json b/file/package.json
index af47917e..895fd3a5 100644
--- a/file/package.json
+++ b/file/package.json
@@ -18,7 +18,9 @@
     "build": "vite build",
     "dev": "vite build --watch",
     "push": "pnpm build && pushwork sync",
-    "register": "pw-modules add \"$MODULE_SETTINGS_DOC_URL\" \"$(pushwork url)\""
+    "register": "pw-modules add \"$MODULE_SETTINGS_DOC_URL\" \"$(pushwork url)\"",
+    "test": "vitest run",
+    "test:watch": "vitest"
   },
   "keywords": [],
   "author": "Ink & Switch",
@@ -54,8 +56,10 @@
   },
   "devDependencies": {
     "@inkandswitch/patchwork-bootloader": "^0.0.4",
+    "happy-dom": "^15.11.7",
     "typescript": "^5.8.3",
     "vite": "^5.4.19",
-    "vite-plugin-solid": "^2.10.0"
+    "vite-plugin-solid": "^2.10.0",
+    "vitest": "^3.2.4"
   }
 }
diff --git a/file/vitest.config.ts b/file/vitest.config.ts
new file mode 100644
index 00000000..715c53e5
--- /dev/null
+++ b/file/vitest.config.ts
@@ -0,0 +1,14 @@
+import {defineConfig} from "vitest/config"
+import solid from "vite-plugin-solid"
+
+export default defineConfig({
+  plugins: [solid()],
+  test: {
+    environment: "happy-dom",
+    globals: true,
+    passWithNoTests: true,
+  },
+  resolve: {
+    conditions: ["development", "browser"],
+  },
+})
diff --git a/folder/package.json b/folder/package.json
index a6fee2c7..9ffab513 100644
--- a/folder/package.json
+++ b/folder/package.json
@@ -15,7 +15,9 @@
     "dev": "node esbuild/watch.ts",
     "pushwatch": "pnpm dev pushwork",
     "sync": "pnpm build && npx pushwork sync",
-    "register": "pw-modules add \"$MODULE_SETTINGS_DOC_URL\" \"$(pushwork url)\""
+    "register": "pw-modules add \"$MODULE_SETTINGS_DOC_URL\" \"$(pushwork url)\"",
+    "test": "vitest run",
+    "test:watch": "vitest"
   },
   "keywords": [],
   "author": "Ink & Switch",
@@ -27,6 +29,8 @@
   },
   "devDependencies": {
     "@automerge/automerge-repo": "^2.6.0-subduction.9",
-    "esbuild": "^0.23.1"
+    "esbuild": "^0.23.1",
+    "happy-dom": "^15.11.7",
+    "vitest": "^3.2.4"
   }
 }
diff --git a/folder/vitest.config.ts b/folder/vitest.config.ts
new file mode 100644
index 00000000..44198156
--- /dev/null
+++ b/folder/vitest.config.ts
@@ -0,0 +1,9 @@
+import {defineConfig} from "vitest/config"
+
+export default defineConfig({
+  test: {
+    environment: "happy-dom",
+    globals: true,
+    passWithNoTests: true,
+  },
+})
diff --git a/frame-configurator/package.json b/frame-configurator/package.json
index a91589f0..1676d49a 100644
--- a/frame-configurator/package.json
+++ b/frame-configurator/package.json
@@ -8,7 +8,9 @@
     "watch": "vite --port 4444",
     "build": "vite build",
     "sync": "vite build && pushwork sync",
-    "register": "pw-modules add \"$MODULE_SETTINGS_DOC_URL\" \"$(pushwork url)\""
+    "register": "pw-modules add \"$MODULE_SETTINGS_DOC_URL\" \"$(pushwork url)\"",
+    "test": "vitest run",
+    "test:watch": "vitest"
   },
   "dependencies": {
     "@automerge/automerge": "^3.2.5",
@@ -26,9 +28,11 @@
     "babel-preset-solid": "^1.9.9",
     "eslint": "^9.34.0",
     "globals": "^16.4.0",
+    "happy-dom": "^15.11.7",
     "typescript-eslint": "^8.41.0",
     "vite": "^7.1.9",
     "vite-plugin-css-injected-by-js": "^3.5.2",
-    "vite-plugin-solid": "^2.11.10"
+    "vite-plugin-solid": "^2.11.10",
+    "vitest": "^3.2.4"
   }
 }
diff --git a/frame-configurator/src/FrameConfigurator.tsx b/frame-configurator/src/FrameConfigurator.tsx
index 2fe9e5f9..03781ab4 100644
--- a/frame-configurator/src/FrameConfigurator.tsx
+++ b/frame-configurator/src/FrameConfigurator.tsx
@@ -16,7 +16,11 @@ import {
 } from "solid-js";
 import { createStore, reconcile } from "solid-js/store";
 import { render } from "solid-js/web";
-import type { TinyPatchworkLayoutDoc } from "./types";
+import type {
+  TinyPatchworkLayoutDoc,
+  ThreepaneConfigDoc,
+  ToolRef,
+} from "./types";
 
 type ModuleOption = {
   id: string;
@@ -465,14 +469,18 @@ function FrameConfiguratorUI(props: {
     () => props.handle.url
   );
 
+  // The doctitle + contextbar config now live in the threepane config doc; we
+  // edit it here. Entries are [toolId, docId] pairs — the docid is the account
+  // doc (a placeholder; the frame feeds doctitle the selected doc).
+  const [threepaneDoc, threepaneHandle] = useDocument<ThreepaneConfigDoc>(
+    () => accountDoc()?.tools?.["threepane"]
+  );
+
   const allTools = useToolDescriptions();
 
   const frameOptions = createMemo(() =>
     filterToolsByTag([...allTools], "frame-tool")
   );
-  const sidebarOptions = createMemo(() =>
-    filterToolsByTag([...allTools], "sidebar-account")
-  );
   const documentToolbarOptions = createMemo(() =>
     filterToolsByTag([...allTools], "titlebar-tool")
   );
@@ -482,6 +490,22 @@ function FrameConfiguratorUI(props: {
 
   const docUrl = props.handle.url;
 
+  const doctitleIds = () =>
+    threepaneDoc()?.doctitle?.tools?.map((ref) => ref[0]);
+  const contextIds = () => threepaneDoc()?.contextbar?.tabs?.map((ref) => ref[0]);
+
+  const toPairs = (ids: string[]): ToolRef[] =>
+    ids.map((id) => [id, docUrl]);
+
+  const setDoctitle = (next: string[]) =>
+    threepaneHandle()?.change((doc) => {
+      doc.doctitle.tools = toPairs(next);
+    });
+  const setContext = (next: string[]) =>
+    threepaneHandle()?.change((doc) => {
+      doc.contextbar.tabs = toPairs(next);
+    });
+
   const setField = <K extends keyof TinyPatchworkLayoutDoc>(
     key: K,
     value: TinyPatchworkLayoutDoc[K]
@@ -491,16 +515,6 @@ function FrameConfiguratorUI(props: {
     });
   };
 
-  const setArrayField = (
-    key: keyof TinyPatchworkLayoutDoc,
-    next: string[]
-  ) => {
-    props.handle.change((doc: any) => {
-      const arr = doc[key];
-      arr.splice(0, arr.length, ...next);
-    });
-  };
-
   return (
     <Show
       when={accountDoc()}
@@ -518,28 +532,27 @@ function FrameConfiguratorUI(props: {
           docUrl={docUrl}
         />
 
-        <PreviewCardGrid
-          label="Account Sidebar"
-          value={accountDoc()!.accountSidebarToolId}
-          onChange={(v) => setField("accountSidebarToolId", v as any)}
-          options={sidebarOptions()}
-          docUrl={docUrl}
-        />
-
-        <ToolbarStrip
-          label="Toolbar"
-          values={accountDoc()!.documentToolbarToolIds}
-          setValues={(next) => setArrayField("documentToolbarToolIds", next)}
-          allOptions={documentToolbarOptions()}
-          docUrl={docUrl}
-        />
-
-        <ContextTabs
-          label="Context Tools"
-          values={accountDoc()!.contextToolIds}
-          setValues={(next) => setArrayField("contextToolIds", next)}
-          allOptions={contextToolOptions()}
-        />
+        <Show
+          when={threepaneDoc()}
+          fallback={
+            <p class="empty-message">Preparing layout configuration…</p>
+          }
+        >
+          <ToolbarStrip
+            label="Toolbar"
+            values={doctitleIds()}
+            setValues={setDoctitle}
+            allOptions={documentToolbarOptions()}
+            docUrl={docUrl}
+          />
+
+          <ContextTabs
+            label="Context Tools"
+            values={contextIds()}
+            setValues={setContext}
+            allOptions={contextToolOptions()}
+          />
+        </Show>
 
         <Show when={(accountDoc() as any)?.themePreferencesUrl}>
           <div class="config-section">
diff --git a/frame-configurator/src/types.ts b/frame-configurator/src/types.ts
index fc8990de..d246dbf7 100644
--- a/frame-configurator/src/types.ts
+++ b/frame-configurator/src/types.ts
@@ -5,7 +5,18 @@ export type TinyPatchworkLayoutDoc = {
   moduleSettingsUrl: AutomergeUrl;
 
   frameToolId: string;
-  accountSidebarToolId: string;
-  contextToolIds: string[];
-  documentToolbarToolIds: string[];
+  /** @deprecated legacy fields, migrated into the threepane config doc */
+  accountSidebarToolId?: string;
+  contextToolIds?: string[];
+  documentToolbarToolIds?: string[];
+
+  tools?: Record<string, AutomergeUrl>;
+};
+
+export type ToolRef = [toolId: string, docId: AutomergeUrl];
+
+export type ThreepaneConfigDoc = {
+  sidebar: { widgets: ToolRef[] };
+  contextbar: { tabs: ToolRef[] };
+  doctitle: { tools: ToolRef[] };
 };
diff --git a/frame-configurator/vitest.config.ts b/frame-configurator/vitest.config.ts
new file mode 100644
index 00000000..715c53e5
--- /dev/null
+++ b/frame-configurator/vitest.config.ts
@@ -0,0 +1,14 @@
+import {defineConfig} from "vitest/config"
+import solid from "vite-plugin-solid"
+
+export default defineConfig({
+  plugins: [solid()],
+  test: {
+    environment: "happy-dom",
+    globals: true,
+    passWithNoTests: true,
+  },
+  resolve: {
+    conditions: ["development", "browser"],
+  },
+})
diff --git a/history-view/package.json b/history-view/package.json
index 5a1f8728..8ed682a7 100644
--- a/history-view/package.json
+++ b/history-view/package.json
@@ -7,7 +7,9 @@
     "dev": "vite build --watch",
     "build": "vite build",
     "sync": "vite build && pushwork sync",
-    "register": "pw-modules add \"$MODULE_SETTINGS_DOC_URL\" \"$(pushwork url)\""
+    "register": "pw-modules add \"$MODULE_SETTINGS_DOC_URL\" \"$(pushwork url)\"",
+    "test": "vitest run",
+    "test:watch": "vitest"
   },
   "dependencies": {
     "@automerge/automerge": "3.3.0-fragments.1",
@@ -27,10 +29,12 @@
     "@typescript-eslint/parser": "^8.40.0",
     "eslint": "^9.34.0",
     "globals": "^16.4.0",
+    "happy-dom": "^15.11.7",
     "solid-js": "^1.9.10",
     "typescript-eslint": "^8.41.0",
     "vite": "^7.1.9",
     "vite-plugin-css-injected-by-js": "^3.5.2",
-    "vite-plugin-solid": "^2.11.10"
+    "vite-plugin-solid": "^2.11.10",
+    "vitest": "^3.2.4"
   }
 }
diff --git a/history-view/vitest.config.ts b/history-view/vitest.config.ts
new file mode 100644
index 00000000..715c53e5
--- /dev/null
+++ b/history-view/vitest.config.ts
@@ -0,0 +1,14 @@
+import {defineConfig} from "vitest/config"
+import solid from "vite-plugin-solid"
+
+export default defineConfig({
+  plugins: [solid()],
+  test: {
+    environment: "happy-dom",
+    globals: true,
+    passWithNoTests: true,
+  },
+  resolve: {
+    conditions: ["development", "browser"],
+  },
+})
diff --git a/module-settings-manager/package.json b/module-settings-manager/package.json
index f11098d0..88934d24 100644
--- a/module-settings-manager/package.json
+++ b/module-settings-manager/package.json
@@ -23,7 +23,9 @@
     "build": "node esbuild/build.ts",
     "dev": "node esbuild/watch.ts",
     "pushwatch": "pnpm dev pushwork",
-    "register": "pw-modules add \"$MODULE_SETTINGS_DOC_URL\" \"$(pushwork url)\""
+    "register": "pw-modules add \"$MODULE_SETTINGS_DOC_URL\" \"$(pushwork url)\"",
+    "test": "vitest run",
+    "test:watch": "vitest"
   },
   "dependencies": {
     "@inkandswitch/patchwork-bootloader": "^0.0.8",
@@ -39,7 +41,11 @@
     "@inkandswitch/patchwork-plugins": "^0.0.6",
     "babel-preset-solid": "^1.9.9",
     "esbuild": "^0.23.1",
+    "happy-dom": "^15.11.7",
     "solid-js": "^1.9.10",
-    "typescript": "~5.9.3"
+    "typescript": "~5.9.3",
+    "vite": "^7.1.9",
+    "vite-plugin-solid": "^2.11.10",
+    "vitest": "^3.2.4"
   }
 }
diff --git a/module-settings-manager/src/module-settings/components/ModuleControls.tsx b/module-settings-manager/src/module-settings/components/ModuleControls.tsx
index 86ae46d2..cb6bd175 100644
--- a/module-settings-manager/src/module-settings/components/ModuleControls.tsx
+++ b/module-settings-manager/src/module-settings/components/ModuleControls.tsx
@@ -17,9 +17,12 @@ import {
 import {
   DEFAULT_BRANCH,
   chosenBranchFor,
+  chosenPinFor,
   getModuleEntryKind,
+  publishVersions,
   type BranchesDoc,
   type ModuleSettingsDocWithBranches,
+  type UrlHeads,
 } from "../utils/module-types.ts";
 import { unregisterPlugins } from "@inkandswitch/patchwork-plugins";
 import {
@@ -75,6 +78,12 @@ export function ModuleControls(props: ModuleControlsProps) {
         />
       </Show>
       <Show when={kind() === "folder" || kind() === "directory"}>
+        <VersionControls
+          folderUrl={props.url}
+          repo={props.repo}
+          settingsHandle={props.settingsHandle}
+          userSettingsHandle={props.userSettingsHandle}
+        />
         <ConvertToBranchesButton
           moduleUrl={props.url}
           repo={props.repo}
@@ -86,6 +95,99 @@ export function ModuleControls(props: ModuleControlsProps) {
   );
 }
 
+interface VersionControlsProps {
+  /** The folder doc whose versions can be pinned. */
+  folderUrl: AutomergeUrl;
+  repo: Repo;
+  settingsHandle: DocHandle<ModuleSettingsDocWithBranches>;
+  userSettingsHandle?: DocHandle<ModuleSettingsDocWithBranches>;
+}
+
+/**
+ * Pin a folder module to a frozen previous version. Pins are written into the
+ * user's own settings doc (like branch choices) under `pinned`, keyed by the
+ * folder URL. The watcher then loads that exact, already-cached version instead
+ * of the latest, and stops hot-reloading it until unpinned.
+ */
+function VersionControls(props: VersionControlsProps) {
+  // Write pins to the user's own settings doc so they're user-local.
+  const targetHandle = () => props.userSettingsHandle ?? props.settingsHandle;
+  const targetDoc = createMemo(() => makeDocumentProjection(targetHandle()));
+
+  const [folderHandle] = createResource(
+    () => props.folderUrl,
+    (url) => props.repo.find<{ lastSyncAt?: number }>(url)
+  );
+
+  const versions = createMemo(() => {
+    const handle = folderHandle();
+    return handle ? publishVersions(handle) : [];
+  });
+
+  const currentPin = createMemo(() =>
+    chosenPinFor([targetDoc()], props.folderUrl)
+  );
+
+  const isPinned = createMemo(() => !!currentPin());
+
+  const sameHeads = (a: UrlHeads | undefined, b: UrlHeads | undefined) =>
+    !!a && !!b && a.length === b.length && a.every((h, i) => h === b[i]);
+
+  // The <option> value currently selected: "latest" when unpinned, otherwise
+  // the index of the matching version (or "latest" if the pin isn't in range).
+  const selectedValue = createMemo(() => {
+    const pin = currentPin();
+    if (!pin) return "latest";
+    const idx = versions().findIndex((v) => sameHeads(v.heads, pin));
+    return idx === -1 ? "latest" : String(idx);
+  });
+
+  const pin = (heads: UrlHeads) => {
+    targetHandle().change((d) => {
+      if (!d.pinned) d.pinned = {} as Record<AutomergeUrl, UrlHeads>;
+      d.pinned[props.folderUrl] = heads;
+    });
+  };
+
+  const unpin = () => {
+    targetHandle().change((d) => {
+      if (d.pinned) delete d.pinned[props.folderUrl];
+    });
+  };
+
+  return (
+    <span class="module-settings-manager__version">
+      <select
+        class="module-settings-manager__version-select"
+        value={selectedValue()}
+        onChange={(e) => {
+          const v = e.currentTarget.value;
+          if (v === "latest") {
+            unpin();
+            return;
+          }
+          const chosen = versions()[Number(v)];
+          if (chosen) pin(chosen.heads);
+        }}
+        title={
+          isPinned()
+            ? "Pinned to a previous version — won't update"
+            : "Latest version — updates live"
+        }
+      >
+        <option value="latest">latest</option>
+        <For each={versions()}>
+          {(v, i) => (
+            <option value={i()}>
+              {v.heads[0]?.slice(0, 7) ?? "?"}
+            </option>
+          )}
+        </For>
+      </select>
+    </span>
+  );
+}
+
 interface BranchControlsProps {
   branchesDocUrl: AutomergeUrl;
   branchesDoc: BranchesDoc | undefined;
@@ -159,15 +261,33 @@ function BranchControls(props: BranchControlsProps) {
     !!props.userSettingsHandle &&
     props.userSettingsHandle.url !== props.settingsHandle.url;
 
+  // The folder doc the current branch resolves to — pin versions of *that*.
+  const branchFolderUrl = createMemo(() => {
+    const url = props.branchesDoc?.branches?.[currentBranch()];
+    return url && isValidAutomergeUrl(url) ? url : undefined;
+  });
+
   return (
-    <FilterableBranchPicker
-      branches={branchNames()}
-      branchUrls={props.branchesDoc?.branches}
-      value={currentBranch()}
-      personal={isPersonal()}
-      onChange={setBranch}
-      onAdd={addBranch}
-    />
+    <>
+      <FilterableBranchPicker
+        branches={branchNames()}
+        branchUrls={props.branchesDoc?.branches}
+        value={currentBranch()}
+        personal={isPersonal()}
+        onChange={setBranch}
+        onAdd={addBranch}
+      />
+      <Show when={branchFolderUrl()}>
+        {(folderUrl) => (
+          <VersionControls
+            folderUrl={folderUrl()}
+            repo={props.repo}
+            settingsHandle={props.settingsHandle}
+            userSettingsHandle={props.userSettingsHandle}
+          />
+        )}
+      </Show>
+    </>
   );
 }
 
diff --git a/module-settings-manager/src/module-settings/utils/module-types.ts b/module-settings-manager/src/module-settings/utils/module-types.ts
index 80ad36ab..03d658be 100644
--- a/module-settings-manager/src/module-settings/utils/module-types.ts
+++ b/module-settings-manager/src/module-settings/utils/module-types.ts
@@ -1,9 +1,12 @@
-import type { AutomergeUrl, Repo } from "@automerge/automerge-repo";
+import type { AutomergeUrl, DocHandle, Repo } from "@automerge/automerge-repo";
 import { getType } from "@inkandswitch/patchwork-filesystem";
 import type { ModuleSettingsDoc } from "@inkandswitch/patchwork-filesystem";
 
 export type ModuleEntry = string;
 
+/** The encoded heads of a document — the return type of `handle.heads()`. */
+export type UrlHeads = ReturnType<DocHandle<unknown>["heads"]>;
+
 export type BranchesDoc = {
   "@patchwork": { type: "branches" };
   branches: { [branchName: string]: AutomergeUrl };
@@ -16,6 +19,12 @@ export type ModuleSettingsDocWithBranches = Omit<
 > & {
   modules: ModuleEntry[];
   branches?: Record<AutomergeUrl, string>;
+  /**
+   * Pins a folder module to a frozen previous version, keyed by the folder doc
+   * URL. The watcher loads the exact (already-cached) versioned URL and does not
+   * hot-reload it. Mirrors `branches` as a user-local override map.
+   */
+  pinned?: Record<AutomergeUrl, UrlHeads>;
 };
 
 export type ModuleEntryKind = "folder" | "directory" | "branches" | "unknown";
@@ -49,6 +58,44 @@ export function chosenBranchFor(
   return DEFAULT_BRANCH;
 }
 
+/**
+ * Read the active pin for a folder doc, mirroring {@link chosenBranchFor}: the
+ * user's settings doc (passed first) wins over a viewed foreign doc.
+ */
+export function chosenPinFor(
+  settingsDocs: (ModuleSettingsDocWithBranches | undefined)[],
+  folderUrl: AutomergeUrl
+): UrlHeads | undefined {
+  for (const doc of settingsDocs) {
+    const heads = doc?.pinned?.[folderUrl];
+    if (heads) return heads;
+  }
+  return undefined;
+}
+
+export type PublishVersion = { heads: UrlHeads; at: number };
+
+/**
+ * List the distinct *published* versions of a folder doc, newest first. Folder
+ * docs bump `lastSyncAt` once per publish, so we walk the change history and
+ * collapse runs that share a `lastSyncAt` into a single entry. Capped to the
+ * most recent `limit` publishes to bound the cost of viewing each point.
+ */
+export function publishVersions(
+  handle: DocHandle<{ lastSyncAt?: number }>,
+  limit = 50
+): PublishVersion[] {
+  const history = handle.history() ?? [];
+  const out: PublishVersion[] = [];
+  for (let i = history.length - 1; i >= 0 && out.length < limit; i--) {
+    const heads = history[i];
+    const at = handle.view(heads).doc()?.lastSyncAt ?? 0;
+    if (out.length && out[out.length - 1].at === at) continue;
+    out.push({ heads, at });
+  }
+  return out;
+}
+
 export async function resolveModuleEntryToFolderUrl(
   repo: Repo,
   url: AutomergeUrl,
diff --git a/module-settings-manager/vitest.config.ts b/module-settings-manager/vitest.config.ts
new file mode 100644
index 00000000..715c53e5
--- /dev/null
+++ b/module-settings-manager/vitest.config.ts
@@ -0,0 +1,14 @@
+import {defineConfig} from "vitest/config"
+import solid from "vite-plugin-solid"
+
+export default defineConfig({
+  plugins: [solid()],
+  test: {
+    environment: "happy-dom",
+    globals: true,
+    passWithNoTests: true,
+  },
+  resolve: {
+    conditions: ["development", "browser"],
+  },
+})
diff --git a/package.json b/package.json
index 1f5a0fb5..3268fa78 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,10 @@
     "build:tools:ci": "node scripts/build-static.mjs --install",
     "serve:tools": "node scripts/serve-tools.mjs",
     "dev:tools": "pnpm build:static && pnpm serve:tools",
-    "deploy:tools": "pnpm build:static && pnpm dlx netlify-cli deploy --dir=static-dist --prod"
+    "deploy:tools": "pnpm build:static && pnpm dlx netlify-cli deploy --dir=static-dist --prod",
+    "lint": "node scripts/lint-standalone.mjs",
+    "lint:standalone": "node scripts/lint-standalone.mjs",
+    "test": "pnpm -r test"
   },
   "packageManager": "pnpm@11.9.0"
 }
diff --git a/patchwork-frame/src/components/ContextSidebar.tsx b/patchwork-frame/src/components/ContextSidebar.tsx
deleted file mode 100644
index ca93a7ae..00000000
--- a/patchwork-frame/src/components/ContextSidebar.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-import type { AutomergeUrl } from "@automerge/automerge-repo";
-import {
-  getRegistry,
-  type ToolDescription,
-} from "@inkandswitch/patchwork-plugins";
-import { createSignal, onCleanup, onMount, For, Show } from "solid-js";
-import type { Accessor } from "solid-js";
-import { Sidebar } from "./Sidebar";
-
-type ContextSidebarProps = {
-  contextToolIds: Accessor<string[] | undefined>;
-  docUrl: AutomergeUrl;
-  /**
-   * Selected tab, owned by the frame *above* the branch-switch boundary so it
-   * survives document and branch switches (the tool content below still
-   * remounts and re-scopes per draft).
-   */
-  selectedToolId: Accessor<string | undefined>;
-  setSelectedToolId: (id: string) => void;
-  isCollapsed: Accessor<boolean>;
-  width: Accessor<number>;
-  onMouseDown: (side: "left" | "right", e: MouseEvent) => void;
-  onToggleClick: (side: "left" | "right", e: MouseEvent) => void;
-  onClose: () => void;
-};
-
-/**
- * The document context sidebar: a tabbed Solid component that hosts the
- * configured context tools (`AccountDoc.contextToolIds`). Replaces the former
- * `context-sidebar` legacy tool, whose selected-tab state was local and reset
- * on every branch switch. Here the selection is lifted into the frame, so only
- * the per-tab tool content remounts.
- */
-export function ContextSidebar(props: ContextSidebarProps) {
-  const toolRegistry = getRegistry<ToolDescription>("patchwork:tool");
-
-  // Tool descriptions can register/load late; bump a version so tab labels
-  // recompute when the registry changes (mirrors the old tool's behaviour).
-  const [registryVersion, setRegistryVersion] = createSignal(0);
-  onMount(() => {
-    const off = toolRegistry.on("changed", () => {
-      setRegistryVersion((v) => v + 1);
-    });
-    onCleanup(off);
-  });
-
-  const toolIds = () => props.contextToolIds() ?? [];
-
-  // The selection may name a tool that isn't in the current list (or be unset);
-  // fall back to the first tab so there's always a valid active tool.
-  const activeToolId = () => {
-    const ids = toolIds();
-    const selected = props.selectedToolId();
-    return selected && ids.includes(selected) ? selected : ids[0];
-  };
-
-  const toolName = (id: string) => {
-    registryVersion();
-    return toolRegistry.get(id)?.name ?? id;
-  };
-
-  return (
-    <Sidebar
-      side="right"
-      isCollapsed={props.isCollapsed}
-      width={props.width}
-      onMouseDown={props.onMouseDown}
-      onToggleClick={props.onToggleClick}
-    >
-      <div class="context-sidebar">
-        <div class="context-sidebar__tabs">
-          <div role="tablist" class="context-sidebar__tablist">
-            <For each={toolIds()}>
-              {(id) => (
-                <button
-                  type="button"
-                  role="tab"
-                  class="context-sidebar__tab"
-                  data-active={activeToolId() === id ? "" : undefined}
-                  onClick={() => props.setSelectedToolId(id)}
-                >
-                  {toolName(id)}
-                </button>
-              )}
-            </For>
-          </div>
-        </div>
-        <div class="context-sidebar__content">
-          <Show when={activeToolId()} keyed>
-            {(toolId) => (
-              <patchwork-view doc-url={props.docUrl} tool-id={toolId} />
-            )}
-          </Show>
-        </div>
-      </div>
-    </Sidebar>
-  );
-}
diff --git a/patchwork-frame/src/components/DocumentToolbar.tsx b/patchwork-frame/src/components/DocumentToolbar.tsx
deleted file mode 100644
index d22f5119..00000000
--- a/patchwork-frame/src/components/DocumentToolbar.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-import type { AutomergeUrl } from "@automerge/automerge-repo";
-import type { Accessor } from "solid-js";
-import { Show } from "solid-js";
-
-interface DocumentToolbarProps {
-  toolIds: Accessor<string[] | undefined>;
-  docUrl: Accessor<AutomergeUrl | undefined>;
-  /** Show a "bring back the left sidebar" button at the start of the toolbar. */
-  showLeftSidebarButton?: Accessor<boolean>;
-  onShowLeftSidebar?: () => void;
-  /** Show a "bring back the right sidebar" button at the end of the toolbar. */
-  showRightSidebarButton?: Accessor<boolean>;
-  onShowRightSidebar?: () => void;
-}
-
-export function DocumentToolbar(props: DocumentToolbarProps) {
-  return (
-    <Show when={props.docUrl() && props.toolIds()} keyed>
-      {(ids) => (
-        <div class="toolbar">
-          <Show when={props.showLeftSidebarButton?.()}>
-            <button
-              type="button"
-              class="toolbar__sidebar-toggle toolbar__sidebar-toggle--left"
-              title="Show sidebar"
-              aria-label="Show sidebar"
-              onClick={() => props.onShowLeftSidebar?.()}
-            >
-              <PanelLeftOpenIcon />
-            </button>
-          </Show>
-
-          {ids.map((toolId) => (
-            <patchwork-view doc-url={props.docUrl()!} tool-id={toolId} />
-          ))}
-
-          <Show when={props.showRightSidebarButton?.()}>
-            <button
-              type="button"
-              class="toolbar__sidebar-toggle toolbar__sidebar-toggle--right"
-              title="Show context sidebar"
-              aria-label="Show context sidebar"
-              onClick={() => props.onShowRightSidebar?.()}
-            >
-              <PanelRightOpenIcon />
-            </button>
-          </Show>
-        </div>
-      )}
-    </Show>
-  );
-}
-
-// lucide `panel-left-open`
-function PanelLeftOpenIcon() {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="18"
-      height="18"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      stroke-width="1.75"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    >
-      <rect width="18" height="18" x="3" y="3" rx="2" />
-      <path d="M9 3v18" />
-      <path d="m14 9 3 3-3 3" />
-    </svg>
-  );
-}
-
-// lucide `panel-right-open`
-function PanelRightOpenIcon() {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="18"
-      height="18"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      stroke-width="1.75"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    >
-      <rect width="18" height="18" x="3" y="3" rx="2" />
-      <path d="M15 3v18" />
-      <path d="m10 15-3-3 3-3" />
-    </svg>
-  );
-}
diff --git a/patchwork-frame/src/datatypes.ts b/patchwork-frame/src/datatypes.ts
deleted file mode 100644
index 2a79900b..00000000
--- a/patchwork-frame/src/datatypes.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import type { DatatypeImplementation } from "@inkandswitch/patchwork-plugins";
-import type { AccountDoc } from "./types";
-
-/**
- * Default scalar configuration for a fresh account. Subdoc URLs are intentionally
- * absent and are populated lazily by the frame on first mount.
- */
-export const AccountDatatype: DatatypeImplementation<AccountDoc> = {
-  init(doc) {
-    doc.frameToolId = "patchwork-frame";
-    doc.accountSidebarToolId = "chee/sideboard";
-    doc.contextToolIds = ["comments-view", "history-view", "context-view"];
-    doc.documentToolbarToolIds = [
-      "document-title",
-      "spacer",
-      "highlight-changes-checkbox",
-      "add-doc-to-sidebar-button",
-    ];
-  },
-  getTitle: () => "Patchwork Account",
-};
diff --git a/patchwork-frame/src/index.tsx b/patchwork-frame/src/index.tsx
deleted file mode 100644
index 5431eda3..00000000
--- a/patchwork-frame/src/index.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { Plugin, ToolImplementation } from "@inkandswitch/patchwork-plugins";
-import { render } from "solid-js/web";
-import type { AccountDoc } from "./types";
-
-export const plugins: Plugin<any>[] = [
-  {
-    type: "patchwork:datatype",
-    id: "account",
-    name: "Patchwork Account",
-    icon: "UserCircle",
-    unlisted: true,
-    async load() {
-      const { AccountDatatype } = await import("./datatypes");
-      return AccountDatatype;
-    },
-  },
-  {
-    type: "patchwork:tool",
-    id: "patchwork-frame",
-    tags: ["frame-tool"],
-    name: "Patchwork Frame",
-    icon: "Window",
-    supportedDatatypes: ["account"],
-    async load(): Promise<ToolImplementation<AccountDoc>> {
-      const { PatchworkFrame } = await import("./PatchworkFrame");
-      return (handle, element) => {
-        return render(
-          () => <PatchworkFrame handle={handle} repo={element.repo} />,
-          element
-        );
-      };
-    },
-  },
-];
diff --git a/patchwork-frame/src/types.ts b/patchwork-frame/src/types.ts
deleted file mode 100644
index aebbbb85..00000000
--- a/patchwork-frame/src/types.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { AutomergeUrl } from "@automerge/automerge-repo";
-
-/**
- * The account document for a Patchwork frame.
- *
- * Scalar configuration (frame/sidebar/toolbar tool ids) is populated eagerly
- * by AccountDatatype.init. Subdocument URLs (rootFolderUrl, moduleSettingsUrl,
- * contactUrl) are optional and are lazily populated by the frame on first
- * mount via createDocOfDatatype2 of their respective datatypes.
- */
-export type AccountDoc = {
-  frameToolId: string;
-  accountSidebarToolId: string;
-  contextToolIds: string[];
-  documentToolbarToolIds: string[];
-
-  rootFolderUrl?: AutomergeUrl;
-  moduleSettingsUrl?: AutomergeUrl;
-  contactUrl?: AutomergeUrl;
-};
-
-/** @deprecated use AccountDoc */
-export type TinyPatchworkConfigDoc = AccountDoc;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e505bd97..9b4ea131 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -41,6 +41,9 @@ importers:
       babel-preset-solid:
         specifier: ^1.9.9
         version: 1.9.12(@babel/core@7.28.4(supports-color@5.5.0))(solid-js@1.9.13)
+      happy-dom:
+        specifier: ^15.11.7
+        version: 15.11.7
       solid-js:
         specifier: ^1.9.9
         version: 1.9.13
@@ -56,6 +59,9 @@ importers:
       vite-plugin-solid:
         specifier: ^2.11.10
         version: 2.11.12(solid-js@1.9.13)(vite@7.3.5(@types/node@24.13.2))
+      vitest:
+        specifier: ^3.2.4
+        version: 3.2.6(@types/debug@4.1.13)(@types/node@24.13.2)(happy-dom@15.11.7)
 
   account-picker:
     dependencies:
@@ -105,9 +111,21 @@ importers:
       esbuild:
         specifier: ^0.23.1
         version: 0.23.1
+      happy-dom:
+        specifier: ^15.11.7
+        version: 15.11.7
       typescript:
         specifier: ^5.8.3
         version: 5.9.3
+      vite:
+        specifier: ^7.1.9
+        version: 7.3.5(@types/node@24.13.2)
+      vite-plugin-solid:
+        specifier: ^2.11.10
+        version: 2.11.12(solid-js@1.9.13)(vite@7.3.5(@types/node@24.13.2))
+      vitest:
+        specifier: ^3.2.4
+        version: 3.2.6(@types/debug@4.1.13)(@types/node@24.13.2)(happy-dom@15.11.7)
 
   add-doc-to-sidebar-button:
     dependencies:
@@ -123,6 +141,13 @@ importers:
       '@inkandswitch/patchwork-plugins':
         specifier: ^0.0.6
         version: 0.0.6(@automerge/automerge-repo@2.6.0-subduction.34)(@automerge/automerge@3.2.6)(@inkandswitch/patchwork-filesystem@0.0.4(@automerge/automerge-repo@2.6.0-subduction.34)(@automerge/automerge@3.2.6))
+    devDependencies:
+      happy-dom:
+        specifier: ^15.11.7
+        version: 15.11.7
+      vitest:
+        specifier: ^3.2.4
+        version: 3.2.6(@types/debug@4.1.13)(@types/node@24.13.2)(happy-dom@15.11.7)
 
   codemirror-base:
     dependencies:
@@ -193,12 +218,24 @@ importers:
       globals:
         specifier: ^16.4.0
         version: 16.5.0
+      happy-dom:
+        specifier: ^15.11.7
+        version: 15.11.7
       typescript:
         specifier: ~5.9.3
         version: 5.9.3
       typescript-eslint:
         specifier: ^8.45.0
         version: 8.62.0(eslint@9.39.4(supports-color@5.5.0))(supports-color@5.5.0)(typescript@5.9.3)
+      vite:
+        specifier: ^7.1.9
+        version: 7.3.5(@types/node@24.13.2)
+      vite-plugin-solid:
+        specifier: ^2.11.10
+        version: 2.11.12(solid-js@1.9.13)(vite@7.3.5(@types/node@24.13.2))
+      vitest:
+        specifier: ^3.2.4
+        version: 3.2.6(@types/debug@4.1.13)(@types/node@24.13.2)(happy-dom@15.11.7)
 
   codemirror-markdown:
     dependencies:
@@ -266,12 +303,18 @@ importers:
       globals:
         specifier: ^16.4.0
         version: 16.5.0
+      happy-dom:
+        specifier: ^15.11.7
+        version: 15.11.7
       typescript:
         specifier: ~5.9.3
         version: 5.9.3
       typescript-eslint:
         specifier: ^8.45.0
         version: 8.62.0(eslint@9.39.4)(typescript@5.9.3)
+      vitest:
+        specifier: ^3.2.4
+        version: 3.2.6(@types/debug@4.1.13)(@types/node@24.13.2)(happy-dom@15.11.7)
 
   commands:
     dependencies:
@@ -291,6 +334,12 @@ importers:
       esbuild:
         specifier: ^0.23.1
         version: 0.23.1
+      happy-dom:
+        specifier: ^15.11.7
+        version: 15.11.7
+      vitest:
+        specifier: ^3.2.4
+        version: 3.2.6(@types/debug@4.1.13)(@types/node@24.13.2)(happy-dom@15.11.7)
 
   comments-view:
     dependencies:
@@ -337,6 +386,9 @@ importers:
       globals:
         specifier: ^16.4.0
         version: 16.5.0
+      happy-dom:
+        specifier: ^15.11.7
+        version: 15.11.7
       typescript-eslint:
         specifier: ^8.41.0
         version: 8.62.0(eslint@9.39.4)(typescript@5.9.3)
@@ -349,6 +401,9 @@ importers:
       vite-plugin-solid:
         specifier: ^2.11.10
         version: 2.11.12(solid-js@1.9.13)(vite@7.3.5(@types/node@24.13.2))
+      vitest:
+        specifier: ^3.2.4
+        version: 3.2.6(@types/debug@4.1.13)(@types/node@24.13.2)(happy-dom@15.11.7)
 
   contact:
     dependencies:
@@ -407,13 +462,36 @@ importers:
       eslint-plugin-react-hooks:
         specifier: ^4.6.2
         version: 4.6.2(eslint@9.39.4)
+      happy-dom:
+        specifier: ^15.11.7
+        version: 15.11.7
       typescript:
         specifier: ^5.8.3
         version: 5.9.3
+      vite:
+        specifier: ^7.1.9
+        version: 7.3.5(@types/node@24.13.2)
+      vitest:
+        specifier: ^3.2.4
+        version: 3.2.6(@types/debug@4.1.13)(@types/node@24.13.2)(happy-dom@15.11.7)
 
-  doc-openwith: {}
-
-  doc-presence: {}
+  doc-openwith:
+    devDependencies:
+      happy-dom:
+        specifier: ^15.11.7
+        version: 15.11.7
+      vitest:
+        specifier: ^3.2.4
+        version: 3.2.6(@types/debug@4.1.13)(@types/node@24.13.2)(happy-dom@15.11.7)
+
+  doc-presence:
+    devDependencies:
+      happy-dom:
+        specifier: ^15.11.7
+        version: 15.11.7
+      vitest:
+        specifier: ^3.2.4
+        version: 3.2.6(@types/debug@4.1.13)(@types/node@24.13.2)(happy-dom@15.11.7)
 
   doc-title:
     dependencies:
@@ -451,6 +529,9 @@ importers:
       globals:
         specifier: ^16.4.0
         version: 16.5.0
+      happy-dom:
+        specifier: ^15.11.7
+        version: 15.11.7
       typescript-eslint:
         specifier: ^8.41.0
         version: 8.62.0(eslint@9.39.4)(typescript@5.9.3)
@@ -460,6 +541,9 @@ importers:
       vite-plugin-css-injected-by-js:
         specifier: ^3.5.2
         version: 3.5.2(vite@7.3.5(@types/node@24.13.2))
+      vitest:
+        specifier: ^3.2.4
+        version: 3.2.6(@types/debug@4.1.13)(@types/node@24.13.2)(happy-dom@15.11.7)
 
   drafts:
     dependencies:
@@ -503,6 +587,9 @@ importers:
       globals:
         specifier: ^16.4.0
         version: 16.5.0
+      happy-dom:
+        specifier: ^15.11.7
+        version: 15.11.7
       typescript-eslint:
         specifier: ^8.41.0
         version: 8.62.0(eslint@9.39.4)(typescript@5.9.3)
@@ -515,6 +602,9 @@ importers:
       vite-plugin-solid:
         specifier: ^2.11.10
         version: 2.11.12(solid-js@1.9.13)(vite@7.3.5(@types/node@24.13.2))
+      vitest:
+        specifier: ^3.2.4
+        version: 3.2.6(@types/debug@4.1.13)(@types/node@24.13.2)(happy-dom@15.11.7)
 
   file:
     dependencies:
@@ -606,6 +696,9 @@ importers:
       '@inkandswitch/patchwork-bootloader':
         specifier: ^0.0.4
         version: 0.0.4(@automerge/automerge-repo-keyhive@0.0.0-alpha.71)(@automerge/automerge-repo@2.5.6(supports-color@5.5.0))(@automerge/automerge@3.2.6)(@automerge/vanillajs@2.5.0)(@keyhive/keyhive@0.0.0-alpha.40)
+      happy-dom:
+        specifier: ^15.11.7
+        version: 15.11.7
       typescript:
         specifier: ^5.8.3
         version: 5.9.3
@@ -615,6 +708,9 @@ importers:
       vite-plugin-solid:
         specifier: ^2.10.0
         version: 2.11.12(solid-js@1.9.13)(vite@5.4.21(@types/node@24.13.2))
+      vitest:
+        specifier: ^3.2.4
+        version: 3.2.6(@types/debug@4.1.13)(@types/node@24.13.2)(happy-dom@15.11.7)
 
   folder:
     dependencies:
@@ -637,6 +733,12 @@ importers:
       esbuild:
         specifier: ^0.23.1
         version: 0.23.1
+      happy-dom:
+        specifier: ^15.11.7
+        version: 15.11.7
+      vitest:
+        specifier: ^3.2.4
+        version: 3.2.6(@types/debug@4.1.13)(@types/node@24.13.2)(happy-dom@15.11.7)
 
   frame-configurator:
     dependencies:
@@ -680,6 +782,9 @@ importers:
       globals:
         specifier: ^16.4.0
         version: 16.5.0
+      happy-dom:
+        specifier: ^15.11.7
+        version: 15.11.7
       typescript-eslint:
         specifier: ^8.41.0
         version: 8.62.0(eslint@9.39.4)(typescript@5.9.3)
@@ -692,6 +797,9 @@ importers:
       vite-plugin-solid:
         specifier: ^2.11.10
         version: 2.11.12(solid-js@1.9.13)(vite@7.3.5(@types/node@24.13.2))
+      vitest:
+        specifier: ^3.2.4
+        version: 3.2.6(@types/debug@4.1.13)(@types/node@24.13.2)(happy-dom@15.11.7)
 
   history-view:
     dependencies:
@@ -741,6 +849,9 @@ importers:
       globals:
         specifier: ^16.4.0
         version: 16.5.0
+      happy-dom:
+        specifier: ^15.11.7
+        version: 15.11.7
       typescript-eslint:
         specifier: ^8.41.0
         version: 8.62.0(eslint@9.39.4)(typescript@5.9.3)
@@ -753,6 +864,9 @@ importers:
       vite-plugin-solid:
         specifier: ^2.11.10
         version: 2.11.12(solid-js@1.9.13)(vite@7.3.5(@types/node@24.13.2))
+      vitest:
+        specifier: ^3.2.4
+        version: 3.2.6(@types/debug@4.1.13)(@types/node@24.13.2)(happy-dom@15.11.7)
 
   module-settings-manager:
     dependencies:
@@ -790,73 +904,24 @@ importers:
       esbuild:
         specifier: ^0.23.1
         version: 0.23.1
+      happy-dom:
+        specifier: ^15.11.7
+        version: 15.11.7
       solid-js:
         specifier: ^1.9.10
         version: 1.9.13
       typescript:
         specifier: ~5.9.3
         version: 5.9.3
-
-  patchwork-frame:
-    dependencies:
-      '@automerge/automerge':
-        specifier: 3.3.0-fragments.1
-        version: 3.3.0-fragments.1
-      '@automerge/automerge-repo':
-        specifier: ^2.6.0-subduction.26
-        version: 2.6.0-subduction.34(supports-color@5.5.0)
-      '@automerge/automerge-repo-solid-primitives':
-        specifier: ^2.6.0-subduction.26
-        version: 2.6.0-subduction.34(@automerge/automerge@3.3.0-fragments.1)(solid-js@1.9.13)
-      '@automerge/vanillajs':
-        specifier: ^2.6.0-subduction.26
-        version: 2.6.0-subduction.34(supports-color@5.5.0)
-      '@inkandswitch/patchwork-elements':
-        specifier: 1.0.0
-        version: 1.0.0(@automerge/automerge-repo@2.6.0-subduction.34)(@inkandswitch/patchwork-filesystem@0.0.8(@automerge/automerge-repo@2.6.0-subduction.34)(@automerge/automerge@3.3.0-fragments.1))(@inkandswitch/patchwork-plugins@0.0.11(@automerge/automerge-repo@2.6.0-subduction.34)(@automerge/automerge@3.3.0-fragments.1)(@inkandswitch/patchwork-filesystem@0.0.8(@automerge/automerge-repo@2.6.0-subduction.34)(@automerge/automerge@3.3.0-fragments.1)))(@inkandswitch/patchwork-providers@0.2.2(@automerge/automerge-repo@2.6.0-subduction.34))(@types/react@18.3.31)(react@18.3.1)(solid-js@1.9.13)(supports-color@5.5.0)
-      '@inkandswitch/patchwork-filesystem':
-        specifier: ^0.0.8
-        version: 0.0.8(@automerge/automerge-repo@2.6.0-subduction.34)(@automerge/automerge@3.3.0-fragments.1)(supports-color@5.5.0)
-      '@inkandswitch/patchwork-plugins':
-        specifier: ^0.0.11
-        version: 0.0.11(@automerge/automerge-repo@2.6.0-subduction.34)(@automerge/automerge@3.3.0-fragments.1)(@inkandswitch/patchwork-filesystem@0.0.8(@automerge/automerge-repo@2.6.0-subduction.34)(@automerge/automerge@3.3.0-fragments.1))
-      '@inkandswitch/patchwork-providers':
-        specifier: 0.2.2
-        version: 0.2.2(@automerge/automerge-repo@2.6.0-subduction.34)
-      '@inkandswitch/patchwork-providers-solid':
-        specifier: 0.2.3
-        version: 0.2.3(@automerge/automerge-repo-solid-primitives@2.6.0-subduction.34(@automerge/automerge@3.3.0-fragments.1)(solid-js@1.9.13))(@automerge/automerge-repo@2.6.0-subduction.34)(solid-js@1.9.13)
-      solid-js:
-        specifier: ^1.9.10
-        version: 1.9.13
-    devDependencies:
-      '@eslint/js':
-        specifier: ^9.37.0
-        version: 9.39.4
-      '@inkandswitch/patchwork-bootloader':
-        specifier: ^0.2.8
-        version: 0.2.8(@automerge/automerge-repo-keyhive@0.3.0-alpha.sub.1c(ws@8.21.0))(@automerge/automerge-repo@2.6.0-subduction.34)(@automerge/automerge@3.3.0-fragments.1)(@automerge/vanillajs@2.6.0-subduction.34(supports-color@5.5.0))(@types/react@18.3.31)(react@18.3.1)(solid-js@1.9.13)
-      '@typescript-eslint/parser':
-        specifier: ^8.40.0
-        version: 8.62.0(eslint@9.39.4)(supports-color@5.5.0)(typescript@5.9.3)
-      eslint:
-        specifier: ^9.34.0
-        version: 9.39.4
-      globals:
-        specifier: ^16.4.0
-        version: 16.5.0
-      typescript-eslint:
-        specifier: ^8.41.0
-        version: 8.62.0(eslint@9.39.4)(typescript@5.9.3)
       vite:
         specifier: ^7.1.9
         version: 7.3.5(@types/node@24.13.2)
-      vite-plugin-css-injected-by-js:
-        specifier: ^3.5.2
-        version: 3.5.2(vite@7.3.5(@types/node@24.13.2))
       vite-plugin-solid:
         specifier: ^2.11.10
         version: 2.11.12(solid-js@1.9.13)(vite@7.3.5(@types/node@24.13.2))
+      vitest:
+        specifier: ^3.2.4
+        version: 3.2.6(@types/debug@4.1.13)(@types/node@24.13.2)(happy-dom@15.11.7)
 
   providers:
     dependencies:
@@ -894,14 +959,27 @@ importers:
       globals:
         specifier: ^16.4.0
         version: 16.5.0
+      happy-dom:
+        specifier: ^15.11.7
+        version: 15.11.7
       typescript-eslint:
         specifier: ^8.41.0
         version: 8.62.0(eslint@9.39.4)(typescript@5.9.3)
       vite:
         specifier: ^7.1.9
         version: 7.3.5(@types/node@24.13.2)
+      vitest:
+        specifier: ^3.2.4
+        version: 3.2.6(@types/debug@4.1.13)(@types/node@24.13.2)(happy-dom@15.11.7)
 
-  raw: {}
+  raw:
+    devDependencies:
+      happy-dom:
+        specifier: ^15.11.7
+        version: 15.11.7
+      vitest:
+        specifier: ^3.2.4
+        version: 3.2.6(@types/debug@4.1.13)(@types/node@24.13.2)(happy-dom@15.11.7)
 
   sideboard:
     dependencies:
@@ -966,14 +1044,33 @@ importers:
       esbuild:
         specifier: ^0.23.1
         version: 0.23.1
+      happy-dom:
+        specifier: ^15.11.7
+        version: 15.11.7
       solid-devtools:
         specifier: ^0.34.4
         version: 0.34.5(solid-js@1.9.13)(vite@7.3.5(@types/node@24.13.2))
       typescript:
         specifier: ^5.9.3
         version: 5.9.3
+      vite:
+        specifier: ^7.1.9
+        version: 7.3.5(@types/node@24.13.2)
+      vite-plugin-solid:
+        specifier: ^2.11.10
+        version: 2.11.12(solid-js@1.9.13)(vite@7.3.5(@types/node@24.13.2))
+      vitest:
+        specifier: ^3.2.4
+        version: 3.2.6(@types/debug@4.1.13)(@types/node@24.13.2)(happy-dom@15.11.7)
 
-  spacer: {}
+  spacer:
+    devDependencies:
+      happy-dom:
+        specifier: ^15.11.7
+        version: 15.11.7
+      vitest:
+        specifier: ^3.2.4
+        version: 3.2.6(@types/debug@4.1.13)(@types/node@24.13.2)(happy-dom@15.11.7)
 
   sync-indicator:
     dependencies:
@@ -1005,6 +1102,9 @@ importers:
       esbuild:
         specifier: ~0.25.0
         version: 0.25.12
+      happy-dom:
+        specifier: ^15.11.7
+        version: 15.11.7
       typescript:
         specifier: ~5.9.3
         version: 5.9.3
@@ -1020,6 +1120,9 @@ importers:
       vite-plugin-top-level-await:
         specifier: ^1.6.0
         version: 1.6.0(@swc/helpers@0.5.23)(rollup@4.62.2)(vite@7.3.5(@types/node@24.13.2))
+      vitest:
+        specifier: ^3.2.4
+        version: 3.2.6(@types/debug@4.1.13)(@types/node@24.13.2)(happy-dom@15.11.7)
 
   tasks:
     dependencies:
@@ -1072,6 +1175,9 @@ importers:
       autoprefixer:
         specifier: ^10.5.0
         version: 10.5.1(postcss@8.5.15)
+      happy-dom:
+        specifier: ^15.11.7
+        version: 15.11.7
       nodemon:
         specifier: ^3.1.14
         version: 3.1.14
@@ -1087,6 +1193,9 @@ importers:
       vite-plugin-wasm:
         specifier: ^3.6.0
         version: 3.6.0(vite@5.4.21(@types/node@24.13.2))
+      vitest:
+        specifier: ^3.2.4
+        version: 3.2.6(@types/debug@4.1.13)(@types/node@24.13.2)(happy-dom@15.11.7)
 
   theming:
     dependencies:
@@ -1127,9 +1236,88 @@ importers:
       esbuild:
         specifier: ^0.23.1
         version: 0.23.1
+      happy-dom:
+        specifier: ^15.11.7
+        version: 15.11.7
       typescript:
         specifier: ~5.9.3
         version: 5.9.3
+      vite:
+        specifier: ^7.1.9
+        version: 7.3.5(@types/node@24.13.2)
+      vite-plugin-solid:
+        specifier: ^2.11.10
+        version: 2.11.12(solid-js@1.9.13)(vite@7.3.5(@types/node@24.13.2))
+      vitest:
+        specifier: ^3.2.4
+        version: 3.2.6(@types/debug@4.1.13)(@types/node@24.13.2)(happy-dom@15.11.7)
+
+  threepane:
+    dependencies:
+      '@automerge/automerge':
+        specifier: 3.3.0-fragments.1
+        version: 3.3.0-fragments.1
+      '@automerge/automerge-repo':
+        specifier: ^2.6.0-subduction.26
+        version: 2.6.0-subduction.34(supports-color@5.5.0)
+      '@automerge/automerge-repo-solid-primitives':
+        specifier: ^2.6.0-subduction.26
+        version: 2.6.0-subduction.34(@automerge/automerge@3.3.0-fragments.1)(solid-js@1.9.13)
+      '@automerge/vanillajs':
+        specifier: ^2.6.0-subduction.26
+        version: 2.6.0-subduction.34(supports-color@5.5.0)
+      '@inkandswitch/patchwork-elements':
+        specifier: 1.0.0
+        version: 1.0.0(@automerge/automerge-repo@2.6.0-subduction.34)(@inkandswitch/patchwork-filesystem@0.0.8(@automerge/automerge-repo@2.6.0-subduction.34)(@automerge/automerge@3.3.0-fragments.1))(@inkandswitch/patchwork-plugins@0.0.11(@automerge/automerge-repo@2.6.0-subduction.34)(@automerge/automerge@3.3.0-fragments.1)(@inkandswitch/patchwork-filesystem@0.0.8(@automerge/automerge-repo@2.6.0-subduction.34)(@automerge/automerge@3.3.0-fragments.1)))(@inkandswitch/patchwork-providers@0.2.2(@automerge/automerge-repo@2.6.0-subduction.34))(@types/react@18.3.31)(react@18.3.1)(solid-js@1.9.13)(supports-color@5.5.0)
+      '@inkandswitch/patchwork-filesystem':
+        specifier: ^0.0.8
+        version: 0.0.8(@automerge/automerge-repo@2.6.0-subduction.34)(@automerge/automerge@3.3.0-fragments.1)(supports-color@5.5.0)
+      '@inkandswitch/patchwork-plugins':
+        specifier: ^0.0.11
+        version: 0.0.11(@automerge/automerge-repo@2.6.0-subduction.34)(@automerge/automerge@3.3.0-fragments.1)(@inkandswitch/patchwork-filesystem@0.0.8(@automerge/automerge-repo@2.6.0-subduction.34)(@automerge/automerge@3.3.0-fragments.1))
+      '@inkandswitch/patchwork-providers':
+        specifier: 0.2.2
+        version: 0.2.2(@automerge/automerge-repo@2.6.0-subduction.34)
+      '@inkandswitch/patchwork-providers-solid':
+        specifier: 0.2.3
+        version: 0.2.3(@automerge/automerge-repo-solid-primitives@2.6.0-subduction.34(@automerge/automerge@3.3.0-fragments.1)(solid-js@1.9.13))(@automerge/automerge-repo@2.6.0-subduction.34)(solid-js@1.9.13)
+      solid-js:
+        specifier: ^1.9.10
+        version: 1.9.13
+    devDependencies:
+      '@eslint/js':
+        specifier: ^9.37.0
+        version: 9.39.4
+      '@inkandswitch/patchwork-bootloader':
+        specifier: ^0.2.8
+        version: 0.2.8(@automerge/automerge-repo-keyhive@0.3.0-alpha.sub.1c(ws@8.21.0))(@automerge/automerge-repo@2.6.0-subduction.34)(@automerge/automerge@3.3.0-fragments.1)(@automerge/vanillajs@2.6.0-subduction.34(supports-color@5.5.0))(@types/react@18.3.31)(react@18.3.1)(solid-js@1.9.13)
+      '@typescript-eslint/parser':
+        specifier: ^8.40.0
+        version: 8.62.0(eslint@9.39.4)(supports-color@5.5.0)(typescript@5.9.3)
+      eslint:
+        specifier: ^9.34.0
+        version: 9.39.4
+      globals:
+        specifier: ^16.4.0
+        version: 16.5.0
+      happy-dom:
+        specifier: ^15.11.7
+        version: 15.11.7
+      typescript-eslint:
+        specifier: ^8.41.0
+        version: 8.62.0(eslint@9.39.4)(typescript@5.9.3)
+      vite:
+        specifier: ^7.1.9
+        version: 7.3.5(@types/node@24.13.2)
+      vite-plugin-css-injected-by-js:
+        specifier: ^3.5.2
+        version: 3.5.2(vite@7.3.5(@types/node@24.13.2))
+      vite-plugin-solid:
+        specifier: ^2.11.10
+        version: 2.11.12(solid-js@1.9.13)(vite@7.3.5(@types/node@24.13.2))
+      vitest:
+        specifier: ^3.2.4
+        version: 3.2.6(@types/debug@4.1.13)(@types/node@24.13.2)(happy-dom@15.11.7)
 
   tldraw4:
     dependencies:
@@ -1215,12 +1403,21 @@ importers:
       globals:
         specifier: ^16.4.0
         version: 16.5.0
+      happy-dom:
+        specifier: ^15.11.7
+        version: 15.11.7
       typescript:
         specifier: ~5.9.3
         version: 5.9.3
       typescript-eslint:
         specifier: ^8.45.0
         version: 8.62.0(eslint@9.39.4)(typescript@5.9.3)
+      vite:
+        specifier: ^7.1.9
+        version: 7.3.5(@types/node@24.13.2)
+      vitest:
+        specifier: ^3.2.4
+        version: 3.2.6(@types/debug@4.1.13)(@types/node@24.13.2)(happy-dom@15.11.7)
 
 packages:
 
@@ -3909,12 +4106,18 @@ packages:
   '@types/babel__traverse@7.28.0':
     resolution: {integrity: sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q==}
 
+  '@types/chai@5.2.3':
+    resolution: {integrity: sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA==}
+
   '@types/core-js@2.5.8':
     resolution: {integrity: sha512-VgnAj6tIAhJhZdJ8/IpxdatM8G4OD3VWGlp6xIxUGENZlpbob9Ty4VVdC1FIEp0aK6DBscDDjyzy5FB60TuNqg==}
 
   '@types/debug@4.1.13':
     resolution: {integrity: sha512-KSVgmQmzMwPlmtljOomayoR89W4FynCAi3E8PPs7vmDVPe84hT+vGPKkJfThkmXs0x0jAaa9U8uW8bbfyS2fWw==}
 
+  '@types/deep-eql@4.0.2':
+    resolution: {integrity: sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==}
+
   '@types/estree@1.0.9':
     resolution: {integrity: sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg==}
 
@@ -4065,6 +4268,35 @@ packages:
     peerDependencies:
       vite: ^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0
 
+  '@vitest/expect@3.2.6':
+    resolution: {integrity: sha512-1+7q9BtaKzEmO+fmNT3kYvoNn5Y71XWAx2Q5HRim4tTVRQVRv4uJFAQ5FbK0OPUeNP/WmVCpxYxoJdvuHVjzBQ==}
+
+  '@vitest/mocker@3.2.6':
+    resolution: {integrity: sha512-EZOrpDbkKotFAP7wPAQV1UIyoGOk4oX7ynWhBhLB7v+meMHbQhU16oPpIYGTTe4oFlhpryGpgpcZP/sin3hYuw==}
+    peerDependencies:
+      msw: ^2.4.9
+      vite: ^5.0.0 || ^6.0.0 || ^7.0.0-0
+    peerDependenciesMeta:
+      msw:
+        optional: true
+      vite:
+        optional: true
+
+  '@vitest/pretty-format@3.2.6':
+    resolution: {integrity: sha512-lb7XXXzmm2h2ASzFnRvQpDo6onT1NmMJA3tkGTWiBFtRJ9lxGY3d3mm/Apt36gej2bkkOVLL/yTOtufDaFa/jA==}
+
+  '@vitest/runner@3.2.6':
+    resolution: {integrity: sha512-HYcoSj1w5tcgUnzoF0HcyaAQjpA1gj9ftUJ7iSJSuipc02jW9gKkigwZbjFldAfYHA1fa8UZVRftdMY5msWM9Q==}
+
+  '@vitest/snapshot@3.2.6':
+    resolution: {integrity: sha512-H+ZjNTWGpObenh0YnlBctAPnJSI20P81PL8BPzWpx54YXLLTm8hEsWawtcYLMrwvpK48hGxLLbCS+1KRXhsKhw==}
+
+  '@vitest/spy@3.2.6':
+    resolution: {integrity: sha512-oq6BbH68WzcWmwtBrU9nqLeaXTR4XwJF7FSLkKEZo4i6eoXcrxjcwSuTvWBIRUTC6VC72nXYunzqgZA+IKdtxg==}
+
+  '@vitest/utils@3.2.6':
+    resolution: {integrity: sha512-lI23nIs4bnT3T8NIoh+vFaz5s2/DdP0Jgt2jxwgWljvwn82cLJtyi/If+fjFyoLMGIOz0U/fKvWE0d4jsNQEfg==}
+
   acorn-jsx@5.3.2:
     resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
     peerDependencies:
@@ -4097,6 +4329,10 @@ packages:
     resolution: {integrity: sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==}
     engines: {node: '>=8'}
 
+  assertion-error@2.0.1:
+    resolution: {integrity: sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==}
+    engines: {node: '>=12'}
+
   autoprefixer@10.5.1:
     resolution: {integrity: sha512-jwM2pcTuCWUoN70FEvf5XrXyDbUgRURK4FnU8v0jWZZYU/KkVvN9T33mu1sVLFY9JW3kTWzKheEpn6xYLRc/VA==}
     engines: {node: ^10 || ^12 || >=14}
@@ -4181,6 +4417,10 @@ packages:
   cabbages@0.2.8:
     resolution: {integrity: sha512-MGBoLf3n7crhRIRgQJ3kg6o1VZqsrWVD1E2+I87PP9QBQ70k7x+9c6Ybld8M1sMFYkdqzxD1GupSa1/BuSgg8g==}
 
+  cac@6.7.14:
+    resolution: {integrity: sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==}
+    engines: {node: '>=8'}
+
   callsites@3.1.0:
     resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
     engines: {node: '>=6'}
@@ -4195,10 +4435,18 @@ packages:
   cbor-x@1.6.4:
     resolution: {integrity: sha512-UGKHjp6RHC6QuZ2yy5LCKm7MojM4716DwoSaqwQpaH4DvZvbBTGcoDNTiG9Y2lByXZYFEs9WRkS5tLl96IrF1Q==}
 
+  chai@5.3.3:
+    resolution: {integrity: sha512-4zNhdJD/iOjSH0A05ea+Ke6MU5mmpQcbQsSOkgdaUMJ9zTlDTD/GYlwohmIE2u0gaxHYiVHEn1Fw9mZ/ktJWgw==}
+    engines: {node: '>=18'}
+
   chalk@4.1.2:
     resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
     engines: {node: '>=10'}
 
+  check-error@2.1.3:
+    resolution: {integrity: sha512-PAJdDJusoxnwm1VwW07VWwUN1sl7smmC3OKggvndJFadxxDRyFJBX/ggnu/KE4kQAB7a3Dp8f/YXC1FlUprWmA==}
+    engines: {node: '>= 16'}
+
   chokidar@3.6.0:
     resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
     engines: {node: '>= 8.10.0'}
@@ -4252,6 +4500,10 @@ packages:
       supports-color:
         optional: true
 
+  deep-eql@5.0.2:
+    resolution: {integrity: sha512-h5k/5U50IJJFpzfL6nO9jaaumfjO/f2NjK/oYB2Djzm4p9L+3T9qWpZqZ2hAbLPuuYq9wrU08WQyBTL5GbPk5Q==}
+    engines: {node: '>=6'}
+
   deep-is@0.1.4:
     resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
 
@@ -4269,10 +4521,17 @@ packages:
   electron-to-chromium@1.5.378:
     resolution: {integrity: sha512-VinvOAuuPmdD1guEgGv5f2Qp7/vlfqOrUOMYNnOD4wj3pit8kRsQHzfIf6teyUGWo15Tg5+bOJaRunvyltpVWQ==}
 
+  entities@4.5.0:
+    resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
+    engines: {node: '>=0.12'}
+
   entities@6.0.1:
     resolution: {integrity: sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==}
     engines: {node: '>=0.12'}
 
+  es-module-lexer@1.7.0:
+    resolution: {integrity: sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA==}
+
   es-module-shims@2.8.1:
     resolution: {integrity: sha512-Ztg5TxFCT/ffzmSf/ginHIvSbsneH60X9tpaMBD/jWXHQZT1JJNj8tOO3mRmUT3ar7Qn3YK4EbM1SjJpN5dPBA==}
 
@@ -4363,6 +4622,9 @@ packages:
     resolution: {integrity: sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==}
     engines: {node: '>=4.0'}
 
+  estree-walker@3.0.3:
+    resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==}
+
   esutils@2.0.3:
     resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
     engines: {node: '>=0.10.0'}
@@ -4373,6 +4635,10 @@ packages:
   eventemitter3@5.0.4:
     resolution: {integrity: sha512-mlsTRyGaPBjPedk6Bvw+aqbsXDtoAyAzm5MO7JgU+yVRyMQ5O8bD4Kcci7BS85f93veegeCPkL8R4GLClnjLFw==}
 
+  expect-type@1.4.0:
+    resolution: {integrity: sha512-KfYbmpRm0VbLjEvVa9yGwCi9GI34xvi7A/HXYWQO65CSD2u3MczUJSuwXKFIxlGsgBQizV9q5J9NHj4VG0n+pA==}
+    engines: {node: '>=12.0.0'}
+
   fast-deep-equal@3.1.3:
     resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
 
@@ -4464,6 +4730,10 @@ packages:
     resolution: {integrity: sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==}
     engines: {node: '>=10'}
 
+  happy-dom@15.11.7:
+    resolution: {integrity: sha512-KyrFvnl+J9US63TEzwoiJOQzZBJY7KgBushJA8X61DMbNsH+2ONkDuLDnCnwUiPTF42tLoEmrPyoqbenVA5zrg==}
+    engines: {node: '>=18.0.0'}
+
   has-flag@3.0.0:
     resolution: {integrity: sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==}
     engines: {node: '>=4'}
@@ -4539,6 +4809,9 @@ packages:
   js-tokens@4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
 
+  js-tokens@9.0.1:
+    resolution: {integrity: sha512-mxa9E9ITFOt0ban3j6L5MpjwegGz6lBQmM1IJkWeBZGcMxto50+eWdjC/52xDbS2vy0k7vIMK0Fe2wfL9OQSpQ==}
+
   js-yaml@4.2.0:
     resolution: {integrity: sha512-ePWsvanv0DWuDRsW8dnt+R4jQ31SCRCQ7hhNcPXZPsoBZiemuZNYGf7adZdqX2D86j6rvKp3RpCxVTSb8WQlOw==}
     hasBin: true
@@ -4599,6 +4872,9 @@ packages:
     resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
     hasBin: true
 
+  loupe@3.2.1:
+    resolution: {integrity: sha512-CdzqowRJCeLU72bHvWqwRBBlLcMEtIvGrlvef74kMnV2AolS9Y8xUv1I0U/MNAWMhBlKIoyuEgoJ0t/bbwHbLQ==}
+
   lru-cache@5.1.1:
     resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
 
@@ -4611,6 +4887,9 @@ packages:
     resolution: {integrity: sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==}
     hasBin: true
 
+  magic-string@0.30.21:
+    resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
+
   merge-anything@5.1.7:
     resolution: {integrity: sha512-eRtbOb1N5iyH0tkQDAoQ4Ipsp/5qSR79Dzrz8hEPxRX10RWWR/iQXdoKmBSRCThY1Fh5EhISDtpSc93fpxUniQ==}
     engines: {node: '>=12.13'}
@@ -4696,6 +4975,13 @@ packages:
     resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
     engines: {node: '>=8'}
 
+  pathe@2.0.3:
+    resolution: {integrity: sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==}
+
+  pathval@2.0.1:
+    resolution: {integrity: sha512-//nshmD55c46FuFw26xV/xFAaB5HF9Xdap7HJBBnrKdAd6/GxDBaNA1870O79+9ueg61cZLSVc+OaFlfmObYVQ==}
+    engines: {node: '>= 14.16'}
+
   picocolors@1.1.1:
     resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
 
@@ -4895,6 +5181,9 @@ packages:
     resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
     engines: {node: '>=8'}
 
+  siginfo@2.0.0:
+    resolution: {integrity: sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==}
+
   simple-update-notifier@2.0.0:
     resolution: {integrity: sha512-a2B9Y0KlNXl9u/vsW6sTIu9vGEpfKu2wRV6l1H3XEas/0gUIzGzBoP/IouTcUQbm9JWZLH3COxyn03TYlFax6w==}
     engines: {node: '>=10'}
@@ -4940,10 +5229,19 @@ packages:
     resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
     engines: {node: '>=0.10.0'}
 
+  stackback@0.0.2:
+    resolution: {integrity: sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==}
+
+  std-env@3.10.0:
+    resolution: {integrity: sha512-5GS12FdOZNliM5mAOxFRg7Ir0pWz8MdpYm6AY6VPkGpbA7ZzmbzNcBJQ0GPvvyWgcY7QAhCgf9Uy89I03faLkg==}
+
   strip-json-comments@3.1.1:
     resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
     engines: {node: '>=8'}
 
+  strip-literal@3.1.0:
+    resolution: {integrity: sha512-8r3mkIM/2+PpjHoOtiAW8Rg3jJLHaV7xPwG+YRGrv6FP0wwk/toTpATxWYOW0BKdWwl82VT2tFYi5DlROa0Mxg==}
+
   style-mod@4.1.3:
     resolution: {integrity: sha512-i/n8VsZydrugj3Iuzll8+x/00GH2vnYsk1eomD8QiRrSAeW6ItbCQDtfXCeJHd0iwiNagqjQkvpvREEPtW3IoQ==}
 
@@ -4959,10 +5257,28 @@ packages:
     resolution: {integrity: sha512-5OpdhMRRE70j0zT7mrBpx12FJI+y0EGx8zMe8Vl2/aiwGgpW3X70OVHlsHmHeeG0ncnnWdq1o+k/S5d9ONgzGA==}
     engines: {node: '>=14'}
 
+  tinybench@2.9.0:
+    resolution: {integrity: sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==}
+
+  tinyexec@0.3.2:
+    resolution: {integrity: sha512-KQQR9yN7R5+OSwaK0XQoj22pwHoTlgYqmUscPYoknOoWCWfj/5/ABTMRi69FrKU5ffPVh5QcFikpWJI/P1ocHA==}
+
   tinyglobby@0.2.17:
     resolution: {integrity: sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==}
     engines: {node: '>=12.0.0'}
 
+  tinypool@1.1.1:
+    resolution: {integrity: sha512-Zba82s87IFq9A9XmjiX5uZA/ARWDrB03OHlq+Vw1fSdt0I+4/Kutwy8BP4Y/y/aORMo61FQ0vIb5j44vSo5Pkg==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+
+  tinyrainbow@2.0.0:
+    resolution: {integrity: sha512-op4nsTR47R6p0vMUUoYl/a+ljLFVtlfaXkLQmqfLR1qHma1h/ysYk4hEXZ880bf2CYgTskvTa/e196Vd5dDQXw==}
+    engines: {node: '>=14.0.0'}
+
+  tinyspy@4.0.4:
+    resolution: {integrity: sha512-azl+t0z7pw/z958Gy9svOTuzqIk6xq+NSheJzn5MMWtWTFywIacg2wUlzKFGtt3cthx0r2SxMK0yzJOR0IES7Q==}
+    engines: {node: '>=14.0.0'}
+
   tldraw@4.3.1:
     resolution: {integrity: sha512-duKi/aHG/PlsHLsRBXPbhxQgLKzRN9E52AeP4GRg4ysQniQY6pk7qIm89Vevfi3yP5vF4koX8FpQp/J6Z1L9aQ==}
     peerDependencies:
@@ -5071,6 +5387,11 @@ packages:
     deprecated: uuid@10 and below is no longer supported.  For ESM codebases, update to uuid@latest.  For CommonJS codebases, use uuid@11 (but be aware this version will likely be deprecated in 2028).
     hasBin: true
 
+  vite-node@3.2.4:
+    resolution: {integrity: sha512-EbKSKh+bh1E1IFxeO0pg1n4dvoOTt0UDiXMd/qn++r98+jPO1xtJilvXldeuQ8giIB5IkpjCgMleHMNEsGH6pg==}
+    engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
+    hasBin: true
+
   vite-plugin-css-injected-by-js@3.5.2:
     resolution: {integrity: sha512-2MpU/Y+SCZyWUB6ua3HbJCrgnF0KACAsmzOQt1UvRVJCGF6S8xdA3ZUhWcWdM9ivG4I5az8PnQmwwrkC2CAQrQ==}
     peerDependencies:
@@ -5175,14 +5496,55 @@ packages:
       vite:
         optional: true
 
+  vitest@3.2.6:
+    resolution: {integrity: sha512-xejya+bT/j/+R/AGa1XOfRxLmNUlLtlwjRsFUILF+xHfzElmGcmFydy2gqqIrd62ptIEfwVMofd19uNWD9L7Nw==}
+    engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
+    hasBin: true
+    peerDependencies:
+      '@edge-runtime/vm': '*'
+      '@types/debug': ^4.1.12
+      '@types/node': ^18.0.0 || ^20.0.0 || >=22.0.0
+      '@vitest/browser': 3.2.6
+      '@vitest/ui': 3.2.6
+      happy-dom: '*'
+      jsdom: '*'
+    peerDependenciesMeta:
+      '@edge-runtime/vm':
+        optional: true
+      '@types/debug':
+        optional: true
+      '@types/node':
+        optional: true
+      '@vitest/browser':
+        optional: true
+      '@vitest/ui':
+        optional: true
+      happy-dom:
+        optional: true
+      jsdom:
+        optional: true
+
   w3c-keyname@2.2.8:
     resolution: {integrity: sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==}
 
+  webidl-conversions@7.0.0:
+    resolution: {integrity: sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==}
+    engines: {node: '>=12'}
+
+  whatwg-mimetype@3.0.0:
+    resolution: {integrity: sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q==}
+    engines: {node: '>=12'}
+
   which@2.0.2:
     resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
     engines: {node: '>= 8'}
     hasBin: true
 
+  why-is-node-running@2.3.0:
+    resolution: {integrity: sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==}
+    engines: {node: '>=8'}
+    hasBin: true
+
   word-wrap@1.2.5:
     resolution: {integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==}
     engines: {node: '>=0.10.0'}
@@ -8825,12 +9187,19 @@ snapshots:
     dependencies:
       '@babel/types': 7.29.7
 
+  '@types/chai@5.2.3':
+    dependencies:
+      '@types/deep-eql': 4.0.2
+      assertion-error: 2.0.1
+
   '@types/core-js@2.5.8': {}
 
   '@types/debug@4.1.13':
     dependencies:
       '@types/ms': 2.1.0
 
+  '@types/deep-eql@4.0.2': {}
+
   '@types/estree@1.0.9': {}
 
   '@types/json-schema@7.0.15': {}
@@ -9091,6 +9460,48 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@vitest/expect@3.2.6':
+    dependencies:
+      '@types/chai': 5.2.3
+      '@vitest/spy': 3.2.6
+      '@vitest/utils': 3.2.6
+      chai: 5.3.3
+      tinyrainbow: 2.0.0
+
+  '@vitest/mocker@3.2.6(vite@5.4.21(@types/node@24.13.2))':
+    dependencies:
+      '@vitest/spy': 3.2.6
+      estree-walker: 3.0.3
+      magic-string: 0.30.21
+    optionalDependencies:
+      vite: 5.4.21(@types/node@24.13.2)
+
+  '@vitest/pretty-format@3.2.6':
+    dependencies:
+      tinyrainbow: 2.0.0
+
+  '@vitest/runner@3.2.6':
+    dependencies:
+      '@vitest/utils': 3.2.6
+      pathe: 2.0.3
+      strip-literal: 3.1.0
+
+  '@vitest/snapshot@3.2.6':
+    dependencies:
+      '@vitest/pretty-format': 3.2.6
+      magic-string: 0.30.21
+      pathe: 2.0.3
+
+  '@vitest/spy@3.2.6':
+    dependencies:
+      tinyspy: 4.0.4
+
+  '@vitest/utils@3.2.6':
+    dependencies:
+      '@vitest/pretty-format': 3.2.6
+      loupe: 3.2.1
+      tinyrainbow: 2.0.0
+
   acorn-jsx@5.3.2(acorn@8.17.0):
     dependencies:
       acorn: 8.17.0
@@ -9121,6 +9532,8 @@ snapshots:
 
   array-union@2.1.0: {}
 
+  assertion-error@2.0.1: {}
+
   autoprefixer@10.5.1(postcss@8.5.15):
     dependencies:
       browserslist: 4.28.4
@@ -9248,6 +9661,8 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  cac@6.7.14: {}
+
   callsites@3.1.0: {}
 
   caniuse-lite@1.0.30001799: {}
@@ -9268,11 +9683,21 @@ snapshots:
     optionalDependencies:
       cbor-extract: 2.2.2
 
+  chai@5.3.3:
+    dependencies:
+      assertion-error: 2.0.1
+      check-error: 2.1.3
+      deep-eql: 5.0.2
+      loupe: 3.2.1
+      pathval: 2.0.1
+
   chalk@4.1.2:
     dependencies:
       ansi-styles: 4.3.0
       supports-color: 7.2.0
 
+  check-error@2.1.3: {}
+
   chokidar@3.6.0:
     dependencies:
       anymatch: 3.1.3
@@ -9329,6 +9754,8 @@ snapshots:
     optionalDependencies:
       supports-color: 5.5.0
 
+  deep-eql@5.0.2: {}
+
   deep-is@0.1.4: {}
 
   detect-libc@2.1.2:
@@ -9342,8 +9769,12 @@ snapshots:
 
   electron-to-chromium@1.5.378: {}
 
+  entities@4.5.0: {}
+
   entities@6.0.1: {}
 
+  es-module-lexer@1.7.0: {}
+
   es-module-shims@2.8.1: {}
 
   esbuild@0.21.5:
@@ -9578,12 +10009,18 @@ snapshots:
 
   estraverse@5.3.0: {}
 
+  estree-walker@3.0.3:
+    dependencies:
+      '@types/estree': 1.0.9
+
   esutils@2.0.3: {}
 
   eventemitter3@4.0.7: {}
 
   eventemitter3@5.0.4: {}
 
+  expect-type@1.4.0: {}
+
   fast-deep-equal@3.1.3: {}
 
   fast-equals@5.4.0: {}
@@ -9662,6 +10099,12 @@ snapshots:
       merge2: 1.4.1
       slash: 3.0.0
 
+  happy-dom@15.11.7:
+    dependencies:
+      entities: 4.5.0
+      webidl-conversions: 7.0.0
+      whatwg-mimetype: 3.0.0
+
   has-flag@3.0.0: {}
 
   has-flag@4.0.0: {}
@@ -9713,6 +10156,8 @@ snapshots:
 
   js-tokens@4.0.0: {}
 
+  js-tokens@9.0.1: {}
+
   js-yaml@4.2.0:
     dependencies:
       argparse: 2.0.1
@@ -9758,6 +10203,8 @@ snapshots:
     dependencies:
       js-tokens: 4.0.0
 
+  loupe@3.2.1: {}
+
   lru-cache@5.1.1:
     dependencies:
       yallist: 3.1.1
@@ -9768,6 +10215,10 @@ snapshots:
 
   lz-string@1.5.0: {}
 
+  magic-string@0.30.21:
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.5
+
   merge-anything@5.1.7:
     dependencies:
       is-what: 4.1.16
@@ -9852,6 +10303,10 @@ snapshots:
 
   path-type@4.0.0: {}
 
+  pathe@2.0.3: {}
+
+  pathval@2.0.1: {}
+
   picocolors@1.1.1: {}
 
   picomatch@2.3.2: {}
@@ -10129,6 +10584,8 @@ snapshots:
 
   shebang-regex@3.0.0: {}
 
+  siginfo@2.0.0: {}
+
   simple-update-notifier@2.0.0:
     dependencies:
       semver: 7.8.5
@@ -10183,8 +10640,16 @@ snapshots:
 
   source-map-js@1.2.1: {}
 
+  stackback@0.0.2: {}
+
+  std-env@3.10.0: {}
+
   strip-json-comments@3.1.1: {}
 
+  strip-literal@3.1.0:
+    dependencies:
+      js-tokens: 9.0.1
+
   style-mod@4.1.3: {}
 
   supports-color@5.5.0:
@@ -10197,11 +10662,21 @@ snapshots:
 
   tinyargs@0.1.4: {}
 
+  tinybench@2.9.0: {}
+
+  tinyexec@0.3.2: {}
+
   tinyglobby@0.2.17:
     dependencies:
       fdir: 6.5.0(picomatch@4.0.4)
       picomatch: 4.0.4
 
+  tinypool@1.1.1: {}
+
+  tinyrainbow@2.0.0: {}
+
+  tinyspy@4.0.4: {}
+
   tldraw@4.3.1(@floating-ui/dom@1.7.6)(@types/react-dom@18.3.7(@types/react@18.3.31))(@types/react@18.3.31)(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
       '@tiptap/core': 3.27.1(@tiptap/pm@3.27.1)
@@ -10333,6 +10808,24 @@ snapshots:
 
   uuid@9.0.1: {}
 
+  vite-node@3.2.4(@types/node@24.13.2):
+    dependencies:
+      cac: 6.7.14
+      debug: 4.4.3(supports-color@5.5.0)
+      es-module-lexer: 1.7.0
+      pathe: 2.0.3
+      vite: 5.4.21(@types/node@24.13.2)
+    transitivePeerDependencies:
+      - '@types/node'
+      - less
+      - lightningcss
+      - sass
+      - sass-embedded
+      - stylus
+      - sugarss
+      - supports-color
+      - terser
+
   vite-plugin-css-injected-by-js@3.5.2(vite@5.4.21(@types/node@24.13.2)):
     dependencies:
       vite: 5.4.21(@types/node@24.13.2)
@@ -10426,12 +10919,61 @@ snapshots:
     optionalDependencies:
       vite: 7.3.5(@types/node@24.13.2)
 
+  vitest@3.2.6(@types/debug@4.1.13)(@types/node@24.13.2)(happy-dom@15.11.7):
+    dependencies:
+      '@types/chai': 5.2.3
+      '@vitest/expect': 3.2.6
+      '@vitest/mocker': 3.2.6(vite@5.4.21(@types/node@24.13.2))
+      '@vitest/pretty-format': 3.2.6
+      '@vitest/runner': 3.2.6
+      '@vitest/snapshot': 3.2.6
+      '@vitest/spy': 3.2.6
+      '@vitest/utils': 3.2.6
+      chai: 5.3.3
+      debug: 4.4.3(supports-color@5.5.0)
+      expect-type: 1.4.0
+      magic-string: 0.30.21
+      pathe: 2.0.3
+      picomatch: 4.0.4
+      std-env: 3.10.0
+      tinybench: 2.9.0
+      tinyexec: 0.3.2
+      tinyglobby: 0.2.17
+      tinypool: 1.1.1
+      tinyrainbow: 2.0.0
+      vite: 5.4.21(@types/node@24.13.2)
+      vite-node: 3.2.4(@types/node@24.13.2)
+      why-is-node-running: 2.3.0
+    optionalDependencies:
+      '@types/debug': 4.1.13
+      '@types/node': 24.13.2
+      happy-dom: 15.11.7
+    transitivePeerDependencies:
+      - less
+      - lightningcss
+      - msw
+      - sass
+      - sass-embedded
+      - stylus
+      - sugarss
+      - supports-color
+      - terser
+
   w3c-keyname@2.2.8: {}
 
+  webidl-conversions@7.0.0: {}
+
+  whatwg-mimetype@3.0.0: {}
+
   which@2.0.2:
     dependencies:
       isexe: 2.0.0
 
+  why-is-node-running@2.3.0:
+    dependencies:
+      siginfo: 2.0.0
+      stackback: 0.0.2
+
   word-wrap@1.2.5: {}
 
   ws@8.21.0: {}
diff --git a/providers/package.json b/providers/package.json
index 6a63f7f8..9923ae82 100644
--- a/providers/package.json
+++ b/providers/package.json
@@ -8,7 +8,9 @@
     "dev": "vite build --watch",
     "build": "vite build",
     "sync": "vite build && pushwork sync",
-    "register": "pw-modules add \"$MODULE_SETTINGS_DOC_URL\" \"$(pushwork url)\""
+    "register": "pw-modules add \"$MODULE_SETTINGS_DOC_URL\" \"$(pushwork url)\"",
+    "test": "vitest run",
+    "test:watch": "vitest"
   },
   "dependencies": {
     "@automerge/automerge": "3.3.0-fragments.1",
@@ -24,7 +26,9 @@
     "@typescript-eslint/parser": "^8.40.0",
     "eslint": "^9.34.0",
     "globals": "^16.4.0",
+    "happy-dom": "^15.11.7",
     "typescript-eslint": "^8.41.0",
-    "vite": "^7.1.9"
+    "vite": "^7.1.9",
+    "vitest": "^3.2.4"
   }
 }
diff --git a/providers/vitest.config.ts b/providers/vitest.config.ts
new file mode 100644
index 00000000..44198156
--- /dev/null
+++ b/providers/vitest.config.ts
@@ -0,0 +1,9 @@
+import {defineConfig} from "vitest/config"
+
+export default defineConfig({
+  test: {
+    environment: "happy-dom",
+    globals: true,
+    passWithNoTests: true,
+  },
+})
diff --git a/raw/package.json b/raw/package.json
index 4650dfc9..a459e70d 100644
--- a/raw/package.json
+++ b/raw/package.json
@@ -11,8 +11,14 @@
   "scripts": {
     "build": "echo 'bundleless — nothing to build'",
     "push": "pushwork sync",
-    "register": "pw-modules add \"$MODULE_SETTINGS_DOC_URL\" \"$(pushwork url)\""
+    "register": "pw-modules add \"$MODULE_SETTINGS_DOC_URL\" \"$(pushwork url)\"",
+    "test": "vitest run",
+    "test:watch": "vitest"
   },
   "keywords": [],
-  "author": "Ink & Switch"
+  "author": "Ink & Switch",
+  "devDependencies": {
+    "happy-dom": "^15.11.7",
+    "vitest": "^3.2.4"
+  }
 }
diff --git a/raw/vitest.config.ts b/raw/vitest.config.ts
new file mode 100644
index 00000000..44198156
--- /dev/null
+++ b/raw/vitest.config.ts
@@ -0,0 +1,9 @@
+import {defineConfig} from "vitest/config"
+
+export default defineConfig({
+  test: {
+    environment: "happy-dom",
+    globals: true,
+    passWithNoTests: true,
+  },
+})
diff --git a/scripts/lint-standalone.mjs b/scripts/lint-standalone.mjs
new file mode 100644
index 00000000..2eacc9ee
--- /dev/null
+++ b/scripts/lint-standalone.mjs
@@ -0,0 +1,91 @@
+#!/usr/bin/env node
+// Standalone-package linter.
+//
+// Every top-level tool in this repo must be pullable on its own: you should be
+// able to copy one folder out of the workspace, run `pnpm install` + the build
+// inside it, and get the same result. That breaks the moment a package.json
+// leans on something only the workspace provides. This script scans every
+// per-tool package.json and fails if it finds such a dependency.
+//
+// Forbidden dependency specifiers (in dependencies / devDependencies /
+// peerDependencies / optionalDependencies):
+//   workspace:*  - pnpm workspace protocol; only resolvable inside the workspace
+//   catalog:*    - pnpm catalog protocol; version lives in pnpm-workspace.yaml
+//   link:../x    - symlink to a sibling folder; gone once the folder is alone
+//   file:../x    - tarball/dir reference that escapes the package folder
+//
+// Run from the repo root: `node scripts/lint-standalone.mjs` (or `pnpm lint`).
+
+import fs from "node:fs"
+import path from "node:path"
+import {fileURLToPath} from "node:url"
+
+const root = path.resolve(path.dirname(fileURLToPath(import.meta.url)), "..")
+
+const DEP_FIELDS = [
+  "dependencies",
+  "devDependencies",
+  "peerDependencies",
+  "optionalDependencies",
+]
+
+// specifier -> human-readable reason
+const FORBIDDEN = [
+  [/^workspace:/, "uses the pnpm `workspace:` protocol"],
+  [/^catalog:/, "uses the pnpm `catalog:` protocol (version defined in pnpm-workspace.yaml)"],
+  [/^link:/, "uses `link:` to a sibling folder"],
+  [/^file:/, "uses `file:` to a path outside the package"],
+]
+
+function packageDirs() {
+  return fs
+    .readdirSync(root)
+    .filter((name) => {
+      if (name === "node_modules" || name.startsWith(".")) return false
+      const dir = path.join(root, name)
+      return (
+        fs.statSync(dir).isDirectory() &&
+        fs.existsSync(path.join(dir, "package.json"))
+      )
+    })
+    .sort()
+}
+
+const violations = []
+
+for (const name of packageDirs()) {
+  const pjPath = path.join(root, name, "package.json")
+  let pj
+  try {
+    pj = JSON.parse(fs.readFileSync(pjPath, "utf8"))
+  } catch (err) {
+    violations.push({pkg: name, dep: "package.json", spec: "", reason: `is not valid JSON: ${err.message}`})
+    continue
+  }
+
+  for (const field of DEP_FIELDS) {
+    const deps = pj[field]
+    if (!deps || typeof deps !== "object") continue
+    for (const [dep, spec] of Object.entries(deps)) {
+      if (typeof spec !== "string") continue
+      for (const [re, reason] of FORBIDDEN) {
+        if (re.test(spec)) {
+          violations.push({pkg: name, field, dep, spec, reason})
+        }
+      }
+    }
+  }
+}
+
+if (violations.length === 0) {
+  console.log("✓ all packages are standalone (no workspace-only dependency specifiers)")
+  process.exit(0)
+}
+
+console.error(`✗ found ${violations.length} workspace-only dependency specifier(s):\n`)
+for (const v of violations) {
+  console.error(`  ${v.pkg}/package.json → ${v.field}.${v.dep}`)
+  console.error(`    "${v.spec}"  ${v.reason}`)
+  console.error(`    fix: replace with a registry version range so the folder installs on its own.\n`)
+}
+process.exit(1)
diff --git a/sideboard/package.json b/sideboard/package.json
index 1dd02fef..cf32ad18 100644
--- a/sideboard/package.json
+++ b/sideboard/package.json
@@ -22,7 +22,9 @@
     "build": "node esbuild/build.ts",
     "dev": "node esbuild/watch.ts",
     "pushwatch": "pnpm dev pushwork",
-    "register": "pw-modules add \"$MODULE_SETTINGS_DOC_URL\" \"$(pushwork url)\""
+    "register": "pw-modules add \"$MODULE_SETTINGS_DOC_URL\" \"$(pushwork url)\"",
+    "test": "vitest run",
+    "test:watch": "vitest"
   },
   "dependencies": {
     "@automerge/automerge-repo-solid-primitives": "2.5.2",
@@ -47,8 +49,12 @@
     "@types/babel__core": "^7.20.5",
     "babel-preset-solid": "^1.9.9",
     "esbuild": "^0.23.1",
+    "happy-dom": "^15.11.7",
     "solid-devtools": "^0.34.4",
-    "typescript": "^5.9.3"
+    "typescript": "^5.9.3",
+    "vite": "^7.1.9",
+    "vite-plugin-solid": "^2.11.10",
+    "vitest": "^3.2.4"
   },
   "volta": {
     "node": "22.21.0"
diff --git a/sideboard/src/index.css b/sideboard/src/index.css
index d8d01766..9289944f 100644
--- a/sideboard/src/index.css
+++ b/sideboard/src/index.css
@@ -2,62 +2,60 @@
 :root,
 :host,
 [theme] {
-  --sideboard-fill: var(
+  --document-list-fill: var(
     --studio-chrome,
     light-dark(
       color-mix(in oklch, var(--studio-secondary, #33ccf8), var(--studio-fill, white) 80%),
       black
     )
   );
-  --sideboard-fill-offset: color-mix(
+  --document-list-fill-offset: color-mix(
     in oklab,
-    var(--sideboard-fill),
+    var(--document-list-fill),
     oklch(1 0 0 / 1) 10%
   );
-  /* the footer sits a touch darker than the sideboard surface. */
-  --sideboard-footer-fill: var(--studio-chrome-fill-offset-10);
+  --document-list-line: var(--studio-line, black);
+  --document-list-widget-fill: var(--studio-fill, white);
+  --document-list-widget-line: var(--document-list-line);
 
-  --sideboard-line: var(--studio-line, black);
-  --sideboard-widget-fill: var(--studio-fill, white);
-  --sideboard-widget-line: var(--sideboard-line);
+  --document-list-padding-x: 0.5rem;
 
-  --sideboard-padding-x: 0.5rem;
-
-  --sideboard-radius: 0.275rem;
+  --document-list-radius: 0.275rem;
   --placeholder-line: var(--studio-line-offset-50, #808e80);
-  --sideboard-search-line: var(--studio-line, #000);
+  --document-list-search-line: var(--studio-line, #000);
 
-  --sideboard-primary: color-mix(in oklch, var(--studio-secondary, #33ccf8), var(--studio-fill, white) 60%);
+  --document-list-primary: color-mix(in oklch, var(--studio-secondary, #33ccf8), var(--studio-fill, white) 60%);
 
-  --sideboard-create-new-fill: var(--studio-fill, white);
-  --sideboard-create-new-line: color-mix(
+  --document-list-create-new-fill: var(--studio-fill, white);
+  --document-list-create-new-line: color-mix(
     in oklch,
-    var(--sideboard-primary),
+    var(--document-list-primary),
     var(--studio-line, black) 30%
   );
-  --sideboard-create-new-border-line: color-mix(
+  --document-list-create-new-border-line: color-mix(
     in oklch,
-    var(--sideboard-primary),
-    var(--sideboard-create-new-fill) 50%
+    var(--document-list-primary),
+    var(--document-list-create-new-fill) 50%
   );
-  --sideboard-create-new-shadow-color: color-mix(
+  --document-list-create-new-shadow-color: color-mix(
     in oklch,
-    var(--sideboard-fill),
-    var(--sideboard-line) 10%
+    var(--document-list-fill),
+    var(--document-list-line) 10%
   );
 
-  --sideboard-family: var(--studio-family-sans, system-ui, sans-serif);
-  --sideboard-family-code: var(--studio-family-code, ui-monospace, monospace);
-  --sideboard-muted: var(--studio-line-offset-40, #666);
-  --sideboard-border: var(--studio-fill-offset-10, #e5e5e5);
-  --sideboard-border-strong: var(--studio-fill-offset-20, #ccc);
-  /* subtle divider on the sideboard's chrome surface - the same base-theme
+  --document-list-family: var(--studio-family-sans, system-ui, sans-serif);
+  --document-list-family-code: var(--studio-family-code, ui-monospace, monospace);
+  --document-list-muted: var(--studio-line-offset-40, #666);
+  --document-list-border: var(--studio-fill-offset-10, #e5e5e5);
+  --document-list-border-strong: var(--studio-fill-offset-20, #ccc);
+  /* subtle divider on the document-list's chrome surface - the same base-theme
      token the patchwork-frame sidebar divider uses (chrome mixed toward the
      chrome ink, so it tracks the palette and reads correctly light/dark). */
-  --sideboard-divider: var(--studio-chrome-offset-20, #d4d4d4);
-  --sideboard-added: var(--studio-added, #35f7ca);
-  --sideboard-danger: var(--studio-danger, #ff6a90);
-  --sideboard-toggle-hover: color-mix(in oklch, var(--studio-line, black), transparent 93%);
+  --document-list-divider: var(--studio-chrome-offset-20, #d4d4d4);
+  --document-list-added: var(--studio-added, #35f7ca);
+  --document-list-danger: var(--studio-danger, #ff6a90);
+  --document-list-toggle-hover: color-mix(in oklch, var(--studio-line, black), transparent 93%);
+  --account-bar-fill: var(--studio-chrome-offset-10)
 }
 }
 
@@ -70,27 +68,27 @@ button {
   padding: 0;
 }
 
-.sideboard,
-.sideboard * {
+.document-list,
+.document-list * {
   box-sizing: border-box;
 }
 
-.sideboard {
-  background: var(--sideboard-fill);
+.document-list {
+  background: var(--document-list-fill);
   display: flex;
   height: 100%;
   flex-direction: column;
   gap: 0.75rem;
-  font-family: var(--sideboard-family);
-  padding-inline: var(--sideboard-padding-x);
+  font-family: var(--document-list-family);
+  padding-inline: var(--document-list-padding-x);
   /* Space above the doclist. Defaults to just the top safe-area inset; hosts
-     like patchwork-frame override --sideboard-top-margin to also clear their
+     like patchwork-frame override --document-list-top-margin to also clear their
      own header. Declared via the var() fallback (not on :host) so an ancestor's
      value can cascade in. */
-  padding-top: var(--sideboard-top-margin, env(safe-area-inset-top, 0px));
+  padding-top: var(--document-list-top-margin, env(safe-area-inset-top, 0px));
   padding-bottom: env(safe-area-inset-bottom);
   --depth: 0;
-  .sideboard-close-button {
+  .document-list-close-button {
     display: flex;
     align-items: center;
     align-self: flex-start;
@@ -101,10 +99,10 @@ button {
     border: none;
     cursor: pointer;
     opacity: 0.5;
-    color: var(--sideboard-line);
+    color: var(--document-list-line);
   }
 
-  .sideboard-close-button:hover {
+  .document-list-close-button:hover {
     opacity: 1;
   }
 }
@@ -114,9 +112,9 @@ button {
   padding-inline: 0.75rem;
   padding-block: 0.375rem;
   border: none;
-  border-radius: var(--sideboard-radius);
-  background: var(--sideboard-create-new-fill);
-  color: var(--sideboard-line);
+  border-radius: var(--document-list-radius);
+  background: var(--document-list-create-new-fill);
+  color: var(--document-list-line);
   font-weight: 400;
   align-items: center;
   justify-content: start;
@@ -137,7 +135,7 @@ button {
   justify-content: center;
   cursor: grab;
   /* icon rides a little paler than the full ink at rest */
-  color: color-mix(in oklch, var(--sideboard-line), transparent 35%);
+  color: color-mix(in oklch, var(--document-list-line), transparent 35%);
   transition:
     color 0.12s ease,
     box-shadow 0.12s ease;
@@ -145,7 +143,7 @@ button {
 
 /* darken and grow a little buttony shadow on hover */
 .create-new-button--square:hover {
-  color: var(--sideboard-line);
+  color: var(--document-list-line);
   box-shadow: var(--studio-shadow, 0 1px 3px rgb(0 0 0 / 0.1), 0 1px 2px rgb(0 0 0 / 0.06));
 }
 
@@ -174,7 +172,7 @@ button {
 
 /* sticky toolbar pinned to the top of the scrolling doclist: square new-doc
    button + filter, laid out horizontally. */
-.sideboard__toolbar {
+.document-list__toolbar {
   position: sticky;
   top: 0;
   z-index: 3;
@@ -182,11 +180,11 @@ button {
   align-items: center;
   gap: 0.375rem;
   padding: 0.375rem;
-  background: var(--sideboard-widget-fill);
-  border-bottom: 1px solid var(--sideboard-divider);
+  background: var(--document-list-widget-fill);
+  border-bottom: 1px solid var(--document-list-divider);
 }
 
-.sideboard__toolbar .sideboard__filter-container {
+.document-list__toolbar .document-list__filter-container {
   flex: 1;
   min-width: 0;
 }
@@ -195,10 +193,10 @@ button {
   height: 1em;
 }
 
-.sideboard__filter-container {
+.document-list__filter-container {
   position: relative;
   font-size: 0.875rem;
-  border-radius: var(--sideboard-radius);
+  border-radius: var(--document-list-radius);
   .search-icon {
     height: 1em;
     top: 0.4lh;
@@ -209,23 +207,23 @@ button {
   }
   &:focus-within {
     .search-icon {
-      stroke: var(--sideboard-line);
+      stroke: var(--document-list-line);
     }
   }
 }
 
-.sideboard__filter {
+.document-list__filter {
   width: 100%;
 
-  background: var(--sideboard-widget-fill);
-  color: var(--sideboard-widget-line);
+  background: var(--document-list-widget-fill);
+  color: var(--document-list-widget-line);
 
   padding-left: 2em;
   padding-right: 0.75rem;
   padding-top: 0.375rem;
   padding-bottom: 0.375rem;
   border: none;
-  border-radius: var(--sideboard-radius);
+  border-radius: var(--document-list-radius);
 
   &::placeholder {
     color: var(--placeholder-line);
@@ -235,15 +233,15 @@ button {
     outline-color: var(--sidebar-widget-line);
     outline-offset: 1px;
     box-shadow: 0 0 0 4px #fff;
-    border-radius: var(--sideboard-radius);
+    border-radius: var(--document-list-radius);
   }
 }
 
-.sideboard__doclist {
+.document-list__doclist {
   --doclist-padding-x: 0.75rem;
   display: flex;
   flex-direction: column;
-  border-radius: var(--sideboard-radius);
+  border-radius: var(--document-list-radius);
   box-shadow: 0 1px 2px rgba(0, 20, 50, 0.05);
   width: 100%;
   max-height: 100%;
@@ -257,10 +255,10 @@ button {
   }
 }
 
-.sideboard__doclist--drag-over {
-  background: color-mix(in oklch, var(--sideboard-primary), transparent 95%);
+.document-list__doclist--drag-over {
+  background: color-mix(in oklch, var(--document-list-primary), transparent 95%);
   box-shadow:
-    0 0 0 2px var(--sideboard-primary) inset,
+    0 0 0 2px var(--document-list-primary) inset,
     0 1px 2px rgba(0, 20, 50, 0.05);
 }
 
@@ -277,8 +275,8 @@ button {
   &:focus-visible {
     outline-color: #000;
     outline-offset: -2px;
-    box-shadow: 0 0 0 4px var(--sideboard-widget-fill);
-    border-radius: var(--sideboard-radius);
+    box-shadow: 0 0 0 4px var(--document-list-widget-fill);
+    border-radius: var(--document-list-radius);
   }
 
   &:active {
@@ -287,19 +285,19 @@ button {
   }
 
   &[aria-selected="true"] {
-    background: var(--sideboard-primary);
-    .sideboard__doclist > &:first-child {
-      border-top-left-radius: var(--sideboard-radius);
-      border-top-right-radius: var(--sideboard-radius);
+    background: var(--document-list-primary);
+    .document-list__doclist > &:first-child {
+      border-top-left-radius: var(--document-list-radius);
+      border-top-right-radius: var(--document-list-radius);
     }
-    .sideboard__doclist > &:last-child {
-      border-bottom-left-radius: var(--sideboard-radius);
-      border-bottom-right-radius: var(--sideboard-radius);
+    .document-list__doclist > &:last-child {
+      border-bottom-left-radius: var(--document-list-radius);
+      border-bottom-right-radius: var(--document-list-radius);
     }
   }
   &[aria-checked="true"] {
     outline: 2px dashed
-      color-mix(in oklch, var(--sideboard-line), transparent 50%);
+      color-mix(in oklch, var(--document-list-line), transparent 50%);
     outline-offset: -4px;
   }
   &[data-dnd-dragging] {
@@ -312,7 +310,7 @@ button {
     margin-left: calc(var(--depth) * 1.75rem);
     right: 0;
     height: 2px;
-    background: var(--sideboard-line);
+    background: var(--document-list-line);
   }
   &[data-dnd-droplist-state="above"]::before {
     top: -1px;
@@ -323,17 +321,17 @@ button {
 }
 
 .document-list-folder[data-drop-state="inside"] {
-  outline: 2px solid var(--sideboard-primary);
+  outline: 2px solid var(--document-list-primary);
   outline-offset: -2px;
-  border-radius: var(--sideboard-radius);
-  background: color-mix(in oklch, var(--sideboard-primary), transparent 50%);
+  border-radius: var(--document-list-radius);
+  background: color-mix(in oklch, var(--document-list-primary), transparent 50%);
   > .document-list-item::before {
     content: "";
     position: absolute;
     left: 0;
     right: 0;
     height: 2px;
-    background: var(--sideboard-line);
+    background: var(--document-list-line);
     bottom: 0;
   }
   [data-dnd-droplist-state]::before {
@@ -365,7 +363,7 @@ button {
   margin-left: -0.75ch;
   padding-inline: 0.25ch;
   &:hover {
-    background: var(--sideboard-toggle-hover);
+    background: var(--document-list-toggle-hover);
   }
 }
 
@@ -376,22 +374,22 @@ button {
 .document-list-folder__circular-ref {
   padding: 0.5rem;
   padding-left: calc(2.2rem * var(--depth));
-  color: var(--sideboard-muted);
+  color: var(--document-list-muted);
   font-style: italic;
   font-size: 0.9em;
 }
 
-.sideboard__item {
+.document-list__item {
   content-visibility: auto;
   contain-intrinsic-size: auto 2.25rem;
 }
 
-.sideboard__item--invisible {
+.document-list__item--invisible {
   display: none;
 }
 
-.sideboard__item--visible,
-.sideboard__item--invisible:has(.sideboard__item--visible) {
+.document-list__item--visible,
+.document-list__item--invisible:has(.document-list__item--visible) {
   display: block;
 }
 
@@ -399,43 +397,13 @@ button {
   padding-left: calc(1.8rem * var(--depth));
 }
 
-.sideboard-footer {
-  container-type: inline-size;
-  height: 4rem;
-  min-height: 4em;
-  display: flex;
-  overflow: hidden;
-  justify-content: space-between;
-  align-items: center;
-  gap: 1rem;
-  padding: var(--sideboard-padding-x);
-  padding-bottom: calc(0.25rem + env(safe-area-inset-bottom));
-  padding-left: calc(env(safe-area-inset-left) + var(--sideboard-padding-x));
-  padding-right: calc(env(safe-area-inset-right) + var(--sideboard-padding-x));
-  margin-inline: calc(-1 * var(--sideboard-padding-x));
-  background: var(--sideboard-footer-fill);
-  color: var(--sideboard-line);
-  border-top: 1px solid var(--sideboard-divider);
-  margin-top: auto;
-  > button {
-    border: 1px solid transparent;
-    padding-inline: 0.25rem;
-    padding-block: 0.125rem;
-    border-radius: 3px;
-    white-space: nowrap;
-    &:hover {
-      border: 1px solid var(--sideboard-divider);
-    }
-  }
-}
-
-.sideboard-widget {
+.document-list-widget {
   width: 100%;
-  background: var(--sideboard-widget-fill);
-  color: var(--sideboard-widget-line);
+  background: var(--document-list-widget-fill);
+  color: var(--document-list-widget-line);
 }
 
-.sideboard-widget:empty {
+.document-list-widget:empty {
   display: none;
 }
 
@@ -461,10 +429,10 @@ button {
   max-height: min(400px, 50vh);
   overflow-y: auto;
   padding: 4px;
-  background-color: var(--sideboard-widget-fill);
+  background-color: var(--document-list-widget-fill);
   font-size: 0.8rem;
   border-radius: 6px;
-  border: 1px solid var(--sideboard-border);
+  border: 1px solid var(--document-list-border);
   box-shadow:
     0 4px 6px -1px rgb(0 0 0 / 0.1),
     0 2px 4px -2px rgb(0 0 0 / 0.1);
@@ -482,7 +450,7 @@ button {
 .popmenu__sub-trigger {
   font-size: 0.8rem;
   line-height: 1;
-  color: var(--sideboard-widget-line);
+  color: var(--document-list-widget-line);
   border-radius: 4px;
   display: flex;
   align-items: center;
@@ -495,14 +463,14 @@ button {
   cursor: default;
 }
 .popmenu__sub-trigger[data-expanded] {
-  background-color: var(--sideboard-fill-offset);
-  color: var(--sideboard-line);
+  background-color: var(--document-list-fill-offset);
+  color: var(--document-list-line);
 }
 .popmenu__item[data-disabled],
 .popmenu__checkbox-item[data-disabled],
 .popmenu__radio-item[data-disabled],
 .popmenu__sub-trigger[data-disabled] {
-  color: var(--sideboard-muted);
+  color: var(--document-list-muted);
   opacity: 0.5;
   pointer-events: none;
 }
@@ -513,10 +481,10 @@ button {
   outline: none;
   background-color: color-mix(
     in oklch,
-    var(--sideboard-primary),
-    var(--sideboard-widget-fill) 20%
+    var(--document-list-primary),
+    var(--document-list-widget-fill) 20%
   );
-  color: var(--sideboard-widget-line);
+  color: var(--document-list-widget-line);
 }
 @keyframes contentShow {
   from {
@@ -543,10 +511,10 @@ button {
   outline: none;
   background-color: color-mix(
     in oklch,
-    var(--sideboard-primary),
-    var(--sideboard-widget-fill) 20%
+    var(--document-list-primary),
+    var(--document-list-widget-fill) 20%
   );
-  color: var(--sideboard-widget-line);
+  color: var(--document-list-widget-line);
 }
 
 .create-new-filter {
@@ -558,19 +526,19 @@ button {
   box-sizing: border-box;
   padding: 6px 8px;
   font-size: 0.8rem;
-  border: 1px solid var(--sideboard-border-strong);
+  border: 1px solid var(--document-list-border-strong);
   border-radius: 4px;
-  background: var(--sideboard-widget-fill);
-  color: var(--sideboard-widget-line);
+  background: var(--document-list-widget-fill);
+  color: var(--document-list-widget-line);
   outline: none;
 }
 
 .create-new-filter__input:focus {
-  border-color: var(--sideboard-primary);
+  border-color: var(--document-list-primary);
 }
 
 .create-new-filter__input::placeholder {
-  color: var(--sideboard-muted);
+  color: var(--document-list-muted);
 }
 
 /* Share Modal */
@@ -589,8 +557,8 @@ button {
 }
 
 .share-modal__content {
-  background: var(--sideboard-widget-fill);
-  color: var(--sideboard-widget-line);
+  background: var(--document-list-widget-fill);
+  color: var(--document-list-widget-line);
   border-radius: 8px;
   width: 90vw;
   max-width: 480px;
@@ -607,7 +575,7 @@ button {
   align-items: center;
   padding: 1.25rem 1.5rem;
   border-bottom: 1px solid
-    color-mix(in oklab, var(--sideboard-widget-fill), black 15%);
+    color-mix(in oklab, var(--document-list-widget-fill), black 15%);
 }
 
 .share-modal__header h2 {
@@ -621,7 +589,7 @@ button {
   border: none;
   cursor: pointer;
   font-size: 1.5rem;
-  color: var(--sideboard-widget-line);
+  color: var(--document-list-widget-line);
   width: 2rem;
   height: 2rem;
   display: flex;
@@ -632,7 +600,7 @@ button {
 }
 
 .share-modal__close:hover {
-  background: color-mix(in oklab, var(--sideboard-widget-fill), black 10%);
+  background: color-mix(in oklab, var(--document-list-widget-fill), black 10%);
 }
 
 .share-modal__body {
@@ -655,7 +623,7 @@ button {
 
 .share-modal__public-status {
   font-size: 0.875rem;
-  color: var(--sideboard-widget-line);
+  color: var(--document-list-widget-line);
 }
 
 .share-modal__public-actions {
@@ -678,27 +646,27 @@ button {
 .share-modal__input {
   width: 100%;
   padding: 0.5rem 0.75rem;
-  border: 1px solid color-mix(in oklab, var(--sideboard-widget-fill), black 15%);
+  border: 1px solid color-mix(in oklab, var(--document-list-widget-fill), black 15%);
   border-radius: 4px;
-  background: var(--sideboard-widget-fill);
-  color: var(--sideboard-widget-line);
+  background: var(--document-list-widget-fill);
+  color: var(--document-list-widget-line);
   font-size: 0.875rem;
-  font-family: var(--sideboard-family-code);
+  font-family: var(--document-list-family-code);
   resize: vertical;
   min-height: 4rem;
 }
 
 .share-modal__input:focus {
-  outline: 2px solid var(--sideboard-primary);
+  outline: 2px solid var(--document-list-primary);
   outline-offset: 1px;
 }
 
 .share-modal__select {
   padding: 0.5rem 0.75rem;
-  border: 1px solid color-mix(in oklab, var(--sideboard-widget-fill), black 15%);
+  border: 1px solid color-mix(in oklab, var(--document-list-widget-fill), black 15%);
   border-radius: 4px;
-  background: var(--sideboard-widget-fill);
-  color: var(--sideboard-widget-line);
+  background: var(--document-list-widget-fill);
+  color: var(--document-list-widget-line);
   font-size: 0.875rem;
 }
 
@@ -726,7 +694,7 @@ button {
 .share-modal__divider {
   border: none;
   border-top: 1px solid
-    color-mix(in oklab, var(--sideboard-widget-fill), black 15%);
+    color-mix(in oklab, var(--document-list-widget-fill), black 15%);
   margin: 0 0 1.5rem 0;
 }
 
@@ -739,7 +707,7 @@ button {
 .share-modal__loading,
 .share-modal__empty {
   font-size: 0.875rem;
-  color: color-mix(in oklab, var(--sideboard-widget-line), transparent 40%);
+  color: color-mix(in oklab, var(--document-list-widget-line), transparent 40%);
   font-style: italic;
 }
 
@@ -764,7 +732,7 @@ button {
   align-items: center;
   justify-content: space-between;
   padding: 0.75rem;
-  background: color-mix(in oklab, var(--sideboard-widget-fill), black 5%);
+  background: color-mix(in oklab, var(--document-list-widget-fill), black 5%);
   border-radius: 4px;
 }
 
@@ -775,7 +743,7 @@ button {
 }
 
 .share-modal__member-id {
-  font-family: var(--sideboard-family-code);
+  font-family: var(--document-list-family-code);
   font-size: 0.8rem;
 }
 
@@ -785,25 +753,25 @@ button {
 
 .share-modal__member-id--public {
   font-weight: 600;
-  color: var(--sideboard-added);
+  color: var(--document-list-added);
 }
 
 .share-modal__you-label {
-  color: var(--sideboard-primary);
+  color: var(--document-list-primary);
   font-weight: 600;
 }
 
 .share-modal__member-access {
   font-size: 0.75rem;
   text-transform: uppercase;
-  color: color-mix(in oklab, var(--sideboard-widget-line), transparent 30%);
+  color: color-mix(in oklab, var(--document-list-widget-line), transparent 30%);
 }
 
 .share-modal__remove-button {
   background: transparent;
   border: none;
   cursor: pointer;
-  color: color-mix(in oklab, var(--sideboard-widget-line), transparent 40%);
+  color: color-mix(in oklab, var(--document-list-widget-line), transparent 40%);
   padding: 0.25rem;
   border-radius: 4px;
   transition: all 0.15s ease;
@@ -813,7 +781,65 @@ button {
 }
 
 .share-modal__remove-button:hover {
-  color: var(--sideboard-danger);
+  color: var(--document-list-danger);
   background: color-mix(in oklch, #ef4444, transparent 90%);
 }
 
+
+/* Combined chee/sideboard tool: the document list with the account bar pinned
+   below it. The document-list panel fills; the bar sits at the bottom. */
+.sideboard {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+}
+
+.sideboard > .document-list {
+  flex: 1;
+  height: auto;
+  min-height: 0;
+  padding-bottom: 0;
+}
+
+/* The account bar: avatar (account picker), packages, settings. Usable as its
+   own tool or pinned to the bottom of the combined sideboard. */
+.account-bar {
+  container-type: inline-size;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  min-height: 4rem;
+  background: var(--account-bar-fill);
+  color: var(--document-list-line);
+  border-top: 1px solid var(--document-list-divider);
+  padding-block: 0.25rem;
+  padding-bottom: calc(0.25rem + env(safe-area-inset-bottom));
+  padding-left: calc(env(safe-area-inset-left) + var(--document-list-padding-x));
+  padding-right: calc(env(safe-area-inset-right) + var(--document-list-padding-x));
+  justify-content: space-between;
+}
+
+.account-bar__button {
+  display: flex;
+  align-items: center;
+  border: 1px solid transparent;
+  padding-inline: 0.25rem;
+  padding-block: 0.125rem;
+  border-radius: 3px;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.account-bar__button:hover {
+  border-color: var(--document-list-divider);
+}
+
+.account-bar__avatar patchwork-view {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
diff --git a/sideboard/src/index.tsx b/sideboard/src/index.tsx
index 3ba6d59f..cdb24073 100644
--- a/sideboard/src/index.tsx
+++ b/sideboard/src/index.tsx
@@ -1,7 +1,8 @@
 import "./index.css";
 import { render } from "solid-js/web";
 import { type ToolImplementation } from "@inkandswitch/patchwork-plugins";
-import type { TinyPatchworkAccountDoc } from "./types.ts";
+import type { FolderDoc } from "@inkandswitch/patchwork-filesystem";
+import type { SideboardAccountDoc } from "./types.ts";
 
 async function loadStyles() {
   const url = new URL("./index.css", import.meta.url);
@@ -17,15 +18,65 @@ function addStyles(textContent: string) {
 }
 
 export const plugins = [
+  {
+    id: "chee/document-list",
+    type: "patchwork:tool",
+    name: "Document List",
+    supportedDatatypes: ["folder"],
+    icon: "FolderOpen",
+    unlisted: true,
+    async load(): Promise<ToolImplementation<FolderDoc>> {
+      const [{ DocumentListPanel }, styles] = await Promise.all([
+        import("./sideboard/document-list-panel.tsx"),
+        loadStyles(),
+      ]);
+      return (handle, element) => {
+        addStyles(styles);
+        return render(
+          () => (
+            <DocumentListPanel
+              folderUrl={handle.url}
+              repo={element.repo}
+              element={element}
+            />
+          ),
+          element
+        );
+      };
+    },
+  },
+  {
+    id: "chee/account-bar",
+    type: "patchwork:tool",
+    name: "Account Bar",
+    supportedDatatypes: ["account"],
+    icon: "UserCircle",
+    unlisted: true,
+    async load(): Promise<ToolImplementation<SideboardAccountDoc>> {
+      const [{ AccountBar }, styles] = await Promise.all([
+        import("./sideboard/account-bar.tsx"),
+        loadStyles(),
+      ]);
+      return (handle, element) => {
+        addStyles(styles);
+        return render(
+          () => (
+            <AccountBar handle={handle} repo={element.repo} element={element} />
+          ),
+          element
+        );
+      };
+    },
+  },
   {
     id: "chee/sideboard",
     type: "patchwork:tool",
     tags: ["sidebar-account"],
     name: "Sideboard",
-    supportedDatatypes: ["patchwork:account", "folder"],
+    supportedDatatypes: ["account"],
     icon: "FolderOpen",
     unlisted: true,
-    async load(): Promise<ToolImplementation<TinyPatchworkAccountDoc>> {
+    async load(): Promise<ToolImplementation<SideboardAccountDoc>> {
       const [{ Sideboard }, styles] = await Promise.all([
         import("./sideboard/sideboard.tsx"),
         loadStyles(),
@@ -34,7 +85,6 @@ export const plugins = [
         addStyles(styles);
         return render(
           () => (
-            // @ts-expect-error - handle type doesn't know it supports folders
             <Sideboard handle={handle} repo={element.repo} element={element} />
           ),
           element
diff --git a/sideboard/src/sideboard/account-bar.tsx b/sideboard/src/sideboard/account-bar.tsx
new file mode 100644
index 00000000..73720a01
--- /dev/null
+++ b/sideboard/src/sideboard/account-bar.tsx
@@ -0,0 +1,56 @@
+import { makeDocumentProjection } from "@automerge/automerge-repo-solid-primitives";
+import { Show } from "solid-js";
+import type { OpenDocumentEventDetail } from "@inkandswitch/patchwork-elements";
+
+import type { PatchworkToolProps, SideboardAccountDoc } from "../types.ts";
+import { createOpenEvent } from "./events.ts";
+
+/**
+ * The account bar: the contact avatar (opens the account picker), Packages
+ * (module settings) and Settings (frame configurator). Usable as its own tool
+ * or pinned to the bottom of the combined sideboard.
+ */
+export function AccountBar(props: PatchworkToolProps<SideboardAccountDoc>) {
+  const doc = makeDocumentProjection(props.handle);
+
+  const open = (detail: OpenDocumentEventDetail) =>
+    props.element.dispatchEvent(createOpenEvent(detail));
+
+  return (
+    <footer class="account-bar">
+      <Show when={doc.contactUrl}>
+        <button
+          type="button"
+          class="account-bar__button account-bar__avatar"
+          title="Account"
+          aria-label="Account"
+          onClick={() =>
+            open({ url: props.handle.url, toolId: "account-picker" })
+          }
+        >
+          <patchwork-view doc-url={doc.contactUrl!} tool-id="contact-avatar" />
+        </button>
+      </Show>
+
+      <Show when={doc.moduleSettingsUrl}>
+        <button
+          type="button"
+          class="account-bar__button"
+          onClick={() => open({ url: doc.moduleSettingsUrl! })}
+        >
+          Packages
+        </button>
+      </Show>
+
+      <button
+        type="button"
+        class="account-bar__button"
+        onClick={() =>
+          open({ url: props.handle.url, toolId: "frame-configurator" })
+        }
+      >
+        Settings
+      </button>
+    </footer>
+  );
+}
diff --git a/sideboard/src/sideboard/create-new.tsx b/sideboard/src/sideboard/create-new.tsx
index 62b91dfc..7cd6f0b7 100644
--- a/sideboard/src/sideboard/create-new.tsx
+++ b/sideboard/src/sideboard/create-new.tsx
@@ -220,13 +220,13 @@ export default function CreateNew(props: CreateNewProps) {
     preview.style.cssText = `
       position: absolute;
       top: -1000px;
-      background: var(--sideboard-primary);
+      background: var(--document-list-primary);
       padding: 0.5rem 0.75rem;
-      border-radius: var(--sideboard-radius);
+      border-radius: var(--document-list-radius);
       font-family: inherit;
       font-size: 0.9rem;
       pointer-events: none;
-      color: var(--sideboard-line);
+      color: var(--document-list-line);
       box-shadow: 0 2px 8px rgba(0,0,0,0.1);
     `;
     preview.textContent = "new doc";
diff --git a/sideboard/src/sideboard/document-list-panel.tsx b/sideboard/src/sideboard/document-list-panel.tsx
new file mode 100644
index 00000000..31a7a615
--- /dev/null
+++ b/sideboard/src/sideboard/document-list-panel.tsx
@@ -0,0 +1,163 @@
+import { useDocument } from "@automerge/automerge-repo-solid-primitives";
+import type { AutomergeUrl, Repo } from "@automerge/automerge-repo";
+import type { PatchworkViewElement } from "@inkandswitch/patchwork-elements";
+import type { OpenDocumentEventDetail } from "@inkandswitch/patchwork-elements";
+import type { FolderDoc } from "@inkandswitch/patchwork-filesystem";
+import { createSignal } from "solid-js";
+
+import { filter, setFilter, setPendingNewDoc } from "./state.ts";
+import CreateNew from "./create-new.tsx";
+import { createOpenEvent } from "./events.ts";
+import { SearchIcon } from "./icons.tsx";
+import { DocumentList } from "./document-list/document-list.tsx";
+import { subscribe } from "@inkandswitch/patchwork-providers-solid";
+import { handleFilesDrop } from "./document-list/file-drop.ts";
+import { copyMode, isNewDocDrag } from "./dnd/dnd.ts";
+import { executeDrop } from "./dnd/operations.ts";
+import { getDndPayload, hasDocumentDrag } from "./dnd/payload.ts";
+
+/**
+ * The document-list panel: a sticky toolbar (new-doc button + filter) over a
+ * scrolling, recursive list of the folder's documents and subfolders. Renders a
+ * single folder, given its url.
+ */
+export function DocumentListPanel(props: {
+  folderUrl: AutomergeUrl;
+  repo: Repo;
+  element: PatchworkViewElement;
+}) {
+  const [folder, folderHandle] = useDocument<FolderDoc>(() => props.folderUrl, {
+    repo: props.repo,
+  });
+
+  const selectedDocUrls = subscribe<AutomergeUrl[]>(
+    props.element,
+    { type: "patchwork:selected-doc" },
+    []
+  );
+
+  function open(detail: OpenDocumentEventDetail) {
+    props.element.dispatchEvent(createOpenEvent(detail));
+  }
+
+  const [isDraggingFile, setIsDraggingFile] = createSignal(false);
+
+  return (
+    <aside class="document-list">
+      <nav
+        class="document-list__doclist document-list-widget"
+        classList={{
+          "document-list__doclist--drag-over": isDraggingFile(),
+        }}
+        role="tree"
+        aria-multiselectable="true"
+        onDragOver={(event: DragEvent) => {
+          // File drops from OS
+          if (event.dataTransfer?.types.includes("Files")) {
+            event.preventDefault();
+            event.dataTransfer.dropEffect = "copy";
+            setIsDraggingFile(true);
+            return;
+          }
+          // Item drags (dropping into the list's empty space appends to root)
+          // and new-doc drags both append to the root list.
+          if (hasDocumentDrag(event.dataTransfer) || isNewDocDrag(event)) {
+            event.preventDefault();
+            event.dataTransfer!.dropEffect = copyMode() ? "copy" : "move";
+          }
+        }}
+        onDragLeave={(event: DragEvent) => {
+          const related = event.relatedTarget as Element;
+          if (!related || !(event.currentTarget as Element).contains(related)) {
+            setIsDraggingFile(false);
+          }
+        }}
+        onDrop={(event: DragEvent) => {
+          event.preventDefault();
+          setIsDraggingFile(false);
+
+          // New-doc drag onto the list's empty space: append a placeholder at
+          // the end of the root list.
+          if (isNewDocDrag(event)) {
+            const h = folderHandle();
+            if (h) {
+              const len = h.doc()?.docs?.length ?? 0;
+              setPendingNewDoc({ containerUrl: h.url, index: len });
+            }
+            return;
+          }
+
+          const files = event.dataTransfer?.files;
+          if (files && files.length > 0 && folderHandle()) {
+            const folderDoc = folderHandle()!.doc();
+            const insertIndex = folderDoc?.docs?.length || 0;
+            handleFilesDrop(
+              files,
+              folderHandle()!,
+              props.repo,
+              "inside",
+              insertIndex
+            );
+            return;
+          }
+
+          const payload = getDndPayload(event);
+          if (!payload || !folderHandle()) return;
+
+          const { source, items } = payload;
+          const rootUrl = folderHandle()!.url;
+          const docsLength = folderHandle()!.doc()?.docs?.length ?? 0;
+
+          executeDrop(
+            {
+              draggedIds: items.map((i: { id: string }) => i.id),
+              draggedUrls: items.map((i: { url: AutomergeUrl }) => i.url),
+              draggedItems: items,
+              // Append after the last root item; "inside" root if empty
+              targetId:
+                docsLength > 0 ? `${rootUrl}/${docsLength - 1}` : rootUrl,
+              position: docsLength > 0 ? "below" : "inside",
+              sourceToolId: source,
+              copyMode: copyMode(),
+            },
+            props.repo,
+            folderHandle.latest!,
+            props.element.toolId!
+          );
+        }}
+      >
+        <div class="document-list__toolbar">
+          <CreateNew
+            square
+            draggable
+            changeFolder={(fn) => folderHandle()?.change(fn)}
+            repo={props.repo}
+            hive={props.element.hive}
+            open={open}
+          />
+          <div class="document-list__filter-container">
+            <SearchIcon />
+            <input
+              name="filter"
+              class="document-list__filter"
+              placeholder="Filter by title"
+              value={filter()}
+              onInput={(event) => setFilter(event.target.value.toLowerCase())}
+            />
+          </div>
+        </div>
+        <DocumentList
+          depth={0}
+          repo={props.repo}
+          docs={folder()?.docs}
+          handle={folderHandle.latest!}
+          open={open}
+          hive={props.element.hive}
+          selectedDocUrls={selectedDocUrls()}
+          element={props.element}
+          rootFolderHandle={folderHandle.latest!}
+        />
+      </nav>
+    </aside>
+  );
+}
diff --git a/sideboard/src/sideboard/document-list/document-list.tsx b/sideboard/src/sideboard/document-list/document-list.tsx
index 7c80b74f..1ef6cd41 100644
--- a/sideboard/src/sideboard/document-list/document-list.tsx
+++ b/sideboard/src/sideboard/document-list/document-list.tsx
@@ -96,7 +96,7 @@ export function DocumentList(props: DocumentListProps) {
   };
 
   const placeholder = () => (
-    <div class="sideboard__item sideboard__item--visible">
+    <div class="document-list__item document-list__item--visible">
       <NewDocPlaceholder
         repo={props.repo}
         hive={props.hive}
@@ -259,9 +259,9 @@ export function DocumentList(props: DocumentListProps) {
               </Show>
               <div
                 classList={{
-                  sideboard__item: true,
-                  "sideboard__item--visible": visible(),
-                  "sideboard__item--invisible": !visible(),
+                  "document-list__item": true,
+                  "document-list__item--visible": visible(),
+                  "document-list__item--invisible": !visible(),
                 }}
               >
                 <Switch>
diff --git a/sideboard/src/sideboard/document-list/item.tsx b/sideboard/src/sideboard/document-list/item.tsx
index 1bd87082..1d79c742 100644
--- a/sideboard/src/sideboard/document-list/item.tsx
+++ b/sideboard/src/sideboard/document-list/item.tsx
@@ -196,13 +196,13 @@ export default function Item(props: {
           preview.style.cssText = `
             position: absolute;
             top: -1000px;
-            background: var(--sideboard-primary);
+            background: var(--document-list-primary);
             padding: 0.5rem 0.75rem;
-            border-radius: var(--sideboard-radius);
+            border-radius: var(--document-list-radius);
             font-family: inherit;
             font-size: 0.9rem;
             pointer-events: none;
-            color: var(--sideboard-line);
+            color: var(--document-list-line);
             box-shadow: 0 2px 8px rgba(0,0,0,0.1);
           `;
           const count = dragstack.size;
@@ -461,31 +461,6 @@ export default function Item(props: {
                 >
                   Automerge url
                 </ContextMenu.Item>
-                <Show when={tools.length}>
-                  <ContextMenu.Sub>
-                    <ContextMenu.SubTrigger class="popmenu__sub-trigger">
-                      Automerge url with...
-                    </ContextMenu.SubTrigger>
-                    <ContextMenu.Portal>
-                      <ContextMenu.SubContent class="popmenu__sub-content">
-                        <For each={tools}>
-                          {(tool) => (
-                            <ContextMenu.Item
-                              class="popmenu__item"
-                              onSelect={() =>
-                                navigator.clipboard.writeText(
-                                  `${props.url}&tool=${tool.id}`
-                                )
-                              }
-                            >
-                              {tool.name}
-                            </ContextMenu.Item>
-                          )}
-                        </For>
-                      </ContextMenu.SubContent>
-                    </ContextMenu.Portal>
-                  </ContextMenu.Sub>
-                </Show>
                 <ContextMenu.Item
                   class="popmenu__item"
                   onSelect={() =>
diff --git a/sideboard/src/sideboard/sideboard.tsx b/sideboard/src/sideboard/sideboard.tsx
index 9727625e..6d63b0cc 100644
--- a/sideboard/src/sideboard/sideboard.tsx
+++ b/sideboard/src/sideboard/sideboard.tsx
@@ -1,205 +1,31 @@
-import {
-  makeDocumentProjection,
-  useDocument,
-} from "@automerge/automerge-repo-solid-primitives";
-
-type TinyPatchworkAccountDoc = {
-  rootFolderUrl: AutomergeUrl;
-  moduleSettingsUrl: AutomergeUrl;
-  contactUrl: AutomergeUrl;
-};
-
-import type { PatchworkToolProps } from "../types.ts";
-import { filter, setFilter, setPendingNewDoc } from "./state.ts";
-import CreateNew from "./create-new.tsx";
-import type { FolderDoc } from "@inkandswitch/patchwork-filesystem";
-import { createOpenEvent } from "./events.ts";
-import { SearchIcon } from "./icons.tsx";
-import { DocumentList } from "./document-list/document-list.tsx";
-import type { AutomergeUrl } from "@automerge/automerge-repo";
-import type { OpenDocumentEventDetail } from "@inkandswitch/patchwork-elements";
-import { subscribe } from "@inkandswitch/patchwork-providers-solid";
-import { createSignal, Show } from "solid-js";
-import { handleFilesDrop } from "./document-list/file-drop.ts";
-import { copyMode, isNewDocDrag } from "./dnd/dnd.ts";
-import { executeDrop } from "./dnd/operations.ts";
-import { getDndPayload, hasDocumentDrag } from "./dnd/payload.ts";
-
-export function Sideboard(
-  props: PatchworkToolProps<TinyPatchworkAccountDoc | FolderDoc>
-) {
+import { makeDocumentProjection } from "@automerge/automerge-repo-solid-primitives";
+import { Show } from "solid-js";
+
+import type { PatchworkToolProps, SideboardAccountDoc } from "../types.ts";
+import { DocumentListPanel } from "./document-list-panel.tsx";
+import { AccountBar } from "./account-bar.tsx";
+
+/**
+ * The combined sideboard: the document-list panel for the account's root folder,
+ * with the account bar pinned below it. Reads the account document.
+ */
+export function Sideboard(props: PatchworkToolProps<SideboardAccountDoc>) {
   const doc = makeDocumentProjection(props.handle);
-  const [folder, folderHandle] = useDocument<FolderDoc>(
-    () => ("rootFolderUrl" in doc ? doc.rootFolderUrl : props.handle.url),
-    props
-  );
-
-  const moduleSettingsUrl = () =>
-    "moduleSettingsUrl" in doc ? doc.moduleSettingsUrl : undefined;
-  const accountDocUrl = () => props.handle.url;
-  const contactUrl = () => ("contactUrl" in doc ? doc.contactUrl : undefined);
-  const selectedDocUrls = subscribe<AutomergeUrl[]>(
-    props.element,
-    { type: "patchwork:selected-doc" },
-    []
-  );
-
-  function open(detail: OpenDocumentEventDetail) {
-    props.element.dispatchEvent(createOpenEvent(detail));
-  }
-
-  const [isDraggingFile, setIsDraggingFile] = createSignal(false);
 
   return (
-    <aside class="sideboard">
-      <nav
-        class="sideboard__doclist sideboard-widget"
-        classList={{
-          "sideboard__doclist--drag-over": isDraggingFile(),
-        }}
-        role="tree"
-        aria-multiselectable="true"
-        onDragOver={(event: DragEvent) => {
-          // File drops from OS
-          if (event.dataTransfer?.types.includes("Files")) {
-            event.preventDefault();
-            event.dataTransfer.dropEffect = "copy";
-            setIsDraggingFile(true);
-            return;
-          }
-          // Item drags (dropping into the list's empty space appends to root)
-          // and new-doc drags both append to the root list.
-          if (hasDocumentDrag(event.dataTransfer) || isNewDocDrag(event)) {
-            event.preventDefault();
-            event.dataTransfer!.dropEffect = copyMode() ? "copy" : "move";
-          }
-        }}
-        onDragLeave={(event: DragEvent) => {
-          const related = event.relatedTarget as Element;
-          if (!related || !(event.currentTarget as Element).contains(related)) {
-            setIsDraggingFile(false);
-          }
-        }}
-        onDrop={(event: DragEvent) => {
-          event.preventDefault();
-          setIsDraggingFile(false);
-
-          // New-doc drag onto the list's empty space: append a placeholder at
-          // the end of the root list.
-          if (isNewDocDrag(event)) {
-            const h = folderHandle();
-            if (h) {
-              const len = h.doc()?.docs?.length ?? 0;
-              setPendingNewDoc({ containerUrl: h.url, index: len });
-            }
-            return;
-          }
-
-          const files = event.dataTransfer?.files;
-          if (files && files.length > 0 && folderHandle()) {
-            const folderDoc = folderHandle()!.doc();
-            const insertIndex = folderDoc?.docs?.length || 0;
-            handleFilesDrop(
-              files,
-              folderHandle()!,
-              props.repo,
-              "inside",
-              insertIndex
-            );
-            return;
-          }
-
-          const payload = getDndPayload(event);
-          if (!payload || !folderHandle()) return;
-
-          const { source, items } = payload;
-          const rootUrl = folderHandle()!.url;
-          const docsLength = folderHandle()!.doc()?.docs?.length ?? 0;
-
-          executeDrop(
-            {
-              draggedIds: items.map((i: { id: string }) => i.id),
-              draggedUrls: items.map((i: { url: AutomergeUrl }) => i.url),
-              draggedItems: items,
-              // Append after the last root item; "inside" root if empty
-              targetId:
-                docsLength > 0 ? `${rootUrl}/${docsLength - 1}` : rootUrl,
-              position: docsLength > 0 ? "below" : "inside",
-              sourceToolId: source,
-              copyMode: copyMode(),
-            },
-            props.repo,
-            folderHandle.latest!,
-            props.element.toolId!
-          );
-        }}
-      >
-        <div class="sideboard__toolbar">
-          <CreateNew
-            square
-            draggable
-            changeFolder={(fn) => folderHandle()?.change(fn)}
-            repo={props.repo}
-            hive={props.element.hive}
-            open={open}
-          />
-          <div class="sideboard__filter-container">
-            <SearchIcon />
-            <input
-              name="filter"
-              class="sideboard__filter"
-              placeholder="Filter by title"
-              value={filter()}
-              onInput={(event) => setFilter(event.target.value.toLowerCase())}
-            />
-          </div>
-        </div>
-        <DocumentList
-          depth={0}
+    <div class="sideboard">
+      <Show when={doc.rootFolderUrl}>
+        <DocumentListPanel
+          folderUrl={doc.rootFolderUrl!}
           repo={props.repo}
-          docs={folder()?.docs}
-          handle={folderHandle.latest!}
-          open={open}
-          hive={props.element.hive}
-          selectedDocUrls={selectedDocUrls()}
           element={props.element}
-          rootFolderHandle={folderHandle.latest!}
         />
-      </nav>
-      <Show when={moduleSettingsUrl() && contactUrl()}>
-        <footer class="sideboard-footer">
-          <button
-            onClick={() =>
-              open({
-                url: accountDocUrl(),
-                toolId: "account-picker",
-              })
-            }
-            class="sideboard-footer__button"
-          >
-            <patchwork-view doc-url={contactUrl()!} tool-id="contact-avatar" />
-          </button>
-
-          <button
-            onClick={() => open({ url: moduleSettingsUrl()! })}
-            class="sideboard-footer__button"
-          >
-            Packages
-          </button>
-
-          <button
-            onClick={() =>
-              open({
-                url: accountDocUrl(),
-                toolId: "frame-configurator",
-              })
-            }
-            class="sideboard-footer__button"
-          >
-            Settings
-          </button>
-        </footer>
       </Show>
-    </aside>
+      <AccountBar
+        handle={props.handle}
+        repo={props.repo}
+        element={props.element}
+      />
+    </div>
   );
 }
diff --git a/sideboard/src/types.ts b/sideboard/src/types.ts
index 56d23341..88277cdd 100644
--- a/sideboard/src/types.ts
+++ b/sideboard/src/types.ts
@@ -7,7 +7,9 @@ export interface PatchworkToolProps<T> {
   element: PatchworkViewElement;
 }
 
-export type TinyPatchworkAccountDoc = {
-  rootFolderUrl: AutomergeUrl;
-  moduleSettingsUrl: AutomergeUrl;
+/** The account-doc fields the account bar / combined sideboard read. */
+export type SideboardAccountDoc = {
+  rootFolderUrl?: AutomergeUrl;
+  contactUrl?: AutomergeUrl;
+  moduleSettingsUrl?: AutomergeUrl;
 };
diff --git a/sideboard/vitest.config.ts b/sideboard/vitest.config.ts
new file mode 100644
index 00000000..715c53e5
--- /dev/null
+++ b/sideboard/vitest.config.ts
@@ -0,0 +1,14 @@
+import {defineConfig} from "vitest/config"
+import solid from "vite-plugin-solid"
+
+export default defineConfig({
+  plugins: [solid()],
+  test: {
+    environment: "happy-dom",
+    globals: true,
+    passWithNoTests: true,
+  },
+  resolve: {
+    conditions: ["development", "browser"],
+  },
+})
diff --git a/spacer/package.json b/spacer/package.json
index ec4bb92a..9694e654 100644
--- a/spacer/package.json
+++ b/spacer/package.json
@@ -5,6 +5,12 @@
   "main": "./index.js",
   "scripts": {
     "sync": "pushwork sync",
-    "register": "pw-modules add \"$MODULE_SETTINGS_DOC_URL\" \"$(pushwork url)\""
+    "register": "pw-modules add \"$MODULE_SETTINGS_DOC_URL\" \"$(pushwork url)\"",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "devDependencies": {
+    "happy-dom": "^15.11.7",
+    "vitest": "^3.2.4"
   }
 }
diff --git a/spacer/vitest.config.ts b/spacer/vitest.config.ts
new file mode 100644
index 00000000..44198156
--- /dev/null
+++ b/spacer/vitest.config.ts
@@ -0,0 +1,9 @@
+import {defineConfig} from "vitest/config"
+
+export default defineConfig({
+  test: {
+    environment: "happy-dom",
+    globals: true,
+    passWithNoTests: true,
+  },
+})
diff --git a/sync-indicator/package.json b/sync-indicator/package.json
index d0e131d5..967e26d0 100644
--- a/sync-indicator/package.json
+++ b/sync-indicator/package.json
@@ -14,7 +14,9 @@
     "build": "vite build",
     "dev": "vite build --watch",
     "pushwatch": "pnpm dev pushwork",
-    "register": "pw-modules add \"$MODULE_SETTINGS_DOC_URL\" \"$(pushwork url)\""
+    "register": "pw-modules add \"$MODULE_SETTINGS_DOC_URL\" \"$(pushwork url)\"",
+    "test": "vitest run",
+    "test:watch": "vitest"
   },
   "dependencies": {
     "@automerge/automerge": "^3.2.5",
@@ -28,11 +30,13 @@
   },
   "devDependencies": {
     "esbuild": "~0.25.0",
+    "happy-dom": "^15.11.7",
     "typescript": "~5.9.3",
     "vite": "^7.1.9",
     "vite-plugin-css-injected-by-js": "^3.5.2",
     "vite-plugin-solid": "^2.11.10",
-    "vite-plugin-top-level-await": "^1.6.0"
+    "vite-plugin-top-level-await": "^1.6.0",
+    "vitest": "^3.2.4"
   },
   "pnpm": {
     "overrides": {
diff --git a/sync-indicator/vitest.config.ts b/sync-indicator/vitest.config.ts
new file mode 100644
index 00000000..715c53e5
--- /dev/null
+++ b/sync-indicator/vitest.config.ts
@@ -0,0 +1,14 @@
+import {defineConfig} from "vitest/config"
+import solid from "vite-plugin-solid"
+
+export default defineConfig({
+  plugins: [solid()],
+  test: {
+    environment: "happy-dom",
+    globals: true,
+    passWithNoTests: true,
+  },
+  resolve: {
+    conditions: ["development", "browser"],
+  },
+})
diff --git a/tasks/package.json b/tasks/package.json
index b6fd5fda..4a4e4399 100644
--- a/tasks/package.json
+++ b/tasks/package.json
@@ -11,7 +11,9 @@
     "build": "vite build",
     "push": "pushwork sync",
     "watch": "nodemon --watch src -e js,tsx,ts,tsx,css,json --exec 'pnpm build && pnpm push'",
-    "register": "pw-modules add \"$MODULE_SETTINGS_DOC_URL\" \"$(pushwork url)\""
+    "register": "pw-modules add \"$MODULE_SETTINGS_DOC_URL\" \"$(pushwork url)\"",
+    "test": "vitest run",
+    "test:watch": "vitest"
   },
   "keywords": [],
   "author": "Ink & Switch",
@@ -34,11 +36,13 @@
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^4.7.0",
     "autoprefixer": "^10.5.0",
+    "happy-dom": "^15.11.7",
     "nodemon": "^3.1.14",
     "vite": "^5.4.21",
     "vite-plugin-css-injected-by-js": "^3.5.2",
     "vite-plugin-top-level-await": "^1.6.0",
-    "vite-plugin-wasm": "^3.6.0"
+    "vite-plugin-wasm": "^3.6.0",
+    "vitest": "^3.2.4"
   },
   "packageManager": "pnpm@10.28.2+sha512.41872f037ad22f7348e3b1debbaf7e867cfd448f2726d9cf74c08f19507c31d2c8e7a11525b983febc2df640b5438dee6023ebb1f84ed43cc2d654d2bc326264"
 }
diff --git a/tasks/vitest.config.ts b/tasks/vitest.config.ts
new file mode 100644
index 00000000..1dd6c6a6
--- /dev/null
+++ b/tasks/vitest.config.ts
@@ -0,0 +1,11 @@
+import {defineConfig} from "vitest/config"
+import react from "@vitejs/plugin-react"
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    environment: "happy-dom",
+    globals: true,
+    passWithNoTests: true,
+  },
+})
diff --git a/theming/package.json b/theming/package.json
index 15a1d455..08056fe9 100644
--- a/theming/package.json
+++ b/theming/package.json
@@ -26,7 +26,9 @@
     "build": "node esbuild/build.ts",
     "dev": "node esbuild/watch.ts",
     "pushwatch": "pnpm dev pushwork",
-    "register": "pw-modules add \"$MODULE_SETTINGS_DOC_URL\" \"$(pushwork url)\""
+    "register": "pw-modules add \"$MODULE_SETTINGS_DOC_URL\" \"$(pushwork url)\"",
+    "test": "vitest run",
+    "test:watch": "vitest"
   },
   "dependencies": {
     "@codemirror/language": "^6.11.3",
@@ -40,9 +42,13 @@
   "devDependencies": {
     "@babel/core": "^7.28.4",
     "@babel/parser": "^7.28.4",
-    "babel-preset-solid": "^1.9.9",
     "@node-types/node": "npm:@types/node@^24.9.1",
+    "babel-preset-solid": "^1.9.9",
     "esbuild": "^0.23.1",
-    "typescript": "~5.9.3"
+    "happy-dom": "^15.11.7",
+    "typescript": "~5.9.3",
+    "vite": "^7.1.9",
+    "vite-plugin-solid": "^2.11.10",
+    "vitest": "^3.2.4"
   }
 }
diff --git a/theming/vitest.config.ts b/theming/vitest.config.ts
new file mode 100644
index 00000000..715c53e5
--- /dev/null
+++ b/theming/vitest.config.ts
@@ -0,0 +1,14 @@
+import {defineConfig} from "vitest/config"
+import solid from "vite-plugin-solid"
+
+export default defineConfig({
+  plugins: [solid()],
+  test: {
+    environment: "happy-dom",
+    globals: true,
+    passWithNoTests: true,
+  },
+  resolve: {
+    conditions: ["development", "browser"],
+  },
+})
diff --git a/patchwork-frame/.gitignore b/threepane/.gitignore
similarity index 100%
rename from patchwork-frame/.gitignore
rename to threepane/.gitignore
diff --git a/patchwork-frame/eslint.config.ts b/threepane/eslint.config.ts
similarity index 100%
rename from patchwork-frame/eslint.config.ts
rename to threepane/eslint.config.ts
diff --git a/patchwork-frame/package.json b/threepane/package.json
similarity index 87%
rename from patchwork-frame/package.json
rename to threepane/package.json
index 58b8c532..c523355e 100644
--- a/patchwork-frame/package.json
+++ b/threepane/package.json
@@ -7,7 +7,9 @@
     "dev": "vite build --watch",
     "build": "vite build",
     "sync": "vite build && pushwork sync",
-    "register": "pw-modules add \"$MODULE_SETTINGS_DOC_URL\" \"$(pushwork url)\""
+    "register": "pw-modules add \"$MODULE_SETTINGS_DOC_URL\" \"$(pushwork url)\"",
+    "test": "vitest run",
+    "test:watch": "vitest"
   },
   "dependencies": {
     "@automerge/automerge": "3.3.0-fragments.1",
@@ -27,9 +29,11 @@
     "@typescript-eslint/parser": "^8.40.0",
     "eslint": "^9.34.0",
     "globals": "^16.4.0",
+    "happy-dom": "^15.11.7",
     "typescript-eslint": "^8.41.0",
     "vite": "^7.1.9",
     "vite-plugin-css-injected-by-js": "^3.5.2",
-    "vite-plugin-solid": "^2.11.10"
+    "vite-plugin-solid": "^2.11.10",
+    "vitest": "^3.2.4"
   }
 }
diff --git a/patchwork-frame/pnpm-lock.yaml b/threepane/pnpm-lock.yaml
similarity index 100%
rename from patchwork-frame/pnpm-lock.yaml
rename to threepane/pnpm-lock.yaml
diff --git a/patchwork-frame/src/PatchworkFrame.tsx b/threepane/src/PatchworkFrame.tsx
similarity index 63%
rename from patchwork-frame/src/PatchworkFrame.tsx
rename to threepane/src/PatchworkFrame.tsx
index c371b17f..83ae6604 100644
--- a/patchwork-frame/src/PatchworkFrame.tsx
+++ b/threepane/src/PatchworkFrame.tsx
@@ -1,9 +1,12 @@
 import "@inkandswitch/patchwork-elements";
-import { useDocHandle } from "@automerge/automerge-repo-solid-primitives";
+import {
+  useDocHandle,
+  useDocument,
+} from "@automerge/automerge-repo-solid-primitives";
 import type { AutomergeUrl, DocHandle, Repo } from "@automerge/automerge-repo";
 import { subscribe } from "@inkandswitch/patchwork-providers";
 import { subscribeDoc } from "@inkandswitch/patchwork-providers-solid";
-import type { AccountDoc } from "./types";
+import type { AccountDoc, ThreepaneConfigDoc, ToolRef } from "./types";
 import {
   useSidebarState,
   useSidebarResize,
@@ -13,7 +16,8 @@ import {
 } from "./hooks";
 import { Sidebar } from "./components/Sidebar";
 import { ContextSidebar } from "./components/ContextSidebar";
-import { DocumentToolbar } from "./components/DocumentToolbar";
+import { FrameTopBar } from "./components/FrameTopBar";
+import { SidebarWidgets } from "./components/SidebarWidgets";
 import { MainDocumentView } from "./components/MainDocumentView";
 import {
   createEffect,
@@ -26,7 +30,19 @@ import {
   type JSX,
 } from "solid-js";
 import { ensureAccountSubdocs } from "./account/ensureSubdocs";
-import "./styles.css";
+import { ensureThreepaneConfig } from "./account/ensureThreepaneConfig";
+// Imported as a string (not a side-effect import) so the stylesheet is only
+// injected when the frame tool actually activates — not when index.js loads.
+import frameStyles from "./styles.css?inline";
+
+function ensureFrameStyles() {
+  const id = "patchwork-frame-styles";
+  if (document.getElementById(id)) return;
+  const el = document.createElement("style");
+  el.id = id;
+  el.textContent = frameStyles;
+  document.head.append(el);
+}
 
 type DraftsState = {
   drafts: AutomergeUrl[];
@@ -55,6 +71,7 @@ export const PatchworkFrame = ({
   handle: DocHandle<AccountDoc>;
   repo: Repo;
 }) => {
+  ensureFrameStyles();
   const accountDocUrl = handle.url;
 
   const [accountProviderElement, setAccountProviderElement] =
@@ -116,9 +133,14 @@ function PatchworkFrameInner(props: {
   });
 
   // Lazily populate subdoc fields (rootFolderUrl, moduleSettingsUrl, contactUrl)
-  // on first mount. Each is created via createDocOfDatatype2 of its own
-  // datatype, so defaults and shape are owned by the datatype, not the frame.
-  void ensureAccountSubdocs(props.handle, props.repo);
+  // on first mount, then create the threepane layout config doc and migrate the
+  // legacy account arrays into it (non-destructive — old fields stay so older
+  // builds keep working). Ordered: the migration seeds the sidebar's default
+  // document-list widget against rootFolderUrl, so the subdocs must land first.
+  void (async () => {
+    await ensureAccountSubdocs(props.handle, props.repo);
+    await ensureThreepaneConfig(props.handle, props.repo);
+  })();
 
   const [docVersion, setDocVersion] = createSignal(0);
   createEffect(() => {
@@ -135,6 +157,39 @@ function PatchworkFrameInner(props: {
   });
   const accountDocUrl = props.handle.url;
 
+  // The threepane layout config doc (sidebar widgets / context tabs / doctitle
+  // tools). Read via handle + version counter (same reason as accountDoc: store
+  // proxying conflicts with Automerge splice).
+  const threepaneUrl = () => accountDoc()?.tools?.["threepane"];
+  const threepaneConfigHandle = useDocHandle<ThreepaneConfigDoc>(
+    () => threepaneUrl(),
+    { repo: props.repo }
+  );
+  const [threepaneVersion, setThreepaneVersion] = createSignal(0);
+  createEffect(() => {
+    const h = threepaneConfigHandle();
+    if (!h) return;
+    const onChange = () => setThreepaneVersion((v) => v + 1);
+    h.on("change", onChange);
+    onCleanup(() => h.off("change", onChange));
+  });
+  const threepaneConfig = createMemo(() => {
+    threepaneVersion();
+    return threepaneConfigHandle()?.doc();
+  });
+
+  // Derived layout lanes, read from the threepane config doc. The migration
+  // seeds it from the legacy account fields (dropping the intrinsic title +
+  // spacer); older builds read those fields directly, so branch-flipping stays
+  // safe without a fallback here.
+  const doctitleToolIds = () =>
+    threepaneConfig()?.doctitle?.tools?.map((ref) => ref[0]);
+  const contextTabIds = () =>
+    threepaneConfig()?.contextbar?.tabs?.map((ref) => ref[0]);
+  const sidebarWidgets = (): ToolRef[] =>
+    threepaneConfig()?.sidebar?.widgets ?? [];
+  const rootFolderUrl = () => accountDoc()?.rootFolderUrl;
+
   const sidebarState = useSidebarState();
   const sidebarResize = useSidebarResize({
     setLeftSidebarWidth: sidebarState.setLeftSidebarWidth,
@@ -210,6 +265,9 @@ function PatchworkFrameInner(props: {
             accountDocUrl={accountDocUrl}
             sidebarState={sidebarState}
             sidebarResize={sidebarResize}
+            sidebarWidgets={sidebarWidgets}
+            configHandle={threepaneConfigHandle}
+            rootFolderUrl={rootFolderUrl}
           >
             <div class="main-area">
               <MainDocumentView
@@ -239,13 +297,19 @@ function PatchworkFrameInner(props: {
                 accountDocUrl={accountDocUrl}
                 sidebarState={sidebarState}
                 sidebarResize={sidebarResize}
+                sidebarWidgets={sidebarWidgets}
+                configHandle={threepaneConfigHandle}
+                rootFolderUrl={rootFolderUrl}
               >
                 <DraftDocumentArea
                   host={host()}
+                  repo={props.repo}
                   accountDoc={accountDoc}
                   accountDocUrl={accountDocUrl}
                   selectedDocUrl={selectedDocUrl}
                   selectedToolId={selectedToolId}
+                  doctitleToolIds={doctitleToolIds}
+                  contextTabIds={contextTabIds}
                   sidebarState={sidebarState}
                   sidebarResize={sidebarResize}
                   selectedContextToolId={selectedContextToolId}
@@ -270,27 +334,81 @@ function FrameLayout(props: {
   accountDocUrl: AutomergeUrl;
   sidebarState: SidebarState;
   sidebarResize: SidebarResize;
+  sidebarWidgets: Accessor<ToolRef[]>;
+  configHandle: Accessor<DocHandle<ThreepaneConfigDoc> | undefined>;
+  rootFolderUrl: Accessor<AutomergeUrl | undefined>;
   children: JSX.Element;
 }) {
+  const isCollapsed = props.sidebarState.isSidebarCollapsed;
   return (
     <>
-      {props.accountDoc()?.accountSidebarToolId && (
-        <Sidebar
-          side="left"
-          isCollapsed={props.sidebarState.isSidebarCollapsed}
-          width={props.sidebarState.leftSidebarWidth}
-          toolId={props.accountDoc()!.accountSidebarToolId}
-          docUrl={props.accountDocUrl}
-          onMouseDown={props.sidebarResize.handleMouseDown}
-          onToggleClick={props.sidebarResize.handleToggleClick}
-        />
-      )}
+      {/*
+        The left toggle is pinned to the frame's top-left corner (absolute,
+        outside the collapsing sidebar) so it holds the same spot whether the
+        sidebar is open or closed. The title, in the top bar, slides up against
+        it as the sidebar closes rather than travelling the full sidebar width.
+      */}
+      <button
+        type="button"
+        class="frame__sidebar-toggle frame__left-toggle"
+        title={isCollapsed() ? "Show sidebar" : "Hide sidebar"}
+        aria-label={isCollapsed() ? "Show sidebar" : "Hide sidebar"}
+        aria-pressed={!isCollapsed()}
+        onClick={() =>
+          props.sidebarState.setIsSidebarCollapsed((v) => !v)
+        }
+      >
+        <PanelLeftIcon />
+      </button>
+
+      <Sidebar
+        side="left"
+        isCollapsed={isCollapsed}
+        width={props.sidebarState.leftSidebarWidth}
+        onMouseDown={props.sidebarResize.handleMouseDown}
+        onToggleClick={props.sidebarResize.handleToggleClick}
+      >
+        <div class="threepane-sidebar">
+          <SidebarWidgets
+            widgets={props.sidebarWidgets}
+            configHandle={props.configHandle}
+            rootFolderUrl={props.rootFolderUrl}
+          />
+          {/* account / packages / settings, pinned to the sidebar's bottom */}
+          <div class="threepane-sidebar__footer">
+            <patchwork-view
+              doc-url={props.accountDocUrl}
+              tool-id="chee/account-bar"
+            />
+          </div>
+        </div>
+      </Sidebar>
 
       {props.children}
     </>
   );
 }
 
+// lucide `panel-left`
+function PanelLeftIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="18"
+      height="18"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="1.75"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <rect width="18" height="18" x="3" y="3" rx="2" />
+      <path d="M9 3v18" />
+    </svg>
+  );
+}
+
 // Reads the draft list state from the draft-list provider, then renders the
 // main document inside a draft-overlay provider keyed on the selected draft.
 // The overlay provider is always mounted; it becomes a no-op when its `url`
@@ -308,10 +426,13 @@ function FrameLayout(props: {
 // identity-sensitive toolbar tools (e.g. add-to-sidebar) are unaffected.
 function DraftDocumentArea(props: {
   host: HTMLElement;
+  repo: Repo;
   accountDoc: Accessor<AccountDoc | undefined>;
   accountDocUrl: AutomergeUrl;
   selectedDocUrl: Accessor<AutomergeUrl | undefined>;
   selectedToolId: Accessor<string | undefined>;
+  doctitleToolIds: Accessor<string[] | undefined>;
+  contextTabIds: Accessor<string[] | undefined>;
   sidebarState: SidebarState;
   sidebarResize: SidebarResize;
   selectedContextToolId: Accessor<string | undefined>;
@@ -370,47 +491,44 @@ function DraftDocumentArea(props: {
               ref={setFocusProviderElement}
             >
               <Show when={areDocProvidersReady()}>
-                <div class="main-area">
-                  <DocumentToolbar
-                    toolIds={() => props.accountDoc()?.documentToolbarToolIds}
+                <div class="frame__main-column">
+                  <FrameTopBar
+                    repo={props.repo}
                     docUrl={props.selectedDocUrl}
-                    showLeftSidebarButton={() =>
-                      !!props.accountDoc()?.accountSidebarToolId &&
-                      props.sidebarState.isSidebarCollapsed()
-                    }
-                    onShowLeftSidebar={() =>
-                      props.sidebarState.setIsSidebarCollapsed(false)
-                    }
-                    showRightSidebarButton={() =>
-                      !!props.accountDoc()?.contextToolIds?.length &&
-                      props.sidebarState.isRightSidebarCollapsed()
-                    }
-                    onShowRightSidebar={() =>
-                      props.sidebarState.setIsRightSidebarCollapsed(false)
+                    toolIds={props.doctitleToolIds}
+                    isLeftCollapsed={props.sidebarState.isSidebarCollapsed}
+                    contextToolIds={props.contextTabIds}
+                    selectedContextToolId={props.selectedContextToolId}
+                    setSelectedContextToolId={props.setSelectedContextToolId}
+                    isRightCollapsed={props.sidebarState.isRightSidebarCollapsed}
+                    rightWidth={props.sidebarState.rightSidebarWidth}
+                    onToggleRight={() =>
+                      props.sidebarState.setIsRightSidebarCollapsed((v) => !v)
                     }
                   />
-                  <MainDocumentView
-                    viewKey={props.selectedDocUrl}
-                    selectedDocUrl={props.selectedDocUrl}
-                    toolId={props.selectedToolId}
-                  />
-                </div>
 
-                {!!props.accountDoc()?.contextToolIds?.length && (
-                  <ContextSidebar
-                    contextToolIds={() => props.accountDoc()?.contextToolIds}
-                    docUrl={props.accountDocUrl}
-                    selectedToolId={props.selectedContextToolId}
-                    setSelectedToolId={props.setSelectedContextToolId}
-                    isCollapsed={props.sidebarState.isRightSidebarCollapsed}
-                    width={props.sidebarState.rightSidebarWidth}
-                    onMouseDown={props.sidebarResize.handleMouseDown}
-                    onToggleClick={props.sidebarResize.handleToggleClick}
-                    onClose={() =>
-                      props.sidebarState.setIsRightSidebarCollapsed(true)
-                    }
-                  />
-                )}
+                  <div class="frame__content-row">
+                    <div class="main-area">
+                      <MainDocumentView
+                        viewKey={props.selectedDocUrl}
+                        selectedDocUrl={props.selectedDocUrl}
+                        toolId={props.selectedToolId}
+                      />
+                    </div>
+
+                    <Show when={!!props.contextTabIds()?.length}>
+                      <ContextSidebar
+                        contextToolIds={props.contextTabIds}
+                        docUrl={props.accountDocUrl}
+                        selectedToolId={props.selectedContextToolId}
+                        isCollapsed={props.sidebarState.isRightSidebarCollapsed}
+                        width={props.sidebarState.rightSidebarWidth}
+                        onMouseDown={props.sidebarResize.handleMouseDown}
+                        onToggleClick={props.sidebarResize.handleToggleClick}
+                      />
+                    </Show>
+                  </div>
+                </div>
               </Show>
             </patchwork-view>
           </patchwork-view>
diff --git a/threepane/src/account/cleanupLegacyAccountFields.ts b/threepane/src/account/cleanupLegacyAccountFields.ts
new file mode 100644
index 00000000..7861e3e9
--- /dev/null
+++ b/threepane/src/account/cleanupLegacyAccountFields.ts
@@ -0,0 +1,41 @@
+import type { DocHandle } from "@automerge/automerge-repo";
+import type { AccountDoc } from "../types";
+
+/**
+ * Opt-in, manual cleanup: removes the legacy account fields that have been
+ * migrated into the threepane config doc. NOT run automatically — only call this
+ * once the threepane migration has shipped everywhere and you no longer need to
+ * switch back to a build that reads these fields.
+ *
+ * Safe to run only after `account.tools.threepane` is set (i.e. migrated).
+ */
+export function cleanupLegacyAccountFields(
+  accountHandle: DocHandle<AccountDoc>
+): { removed: string[] } {
+  const account = accountHandle.doc();
+  if (!account?.tools?.["threepane"]) {
+    console.warn(
+      "cleanupLegacyAccountFields: not migrated yet (no tools.threepane); skipping"
+    );
+    return { removed: [] };
+  }
+
+  const legacyFields: (keyof AccountDoc)[] = [
+    "accountSidebarToolId",
+    "contextToolIds",
+    "documentToolbarToolIds",
+  ];
+
+  const removed: string[] = [];
+  accountHandle.change((doc) => {
+    for (const field of legacyFields) {
+      if (field in doc) {
+        delete (doc as Record<string, unknown>)[field];
+        removed.push(field);
+      }
+    }
+  });
+
+  console.info("cleanupLegacyAccountFields: removed", removed);
+  return { removed };
+}
diff --git a/patchwork-frame/src/account/ensureSubdocs.ts b/threepane/src/account/ensureSubdocs.ts
similarity index 97%
rename from patchwork-frame/src/account/ensureSubdocs.ts
rename to threepane/src/account/ensureSubdocs.ts
index 2ff831d2..fa4387fb 100644
--- a/patchwork-frame/src/account/ensureSubdocs.ts
+++ b/threepane/src/account/ensureSubdocs.ts
@@ -16,7 +16,7 @@ type SubdocField = "rootFolderUrl" | "moduleSettingsUrl" | "contactUrl";
  * by the time this runs, but subdoc datatypes (contact, etc.) can live in
  * separately-loaded plugin bundles, so we have to tolerate late registration.
  */
-async function loadDatatypeWhenReady<D>(
+export async function loadDatatypeWhenReady<D>(
   id: string
 ): Promise<LoadedDatatype<D> | undefined> {
   const registry = getRegistry<DatatypeDescription>("patchwork:datatype");
diff --git a/threepane/src/account/ensureThreepaneConfig.ts b/threepane/src/account/ensureThreepaneConfig.ts
new file mode 100644
index 00000000..b9edc8b0
--- /dev/null
+++ b/threepane/src/account/ensureThreepaneConfig.ts
@@ -0,0 +1,89 @@
+import type { AutomergeUrl, DocHandle, Repo } from "@automerge/automerge-repo";
+import { createDocOfDatatype2 } from "@inkandswitch/patchwork-plugins";
+import type { AccountDoc, ThreepaneConfigDoc, ToolRef } from "../types";
+import { loadDatatypeWhenReady } from "./ensureSubdocs";
+
+// Title + spacer are intrinsic to the frame's top bar, never configured tools.
+const INTRINSIC_DOCTITLE_TOOLS = new Set(["document-title", "spacer"]);
+
+// The sidebar's default widget: a document list pinned to the account's root
+// folder. Every account gets one so the left pane is never empty.
+const DOCUMENT_LIST_TOOL = "chee/document-list";
+
+/** The default sidebar widgets for a fresh (or empty) account. */
+function defaultSidebarWidgets(rootFolderUrl?: AutomergeUrl): ToolRef[] {
+  return rootFolderUrl ? [[DOCUMENT_LIST_TOOL, rootFolderUrl]] : [];
+}
+
+/**
+ * Lazily create the threepane layout config doc and point `account.tools.threepane`
+ * at it, migrating the legacy `account.*` arrays into its lanes.
+ *
+ * Seeds the sidebar with a default document-list widget (pinned to the account's
+ * root folder), so the left pane is never empty. Expects `rootFolderUrl` to be
+ * populated already — call after `ensureAccountSubdocs`.
+ *
+ * Non-destructive: the old `documentToolbarToolIds` / `contextToolIds` /
+ * `accountSidebarToolId` fields are left untouched so older builds keep working
+ * and you can switch branches freely during the PR. Run the (separate, opt-in)
+ * cleanupLegacyAccountFields script to remove them later.
+ */
+export async function ensureThreepaneConfig(
+  accountHandle: DocHandle<AccountDoc>,
+  repo: Repo
+) {
+  const rootFolderUrl = accountHandle.doc()?.rootFolderUrl;
+  const existingConfigUrl = accountHandle.doc()?.tools?.["threepane"];
+
+  // Already migrated. Backfill the default document-list widget for accounts
+  // migrated by an earlier build of this branch that seeded an empty sidebar.
+  if (existingConfigUrl) {
+    if (!rootFolderUrl) return;
+    const configHandle = await repo.find<ThreepaneConfigDoc>(existingConfigUrl);
+    if (configHandle.doc()?.sidebar?.widgets?.length) return;
+    configHandle.change((doc) => {
+      doc.sidebar.widgets = defaultSidebarWidgets(rootFolderUrl);
+    });
+    return;
+  }
+
+  const datatype = await loadDatatypeWhenReady<ThreepaneConfigDoc>(
+    "threepane:config"
+  );
+  if (!datatype) {
+    console.warn("frame: threepane:config datatype never registered");
+    return;
+  }
+
+  // Re-check after the await in case another tab migrated concurrently.
+  if (accountHandle.doc()?.tools?.["threepane"]) return;
+
+  const account = accountHandle.doc();
+  const accountDocUrl = accountHandle.url;
+
+  // doctitle + contextbar migrate with the account doc as a placeholder docid
+  // (the frame still feeds doctitle the selected doc / contextbar the account
+  // doc). The sidebar is seeded with the default document-list widget.
+  const doctitleTools: ToolRef[] = (account?.documentToolbarToolIds ?? [])
+    .filter((id) => !INTRINSIC_DOCTITLE_TOOLS.has(id))
+    .map((id) => [id, accountDocUrl]);
+  const contextTabs: ToolRef[] = (account?.contextToolIds ?? []).map((id) => [
+    id,
+    accountDocUrl,
+  ]);
+
+  const configHandle = await createDocOfDatatype2<ThreepaneConfigDoc>(
+    datatype,
+    repo
+  );
+  configHandle.change((doc) => {
+    doc.doctitle.tools = doctitleTools;
+    doc.contextbar.tabs = contextTabs;
+    doc.sidebar.widgets = defaultSidebarWidgets(account?.rootFolderUrl);
+  });
+
+  accountHandle.change((acc) => {
+    if (!acc.tools) acc.tools = {};
+    if (!acc.tools["threepane"]) acc.tools["threepane"] = configHandle.url;
+  });
+}
diff --git a/threepane/src/components/ContextSidebar.tsx b/threepane/src/components/ContextSidebar.tsx
new file mode 100644
index 00000000..2b87a8c8
--- /dev/null
+++ b/threepane/src/components/ContextSidebar.tsx
@@ -0,0 +1,58 @@
+import type { AutomergeUrl } from "@automerge/automerge-repo";
+import { Show } from "solid-js";
+import type { Accessor } from "solid-js";
+import { Sidebar } from "./Sidebar";
+import { Tray } from "./Tray";
+
+type ContextSidebarProps = {
+  contextToolIds: Accessor<string[] | undefined>;
+  docUrl: AutomergeUrl;
+  /**
+   * Selected tab, owned by the frame *above* the branch-switch boundary so it
+   * survives document and branch switches. The tab bar itself now lives in the
+   * top toolbar (see `ContextTabs`); here we only render the active tool.
+   */
+  selectedToolId: Accessor<string | undefined>;
+  isCollapsed: Accessor<boolean>;
+  width: Accessor<number>;
+  onMouseDown: (side: "left" | "right", e: MouseEvent) => void;
+  onToggleClick: (side: "left" | "right", e: MouseEvent) => void;
+};
+
+/**
+ * The document context sidebar body: renders the active context tool's content
+ * plus the bottom tray. The tab bar that selects the active tool lives in the
+ * top toolbar (`ContextTabs`).
+ */
+export function ContextSidebar(props: ContextSidebarProps) {
+  const toolIds = () => props.contextToolIds() ?? [];
+
+  // The selection may name a tool that isn't in the current list (or be unset);
+  // fall back to the first tab so there's always a valid active tool.
+  const activeToolId = () => {
+    const ids = toolIds();
+    const selected = props.selectedToolId();
+    return selected && ids.includes(selected) ? selected : ids[0];
+  };
+
+  return (
+    <Sidebar
+      side="right"
+      isCollapsed={props.isCollapsed}
+      width={props.width}
+      onMouseDown={props.onMouseDown}
+      onToggleClick={props.onToggleClick}
+    >
+      <div class="context-sidebar">
+        <div class="context-sidebar__content">
+          <Show when={activeToolId()} keyed>
+            {(toolId) => (
+              <patchwork-view doc-url={props.docUrl} tool-id={toolId} />
+            )}
+          </Show>
+        </div>
+        <Tray docUrl={props.docUrl} />
+      </div>
+    </Sidebar>
+  );
+}
diff --git a/threepane/src/components/ContextTabs.tsx b/threepane/src/components/ContextTabs.tsx
new file mode 100644
index 00000000..6dfdde74
--- /dev/null
+++ b/threepane/src/components/ContextTabs.tsx
@@ -0,0 +1,62 @@
+import {
+  getRegistry,
+  type ToolDescription,
+} from "@inkandswitch/patchwork-plugins";
+import { createSignal, onCleanup, onMount, For } from "solid-js";
+import type { Accessor } from "solid-js";
+
+type ContextTabsProps = {
+  contextToolIds: Accessor<string[] | undefined>;
+  selectedToolId: Accessor<string | undefined>;
+  setSelectedToolId: (id: string) => void;
+};
+
+/**
+ * The context sidebar's tab bar, lifted out of the sidebar and into the top
+ * toolbar (it sits above the right sidebar). Horizontally scrollable when the
+ * tabs overflow. Selection is owned by the frame so it survives branch switches.
+ */
+export function ContextTabs(props: ContextTabsProps) {
+  const toolRegistry = getRegistry<ToolDescription>("patchwork:tool");
+
+  // Tool descriptions can register/load late; bump a version so tab labels
+  // recompute when the registry changes.
+  const [registryVersion, setRegistryVersion] = createSignal(0);
+  onMount(() => {
+    const off = toolRegistry.on("changed", () => {
+      setRegistryVersion((v) => v + 1);
+    });
+    onCleanup(off);
+  });
+
+  const toolIds = () => props.contextToolIds() ?? [];
+
+  const activeToolId = () => {
+    const ids = toolIds();
+    const selected = props.selectedToolId();
+    return selected && ids.includes(selected) ? selected : ids[0];
+  };
+
+  const toolName = (id: string) => {
+    registryVersion();
+    return toolRegistry.get(id)?.name ?? id;
+  };
+
+  return (
+    <div role="tablist" class="context-sidebar__tablist">
+      <For each={toolIds()}>
+        {(id) => (
+          <button
+            type="button"
+            role="tab"
+            class="context-sidebar__tab"
+            data-active={activeToolId() === id ? "" : undefined}
+            onClick={() => props.setSelectedToolId(id)}
+          >
+            {toolName(id)}
+          </button>
+        )}
+      </For>
+    </div>
+  );
+}
diff --git a/threepane/src/components/DocumentTitle.tsx b/threepane/src/components/DocumentTitle.tsx
new file mode 100644
index 00000000..34153755
--- /dev/null
+++ b/threepane/src/components/DocumentTitle.tsx
@@ -0,0 +1,64 @@
+import type { AutomergeUrl, Repo } from "@automerge/automerge-repo";
+import { useDocument } from "@automerge/automerge-repo-solid-primitives";
+import {
+  getType,
+  type HasPatchworkMetadata,
+} from "@inkandswitch/patchwork-filesystem";
+import {
+  getRegistry,
+  isLoadedPlugin,
+  type Datatype,
+} from "@inkandswitch/patchwork-plugins";
+import {
+  createEffect,
+  createMemo,
+  createSignal,
+  onCleanup,
+  onMount,
+  type Accessor,
+} from "solid-js";
+
+/**
+ * The document title, rendered intrinsically by the frame (ported from the
+ * standalone `document-title` tool): resolves the doc's datatype and asks it for
+ * a title. Kept in the frame so the top bar owns its placement and sizing.
+ */
+export function DocumentTitle(props: {
+  docUrl: Accessor<AutomergeUrl | undefined>;
+  repo: Repo;
+}) {
+  const [doc] = useDocument<HasPatchworkMetadata>(() => props.docUrl(), {
+    repo: props.repo,
+  });
+  const registry = getRegistry<Datatype>("patchwork:datatype");
+
+  // Datatypes can register/load late; bump a version so the title recomputes.
+  const [registryVersion, setRegistryVersion] = createSignal(0);
+  onMount(() => {
+    const off = registry.on("changed", () => setRegistryVersion((v) => v + 1));
+    onCleanup(off);
+  });
+
+  const typeId = createMemo(() => {
+    const d = doc();
+    return d ? getType(d) : undefined;
+  });
+
+  // Ensure the datatype module is loaded so getTitle is callable.
+  createEffect(() => {
+    const id = typeId();
+    if (id) void registry.load(id);
+  });
+
+  const title = createMemo(() => {
+    registryVersion();
+    const d = doc();
+    const id = typeId();
+    if (!d || !id) return undefined;
+    const datatype = registry.get(id);
+    if (!datatype || !isLoadedPlugin(datatype)) return undefined;
+    return datatype.module.getTitle(d);
+  });
+
+  return <span class="threepane__title-text">{title() ?? "Untitled"}</span>;
+}
diff --git a/threepane/src/components/FrameTopBar.tsx b/threepane/src/components/FrameTopBar.tsx
new file mode 100644
index 00000000..c5c2b26b
--- /dev/null
+++ b/threepane/src/components/FrameTopBar.tsx
@@ -0,0 +1,118 @@
+import type { AutomergeUrl, Repo } from "@automerge/automerge-repo";
+import { For, Show, type Accessor } from "solid-js";
+import { ContextTabs } from "./ContextTabs";
+import { DocumentTitle } from "./DocumentTitle";
+
+type FrameTopBarProps = {
+  repo: Repo;
+  docUrl: Accessor<AutomergeUrl | undefined>;
+  toolIds: Accessor<string[] | undefined>;
+
+  isLeftCollapsed: Accessor<boolean>;
+
+  contextToolIds: Accessor<string[] | undefined>;
+  selectedContextToolId: Accessor<string | undefined>;
+  setSelectedContextToolId: (id: string) => void;
+  isRightCollapsed: Accessor<boolean>;
+  rightWidth: Accessor<number>;
+  onToggleRight: () => void;
+};
+
+/**
+ * The full-width top toolbar: the document title and tool views, and — above the
+ * right sidebar — the context tabs with a right sidebar toggle. Spans the main
+ * column; the left sidebar toggle is pinned separately to the frame's top-left
+ * corner. When the left sidebar is collapsed the bar reserves a matching slot at
+ * its start so the title slides up against (not under) that toggle.
+ */
+export function FrameTopBar(props: FrameTopBarProps) {
+  const hasRight = () => !!props.contextToolIds()?.length;
+  // Title + spacer are intrinsic to the bar and never in the config (the
+  // migration drops them), so the configured doctitle tools render as-is.
+  const docToolIds = () => props.toolIds() ?? [];
+
+  return (
+    <div
+      class="frame__topbar"
+      classList={{ "frame__topbar--left-collapsed": props.isLeftCollapsed() }}
+    >
+      {/* document title, rendered intrinsically: shrinks to the title length,
+          capped at half the bar. */}
+      <Show when={props.docUrl()}>
+        <div class="threepane__title">
+          <DocumentTitle docUrl={props.docUrl} repo={props.repo} />
+        </div>
+      </Show>
+
+      {/* built-in spacer */}
+      <div class="threepane__spacer" />
+
+      {/* configured doctitle tools, at the end on the right, scrollable */}
+      <Show when={props.docUrl() && docToolIds().length}>
+        <div class="threepane__doctitle-tools">
+          <For each={docToolIds()}>
+            {(id) => <patchwork-view doc-url={props.docUrl()!} tool-id={id} />}
+          </For>
+        </div>
+      </Show>
+
+      <Show when={hasRight()}>
+        <div
+          class="frame__topbar-right"
+          classList={{ "frame__topbar-right--collapsed": props.isRightCollapsed() }}
+          style={
+            props.isRightCollapsed()
+              ? undefined
+              : { width: `${props.rightWidth()}px` }
+          }
+        >
+          <Show when={!props.isRightCollapsed()}>
+            <ContextTabs
+              contextToolIds={props.contextToolIds}
+              selectedToolId={props.selectedContextToolId}
+              setSelectedToolId={props.setSelectedContextToolId}
+            />
+          </Show>
+          <button
+            type="button"
+            class="frame__sidebar-toggle"
+            title={
+              props.isRightCollapsed()
+                ? "Show context sidebar"
+                : "Hide context sidebar"
+            }
+            aria-label={
+              props.isRightCollapsed()
+                ? "Show context sidebar"
+                : "Hide context sidebar"
+            }
+            aria-pressed={!props.isRightCollapsed()}
+            onClick={() => props.onToggleRight()}
+          >
+            <PanelRightIcon />
+          </button>
+        </div>
+      </Show>
+    </div>
+  );
+}
+
+// lucide `panel-right`
+function PanelRightIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="18"
+      height="18"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="1.75"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <rect width="18" height="18" x="3" y="3" rx="2" />
+      <path d="M15 3v18" />
+    </svg>
+  );
+}
diff --git a/patchwork-frame/src/components/MainDocumentView.tsx b/threepane/src/components/MainDocumentView.tsx
similarity index 100%
rename from patchwork-frame/src/components/MainDocumentView.tsx
rename to threepane/src/components/MainDocumentView.tsx
diff --git a/patchwork-frame/src/components/Sidebar.tsx b/threepane/src/components/Sidebar.tsx
similarity index 100%
rename from patchwork-frame/src/components/Sidebar.tsx
rename to threepane/src/components/Sidebar.tsx
diff --git a/threepane/src/components/SidebarWidgets.tsx b/threepane/src/components/SidebarWidgets.tsx
new file mode 100644
index 00000000..10540e7f
--- /dev/null
+++ b/threepane/src/components/SidebarWidgets.tsx
@@ -0,0 +1,54 @@
+import type { AutomergeUrl, DocHandle } from "@automerge/automerge-repo";
+import { For, Show, type Accessor } from "solid-js";
+import type { ThreepaneConfigDoc, ToolRef } from "../types";
+
+const DOCUMENT_LIST_TOOL = "chee/document-list";
+
+/**
+ * The left pane: a stack of configured widgets (`[toolId, docId]`), each
+ * rendered against its pinned doc. Normally seeded with a document list on the
+ * account's root folder; the empty-state add button is a fallback for when no
+ * widgets are configured (there's no add/remove UI yet).
+ */
+export function SidebarWidgets(props: {
+  widgets: Accessor<ToolRef[]>;
+  configHandle: Accessor<DocHandle<ThreepaneConfigDoc> | undefined>;
+  rootFolderUrl: Accessor<AutomergeUrl | undefined>;
+}) {
+  const addDocumentList = () => {
+    const root = props.rootFolderUrl();
+    const handle = props.configHandle();
+    if (!root || !handle) return;
+    handle.change((doc) => {
+      doc.sidebar.widgets.push([DOCUMENT_LIST_TOOL, root]);
+    });
+  };
+
+  return (
+    <div class="threepane-widgets">
+      <Show
+        when={props.widgets().length}
+        fallback={
+          <div class="threepane-widgets__empty">
+            <button
+              type="button"
+              class="threepane-widgets__add"
+              disabled={!props.rootFolderUrl() || !props.configHandle()}
+              onClick={addDocumentList}
+            >
+              ＋ Add document list
+            </button>
+          </div>
+        }
+      >
+        <For each={props.widgets()}>
+          {(widget) => (
+            <div class="threepane-widget">
+              <patchwork-view doc-url={widget[1]} tool-id={widget[0]} />
+            </div>
+          )}
+        </For>
+      </Show>
+    </div>
+  );
+}
diff --git a/threepane/src/components/Tray.tsx b/threepane/src/components/Tray.tsx
new file mode 100644
index 00000000..13738185
--- /dev/null
+++ b/threepane/src/components/Tray.tsx
@@ -0,0 +1,38 @@
+import type { AutomergeUrl } from "@automerge/automerge-repo";
+import {
+  getRegistry,
+  type ToolDescription,
+} from "@inkandswitch/patchwork-plugins";
+import { createSignal, For, onCleanup, onMount, Show } from "solid-js";
+
+/**
+ * A horizontal row of every tool tagged `"tray"`, pinned to the bottom of the
+ * right context sidebar. Tray tools render against the account document.
+ */
+export function Tray(props: { docUrl: AutomergeUrl }) {
+  const toolRegistry = getRegistry<ToolDescription>("patchwork:tool");
+
+  // Tools can register/load late; recompute the tray when the registry changes.
+  const [registryVersion, setRegistryVersion] = createSignal(0);
+  onMount(() => {
+    const off = toolRegistry.on("changed", () => {
+      setRegistryVersion((v) => v + 1);
+    });
+    onCleanup(off);
+  });
+
+  const trayTools = () => {
+    registryVersion();
+    return toolRegistry.filter((t) => (t.tags ?? []).includes("tray"));
+  };
+
+  return (
+    <Show when={trayTools().length}>
+      <div class="frame-tray">
+        <For each={trayTools()}>
+          {(tool) => <patchwork-view doc-url={props.docUrl} tool-id={tool.id} />}
+        </For>
+      </div>
+    </Show>
+  );
+}
diff --git a/threepane/src/datatypes.ts b/threepane/src/datatypes.ts
new file mode 100644
index 00000000..c8773d6b
--- /dev/null
+++ b/threepane/src/datatypes.ts
@@ -0,0 +1,35 @@
+import type { DatatypeImplementation } from "@inkandswitch/patchwork-plugins";
+import type { AccountDoc, ThreepaneConfigDoc } from "./types";
+
+/**
+ * Default scalar configuration for a fresh account. Subdoc URLs are intentionally
+ * absent and are populated lazily by the frame on first mount.
+ */
+export const AccountDatatype: DatatypeImplementation<AccountDoc> = {
+  init(doc) {
+    doc.frameToolId = "threepane";
+    // The left pane is now a widget list (migrated into the threepane config
+    // doc); no default account sidebar tool. These seed the migration.
+    doc.contextToolIds = ["comments-view", "history-view", "context-view"];
+    // Title + spacer are rendered intrinsically by the frame's top bar; only the
+    // right-hand doctitle tools are configured here.
+    doc.documentToolbarToolIds = [
+      "add-doc-to-sidebar-button",
+      "doc-openwith",
+      "doc-presence",
+      "sync-indicator",
+    ];
+  },
+  getTitle: () => "Patchwork Account",
+};
+
+/** The threepane layout config doc (sidebar widgets, context tabs, doctitle tools). */
+export const ThreepaneConfigDatatype: DatatypeImplementation<ThreepaneConfigDoc> =
+  {
+    init(doc) {
+      doc.sidebar = { widgets: [] };
+      doc.contextbar = { tabs: [] };
+      doc.doctitle = { tools: [] };
+    },
+    getTitle: () => "Threepane Config",
+  };
diff --git a/patchwork-frame/src/hooks/index.ts b/threepane/src/hooks/index.ts
similarity index 100%
rename from patchwork-frame/src/hooks/index.ts
rename to threepane/src/hooks/index.ts
diff --git a/patchwork-frame/src/hooks/useDebugRegistryToast.tsx b/threepane/src/hooks/useDebugRegistryToast.tsx
similarity index 100%
rename from patchwork-frame/src/hooks/useDebugRegistryToast.tsx
rename to threepane/src/hooks/useDebugRegistryToast.tsx
diff --git a/patchwork-frame/src/hooks/useProviderReady.ts b/threepane/src/hooks/useProviderReady.ts
similarity index 100%
rename from patchwork-frame/src/hooks/useProviderReady.ts
rename to threepane/src/hooks/useProviderReady.ts
diff --git a/patchwork-frame/src/hooks/useSidebarResize.ts b/threepane/src/hooks/useSidebarResize.ts
similarity index 100%
rename from patchwork-frame/src/hooks/useSidebarResize.ts
rename to threepane/src/hooks/useSidebarResize.ts
diff --git a/patchwork-frame/src/hooks/useSidebarState.ts b/threepane/src/hooks/useSidebarState.ts
similarity index 100%
rename from patchwork-frame/src/hooks/useSidebarState.ts
rename to threepane/src/hooks/useSidebarState.ts
diff --git a/threepane/src/index.tsx b/threepane/src/index.tsx
new file mode 100644
index 00000000..612c191f
--- /dev/null
+++ b/threepane/src/index.tsx
@@ -0,0 +1,58 @@
+import { Plugin, ToolImplementation } from "@inkandswitch/patchwork-plugins";
+import { render } from "solid-js/web";
+import type { AccountDoc } from "./types";
+
+async function loadFrame(): Promise<ToolImplementation<AccountDoc>> {
+  const { PatchworkFrame } = await import("./PatchworkFrame");
+  return (handle, element) => {
+    return render(
+      () => <PatchworkFrame handle={handle} repo={element.repo} />,
+      element
+    );
+  };
+}
+
+export const plugins: Plugin<any>[] = [
+  {
+    type: "patchwork:datatype",
+    id: "account",
+    name: "Patchwork Account",
+    icon: "UserCircle",
+    unlisted: true,
+    async load() {
+      const { AccountDatatype } = await import("./datatypes");
+      return AccountDatatype;
+    },
+  },
+  {
+    type: "patchwork:datatype",
+    id: "threepane:config",
+    name: "Threepane Config",
+    icon: "Settings",
+    unlisted: true,
+    async load() {
+      const { ThreepaneConfigDatatype } = await import("./datatypes");
+      return ThreepaneConfigDatatype;
+    },
+  },
+  {
+    type: "patchwork:tool",
+    id: "threepane",
+    tags: ["frame-tool"],
+    name: "Threepane",
+    icon: "Window",
+    supportedDatatypes: ["account"],
+    load: loadFrame,
+  },
+  {
+    // Back-compat alias: accounts whose frameToolId still points at the old id
+    // keep resolving. Unlisted + untagged so it isn't offered as a new option.
+    type: "patchwork:tool",
+    id: "patchwork-frame",
+    name: "Patchwork Frame",
+    icon: "Window",
+    supportedDatatypes: ["account"],
+    unlisted: true,
+    load: loadFrame,
+  },
+];
diff --git a/patchwork-frame/src/styles.css b/threepane/src/styles.css
similarity index 69%
rename from patchwork-frame/src/styles.css
rename to threepane/src/styles.css
index 3e8d6fc8..7775728e 100644
--- a/patchwork-frame/src/styles.css
+++ b/threepane/src/styles.css
@@ -1,5 +1,3 @@
-/* Layout */
-
 :root,
 :host,
 [theme] {
@@ -16,16 +14,18 @@
   --patchwork-frame-space-sm: var(--studio-space-sm, 0.5rem);
   --patchwork-frame-space-2xl: var(--studio-space-2xl, 3rem);
 
-  /* Height the frame reserves for its own header chrome. */
-  --patchwork-frame-header-height: 3.5rem;
-  /* The sideboard reads --sideboard-top-margin for the space above its doclist.
-     Extend its default (top safe-area inset) by our header height so the sideboard
-     clears the frame header. Cascades into the sideboard's shadow DOM because the
-     sideboard only reads this var (with a fallback) rather than declaring it. */
-  --sideboard-top-margin: calc(
+  /* Height of the frame's top strip: the top bar over the main column, and the
+     matching empty space reserved above the left sidebar's widgets so the two
+     line up and the left toggle has a home. */
+  --patchwork-frame-header-height: calc(
     env(safe-area-inset-top, 0px) + var(--patchwork-frame-space-2xl)
   );
 
+  /* the left footer and right tray boxes share one height so they line up. */
+  --patchwork-frame-tray-height: var(--patchwork-frame-space-2xl);
+  /* sidebar toggles ride a touch paler than the line (first ink offset). */
+  --patchwork-frame-toggle-fg: var(--studio-line-offset-10, #333);
+
   --patchwork-frame-toolbar: var(--studio-chrome, white);
   /* toolbar text rides on the chrome surface, so it uses the chrome ink */
   --patchwork-frame-toolbar-fg: var(--studio-chrome-line, var(--studio-line, black));
@@ -112,29 +112,142 @@
   overflow: hidden;
 }
 
-.toolbar {
+/* The main column (right of the left sidebar): full-width top bar over a row of
+   [document | right sidebar]. */
+.frame__main-column {
+  flex: 1;
+  min-width: 0;
   display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.5rem;
-  padding-bottom: 0;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+}
+
+/* The full-width top toolbar. Its height + top safe-area inset match the
+   sideboard's reserved top margin so the bar reads as continuous across the top
+   (the left sidebar's empty top region lines up with it). */
+.frame__topbar {
+  display: flex;
+  align-items: stretch;
   box-sizing: border-box;
   min-height: var(--patchwork-frame-space-2xl);
+  padding-top: env(safe-area-inset-top, 0px);
+  padding-inline: var(--patchwork-frame-space-2xs);
+  gap: var(--patchwork-frame-space-2xs);
   background: var(--patchwork-frame-toolbar);
   color: var(--patchwork-frame-toolbar-fg);
+  /* Animate the collapsed left-slot in step with the sidebar's width transition
+     so the title glides up against the pinned toggle instead of jumping. */
+  transition: padding-left var(--studio-transition-slow, 0.25s ease);
 }
 
-.toolbar patchwork-view {
+/* When the left sidebar is collapsed the bar's left edge reaches the frame edge,
+   where the pinned left toggle lives; reserve a matching slot so the title slides
+   up against the toggle rather than under it. */
+.frame__topbar--left-collapsed {
+  padding-left: var(--patchwork-frame-space-2xl);
+}
+
+.frame__content-row {
+  flex: 1;
+  min-height: 0;
   display: flex;
-  height: 2rem;
   overflow: hidden;
+}
+
+/* The left sidebar toggle, pinned to the frame's top-left corner so it keeps the
+   same spot whether the sidebar is open or closed. Square, filling the top strip;
+   sits over the sidebar's reserved (empty) top area when open. */
+.frame__left-toggle {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 5;
+  width: var(--patchwork-frame-space-2xl);
+  height: var(--patchwork-frame-header-height);
+  padding-top: env(safe-area-inset-top, 0px);
+}
+
+/* A sidebar toggle at either end of the top bar (always present). */
+.frame__sidebar-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  padding-inline: var(--patchwork-frame-space-sm);
+  border: none;
+  background: transparent;
+  color: var(--patchwork-frame-toggle-fg);
+  cursor: pointer;
+  transition: color var(--studio-transition-fast, 0.1s ease);
+}
+
+.frame__sidebar-toggle:hover {
+  color: var(--patchwork-frame-fg);
+}
+
+/* The right end of the top bar: context tabs + the right toggle. Its width
+   tracks the right sidebar so the tabs sit directly above it. */
+.frame__topbar-right {
+  display: flex;
+  align-items: stretch;
+  min-width: 0;
+  flex-shrink: 0;
+}
+
+.frame__topbar-right--collapsed {
   width: auto;
 }
 
-.toolbar patchwork-view[tool-id="document-title"],
-.toolbar patchwork-view[tool-id="spacer"] {
+/* The document title, rendered intrinsically: shrinks to the title's width but
+   never past half the bar; ellipsis beyond. */
+.threepane__title {
+  display: flex;
+  align-items: center;
+  flex: 0 1 auto;
+  min-width: 0;
+  max-width: 50%;
+  overflow: hidden;
+  padding-inline: 0.5rem;
+}
+
+.threepane__title-text {
+  font-weight: 600;
+  white-space: nowrap;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* built-in spacer between the title and the right-hand tools */
+.threepane__spacer {
   flex: 1;
+  min-width: var(--patchwork-frame-space-sm);
+}
+
+/* configured doctitle tools at the right end; scroll horizontally when they
+   overflow rather than squashing. */
+.threepane__doctitle-tools {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
   min-width: 0;
+  padding-inline: 0.5rem;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: none;
+}
+
+.threepane__doctitle-tools::-webkit-scrollbar {
+  display: none;
+}
+
+.threepane__doctitle-tools patchwork-view {
+  display: flex;
+  align-items: center;
+  height: 2rem;
+  flex-shrink: 0;
+  width: auto;
 }
 
 .document-view {
@@ -293,6 +406,109 @@
   height: 100%;
 }
 
+/* Context tabs hosted in the top bar (rather than a sidebar header): center them
+   vertically and drop the panel-border connection tweaks. */
+.frame__topbar-right .context-sidebar__tablist {
+  padding-bottom: 0;
+  margin-bottom: 0;
+}
+
+.frame__topbar-right .context-sidebar__tab[data-active] {
+  margin-bottom: 0;
+}
+
+/* Left sidebar body: a stack of widgets with the account footer pinned below. */
+.threepane-sidebar {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+}
+
+/* account / packages / settings footer, pinned to the sidebar bottom */
+.threepane-sidebar__footer {
+  flex: none;
+}
+
+.threepane-sidebar__footer patchwork-view {
+  display: block;
+  width: 100%;
+  height: auto;
+}
+
+/* Left sidebar: a stack of configured widgets. The widgets start below the
+   frame's top strip (the empty space matching the top bar), so the frame owns
+   that spacing rather than each widget reserving its own top margin. */
+.threepane-widgets {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-height: 0;
+  padding-top: var(--patchwork-frame-header-height);
+}
+
+.threepane-widget {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.threepane-widget patchwork-view {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+/* empty state: offer to add the document list */
+.threepane-widgets__empty {
+  flex: 1;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+}
+
+.threepane-widgets__add {
+  padding: var(--patchwork-frame-space-xs) var(--patchwork-frame-space-sm);
+  border: 1px dashed var(--patchwork-frame-sidebar-divider);
+  border-radius: var(--studio-radius-sm, 4px);
+  background: transparent;
+  color: var(--patchwork-frame-muted);
+  font: inherit;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.threepane-widgets__add:hover:not(:disabled) {
+  color: var(--patchwork-frame-fg);
+  border-color: var(--patchwork-frame-fg);
+}
+
+.threepane-widgets__add:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+/* Right sidebar tray: a row of tray-tagged tools pinned to the bottom. */
+.frame-tray {
+  display: flex;
+  align-items: center;
+  gap: var(--patchwork-frame-space-2xs);
+  box-sizing: border-box;
+  min-height: var(--patchwork-frame-tray-height);
+  padding-inline: var(--patchwork-frame-space-sm);
+  border-top: 1px solid var(--context-sidebar-border);
+  background: var(--context-sidebar-content-bg);
+}
+
+.frame-tray patchwork-view {
+  display: flex;
+  width: auto;
+  height: auto;
+}
+
 /* Debug Registry Toast */
 .debug-registry-toast {
   position: fixed;
@@ -500,28 +716,3 @@
 body[data-sidebar-resizing] .sidebar {
   transition: none;
 }
-
-/* "Bring back" buttons shown in the document toolbar when a sidebar is
-   collapsed: a quiet icon button that brightens toward the chrome ink. */
-.toolbar__sidebar-toggle {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex: none;
-  width: 2rem;
-  height: 2rem;
-  padding: 0;
-  border: 0;
-  border-radius: var(--studio-radius-sm, 4px);
-  background: transparent;
-  /* icon matches the chrome ink, same as the toolbar text (no dimming) */
-  color: var(--patchwork-frame-toolbar-fg);
-  cursor: pointer;
-  transition: background var(--studio-transition-fast, 0.1s ease);
-}
-.toolbar__sidebar-toggle:hover {
-  background: var(--studio-chrome-offset-10, #e5e5e5);
-}
-.toolbar__sidebar-toggle--right {
-  margin-left: auto;
-}
diff --git a/threepane/src/types.ts b/threepane/src/types.ts
new file mode 100644
index 00000000..bf6e8a41
--- /dev/null
+++ b/threepane/src/types.ts
@@ -0,0 +1,49 @@
+import { AutomergeUrl } from "@automerge/automerge-repo";
+
+/**
+ * The account document for a Patchwork frame.
+ *
+ * Scalar configuration (frame/sidebar/toolbar tool ids) is populated eagerly
+ * by AccountDatatype.init. Subdocument URLs (rootFolderUrl, moduleSettingsUrl,
+ * contactUrl) are optional and are lazily populated by the frame on first
+ * mount via createDocOfDatatype2 of their respective datatypes.
+ */
+export type AccountDoc = {
+  frameToolId: string;
+  /** @deprecated no longer defaulted; the left pane is now sidebar.widgets */
+  accountSidebarToolId?: string;
+  /** @deprecated seeds migration into the threepane config doc's contextbar.tabs */
+  contextToolIds?: string[];
+  /** @deprecated seeds migration into the threepane config doc's doctitle.tools */
+  documentToolbarToolIds?: string[];
+
+  rootFolderUrl?: AutomergeUrl;
+  moduleSettingsUrl?: AutomergeUrl;
+  contactUrl?: AutomergeUrl;
+
+  /**
+   * Per-tool config doc urls, keyed by tool id. `tools["threepane"]` points at
+   * a ThreepaneConfigDoc holding the sidebar/contextbar/doctitle layout.
+   */
+  tools?: Record<string, AutomergeUrl>;
+};
+
+/** @deprecated use AccountDoc */
+export type TinyPatchworkConfigDoc = AccountDoc;
+
+/**
+ * A configured tool slot: which tool, and which document it renders against.
+ * For doctitle/contextbar the docid is currently a placeholder (the frame feeds
+ * the selected/account doc); for sidebar widgets it's a real pin (e.g. a folder).
+ */
+export type ToolRef = [toolId: string, docId: AutomergeUrl];
+
+/**
+ * The threepane layout config (its own document, referenced from
+ * `AccountDoc.tools["threepane"]`).
+ */
+export type ThreepaneConfigDoc = {
+  sidebar: { widgets: ToolRef[] };
+  contextbar: { tabs: ToolRef[] };
+  doctitle: { tools: ToolRef[] };
+};
diff --git a/patchwork-frame/tsconfig.json b/threepane/tsconfig.json
similarity index 100%
rename from patchwork-frame/tsconfig.json
rename to threepane/tsconfig.json
diff --git a/patchwork-frame/vite.config.ts b/threepane/vite.config.ts
similarity index 100%
rename from patchwork-frame/vite.config.ts
rename to threepane/vite.config.ts
diff --git a/threepane/vitest.config.ts b/threepane/vitest.config.ts
new file mode 100644
index 00000000..715c53e5
--- /dev/null
+++ b/threepane/vitest.config.ts
@@ -0,0 +1,14 @@
+import {defineConfig} from "vitest/config"
+import solid from "vite-plugin-solid"
+
+export default defineConfig({
+  plugins: [solid()],
+  test: {
+    environment: "happy-dom",
+    globals: true,
+    passWithNoTests: true,
+  },
+  resolve: {
+    conditions: ["development", "browser"],
+  },
+})
diff --git a/tldraw4/package.json b/tldraw4/package.json
index cf06e31b..632cb184 100644
--- a/tldraw4/package.json
+++ b/tldraw4/package.json
@@ -24,7 +24,9 @@
     "dev": "node esbuild/watch.ts",
     "pushwatch": "pnpm dev pushwork",
     "sync": "pnpm build && pushwork sync",
-    "register": "pw-modules add \"$MODULE_SETTINGS_DOC_URL\" \"$(pushwork url)\""
+    "register": "pw-modules add \"$MODULE_SETTINGS_DOC_URL\" \"$(pushwork url)\"",
+    "test": "vitest run",
+    "test:watch": "vitest"
   },
   "dependencies": {
     "@automerge/automerge-repo-react-hooks": "^2.6.0-subduction.9",
@@ -56,7 +58,10 @@
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.22",
     "globals": "^16.4.0",
+    "happy-dom": "^15.11.7",
     "typescript": "~5.9.3",
-    "typescript-eslint": "^8.45.0"
+    "typescript-eslint": "^8.45.0",
+    "vite": "^7.1.9",
+    "vitest": "^3.2.4"
   }
 }
diff --git a/tldraw4/vitest.config.ts b/tldraw4/vitest.config.ts
new file mode 100644
index 00000000..1dd6c6a6
--- /dev/null
+++ b/tldraw4/vitest.config.ts
@@ -0,0 +1,11 @@
+import {defineConfig} from "vitest/config"
+import react from "@vitejs/plugin-react"
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    environment: "happy-dom",
+    globals: true,
+    passWithNoTests: true,
+  },
+})