diff --git a/bun.lock b/bun.lock
index d7b4bfc89..b899f4e4f 100644
--- a/bun.lock
+++ b/bun.lock
@@ -21,23 +21,12 @@
       "name": "@inkeep/open-knowledge-docs",
       "version": "0.0.8",
       "dependencies": {
-        "@codemirror/commands": "^6.10.3",
-        "@codemirror/lang-markdown": "^6.5.0",
-        "@codemirror/language": "^6.12.3",
-        "@codemirror/state": "^6.6.0",
-        "@codemirror/view": "^6.41.0",
-        "@floating-ui/dom": "^1.7.6",
         "@hookform/resolvers": "^5.4.0",
         "@inkeep/cxkit-react": "^0.5.117",
         "@inkeep/open-knowledge-core": "workspace:*",
         "@radix-ui/react-popover": "^1.1.17",
-        "@tiptap/core": "^3.22.3",
-        "@tiptap/extension-drag-handle": "3.22.3",
-        "@tiptap/extensions": "^3.22.3",
-        "@tiptap/pm": "^3.22.3",
-        "@tiptap/react": "^3.22.3",
-        "@tiptap/suggestion": "^3.22.3",
         "@types/mdx": "^2.0.13",
+        "@vercel/microfrontends": "^2.3.6",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "fumadocs-core": "~16.1.0",
@@ -1138,7 +1127,7 @@
 
     "@napi-rs/wasm-tools-win32-x64-msvc": ["@napi-rs/wasm-tools-win32-x64-msvc@1.0.1", "", { "os": "win32", "cpu": "x64" }, "sha512-rEAf05nol3e3eei2sRButmgXP+6ATgm0/38MKhz9Isne82T4rPIMYsCIFj0kOisaGeVwoi2fnm7O9oWp5YVnYQ=="],
 
-    "@next/env": ["@next/env@16.2.3", "", {}, "sha512-ZWXyj4uNu4GCWQw9cjRxWlbD+33mcDszIo9iQxFnBX3Wmgq9ulaSJcl6VhuWx5pCWqqD+9W6Wfz7N0lM5lYPMA=="],
+    "@next/env": ["@next/env@16.0.10", "", {}, "sha512-8tuaQkyDVgeONQ1MeT9Mkk8pQmZapMKFh5B+OrFUlG3rVmYTXcXlBetBgTurKXGaIZvkoqRT9JL5K3phXcgang=="],
 
     "@next/swc-darwin-arm64": ["@next/swc-darwin-arm64@16.2.3", "", { "os": "darwin", "cpu": "arm64" }, "sha512-u37KDKTKQ+OQLvY+z7SNXixwo4Q2/IAJFDzU1fYe66IbCE51aDSAzkNDkWmLN0yjTUh4BKBd+hb69jYn6qqqSg=="],
 
@@ -1902,6 +1891,8 @@
 
     "@types/markdown-it": ["@types/markdown-it@14.1.2", "", { "dependencies": { "@types/linkify-it": "^5", "@types/mdurl": "^2" } }, "sha512-promo4eFwuiW+TfGxhi+0x3czqTYJkG8qB17ZUJiVF10Xm7NLVRSLUsfRTU/6h1e24VvRnXCx+hG7li58lkzog=="],
 
+    "@types/md5": ["@types/md5@2.3.6", "", {}, "sha512-WD69gNXtRBnpknfZcb4TRQ0XJQbUPZcai/Qdhmka3sxUR3Et8NrXoeAoknG/LghYHTf4ve795rInVYHBTQdNVA=="],
+
     "@types/mdast": ["@types/mdast@4.0.4", "", { "dependencies": { "@types/unist": "*" } }, "sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA=="],
 
     "@types/mdurl": ["@types/mdurl@2.0.0", "", {}, "sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg=="],
@@ -1968,6 +1959,8 @@
 
     "@upsetjs/venn.js": ["@upsetjs/venn.js@2.0.0", "", { "optionalDependencies": { "d3-selection": "^3.0.0", "d3-transition": "^3.0.1" } }, "sha512-WbBhLrooyePuQ1VZxrJjtLvTc4NVfpOyKx0sKqioq9bX1C1m7Jgykkn8gLrtwumBioXIqam8DLxp88Adbue6Hw=="],
 
+    "@vercel/microfrontends": ["@vercel/microfrontends@2.3.6", "", { "dependencies": { "@next/env": "16.0.10", "@types/md5": "^2.3.5", "ajv": "^8.17.1", "commander": "^12.1.0", "cookie": "1.0.2", "fast-glob": "^3.3.2", "http-proxy": "^1.18.1", "jsonc-parser": "^3.3.1", "md5": "^2.3.0", "nanoid": "^3.3.9", "path-to-regexp": "6.3.0", "semver": "^7.7.2" }, "peerDependencies": { "@sveltejs/kit": ">=1", "@vercel/analytics": ">=1.5.0", "@vercel/speed-insights": ">=1.2.0", "next": ">=13", "react": ">=17.0.0", "react-dom": ">=17.0.0", "vite": ">=5" }, "optionalPeers": ["@sveltejs/kit", "@vercel/analytics", "@vercel/speed-insights", "next", "react", "react-dom", "vite"], "bin": { "microfrontends": "cli/index.cjs" } }, "sha512-iMgZp5wmNWMeFO8Sg4BlzshjsjbiXfnIOOGwcFWWb+90nrySy6YV0fgXxj2ZubDGFa6BwWD/Mh/fKKXr4I+iuQ=="],
+
     "@vimeo/player": ["@vimeo/player@2.30.4", "", { "dependencies": { "native-promise-only": "0.8.1", "weakmap-polyfill": "2.0.4" } }, "sha512-M8m1UAhJSb+KCWuXDLWHViwj+3YY/0ogwFquRfMHs9e9LYjXT9iB7n+sOCKwUusbiXuU2HKmXx+FEGHtYZfUSg=="],
 
     "@vitejs/plugin-react": ["@vitejs/plugin-react@6.0.1", "", { "dependencies": { "@rolldown/pluginutils": "1.0.0-rc.7" }, "peerDependencies": { "@rolldown/plugin-babel": "^0.1.7 || ^0.2.0", "babel-plugin-react-compiler": "^1.0.0", "vite": "^8.0.0" }, "optionalPeers": ["@rolldown/plugin-babel", "babel-plugin-react-compiler"] }, "sha512-l9X/E3cDb+xY3SWzlG1MOGt2usfEHGMNIaegaUGFsLkb3RCn/k8/TOXBcab+OndDI4TBtktT8/9BwwW8Vi9KUQ=="],
@@ -2212,6 +2205,8 @@
 
     "chardet": ["chardet@2.1.1", "", {}, "sha512-PsezH1rqdV9VvyNhxxOW32/d75r01NY7TQCmOqomRo15ZSOKbpTFVsfjghxo6JloQUCGnH4k1LGu0R4yCLlWQQ=="],
 
+    "charenc": ["charenc@0.0.2", "", {}, "sha512-yrLQ/yVUFXkzg7EDQsPieE/53+0RlaWTs+wBrvW36cyilJ2SaDWfl4Yj7MtLTXleV9uEKefbAGUPv2/iWSooRA=="],
+
     "chevrotain": ["chevrotain@12.0.0", "", { "dependencies": { "@chevrotain/cst-dts-gen": "12.0.0", "@chevrotain/gast": "12.0.0", "@chevrotain/regexp-to-ast": "12.0.0", "@chevrotain/types": "12.0.0", "@chevrotain/utils": "12.0.0" } }, "sha512-csJvb+6kEiQaqo1woTdSAuOWdN0WTLIydkKrBnS+V5gZz0oqBrp4kQ35519QgK6TpBThiG3V1vNSHlIkv4AglQ=="],
 
     "chevrotain-allstar": ["chevrotain-allstar@0.4.1", "", { "dependencies": { "lodash-es": "^4.17.21" }, "peerDependencies": { "chevrotain": "^12.0.0" } }, "sha512-PvVJm3oGqrveUVW2Vt/eZGeiAIsJszYweUcYwcskg9e+IubNYKKD+rHHem7A6XVO22eDAL+inxNIGAzZ/VIWlA=="],
@@ -2298,7 +2293,7 @@
 
     "convert-source-map": ["convert-source-map@2.0.0", "", {}, "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg=="],
 
-    "cookie": ["cookie@0.7.2", "", {}, "sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w=="],
+    "cookie": ["cookie@1.0.2", "", {}, "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA=="],
 
     "cookie-signature": ["cookie-signature@1.2.2", "", {}, "sha512-D76uU73ulSXrD1UXF4KE2TMxVVwhsnCgfAyTg9k8P6KGZjlXKrOLe4dJQKI3Bxi5wjesZoFXJWElNWBjPZMbhg=="],
 
@@ -2322,6 +2317,8 @@
 
     "crossws": ["crossws@0.4.4", "", { "peerDependencies": { "srvx": ">=0.7.1" }, "optionalPeers": ["srvx"] }, "sha512-w6c4OdpRNnudVmcgr7brb/+/HmYjMQvYToO/oTrprTwxRUiom3LYWU1PMWuD006okbUWpII1Ea9/+kwpUfmyRg=="],
 
+    "crypt": ["crypt@0.0.2", "", {}, "sha512-mCxBlsHFYh9C+HVpiEacem8FEBnMXgU9gy4zmNC+SXAZNB/1idgp/aulFJ4FgCi7GPEVbfyng092GqL2k2rmow=="],
+
     "css-tree": ["css-tree@3.2.1", "", { "dependencies": { "mdn-data": "2.27.1", "source-map-js": "^1.2.1" } }, "sha512-X7sjQzceUhu1u7Y/ylrRZFU2FS6LRiFVp6rKLPg23y3x3c3DOKAwuXGDp+PAGjh6CSnCjYeAul8pcT8bAl+lSA=="],
 
     "css.escape": ["css.escape@1.5.1", "", {}, "sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg=="],
@@ -2704,6 +2701,8 @@
 
     "float-tooltip": ["float-tooltip@1.7.5", "", { "dependencies": { "d3-selection": "2 - 3", "kapsule": "^1.16", "preact": "10" } }, "sha512-/kXzuDnnBqyyWyhDMH7+PfP8J/oXiAavGzcRxASOMRHFuReDtofizLLJsf7nnDLAfEaMW4pVWaXrAjtnglpEkg=="],
 
+    "follow-redirects": ["follow-redirects@1.16.0", "", { "peerDependencies": { "debug": "*" }, "optionalPeers": ["debug"] }, "sha512-y5rN/uOsadFT/JfYwhxRS5R7Qce+g3zG97+JrtFZlC9klX/W5hD7iiLzScI4nZqUS7DNUdhPgw4xI8W2LuXlUw=="],
+
     "for-each": ["for-each@0.3.5", "", { "dependencies": { "is-callable": "^1.2.7" } }, "sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg=="],
 
     "force-graph": ["force-graph@1.51.2", "", { "dependencies": { "@tweenjs/tween.js": "18 - 25", "accessor-fn": "1", "bezier-js": "3 - 6", "canvas-color-tracker": "^1.3", "d3-array": "1 - 3", "d3-drag": "2 - 3", "d3-force-3d": "2 - 3", "d3-scale": "1 - 4", "d3-scale-chromatic": "1 - 3", "d3-selection": "2 - 3", "d3-zoom": "2 - 3", "float-tooltip": "^1.7", "index-array-by": "1", "kapsule": "^1.16", "lodash-es": "4" } }, "sha512-zZNdMqx8qIQGurgnbgYIUsdXxSfvhfRSIdncsKGv/twUOZpwCsk9hPHmdjdcme1+epATgb41G0rkIGHJ0Wydng=="],
@@ -2880,6 +2879,8 @@
 
     "http-errors": ["http-errors@2.0.1", "", { "dependencies": { "depd": "~2.0.0", "inherits": "~2.0.4", "setprototypeof": "~1.2.0", "statuses": "~2.0.2", "toidentifier": "~1.0.1" } }, "sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ=="],
 
+    "http-proxy": ["http-proxy@1.18.1", "", { "dependencies": { "eventemitter3": "^4.0.0", "follow-redirects": "^1.0.0", "requires-port": "^1.0.0" } }, "sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ=="],
+
     "http-proxy-agent": ["http-proxy-agent@7.0.2", "", { "dependencies": { "agent-base": "^7.1.0", "debug": "^4.3.4" } }, "sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig=="],
 
     "http2-wrapper": ["http2-wrapper@1.0.3", "", { "dependencies": { "quick-lru": "^5.1.1", "resolve-alpn": "^1.0.0" } }, "sha512-V+23sDMr12Wnz7iTcDeJr3O6AIxlnvT/bmaAAAP/Xda35C90p9599p0F1eHR/N1KILWSoWVAiOMFjBBXaXSMxg=="],
@@ -2948,6 +2949,8 @@
 
     "is-boolean-object": ["is-boolean-object@1.2.2", "", { "dependencies": { "call-bound": "^1.0.3", "has-tostringtag": "^1.0.2" } }, "sha512-wa56o2/ElJMYqjCjGkXri7it5FbebW5usLw/nPmCMs5DeZ7eziSYZhSmPRn0txqeW4LnAmQQU7FgqLpsEFKM4A=="],
 
+    "is-buffer": ["is-buffer@1.1.6", "", {}, "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w=="],
+
     "is-callable": ["is-callable@1.2.7", "", {}, "sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA=="],
 
     "is-core-module": ["is-core-module@2.16.1", "", { "dependencies": { "hasown": "^2.0.2" } }, "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w=="],
@@ -3190,6 +3193,8 @@
 
     "math-intrinsics": ["math-intrinsics@1.1.0", "", {}, "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g=="],
 
+    "md5": ["md5@2.3.0", "", { "dependencies": { "charenc": "0.0.2", "crypt": "0.0.2", "is-buffer": "~1.1.6" } }, "sha512-T1GITYmFaKuO91vxyoQMFETst+O71VUPEU3ze5GNzDm0OWdP8v1ziTaAEPUr/3kLsY3Sftgz242A1SetQiDL7g=="],
+
     "mdast-util-find-and-replace": ["mdast-util-find-and-replace@3.0.2", "", { "dependencies": { "@types/mdast": "^4.0.0", "escape-string-regexp": "^5.0.0", "unist-util-is": "^6.0.0", "unist-util-visit-parents": "^6.0.0" } }, "sha512-Tmd1Vg/m3Xz43afeNxDIhWRtFZgM2VLyaf4vSTYwudTyeuTneoL3qtWMA5jeLyz/O1vDJmmV4QuScFCA2tBPwg=="],
 
     "mdast-util-from-markdown": ["mdast-util-from-markdown@2.0.3", "", { "dependencies": { "@types/mdast": "^4.0.0", "@types/unist": "^3.0.0", "decode-named-character-reference": "^1.0.0", "devlop": "^1.0.0", "mdast-util-to-string": "^4.0.0", "micromark": "^4.0.0", "micromark-util-decode-numeric-character-reference": "^2.0.0", "micromark-util-decode-string": "^2.0.0", "micromark-util-normalize-identifier": "^2.0.0", "micromark-util-symbol": "^2.0.0", "micromark-util-types": "^2.0.0", "unist-util-stringify-position": "^4.0.0" } }, "sha512-W4mAWTvSlKvf8L6J+VN9yLSqQ9AOAAvHuoDAmPkz4dHf553m5gVj2ejadHJhoJmcmxEnOv6Pa8XJhpxE93kb8Q=="],
@@ -3532,7 +3537,7 @@
 
     "path-scurry": ["path-scurry@1.11.1", "", { "dependencies": { "lru-cache": "^10.2.0", "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0" } }, "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA=="],
 
-    "path-to-regexp": ["path-to-regexp@8.4.2", "", {}, "sha512-qRcuIdP69NPm4qbACK+aDogI5CBDMi1jKe0ry5rSQJz8JVLsC7jV8XpiJjGRLLol3N+R5ihGYcrPLTno6pAdBA=="],
+    "path-to-regexp": ["path-to-regexp@6.3.0", "", {}, "sha512-Yhpw4T9C6hPpgPeA28us07OJeqZ5EzQTkbfwuhsUg0c237RomFoETJgmp2sa3F/41gfLE6G5cqcYwznmeEeOlQ=="],
 
     "path-type": ["path-type@4.0.0", "", {}, "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw=="],
 
@@ -3812,6 +3817,8 @@
 
     "require-in-the-middle": ["require-in-the-middle@7.5.2", "", { "dependencies": { "debug": "^4.3.5", "module-details-from-path": "^1.0.3", "resolve": "^1.22.8" } }, "sha512-gAZ+kLqBdHarXB64XpAe2VCjB7rIRv+mU8tfRWziHRJ5umKsIHN2tLLv6EtMw7WCdP19S0ERVMldNvxYCHnhSQ=="],
 
+    "requires-port": ["requires-port@1.0.0", "", {}, "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ=="],
+
     "resedit": ["resedit@1.7.2", "", { "dependencies": { "pe-library": "^0.4.1" } }, "sha512-vHjcY2MlAITJhC0eRD/Vv8Vlgmu9Sd3LX9zZvtGzU5ZImdTN3+d6e/4mnTyV8vEbyf1sgNIrWxhWlrys52OkEA=="],
 
     "resend": ["resend@6.16.0", "", { "dependencies": { "postal-mime": "2.7.4", "standardwebhooks": "1.0.0" }, "peerDependencies": { "@react-email/render": "*" }, "optionalPeers": ["@react-email/render"] }, "sha512-SaKISwHtxvAxneF84Njgnzg+zdngUu1vOT/paRU1De9QF+zXQR3GnwJHSh+mpJPjUhsGD4WxYi5CfKkXMkDqwg=="],
@@ -4598,6 +4605,8 @@
 
     "@types/yauzl/@types/node": ["@types/node@24.12.2", "", { "dependencies": { "undici-types": "~7.16.0" } }, "sha512-A1sre26ke7HDIuY/M23nd9gfB+nrmhtYyMINbjI1zHJxYteKR6qSMX56FsmjMcDb3SMcjJg5BiRRgOCC/yBD0g=="],
 
+    "@vercel/microfrontends/commander": ["commander@12.1.0", "", {}, "sha512-Vw8qHK3bZM9y/P10u3Vib8o/DdkvA2OtPtZvD871QKjy74Wj1WSKFILMPRPSdUSx5RFK1arlJzEtA4PkFgnbuA=="],
+
     "ajv-keywords/ajv": ["ajv@6.14.0", "", { "dependencies": { "fast-deep-equal": "^3.1.1", "fast-json-stable-stringify": "^2.0.0", "json-schema-traverse": "^0.4.1", "uri-js": "^4.2.2" } }, "sha512-IWrosm/yrn43eiKqkfkHis7QioDleaXQHdDVPKg0FSwwd/DuvyX79TZnFOnYpB7dcsFAMmtFztZuXPDvSePkFw=="],
 
     "app-builder-lib/@electron/fuses": ["@electron/fuses@1.8.0", "", { "dependencies": { "chalk": "^4.1.1", "fs-extra": "^9.0.1", "minimist": "^1.2.5" }, "bin": { "electron-fuses": "dist/bin.js" } }, "sha512-zx0EIq78WlY/lBb1uXlziZmDZI4ubcCXIMJ4uGjXzZW0nS19TjSPeXPAjzzTmKQlJUZm0SbmZhPKP7tuQ1SsEw=="],
@@ -4678,6 +4687,8 @@
 
     "estimo/nanoid": ["nanoid@5.1.5", "", { "bin": { "nanoid": "bin/nanoid.js" } }, "sha512-Ir/+ZpE9fDsNH0hQ3C68uyThDXzYcim2EqcZ8zn8Chtt1iylPT9xXJB0kPCnqzgcEGikO9RxSrh63MsmVCU7Fw=="],
 
+    "express/cookie": ["cookie@0.7.2", "", {}, "sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w=="],
+
     "extract-zip/get-stream": ["get-stream@5.2.0", "", { "dependencies": { "pump": "^3.0.0" } }, "sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA=="],
 
     "filelist/minimatch": ["minimatch@5.1.9", "", { "dependencies": { "brace-expansion": "^2.0.1" } }, "sha512-7o1wEA2RyMP7Iu7GNba9vc0RWWGACJOCZBJX2GJWip0ikV+wcOsgVuY9uE8CPiyQhkGFSlhuSkZPavN7u1c2Fw=="],
@@ -4690,6 +4701,8 @@
 
     "formdata-node/web-streams-polyfill": ["web-streams-polyfill@4.0.0-beta.3", "", {}, "sha512-QW95TCTaHmsYfHDybGMwO5IJIM93I/6vTRk+daHTWFPhwh+C8Cg7j7XyKrwrj8Ib6vYXe0ocYNrmzY4xAAN6ug=="],
 
+    "fumadocs-core/path-to-regexp": ["path-to-regexp@8.4.2", "", {}, "sha512-qRcuIdP69NPm4qbACK+aDogI5CBDMi1jKe0ry5rSQJz8JVLsC7jV8XpiJjGRLLol3N+R5ihGYcrPLTno6pAdBA=="],
+
     "fumadocs-mdx/esbuild": ["esbuild@0.27.7", "", { "optionalDependencies": { "@esbuild/aix-ppc64": "0.27.7", "@esbuild/android-arm": "0.27.7", "@esbuild/android-arm64": "0.27.7", "@esbuild/android-x64": "0.27.7", "@esbuild/darwin-arm64": "0.27.7", "@esbuild/darwin-x64": "0.27.7", "@esbuild/freebsd-arm64": "0.27.7", "@esbuild/freebsd-x64": "0.27.7", "@esbuild/linux-arm": "0.27.7", "@esbuild/linux-arm64": "0.27.7", "@esbuild/linux-ia32": "0.27.7", "@esbuild/linux-loong64": "0.27.7", "@esbuild/linux-mips64el": "0.27.7", "@esbuild/linux-ppc64": "0.27.7", "@esbuild/linux-riscv64": "0.27.7", "@esbuild/linux-s390x": "0.27.7", "@esbuild/linux-x64": "0.27.7", "@esbuild/netbsd-arm64": "0.27.7", "@esbuild/netbsd-x64": "0.27.7", "@esbuild/openbsd-arm64": "0.27.7", "@esbuild/openbsd-x64": "0.27.7", "@esbuild/openharmony-arm64": "0.27.7", "@esbuild/sunos-x64": "0.27.7", "@esbuild/win32-arm64": "0.27.7", "@esbuild/win32-ia32": "0.27.7", "@esbuild/win32-x64": "0.27.7" }, "bin": { "esbuild": "bin/esbuild" } }, "sha512-IxpibTjyVnmrIQo5aqNpCgoACA/dTKLTlhMHihVHhdkxKyPO1uBBthumT0rdHmcsk9uMonIWS0m4FljWzILh3w=="],
 
     "fumadocs-mdx/lru-cache": ["lru-cache@11.3.3", "", {}, "sha512-JvNw9Y81y33E+BEYPr0U7omo+U9AySnsMsEiXgwT6yqd31VQWTLNQqmT4ou5eqPFUrTfIDFta2wKhB1hyohtAQ=="],
@@ -4716,6 +4729,8 @@
 
     "hosted-git-info/lru-cache": ["lru-cache@6.0.0", "", { "dependencies": { "yallist": "^4.0.0" } }, "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA=="],
 
+    "http-proxy/eventemitter3": ["eventemitter3@4.0.7", "", {}, "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw=="],
+
     "iconv-corefoundation/cli-truncate": ["cli-truncate@2.1.0", "", { "dependencies": { "slice-ansi": "^3.0.0", "string-width": "^4.2.0" } }, "sha512-n8fOixwDD6b/ObinzTrp1ZKFzbgvKZvuz/TvejnLn1aQfC6r52XEx85FmuC+3HI+JM7coBRXUvNqEU2PHVrHpg=="],
 
     "iconv-corefoundation/node-addon-api": ["node-addon-api@1.7.2", "", {}, "sha512-ibPK3iA+vaY1eEjESkQkM0BbCqFOaZMiXRTtdB0u7b4djtY6JnsjvPdUHVMg6xQt3B8fpTTWHI9A+ADjM9frzg=="],
@@ -4752,7 +4767,7 @@
 
     "msw/cookie": ["cookie@1.1.1", "", {}, "sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ=="],
 
-    "msw/path-to-regexp": ["path-to-regexp@6.3.0", "", {}, "sha512-Yhpw4T9C6hPpgPeA28us07OJeqZ5EzQTkbfwuhsUg0c237RomFoETJgmp2sa3F/41gfLE6G5cqcYwznmeEeOlQ=="],
+    "next/@next/env": ["@next/env@16.2.3", "", {}, "sha512-ZWXyj4uNu4GCWQw9cjRxWlbD+33mcDszIo9iQxFnBX3Wmgq9ulaSJcl6VhuWx5pCWqqD+9W6Wfz7N0lM5lYPMA=="],
 
     "next/postcss": ["postcss@8.4.31", "", { "dependencies": { "nanoid": "^3.3.6", "picocolors": "^1.0.0", "source-map-js": "^1.0.2" } }, "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ=="],
 
@@ -4846,6 +4861,8 @@
 
     "rolldown-plugin-dts/get-tsconfig": ["get-tsconfig@4.13.7", "", { "dependencies": { "resolve-pkg-maps": "^1.0.0" } }, "sha512-7tN6rFgBlMgpBML5j8typ92BKFi2sFQvIdpAqLA2beia5avZDrMs0FLZiM5etShWq5irVyGcGMEA1jcDaK7A/Q=="],
 
+    "router/path-to-regexp": ["path-to-regexp@8.4.2", "", {}, "sha512-qRcuIdP69NPm4qbACK+aDogI5CBDMi1jKe0ry5rSQJz8JVLsC7jV8XpiJjGRLLol3N+R5ihGYcrPLTno6pAdBA=="],
+
     "seek-bzip/commander": ["commander@6.2.1", "", {}, "sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA=="],
 
     "serialize-error/type-fest": ["type-fest@0.13.1", "", {}, "sha512-34R7HTnG0XIJcBSn5XhDd7nNFPRcXYRZrBB2O2jdKqYODldSzBAqzsWoZYYvduky73toYS/ESqxPvkDf/F0XMg=="],
diff --git a/docs/next.config.ts b/docs/next.config.ts
index 6ba8a0ac5..195cc665e 100644
--- a/docs/next.config.ts
+++ b/docs/next.config.ts
@@ -1,6 +1,13 @@
+import { existsSync } from 'node:fs';
+import { fileURLToPath } from 'node:url';
+import { withMicrofrontends } from '@vercel/microfrontends/next/config';
 import { createMDX } from 'fumadocs-mdx/next';
 import type { NextConfig } from 'next';
 
+// Routing home is `/docs` — this app serves no landing page at `/`. In the
+// production deployment the apex `/` is served by a separate app, so `/` never
+// reaches this project there; a standalone deployment should set its default
+// route to `/docs`.
 const nextConfig: NextConfig = {
   reactStrictMode: true,
   reactCompiler: {
@@ -125,5 +132,13 @@ const nextConfig: NextConfig = {
 };
 
 const withMDX = createMDX();
+const baseConfig = withMDX(nextConfig);
 
-export default withMDX(nextConfig);
+// `withMicrofrontends` requires a microfrontends.json that declares this app. That
+// file names the private marketing app and is a Microfrontends deploy concern of
+// agents-private only, so it is excluded from the public mirror — the standalone
+// OSS docs build has none. Apply the wrapper only when the config is present,
+// leaving the mirror (and any standalone clone) a plain Next.js app.
+const microfrontendsConfig = fileURLToPath(new URL('./microfrontends.json', import.meta.url));
+
+export default existsSync(microfrontendsConfig) ? withMicrofrontends(baseConfig) : baseConfig;
diff --git a/docs/package.json b/docs/package.json
index 05a2f992e..94518aa0d 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -17,23 +17,12 @@
     "postinstall": "fumadocs-mdx"
   },
   "dependencies": {
-    "@codemirror/commands": "^6.10.3",
-    "@codemirror/lang-markdown": "^6.5.0",
-    "@codemirror/language": "^6.12.3",
-    "@codemirror/state": "^6.6.0",
-    "@codemirror/view": "^6.41.0",
-    "@floating-ui/dom": "^1.7.6",
     "@hookform/resolvers": "^5.4.0",
     "@inkeep/cxkit-react": "^0.5.117",
     "@inkeep/open-knowledge-core": "workspace:*",
     "@radix-ui/react-popover": "^1.1.17",
-    "@tiptap/core": "^3.22.3",
-    "@tiptap/extension-drag-handle": "3.22.3",
-    "@tiptap/extensions": "^3.22.3",
-    "@tiptap/pm": "^3.22.3",
-    "@tiptap/react": "^3.22.3",
-    "@tiptap/suggestion": "^3.22.3",
     "@types/mdx": "^2.0.13",
+    "@vercel/microfrontends": "^2.3.6",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "fumadocs-core": "~16.1.0",
diff --git a/docs/src/app/(home)/brand/page.tsx b/docs/src/app/(home)/brand/page.tsx
index 7bbd0e50f..13b70e914 100644
--- a/docs/src/app/(home)/brand/page.tsx
+++ b/docs/src/app/(home)/brand/page.tsx
@@ -1,9 +1,9 @@
 import type { Metadata } from 'next';
+import { SiteFooter } from '@/components/footer';
+import { MarketingButton } from '@/components/marketing-button';
+import SectionHeading from '@/components/section-heading';
 import { BRAND_ASSETS, BRAND_ROUTE, BRAND_ZIP } from '@/lib/brand-assets';
 import { cn } from '@/lib/utils';
-import { SiteFooter } from '../footer';
-import { MarketingButton } from '../marketing-button';
-import SectionHeading from '../section-heading';
 
 export const metadata: Metadata = {
   title: 'Brand assets',
diff --git a/docs/src/app/(home)/feature-item.tsx b/docs/src/app/(home)/feature-item.tsx
deleted file mode 100644
index 738492bb7..000000000
--- a/docs/src/app/(home)/feature-item.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import type { LucideIcon } from 'lucide-react';
-import { cn } from '@/lib/utils';
-
-interface FeatureItemProps {
-  icon: LucideIcon;
-  title: string;
-  description: string;
-  className?: string;
-}
-
-const FeatureItem = ({ icon: Icon, title, description, className }: FeatureItemProps) => {
-  return (
-    <div className={cn('flex flex-col gap-3', className)}>
-      <div className="flex h-6 w-6 items-center justify-center rounded-md text-primary">
-        <Icon className="h-6 w-6" strokeWidth={1.75} />
-      </div>
-      <div className="flex flex-col gap-1.5">
-        <h3 className="text-lg font-semibold text-slide-text leading-snug">{title}</h3>
-        <p className="text-lg leading-snug text-slide-muted">{description}</p>
-      </div>
-    </div>
-  );
-};
-
-export default FeatureItem;
diff --git a/docs/src/app/(home)/layout.tsx b/docs/src/app/(home)/layout.tsx
deleted file mode 100644
index d252fb144..000000000
--- a/docs/src/app/(home)/layout.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { getGitHubStars } from '@inkeep/open-knowledge-core';
-import { SiteNav } from './site-nav';
-
-export default async function Layout({ children }: LayoutProps<'/'>) {
-  const stars = await getGitHubStars({ next: { revalidate: 3600 } });
-  return (
-    <>
-      <SiteNav stars={stars} />
-      <main>{children}</main>
-    </>
-  );
-}
diff --git a/docs/src/app/(home)/page.tsx b/docs/src/app/(home)/page.tsx
deleted file mode 100644
index a75eac588..000000000
--- a/docs/src/app/(home)/page.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import type { SoftwareApplication, WithContext } from 'schema-dts';
-import { JsonLd } from '@/components/seo/json-ld';
-import { DOWNLOAD_URL, GITHUB_URL, SITE_DESCRIPTION, SITE_NAME, SITE_URL } from '@/lib/site';
-import { SiteFooter } from './footer';
-import { CallToAction } from './sections/call-to-action';
-import { Collaboration } from './sections/collaboration';
-import { Hero } from './sections/hero';
-import { MadeForAgents } from './sections/made-for-agents';
-import { OwnYourKnowledge } from './sections/own-your-knowledge';
-import { PutItToWork } from './sections/put-it-to-work';
-import { RichEditing } from './sections/rich-editing';
-
-const softwareAppLd = {
-  '@context': 'https://schema.org',
-  '@type': 'SoftwareApplication',
-  name: SITE_NAME,
-  applicationCategory: 'DeveloperApplication',
-  operatingSystem: 'macOS',
-  url: SITE_URL,
-  downloadUrl: DOWNLOAD_URL,
-  description: SITE_DESCRIPTION,
-  isAccessibleForFree: true,
-  offers: {
-    '@type': 'Offer',
-    price: '0',
-    priceCurrency: 'USD',
-  },
-  author: {
-    '@type': 'Organization',
-    name: 'Inkeep',
-    url: 'https://inkeep.com',
-  },
-  sameAs: GITHUB_URL,
-} satisfies WithContext<SoftwareApplication>;
-
-export default function HomePage() {
-  return (
-    <div className="font-[family-name:var(--font-dm-sans)] selection:bg-[var(--slide-accent)]/20">
-      <JsonLd json={softwareAppLd} />
-      <Hero />
-      <RichEditing />
-      <MadeForAgents />
-      <PutItToWork />
-      <Collaboration />
-      <OwnYourKnowledge />
-      <CallToAction />
-      <SiteFooter />
-    </div>
-  );
-}
diff --git a/docs/src/app/(home)/section.tsx b/docs/src/app/(home)/section.tsx
deleted file mode 100644
index 208a20ba2..000000000
--- a/docs/src/app/(home)/section.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { cn } from '@/lib/utils';
-
-export function Section({
-  children,
-  className,
-}: {
-  children: React.ReactNode;
-  className?: string;
-}) {
-  return (
-    <section className={cn('w-full px-4 sm:px-11 py-16 lg:py-28', className)}>{children}</section>
-  );
-}
diff --git a/docs/src/app/(home)/sections/agent-brain-graphic.tsx b/docs/src/app/(home)/sections/agent-brain-graphic.tsx
deleted file mode 100644
index bce9d3d3e..000000000
--- a/docs/src/app/(home)/sections/agent-brain-graphic.tsx
+++ /dev/null
@@ -1,133 +0,0 @@
-import {
-  Box,
-  Code,
-  FileText,
-  Globe,
-  type LucideIcon,
-  MessageCircleMore,
-  Sparkles,
-  User,
-} from 'lucide-react';
-
-const RINGS = [20, 44, 68, 94] as const;
-
-type Bubble = { icon: LucideIcon; angle: number; radius: number };
-
-const BUBBLES: Bubble[] = [
-  { icon: Globe, angle: 8, radius: 68 }, // right, outer ring
-  { icon: User, angle: 65, radius: 44 }, // upper-right, inner ring
-  { icon: FileText, angle: 128, radius: 68 }, // upper-left, outer ring
-  { icon: MessageCircleMore, angle: 185, radius: 44 }, // left, inner ring
-  { icon: Code, angle: 248, radius: 68 }, // lower-left, outer ring
-  { icon: Box, angle: 305, radius: 44 }, // lower-right, inner ring
-];
-
-const CENTER = { x: 80, y: 45 };
-
-function orbitMotion(radius: number) {
-  return radius > 50
-    ? { duration: 130, direction: 'reverse' as const }
-    : { duration: 90, direction: 'normal' as const };
-}
-
-function AgentMark() {
-  return (
-    <div
-      className="flex shrink-0 items-center justify-center rounded-full"
-      style={{
-        width: 44,
-        height: 44,
-        background:
-          'linear-gradient(135deg, var(--color-purple-light) 0%, var(--color-sky-blue) 50%, var(--color-crystal-blue) 100%)',
-        boxShadow: '0 1px 2px rgba(15, 23, 42, 0.08), 0 6px 16px -4px rgba(15, 23, 42, 0.18)',
-      }}
-    >
-      <Sparkles className="size-[22px] text-white" strokeWidth={2} aria-hidden="true" />
-    </div>
-  );
-}
-
-export function AgentBrainGraphic() {
-  return (
-    <div className="relative h-full w-full overflow-hidden" aria-hidden="true">
-      <style>{`
-        @keyframes ok-orbit { to { transform: rotate(360deg); } }
-        @media (prefers-reduced-motion: reduce) {
-          .ok-orbit-anim { animation: none !important; }
-        }
-      `}</style>
-      <svg
-        className="absolute inset-0 h-full w-full"
-        viewBox="0 0 160 90"
-        preserveAspectRatio="xMidYMid meet"
-        aria-hidden="true"
-      >
-        {RINGS.map((r) => (
-          <circle
-            key={r}
-            cx={CENTER.x}
-            cy={CENTER.y}
-            r={r}
-            fill="none"
-            style={{ stroke: 'color-mix(in srgb, var(--slide-text) 5%, transparent)' }}
-            strokeWidth={1}
-            vectorEffect="non-scaling-stroke"
-          />
-        ))}
-      </svg>
-
-      {BUBBLES.map((b, i) => {
-        const Icon = b.icon;
-        const { duration, direction } = orbitMotion(b.radius);
-        const counterDirection = direction === 'reverse' ? 'normal' : 'reverse';
-        return (
-          <div
-            // biome-ignore lint/suspicious/noArrayIndexKey: static positions
-            key={i}
-            className="absolute left-1/2 top-1/2 aspect-square"
-            style={{
-              width: `${(b.radius / 80) * 100}%`,
-              transform: `translate(-50%, -50%) rotate(${-b.angle}deg)`,
-            }}
-          >
-            <div
-              className="ok-orbit-anim h-full w-full"
-              style={{ animation: `ok-orbit ${duration}s linear infinite ${direction}` }}
-            >
-              <div className="absolute left-full top-1/2 size-0">
-                <div
-                  className="ok-orbit-anim"
-                  style={{ animation: `ok-orbit ${duration}s linear infinite ${counterDirection}` }}
-                >
-                  <div
-                    className="absolute flex items-center justify-center rounded-full"
-                    style={{
-                      width: '40px',
-                      height: '40px',
-                      transform: `translate(-50%, -50%) rotate(${b.angle}deg)`,
-                      background: 'color-mix(in srgb, white 45%, var(--slide-bg))',
-                      border: '1px solid rgba(26, 26, 26, 0.07)',
-                    }}
-                  >
-                    <Icon
-                      className="size-[18px]"
-                      strokeWidth={1.6}
-                      style={{
-                        color: 'color-mix(in srgb, var(--slide-text) 40%, var(--slide-bg))',
-                      }}
-                      aria-hidden="true"
-                    />
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        );
-      })}
-
-      <div className="absolute inset-0 flex items-center justify-center">
-        <AgentMark />
-      </div>
-    </div>
-  );
-}
diff --git a/docs/src/app/(home)/sections/call-to-action.tsx b/docs/src/app/(home)/sections/call-to-action.tsx
deleted file mode 100644
index 56a437073..000000000
--- a/docs/src/app/(home)/sections/call-to-action.tsx
+++ /dev/null
@@ -1,126 +0,0 @@
-'use client';
-
-import Image from 'next/image';
-import Link from 'next/link';
-import { useEffect, useState } from 'react';
-import { DOWNLOAD_ROUTE } from '@/lib/site';
-import { useIsInView } from '@/lib/use-is-in-view';
-import { cn } from '@/lib/utils';
-import { DotTexture } from '../dot-texture';
-import { MarketingButton } from '../marketing-button';
-import { Section } from '../section';
-import SectionHeading from '../section-heading';
-
-/* Two soft organic shapes drift toward center while blurring when the section
-   scrolls into view, overlapping behind the headline. multiply darkens the
-   overlap into a richer blue on the light background; screen is the dark-mode
-   equivalent (multiply over near-black renders the shapes invisible). */
-function CtaShape({
-  src,
-  width,
-  height,
-  settled,
-  wrapperClassName,
-  imageClassName,
-  fromX,
-  toX,
-}: {
-  src: string;
-  width: number;
-  height: number;
-  settled: boolean;
-  wrapperClassName?: string;
-  imageClassName?: string;
-  fromX: string;
-  toX: string;
-}) {
-  return (
-    <div
-      aria-hidden
-      className={cn(
-        'pointer-events-none absolute left-1/2 z-0 -translate-x-1/2 -translate-y-1/2 select-none mix-blend-multiply dark:mix-blend-screen',
-        wrapperClassName,
-      )}
-    >
-      <Image
-        src={src}
-        alt=""
-        width={width}
-        height={height}
-        className={cn(
-          'h-auto opacity-30 transition-[transform,filter] duration-1400 ease-[cubic-bezier(0.25,0.46,0.45,0.94)] motion-reduce:transition-none',
-          imageClassName,
-        )}
-        style={{
-          transform: `translateX(${settled ? toX : fromX})`,
-          filter: settled ? 'blur(12.58px)' : 'blur(0px)',
-        }}
-      />
-    </div>
-  );
-}
-
-export function CallToAction() {
-  const [stageRef, inView] = useIsInView<HTMLDivElement>('-15%');
-  const [settled, setSettled] = useState(false);
-  useEffect(() => {
-    if (inView) setSettled(true);
-  }, [inView]);
-
-  return (
-    <Section className="relative overflow-hidden">
-      <DotTexture variant="right" className="top-0 right-0 w-40 sm:w-72 lg:w-lg" />
-      <DotTexture variant="left" className="-bottom-50 left-0 w-32 sm:w-60 lg:w-96" />
-
-      <div
-        ref={stageRef}
-        className="relative flex min-h-112 items-center justify-center sm:min-h-136 lg:min-h-160"
-      >
-        <CtaShape
-          src="/images/home/cta-shape-left.svg"
-          width={606}
-          height={585}
-          settled={settled}
-          wrapperClassName="top-1/2"
-          imageClassName="w-72 sm:w-96 lg:w-[38rem]"
-          fromX="-32%"
-          toX="-18%"
-        />
-        <CtaShape
-          src="/images/home/cta-shape-right.svg"
-          width={700}
-          height={697}
-          settled={settled}
-          wrapperClassName="top-[55%]"
-          imageClassName="w-80 sm:w-[28rem] lg:w-[43.75rem]"
-          fromX="32%"
-          toX="18%"
-        />
-
-        <div className="container relative z-10 flex flex-col items-center">
-          <SectionHeading tag="Get started" className="items-center" headingClassName="text-center">
-            Start building knowledge.
-          </SectionHeading>
-
-          <div className="mt-10 flex flex-wrap items-center justify-center gap-5">
-            <MarketingButton
-              href={DOWNLOAD_ROUTE}
-              target="_blank"
-              size="lg"
-              showIcon
-              iconDirection="down"
-            >
-              DOWNLOAD FOR MAC
-            </MarketingButton>
-            <Link
-              href="/docs/get-started/quickstart#ok-install-web-app-linux-windows-intel-mac"
-              className="font-mono text-base text-slide-muted underline-offset-4 transition-colors hover:text-slide-text hover:underline"
-            >
-              More platforms
-            </Link>
-          </div>
-        </div>
-      </div>
-    </Section>
-  );
-}
diff --git a/docs/src/app/(home)/sections/collaboration.tsx b/docs/src/app/(home)/sections/collaboration.tsx
deleted file mode 100644
index d52fcb3e7..000000000
--- a/docs/src/app/(home)/sections/collaboration.tsx
+++ /dev/null
@@ -1,241 +0,0 @@
-import { GitBranch, type LucideIcon, MousePointerClick, Share2, Sparkle } from 'lucide-react';
-import type { ReactNode, SVGProps } from 'react';
-import { ClaudeIcon } from '@/components/icons/claude';
-import { CodexBrandMonoIcon } from '@/components/icons/codex';
-import { Section } from '../section';
-import SectionHeading from '../section-heading';
-
-const CLAUDE_BRAND = '#D97757';
-
-type EditorTint = {
-  highlightBg: string;
-  badgeBg: string;
-  badgeText: string;
-};
-
-const CLAUDE_TINT: EditorTint = {
-  highlightBg: 'color-mix(in srgb, var(--color-orange-light) 80%, transparent)',
-  badgeBg: CLAUDE_BRAND,
-  badgeText: '#ffffff',
-};
-
-const ALAN_TINT: EditorTint = {
-  highlightBg: 'color-mix(in srgb, var(--color-crystal-blue) 70%, transparent)',
-  badgeBg: 'var(--color-azure-blue)',
-  badgeText: '#ffffff',
-};
-
-const CODEX_TINT: EditorTint = {
-  highlightBg: 'color-mix(in srgb, var(--color-purple-light) 70%, transparent)',
-  badgeBg: '#7c6df0',
-  badgeText: '#ffffff',
-};
-
-function ShareButton() {
-  return (
-    <span
-      className="inline-flex items-center gap-1.5 rounded-md px-2 py-1 text-[12px] font-medium text-slide-muted"
-      aria-hidden="true"
-    >
-      <Share2 className="size-3" strokeWidth={2} aria-hidden="true" />
-      Share
-    </span>
-  );
-}
-
-function PresenceAvatars() {
-  return (
-    <div className="flex items-center -space-x-2">
-      {/* Icon-based "agent" avatars use a white plate + thin colored ring so the
-          brand mark stays legible. Text-initial "human" avatars (Alan) keep the
-          solid-color treatment so the initial reads at high contrast. */}
-      <PresenceAvatar tint={ALAN_TINT} ringClass="ring-slide-bg-elevated">
-        <span
-          className="text-[11px] font-semibold leading-none"
-          style={{ color: ALAN_TINT.badgeText }}
-        >
-          A
-        </span>
-      </PresenceAvatar>
-      <PresenceAvatar tint={CLAUDE_TINT} ringClass="ring-slide-bg-elevated">
-        <ClaudeIcon
-          className="size-3.5"
-          aria-hidden="true"
-          style={{ color: CLAUDE_TINT.badgeText }}
-        />
-      </PresenceAvatar>
-      <PresenceAvatar tint={CODEX_TINT} ringClass="ring-slide-bg-elevated">
-        <CodexBrandMonoIcon
-          className="size-3"
-          aria-hidden="true"
-          style={{ color: CODEX_TINT.badgeText }}
-        />
-      </PresenceAvatar>
-    </div>
-  );
-}
-
-function PresenceAvatar({
-  tint,
-  ringClass,
-  children,
-}: {
-  tint: EditorTint;
-  ringClass: string;
-  children: ReactNode;
-}) {
-  return (
-    <span
-      className={`flex size-6 items-center justify-center rounded-full ring-2 ${ringClass}`}
-      style={{ backgroundColor: tint.badgeBg }}
-      aria-hidden="true"
-    >
-      {children}
-    </span>
-  );
-}
-
-function Highlight({
-  tint,
-  name,
-  icon: Icon,
-  children,
-}: {
-  tint: EditorTint;
-  name: string;
-  icon?: (props: SVGProps<SVGSVGElement>) => ReactNode;
-  children: ReactNode;
-}) {
-  return (
-    <span
-      className="inline rounded-[3px] px-[3px] py-px box-decoration-clone"
-      style={{ backgroundColor: tint.highlightBg, color: 'inherit' }}
-    >
-      {children}
-      {/* Inline-block anchor at the trailing edge of the last line. Holds both
-          the caret and the floating name badge so they stay glued together when
-          the highlight wraps across lines (absolute positioning on the outer
-          span otherwise stretches the caret across both line boxes and floats
-          the badge over the first line). */}
-      <span
-        className="relative ml-[1px] inline-block w-[1.5px] align-middle"
-        style={{ height: '1.05em' }}
-      >
-        <span
-          aria-hidden="true"
-          className="absolute inset-0"
-          style={{ backgroundColor: tint.badgeBg }}
-        />
-        <span
-          className="absolute bottom-full left-0 z-10 mb-[3px] inline-flex -translate-x-px select-none items-center gap-1 whitespace-nowrap rounded-[6px] px-1.5 py-[3px] text-[11px] font-medium leading-none shadow-sm"
-          style={{ backgroundColor: tint.badgeBg, color: tint.badgeText }}
-          aria-hidden="true"
-        >
-          {Icon ? <Icon className="size-3 shrink-0" aria-hidden="true" /> : null}
-          {name}
-        </span>
-      </span>
-    </span>
-  );
-}
-
-function CollaborationPreview() {
-  return (
-    <div className="w-full rounded-2xl border border-slide-text/8 bg-slide-bg-elevated shadow-[0_18px_48px_-24px_rgba(35,31,32,0.18)]">
-      {/* Document chrome — filename + presence */}
-      <div className="flex items-center justify-between gap-4 rounded-t-2xl border-b border-slide-text/8 bg-slide-bg/40 px-5 py-3">
-        <span className="font-mono text-[12px] text-slide-muted">roadmap.md</span>
-        <div className="flex items-center gap-3">
-          <ShareButton />
-          <PresenceAvatars />
-        </div>
-      </div>
-
-      {/* Document body */}
-      <div className="flex flex-col gap-7 px-7 py-8 sm:px-9 sm:py-10">
-        <h3 className="text-2xl font-semibold tracking-tight text-slide-text sm:text-[28px]">
-          Q3 Roadmap
-        </h3>
-
-        <p className="text-[15px] leading-relaxed text-slide-text/85">
-          We&rsquo;re bringing the whole team into{' '}
-          <Highlight tint={CLAUDE_TINT} name="Claude">
-            one shared workspace
-          </Highlight>
-          , where people and agents edit the same files instead of losing context in a thread.
-        </p>
-
-        <div className="flex flex-col gap-4">
-          <span className="text-[15px] font-semibold text-slide-text">This quarter</span>
-          <ul className="flex flex-col gap-4 text-[15px] leading-relaxed text-slide-text/85">
-            <li className="flex items-start gap-3">
-              <Bullet />
-              <span>
-                Ship the{' '}
-                <Highlight tint={ALAN_TINT} name="Alan">
-                  collaborative editor
-                </Highlight>{' '}
-                for docs and spaces
-              </span>
-            </li>
-            <li className="flex items-start gap-3">
-              <Bullet />
-              <span>One click to share a doc, or a whole workspace</span>
-            </li>
-            <li className="flex items-start gap-3">
-              <Bullet />
-              <span>
-                <Highlight tint={CODEX_TINT} name="Codex">
-                  <span style={{ color: '#5c4dc0' }}>
-                    Git-backed sync so history and ownership stay yours
-                  </span>
-                </Highlight>
-              </span>
-            </li>
-          </ul>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-function Bullet() {
-  return (
-    <span
-      aria-hidden="true"
-      className="mt-[10px] inline-block size-[5px] shrink-0 rounded-full bg-slide-muted/50"
-    />
-  );
-}
-
-function FeatureItem({ icon: Icon, label }: { icon: LucideIcon; label: string }) {
-  return (
-    <div className="flex items-center gap-2.5">
-      <Icon className="size-4 text-slide-muted" aria-hidden="true" />
-      <span className="text-sm text-slide-text">{label}</span>
-    </div>
-  );
-}
-
-export function Collaboration() {
-  return (
-    <Section className="container">
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 items-center">
-        <CollaborationPreview />
-        <div className="flex flex-col gap-8">
-          <SectionHeading
-            tag="Sharing"
-            description="One click to share a doc or project with your team. Everything syncs through git, so history and ownership stay yours."
-          >
-            Collaborate with your team.
-          </SectionHeading>
-          <div className="flex flex-col sm:flex-row flex-wrap gap-4 sm:gap-6">
-            <FeatureItem icon={MousePointerClick} label="1-click share" />
-            <FeatureItem icon={GitBranch} label="git-backed sync" />
-            <FeatureItem icon={Sparkle} label="Collaborate with AI" />
-          </div>
-        </div>
-      </div>
-    </Section>
-  );
-}
diff --git a/docs/src/app/(home)/sections/eng-specs-graphic.tsx b/docs/src/app/(home)/sections/eng-specs-graphic.tsx
deleted file mode 100644
index b208fee1f..000000000
--- a/docs/src/app/(home)/sections/eng-specs-graphic.tsx
+++ /dev/null
@@ -1,241 +0,0 @@
-import { Code, Sparkles } from 'lucide-react';
-
-const RINGS = [56, 82, 108] as const;
-const RING_CENTER = { x: 80, y: 45 };
-
-const CARD_BG = 'var(--slide-bg-elevated)';
-const CARD_RADIUS = '3.6cqw';
-const FRONT_SHADOW = '0 1px 3px rgba(15, 23, 42, 0.07), 0 16px 34px -10px rgba(15, 23, 42, 0.18)';
-const BACK_SHADOW = '0 1px 2px rgba(15, 23, 42, 0.05), 0 6px 18px -8px rgba(15, 23, 42, 0.12)';
-
-const LINE_FILL = 'color-mix(in srgb, var(--slide-text) 13%, transparent)';
-const ACCENT_LINE = 'color-mix(in srgb, var(--slide-accent) 45%, transparent)';
-const HAIRLINE = 'color-mix(in srgb, var(--slide-text) 8%, transparent)';
-const MUTED_FILL = 'color-mix(in srgb, var(--slide-muted) 14%, transparent)';
-
-function BackgroundRings() {
-  return (
-    <svg
-      className="absolute inset-0 h-full w-full"
-      viewBox="0 0 160 90"
-      preserveAspectRatio="xMidYMid slice"
-      aria-hidden="true"
-    >
-      {RINGS.map((r) => (
-        <circle
-          key={r}
-          cx={RING_CENTER.x}
-          cy={RING_CENTER.y}
-          r={r}
-          fill="none"
-          style={{ stroke: 'color-mix(in srgb, var(--slide-text) 10%, transparent)' }}
-          strokeWidth={1}
-          strokeDasharray="1.5 4"
-          vectorEffect="non-scaling-stroke"
-        />
-      ))}
-    </svg>
-  );
-}
-
-type Seg = { w: string; accent?: boolean };
-
-function CodeLine({ indent, segs }: { indent?: string; segs: Seg[] }) {
-  return (
-    <div className="flex items-center" style={{ gap: '1.1cqw', marginLeft: indent }}>
-      {segs.map((s, i) => (
-        <div
-          // biome-ignore lint/suspicious/noArrayIndexKey: static token layout
-          key={i}
-          style={{
-            height: '1.7cqw',
-            width: s.w,
-            borderRadius: '9999px',
-            backgroundColor: s.accent ? ACCENT_LINE : LINE_FILL,
-          }}
-        />
-      ))}
-    </div>
-  );
-}
-
-function SkeletonLine({ width, delay }: { width: string; delay: string }) {
-  return (
-    <div
-      className="relative overflow-hidden"
-      style={{ height: '2.1cqw', width, borderRadius: '9999px', backgroundColor: MUTED_FILL }}
-    >
-      <div
-        className="ok-spec-shimmer absolute inset-y-0"
-        style={{
-          width: '50%',
-          animationDelay: delay,
-          background:
-            'linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.7) 50%, transparent 100%)',
-        }}
-      />
-    </div>
-  );
-}
-
-function CodeCard() {
-  return (
-    <div
-      className="absolute flex flex-col overflow-hidden"
-      style={{
-        left: '9%',
-        top: '15%',
-        width: '43%',
-        height: '69%',
-        transform: 'rotate(-5deg)',
-        backgroundColor: CARD_BG,
-        borderRadius: CARD_RADIUS,
-        boxShadow: BACK_SHADOW,
-      }}
-    >
-      <div
-        className="flex items-center"
-        style={{
-          gap: '1.6cqw',
-          padding: '3.2cqw 3.6cqw',
-          borderBottom: `1px solid ${HAIRLINE}`,
-        }}
-      >
-        <Code
-          style={{ width: '3.4cqw', height: '3.4cqw', color: 'var(--slide-accent)' }}
-          strokeWidth={2}
-          aria-hidden="true"
-        />
-        <span
-          style={{
-            fontSize: '2.6cqw',
-            fontWeight: 600,
-            color: 'var(--slide-muted)',
-            fontFamily: 'var(--font-geist-mono, ui-monospace, monospace)',
-          }}
-        >
-          auth.ts
-        </span>
-      </div>
-
-      <div className="flex flex-1 flex-col" style={{ padding: '3.6cqw', gap: '2.4cqw' }}>
-        <CodeLine segs={[{ w: '14%', accent: true }, { w: '30%' }, { w: '20%' }]} />
-        <CodeLine indent="4cqw" segs={[{ w: '22%', accent: true }, { w: '40%' }]} />
-        <CodeLine indent="4cqw" segs={[{ w: '34%' }, { w: '18%', accent: true }]} />
-        <CodeLine indent="4cqw" segs={[{ w: '16%', accent: true }, { w: '24%' }, { w: '14%' }]} />
-        <CodeLine segs={[{ w: '10%' }]} />
-      </div>
-    </div>
-  );
-}
-
-function SpecCard() {
-  return (
-    <div
-      className="absolute flex flex-col overflow-hidden"
-      style={{
-        left: '44%',
-        top: '11%',
-        width: '47%',
-        height: '79%',
-        padding: '4.4cqw',
-        transform: 'rotate(3.5deg)',
-        backgroundColor: CARD_BG,
-        borderRadius: CARD_RADIUS,
-        boxShadow: FRONT_SHADOW,
-      }}
-    >
-      <div
-        style={{
-          fontSize: '2.2cqw',
-          fontWeight: 600,
-          letterSpacing: '0.22em',
-          color: 'var(--slide-muted)',
-        }}
-      >
-        SPEC
-      </div>
-      <div
-        style={{
-          marginTop: '1.6cqw',
-          fontSize: '5.4cqw',
-          fontWeight: 600,
-          lineHeight: 1.05,
-          letterSpacing: '-0.02em',
-          color: 'color-mix(in srgb, var(--slide-text) 88%, transparent)',
-        }}
-      >
-        Auth service
-      </div>
-
-      <div className="flex flex-col" style={{ marginTop: '3.4cqw', gap: '2.2cqw' }}>
-        <SkeletonLine width="100%" delay="0s" />
-        <SkeletonLine width="88%" delay="0.7s" />
-        <SkeletonLine width="94%" delay="1.4s" />
-      </div>
-
-      <div className="flex-1" />
-
-      <div className="flex items-center" style={{ gap: '2cqw' }}>
-        <div className="flex items-center">
-          <div
-            className="flex shrink-0 items-center justify-center rounded-full"
-            style={{
-              width: '5.6cqw',
-              height: '5.6cqw',
-              backgroundColor: 'var(--color-orange-light)',
-              color: '#b45309',
-              border: '0.5cqw solid var(--slide-bg-elevated)',
-              fontSize: '2.4cqw',
-              fontWeight: 600,
-            }}
-          >
-            S
-          </div>
-          <div
-            className="flex shrink-0 items-center justify-center rounded-full"
-            style={{
-              width: '5.6cqw',
-              height: '5.6cqw',
-              marginLeft: '-1.6cqw',
-              backgroundColor: 'var(--color-crystal-blue)',
-              color: 'var(--color-azure-blue)',
-              border: '0.5cqw solid var(--slide-bg-elevated)',
-            }}
-          >
-            <Sparkles
-              style={{ width: '3cqw', height: '3cqw' }}
-              strokeWidth={2.2}
-              aria-hidden="true"
-            />
-          </div>
-        </div>
-        <span style={{ fontSize: '2.2cqw', whiteSpace: 'nowrap', color: 'var(--slide-muted)' }}>
-          You and your agents
-        </span>
-      </div>
-    </div>
-  );
-}
-
-export function EngSpecsGraphic() {
-  return (
-    <div className="@container relative h-full w-full overflow-hidden" aria-hidden="true">
-      <style>{`
-        @keyframes ok-spec-shimmer {
-          0% { transform: translateX(-160%); }
-          45% { transform: translateX(360%); }
-          100% { transform: translateX(360%); }
-        }
-        .ok-spec-shimmer { animation: ok-spec-shimmer 5.5s ease-in-out infinite; }
-        @media (prefers-reduced-motion: reduce) {
-          .ok-spec-shimmer { animation: none !important; }
-        }
-      `}</style>
-
-      <BackgroundRings />
-      <CodeCard />
-      <SpecCard />
-    </div>
-  );
-}
diff --git a/docs/src/app/(home)/sections/hero-preview.tsx b/docs/src/app/(home)/sections/hero-preview.tsx
deleted file mode 100644
index 61b217880..000000000
--- a/docs/src/app/(home)/sections/hero-preview.tsx
+++ /dev/null
@@ -1,691 +0,0 @@
-'use client';
-
-import { ArrowUp, Check, GitBranch, Globe, Loader2 } from 'lucide-react';
-import { useEffect, useRef, useState } from 'react';
-import { ClaudeIcon } from '@/components/icons/claude';
-import { CodexBrandIcon } from '@/components/icons/codex';
-import { CursorIcon } from '@/components/icons/cursor';
-import {
-  OkEditorBody,
-  OkEditorModeToggle,
-  OkEditorProvider,
-  parseEditorMarkdown,
-  useEditorDocStats,
-  useOkEditor,
-} from '@/components/ok-editor/ok-editor';
-import {
-  HERO_FRONTMATTER,
-  HERO_FRONTMATTER_YAML,
-  heroRevealMarkdown,
-} from '@/components/ok-editor/seed';
-import { OkIcon } from '@/components/ok-icon';
-import { OkWordmark } from '@/components/ok-wordmark';
-import { useIsInView } from '@/lib/use-is-in-view';
-import { usePrefersReducedMotion } from '@/lib/use-prefers-reduced-motion';
-import { cn } from '@/lib/utils';
-
-const AGENT_META = {
-  claude: { label: 'Claude', Icon: ClaudeIcon, brandColor: '#D97757' as string | undefined },
-  cursor: {
-    label: 'Cursor',
-    Icon: CursorIcon,
-    brandColor: 'var(--slide-text)' as string | undefined,
-  },
-  codex: { label: 'Codex', Icon: CodexBrandIcon, brandColor: '#7A9DFF' as string | undefined },
-} as const;
-
-export type HeroPreviewAgentId = keyof typeof AGENT_META;
-
-const AGENT_IDS = Object.keys(AGENT_META) as HeroPreviewAgentId[];
-
-const PAUSED = false;
-
-const USER_MESSAGE = 'Help me write up our launch week';
-const AGENT_STATUS = 'Drafting your launch recap in OpenKnowledge.';
-const DOC_PATH = 'retros/launch-week';
-const TOOL_NAME = 'open-knowledge · write';
-const TOOL_SUMMARY = 'Create recap + add daily activity chart';
-
-type Phase =
-  | 'rest'
-  | 'user-typing'
-  | 'agent-status'
-  | 'tool-appear'
-  | 'tool-filling'
-  | 'tool-done'
-  | 'hold'
-  | 'reset';
-
-const SEGMENTS: ReadonlyArray<{ phase: Phase; ms: number }> = [
-  { phase: 'rest', ms: 800 },
-  { phase: 'user-typing', ms: 800 },
-  { phase: 'agent-status', ms: 500 },
-  { phase: 'tool-appear', ms: 400 },
-  { phase: 'tool-filling', ms: 2000 },
-  { phase: 'tool-done', ms: 600 },
-  { phase: 'hold', ms: 2200 },
-  { phase: 'reset', ms: 500 },
-];
-const RUN_ONCE_MS = SEGMENTS.filter((s) => s.phase !== 'reset').reduce((sum, s) => sum + s.ms, 0);
-
-const FINAL_STATE: State = {
-  phase: 'hold',
-  userTypedLen: USER_MESSAGE.length,
-  agentTypedLen: AGENT_STATUS.length,
-  contentStep: 5,
-};
-
-const FILL_THRESHOLDS_MS = [0, 450, 900, 1350] as const;
-
-type State = {
-  phase: Phase;
-  userTypedLen: number;
-  agentTypedLen: number;
-  contentStep: number;
-};
-
-function computeState(elapsed: number): State {
-  let cursor = 0;
-  for (const seg of SEGMENTS) {
-    if (elapsed < cursor + seg.ms) {
-      const local = elapsed - cursor;
-      const localProgress = local / seg.ms;
-      return computeStateForSegment(seg.phase, local, localProgress);
-    }
-    cursor += seg.ms;
-  }
-  return {
-    phase: 'hold',
-    userTypedLen: USER_MESSAGE.length,
-    agentTypedLen: AGENT_STATUS.length,
-    contentStep: 5,
-  };
-}
-
-function computeStateForSegment(phase: Phase, local: number, localProgress: number): State {
-  switch (phase) {
-    case 'rest':
-      return { phase, userTypedLen: 0, agentTypedLen: 0, contentStep: 0 };
-    case 'user-typing':
-      return {
-        phase,
-        userTypedLen: Math.floor(localProgress * USER_MESSAGE.length),
-        agentTypedLen: 0,
-        contentStep: 0,
-      };
-    case 'agent-status':
-      return {
-        phase,
-        userTypedLen: USER_MESSAGE.length,
-        agentTypedLen: Math.floor(localProgress * AGENT_STATUS.length),
-        contentStep: 0,
-      };
-    case 'tool-appear':
-      return {
-        phase,
-        userTypedLen: USER_MESSAGE.length,
-        agentTypedLen: AGENT_STATUS.length,
-        contentStep: 1,
-      };
-    case 'tool-filling': {
-      let step = 1;
-      for (let i = 0; i < FILL_THRESHOLDS_MS.length; i++) {
-        if (local >= FILL_THRESHOLDS_MS[i]) step = 2 + i;
-      }
-      return {
-        phase,
-        userTypedLen: USER_MESSAGE.length,
-        agentTypedLen: AGENT_STATUS.length,
-        contentStep: step,
-      };
-    }
-    case 'tool-done':
-    case 'hold':
-      return {
-        phase,
-        userTypedLen: USER_MESSAGE.length,
-        agentTypedLen: AGENT_STATUS.length,
-        contentStep: 5,
-      };
-    case 'reset':
-      return {
-        phase,
-        userTypedLen: USER_MESSAGE.length,
-        agentTypedLen: AGENT_STATUS.length,
-        contentStep: 5,
-      };
-  }
-}
-
-export function HeroPreview({ activeAgentId }: { activeAgentId: HeroPreviewAgentId }) {
-  const activeAgent = AGENT_META[activeAgentId];
-  const [state, setState] = useState<State>(() => computeState(0));
-  const [animationDone, setAnimationDone] = useState(false);
-
-  const [containerRef, inView] = useIsInView<HTMLDivElement>('100px');
-  const prefersReducedMotion = usePrefersReducedMotion();
-
-  useEffect(() => {
-    if (PAUSED) return;
-    if (animationDone) return;
-    if (prefersReducedMotion) {
-      setState(FINAL_STATE);
-      setAnimationDone(true);
-      return;
-    }
-    if (!inView) return;
-    let raf = 0;
-    let lastPhase: Phase | null = null;
-    let lastUserLen = -1;
-    let lastAgentLen = -1;
-    let lastStep = -1;
-    const start = performance.now();
-    const step = (now: number) => {
-      const elapsed = now - start;
-      if (elapsed >= RUN_ONCE_MS) {
-        setState(FINAL_STATE);
-        setAnimationDone(true);
-        return;
-      }
-      const next = computeState(elapsed);
-      if (
-        next.phase !== lastPhase ||
-        next.userTypedLen !== lastUserLen ||
-        next.agentTypedLen !== lastAgentLen ||
-        next.contentStep !== lastStep
-      ) {
-        lastPhase = next.phase;
-        lastUserLen = next.userTypedLen;
-        lastAgentLen = next.agentTypedLen;
-        lastStep = next.contentStep;
-        setState(next);
-      }
-      raf = requestAnimationFrame(step);
-    };
-    raf = requestAnimationFrame(step);
-    return () => cancelAnimationFrame(raf);
-  }, [inView, prefersReducedMotion, animationDone]);
-
-  const mobileScene: 'chat' | 'editor' =
-    state.phase === 'rest' ||
-    state.phase === 'user-typing' ||
-    state.phase === 'agent-status' ||
-    state.phase === 'tool-appear'
-      ? 'chat'
-      : 'editor';
-
-  return (
-    <div
-      ref={containerRef}
-      className="flex h-full w-full bg-[#fdfdfc] font-(family-name:--font-inter)"
-    >
-      {/* Two layout modes:
-          - <lg: single-pane slider — both panels sit side-by-side in a 200%-wide
-            track that translates between scenes (one visible at a time, full size).
-          - lg+: both panels side-by-side, filling the card. */}
-      <div className="relative h-full w-full overflow-hidden">
-        <div
-          className={cn(
-            'flex h-full w-[200%]',
-            prefersReducedMotion ? '' : 'transition-transform duration-500 ease-out',
-            mobileScene === 'editor' ? '-translate-x-1/2' : 'translate-x-0',
-            'lg:grid lg:h-full lg:w-full lg:flex-none lg:grid-cols-[minmax(0,1fr)_minmax(0,1.55fr)] lg:grid-rows-1',
-            'lg:translate-x-0 lg:transition-none',
-          )}
-        >
-          {/* Chat cell — one chat panel per agent, stacked and cross-faded. All
-              share the single animation state; only the active agent's branding
-              is visible, so switching agents just cross-fades the chat. */}
-          <div className="relative h-full w-1/2 shrink-0 lg:w-auto">
-            {AGENT_IDS.map((id) => {
-              const meta = AGENT_META[id];
-              return (
-                <div
-                  key={id}
-                  aria-hidden={activeAgentId !== id}
-                  className={cn(
-                    'absolute inset-0 transition-opacity duration-500 ease-out',
-                    activeAgentId === id ? 'opacity-100' : 'pointer-events-none opacity-0',
-                  )}
-                >
-                  <ChatPanel
-                    AgentIcon={meta.Icon}
-                    brandColor={meta.brandColor}
-                    agentLabel={meta.label}
-                    phase={state.phase}
-                    userTypedLen={state.userTypedLen}
-                    agentTypedLen={state.agentTypedLen}
-                  />
-                </div>
-              );
-            })}
-          </div>
-          <div className="flex h-full w-1/2 shrink-0 flex-col lg:block lg:w-auto lg:p-2">
-            <EditorPanel
-              contentStep={state.contentStep}
-              AgentIcon={activeAgent.Icon}
-              brandColor={activeAgent.brandColor}
-              agentLabel={activeAgent.label}
-              animationDone={animationDone}
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-/* ---------------------------------------------------------------------------
- * Window chrome
- * --------------------------------------------------------------------------- */
-
-function TrafficLights() {
-  return (
-    <div className="flex shrink-0 items-center gap-1.5" aria-hidden="true">
-      <span className="size-[11px] rounded-full bg-[#ff5f57]" />
-      <span className="size-[11px] rounded-full bg-[#febc2e]" />
-      <span className="size-[11px] rounded-full bg-[#28c840]" />
-    </div>
-  );
-}
-
-/* ---------------------------------------------------------------------------
- * Chat panel (left)
- * --------------------------------------------------------------------------- */
-
-function ChatPanel({
-  AgentIcon,
-  brandColor,
-  agentLabel,
-  phase,
-  userTypedLen,
-  agentTypedLen,
-}: {
-  AgentIcon: typeof ClaudeIcon;
-  brandColor: string | undefined;
-  agentLabel: string;
-  phase: Phase;
-  userTypedLen: number;
-  agentTypedLen: number;
-}) {
-  const scrollRef = useRef<HTMLDivElement>(null);
-  const userTyped = USER_MESSAGE.slice(0, userTypedLen);
-  const userRest = USER_MESSAGE.slice(userTypedLen);
-  const agentTyped = AGENT_STATUS.slice(0, agentTypedLen);
-  const agentRest = AGENT_STATUS.slice(agentTypedLen);
-
-  const showUserBubble = userTypedLen > 0;
-  const showUserCaret = phase === 'user-typing';
-  const showAgentLine =
-    phase === 'agent-status' ||
-    phase === 'tool-appear' ||
-    phase === 'tool-filling' ||
-    phase === 'tool-done' ||
-    phase === 'hold';
-  const showAgentCaret = phase === 'agent-status';
-  const showToolCall =
-    phase === 'tool-appear' ||
-    phase === 'tool-filling' ||
-    phase === 'tool-done' ||
-    phase === 'hold';
-  const showFollowUp = phase === 'tool-done' || phase === 'hold';
-  const isResetting = phase === 'reset';
-
-  useEffect(() => {
-    if (phase === 'reset') return;
-    const el = scrollRef.current;
-    if (!el) return;
-    const scroll = () => {
-      const top = phase === 'rest' ? 0 : el.scrollHeight;
-      el.scrollTo({ top, behavior: 'smooth' });
-    };
-    scroll();
-    const t = window.setTimeout(scroll, 350);
-    return () => window.clearTimeout(t);
-  }, [phase]);
-
-  return (
-    <div className="flex h-full min-h-0 flex-col border-b border-border lg:border-b-0">
-      {/* Chat sub-header — traffic lights + agent label, only on this side */}
-      <div className="flex shrink-0 items-center gap-6 px-4 py-3">
-        <TrafficLights />
-        <div className="flex items-center gap-1.5 text-[12.5px] font-medium text-slide-muted">
-          <AgentIcon className="size-4" aria-hidden="true" style={{ color: brandColor }} />
-          <span>{agentLabel}</span>
-        </div>
-      </div>
-      <div
-        ref={scrollRef}
-        className="flex min-h-0 flex-1 flex-col gap-3 overflow-y-hidden px-4 pt-1 pb-3 text-left"
-      >
-        {/* User bubble */}
-        <div
-          className="flex justify-end transition-opacity duration-300"
-          style={{ opacity: isResetting ? 0 : showUserBubble ? 1 : 0 }}
-          aria-hidden={!showUserBubble}
-        >
-          <div className="max-w-[88%] rounded-2xl rounded-br-sm bg-slide-text/[0.05] px-3 py-2 text-left text-sm leading-snug text-slide-text mb-4">
-            <span>{userTyped}</span>
-            {showUserCaret && (
-              <span
-                className="ml-px inline-block h-[0.9em] w-[1.5px] translate-y-[1px] motion-safe:animate-pulse bg-slide-text/60 align-middle"
-                aria-hidden="true"
-              />
-            )}
-            <span aria-hidden="true" className="invisible">
-              {userRest}
-            </span>
-          </div>
-        </div>
-
-        {/* Agent status line — fades in at Beat 2 */}
-        <div
-          className="flex items-start gap-2 transition-opacity duration-300"
-          style={{ opacity: isResetting ? 0 : showAgentLine ? 1 : 0 }}
-          aria-hidden={!showAgentLine}
-        >
-          <AgentIcon
-            className="mt-[3px] size-4 shrink-0"
-            aria-hidden="true"
-            style={{ color: brandColor }}
-          />
-          <div className="text-sm leading-snug text-slide-text">
-            <span>{agentTyped}</span>
-            {showAgentCaret && (
-              <span
-                className="ml-px inline-block h-[0.9em] w-[1.5px] translate-y-[1px] motion-safe:animate-pulse bg-slide-text/60 align-middle"
-                aria-hidden="true"
-              />
-            )}
-            <span aria-hidden="true" className="invisible">
-              {agentRest}
-            </span>
-          </div>
-        </div>
-
-        <ToolCallCard phase={phase} visible={showToolCall} isResetting={isResetting} />
-
-        {/* Agent follow-up message after the tool call lands */}
-        <div
-          className="flex items-start gap-2 transition-opacity duration-300"
-          style={{ opacity: isResetting ? 0 : showFollowUp ? 1 : 0 }}
-          aria-hidden={!showFollowUp}
-        >
-          <AgentIcon
-            className="mt-[3px] size-4 shrink-0"
-            aria-hidden="true"
-            style={{ color: brandColor }}
-          />
-          <div className="text-sm leading-snug text-slide-text">
-            Updated <span className="text-primary">{DOC_PATH}.md</span> — added a "Highlights"
-            section with three wins and the daily activity chart.
-          </div>
-        </div>
-      </div>
-
-      {/* Mock chat input — pinned below the scrolling messages region */}
-      <div className="shrink-0 px-4 pt-2 pb-4">
-        <div className="flex items-center gap-2 rounded-xl bg-slide-bg-elevated px-3 py-2 shadow-[0_1px_2px_rgba(15,23,42,0.04),0_2px_6px_-2px_rgba(15,23,42,0.06)]">
-          <span className="flex-1 text-left text-sm text-slide-muted/60">Ask anything</span>
-          <span className="flex size-5 items-center justify-center rounded-full" aria-hidden="true">
-            <ArrowUp className="size-3.5 text-slide-muted opacity-60" strokeWidth={2.5} />
-          </span>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-function ToolCallCard({
-  phase,
-  visible,
-  isResetting,
-}: {
-  phase: Phase;
-  visible: boolean;
-  isResetting: boolean;
-}) {
-  const isPending = phase === 'tool-appear' || phase === 'tool-filling';
-  const isDone = phase === 'tool-done' || phase === 'hold';
-  const cardOpacity = isResetting ? 0 : !visible ? 0 : phase === 'tool-appear' ? 0.85 : 1;
-
-  return (
-    <div
-      className="flex flex-col gap-1.5 rounded-xl border px-3 py-2 text-left transition-[opacity,transform] duration-300 ease-out"
-      style={{
-        opacity: cardOpacity,
-        transform: phase === 'tool-appear' ? 'translateY(4px)' : 'translateY(0)',
-      }}
-      aria-hidden={!visible}
-    >
-      <div className="flex items-center justify-between gap-2">
-        <div className="flex min-w-0 items-center gap-1.5 font-mono text-[12px] text-slide-muted">
-          <span className="truncate text-slide-text/70">{TOOL_NAME}</span>
-        </div>
-        {/* Badge sizes to content — the right edge is pinned by the parent's
-            justify-between so the tool name's left edge is stable. */}
-        {isPending ? (
-          <span className="inline-flex shrink-0 items-center gap-1 font-mono text-[11px] uppercase tracking-wide text-slide-muted">
-            <Loader2 className="size-3 animate-spin" aria-hidden="true" />
-            Calling
-          </span>
-        ) : (
-          <span className="inline-flex shrink-0 items-center gap-1 font-mono text-[11px] uppercase tracking-wide text-emerald-600 dark:text-emerald-400">
-            <Check className="size-3" aria-hidden="true" />
-            Done
-          </span>
-        )}
-      </div>
-      {/* Line 2 — reserved at zero opacity during pending so the card doesn't jump */}
-      <div
-        className="flex flex-col gap-1 text-[12px] leading-snug text-slide-muted transition-opacity duration-300"
-        style={{ opacity: isDone ? 1 : 0 }}
-        aria-hidden={!isDone}
-      >
-        <span className="font-mono text-slide-text/70">{DOC_PATH}.md</span>
-        <span className="text-1sm">{TOOL_SUMMARY}</span>
-      </div>
-    </div>
-  );
-}
-
-/* ---------------------------------------------------------------------------
- * Editor panel (right) — OpenKnowledge editor
- * --------------------------------------------------------------------------- */
-
-function EditorPanel({
-  contentStep,
-  AgentIcon,
-  brandColor,
-  agentLabel,
-  animationDone,
-}: {
-  contentStep: number;
-  AgentIcon: typeof ClaudeIcon;
-  brandColor: string | undefined;
-  agentLabel: string;
-  animationDone: boolean;
-}) {
-  return (
-    <OkEditorProvider
-      initialMarkdown={heroRevealMarkdown(contentStep)}
-      frontmatter={HERO_FRONTMATTER_YAML}
-    >
-      <div className="flex h-full min-h-0 flex-col bg-slide-bg-elevated lg:overflow-hidden lg:rounded-lg lg:shadow-[0_0px_48px_-16px_rgba(35,31,32,0.18)]">
-        {/* Editor sub-header — row 1: URL bar; row 2: mode toggle + presence avatar */}
-        <div className="relative flex shrink-0 flex-col gap-3 px-4 py-3 text-left">
-          <div className="flex items-center gap-2 rounded-md bg-slide-text/[0.04] px-3 py-1.5 text-[11.5px] text-slide-muted">
-            <Globe className="size-3.5 shrink-0 opacity-50" aria-hidden="true" />
-            <span className="truncate">https://openknowledge.ai/{DOC_PATH}</span>
-          </div>
-          <div className="grid grid-cols-[1fr_auto_1fr] items-center gap-3">
-            <span className="flex items-center gap-1.5 truncate text-[11px] text-slide-muted">
-              {/* Icon-only on small screens; the full wordmark lockup on large. */}
-              <OkIcon className="size-[24px] shrink-0 lg:hidden" aria-hidden="true" />
-              <OkWordmark
-                aria-label="OpenKnowledge"
-                className="hidden h-[24px] w-auto shrink-0 lg:block"
-              />
-            </span>
-            <div className="justify-self-center">
-              {animationDone ? <OkEditorModeToggle /> : <ModeTogglePreview />}
-            </div>
-            <div className="flex justify-self-end">
-              <div
-                className="flex size-6 items-center justify-center rounded-full"
-                style={{
-                  backgroundColor: brandColor
-                    ? `color-mix(in srgb, ${brandColor} 18%, transparent)`
-                    : undefined,
-                }}
-                title={`${agentLabel} is editing`}
-              >
-                <AgentIcon className="size-3.5" aria-hidden="true" style={{ color: brandColor }} />
-              </div>
-            </div>
-          </div>
-          {/* Fade beneath the header so document content scrolls in softly. */}
-          <div
-            aria-hidden="true"
-            className="pointer-events-none absolute inset-x-0 top-full z-10 h-3 bg-linear-to-b from-slide-bg-elevated to-transparent"
-          />
-        </div>
-
-        <div
-          data-revealing={animationDone ? undefined : 'true'}
-          className="flex min-h-0 flex-1 flex-col gap-5 overflow-y-auto px-6 pt-1 pb-4 text-left subtle-scrollbar"
-        >
-          <FrontmatterPanel />
-
-          <OkEditorBody />
-          <HeroEditorReveal step={contentStep} live={animationDone} />
-        </div>
-
-        {/* Word-count footer — pinned below the scrolling document body */}
-        <div className="relative flex shrink-0 items-center justify-between bg-slide-bg-elevated px-6 py-2 font-mono text-[11px] text-slide-muted tabular-nums">
-          {/* Fade above the footer so document content dissolves into it. */}
-          <div
-            aria-hidden="true"
-            className="pointer-events-none absolute inset-x-0 bottom-full h-3 bg-linear-to-t from-slide-bg-elevated to-transparent"
-          />
-          <span className="flex items-center gap-1">
-            <GitBranch size={11} /> main
-          </span>
-          {/* Invisible placeholder pins a min width; live stats overlay it. */}
-          <span className="relative inline-grid">
-            <span className="invisible col-start-1 row-start-1" aria-hidden="true">
-              76 words · 385 chars · ~97 tokens
-            </span>
-            <HeroEditorStats />
-          </span>
-        </div>
-      </div>
-    </OkEditorProvider>
-  );
-}
-
-function HeroEditorReveal({ step, live }: { step: number; live: boolean }) {
-  const { editor } = useOkEditor();
-  const appliedStep = useRef(step);
-  useEffect(() => {
-    if (!editor) return;
-    if (appliedStep.current !== step) {
-      appliedStep.current = step;
-      const json = parseEditorMarkdown(heroRevealMarkdown(step));
-      queueMicrotask(() => {
-        if (!editor.isDestroyed) editor.commands.setContent(json);
-      });
-    }
-    editor.setEditable(live);
-  }, [editor, step, live]);
-  return null;
-}
-
-function HeroEditorStats() {
-  const { words, chars, tokens } = useEditorDocStats();
-  return (
-    <span className="col-start-1 row-start-1">
-      {words} words · {chars} chars · ~{tokens} tokens
-    </span>
-  );
-}
-
-function PropertyRow({ label, value }: { label: string; value: React.ReactNode }) {
-  return (
-    <div className="flex items-baseline gap-2">
-      <span className="w-12 shrink-0 text-slide-muted/70">{label}</span>
-      <span className="text-slide-text">{value}</span>
-    </div>
-  );
-}
-
-function FrontmatterPanel() {
-  const { mode } = useOkEditor();
-  if (mode === 'source') return null;
-  return (
-    <div className="flex flex-col gap-2.5 pl-6 text-1sm">
-      <PropertyRow label="title" value={HERO_FRONTMATTER.title} />
-      <PropertyRow
-        label="tags"
-        value={
-          <span className="inline-flex flex-wrap gap-1.5">
-            {HERO_FRONTMATTER.tags.map((t) => (
-              <span
-                key={t}
-                className="rounded-full bg-slide-accent/10 px-2 py-[2px] text-xs font-medium text-slide-accent"
-              >
-                #{t}
-              </span>
-            ))}
-          </span>
-        }
-      />
-    </div>
-  );
-}
-
-/* ---------------------------------------------------------------------------
- * ModeTogglePreview — static mirror of the editor's Visual/Markdown toggle.
- * Mirrors the real ToggleGroup with variant="segmented" size="sm". Pinned to Visual.
- * --------------------------------------------------------------------------- */
-
-function ModeTogglePreview() {
-  return (
-    <div
-      className="inline-flex shrink-0 items-center gap-0.5 rounded-[8px] p-0.5"
-      style={{ backgroundColor: 'color-mix(in srgb, var(--slide-text) 5%, transparent)' }}
-    >
-      <span
-        className="flex h-6 items-center gap-1 rounded-[6px] px-1.5 font-mono text-[10px] font-medium uppercase tracking-wide"
-        style={{
-          color: 'var(--slide-text)',
-          backgroundColor: 'var(--slide-bg-elevated)',
-          boxShadow: '0 1px 2px rgba(0,0,0,0.06)',
-        }}
-      >
-        <TextboxIcon className="size-3 shrink-0" />
-        Visual
-      </span>
-      <span className="flex h-6 items-center gap-1 rounded-[6px] px-1.5 font-mono text-[10px] font-medium uppercase tracking-wide text-slide-muted">
-        <MarkdownIcon className="size-3 shrink-0" />
-        Markdown
-      </span>
-    </div>
-  );
-}
-
-function TextboxIcon({ className }: { className?: string }) {
-  return (
-    <svg className={className} viewBox="0 0 256 256" fill="currentColor" aria-hidden="true">
-      <path d="M112,40a8,8,0,0,0-8,8V64H24A16,16,0,0,0,8,80v96a16,16,0,0,0,16,16h80v16a8,8,0,0,0,16,0V48A8,8,0,0,0,112,40ZM24,176V80h80v96ZM248,80v96a16,16,0,0,1-16,16H144a8,8,0,0,1,0-16h88V80H144a8,8,0,0,1,0-16h88A16,16,0,0,1,248,80ZM88,112a8,8,0,0,1-8,8H72v24a8,8,0,0,1-16,0V120H48a8,8,0,0,1,0-16H80A8,8,0,0,1,88,112Z" />
-    </svg>
-  );
-}
-
-function MarkdownIcon({ className }: { className?: string }) {
-  return (
-    <svg className={className} viewBox="0 0 256 256" fill="currentColor" aria-hidden="true">
-      <path d="M232,48H24A16,16,0,0,0,8,64V192a16,16,0,0,0,16,16H232a16,16,0,0,0,16-16V64A16,16,0,0,0,232,48Zm0,144H24V64H232V192ZM128,104v48a8,8,0,0,1-16,0V123.31L93.66,141.66a8,8,0,0,1-11.32,0L64,123.31V152a8,8,0,0,1-16,0V104a8,8,0,0,1,13.66-5.66L88,124.69l26.34-26.35A8,8,0,0,1,128,104Zm77.66,18.34a8,8,0,0,1,0,11.32l-24,24a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L168,132.69V104a8,8,0,0,1,16,0v28.69l10.34-10.35A8,8,0,0,1,205.66,122.34Z" />
-    </svg>
-  );
-}
diff --git a/docs/src/app/(home)/sections/hero.tsx b/docs/src/app/(home)/sections/hero.tsx
deleted file mode 100644
index 466c176d5..000000000
--- a/docs/src/app/(home)/sections/hero.tsx
+++ /dev/null
@@ -1,136 +0,0 @@
-'use client';
-
-import Image from 'next/image';
-import Link from 'next/link';
-import { useState } from 'react';
-import { ClaudeIcon } from '@/components/icons/claude';
-import { CodexBrandIcon } from '@/components/icons/codex';
-import { CursorIcon } from '@/components/icons/cursor';
-import { DOWNLOAD_ROUTE, SITE_HEADLINE } from '@/lib/site';
-import { cn } from '@/lib/utils';
-import { DotTexture } from '../dot-texture';
-import { MarketingButton } from '../marketing-button';
-import { Section } from '../section';
-import SectionHeading from '../section-heading';
-import { HeroPreview, type HeroPreviewAgentId } from './hero-preview';
-
-const AGENTS = [
-  { id: 'claude', label: 'Claude', Icon: ClaudeIcon, brandColor: '#D97757' },
-  { id: 'cursor', label: 'Cursor', Icon: CursorIcon, brandColor: 'var(--slide-text)' },
-  { id: 'codex', label: 'Codex', Icon: CodexBrandIcon, brandColor: '#7A9DFF' },
-] as const satisfies ReadonlyArray<{
-  id: HeroPreviewAgentId;
-  label: string;
-  Icon: typeof ClaudeIcon;
-  brandColor: string | undefined;
-}>;
-
-type AgentId = (typeof AGENTS)[number]['id'];
-
-export function Hero() {
-  const [activeId, setActiveId] = useState<AgentId>('claude');
-
-  return (
-    <Section className="relative min-h-screen overflow-hidden">
-      <DotTexture variant="right" priority className="top-0 right-0 w-60 sm:w-[680px]" />
-      <DotTexture variant="left" className="bottom-0 left-0 w-40 sm:w-72 lg:w-[515px]" />
-      <div className="container relative z-10 mx-auto flex flex-col items-center text-center">
-        <SectionHeading
-          className="items-center"
-          tag="Open source"
-          headingClassName="sm:text-6xl text-5xl"
-          description="A rich text editor and knowledge base for you and your agents."
-        >
-          {SITE_HEADLINE}
-        </SectionHeading>
-
-        <div className="mt-6 flex items-center justify-center gap-4">
-          <MarketingButton
-            href={DOWNLOAD_ROUTE}
-            target="_blank"
-            size="md"
-            showIcon
-            iconDirection="down"
-          >
-            DOWNLOAD FOR MAC
-          </MarketingButton>
-          <Link
-            href="/docs/get-started/quickstart#ok-install-web-app-linux-windows-intel-mac"
-            className="font-mono text-sm text-slide-muted underline-offset-4 transition-colors hover:text-slide-text hover:underline"
-          >
-            More platforms
-          </Link>
-        </div>
-
-        <div className="mt-16 flex justify-center">
-          <div
-            className="inline-flex items-center gap-3 rounded-full border bg-slide-bg py-1.5 pr-1.5 pl-5"
-            id="hero-agent-label"
-          >
-            <span className="font-mono text-sm uppercase tracking-wide text-slide-muted">
-              Use with
-            </span>
-            <div
-              role="radiogroup"
-              aria-labelledby="hero-agent-label"
-              className="flex items-center gap-1"
-            >
-              {AGENTS.map(({ id, label, Icon, brandColor }) => (
-                // biome-ignore lint/a11y/useSemanticElements: chip is a button styled with icon+label; <input type="radio"> would force a visually-hidden input + label workaround for the same role.
-                <button
-                  key={id}
-                  type="button"
-                  role="radio"
-                  onClick={() => setActiveId(id)}
-                  aria-checked={activeId === id}
-                  className={cn(
-                    'inline-flex items-center gap-1.5 rounded-full px-3 py-1.5  text-sm font-semibold transition-colors',
-                    activeId === id
-                      ? 'bg-slide-bg-elevated text-slide-text shadow-sm ring-1 ring-slide-border/20'
-                      : 'text-slide-text/70 hover:text-slide-text',
-                  )}
-                >
-                  <Icon className="size-4" aria-hidden="true" style={{ color: brandColor }} />
-                  {label}
-                </button>
-              ))}
-            </div>
-          </div>
-        </div>
-
-        <div className="relative mt-4 w-full overflow-hidden rounded-[28px]">
-          <Image
-            src="/images/home/hero-box-background.webp"
-            alt=""
-            aria-hidden
-            fill
-            sizes="(min-width: 1024px) 80vw, 100vw"
-            priority
-            className="object-cover"
-          />
-          <div
-            className="relative z-10 flex h-[620px] w-full flex-col overflow-hidden rounded-[28px] border border-white/20 p-3 backdrop-blur-[20px] sm:p-4 lg:aspect-video lg:h-auto lg:p-5"
-            style={{
-              backgroundColor: 'rgba(255, 254, 254, 0.18)',
-              boxShadow: '6px 6px 24px rgba(153, 173, 205, 0.2)',
-            }}
-          >
-            {/* `flex-1 min-h-0` fills the card and hands a definite pixel height
-                down the editor's `h-full` chain — more robust than a percentage
-                chain (Safari in particular mishandles `height:100%` descendants of
-                some sized boxes). Single-pane (<lg) uses a fixed height so it stays
-                a consistent size rather than lurching as the container width snaps;
-                the lg two-pane reverts to `aspect-video` so the wide layout grows
-                taller with the screen instead of going wide-and-short. */}
-            <div className="relative min-h-0 w-full flex-1 overflow-hidden rounded-xl">
-              {/* One shared preview: the editor + intro animation are a single
-                  instance, so switching agents only cross-fades the chat panel —
-                  the intro never replays and editor edits persist. */}
-              <HeroPreview activeAgentId={activeId} />
-            </div>
-          </div>
-        </div>
-      </div>
-    </Section>
-  );
-}
diff --git a/docs/src/app/(home)/sections/knowledge-base-graphic.tsx b/docs/src/app/(home)/sections/knowledge-base-graphic.tsx
deleted file mode 100644
index 112feb5b4..000000000
--- a/docs/src/app/(home)/sections/knowledge-base-graphic.tsx
+++ /dev/null
@@ -1,248 +0,0 @@
-import { Sparkles } from 'lucide-react';
-import type { CSSProperties } from 'react';
-
-const RINGS = [56, 82, 108] as const;
-const RING_CENTER = { x: 80, y: 45 };
-
-const CARD_BG = 'var(--slide-bg-elevated)';
-const CARD_RADIUS = '3.6cqw';
-const BACK_SHADOW = '0 1px 2px rgba(15, 23, 42, 0.05), 0 6px 18px -8px rgba(15, 23, 42, 0.12)';
-const FRONT_SHADOW = '0 1px 3px rgba(15, 23, 42, 0.07), 0 16px 34px -10px rgba(15, 23, 42, 0.18)';
-const MUTED_FILL = 'color-mix(in srgb, var(--slide-muted) 14%, transparent)';
-
-type Avatar = { label?: string; agent?: boolean; bg: string; fg: string };
-
-const AVATARS: Avatar[] = [
-  { label: 'M', bg: '#f0ece3', fg: '#78716c' },
-  { label: 'J', bg: 'var(--color-orange-light)', fg: '#b45309' },
-  { agent: true, bg: 'var(--color-crystal-blue)', fg: 'var(--color-azure-blue)' },
-  { label: 'K', bg: 'var(--color-purple-light)', fg: '#6d28d9' },
-];
-
-function BackgroundRings() {
-  return (
-    <svg
-      className="absolute inset-0 h-full w-full"
-      viewBox="0 0 160 90"
-      preserveAspectRatio="xMidYMid slice"
-      aria-hidden="true"
-    >
-      {RINGS.map((r) => (
-        <circle
-          key={r}
-          cx={RING_CENTER.x}
-          cy={RING_CENTER.y}
-          r={r}
-          fill="none"
-          style={{ stroke: 'color-mix(in srgb, var(--slide-text) 10%, transparent)' }}
-          strokeWidth={1}
-          strokeDasharray="1.5 4"
-          vectorEffect="non-scaling-stroke"
-        />
-      ))}
-    </svg>
-  );
-}
-
-function CardSkeletonLine({ width, delay }: { width: string; delay: string }) {
-  return (
-    <div
-      className="relative overflow-hidden"
-      style={{ height: '2.1cqw', width, borderRadius: '9999px', backgroundColor: MUTED_FILL }}
-    >
-      <div
-        className="ok-kb-shimmer absolute inset-y-0"
-        style={{
-          width: '50%',
-          animationDelay: delay,
-          background:
-            'linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.7) 50%, transparent 100%)',
-        }}
-      />
-    </div>
-  );
-}
-
-function Avatars() {
-  return (
-    <div className="flex items-center">
-      {AVATARS.map((a, i) => (
-        <div
-          // biome-ignore lint/suspicious/noArrayIndexKey: static roster
-          key={i}
-          className="flex shrink-0 items-center justify-center rounded-full"
-          style={{
-            width: '5.8cqw',
-            height: '5.8cqw',
-            marginLeft: i === 0 ? 0 : '-1.7cqw',
-            backgroundColor: a.bg,
-            color: a.fg,
-            border: '0.5cqw solid var(--slide-bg-elevated)',
-            fontSize: '2.5cqw',
-            fontWeight: 600,
-          }}
-        >
-          {a.agent ? (
-            <Sparkles
-              style={{ width: '3.1cqw', height: '3.1cqw' }}
-              strokeWidth={2.2}
-              aria-hidden="true"
-            />
-          ) : (
-            a.label
-          )}
-        </div>
-      ))}
-    </div>
-  );
-}
-
-function BackCard({
-  title,
-  align,
-  style,
-}: {
-  title: string;
-  align: 'top' | 'bottom';
-  style: CSSProperties;
-}) {
-  return (
-    <div
-      className={`absolute flex flex-col overflow-hidden ${align === 'bottom' ? 'justify-end' : 'justify-start'}`}
-      style={style}
-    >
-      <div
-        style={{
-          padding: '4.5cqw',
-          fontSize: '3.2cqw',
-          fontWeight: 600,
-          color:
-            align === 'bottom'
-              ? 'color-mix(in srgb, var(--slide-text) 55%, transparent)'
-              : 'var(--slide-muted)',
-        }}
-      >
-        {title}
-      </div>
-    </div>
-  );
-}
-
-export function KnowledgeBaseGraphic() {
-  return (
-    <div className="@container relative h-full w-full overflow-hidden" aria-hidden="true">
-      <style>{`
-        @keyframes ok-kb-shimmer {
-          0% { transform: translateX(-160%); }
-          45% { transform: translateX(360%); }
-          100% { transform: translateX(360%); }
-        }
-        .ok-kb-shimmer { animation: ok-kb-shimmer 5.5s ease-in-out infinite; }
-        @media (prefers-reduced-motion: reduce) {
-          .ok-kb-shimmer { animation: none !important; }
-        }
-      `}</style>
-
-      <BackgroundRings />
-
-      <BackCard
-        title="Oncall guide"
-        align="top"
-        style={{
-          left: '30%',
-          top: '-8%',
-          width: '50%',
-          height: '30%',
-          transform: 'rotate(-3.5deg)',
-          backgroundColor: CARD_BG,
-          borderRadius: CARD_RADIUS,
-          boxShadow: BACK_SHADOW,
-        }}
-      />
-
-      <BackCard
-        title="Incident postmortem"
-        align="bottom"
-        style={{
-          left: '15%',
-          top: '74%',
-          width: '50%',
-          height: '30%',
-          transform: 'rotate(3.2deg)',
-          backgroundColor: CARD_BG,
-          borderRadius: CARD_RADIUS,
-          boxShadow: BACK_SHADOW,
-        }}
-      />
-
-      <div
-        className="absolute flex flex-col overflow-hidden"
-        style={{
-          left: '22%',
-          top: '11%',
-          width: '56%',
-          height: '78%',
-          padding: '4.5cqw',
-          transform: 'rotate(-1.2deg)',
-          backgroundColor: CARD_BG,
-          borderRadius: CARD_RADIUS,
-          boxShadow: FRONT_SHADOW,
-        }}
-      >
-        <div
-          style={{
-            fontSize: '2.2cqw',
-            fontWeight: 600,
-            letterSpacing: '0.22em',
-            color: 'var(--slide-muted)',
-          }}
-        >
-          DOCS
-        </div>
-        <div
-          style={{
-            marginTop: '1.8cqw',
-            fontSize: '5.6cqw',
-            fontWeight: 600,
-            lineHeight: 1.05,
-            letterSpacing: '-0.02em',
-            color: 'color-mix(in srgb, var(--slide-text) 88%, transparent)',
-          }}
-        >
-          Deploy runbook
-        </div>
-        <div style={{ marginTop: '1.4cqw', fontSize: '2.7cqw', color: 'var(--slide-muted)' }}>
-          Updated 2 hours ago
-        </div>
-
-        <div className="flex flex-col" style={{ marginTop: '3.4cqw', gap: '2.1cqw' }}>
-          <CardSkeletonLine width="100%" delay="0s" />
-          <CardSkeletonLine width="62%" delay="0.7s" />
-        </div>
-
-        <div className="flex-1" />
-
-        <div
-          style={{
-            height: '1px',
-            width: '100%',
-            backgroundColor: 'color-mix(in srgb, var(--slide-text) 8%, transparent)',
-          }}
-        />
-        <div className="flex items-center" style={{ marginTop: '3cqw' }}>
-          <Avatars />
-          <span
-            style={{
-              marginLeft: '2cqw',
-              fontSize: '2.2cqw',
-              whiteSpace: 'nowrap',
-              color: 'var(--slide-muted)',
-            }}
-          >
-            Kept current by 12 people
-          </span>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/docs/src/app/(home)/sections/made-for-agents-preview.tsx b/docs/src/app/(home)/sections/made-for-agents-preview.tsx
deleted file mode 100644
index affdb1864..000000000
--- a/docs/src/app/(home)/sections/made-for-agents-preview.tsx
+++ /dev/null
@@ -1,303 +0,0 @@
-'use client';
-
-import { Check, Loader2, Undo2 } from 'lucide-react';
-import { useEffect, useState } from 'react';
-import { ClaudeIcon } from '@/components/icons/claude';
-import { useIsInView } from '@/lib/use-is-in-view';
-import { usePrefersReducedMotion } from '@/lib/use-prefers-reduced-motion';
-
-const CLAUDE_MESSAGE = "I'll capture this as a decision doc.";
-const DONE_INTRO = 'Done — edit landed:';
-const DONE_PATH = 'decisions/api-strategy.md';
-const DONE_SUMMARY = 'Capture API choice decision.';
-
-const TOOL_PARAMS: ReadonlyArray<{ label: string; value: string }> = [
-  { label: 'docName', value: 'decisions/api-strategy' },
-  { label: 'position', value: 'replace' },
-  { label: 'summary', value: 'Capture API choice decision' },
-];
-
-type TimelineEntry = {
-  writer: string;
-  timeAgo: string;
-  summary: string;
-  path: string;
-};
-
-const NEW_ENTRY: TimelineEntry = {
-  writer: 'claude-code',
-  timeAgo: 'just now',
-  summary: 'Capture API choice decision',
-  path: 'decisions/api-strategy',
-};
-
-const PRIOR_ENTRIES: ReadonlyArray<TimelineEntry> = [
-  {
-    writer: 'claude-code',
-    timeAgo: '18 min ago',
-    summary: 'Add migration runbook section',
-    path: 'runbooks/db-migrations',
-  },
-  {
-    writer: 'claude-code',
-    timeAgo: '1 hr ago',
-    summary: 'Sync standup notes',
-    path: 'team/standup-notes',
-  },
-];
-
-const STEPS = {
-  claudeMessage: 300,
-  toolCard: 900,
-  param0: 1200,
-  param1: 1400,
-  param2: 1600,
-  calling: 2250,
-  done: 2750,
-  doneIntro: 3050,
-  doneEntry: 3300,
-  chatHoldEnd: 4500,
-
-  timelineIn: 4700,
-
-  newEntryIn: 5500,
-  newEntryHighlightEnd: 6500,
-
-  fadeOut: 8200,
-  cycleEnd: 8800,
-} as const;
-
-const REVEAL_EASE = 'cubic-bezier(0.16, 1, 0.3, 1)';
-const REVEAL_MS = 480;
-const SCENE_MS = 520;
-
-function revealStyle(visible: boolean) {
-  return {
-    opacity: visible ? 1 : 0,
-    transform: visible ? 'translateY(0)' : 'translateY(6px)',
-    transition: `opacity ${REVEAL_MS}ms ${REVEAL_EASE}, transform ${REVEAL_MS}ms ${REVEAL_EASE}`,
-  } as const;
-}
-
-function dropInStyle(visible: boolean) {
-  return {
-    opacity: visible ? 1 : 0,
-    transform: visible ? 'translateY(0)' : 'translateY(-10px)',
-    transition: `opacity ${REVEAL_MS}ms ${REVEAL_EASE}, transform ${REVEAL_MS}ms ${REVEAL_EASE}`,
-  } as const;
-}
-
-function DropInNewEntry({ highlighted }: { highlighted: boolean }) {
-  const [mounted, setMounted] = useState(false);
-  useEffect(() => {
-    const raf = requestAnimationFrame(() => setMounted(true));
-    return () => cancelAnimationFrame(raf);
-  }, []);
-  return (
-    <div style={dropInStyle(mounted)}>
-      <TimelineEntryRow entry={NEW_ENTRY} highlighted={highlighted} />
-    </div>
-  );
-}
-
-function TimelineEntryRow({
-  entry,
-  highlighted = false,
-}: {
-  entry: TimelineEntry;
-  highlighted?: boolean;
-}) {
-  return (
-    <div
-      className="rounded-lg border p-2 @[320px]:p-3"
-      style={{
-        borderColor: highlighted
-          ? 'color-mix(in srgb, var(--slide-accent) 55%, transparent)'
-          : 'color-mix(in srgb, var(--slide-text) 10%, transparent)',
-        backgroundColor: highlighted
-          ? 'color-mix(in srgb, var(--slide-accent) 5%, transparent)'
-          : 'transparent',
-        boxShadow: highlighted
-          ? '0 8px 22px -10px color-mix(in srgb, var(--slide-accent) 35%, transparent)'
-          : 'none',
-        transition: `border-color 700ms ${REVEAL_EASE}, background-color 700ms ${REVEAL_EASE}, box-shadow 700ms ${REVEAL_EASE}`,
-      }}
-    >
-      <div className="flex items-center gap-2">
-        <ClaudeIcon className="size-3.5 shrink-0" aria-hidden="true" style={{ color: '#D97757' }} />
-        <span className="text-[12px] font-medium text-slide-text">{entry.writer}</span>
-        <span className="ml-auto inline-flex items-center gap-2 text-[10px] text-slide-muted">
-          {entry.timeAgo}
-          <span className="h-3 w-px bg-slide-muted/30" aria-hidden="true" />
-          <Undo2 className="size-3" aria-hidden="true" />
-        </span>
-      </div>
-      <div className="mt-1 flex flex-col gap-0.5 pl-[22px] @[320px]:mt-1.5">
-        <div className="text-[12px] text-slide-text/90">• {entry.summary}</div>
-        <div className="font-mono text-[10px] text-slide-muted/80">{entry.path}</div>
-      </div>
-    </div>
-  );
-}
-
-export function MadeForAgentsPreview() {
-  const [elapsed, setElapsed] = useState(0);
-  const [containerRef, inView] = useIsInView<HTMLDivElement>();
-  const prefersReducedMotion = usePrefersReducedMotion();
-
-  useEffect(() => {
-    if (prefersReducedMotion) {
-      setElapsed(STEPS.newEntryIn + 600);
-      return;
-    }
-    if (!inView) return;
-    let raf = 0;
-    const start = performance.now();
-    const step = (now: number) => {
-      setElapsed((now - start) % STEPS.cycleEnd);
-      raf = requestAnimationFrame(step);
-    };
-    raf = requestAnimationFrame(step);
-    return () => cancelAnimationFrame(raf);
-  }, [inView, prefersReducedMotion]);
-
-  const beforeFadeOut = elapsed < STEPS.fadeOut;
-  const inChatPhase = elapsed < STEPS.timelineIn;
-  const inTimelinePhase = elapsed >= STEPS.timelineIn && beforeFadeOut;
-
-  const showChat = inChatPhase && beforeFadeOut;
-  const showTimeline = inTimelinePhase;
-
-  const showClaude = elapsed >= STEPS.claudeMessage && inChatPhase;
-  const showTool = elapsed >= STEPS.toolCard && inChatPhase;
-  const paramVisible = [
-    elapsed >= STEPS.param0 && inChatPhase,
-    elapsed >= STEPS.param1 && inChatPhase,
-    elapsed >= STEPS.param2 && inChatPhase,
-  ] as const;
-  const showCalling = elapsed >= STEPS.calling && elapsed < STEPS.done;
-  const showDone = elapsed >= STEPS.done && inChatPhase;
-  const showDoneIntro = elapsed >= STEPS.doneIntro && inChatPhase;
-  const showDoneEntry = elapsed >= STEPS.doneEntry && inChatPhase;
-
-  const showNewEntry = elapsed >= STEPS.newEntryIn && inTimelinePhase;
-  const newEntryHighlighted = elapsed >= STEPS.newEntryIn && elapsed < STEPS.newEntryHighlightEnd;
-
-  return (
-    <div
-      ref={containerRef}
-      className="@container relative grid h-full w-full overflow-hidden rounded-xl bg-slide-bg-elevated"
-      style={{ gridTemplateAreas: '"scene"' }}
-    >
-      <div
-        aria-hidden={!showChat}
-        className="flex flex-col gap-2 p-3 @[320px]:gap-4 @[320px]:p-4 @sm:gap-5 @sm:p-5 @md:gap-6 @md:p-6"
-        style={{
-          gridArea: 'scene',
-          opacity: showChat ? 1 : 0,
-          transform: showChat ? 'translateX(0)' : 'translateX(-14px)',
-          transition: `opacity ${SCENE_MS}ms ${REVEAL_EASE}, transform ${SCENE_MS}ms ${REVEAL_EASE}`,
-          pointerEvents: showChat ? 'auto' : 'none',
-        }}
-      >
-        <div className="flex items-center gap-2">
-          <ClaudeIcon className="size-4" aria-hidden="true" style={{ color: '#D97757' }} />
-          <span className="text-sm font-medium text-slide-text">Claude</span>
-        </div>
-
-        <div style={revealStyle(showClaude)}>
-          <p className="text-[13px] leading-relaxed text-slide-muted">{CLAUDE_MESSAGE}</p>
-        </div>
-
-        <div
-          style={revealStyle(showTool)}
-          className="overflow-hidden rounded-lg border border-slide-text/10"
-        >
-          <div className="flex items-center justify-between border-b border-slide-text/10 px-3 py-2">
-            <div className="flex items-center gap-1.5 font-mono text-[11px]">
-              <span className="text-slide-muted">Used</span>
-              <span className="text-slide-text">open-knowledge:</span>
-              <span className="text-primary">write</span>
-            </div>
-            <span className="relative inline-flex h-4 min-w-[64px] items-center justify-end font-mono text-[10px] uppercase tracking-wide">
-              <span
-                className="absolute right-0 inline-flex items-center gap-1.5 text-slide-muted"
-                style={{
-                  opacity: showCalling ? 1 : 0,
-                  transition: `opacity 240ms ${REVEAL_EASE}`,
-                }}
-              >
-                <Loader2 className="size-3 animate-spin" aria-hidden="true" />
-                Calling
-              </span>
-              <span
-                className="absolute right-0 inline-flex items-center gap-1.5 text-emerald-600 dark:text-emerald-400"
-                style={{
-                  opacity: showDone ? 1 : 0,
-                  transition: `opacity 240ms ${REVEAL_EASE}`,
-                }}
-              >
-                <Check className="size-3" aria-hidden="true" />
-                200 ok
-              </span>
-            </span>
-          </div>
-          <div className="flex flex-col gap-1 px-3 py-2.5 font-mono text-[11px]">
-            {TOOL_PARAMS.map((p, i) => (
-              <div
-                key={p.label}
-                className="flex items-center gap-1.5"
-                style={revealStyle(paramVisible[i] ?? false)}
-              >
-                <span className="text-slide-muted/70">{p.label}</span>
-                <span className="text-slide-muted/40">:</span>
-                <span className="text-slide-text">{p.value}</span>
-              </div>
-            ))}
-          </div>
-        </div>
-
-        <div className="flex flex-col gap-1.5">
-          <p
-            className="text-[13px] leading-relaxed text-slide-muted"
-            style={revealStyle(showDoneIntro)}
-          >
-            {DONE_INTRO}
-          </p>
-          <div
-            className="flex flex-wrap items-baseline gap-x-1.5 text-[13px] leading-relaxed"
-            style={revealStyle(showDoneEntry)}
-          >
-            <span className="text-slide-muted">1.</span>
-            <span className="font-medium text-primary">{DONE_PATH}</span>
-            <span className="text-slide-muted/60">—</span>
-            <span className="text-slide-muted">{DONE_SUMMARY}</span>
-          </div>
-        </div>
-      </div>
-
-      <div
-        aria-hidden={!showTimeline}
-        className="flex flex-col gap-2 p-3 @[320px]:gap-3 @[320px]:p-4 @sm:p-5 @md:p-6"
-        style={{
-          gridArea: 'scene',
-          opacity: showTimeline ? 1 : 0,
-          transform: showTimeline ? 'translateX(0)' : 'translateX(14px)',
-          transition: `opacity ${SCENE_MS}ms ${REVEAL_EASE}, transform ${SCENE_MS}ms ${REVEAL_EASE}`,
-          pointerEvents: showTimeline ? 'auto' : 'none',
-        }}
-      >
-        <span className="font-mono text-[10px] uppercase tracking-[0.18em] text-slide-muted">
-          Timeline
-        </span>
-
-        <div className="flex flex-col gap-1.5 @[320px]:gap-2">
-          {showNewEntry && <DropInNewEntry highlighted={newEntryHighlighted} />}
-          {PRIOR_ENTRIES.map((entry) => (
-            <TimelineEntryRow key={entry.path} entry={entry} />
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/docs/src/app/(home)/sections/made-for-agents.tsx b/docs/src/app/(home)/sections/made-for-agents.tsx
deleted file mode 100644
index 38b9cdbe6..000000000
--- a/docs/src/app/(home)/sections/made-for-agents.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-import { Hexagon, type LucideIcon, Plug, Search } from 'lucide-react';
-import Image from 'next/image';
-import { EXAMPLE_KB_SHARE_URL } from '@/lib/site';
-import { MarketingButton } from '../marketing-button';
-import { Section } from '../section';
-import SectionHeading from '../section-heading';
-import { MadeForAgentsPreview } from './made-for-agents-preview';
-
-type Feature = {
-  icon: LucideIcon;
-  title: string;
-  description: string;
-};
-
-const features: Feature[] = [
-  {
-    icon: Hexagon,
-    title: 'Agent skills',
-    description: 'Agents know how to navigate, edit and grow your knowledge base out of the box.',
-  },
-  {
-    icon: Plug,
-    title: 'Native MCP',
-    description: 'Plug your knowledge base into Claude, Cursor, Codex, and other agents.',
-  },
-  {
-    icon: Search,
-    title: 'Agentic Search',
-    description: 'Help agents find the right content with embeddings and hierarchical RAG.',
-  },
-];
-
-function FeatureRow({ icon: Icon, title, description }: Feature) {
-  return (
-    <div className="grid grid-cols-[auto_1fr] items-center gap-x-3.5 gap-y-1 py-5">
-      <Icon className="size-5 text-primary" aria-hidden="true" />
-      <h3 className="text-lg font-semibold text-slide-text leading-snug">{title}</h3>
-      <p className="col-start-2 text-base leading-snug text-slide-muted">{description}</p>
-    </div>
-  );
-}
-
-export function MadeForAgents() {
-  return (
-    <Section className="container">
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 items-center">
-        <div className="relative w-full aspect-square overflow-hidden rounded-[28px]">
-          <Image
-            src="/images/home/pillar-2-gradient.webp"
-            alt=""
-            aria-hidden
-            fill
-            sizes="(min-width: 1024px) 50vw, 100vw"
-            className="object-cover"
-          />
-          <div
-            className="relative z-10 h-full w-full overflow-hidden rounded-[28px] border border-white/20 p-4 backdrop-blur-[20px] md:p-6 lg:p-8 xl:p-12"
-            style={{
-              backgroundColor: 'rgba(255, 254, 254, 0.18)',
-              boxShadow: '6px 6px 24px rgba(153, 173, 205, 0.2)',
-            }}
-          >
-            <div className="h-full w-full overflow-hidden rounded-xl">
-              <MadeForAgentsPreview />
-            </div>
-          </div>
-        </div>
-        <div className="flex flex-col gap-8">
-          <SectionHeading
-            tag="AI native"
-            description="Built-in tools for agents to co-author and understand your knowledge base."
-          >
-            Made for agents.
-          </SectionHeading>
-          <div className="flex flex-col divide-y border-y">
-            {features.map((feature) => (
-              <FeatureRow key={feature.title} {...feature} />
-            ))}
-          </div>
-          <div className="flex justify-start">
-            <MarketingButton href={EXAMPLE_KB_SHARE_URL} target="_blank" size="sm">
-              Try a template
-            </MarketingButton>
-          </div>
-        </div>
-      </div>
-    </Section>
-  );
-}
diff --git a/docs/src/app/(home)/sections/own-your-knowledge.tsx b/docs/src/app/(home)/sections/own-your-knowledge.tsx
deleted file mode 100644
index 0d75570bc..000000000
--- a/docs/src/app/(home)/sections/own-your-knowledge.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import { GitFork, Laptop, Puzzle } from 'lucide-react';
-import FeatureItem from '../feature-item';
-import { Section } from '../section';
-import SectionHeading from '../section-heading';
-
-const features = [
-  {
-    icon: Laptop,
-    title: 'Local-first',
-    description: 'Runs on your machine; private by design.',
-  },
-  {
-    icon: GitFork,
-    title: 'Open source',
-    description: 'Auditable, self-hostable, & community-built.',
-  },
-  {
-    icon: Puzzle,
-    title: 'Platform-agnostic',
-    description: 'Use with any agent and any tool.',
-  },
-];
-
-export function OwnYourKnowledge() {
-  return (
-    <Section className="container flex flex-col gap-12">
-      <SectionHeading
-        tag="Privacy first"
-        description="Local-first, open source, plain files you own."
-      >
-        Own your knowledge.
-      </SectionHeading>
-      <div className="grid grid-cols-1 gap-8 sm:grid-cols-3 sm:gap-12">
-        {features.map((feature) => (
-          <FeatureItem
-            key={feature.title}
-            icon={feature.icon}
-            title={feature.title}
-            description={feature.description}
-          />
-        ))}
-      </div>
-    </Section>
-  );
-}
diff --git a/docs/src/app/(home)/sections/put-it-to-work.tsx b/docs/src/app/(home)/sections/put-it-to-work.tsx
deleted file mode 100644
index 8217c2a52..000000000
--- a/docs/src/app/(home)/sections/put-it-to-work.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import type { ReactNode } from 'react';
-import { Section } from '../section';
-import SectionHeading from '../section-heading';
-import { AgentBrainGraphic } from './agent-brain-graphic';
-import { EngSpecsGraphic } from './eng-specs-graphic';
-import { KnowledgeBaseGraphic } from './knowledge-base-graphic';
-
-type UseCaseCard = {
-  visual: ReactNode;
-  title: string;
-  description: string;
-};
-
-const cards: UseCaseCard[] = [
-  {
-    visual: <AgentBrainGraphic />,
-    title: 'Agent brain',
-    description:
-      'A shared knowledge base your agents read from and write to — the persistent memory behind every session.',
-  },
-  {
-    visual: <KnowledgeBaseGraphic />,
-    title: 'Knowledge base',
-    description:
-      'A living wiki for you and your team — skills, docs, notes in plain markdown, kept automatically in sync.',
-  },
-  {
-    visual: <EngSpecsGraphic />,
-    title: 'Engineering specs',
-    description:
-      'Specs, PRDs, and roadmaps living next to the code, edited by humans and coding agents in the same loop.',
-  },
-];
-
-export function PutItToWork() {
-  return (
-    <Section className="container">
-      <SectionHeading tag="Use cases">Put it to work.</SectionHeading>
-      <div className="mt-16 grid grid-cols-1 gap-y-12 lg:grid-cols-3 lg:gap-8">
-        {cards.map((card) => (
-          <article key={card.title} className="flex flex-col gap-4">
-            <div className="relative aspect-video w-full overflow-hidden rounded-2xl bg-slide-bg">
-              {card.visual}
-            </div>
-            <div className="flex flex-col gap-1.5">
-              <h3 className="text-lg font-semibold text-slide-text leading-snug">{card.title}</h3>
-              <p className="text-base leading-snug text-slide-muted">{card.description}</p>
-            </div>
-          </article>
-        ))}
-      </div>
-    </Section>
-  );
-}
diff --git a/docs/src/app/(home)/sections/rich-editing.tsx b/docs/src/app/(home)/sections/rich-editing.tsx
deleted file mode 100644
index 3ecca360d..000000000
--- a/docs/src/app/(home)/sections/rich-editing.tsx
+++ /dev/null
@@ -1,625 +0,0 @@
-'use client';
-
-import {
-  BookOpen,
-  ChevronRight,
-  Code2,
-  Compass,
-  Image as ImageIcon,
-  Info,
-  LayoutPanelTop,
-  MessageSquareWarning,
-  Network,
-  PenLine,
-  Play,
-  Video as VideoIcon,
-  Workflow,
-} from 'lucide-react';
-import NextImage from 'next/image';
-import { useEffect, useRef, useState } from 'react';
-import { useIsInView } from '@/lib/use-is-in-view';
-import { usePrefersReducedMotion } from '@/lib/use-prefers-reduced-motion';
-import { cn } from '@/lib/utils';
-import { Section } from '../section';
-import SectionHeading from '../section-heading';
-
-function MockupCard({ children, className }: { children: React.ReactNode; className?: string }) {
-  return (
-    <div className={cn('rounded-2xl bg-slide-bg p-6 overflow-hidden', className)}>{children}</div>
-  );
-}
-
-function FeatureCard({
-  title,
-  description,
-  children,
-}: {
-  title: string;
-  description: string;
-  children: React.ReactNode;
-}) {
-  return (
-    <div className="flex flex-col gap-4 lg:grid lg:row-span-2 lg:grid-rows-subgrid">
-      <MockupCard className="lg:min-h-[260px] xl:min-h-[320px] flex items-center justify-center">
-        {children}
-      </MockupCard>
-      <div className="flex flex-col gap-1.5">
-        <h3 className="text-lg font-semibold text-slide-text leading-snug">{title}</h3>
-        <p className="text-base leading-snug text-slide-muted">{description}</p>
-      </div>
-    </div>
-  );
-}
-
-const BLOCK_CYCLE_MS = 2400;
-
-type BlockPreview = {
-  label: string;
-  description: string;
-  render: () => React.ReactNode;
-};
-
-const BLOCK_PREVIEWS: BlockPreview[] = [
-  {
-    label: 'Callout',
-    description: 'Highlight a tip, warning, or aside inline.',
-    render: () => (
-      <div className="relative rounded-md bg-slide-accent/8 py-1.5 pl-3.5 pr-2">
-        <span
-          aria-hidden="true"
-          className="absolute top-1.5 bottom-1.5 left-1.5 w-[2px] rounded-full bg-slide-accent"
-        />
-        <div className="flex items-center gap-1 text-[10.5px] font-medium text-slide-accent">
-          <Info className="size-3" />
-          Tip
-        </div>
-        <p className="mt-1 text-[9px] leading-snug text-slide-text">
-          Pin key context next to the section that needs it.
-        </p>
-      </div>
-    ),
-  },
-  {
-    label: 'Accordion',
-    description: 'Collapsible section with a clickable summary.',
-    render: () => (
-      <div className="overflow-hidden rounded-md border bg-slide-bg-elevated">
-        <div className="flex items-center gap-1.5 px-2 py-1.5">
-          <ChevronRight className="size-3 shrink-0 text-slide-muted" />
-          <span className="truncate text-[11px] font-semibold text-slide-text/70">
-            Click to expand
-          </span>
-        </div>
-      </div>
-    ),
-  },
-  {
-    label: 'Tabs',
-    description: 'Switch between content panes inline.',
-    render: () => (
-      <div className="overflow-hidden rounded-md border bg-slide-bg-elevated">
-        <div className="flex border-b">
-          <div className="-mb-px border-b-2 border-slide-accent px-2 py-1 text-[10px] font-semibold text-slide-text">
-            Setup
-          </div>
-          <div className="px-2 py-1 text-[10px] text-slide-muted">Run</div>
-          <div className="px-2 py-1 text-[10px] text-slide-muted">Ship</div>
-        </div>
-        <div className="px-2 py-1.5 text-[9px] text-slide-muted">Install deps and run init.</div>
-      </div>
-    ),
-  },
-  {
-    label: 'Mermaid',
-    description: 'Render flowcharts and diagrams from text.',
-    render: () => {
-      const NODE_FILL = 'color-mix(in srgb, var(--slide-accent) 10%, white)';
-      const NODE_STROKE = 'color-mix(in srgb, var(--slide-accent) 38%, white)';
-      const ARROW = 'color-mix(in srgb, var(--slide-accent) 45%, white)';
-      const TEXT = 'color-mix(in srgb, var(--slide-accent) 80%, black)';
-      return (
-        <div className="flex items-center justify-center rounded-md border border-slide-border/50 bg-slide-bg-elevated px-2 py-2.5">
-          <svg viewBox="0 0 142 26" className="w-full max-w-[150px]" aria-hidden="true">
-            <title>Flowchart preview</title>
-            {/* draft (rectangle) */}
-            <rect x="1" y="5" width="34" height="16" rx="3" fill={NODE_FILL} stroke={NODE_STROKE} />
-            <text
-              x="18"
-              y="13"
-              textAnchor="middle"
-              dominantBaseline="central"
-              fontSize="7"
-              fill={TEXT}
-              fontFamily="ui-sans-serif, system-ui, sans-serif"
-            >
-              draft
-            </text>
-            {/* arrow */}
-            <line x1="35" y1="13" x2="48" y2="13" stroke={ARROW} />
-            <polygon points="48,13 45,11 45,15" fill={ARROW} />
-            {/* review (diamond) */}
-            <polygon points="71,1 93,13 71,25 49,13" fill={NODE_FILL} stroke={NODE_STROKE} />
-            <text
-              x="71"
-              y="13"
-              textAnchor="middle"
-              dominantBaseline="central"
-              fontSize="7"
-              fill={TEXT}
-              fontFamily="ui-sans-serif, system-ui, sans-serif"
-            >
-              review
-            </text>
-            {/* arrow */}
-            <line x1="93" y1="13" x2="106" y2="13" stroke={ARROW} />
-            <polygon points="106,13 103,11 103,15" fill={ARROW} />
-            {/* ship (rectangle) */}
-            <rect
-              x="107"
-              y="5"
-              width="34"
-              height="16"
-              rx="3"
-              fill={NODE_FILL}
-              stroke={NODE_STROKE}
-            />
-            <text
-              x="124"
-              y="13"
-              textAnchor="middle"
-              dominantBaseline="central"
-              fontSize="7"
-              fill={TEXT}
-              fontFamily="ui-sans-serif, system-ui, sans-serif"
-            >
-              ship
-            </text>
-          </svg>
-        </div>
-      );
-    },
-  },
-  {
-    label: 'Image',
-    description: 'Drop in images with captions and resize controls.',
-    render: () => (
-      <div className="overflow-hidden rounded-md border">
-        <NextImage
-          src="/images/home/block-components/image-preview.png"
-          alt=""
-          width={300}
-          height={186}
-          className="block h-auto w-full"
-        />
-      </div>
-    ),
-  },
-  {
-    label: 'Video',
-    description: 'Embed videos with playback controls inline.',
-    render: () => (
-      <div className="relative overflow-hidden rounded-md border">
-        <NextImage
-          src="/images/home/block-components/video-preview.png"
-          alt=""
-          width={300}
-          height={186}
-          className="block h-auto w-full"
-        />
-        <span aria-hidden="true" className="absolute inset-0 flex items-center justify-center">
-          <span className="flex size-6 items-center justify-center rounded-full bg-slide-bg-elevated/90 shadow-sm">
-            <Play className="size-3 fill-slide-text text-slide-text" />
-          </span>
-        </span>
-      </div>
-    ),
-  },
-];
-
-function BlockComponents() {
-  const sections = [
-    {
-      heading: 'Components',
-      items: [
-        { icon: MessageSquareWarning, label: 'Callout' },
-        { icon: ChevronRight, label: 'Accordion' },
-        { icon: LayoutPanelTop, label: 'Tabs' },
-        { icon: Workflow, label: 'Mermaid' },
-      ],
-    },
-    {
-      heading: 'Media',
-      items: [
-        { icon: ImageIcon, label: 'Image' },
-        { icon: VideoIcon, label: 'Video' },
-      ],
-    },
-  ];
-
-  const [rootRef, inView] = useIsInView<HTMLDivElement>();
-  const prefersReducedMotion = usePrefersReducedMotion();
-  const [activeIdx, setActiveIdx] = useState(0);
-  useEffect(() => {
-    if (!inView) return;
-    if (prefersReducedMotion) return;
-    const id = window.setInterval(() => {
-      setActiveIdx((i) => (i + 1) % BLOCK_PREVIEWS.length);
-    }, BLOCK_CYCLE_MS);
-    return () => window.clearInterval(id);
-  }, [inView, prefersReducedMotion]);
-
-  const activeLabel = BLOCK_PREVIEWS[activeIdx].label;
-
-  const itemRefs = useRef<Record<string, HTMLDivElement | null>>({});
-  const scrollRef = useRef<HTMLDivElement>(null);
-  useEffect(() => {
-    const container = scrollRef.current;
-    const item = itemRefs.current[activeLabel];
-    if (!container || !item) return;
-
-    if (activeLabel === BLOCK_PREVIEWS[0].label) {
-      container.scrollTo({ top: 0, behavior: 'smooth' });
-      return;
-    }
-
-    const itemTop = item.offsetTop;
-    const itemBottom = itemTop + item.offsetHeight;
-    const visibleTop = container.scrollTop;
-    const visibleBottom = visibleTop + container.clientHeight;
-
-    if (itemTop - visibleTop < 12) {
-      container.scrollTo({ top: itemTop - 12, behavior: 'smooth' });
-    } else if (itemBottom - visibleBottom > -12) {
-      container.scrollTo({
-        top: itemBottom - container.clientHeight + 12,
-        behavior: 'smooth',
-      });
-    }
-  }, [activeLabel]);
-
-  return (
-    <div
-      ref={rootRef}
-      className="flex w-full items-center justify-center [container-type:inline-size]"
-    >
-      <div
-        className="w-[280px] flex-none [transform-origin:center_center]"
-        style={{ transform: 'scale(min(1, calc(100cqw / 280px)))' }}
-      >
-        <div className="flex w-full items-start gap-2">
-          <div className="relative min-w-0 flex-1 overflow-hidden rounded-xl bg-slide-bg-elevated shadow-sm">
-            <div
-              ref={scrollRef}
-              className="relative max-h-[150px] overflow-y-auto p-1.5 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
-            >
-              {sections.map((section) => (
-                <div key={section.heading}>
-                  <div className="px-2 pt-1.5 pb-1 text-[9px] font-semibold uppercase tracking-wide text-slide-muted">
-                    {section.heading}
-                  </div>
-                  <div className="flex flex-col">
-                    {section.items.map(({ icon: Icon, label }) => {
-                      const active = label === activeLabel;
-                      return (
-                        <div
-                          key={label}
-                          ref={(el) => {
-                            itemRefs.current[label] = el;
-                          }}
-                          className={cn(
-                            'flex items-center gap-2 rounded-md px-2 py-1 text-[11px]',
-                            active ? 'bg-slide-bg text-slide-text' : 'text-slide-muted',
-                          )}
-                        >
-                          <Icon className="size-3 shrink-0" />
-                          <span className="truncate">{label}</span>
-                        </div>
-                      );
-                    })}
-                  </div>
-                </div>
-              ))}
-            </div>
-          </div>
-
-          <div className="min-w-0 flex-1 rounded-xl bg-slide-bg-elevated p-2 shadow-sm">
-            {/* Light inset card holds the active preview, centered both axes.
-            Stacks all previews absolute; only the active one is opaque. */}
-            <div className="relative flex min-h-[130px] items-center justify-center rounded-lg bg-slide-bg p-2.5">
-              {BLOCK_PREVIEWS.map((preview, i) => (
-                <div
-                  key={preview.label}
-                  className="absolute inset-2.5 flex items-center justify-center transition-opacity duration-300 ease-out"
-                  style={{ opacity: i === activeIdx ? 1 : 0 }}
-                  aria-hidden={i !== activeIdx}
-                >
-                  <div className="w-full">{preview.render()}</div>
-                </div>
-              ))}
-            </div>
-            <div className="relative mt-1.5 min-h-[24px]">
-              {BLOCK_PREVIEWS.map((preview, i) => (
-                <p
-                  key={preview.label}
-                  className="absolute inset-0 px-0.5 text-[9px] leading-snug text-slide-muted transition-opacity duration-300 ease-out"
-                  style={{ opacity: i === activeIdx ? 1 : 0 }}
-                  aria-hidden={i !== activeIdx}
-                >
-                  {preview.description}
-                </p>
-              ))}
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-const TEMPLATES = [
-  { Icon: BookOpen, widths: ['w-3/4', 'w-1/2', 'w-2/3'] },
-  { Icon: PenLine, widths: ['w-2/3', 'w-3/4', 'w-1/2'] },
-  { Icon: Network, widths: ['w-1/2', 'w-2/3', 'w-3/5'] },
-  { Icon: Compass, widths: ['w-3/5', 'w-1/2', 'w-2/3'] },
-] as const;
-
-const TEMPLATE_CYCLE_MS = 1800;
-
-function Templates() {
-  const [ref, inView] = useIsInView<HTMLDivElement>();
-  const prefersReducedMotion = usePrefersReducedMotion();
-  const [activeIndex, setActiveIndex] = useState(1);
-  useEffect(() => {
-    if (!inView) return;
-    if (prefersReducedMotion) return;
-    const id = window.setInterval(() => {
-      setActiveIndex((i) => (i + 1) % TEMPLATES.length);
-    }, TEMPLATE_CYCLE_MS);
-    return () => window.clearInterval(id);
-  }, [inView, prefersReducedMotion]);
-
-  return (
-    <div ref={ref} className="grid w-full max-w-[240px] grid-cols-2 gap-2">
-      {TEMPLATES.map(({ Icon, widths }, i) => {
-        const active = i === activeIndex;
-        return (
-          <div
-            // biome-ignore lint/suspicious/noArrayIndexKey: static decorative mockup
-            key={i}
-            className={cn(
-              'relative flex flex-col gap-2 rounded-lg bg-slide-bg-elevated p-2.5',
-              'transition-[box-shadow] duration-500 ease-out',
-              'opacity-0 [animation:rich-fade-up_500ms_ease-out_forwards]',
-              active && 'z-10',
-            )}
-            style={{
-              animationDelay: `${i * 80}ms`,
-              boxShadow: active
-                ? '0 0 0 1px color-mix(in srgb, var(--slide-accent) 50%, transparent), 0 6px 18px -6px color-mix(in srgb, var(--slide-accent) 35%, transparent), 0 2px 6px -2px rgba(15, 23, 42, 0.08)'
-                : '0 1px 2px 0 rgba(15, 23, 42, 0.05)',
-            }}
-          >
-            <Icon
-              className={cn(
-                'size-3.5 transition-colors duration-500',
-                active ? 'text-slide-accent' : 'text-slide-muted opacity-70',
-              )}
-            />
-            <div className="flex flex-col gap-1">
-              {widths.map((w, j) => (
-                <div
-                  // biome-ignore lint/suspicious/noArrayIndexKey: static decorative mockup
-                  key={j}
-                  className={cn('h-1 rounded-full bg-slide-muted/15', w)}
-                />
-              ))}
-            </div>
-          </div>
-        );
-      })}
-    </div>
-  );
-}
-
-function EmbedShell({ src, children }: { src: string; children: React.ReactNode }) {
-  return (
-    <div className="flex w-full max-w-[260px] flex-col items-stretch">
-      <div className="flex items-center gap-2 rounded-lg bg-slide-bg-elevated px-2.5 py-2 shadow-sm">
-        <Code2 className="size-3.5 shrink-0 text-slide-accent" />
-        <span className="truncate font-mono text-xs text-slide-text/70">{src}</span>
-      </div>
-      <div className="mx-auto h-7 w-px bg-slide-border" />
-      <div className="rounded-lg bg-slide-bg-elevated p-4 shadow-sm">{children}</div>
-    </div>
-  );
-}
-
-/* ============================================================================
- * EMBEDDABLE HTML — Stock ticker
- * Google-Finance-style single-stock featured card: symbol bold top-left,
- * company name beneath in muted, signed % change in colored top-right, big
- * mono colored price below. Live behavior: price ticks on a mean-reverting
- * random walk; each tick briefly flashes the price (accent for up, rose for
- * down) and the displayed percent re-derives from price / previousClose.
- * ========================================================================== */
-type StockQuote = {
-  symbol: string;
-  name: string;
-  price: number;
-  percent: number;
-};
-
-const TICK_MS = 1400;
-const TICK_MAGNITUDE = 0.08;
-
-function useTickingPrice(base: number, magnitude: number, intervalMs: number, enabled: boolean) {
-  const [price, setPrice] = useState(base);
-  const prefersReducedMotion = usePrefersReducedMotion();
-  useEffect(() => {
-    if (!enabled) return;
-    if (prefersReducedMotion) return;
-    const id = window.setInterval(() => {
-      setPrice((prev) => {
-        const pull = (base - prev) * 0.35;
-        const noise = (Math.random() - 0.5) * 2 * magnitude;
-        return prev + pull + noise;
-      });
-    }, intervalMs);
-    return () => window.clearInterval(id);
-  }, [base, magnitude, intervalMs, enabled, prefersReducedMotion]);
-  return price;
-}
-
-function RollingDigit({ value }: { value: number }) {
-  return (
-    <span
-      className="relative inline-block overflow-hidden align-baseline"
-      style={{ height: '1em', width: '1ch' }}
-      aria-hidden="true"
-    >
-      <span
-        className="absolute top-0 left-0 flex flex-col"
-        style={{
-          transform: `translateY(-${value}em)`,
-          transition: 'transform 550ms cubic-bezier(0.4, 0, 0.2, 1)',
-        }}
-      >
-        {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((d) => (
-          <span key={d} className="block text-center" style={{ height: '1em', lineHeight: '1em' }}>
-            {d}
-          </span>
-        ))}
-      </span>
-    </span>
-  );
-}
-
-function RollingPrice({ value }: { value: number }) {
-  const str = value.toFixed(2);
-  return (
-    <>
-      <span className="sr-only">${str}</span>
-      <span className="inline-flex items-baseline" aria-hidden="true">
-        <span>$</span>
-        {str.split('').map((c, i) => {
-          if (c === '.') {
-            return (
-              // biome-ignore lint/suspicious/noArrayIndexKey: stable position in fixed-format price string
-              <span key={i}>.</span>
-            );
-          }
-          return (
-            // biome-ignore lint/suspicious/noArrayIndexKey: stable position in fixed-format price string
-            <RollingDigit key={i} value={parseInt(c, 10)} />
-          );
-        })}
-      </span>
-    </>
-  );
-}
-
-function EmbedStockTicker({ stock }: { stock: StockQuote }) {
-  const [ref, inView] = useIsInView<HTMLDivElement>();
-  const previousClose = stock.price / (1 + stock.percent / 100);
-  const livePrice = useTickingPrice(stock.price, TICK_MAGNITUDE, TICK_MS, inView);
-  const livePercent = (livePrice / previousClose - 1) * 100;
-
-  const isGain = livePercent >= 0;
-  const deltaColor = isGain ? 'text-slide-accent' : 'text-rose-600 dark:text-rose-400';
-  const sign = isGain ? '+' : '−';
-
-  return (
-    <EmbedShell src='<iframe src="ticker.app" />'>
-      <div ref={ref} className="flex flex-col gap-3.5">
-        <div className="flex items-start justify-between gap-2">
-          <div className="flex min-w-0 flex-col space-y-0.5">
-            <span className="text-[14px] font-bold leading-tight text-slide-text">
-              {stock.symbol}
-            </span>
-            <span className="truncate text-[10px] leading-tight text-slide-muted">
-              {stock.name}
-            </span>
-          </div>
-          <span
-            className={cn(
-              'shrink-0 text-[11px] font-medium leading-tight tabular-nums',
-              deltaColor,
-            )}
-          >
-            {sign}
-            {Math.abs(livePercent).toFixed(2)}%
-          </span>
-        </div>
-        <div
-          className={cn(
-            'font-mono text-2xl font-bold leading-none tabular-nums tracking-tight',
-            deltaColor,
-          )}
-        >
-          <RollingPrice value={livePrice} />
-        </div>
-      </div>
-    </EmbedShell>
-  );
-}
-
-const STOCK_INKP: StockQuote = {
-  symbol: 'INKP',
-  name: 'Inkeep, Inc.',
-  price: 147.85,
-  percent: 3.01,
-};
-
-function EmbeddableHtml() {
-  return (
-    <div className="flex w-full items-center justify-center [container-type:inline-size]">
-      <div
-        className="w-[260px] flex-none [transform-origin:center_center]"
-        style={{ transform: 'scale(min(1, calc(100cqw / 260px)))' }}
-      >
-        <EmbedStockTicker stock={STOCK_INKP} />
-      </div>
-    </div>
-  );
-}
-
-function TemplateAnimationStyles() {
-  return (
-    <style>{`
-      @keyframes rich-fade-up {
-        from { opacity: 0; transform: translateY(8px); }
-        to   { opacity: 1; transform: translateY(0); }
-      }
-    `}</style>
-  );
-}
-
-export function RichEditing() {
-  return (
-    <Section className="container flex flex-col gap-12 lg:gap-16">
-      <TemplateAnimationStyles />
-      <SectionHeading
-        tag="The editor"
-        description="A Notion-like editor that's just markdown under the hood."
-        className="max-w-2xl"
-      >
-        A canvas for your knowledge.
-      </SectionHeading>
-
-      <div className="grid grid-cols-1 gap-y-12 lg:grid-cols-3 lg:grid-rows-[auto_auto] lg:gap-x-8 lg:gap-y-5">
-        <FeatureCard title="Rich elements" description="Tables, images, code, diagrams, and more.">
-          <BlockComponents />
-        </FeatureCard>
-        <FeatureCard
-          title="Embeddable HTML"
-          description="Drop-in apps, previews, and visualizations."
-        >
-          <EmbeddableHtml />
-        </FeatureCard>
-        <FeatureCard title="Templates" description="Ready-made and customizable templates.">
-          <Templates />
-        </FeatureCard>
-      </div>
-    </Section>
-  );
-}
diff --git a/docs/src/app/(home)/site-nav.tsx b/docs/src/app/(home)/site-nav.tsx
deleted file mode 100644
index cdc7f012d..000000000
--- a/docs/src/app/(home)/site-nav.tsx
+++ /dev/null
@@ -1,299 +0,0 @@
-'use client';
-
-import { BookOpen, Menu, Star, X } from 'lucide-react';
-import Link from 'next/link';
-import type { FC, SVGProps } from 'react';
-import { useEffect, useState } from 'react';
-import { DiscordIcon } from '@/components/icons/discord';
-import { GitHubIcon } from '@/components/icons/github';
-import { XIcon } from '@/components/icons/x';
-import { LogoContextMenu } from '@/components/logo-context-menu';
-import { OkWordmark } from '@/components/ok-wordmark';
-import { Sheet, SheetClose, SheetContent, SheetTitle, SheetTrigger } from '@/components/ui/sheet';
-import { DISCORD_URL, DOWNLOAD_ROUTE, GITHUB_URL, X_URL } from '@/lib/site';
-import { MarketingButton } from './marketing-button';
-
-type NavLink = {
-  href: string;
-  label: string;
-  external: boolean;
-  icon?: FC<SVGProps<SVGSVGElement>>;
-  iconOnly?: boolean;
-  desktopIconHidden?: boolean;
-  showStars?: boolean;
-};
-
-const docsLink: NavLink = {
-  href: '/docs',
-  label: 'Docs',
-  external: false,
-  icon: BookOpen,
-  desktopIconHidden: true,
-};
-
-const socialLinks: NavLink[] = [
-  {
-    href: X_URL,
-    label: 'X (Twitter)',
-    external: true,
-    icon: XIcon,
-    iconOnly: true,
-  },
-  {
-    href: DISCORD_URL,
-    label: 'Discord',
-    external: true,
-    icon: DiscordIcon,
-    iconOnly: true,
-  },
-];
-
-const githubLink: NavLink = {
-  href: GITHUB_URL,
-  label: 'GitHub',
-  external: true,
-  icon: GitHubIcon,
-  showStars: true,
-};
-
-const mobileLinks: NavLink[] = [docsLink, ...socialLinks, githubLink];
-
-const starFormatter = new Intl.NumberFormat('en-US', {
-  notation: 'compact',
-  maximumFractionDigits: 1,
-});
-
-const fullStarFormatter = new Intl.NumberFormat('en-US');
-
-function NavLinkContent({ link, surface }: { link: NavLink; surface: 'desktop' | 'mobile' }) {
-  const Icon = link.icon;
-  const showIcon = !!Icon && (surface === 'mobile' || !link.desktopIconHidden);
-  const showLabel = surface === 'mobile' || !link.iconOnly;
-  return (
-    <>
-      {showIcon ? <Icon className="size-4 shrink-0" aria-hidden="true" /> : null}
-      {showLabel ? link.label : null}
-    </>
-  );
-}
-
-function NavItem({
-  link,
-  className,
-  surface,
-  onSelect,
-}: {
-  link: NavLink;
-  className: string;
-  surface: 'desktop' | 'mobile';
-  onSelect?: () => void;
-}) {
-  const ariaLabel = surface === 'desktop' && link.iconOnly ? link.label : undefined;
-  return link.external ? (
-    <a
-      href={link.href}
-      target="_blank"
-      rel="noreferrer"
-      aria-label={ariaLabel}
-      onClick={onSelect}
-      className={className}
-    >
-      <NavLinkContent link={link} surface={surface} />
-    </a>
-  ) : (
-    <Link href={link.href} aria-label={ariaLabel} onClick={onSelect} className={className}>
-      <NavLinkContent link={link} surface={surface} />
-    </Link>
-  );
-}
-
-function StarCount({ stars }: { stars: number }) {
-  return (
-    <>
-      <Star
-        className="size-3.5 shrink-0 text-golden-sun-300 fill-golden-sun-300"
-        aria-hidden="true"
-      />
-      {starFormatter.format(stars)}
-    </>
-  );
-}
-
-function GitHubStarButton({
-  link,
-  stars,
-  variant,
-  onSelect,
-}: {
-  link: NavLink;
-  stars: number | null;
-  variant: 'pill' | 'row';
-  onSelect?: () => void;
-}) {
-  const Icon = link.icon;
-  const title = stars != null ? `${fullStarFormatter.format(stars)} GitHub stars` : undefined;
-
-  if (variant === 'row') {
-    return (
-      <a
-        href={link.href}
-        target="_blank"
-        rel="noreferrer"
-        title={title}
-        onClick={onSelect}
-        className="flex items-center justify-between gap-2 rounded-md px-3 py-2 text-slide-text transition-colors hover:bg-slide-bg-elevated"
-      >
-        <span className="flex items-center gap-2">
-          {Icon ? <Icon className="size-4 shrink-0" aria-hidden="true" /> : null}
-          {link.label}
-        </span>
-        {stars != null ? (
-          <span className="flex items-center gap-1.5 tabular-nums text-slide-muted">
-            <StarCount stars={stars} />
-          </span>
-        ) : null}
-      </a>
-    );
-  }
-
-  return (
-    <a
-      href={link.href}
-      target="_blank"
-      rel="noreferrer"
-      className="inline-flex items-stretch overflow-hidden rounded-full border text-slide-muted hover:text-slide-text transition-colors hover:bg-slide-bg-elevated h-9"
-    >
-      <span className="flex items-center gap-1.5 px-2.5 py-1.5">
-        {Icon ? <Icon className="size-4 shrink-0" aria-hidden="true" /> : null}
-        {link.label}
-      </span>
-      {stars != null ? (
-        <span
-          title={title}
-          className="flex items-center gap-1.5 border-l px-2.5 py-1.5 tabular-nums"
-        >
-          <StarCount stars={stars} />
-        </span>
-      ) : null}
-    </a>
-  );
-}
-
-export function SiteNav({ stars }: { stars: number | null }) {
-  const [open, setOpen] = useState(false);
-
-  useEffect(() => {
-    const mq = window.matchMedia('(min-width: 768px)');
-    const closeOnDesktop = () => {
-      if (mq.matches) setOpen(false);
-    };
-    closeOnDesktop();
-    mq.addEventListener('change', closeOnDesktop);
-    return () => mq.removeEventListener('change', closeOnDesktop);
-  }, []);
-
-  return (
-    <header className="sticky top-0 z-50 bg-fd-background/80 backdrop-blur supports-backdrop-filter:bg-fd-background/70">
-      <div className="container mx-auto flex h-16 items-center justify-between px-6">
-        <div className="flex items-center gap-6">
-          <LogoContextMenu>
-            <Link href="/" aria-label="OpenKnowledge home" className="inline-flex items-center">
-              <OkWordmark aria-label="OpenKnowledge" className="h-8 w-auto text-slide-text" />
-            </Link>
-          </LogoContextMenu>
-          <nav
-            aria-label="Primary"
-            className="hidden items-center gap-6 text-sm text-slide-muted md:flex uppercase font-mono"
-          >
-            <NavItem
-              link={docsLink}
-              surface="desktop"
-              className="inline-flex items-center gap-1.5 transition-colors hover:text-slide-text"
-            />
-          </nav>
-        </div>
-
-        <nav
-          aria-label="Secondary"
-          className="hidden items-center gap-6 text-sm text-slide-muted md:flex uppercase font-mono"
-        >
-          {socialLinks.map((link) => (
-            <NavItem
-              key={link.href}
-              link={link}
-              surface="desktop"
-              className="inline-flex items-center gap-1.5 transition-colors hover:text-slide-text"
-            />
-          ))}
-          <span aria-hidden="true" className="h-5 w-px bg-slide-border" />
-          <GitHubStarButton link={githubLink} stars={stars} variant="pill" />
-          <MarketingButton href={DOWNLOAD_ROUTE} size="sm">
-            Download
-          </MarketingButton>
-        </nav>
-
-        <Sheet open={open} onOpenChange={setOpen}>
-          <SheetTrigger asChild>
-            <button
-              type="button"
-              className="inline-flex h-10 w-10 items-center justify-center rounded-md text-slide-muted opacity-60 transition-colors hover:bg-slide-bg-elevated hover:text-slide-text md:hidden"
-              aria-label="Open menu"
-            >
-              <Menu className="size-5" aria-hidden="true" />
-            </button>
-          </SheetTrigger>
-          <SheetContent
-            side="bottom"
-            aria-describedby={undefined}
-            showCloseButton={false}
-            className="border-t bg-fd-background md:hidden z-[1300]"
-          >
-            <SheetTitle className="sr-only">Site navigation</SheetTitle>
-            <nav
-              aria-label="Mobile"
-              className="container mx-auto flex flex-col gap-1 px-6 pt-4 pb-6 text-base uppercase font-mono overscroll-contain"
-            >
-              <SheetClose asChild>
-                <button
-                  type="button"
-                  aria-label="Close menu"
-                  className="mb-1 inline-flex h-10 w-10 items-center justify-center self-end rounded-md text-slide-muted opacity-60 transition-colors hover:bg-slide-bg-elevated hover:text-slide-text"
-                >
-                  <X className="size-5" aria-hidden="true" />
-                </button>
-              </SheetClose>
-              {mobileLinks.map((link) =>
-                link.showStars ? (
-                  <GitHubStarButton
-                    key={link.href}
-                    link={link}
-                    stars={stars}
-                    variant="row"
-                    onSelect={() => setOpen(false)}
-                  />
-                ) : (
-                  <NavItem
-                    key={link.href}
-                    link={link}
-                    surface="mobile"
-                    onSelect={() => setOpen(false)}
-                    className="flex items-center gap-2 rounded-md px-3 py-2 text-slide-text transition-colors hover:bg-slide-bg-elevated"
-                  />
-                ),
-              )}
-              <MarketingButton
-                href={DOWNLOAD_ROUTE}
-                size="md"
-                className="text-base"
-                showIcon
-                onClick={() => setOpen(false)}
-              >
-                Download
-              </MarketingButton>
-            </nav>
-          </SheetContent>
-        </Sheet>
-      </div>
-    </header>
-  );
-}
diff --git a/docs/src/app/d/[encoded]/splash-share-view.tsx b/docs/src/app/d/[encoded]/splash-share-view.tsx
index 7f976d906..49aaf936a 100644
--- a/docs/src/app/d/[encoded]/splash-share-view.tsx
+++ b/docs/src/app/d/[encoded]/splash-share-view.tsx
@@ -1,11 +1,11 @@
 import { DotIcon, GitBranchIcon } from 'lucide-react';
 import Link from 'next/link';
+import { DotTexture } from '@/components/dot-texture';
+import { SiteFooter } from '@/components/footer';
 import { GitHubIcon } from '@/components/icons/github';
 import { OkWordmark } from '@/components/ok-wordmark';
 import { buildCloneCommand, SPLASH_INSTALL_COMMAND, type SplashView } from '@/lib/share-splash';
 import { DOWNLOAD_ROUTE } from '@/lib/site';
-import { DotTexture } from '../../(home)/dot-texture';
-import { SiteFooter } from '../../(home)/footer';
 import { SplashButtonLabel, splashPrimaryButton } from './splash-buttons';
 import { SplashCliButton } from './splash-cli-button';
 import { SplashCtaPanel } from './splash-cta-panel';
diff --git a/docs/src/app/provider.tsx b/docs/src/app/provider.tsx
index eb813cda0..aa0ff9f82 100644
--- a/docs/src/app/provider.tsx
+++ b/docs/src/app/provider.tsx
@@ -1,20 +1,13 @@
 'use client';
 import { RootProvider } from 'fumadocs-ui/provider/next';
 import dynamic from 'next/dynamic';
-import { usePathname } from 'next/navigation';
 import type { ReactNode } from 'react';
 
 const SearchDialog = dynamic(() => import('@/components/inkeep-search-and-chat'), { ssr: false });
 
-const LIGHT_ONLY_ROUTES = new Set(['/']);
-
 export function Provider({ children }: { children: ReactNode }) {
-  const pathname = usePathname();
-  const forcedTheme = LIGHT_ONLY_ROUTES.has(pathname) ? 'light' : undefined;
-
   return (
     <RootProvider
-      theme={{ forcedTheme }}
       search={{
         SearchDialog,
       }}
diff --git a/docs/src/app/(home)/dot-texture.tsx b/docs/src/components/dot-texture.tsx
similarity index 100%
rename from docs/src/app/(home)/dot-texture.tsx
rename to docs/src/components/dot-texture.tsx
diff --git a/docs/src/app/(home)/footer.tsx b/docs/src/components/footer.tsx
similarity index 100%
rename from docs/src/app/(home)/footer.tsx
rename to docs/src/components/footer.tsx
diff --git a/docs/src/components/icons/codex.tsx b/docs/src/components/icons/codex.tsx
index d0a2b194e..4d213766f 100644
--- a/docs/src/components/icons/codex.tsx
+++ b/docs/src/components/icons/codex.tsx
@@ -1,4 +1,4 @@
-import { type SVGProps, useId } from 'react';
+import type { SVGProps } from 'react';
 
 export function CodexIcon(props: SVGProps<SVGSVGElement>) {
   return (
@@ -20,60 +20,3 @@ export function CodexIcon(props: SVGProps<SVGSVGElement>) {
     </svg>
   );
 }
-
-export function CodexBrandIcon(props: SVGProps<SVGSVGElement>) {
-  const gradId = `codex-brand-gradient-${useId().replace(/:/g, '')}`;
-  return (
-    <svg
-      role="img"
-      aria-label="Codex icon"
-      xmlns="http://www.w3.org/2000/svg"
-      width={9}
-      height={9}
-      fill="none"
-      viewBox="0 0 9 9"
-      {...props}
-    >
-      <title>Codex icon</title>
-      <path
-        d="M3.03191 0.172167C3.39319 0.023523 3.7865 -0.030181 4.17441 0.0161665C4.67441 0.0736665 5.11991 0.286167 5.51091 0.653667C5.51591 0.658667 5.52291 0.662167 5.52941 0.664167C5.53647 0.665904 5.54385 0.665904 5.55091 0.664167C6.05923 0.532896 6.59731 0.581475 7.07391 0.801667L7.09741 0.812666L7.15541 0.841167C7.65429 1.09402 8.04342 1.52067 8.24941 2.04067C8.35391 2.29567 8.40591 2.56117 8.40691 2.83817C8.41442 3.04417 8.39185 3.25017 8.33991 3.44967C8.33735 3.45974 8.33738 3.47029 8.34 3.48035C8.34263 3.4904 8.34775 3.49963 8.35491 3.50717C8.65191 3.81067 8.84891 4.17217 8.94641 4.59217C9.09091 5.30467 8.94291 5.94717 8.50291 6.51917L8.43491 6.60217C8.14349 6.93574 7.761 7.17695 7.33441 7.29617C7.32515 7.29888 7.31666 7.30373 7.30962 7.31033C7.30259 7.31694 7.2972 7.3251 7.29391 7.33417C7.19841 7.60967 7.10241 7.84567 6.92391 8.08117C6.47391 8.67467 5.81291 9.00417 5.06841 9.00017C4.47491 8.99717 3.94891 8.78017 3.48991 8.34917C3.483 8.3427 3.4745 8.33819 3.46528 8.33608C3.45606 8.33397 3.44644 8.33435 3.43741 8.33717C3.24341 8.39967 3.04741 8.40867 2.83541 8.40617C2.49774 8.40346 2.16514 8.32377 1.86291 8.17317C1.54632 8.01629 1.27069 7.78773 1.05791 7.50567C0.981908 7.40467 0.906408 7.30967 0.850908 7.19717C0.775141 7.04279 0.713231 6.88199 0.665908 6.71667C0.566008 6.34048 0.563599 5.94504 0.658908 5.56767C0.662042 5.55869 0.663069 5.54911 0.661908 5.53967C0.660196 5.53039 0.655446 5.52195 0.648408 5.51567C0.417442 5.28189 0.240911 5.00002 0.131408 4.69017C0.0585831 4.49931 0.0162322 4.29818 0.00590778 4.09417C-0.0122568 3.82546 0.0115281 3.55556 0.0764078 3.29417C0.244908 2.73817 0.567408 2.30167 1.04291 1.98517C1.14891 1.91467 1.24941 1.85967 1.34341 1.82017C1.45091 1.77567 1.55841 1.73817 1.66641 1.70667C1.67413 1.70427 1.68113 1.70001 1.6868 1.69425C1.69247 1.68849 1.69663 1.68142 1.69891 1.67367C1.78091 1.37919 1.92194 1.10446 2.11341 0.866166C2.35477 0.559671 2.67114 0.320634 3.03191 0.172167ZM4.77291 5.45467C4.69165 5.45922 4.61522 5.49471 4.55931 5.55385C4.5034 5.61299 4.47225 5.69128 4.47225 5.77267C4.47225 5.85405 4.5034 5.93235 4.55931 5.99148C4.61522 6.05062 4.69165 6.08611 4.77291 6.09067H6.59091C6.63417 6.09309 6.67747 6.08667 6.71816 6.07178C6.75885 6.0569 6.79608 6.03387 6.82756 6.0041C6.85905 5.97433 6.88413 5.93846 6.90127 5.89866C6.91841 5.85887 6.92725 5.81599 6.92725 5.77267C6.92725 5.72934 6.91841 5.68647 6.90127 5.64667C6.88413 5.60688 6.85905 5.571 6.82756 5.54123C6.79608 5.51146 6.75885 5.48843 6.71816 5.47355C6.67747 5.45866 6.63417 5.45224 6.59091 5.45467H4.77291ZM2.73091 3.11517C2.68764 3.04469 2.61865 2.99381 2.53854 2.97328C2.45844 2.95275 2.37348 2.96419 2.30165 3.00517C2.22982 3.04615 2.17675 3.11346 2.15366 3.19287C2.13056 3.27228 2.13926 3.35756 2.17791 3.43067L2.81391 4.54267L2.18091 5.61067C2.1596 5.64662 2.14558 5.68641 2.13966 5.72778C2.13373 5.76914 2.13601 5.81127 2.14636 5.85176C2.15671 5.89225 2.17494 5.9303 2.2 5.96374C2.22506 5.99718 2.25646 6.02536 2.29241 6.04667C2.32836 6.06797 2.36815 6.08199 2.40952 6.08792C2.45088 6.09385 2.49301 6.09157 2.5335 6.08121C2.57399 6.07086 2.61204 6.05263 2.64548 6.02758C2.67892 6.00252 2.7071 5.97112 2.72841 5.93517L3.45541 4.70767C3.48407 4.65931 3.4994 4.60422 3.49984 4.548C3.50028 4.49179 3.48581 4.43647 3.45791 4.38767L2.73091 3.11517Z"
-        fill={`url(#${gradId})`}
-      />
-      <defs>
-        <linearGradient
-          id={gradId}
-          x1="4.49991"
-          y1="0.000166496"
-          x2="4.49991"
-          y2="9.00017"
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop stopColor="#B1A7FF" />
-          <stop offset="0.5" stopColor="#7A9DFF" />
-          <stop offset="1" stopColor="#3941FF" />
-        </linearGradient>
-      </defs>
-    </svg>
-  );
-}
-
-export function CodexBrandMonoIcon(props: SVGProps<SVGSVGElement>) {
-  return (
-    <svg
-      role="img"
-      aria-label="Codex icon"
-      xmlns="http://www.w3.org/2000/svg"
-      width={9}
-      height={9}
-      fill="none"
-      viewBox="0 0 9 9"
-      {...props}
-    >
-      <title>Codex icon</title>
-      <path
-        d="M3.03191 0.172167C3.39319 0.023523 3.7865 -0.030181 4.17441 0.0161665C4.67441 0.0736665 5.11991 0.286167 5.51091 0.653667C5.51591 0.658667 5.52291 0.662167 5.52941 0.664167C5.53647 0.665904 5.54385 0.665904 5.55091 0.664167C6.05923 0.532896 6.59731 0.581475 7.07391 0.801667L7.09741 0.812666L7.15541 0.841167C7.65429 1.09402 8.04342 1.52067 8.24941 2.04067C8.35391 2.29567 8.40591 2.56117 8.40691 2.83817C8.41442 3.04417 8.39185 3.25017 8.33991 3.44967C8.33735 3.45974 8.33738 3.47029 8.34 3.48035C8.34263 3.4904 8.34775 3.49963 8.35491 3.50717C8.65191 3.81067 8.84891 4.17217 8.94641 4.59217C9.09091 5.30467 8.94291 5.94717 8.50291 6.51917L8.43491 6.60217C8.14349 6.93574 7.761 7.17695 7.33441 7.29617C7.32515 7.29888 7.31666 7.30373 7.30962 7.31033C7.30259 7.31694 7.2972 7.3251 7.29391 7.33417C7.19841 7.60967 7.10241 7.84567 6.92391 8.08117C6.47391 8.67467 5.81291 9.00417 5.06841 9.00017C4.47491 8.99717 3.94891 8.78017 3.48991 8.34917C3.483 8.3427 3.4745 8.33819 3.46528 8.33608C3.45606 8.33397 3.44644 8.33435 3.43741 8.33717C3.24341 8.39967 3.04741 8.40867 2.83541 8.40617C2.49774 8.40346 2.16514 8.32377 1.86291 8.17317C1.54632 8.01629 1.27069 7.78773 1.05791 7.50567C0.981908 7.40467 0.906408 7.30967 0.850908 7.19717C0.775141 7.04279 0.713231 6.88199 0.665908 6.71667C0.566008 6.34048 0.563599 5.94504 0.658908 5.56767C0.662042 5.55869 0.663069 5.54911 0.661908 5.53967C0.660196 5.53039 0.655446 5.52195 0.648408 5.51567C0.417442 5.28189 0.240911 5.00002 0.131408 4.69017C0.0585831 4.49931 0.0162322 4.29818 0.00590778 4.09417C-0.0122568 3.82546 0.0115281 3.55556 0.0764078 3.29417C0.244908 2.73817 0.567408 2.30167 1.04291 1.98517C1.14891 1.91467 1.24941 1.85967 1.34341 1.82017C1.45091 1.77567 1.55841 1.73817 1.66641 1.70667C1.67413 1.70427 1.68113 1.70001 1.6868 1.69425C1.69247 1.68849 1.69663 1.68142 1.69891 1.67367C1.78091 1.37919 1.92194 1.10446 2.11341 0.866166C2.35477 0.559671 2.67114 0.320634 3.03191 0.172167ZM4.77291 5.45467C4.69165 5.45922 4.61522 5.49471 4.55931 5.55385C4.5034 5.61299 4.47225 5.69128 4.47225 5.77267C4.47225 5.85405 4.5034 5.93235 4.55931 5.99148C4.61522 6.05062 4.69165 6.08611 4.77291 6.09067H6.59091C6.63417 6.09309 6.67747 6.08667 6.71816 6.07178C6.75885 6.0569 6.79608 6.03387 6.82756 6.0041C6.85905 5.97433 6.88413 5.93846 6.90127 5.89866C6.91841 5.85887 6.92725 5.81599 6.92725 5.77267C6.92725 5.72934 6.91841 5.68647 6.90127 5.64667C6.88413 5.60688 6.85905 5.571 6.82756 5.54123C6.79608 5.51146 6.75885 5.48843 6.71816 5.47355C6.67747 5.45866 6.63417 5.45224 6.59091 5.45467H4.77291ZM2.73091 3.11517C2.68764 3.04469 2.61865 2.99381 2.53854 2.97328C2.45844 2.95275 2.37348 2.96419 2.30165 3.00517C2.22982 3.04615 2.17675 3.11346 2.15366 3.19287C2.13056 3.27228 2.13926 3.35756 2.17791 3.43067L2.81391 4.54267L2.18091 5.61067C2.1596 5.64662 2.14558 5.68641 2.13966 5.72778C2.13373 5.76914 2.13601 5.81127 2.14636 5.85176C2.15671 5.89225 2.17494 5.9303 2.2 5.96374C2.22506 5.99718 2.25646 6.02536 2.29241 6.04667C2.32836 6.06797 2.36815 6.08199 2.40952 6.08792C2.45088 6.09385 2.49301 6.09157 2.5335 6.08121C2.57399 6.07086 2.61204 6.05263 2.64548 6.02758C2.67892 6.00252 2.7071 5.97112 2.72841 5.93517L3.45541 4.70767C3.48407 4.65931 3.4994 4.60422 3.49984 4.548C3.50028 4.49179 3.48581 4.43647 3.45791 4.38767L2.73091 3.11517Z"
-        fill="currentColor"
-      />
-    </svg>
-  );
-}
diff --git a/docs/src/components/logo-context-menu.tsx b/docs/src/components/logo-context-menu.tsx
deleted file mode 100644
index 22e71cd38..000000000
--- a/docs/src/components/logo-context-menu.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-'use client';
-
-import { ArrowRight, Check, Copy, Download } from 'lucide-react';
-import Link from 'next/link';
-import { type ReactNode, useState } from 'react';
-import {
-  ContextMenu,
-  ContextMenuContent,
-  ContextMenuItem,
-  ContextMenuSeparator,
-  ContextMenuTrigger,
-} from '@/components/ui/context-menu';
-import { BRAND_ROUTE, PRIMARY_BRAND_ASSET } from '@/lib/brand-assets';
-import { copySvgToClipboard } from '@/lib/copy-svg';
-
-export function LogoContextMenu({ children }: { children: ReactNode }) {
-  const [copied, setCopied] = useState(false);
-
-  async function copy() {
-    try {
-      await copySvgToClipboard(PRIMARY_BRAND_ASSET.svg);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 1500);
-    } catch {}
-  }
-
-  return (
-    <>
-      {/* Always-mounted live region so the copy confirmation is announced to
-          screen readers — a text swap on the already-focused menu item isn't
-          reliably announced on its own. */}
-      <span className="sr-only" role="status">
-        {copied ? 'Copied to clipboard' : ''}
-      </span>
-      <ContextMenu>
-        <ContextMenuTrigger asChild>{children}</ContextMenuTrigger>
-        <ContextMenuContent className="w-56">
-          <ContextMenuItem
-            onSelect={(event) => {
-              event.preventDefault();
-              void copy();
-            }}
-          >
-            {copied ? <Check className="text-slide-accent" /> : <Copy />}
-            {copied ? 'Copied' : 'Copy as SVG'}
-          </ContextMenuItem>
-          <ContextMenuItem asChild>
-            <a href={PRIMARY_BRAND_ASSET.svg} download={`${PRIMARY_BRAND_ASSET.downloadName}.svg`}>
-              <Download />
-              Download SVG
-            </a>
-          </ContextMenuItem>
-          <ContextMenuItem asChild>
-            <a href={PRIMARY_BRAND_ASSET.png} download={`${PRIMARY_BRAND_ASSET.downloadName}.png`}>
-              <Download />
-              Download PNG
-            </a>
-          </ContextMenuItem>
-          <ContextMenuSeparator />
-          <ContextMenuItem asChild>
-            <Link href={BRAND_ROUTE}>
-              <ArrowRight />
-              All brand assets
-            </Link>
-          </ContextMenuItem>
-        </ContextMenuContent>
-      </ContextMenu>
-    </>
-  );
-}
diff --git a/docs/src/app/(home)/marketing-button.tsx b/docs/src/components/marketing-button.tsx
similarity index 100%
rename from docs/src/app/(home)/marketing-button.tsx
rename to docs/src/components/marketing-button.tsx
diff --git a/docs/src/components/ok-editor/block-type-selector.tsx b/docs/src/components/ok-editor/block-type-selector.tsx
deleted file mode 100644
index 42b55eb8a..000000000
--- a/docs/src/components/ok-editor/block-type-selector.tsx
+++ /dev/null
@@ -1,140 +0,0 @@
-'use client';
-
-import type { Editor } from '@tiptap/core';
-import { useEditorState } from '@tiptap/react';
-import {
-  ChevronDown,
-  Heading1,
-  Heading2,
-  Heading3,
-  List,
-  ListOrdered,
-  ListTodo,
-  Pilcrow,
-  Quote,
-  SquareCode,
-} from 'lucide-react';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
-import { cn } from '@/lib/utils';
-
-type BlockType = {
-  name: string;
-  label: string;
-  Icon: typeof Pilcrow;
-  isActive: (e: Editor) => boolean;
-  run: (e: Editor) => void;
-};
-
-const BLOCK_TYPES: BlockType[] = [
-  {
-    name: 'paragraph',
-    label: 'Text',
-    Icon: Pilcrow,
-    isActive: (e) => e.isActive('paragraph') && !e.isActive('list'),
-    run: (e) => e.chain().focus().setParagraph().run(),
-  },
-  {
-    name: 'heading1',
-    label: 'Heading 1',
-    Icon: Heading1,
-    isActive: (e) => e.isActive('heading', { level: 1 }),
-    run: (e) => e.chain().focus().toggleHeading({ level: 1 }).run(),
-  },
-  {
-    name: 'heading2',
-    label: 'Heading 2',
-    Icon: Heading2,
-    isActive: (e) => e.isActive('heading', { level: 2 }),
-    run: (e) => e.chain().focus().toggleHeading({ level: 2 }).run(),
-  },
-  {
-    name: 'heading3',
-    label: 'Heading 3',
-    Icon: Heading3,
-    isActive: (e) => e.isActive('heading', { level: 3 }),
-    run: (e) => e.chain().focus().toggleHeading({ level: 3 }).run(),
-  },
-  {
-    name: 'bulletList',
-    label: 'Bullet List',
-    Icon: List,
-    isActive: (e) => e.isActive('list', { ordered: false }),
-    run: (e) => e.chain().focus().toggleBulletList().run(),
-  },
-  {
-    name: 'orderedList',
-    label: 'Ordered List',
-    Icon: ListOrdered,
-    isActive: (e) => e.isActive('list', { ordered: true }),
-    run: (e) => e.chain().focus().toggleOrderedList().run(),
-  },
-  {
-    name: 'taskList',
-    label: 'Task List',
-    Icon: ListTodo,
-    isActive: (e) =>
-      e.isActive('listItem', { checked: true }) || e.isActive('listItem', { checked: false }),
-    run: (e) => e.chain().focus().toggleTaskList().run(),
-  },
-  {
-    name: 'blockquote',
-    label: 'Quote',
-    Icon: Quote,
-    isActive: (e) => e.isActive('blockquote'),
-    run: (e) => e.chain().focus().toggleBlockquote().run(),
-  },
-  {
-    name: 'codeBlock',
-    label: 'Code Block',
-    Icon: SquareCode,
-    isActive: (e) => e.isActive('codeBlock'),
-    run: (e) => e.chain().focus().toggleCodeBlock({ language: 'js' }).run(),
-  },
-];
-
-const DEFAULT_TYPE = BLOCK_TYPES[0] as BlockType;
-
-export function BlockTypeSelector({ editor }: { editor: Editor }) {
-  const { current, activeStates } = useEditorState({
-    editor,
-    selector: ({ editor: e }) => {
-      const activeStates = Object.fromEntries(BLOCK_TYPES.map((b) => [b.name, b.isActive(e)]));
-      const current = BLOCK_TYPES.find((b) => activeStates[b.name]) ?? DEFAULT_TYPE;
-      return { current, activeStates };
-    },
-  });
-  const CurrentIcon = current.Icon;
-
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <button type="button" className="ok-bubble-blocktype" aria-label="Block type">
-          <CurrentIcon className="ok-bubble-icon" />
-          <span>{current.label}</span>
-          <ChevronDown className="size-3 opacity-50" />
-        </button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="start" sideOffset={8} className="w-44">
-        {BLOCK_TYPES.map((b) => {
-          const Icon = b.Icon;
-          return (
-            <DropdownMenuItem
-              key={b.name}
-              className={cn(activeStates[b.name] && 'bg-slide-text/[0.06] text-slide-text')}
-              onMouseDown={(e) => e.preventDefault()}
-              onSelect={() => b.run(editor)}
-            >
-              <Icon className="size-4" />
-              <span>{b.label}</span>
-            </DropdownMenuItem>
-          );
-        })}
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-}
diff --git a/docs/src/components/ok-editor/bubble-menu.tsx b/docs/src/components/ok-editor/bubble-menu.tsx
deleted file mode 100644
index 2913be65b..000000000
--- a/docs/src/components/ok-editor/bubble-menu.tsx
+++ /dev/null
@@ -1,169 +0,0 @@
-'use client';
-
-import { autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/dom';
-import { type Editor, posToDOMRect } from '@tiptap/core';
-import { useEditorState } from '@tiptap/react';
-import { BubbleMenu } from '@tiptap/react/menus';
-import { Bold, Code, Highlighter, Italic, Strikethrough, Underline } from 'lucide-react';
-import { useEffect, useRef } from 'react';
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
-import { cn } from '@/lib/utils';
-import { BlockTypeSelector } from './block-type-selector';
-
-const FORMAT_ACTIONS = [
-  {
-    name: 'Bold',
-    Icon: Bold,
-    run: (e: Editor) => e.chain().focus().toggleBold().run(),
-    mark: 'strong',
-    shortcut: '⌘B',
-  },
-  {
-    name: 'Italic',
-    Icon: Italic,
-    run: (e: Editor) => e.chain().focus().toggleItalic().run(),
-    mark: 'emphasis',
-    shortcut: '⌘I',
-  },
-  {
-    name: 'Underline',
-    Icon: Underline,
-    run: (e: Editor) => e.chain().focus().toggleUnderline().run(),
-    mark: 'underline',
-    shortcut: '⌘U',
-  },
-  {
-    name: 'Strikethrough',
-    Icon: Strikethrough,
-    run: (e: Editor) => e.chain().focus().toggleStrike().run(),
-    mark: 'strike',
-    shortcut: '⌘⇧S',
-  },
-  {
-    name: 'Code',
-    Icon: Code,
-    run: (e: Editor) => e.chain().focus().toggleCode().run(),
-    mark: 'code',
-    shortcut: '⌘E',
-  },
-  {
-    name: 'Highlight',
-    Icon: Highlighter,
-    run: (e: Editor) => e.chain().focus().toggleHighlight().run(),
-    mark: 'highlight',
-    shortcut: '⌘⇧H',
-  },
-] as const;
-
-function shouldShow({ editor }: { editor: Editor }): boolean {
-  if (!editor.isEditable) return false;
-  const { from, to, empty } = editor.state.selection;
-  if (empty) return false;
-  return Boolean(editor.state.doc.textBetween(from, to, ' ').trim());
-}
-
-export function OkBubbleMenu({ editor }: { editor: Editor }) {
-  const menuRef = useRef<HTMLDivElement>(null);
-  const stopAutoUpdate = useRef<(() => void) | null>(null);
-
-  useEffect(() => () => stopAutoUpdate.current?.(), []);
-
-  const active = useEditorState({
-    editor,
-    selector: ({ editor: e }): Record<string, boolean> =>
-      Object.fromEntries(FORMAT_ACTIONS.map((a) => [a.mark, e.isActive(a.mark)])),
-  });
-  const inCodeBlock = useEditorState({
-    editor,
-    selector: ({ editor: e }) => e.isActive('codeBlock'),
-  });
-
-  let contextElement: Element | undefined;
-  try {
-    contextElement = editor.view.dom;
-  } catch {
-    contextElement = undefined;
-  }
-
-  const anchor = {
-    getBoundingClientRect: () => {
-      try {
-        const { from, to } = editor.state.selection;
-        return posToDOMRect(editor.view, from, to);
-      } catch {
-        return new DOMRect();
-      }
-    },
-    contextElement,
-  };
-
-  const onShow = () => {
-    const popup = menuRef.current;
-    if (!popup) return;
-    stopAutoUpdate.current?.();
-    stopAutoUpdate.current = autoUpdate(anchor, popup, () => {
-      computePosition(anchor, popup, {
-        placement: 'top',
-        strategy: 'fixed',
-        middleware: [offset(8), flip(), shift({ padding: 8 })],
-      })
-        .then(({ x, y }) => {
-          if (!popup.isConnected) return;
-          popup.style.position = 'fixed';
-          popup.style.left = `${x}px`;
-          popup.style.top = `${y}px`;
-        })
-        .catch(() => {});
-    });
-  };
-
-  const onHide = () => {
-    stopAutoUpdate.current?.();
-    stopAutoUpdate.current = null;
-  };
-
-  return (
-    <BubbleMenu
-      ref={menuRef}
-      editor={editor}
-      shouldShow={shouldShow}
-      updateDelay={200}
-      appendTo={() => document.body}
-      options={{ onShow, onHide, strategy: 'fixed' }}
-      className="ok-bubble-menu"
-    >
-      <BlockTypeSelector editor={editor} />
-      {/* Marks don't apply in code blocks — show only the block-type dropdown
-          there (so the block can still be converted back to text). */}
-      {!inCodeBlock && <span className="ok-bubble-sep" aria-hidden="true" />}
-      {/* delayDuration 0 (the shadcn default) feels twitchy in a dense toolbar;
-          a short delay reads as intentional hover. */}
-      {!inCodeBlock && (
-        <TooltipProvider delayDuration={350}>
-          {FORMAT_ACTIONS.map(({ name, Icon, run, mark, shortcut }) => (
-            <Tooltip key={name}>
-              <TooltipTrigger asChild>
-                <button
-                  type="button"
-                  aria-label={name}
-                  aria-pressed={active[mark]}
-                  className={cn('ok-bubble-btn', active[mark] && 'is-active')}
-                  onMouseDown={(e) => {
-                    e.preventDefault();
-                    run(editor);
-                  }}
-                >
-                  <Icon className="ok-bubble-icon" />
-                </button>
-              </TooltipTrigger>
-              <TooltipContent sideOffset={8} className="flex items-center gap-1.5">
-                {name}
-                <span className="text-[11px] text-slide-bg/60">{shortcut}</span>
-              </TooltipContent>
-            </Tooltip>
-          ))}
-        </TooltipProvider>
-      )}
-    </BubbleMenu>
-  );
-}
diff --git a/docs/src/components/ok-editor/drag-handle.tsx b/docs/src/components/ok-editor/drag-handle.tsx
deleted file mode 100644
index dd451784c..000000000
--- a/docs/src/components/ok-editor/drag-handle.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-'use client';
-
-import { offset } from '@floating-ui/dom';
-import { type Editor, Extension } from '@tiptap/core';
-import { DragHandlePlugin, normalizeNestedOptions } from '@tiptap/extension-drag-handle';
-import type { Node as PmNode } from '@tiptap/pm/model';
-import { TextSelection } from '@tiptap/pm/state';
-
-const HANDLE_HEIGHT = 24;
-const MAX_SINGLE_LINE_HEIGHT = 44;
-const BODY_LINE_HEIGHT = 26;
-
-const PLUS_SVG = `<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5v14"/></svg>`;
-const GRIP_SVG = `<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="12" r="1"/><circle cx="9" cy="5" r="1"/><circle cx="9" cy="19" r="1"/><circle cx="15" cy="12" r="1"/><circle cx="15" cy="5" r="1"/><circle cx="15" cy="19" r="1"/></svg>`;
-
-function buildControls() {
-  const container = document.createElement('div');
-  container.className = 'ok-block-controls';
-
-  const addBtn = document.createElement('button');
-  addBtn.type = 'button';
-  addBtn.className = 'ok-block-btn';
-  addBtn.setAttribute('aria-label', 'Add block below');
-  addBtn.innerHTML = PLUS_SVG;
-  addBtn.addEventListener('mousedown', (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-  });
-
-  const grip = document.createElement('button');
-  grip.type = 'button';
-  grip.className = 'ok-block-btn ok-block-grip';
-  grip.setAttribute('aria-label', 'Drag to move');
-  grip.setAttribute('tabindex', '-1');
-  grip.innerHTML = GRIP_SVG;
-
-  container.append(addBtn, grip);
-  return { container, addBtn, grip };
-}
-
-function addBlockBelow(editor: Editor, pos: number, node: PmNode) {
-  const { state, view } = editor;
-  const insertAt = pos + node.nodeSize;
-  if (insertAt > state.doc.content.size) return;
-  const paragraph = state.schema.nodes.paragraph?.create();
-  if (!paragraph) return;
-  const tr = state.tr.insert(insertAt, paragraph);
-  tr.setSelection(TextSelection.near(tr.doc.resolve(insertAt + 1))).scrollIntoView();
-  view.dispatch(tr);
-  view.focus();
-  editor.commands.insertContent('/');
-}
-
-export const BlockDragHandle = Extension.create({
-  name: 'okBlockDragHandle',
-
-  addProseMirrorPlugins() {
-    const editor = this.editor;
-    let curNode: PmNode | null = null;
-    let curPos = -1;
-
-    const { container, addBtn, grip } = buildControls();
-
-    addBtn.addEventListener('click', () => {
-      if (curNode && curPos >= 0) addBlockBelow(editor, curPos, curNode);
-    });
-    grip.addEventListener('click', () => {
-      if (curPos < 0) return;
-      try {
-        editor.chain().focus().setNodeSelection(curPos).run();
-      } catch {}
-    });
-
-    return [
-      DragHandlePlugin({
-        editor,
-        element: container,
-        nestedOptions: normalizeNestedOptions(false),
-        computePositionConfig: {
-          placement: 'left-start',
-          strategy: 'absolute',
-          middleware: [
-            offset(({ rects }) => {
-              const firstLineHeight =
-                rects.reference.height <= MAX_SINGLE_LINE_HEIGHT
-                  ? rects.reference.height
-                  : BODY_LINE_HEIGHT;
-              return { mainAxis: 6, crossAxis: (firstLineHeight - HANDLE_HEIGHT) / 2 };
-            }),
-          ],
-        },
-        onNodeChange: ({ node, pos }) => {
-          curNode = node;
-          curPos = pos;
-        },
-      }).plugin,
-    ];
-  },
-});
diff --git a/docs/src/components/ok-editor/mode-toggle.tsx b/docs/src/components/ok-editor/mode-toggle.tsx
deleted file mode 100644
index b0f3c0525..000000000
--- a/docs/src/components/ok-editor/mode-toggle.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-'use client';
-
-export type EditorMode = 'visual' | 'source';
-
-export function ModeToggle({
-  mode,
-  onChange,
-}: {
-  mode: EditorMode;
-  onChange: (mode: EditorMode) => void;
-}) {
-  return (
-    <div className="ok-mode-toggle">
-      <button
-        type="button"
-        aria-pressed={mode === 'visual'}
-        aria-label="Visual editor"
-        data-active={mode === 'visual'}
-        className="ok-mode-toggle-btn"
-        onClick={() => onChange('visual')}
-      >
-        <TextboxIcon className="ok-mode-toggle-icon" />
-        Visual
-      </button>
-      <button
-        type="button"
-        aria-pressed={mode === 'source'}
-        aria-label="Markdown source editor"
-        data-active={mode === 'source'}
-        className="ok-mode-toggle-btn"
-        onClick={() => onChange('source')}
-      >
-        <MarkdownIcon className="ok-mode-toggle-icon" />
-        Markdown
-      </button>
-    </div>
-  );
-}
-
-function TextboxIcon({ className }: { className?: string }) {
-  return (
-    <svg className={className} viewBox="0 0 256 256" fill="currentColor" aria-hidden="true">
-      <path d="M112,40a8,8,0,0,0-8,8V64H24A16,16,0,0,0,8,80v96a16,16,0,0,0,16,16h80v16a8,8,0,0,0,16,0V48A8,8,0,0,0,112,40ZM24,176V80h80v96ZM248,80v96a16,16,0,0,1-16,16H144a8,8,0,0,1,0-16h88V80H144a8,8,0,0,1,0-16h88A16,16,0,0,1,248,80ZM88,112a8,8,0,0,1-8,8H72v24a8,8,0,0,1-16,0V120H48a8,8,0,0,1,0-16H80A8,8,0,0,1,88,112Z" />
-    </svg>
-  );
-}
-
-function MarkdownIcon({ className }: { className?: string }) {
-  return (
-    <svg className={className} viewBox="0 0 256 256" fill="currentColor" aria-hidden="true">
-      <path d="M232,48H24A16,16,0,0,0,8,64V192a16,16,0,0,0,16,16H232a16,16,0,0,0,16-16V64A16,16,0,0,0,232,48Zm0,144H24V64H232V192ZM128,104v48a8,8,0,0,1-16,0V123.31L93.66,141.66a8,8,0,0,1-11.32,0L64,123.31V152a8,8,0,0,1-16,0V104a8,8,0,0,1,13.66-5.66L88,124.69l26.34-26.35A8,8,0,0,1,128,104Zm77.66,18.34a8,8,0,0,1,0,11.32l-24,24a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L168,132.69V104a8,8,0,0,1,16,0v28.69l10.34-10.35A8,8,0,0,1,205.66,122.34Z" />
-    </svg>
-  );
-}
diff --git a/docs/src/components/ok-editor/ok-editor.css b/docs/src/components/ok-editor/ok-editor.css
deleted file mode 100644
index 673a6e6a6..000000000
--- a/docs/src/components/ok-editor/ok-editor.css
+++ /dev/null
@@ -1,538 +0,0 @@
-/*
- * Scoped editor typography — ported from the real editor's canonical
- * ProseMirror rules in packages/app/src/globals.css and remapped onto the
- * docs site's design tokens (--slide-*, --color-gray-*, --primary, --border).
- * Everything is scoped under `.ok-editor-prose` (the class set on the
- * ProseMirror root via editorProps) so it never leaks to docs prose.
- *
- * Drift note: the source of truth for the editor's look is the app stylesheet.
- * If the app's `.ProseMirror` typography changes, re-sync the rules below.
- */
-
-.ok-editor-prose {
-  outline: none;
-  font-size: 0.9375rem;
-  line-height: 1.7;
-  color: var(--slide-text);
-  /* Left margin room for the block drag handle (positioned left-start). */
-  padding-left: 1.5rem;
-}
-
-/* Anchor for the absolutely-positioned drag handle (appended next to the
-   ProseMirror root by DragHandlePlugin). */
-.ok-editor-visual {
-  position: relative;
-}
-
-/* Block hover controls — "+" (add block) and a drag grip in the left margin.
-   DragHandlePlugin toggles visibility/pointer-events; we only style looks. */
-.ok-block-controls {
-  display: flex;
-  align-items: center;
-  gap: 0.0625rem;
-}
-.ok-block-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 1.125rem;
-  height: 1.5rem;
-  border-radius: 0.3rem;
-  color: color-mix(in oklab, var(--slide-muted) 65%, transparent);
-  cursor: pointer;
-  transition:
-    background-color 0.12s ease,
-    color 0.12s ease;
-}
-.ok-block-btn:hover {
-  background-color: color-mix(in oklab, var(--slide-text) 8%, transparent);
-  color: var(--slide-text);
-}
-.ok-block-grip {
-  cursor: grab;
-}
-.ok-block-controls[data-dragging="true"] .ok-block-grip {
-  cursor: grabbing;
-}
-
-.ok-editor-prose p {
-  margin-bottom: 0.5em;
-}
-
-/* Placeholder ("Type '/' for commands") — the Placeholder extension tags the
-   focused empty node with `is-empty` + a `data-placeholder` attr. */
-.ok-editor-prose p.is-empty::before {
-  content: attr(data-placeholder);
-  pointer-events: none;
-  float: left;
-  height: 0;
-  color: color-mix(in oklab, var(--slide-muted) 60%, transparent);
-}
-
-.ok-editor-prose > :first-child {
-  margin-top: 0;
-}
-
-/* Headings */
-.ok-editor-prose h1,
-.ok-editor-prose h2,
-.ok-editor-prose h3 {
-  font-weight: 600;
-  margin-top: 1em;
-  margin-bottom: 0.4em;
-  color: var(--slide-text);
-}
-
-.ok-editor-prose > h1:first-child,
-.ok-editor-prose > h2:first-child,
-.ok-editor-prose > h3:first-child {
-  margin-top: 0;
-}
-
-.ok-editor-prose h1 {
-  font-size: 1.5em;
-  letter-spacing: -0.04em;
-}
-.ok-editor-prose h2 {
-  font-size: 1.25em;
-  letter-spacing: -0.03em;
-}
-.ok-editor-prose h3 {
-  font-size: 1.1em;
-  letter-spacing: -0.02em;
-}
-
-/* Lists */
-.ok-editor-prose ul {
-  list-style-type: disc;
-  padding-left: 1.5em;
-  margin-bottom: 0.5em;
-}
-
-.ok-editor-prose ol {
-  list-style-type: decimal;
-  padding-left: 2.5em;
-  margin-bottom: 0.5em;
-}
-
-.ok-editor-prose li {
-  margin-bottom: 0.15em;
-}
-
-.ok-editor-prose li > p {
-  margin-bottom: 0.15em;
-}
-
-.ok-editor-prose ul ul {
-  list-style-type: circle;
-  margin-bottom: 0;
-}
-
-.ok-editor-prose ul ul ul {
-  list-style-type: square;
-}
-
-/* Task lists — the unified List extension emits <li data-type="taskItem"> */
-.ok-editor-prose ul:has(> li[data-type="taskItem"]) {
-  list-style: none;
-  padding-left: 0;
-}
-
-.ok-editor-prose li[data-type="taskItem"] {
-  display: flex;
-  align-items: flex-start;
-  gap: 0.5em;
-  margin-bottom: 0.5em;
-}
-
-.ok-editor-prose li[data-type="taskItem"] > label {
-  flex-shrink: 0;
-  margin-top: 0.3em;
-}
-
-.ok-editor-prose li[data-type="taskItem"] > label input[type="checkbox"] {
-  appearance: none;
-  width: 1rem;
-  height: 1rem;
-  border: 1px solid var(--color-gray-300);
-  border-radius: 3px;
-  background: transparent;
-  cursor: pointer;
-  display: grid;
-  place-content: center;
-  margin: 0;
-  transition:
-    background-color 150ms,
-    border-color 150ms;
-}
-
-.ok-editor-prose li[data-type="taskItem"] > label input[type="checkbox"]:checked {
-  background-color: var(--primary);
-  border-color: var(--primary);
-}
-
-.ok-editor-prose li[data-type="taskItem"] > label input[type="checkbox"]:checked::after {
-  content: "";
-  width: 0.55rem;
-  height: 0.55rem;
-  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
-  mask-size: contain;
-  mask-repeat: no-repeat;
-  background-color: #fff;
-}
-
-.ok-editor-prose li[data-type="taskItem"] > label input[type="checkbox"]:focus-visible {
-  outline: 2px solid var(--primary);
-  outline-offset: 2px;
-}
-
-.ok-editor-prose li[data-type="taskItem"] > div {
-  flex: 1;
-}
-
-.ok-editor-prose li[data-type="taskItem"] > div p {
-  margin-bottom: 0;
-}
-
-.ok-editor-prose li[data-type="taskItem"][data-checked="true"] > div {
-  text-decoration: line-through;
-  color: var(--color-gray-400);
-}
-
-/* Blockquote */
-.ok-editor-prose blockquote {
-  border-left: 3px solid var(--color-gray-300);
-  padding-left: 1em;
-  margin-left: 0;
-  margin-bottom: 0.5em;
-  color: var(--color-gray-600);
-}
-
-/* Links */
-.ok-editor-prose a {
-  color: var(--slide-accent-strong);
-  text-decoration: underline;
-  text-underline-offset: 2px;
-}
-
-/* Highlight mark */
-.ok-editor-prose mark {
-  color: inherit;
-  padding: 0.05em 0.25em;
-  border-radius: 0.2em;
-  background: color-mix(in oklab, #f59e0b 22%, transparent);
-}
-
-/* Inline code */
-.ok-editor-prose code {
-  font-family: var(--font-mono);
-  font-size: 0.875em;
-  background: var(--color-gray-100);
-  padding: 0.1em 0.35em;
-  border-radius: 0.3em;
-}
-
-/* Code block fallback (until the preview NodeView lands) */
-.ok-editor-prose pre {
-  background: var(--color-gray-100);
-  padding: 0.75em 1em;
-  margin-bottom: 0.5em;
-  overflow-x: auto;
-  font-family: var(--font-mono);
-  font-size: 0.875em;
-  line-height: 1.6;
-  border-radius: 0.5rem;
-}
-
-.ok-editor-prose pre code {
-  background: none;
-  padding: 0;
-  font-size: inherit;
-}
-
-/* Keyboard focus ring for the editor's interactive buttons (a11y). */
-.ok-block-btn:focus-visible,
-.ok-slash-item:focus-visible,
-.ok-mode-toggle-btn:focus-visible,
-.ok-bubble-btn:focus-visible,
-.ok-bubble-blocktype:focus-visible {
-  outline: 2px solid var(--primary);
-  outline-offset: 1px;
-}
-
-/* --- Visual / Markdown segmented toggle (mirrors ModeTogglePreview) ------ */
-
-.ok-mode-toggle {
-  display: inline-flex;
-  flex-shrink: 0;
-  align-items: center;
-  gap: 0.125rem;
-  border-radius: 8px;
-  padding: 0.125rem;
-  background-color: color-mix(in srgb, var(--slide-text) 5%, transparent);
-}
-
-.ok-mode-toggle-btn {
-  display: flex;
-  height: 1.5rem;
-  align-items: center;
-  gap: 0.25rem;
-  border-radius: 6px;
-  padding: 0 0.375rem;
-  font-family: var(--font-mono);
-  font-size: 10px;
-  font-weight: 500;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: var(--slide-muted);
-  cursor: pointer;
-  transition:
-    color 150ms,
-    background-color 150ms;
-}
-
-.ok-mode-toggle-btn[data-active="true"] {
-  color: var(--slide-text);
-  background-color: var(--slide-bg-elevated);
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
-}
-
-.ok-mode-toggle-icon {
-  width: 0.75rem;
-  height: 0.75rem;
-  flex-shrink: 0;
-}
-
-/* --- Source pane -------------------------------------------------------- */
-
-.ok-source-host {
-  min-height: 0;
-}
-
-/* --- html-preview embeds (chart / stat cards) --------------------------- */
-
-.ok-editor-prose .ok-embed-preview {
-  position: relative;
-  margin: 1.5em 0 0.75em;
-}
-
-/* Hover-revealed delete button (top-right of the embed). */
-.ok-embed-delete {
-  position: absolute;
-  top: 0.5rem;
-  right: 0.5rem;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 1.5rem;
-  height: 1.5rem;
-  border-radius: 0.375rem;
-  color: var(--slide-muted);
-  background: color-mix(in srgb, var(--slide-bg-elevated) 82%, transparent);
-  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
-  cursor: pointer;
-  opacity: 0;
-  transition:
-    opacity 0.12s ease,
-    background-color 0.12s ease,
-    color 0.12s ease;
-}
-.ok-embed-preview:hover .ok-embed-delete,
-.ok-embed-delete:focus-visible {
-  opacity: 1;
-}
-.ok-embed-delete:hover {
-  color: #ef4444;
-  background: color-mix(in srgb, #ef4444 12%, var(--slide-bg-elevated));
-}
-
-.ok-embed-iframe {
-  display: block;
-  width: 100%;
-  /* Softer card border + a background nudged toward white — lighter, airier
-     embeds (applies to both the line chart and the bar chart). */
-  border: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
-  border-radius: 0.625rem;
-  background: color-mix(in srgb, var(--slide-bg) 50%, var(--slide-bg-elevated));
-}
-
-.ok-editor-prose pre.ok-code-block {
-  /* same surface as the generic code-block fallback above */
-  background: var(--color-gray-100);
-  border-radius: 0.5rem;
-}
-
-/* --- Reveal entrance — the newly landed block fades + rises in. The unified
-   reveal appends one block per step, so the last child is the fresh one; only
-   it animates (rebuilt earlier blocks appear instantly, no whole-doc re-pulse).
-   Also gives a gentle fade when the user adds a block later.
-   prefers-reduced-motion users get no movement. --- */
-@media (prefers-reduced-motion: no-preference) {
-  .ok-editor-prose > *:last-child {
-    animation: ok-reveal-in 360ms ease-out both;
-  }
-}
-
-@keyframes ok-reveal-in {
-  from {
-    opacity: 0;
-    transform: translateY(4px);
-  }
-  to {
-    opacity: 1;
-    transform: none;
-  }
-}
-
-/* --- Slash-command menu (popup mounts on document.body, so global) ------- */
-
-.ok-slash-popup {
-  position: fixed;
-  z-index: 60;
-}
-
-.ok-slash-menu {
-  display: flex;
-  flex-direction: column;
-  gap: 1px;
-  width: 200px;
-  max-height: 280px;
-  overflow-y: auto;
-  padding: 0.25rem;
-  border-radius: 0.625rem;
-  background: var(--slide-bg-elevated);
-  border: 1px solid var(--border);
-  box-shadow:
-    0 1px 2px rgba(15, 23, 42, 0.04),
-    0 8px 24px -8px rgba(15, 23, 42, 0.18);
-  font-family: var(--font-inter, system-ui, sans-serif);
-  /* Subtle thin scrollbar — native CSS (no @apply: this standalone file isn't
-     connected to the docs Tailwind context, and `subtle-scrollbar` lives only
-     in the app's globals.css). Mirrors that class's intent. */
-  scrollbar-width: thin;
-  scrollbar-color: color-mix(in oklab, var(--slide-text) 18%, transparent) transparent;
-}
-
-.ok-slash-item {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  width: 100%;
-  padding: 0.375rem 0.5rem;
-  border-radius: 0.375rem;
-  font-size: 0.8125rem;
-  text-align: left;
-  color: var(--slide-text);
-  cursor: pointer;
-}
-
-.ok-slash-item[data-active="true"] {
-  background: color-mix(in srgb, var(--slide-text) 6%, transparent);
-}
-
-.ok-slash-item-icon {
-  width: 0.875rem;
-  height: 0.875rem;
-  flex-shrink: 0;
-  color: var(--slide-muted);
-}
-
-/* Selection bubble menu (inline format toolbar). Positioned fixed via
-   floating-ui in bubble-menu.tsx; this styles only the appearance. */
-.ok-bubble-menu {
-  display: flex;
-  align-items: center;
-  gap: 0.125rem;
-  padding: 0.25rem;
-  border-radius: 0.625rem;
-  background: var(--slide-bg-elevated);
-  border: 1px solid var(--border);
-  box-shadow:
-    0 1px 2px rgba(15, 23, 42, 0.04),
-    0 8px 24px -8px rgba(15, 23, 42, 0.18);
-  z-index: 60;
-}
-
-.ok-bubble-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 1.75rem;
-  height: 1.75rem;
-  border-radius: 0.375rem;
-  color: var(--slide-text);
-  cursor: pointer;
-  transition:
-    background-color 0.12s ease,
-    color 0.12s ease;
-}
-.ok-bubble-btn:hover {
-  background: color-mix(in srgb, var(--slide-text) 6%, transparent);
-}
-.ok-bubble-btn.is-active {
-  background: color-mix(in srgb, var(--slide-accent-strong) 12%, transparent);
-  color: var(--slide-accent-strong);
-}
-.ok-bubble-icon {
-  width: 0.9375rem;
-  height: 0.9375rem;
-}
-
-/* Block-type dropdown trigger (left of the format buttons) */
-.ok-bubble-blocktype {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.25rem;
-  height: 1.75rem;
-  padding: 0 0.375rem;
-  border-radius: 0.375rem;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  white-space: nowrap;
-  color: var(--slide-text);
-  cursor: pointer;
-  transition: background-color 0.12s ease;
-}
-.ok-bubble-blocktype:hover {
-  background: color-mix(in srgb, var(--slide-text) 6%, transparent);
-}
-.ok-bubble-sep {
-  width: 1px;
-  align-self: stretch;
-  margin: 0.25rem 0.0625rem;
-  background: var(--slide-border);
-}
-
-.ok-slash-empty {
-  width: 200px;
-  padding: 0.5rem 0.625rem;
-  border-radius: 0.625rem;
-  background: var(--slide-bg-elevated);
-  border: 1px solid var(--slide-border);
-  font-size: 0.8125rem;
-  color: var(--slide-muted);
-}
-
-/* Intro reveal — as each step writes content into the editor, the freshly-added
-   block eases in (the agent "writing" effect). `setContent` diffs the DOM, so a
-   CSS animation fires only when a node is first created and never replays on the
-   reused, unchanged nodes. We target exactly the revealed content — the
-   Highlights heading, each new task, and the chart — so the static intro text
-   (which mounts first) doesn't animate. `> :last-child` is avoided because the
-   editor keeps a trailing empty paragraph there. Scoped to `[data-revealing]`
-   (intro only) so live edits don't animate; motion-gated for reduced motion.
-   Kept last in the file so the base h2 / li / embed rules above retain ascending
-   specificity (these `[data-revealing] …` selectors are higher-specificity). */
-@media (prefers-reduced-motion: no-preference) {
-  [data-revealing] .ok-editor-prose h2,
-  [data-revealing] .ok-editor-prose li:last-child,
-  [data-revealing] .ok-editor-prose .ok-embed-preview {
-    animation: ok-block-reveal 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
-  }
-}
-@keyframes ok-block-reveal {
-  from {
-    opacity: 0;
-    transform: translateY(7px);
-  }
-}
diff --git a/docs/src/components/ok-editor/ok-editor.tsx b/docs/src/components/ok-editor/ok-editor.tsx
deleted file mode 100644
index 8899a28d9..000000000
--- a/docs/src/components/ok-editor/ok-editor.tsx
+++ /dev/null
@@ -1,175 +0,0 @@
-'use client';
-
-import type { EditorView } from '@codemirror/view';
-import { MarkdownManager, sharedExtensions } from '@inkeep/open-knowledge-core';
-import type { Editor } from '@tiptap/core';
-import { Placeholder, UndoRedo } from '@tiptap/extensions';
-import { EditorContent, useEditor, useEditorState } from '@tiptap/react';
-import dynamic from 'next/dynamic';
-import {
-  createContext,
-  type ReactNode,
-  type RefObject,
-  use,
-  useEffect,
-  useRef,
-  useState,
-} from 'react';
-import { createPortal } from 'react-dom';
-import './ok-editor.css';
-import { OkBubbleMenu } from './bubble-menu';
-import { BlockDragHandle } from './drag-handle';
-import { type EditorMode, ModeToggle } from './mode-toggle';
-import { PreviewCodeBlock } from './preview-code-block';
-import { HERO_SEED_MARKDOWN } from './seed';
-import { SlashCommand } from './slash-command';
-
-const SourceEditor = dynamic(() => import('./source-editor').then((m) => m.SourceEditor), {
-  ssr: false,
-});
-
-const markdownManager = new MarkdownManager({ extensions: sharedExtensions });
-const extensions = [
-  ...sharedExtensions.map((ext) => (ext.name === 'codeBlock' ? PreviewCodeBlock : ext)),
-  UndoRedo,
-  SlashCommand,
-  BlockDragHandle,
-  Placeholder.configure({ placeholder: "Type '/' for commands", showOnlyCurrent: true }),
-];
-
-export function parseEditorMarkdown(markdown: string) {
-  return markdownManager.parse(markdown);
-}
-
-export interface EditorDocStats {
-  words: number;
-  chars: number;
-  tokens: number;
-}
-
-const EMPTY_STATS: EditorDocStats = { words: 0, chars: 0, tokens: 0 };
-
-function computeDocStats(editor: Editor): EditorDocStats {
-  let text = '';
-  let chars = 0;
-  editor.state.doc.descendants((node) => {
-    if (node.type.name === 'codeBlock') {
-      const meta = typeof node.attrs.meta === 'string' ? node.attrs.meta : '';
-      if (node.attrs.language === 'html' && /\bpreview\b/.test(meta)) return false;
-    }
-    if (node.isText) {
-      const s = node.text ?? '';
-      text += s;
-      chars += s.length;
-      return true;
-    }
-    if (node.type.isBlock && text.length > 0 && !text.endsWith('\n')) text += '\n';
-    return true;
-  });
-  const words = text.trim() ? (text.trim().match(/\S+/g)?.length ?? 0) : 0;
-  return { words, chars, tokens: Math.ceil(chars / 4) };
-}
-
-export function useEditorDocStats(): EditorDocStats {
-  const { editor } = useOkEditor();
-  return (
-    useEditorState({
-      editor,
-      selector: ({ editor }) => (editor ? computeDocStats(editor) : EMPTY_STATS),
-    }) ?? EMPTY_STATS
-  );
-}
-
-interface OkEditorContextValue {
-  editor: Editor | null;
-  mode: EditorMode;
-  switchMode: (mode: EditorMode) => void;
-  sourceDoc: string;
-  sourceViewRef: RefObject<EditorView | null>;
-}
-
-const OkEditorContext = createContext<OkEditorContextValue | null>(null);
-
-export function useOkEditor(): OkEditorContextValue {
-  const ctx = use(OkEditorContext);
-  if (!ctx) throw new Error('OkEditor components must be rendered inside <OkEditorProvider>');
-  return ctx;
-}
-
-export function OkEditorProvider({
-  children,
-  initialMarkdown,
-  frontmatter,
-}: {
-  children: ReactNode;
-  initialMarkdown?: string;
-  /** Optional YAML frontmatter block (`---\n…\n---`) revealed above the body in
-   *  Markdown mode. The body editor stays frontmatter-free (the property panel is
-   *  its display chrome); this only round-trips through the source view. */
-  frontmatter?: string;
-}) {
-  const [mode, setMode] = useState<EditorMode>('visual');
-  const [sourceDoc, setSourceDoc] = useState('');
-  const sourceViewRef = useRef<EditorView | null>(null);
-  const [initialContent] = useState(() =>
-    markdownManager.parse(initialMarkdown ?? HERO_SEED_MARKDOWN),
-  );
-
-  const editor = useEditor({
-    extensions,
-    content: initialContent,
-    editable: true,
-    immediatelyRender: false,
-    editorProps: {
-      attributes: { class: 'ok-editor-prose focus:outline-none', spellcheck: 'false' },
-    },
-  });
-
-  function switchMode(next: EditorMode) {
-    if (next === mode || !editor) return;
-    if (next === 'source') {
-      const body = markdownManager.serialize(editor.getJSON());
-      setSourceDoc(frontmatter ? `${frontmatter}\n\n${body}` : body);
-    } else {
-      const raw = sourceViewRef.current?.state.doc.toString() ?? sourceDoc;
-      const body = raw.replace(/^---\r?\n[\s\S]*?\r?\n---[ \t]*(?:\r?\n)*/, '');
-      editor.commands.setContent(markdownManager.parse(body));
-    }
-    setMode(next);
-  }
-
-  return (
-    <OkEditorContext value={{ editor, mode, switchMode, sourceDoc, sourceViewRef }}>
-      {children}
-    </OkEditorContext>
-  );
-}
-
-export function OkEditorModeToggle() {
-  const { mode, switchMode } = useOkEditor();
-  return <ModeToggle mode={mode} onChange={switchMode} />;
-}
-
-export function OkEditorBody() {
-  const { editor, mode, sourceDoc, sourceViewRef } = useOkEditor();
-
-  const visualHostRef = useRef<HTMLDivElement>(null);
-  const [visualHost, setVisualHost] = useState<HTMLElement | null>(null);
-  useEffect(() => {
-    setVisualHost(visualHostRef.current);
-  }, []);
-
-  return (
-    <>
-      <div ref={visualHostRef} className="ok-editor-visual" hidden={mode !== 'visual'} />
-      {visualHost &&
-        createPortal(
-          // biome-ignore lint/plugin/no-unportaled-editor-content: single non-pooled editor portalled into an exclusively-owned target — the rule's canonical shape; no Activity pool / editor cache in this marketing preview.
-          <EditorContent editor={editor} />,
-          visualHost,
-        )}
-      {editor && mode === 'visual' && <OkBubbleMenu editor={editor} />}
-      {mode === 'source' && <SourceEditor initialDoc={sourceDoc} viewRef={sourceViewRef} />}
-    </>
-  );
-}
diff --git a/docs/src/components/ok-editor/preview-code-block.tsx b/docs/src/components/ok-editor/preview-code-block.tsx
deleted file mode 100644
index 0c114fd9a..000000000
--- a/docs/src/components/ok-editor/preview-code-block.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-'use client';
-
-import { CodeBlockFidelity, PREVIEW_THEME_TOKENS } from '@inkeep/open-knowledge-core';
-import {
-  NodeViewContent,
-  type NodeViewProps,
-  NodeViewWrapper,
-  ReactNodeViewRenderer,
-} from '@tiptap/react';
-import { Trash2 } from 'lucide-react';
-
-const THEME_VARS = PREVIEW_THEME_TOKENS.map((t) => `${t.name}:${t.light}`).join(';');
-
-const CHART_PALETTE = [
-  '--chart-1:#93c5fd',
-  '--chart-2:#60a5fa',
-  '--chart-3:#3784ff',
-  '--chart-4:#2563eb',
-  '--chart-5:#1d4ed8',
-].join(';');
-
-function buildSrcDoc(html: string): string {
-  return `<!doctype html><html><head><meta charset="utf-8"><style>
-:root{${THEME_VARS};${CHART_PALETTE}}
-html,body{margin:0;height:100%;background:transparent;color:var(--foreground);font-family:system-ui,-apple-system,sans-serif}
-/* Embeds are static, sized-to-fit content — never show the iframe's OS
-   scrollbar (a sub-pixel overflow shouldn't paint a thick gutter). */
-html{scrollbar-width:none}
-html::-webkit-scrollbar{width:0;height:0;display:none}
-*{box-sizing:border-box}
-</style></head><body>${html}</body></html>`;
-}
-
-const DEFAULT_PREVIEW_HEIGHT = 230;
-
-function previewHeight(meta: string): number {
-  const m = /\bh=(\d+)\b/.exec(meta);
-  return m ? Number(m[1]) : DEFAULT_PREVIEW_HEIGHT;
-}
-
-function PreviewCodeBlockView({ node, deleteNode }: NodeViewProps) {
-  const language = typeof node.attrs.language === 'string' ? node.attrs.language : '';
-  const meta = typeof node.attrs.meta === 'string' ? node.attrs.meta : '';
-  const isPreview = language === 'html' && /\bpreview\b/.test(meta);
-
-  if (isPreview) {
-    return (
-      <NodeViewWrapper className="ok-embed-preview" contentEditable={false}>
-        <iframe
-          sandbox="allow-scripts"
-          srcDoc={buildSrcDoc(node.textContent)}
-          title="Embedded preview"
-          className="ok-embed-iframe"
-          style={{ height: `${previewHeight(meta)}px` }}
-        />
-        {/* The embed isn't editable, but it can be removed. Hover-revealed
-            delete button (top-right); mousedown-preventDefault keeps the editor
-            from grabbing a selection before the click deletes the node. */}
-        <button
-          type="button"
-          className="ok-embed-delete"
-          aria-label="Delete embed"
-          onMouseDown={(e) => e.preventDefault()}
-          onClick={() => deleteNode()}
-        >
-          <Trash2 className="size-3.5" />
-        </button>
-        {/* The code text stays in the document (round-trips to markdown) but is
-            hidden while the preview renders. */}
-        <pre hidden>
-          <NodeViewContent />
-        </pre>
-      </NodeViewWrapper>
-    );
-  }
-
-  return (
-    <NodeViewWrapper>
-      <pre className="ok-code-block">
-        <NodeViewContent />
-      </pre>
-    </NodeViewWrapper>
-  );
-}
-
-export const PreviewCodeBlock = CodeBlockFidelity.extend({
-  addNodeView() {
-    return ReactNodeViewRenderer(PreviewCodeBlockView);
-  },
-});
diff --git a/docs/src/components/ok-editor/seed.ts b/docs/src/components/ok-editor/seed.ts
deleted file mode 100644
index 8067d83b5..000000000
--- a/docs/src/components/ok-editor/seed.ts
+++ /dev/null
@@ -1,64 +0,0 @@
-const HERO_INTRO = `# Launch week recap
-
-v2.0 went public on June 3 — the end of a quiet QA window and the start of launch week.
-
-47 PRs merged across the cycle. Activity stayed close to zero through QA, then spiked on launch day as the announcement went live.`;
-
-const HERO_TASKS = [
-  '- [ ] Shipped v2.0 to public on Jun 3',
-  '- [ ] 1.4k new signups in the first 24 hours',
-  '- [ ] Hit #1 on Product Hunt and front of Hacker News',
-];
-
-export const HERO_FRONTMATTER = {
-  title: 'Launch week recap',
-  tags: ['launch', 'retro', 'v2'],
-} as const;
-
-export const HERO_FRONTMATTER_YAML = [
-  '---',
-  `title: ${HERO_FRONTMATTER.title}`,
-  'tags:',
-  ...HERO_FRONTMATTER.tags.map((t) => `  - ${t}`),
-  '---',
-].join('\n');
-
-const HERO_CHART_HTML = `<div style="font-family:system-ui,-apple-system,sans-serif;height:100%;box-sizing:border-box;display:flex;flex-direction:column;padding:13px 16px 11px;color:var(--foreground)">
-  <div style="flex:none;font-size:15px;font-weight:500;margin-bottom:16px">PRs merged per day · last 30 days</div>
-  <div id="plot" style="position:relative;flex:1 1 auto;min-height:0" aria-label="Daily PRs merged, peaking on launch day"></div>
-  <script>
-    var data=[11,4,1,0.5,0,0,0,0,0,0,0,0,0,0,0,2,0.5,0,0,0,0,1,1.2,1,24,8,1,0.2,0,0.5,0];
-    var max=24,n=data.length,PADL=26,PADR=6,PADT=6,PADB=18;
-    var xN=function(i){return (i/(n-1)*1000).toFixed(1);};
-    var yN=function(v){return ((1-v/max)*1000).toFixed(1);};
-    var base=1000,pts=data.map(function(v,i){return {x:+xN(i),y:+yN(v)};});
-    var line='M '+pts[0].x+' '+pts[0].y;
-    for(var i=0;i<pts.length-1;i++){
-      var p0=pts[i-1]||pts[i],p1=pts[i],p2=pts[i+1],p3=pts[i+2]||p2;
-      var c1x=p1.x+(p2.x-p0.x)/6,c2x=p2.x-(p3.x-p1.x)/6;
-      var c1y=Math.min(base,p1.y+(p2.y-p0.y)/6),c2y=Math.min(base,p2.y-(p3.y-p1.y)/6);
-      line+=' C '+c1x.toFixed(1)+' '+c1y.toFixed(1)+', '+c2x.toFixed(1)+' '+c2y.toFixed(1)+', '+p2.x+' '+p2.y;
-    }
-    var area=line+' L '+pts[n-1].x+' '+base+' L '+pts[0].x+' '+base+' Z';
-    var ticks=[0,6,12,18,24];
-    var grid=ticks.map(function(t){return '<line x1="0" x2="1000" y1="'+yN(t)+'" y2="'+yN(t)+'" vector-effect="non-scaling-stroke" style="stroke:color-mix(in srgb, var(--border) 65%, transparent)" stroke-width="1"/>';}).join('');
-    var svg='<div style="position:absolute;left:'+PADL+'px;right:'+PADR+'px;top:'+PADT+'px;bottom:'+PADB+'px"><svg viewBox="0 0 1000 1000" preserveAspectRatio="none" style="display:block;width:100%;height:100%;overflow:visible">'
-      +'<defs><linearGradient id="g" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" style="stop-color:var(--primary);stop-opacity:0.16"/><stop offset="100%" style="stop-color:var(--primary);stop-opacity:0.015"/></linearGradient></defs>'
-      +grid+'<path d="'+area+'" style="fill:url(#g)"/>'
-      +'<path d="'+line+'" vector-effect="non-scaling-stroke" style="fill:none;stroke:color-mix(in oklab, var(--primary) 78%, white);stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round"/></svg></div>';
-    var ylab=ticks.map(function(t){var top='calc('+PADT+'px + '+(1-t/max).toFixed(4)+' * (100% - '+(PADT+PADB)+'px))';return '<div style="position:absolute;left:0;top:'+top+';width:'+(PADL-8)+'px;text-align:right;transform:translateY(-50%);font-size:10px;line-height:1;color:var(--muted-foreground)">'+t+'</div>';}).join('');
-    var xlab=[[0,'May 10'],[15,'May 25'],[30,'Jun 9']].map(function(d){var left='calc('+PADL+'px + '+(d[0]/(n-1)).toFixed(4)+' * (100% - '+(PADL+PADR)+'px))';return '<div style="position:absolute;bottom:0;left:'+left+';transform:translateX(-50%);font-size:10px;line-height:1;white-space:nowrap;color:var(--muted-foreground)">'+d[1]+'</div>';}).join('');
-    document.getElementById('plot').innerHTML=svg+ylab+xlab;
-  </script>
-</div>`;
-
-export function heroRevealMarkdown(step: number): string {
-  let md = HERO_INTRO;
-  if (step >= 1) md += '\n\n## Highlights';
-  const tasks = step <= 1 ? 0 : Math.min(HERO_TASKS.length, step - 1);
-  if (tasks > 0) md += `\n\n${HERO_TASKS.slice(0, tasks).join('\n')}`;
-  if (step >= 5) md += `\n\n\`\`\`html preview h=224\n${HERO_CHART_HTML}\n\`\`\``;
-  return md;
-}
-
-export const HERO_SEED_MARKDOWN = heroRevealMarkdown(5);
diff --git a/docs/src/components/ok-editor/slash-command.tsx b/docs/src/components/ok-editor/slash-command.tsx
deleted file mode 100644
index 89a3220a6..000000000
--- a/docs/src/components/ok-editor/slash-command.tsx
+++ /dev/null
@@ -1,134 +0,0 @@
-'use client';
-
-import { autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/dom';
-import { Extension } from '@tiptap/core';
-import { PluginKey } from '@tiptap/pm/state';
-import { ReactRenderer } from '@tiptap/react';
-import Suggestion, { type SuggestionKeyDownProps, type SuggestionProps } from '@tiptap/suggestion';
-import { filterSlashItems, type SlashItem } from './slash-items';
-import { SlashMenu, type SlashMenuProps } from './slash-menu';
-
-const slashKey = new PluginKey('okSlashCommand');
-
-export const SlashCommand = Extension.create({
-  name: 'okSlashCommand',
-
-  addProseMirrorPlugins() {
-    return [
-      Suggestion<SlashItem>({
-        editor: this.editor,
-        pluginKey: slashKey,
-        char: '/',
-        items: ({ query }) => filterSlashItems(query),
-        command: ({ editor, range, props: item }) => {
-          editor.chain().focus().deleteRange(range).run();
-          item.command(editor);
-        },
-        render: () => {
-          let renderer: ReactRenderer<unknown, SlashMenuProps> | null = null;
-          let popup: HTMLElement | null = null;
-          let current: SuggestionProps<SlashItem> | null = null;
-          let selectedIndex = 0;
-          let stopAutoUpdate: (() => void) | null = null;
-
-          const anchor = {
-            getBoundingClientRect: () => current?.clientRect?.() ?? new DOMRect(),
-            get contextElement() {
-              return current?.editor.view.dom;
-            },
-          };
-
-          const reposition = () => {
-            if (!popup) return;
-            computePosition(anchor, popup, {
-              strategy: 'fixed',
-              placement: 'bottom-start',
-              middleware: [offset(6), flip(), shift({ padding: 8 })],
-            }).then(({ x, y }) => {
-              if (!popup) return;
-              popup.style.left = `${x}px`;
-              popup.style.top = `${y}px`;
-              const caret = current?.clientRect?.();
-              const onScreen = !!caret && caret.bottom > 0 && caret.top < window.innerHeight;
-              popup.style.visibility = onScreen ? 'visible' : 'hidden';
-            });
-          };
-
-          const update = () => {
-            if (!renderer || !current) return;
-            renderer.updateProps({
-              items: current.items,
-              selectedIndex,
-              onSelect: current.command,
-              onHoverIndex: (i: number) => {
-                selectedIndex = i;
-                update();
-              },
-            });
-          };
-
-          return {
-            onStart(props: SuggestionProps<SlashItem>) {
-              current = props;
-              selectedIndex = 0;
-              popup = document.createElement('div');
-              popup.className = 'ok-slash-popup';
-              popup.style.visibility = 'hidden'; // revealed once positioned
-              document.body.appendChild(popup);
-              renderer = new ReactRenderer<unknown, SlashMenuProps>(SlashMenu, {
-                props: {
-                  items: props.items,
-                  selectedIndex,
-                  onSelect: props.command,
-                  onHoverIndex: (i: number) => {
-                    selectedIndex = i;
-                    update();
-                  },
-                },
-                editor: props.editor,
-              });
-              popup.appendChild(renderer.element);
-              stopAutoUpdate = autoUpdate(anchor, popup, reposition);
-            },
-            onUpdate(props: SuggestionProps<SlashItem>) {
-              current = props;
-              selectedIndex = Math.min(selectedIndex, Math.max(0, props.items.length - 1));
-              update();
-              reposition();
-            },
-            onKeyDown({ event }: SuggestionKeyDownProps) {
-              if (!current || current.items.length === 0) return false;
-              const items = current.items;
-              if (event.key === 'ArrowDown') {
-                selectedIndex = (selectedIndex + 1) % items.length;
-                update();
-                return true;
-              }
-              if (event.key === 'ArrowUp') {
-                selectedIndex = (selectedIndex - 1 + items.length) % items.length;
-                update();
-                return true;
-              }
-              if (event.key === 'Enter' || event.key === 'Tab') {
-                const item = items[selectedIndex];
-                if (item) current.command(item);
-                return true;
-              }
-              return false;
-            },
-            onExit() {
-              stopAutoUpdate?.();
-              renderer?.destroy();
-              popup?.remove();
-              stopAutoUpdate = null;
-              renderer = null;
-              popup = null;
-              current = null;
-              selectedIndex = 0;
-            },
-          };
-        },
-      }),
-    ];
-  },
-});
diff --git a/docs/src/components/ok-editor/slash-items.tsx b/docs/src/components/ok-editor/slash-items.tsx
deleted file mode 100644
index 6369797c9..000000000
--- a/docs/src/components/ok-editor/slash-items.tsx
+++ /dev/null
@@ -1,136 +0,0 @@
-'use client';
-
-import type { Editor } from '@tiptap/react';
-import {
-  BarChart3,
-  Code2,
-  Heading1,
-  Heading2,
-  Heading3,
-  List,
-  ListOrdered,
-  ListTodo,
-  type LucideIcon,
-  Minus,
-  Quote,
-} from 'lucide-react';
-
-export interface SlashItem {
-  name: string;
-  label: string;
-  icon: LucideIcon;
-  aliases?: string[];
-  command: (editor: Editor) => void;
-}
-
-const CHART_HTML = `<div style="font-family:system-ui,-apple-system,sans-serif;padding:13px 16px 11px;color:var(--foreground)">
-  <h3 style="margin:0 0 16px;font-size:15px;font-weight:500">Revenue by region</h3>
-  <div id="bars" style="display:flex;align-items:flex-end;gap:14px;height:170px"></div>
-  <script>
-    var data = [['North', 42], ['South', 58], ['East', 71], ['West', 64], ['Central', 80]];
-    var max = Math.max.apply(null, data.map(function (d) { return d[1]; }));
-    document.getElementById('bars').innerHTML = data.map(function (d, i) {
-      return '<div style="flex:1;display:flex;flex-direction:column;align-items:center;' +
-        'gap:6px;height:100%;justify-content:flex-end">' +
-        '<span style="font-size:12px;color:var(--muted-foreground)">' + d[1] + '</span>' +
-        '<div style="width:100%;height:' + (d[1] / max * 100) + '%;' +
-        'background:var(--chart-' + (i + 1) + ');' +
-        'border-radius:var(--radius) var(--radius) 0 0"></div>' +
-        '<span style="font-size:12px;color:var(--muted-foreground)">' + d[0] + '</span>' +
-        '</div>';
-    }).join('');
-  </script>
-</div>`;
-
-const SLASH_ITEMS: readonly SlashItem[] = [
-  {
-    name: 'heading1',
-    label: 'Heading 1',
-    icon: Heading1,
-    aliases: ['h1', 'title'],
-    command: (e) => e.chain().focus().toggleHeading({ level: 1 }).run(),
-  },
-  {
-    name: 'heading2',
-    label: 'Heading 2',
-    icon: Heading2,
-    aliases: ['h2'],
-    command: (e) => e.chain().focus().toggleHeading({ level: 2 }).run(),
-  },
-  {
-    name: 'heading3',
-    label: 'Heading 3',
-    icon: Heading3,
-    aliases: ['h3'],
-    command: (e) => e.chain().focus().toggleHeading({ level: 3 }).run(),
-  },
-  {
-    name: 'bulletList',
-    label: 'Bullet List',
-    icon: List,
-    aliases: ['ul', 'unordered'],
-    command: (e) => e.chain().focus().toggleBulletList().run(),
-  },
-  {
-    name: 'orderedList',
-    label: 'Numbered List',
-    icon: ListOrdered,
-    aliases: ['ol', 'ordered', 'numbered'],
-    command: (e) => e.chain().focus().toggleOrderedList().run(),
-  },
-  {
-    name: 'taskList',
-    label: 'Task List',
-    icon: ListTodo,
-    aliases: ['todo', 'checklist', 'checkbox'],
-    command: (e) => e.chain().focus().toggleTaskList().run(),
-  },
-  {
-    name: 'blockquote',
-    label: 'Quote',
-    icon: Quote,
-    aliases: ['quote'],
-    command: (e) => e.chain().focus().toggleBlockquote().run(),
-  },
-  {
-    name: 'codeBlock',
-    label: 'Code Block',
-    icon: Code2,
-    aliases: ['code', 'fence'],
-    command: (e) => e.chain().focus().toggleCodeBlock({ language: 'js' }).run(),
-  },
-  {
-    name: 'separator',
-    label: 'Separator',
-    icon: Minus,
-    aliases: ['hr', 'divider', 'rule'],
-    command: (e) => e.chain().focus().setHorizontalRule().run(),
-  },
-  {
-    name: 'chart',
-    label: 'Chart',
-    icon: BarChart3,
-    aliases: ['embed', 'graph', 'html'],
-    command: (e) =>
-      e
-        .chain()
-        .focus()
-        .insertContent({
-          type: 'codeBlock',
-          attrs: { language: 'html', meta: 'preview h=230' },
-          content: [{ type: 'text', text: CHART_HTML }],
-        })
-        .run(),
-  },
-];
-
-export function filterSlashItems(query: string): SlashItem[] {
-  if (!query) return [...SLASH_ITEMS];
-  const q = query.toLowerCase();
-  return SLASH_ITEMS.filter(
-    (item) =>
-      item.label.toLowerCase().includes(q) ||
-      item.name.toLowerCase().includes(q) ||
-      item.aliases?.some((a) => a.toLowerCase().includes(q)),
-  );
-}
diff --git a/docs/src/components/ok-editor/slash-menu.tsx b/docs/src/components/ok-editor/slash-menu.tsx
deleted file mode 100644
index 71cb72a6d..000000000
--- a/docs/src/components/ok-editor/slash-menu.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-'use client';
-
-import type { SlashItem } from './slash-items';
-
-export interface SlashMenuProps {
-  items: SlashItem[];
-  selectedIndex: number;
-  onSelect: (item: SlashItem) => void;
-  onHoverIndex: (index: number) => void;
-}
-
-export function SlashMenu({ items, selectedIndex, onSelect, onHoverIndex }: SlashMenuProps) {
-  if (items.length === 0) {
-    return (
-      <div className="ok-slash-empty" role="status">
-        No results
-      </div>
-    );
-  }
-  return (
-    <div className="ok-slash-menu" role="listbox" aria-label="Insert block">
-      {items.map((item, i) => {
-        const Icon = item.icon;
-        return (
-          <button
-            type="button"
-            key={item.name}
-            role="option"
-            aria-selected={i === selectedIndex}
-            data-active={i === selectedIndex}
-            className="ok-slash-item"
-            onMouseDown={(e) => {
-              e.preventDefault();
-              onSelect(item);
-            }}
-            onMouseEnter={() => onHoverIndex(i)}
-          >
-            <Icon className="ok-slash-item-icon" />
-            <span>{item.label}</span>
-          </button>
-        );
-      })}
-    </div>
-  );
-}
diff --git a/docs/src/components/ok-editor/source-editor.tsx b/docs/src/components/ok-editor/source-editor.tsx
deleted file mode 100644
index d129ba181..000000000
--- a/docs/src/components/ok-editor/source-editor.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-'use client';
-
-import { defaultKeymap, history, historyKeymap, indentWithTab } from '@codemirror/commands';
-import { markdown } from '@codemirror/lang-markdown';
-import { defaultHighlightStyle, syntaxHighlighting } from '@codemirror/language';
-import { EditorState } from '@codemirror/state';
-import { EditorView, keymap } from '@codemirror/view';
-import { type RefObject, useEffect, useRef } from 'react';
-
-const cmTheme = EditorView.theme({
-  '&': { backgroundColor: 'transparent', color: 'var(--slide-text)' },
-  '&.cm-focused': { outline: 'none' },
-  '.cm-content': {
-    fontFamily: 'var(--font-mono)',
-    fontSize: '0.8125rem',
-    lineHeight: '1.7',
-    padding: '0',
-    caretColor: 'var(--slide-text)',
-  },
-  '.cm-line': { padding: '0' },
-  '.cm-cursor': { borderLeftColor: 'var(--slide-text)' },
-  '.cm-selectionBackground, &.cm-focused .cm-selectionBackground': {
-    backgroundColor: 'color-mix(in oklab, var(--primary) 18%, transparent)',
-  },
-});
-
-export function SourceEditor({
-  initialDoc,
-  viewRef,
-}: {
-  initialDoc: string;
-  viewRef: RefObject<EditorView | null>;
-}) {
-  const hostRef = useRef<HTMLDivElement>(null);
-
-  // biome-ignore lint/correctness/useExhaustiveDependencies: mount-once — parent re-mounts with a fresh initialDoc each source-mode entry; viewRef is a stable ref. Reacting would rebuild the CodeMirror view mid-edit.
-  useEffect(() => {
-    const host = hostRef.current;
-    if (!host) return;
-    const view = new EditorView({
-      parent: host,
-      state: EditorState.create({
-        doc: initialDoc,
-        extensions: [
-          history(),
-          keymap.of([...defaultKeymap, ...historyKeymap, indentWithTab]),
-          markdown(),
-          syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
-          EditorView.lineWrapping,
-          cmTheme,
-        ],
-      }),
-    });
-    viewRef.current = view;
-    view.focus();
-    return () => {
-      view.destroy();
-      viewRef.current = null;
-    };
-  }, []);
-
-  return <div ref={hostRef} className="ok-source-host" />;
-}
diff --git a/docs/src/components/ok-icon.tsx b/docs/src/components/ok-icon.tsx
deleted file mode 100644
index f42423911..000000000
--- a/docs/src/components/ok-icon.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import { type SVGProps, useId } from 'react';
-
-export function OkIcon(props: SVGProps<SVGSVGElement>) {
-  const filterId = useId();
-  return (
-    <svg
-      width="227"
-      height="252"
-      viewBox="0 0 227 252"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      role="img"
-      {...props}
-    >
-      <title>OpenKnowledge</title>
-      <g filter={`url(#${filterId})`}>
-        <path
-          d="M195.615 47.322C170.404 11.5418 135.032 -1.78461 87.4933 6.60183C62.581 10.9903 39.3632 28.1768 25.382 52.5836C11.5214 76.7664 8.72979 104.499 17.7136 128.665C27.2431 154.312 48.887 171.24 70.8583 185.71C75.4421 188.731 76.4301 192.419 77.0735 201.989C77.5617 209.22 78.3717 221.323 89.7335 227.521C93.0479 229.325 96.6954 230.244 100.584 230.244C108.436 230.244 115.232 226.481 118.494 224.678C137.755 214.022 201.457 174.865 212.445 118.388C217.414 92.8442 207.574 64.2844 195.621 47.322H195.615Z"
-          fill="white"
-        />
-        <path
-          d="M109.438 208.318C84.1921 222.282 107.582 187.513 81.142 170.097C63.2778 158.333 43.248 143.697 35.2406 122.156C19.7257 80.4194 51.307 31.9562 90.7404 25.0115C132.179 17.7107 159.952 29.1703 180.332 58.092C190.7 72.8085 197.696 96.2618 194.083 114.821C186.26 155.036 143.512 189.466 109.438 208.318Z"
-          fill="#69A3FF"
-        />
-        <path
-          d="M154.195 85.8131C156.366 83.6428 159.884 83.6428 162.055 85.8131V85.8131C164.225 87.9834 164.225 91.5021 162.055 93.6724L144.061 111.666L136.202 103.807L154.195 85.8131Z"
-          fill="#D5E5FF"
-        />
-        <path
-          d="M162.054 113.942C164.224 116.112 164.224 119.631 162.054 121.801V121.801C159.883 123.971 156.365 123.971 154.194 121.801L136.201 103.807L144.06 95.9481L162.054 113.942Z"
-          fill="#D5E5FF"
-        />
-      </g>
-      <defs>
-        <filter
-          id={filterId}
-          x="0"
-          y="0"
-          width="226.296"
-          height="251.133"
-          filterUnits="userSpaceOnUse"
-          colorInterpolationFilters="sRGB"
-        >
-          <feFlood floodOpacity="0" result="BackgroundImageFix" />
-          <feColorMatrix
-            in="SourceAlpha"
-            type="matrix"
-            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
-            result="hardAlpha"
-          />
-          <feOffset dy="8.35549" />
-          <feGaussianBlur stdDeviation="6.26662" />
-          <feComposite in2="hardAlpha" operator="out" />
-          <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0" />
-          <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow" />
-          <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape" />
-        </filter>
-      </defs>
-    </svg>
-  );
-}
diff --git a/docs/src/app/(home)/section-heading.tsx b/docs/src/components/section-heading.tsx
similarity index 100%
rename from docs/src/app/(home)/section-heading.tsx
rename to docs/src/components/section-heading.tsx
diff --git a/docs/src/components/slide-page.tsx b/docs/src/components/slide-page.tsx
index 3cf42fcd2..ed9107e47 100644
--- a/docs/src/components/slide-page.tsx
+++ b/docs/src/components/slide-page.tsx
@@ -1,7 +1,7 @@
 import Link from 'next/link';
 import type { ComponentProps, ReactNode } from 'react';
-import { DotTexture } from '@/app/(home)/dot-texture';
-import { SiteFooter } from '@/app/(home)/footer';
+import { DotTexture } from '@/components/dot-texture';
+import { SiteFooter } from '@/components/footer';
 import { OkWordmark } from '@/components/ok-wordmark';
 import { cn } from '@/lib/utils';
 
diff --git a/docs/src/components/subscribe-form.tsx b/docs/src/components/subscribe-form.tsx
index 0d4f8d430..7d9197d83 100644
--- a/docs/src/components/subscribe-form.tsx
+++ b/docs/src/components/subscribe-form.tsx
@@ -4,7 +4,7 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import { z } from 'zod';
-import { MarketingButton } from '@/app/(home)/marketing-button';
+import { MarketingButton } from '@/components/marketing-button';
 import { Field, FieldError, FieldLabel } from '@/components/ui/field';
 import { Input } from '@/components/ui/input';
 
diff --git a/docs/src/components/ui/context-menu.tsx b/docs/src/components/ui/context-menu.tsx
deleted file mode 100644
index 0e7362188..000000000
--- a/docs/src/components/ui/context-menu.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-'use client';
-
-import { ContextMenu as ContextMenuPrimitive } from 'radix-ui';
-import type * as React from 'react';
-
-import { cn } from '@/lib/utils';
-
-function ContextMenu({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {
-  return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />;
-}
-
-function ContextMenuTrigger({
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {
-  return <ContextMenuPrimitive.Trigger data-slot="context-menu-trigger" {...props} />;
-}
-
-function ContextMenuGroup({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {
-  return <ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />;
-}
-
-function ContextMenuContent({
-  className,
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.Content>) {
-  return (
-    <ContextMenuPrimitive.Portal>
-      <ContextMenuPrimitive.Content
-        data-slot="context-menu-content"
-        className={cn(
-          'z-50 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border border-slide-text/10 bg-slide-bg-elevated p-1 text-slide-text shadow-md data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
-          className,
-        )}
-        {...props}
-      />
-    </ContextMenuPrimitive.Portal>
-  );
-}
-
-function ContextMenuItem({
-  className,
-  inset,
-  variant = 'default',
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {
-  inset?: boolean;
-  variant?: 'default' | 'destructive';
-}) {
-  return (
-    <ContextMenuPrimitive.Item
-      data-slot="context-menu-item"
-      data-inset={inset}
-      data-variant={variant}
-      className={cn(
-        "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-slide-text/[0.06] focus:text-slide-text data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-slide-muted",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function ContextMenuLabel({
-  className,
-  inset,
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {
-  inset?: boolean;
-}) {
-  return (
-    <ContextMenuPrimitive.Label
-      data-slot="context-menu-label"
-      data-inset={inset}
-      className={cn(
-        'px-2 py-1.5 text-xs font-medium text-slide-muted data-[inset]:pl-8',
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function ContextMenuSeparator({
-  className,
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {
-  return (
-    <ContextMenuPrimitive.Separator
-      data-slot="context-menu-separator"
-      className={cn('-mx-1 my-1 h-px bg-slide-text/10', className)}
-      {...props}
-    />
-  );
-}
-
-export {
-  ContextMenu,
-  ContextMenuContent,
-  ContextMenuGroup,
-  ContextMenuItem,
-  ContextMenuLabel,
-  ContextMenuSeparator,
-  ContextMenuTrigger,
-};
diff --git a/docs/src/components/ui/sheet.tsx b/docs/src/components/ui/sheet.tsx
deleted file mode 100644
index 3f9e7be82..000000000
--- a/docs/src/components/ui/sheet.tsx
+++ /dev/null
@@ -1,134 +0,0 @@
-'use client';
-
-import { XIcon } from 'lucide-react';
-import { Dialog as SheetPrimitive } from 'radix-ui';
-import type * as React from 'react';
-
-import { cn } from '@/lib/utils';
-
-function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
-  return <SheetPrimitive.Root data-slot="sheet" {...props} />;
-}
-
-function SheetTrigger({ ...props }: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
-  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />;
-}
-
-function SheetClose({ ...props }: React.ComponentProps<typeof SheetPrimitive.Close>) {
-  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />;
-}
-
-function SheetPortal({ ...props }: React.ComponentProps<typeof SheetPrimitive.Portal>) {
-  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />;
-}
-
-function SheetOverlay({
-  className,
-  ...props
-}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
-  return (
-    <SheetPrimitive.Overlay
-      data-slot="sheet-overlay"
-      className={cn(
-        'fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0',
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function SheetContent({
-  className,
-  children,
-  side = 'right',
-  showCloseButton = true,
-  ...props
-}: React.ComponentProps<typeof SheetPrimitive.Content> & {
-  side?: 'top' | 'right' | 'bottom' | 'left';
-  showCloseButton?: boolean;
-}) {
-  return (
-    <SheetPortal>
-      <SheetOverlay />
-      <SheetPrimitive.Content
-        data-slot="sheet-content"
-        className={cn(
-          'fixed z-50 flex flex-col gap-4 bg-background shadow-lg transition ease-in-out data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:animate-in data-[state=open]:duration-500',
-          side === 'right' &&
-            'inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
-          side === 'left' &&
-            'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
-          side === 'top' &&
-            'inset-x-0 top-0 h-auto border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
-          side === 'bottom' &&
-            'inset-x-0 bottom-0 h-auto border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
-          className,
-        )}
-        {...props}
-      >
-        {children}
-        {showCloseButton && (
-          <SheetPrimitive.Close className="absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-secondary">
-            <XIcon className="size-4" />
-            <span className="sr-only">Close</span>
-          </SheetPrimitive.Close>
-        )}
-      </SheetPrimitive.Content>
-    </SheetPortal>
-  );
-}
-
-function SheetHeader({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot="sheet-header"
-      className={cn('flex flex-col gap-1.5 p-4', className)}
-      {...props}
-    />
-  );
-}
-
-function SheetFooter({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot="sheet-footer"
-      className={cn('mt-auto flex flex-col gap-2 p-4', className)}
-      {...props}
-    />
-  );
-}
-
-function SheetTitle({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Title>) {
-  return (
-    <SheetPrimitive.Title
-      data-slot="sheet-title"
-      className={cn('font-semibold text-foreground', className)}
-      {...props}
-    />
-  );
-}
-
-function SheetDescription({
-  className,
-  ...props
-}: React.ComponentProps<typeof SheetPrimitive.Description>) {
-  return (
-    <SheetPrimitive.Description
-      data-slot="sheet-description"
-      className={cn('text-sm text-muted-foreground', className)}
-      {...props}
-    />
-  );
-}
-
-export {
-  Sheet,
-  SheetClose,
-  SheetContent,
-  SheetDescription,
-  SheetFooter,
-  SheetHeader,
-  SheetTitle,
-  SheetTrigger,
-};
diff --git a/docs/src/components/ui/tooltip.tsx b/docs/src/components/ui/tooltip.tsx
deleted file mode 100644
index 7dfde15a1..000000000
--- a/docs/src/components/ui/tooltip.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-'use client';
-
-import { Tooltip as TooltipPrimitive } from 'radix-ui';
-import type * as React from 'react';
-
-import { cn } from '@/lib/utils';
-
-function TooltipProvider({
-  delayDuration = 0,
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
-  return (
-    <TooltipPrimitive.Provider
-      data-slot="tooltip-provider"
-      delayDuration={delayDuration}
-      {...props}
-    />
-  );
-}
-
-function Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>) {
-  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />;
-}
-
-function TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
-  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
-}
-
-function TooltipContent({
-  className,
-  sideOffset = 0,
-  children,
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
-  return (
-    <TooltipPrimitive.Portal>
-      <TooltipPrimitive.Content
-        data-slot="tooltip-content"
-        sideOffset={sideOffset}
-        className={cn(
-          'z-50 w-fit origin-(--radix-tooltip-content-transform-origin) animate-in rounded-md bg-slide-text px-3 py-1.5 text-xs text-balance text-slide-bg fade-in-0 zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
-          className,
-        )}
-        {...props}
-      >
-        {children}
-        <TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-slide-text fill-slide-text" />
-      </TooltipPrimitive.Content>
-    </TooltipPrimitive.Portal>
-  );
-}
-
-export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };
diff --git a/docs/src/lib/brand-assets.ts b/docs/src/lib/brand-assets.ts
index cfaacc78e..441f49443 100644
--- a/docs/src/lib/brand-assets.ts
+++ b/docs/src/lib/brand-assets.ts
@@ -36,5 +36,3 @@ export const BRAND_ASSETS: BrandAsset[] = [
     tile: 'muted',
   },
 ];
-
-export const PRIMARY_BRAND_ASSET = BRAND_ASSETS[0];
diff --git a/docs/src/lib/copy-svg.ts b/docs/src/lib/copy-svg.ts
deleted file mode 100644
index fdcadc025..000000000
--- a/docs/src/lib/copy-svg.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export async function copySvgToClipboard(url: string): Promise<void> {
-  const res = await fetch(url);
-  if (!res.ok) throw new Error(`Failed to fetch ${url}: ${res.status}`);
-  await navigator.clipboard.writeText(await res.text());
-}
diff --git a/docs/src/lib/site.ts b/docs/src/lib/site.ts
index 4dcdefe92..f7bf5c015 100644
--- a/docs/src/lib/site.ts
+++ b/docs/src/lib/site.ts
@@ -30,6 +30,3 @@ export function metaDescription(
 export const DOWNLOAD_URL = STABLE_DMG_URL;
 
 export const DOWNLOAD_ROUTE = '/download/stable';
-
-export const EXAMPLE_KB_SHARE_URL =
-  'https://openknowledge.ai/d/AWh0dHBzOi8vZ2l0aHViLmNvbS9pbmtlZXAvdGVjaC1pcG9zL2Jsb2IvbWFpbi9SRUFETUUubWQ';
diff --git a/docs/src/lib/use-is-in-view.ts b/docs/src/lib/use-is-in-view.ts
deleted file mode 100644
index ae89b073c..000000000
--- a/docs/src/lib/use-is-in-view.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-'use client';
-
-import { useEffect, useRef, useState } from 'react';
-
-export function useIsInView<T extends HTMLElement>(rootMargin = '64px') {
-  const ref = useRef<T>(null);
-  const [inView, setInView] = useState(false);
-  useEffect(() => {
-    const el = ref.current;
-    if (!el || typeof IntersectionObserver === 'undefined') return;
-    const observer = new IntersectionObserver(([entry]) => setInView(entry.isIntersecting), {
-      rootMargin,
-      threshold: 0,
-    });
-    observer.observe(el);
-    return () => observer.disconnect();
-  }, [rootMargin]);
-  return [ref, inView] as const;
-}
diff --git a/docs/src/lib/use-prefers-reduced-motion.ts b/docs/src/lib/use-prefers-reduced-motion.ts
deleted file mode 100644
index c8f35b5d3..000000000
--- a/docs/src/lib/use-prefers-reduced-motion.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-'use client';
-
-import { useEffect, useState } from 'react';
-
-export function usePrefersReducedMotion(): boolean {
-  const [prefersReduced, setPrefersReduced] = useState(false);
-  useEffect(() => {
-    const mq = window.matchMedia('(prefers-reduced-motion: reduce)');
-    setPrefersReduced(mq.matches);
-    const handler = (e: MediaQueryListEvent) => setPrefersReduced(e.matches);
-    mq.addEventListener('change', handler);
-    return () => mq.removeEventListener('change', handler);
-  }, []);
-  return prefersReduced;
-}
diff --git a/docs/src/middleware.test.ts b/docs/src/proxy.test.ts
similarity index 94%
rename from docs/src/middleware.test.ts
rename to docs/src/proxy.test.ts
index 5710df65c..91d2af0ec 100644
--- a/docs/src/middleware.test.ts
+++ b/docs/src/proxy.test.ts
@@ -1,17 +1,17 @@
 import { describe, expect, test } from 'bun:test';
 import { NextRequest } from 'next/server';
-import { middleware } from './middleware.ts';
+import { proxy } from './proxy.ts';
 
 function run(host: string, pathAndQuery: string) {
   const req = new NextRequest(`https://${host}${pathAndQuery}`, { headers: { host } });
-  return middleware(req);
+  return proxy(req);
 }
 
 const APEX = 'openknowledge.ai';
 const WWW = 'www.openknowledge.ai';
 const AASA = '/.well-known/apple-app-site-association';
 
-describe('middleware: www -> apex canonicalization', () => {
+describe('proxy: www -> apex canonicalization', () => {
   test('www + AASA passes through (no redirect) so Apple gets a direct 200', () => {
     const res = run(WWW, AASA);
     expect(res.headers.get('location')).toBeNull();
diff --git a/docs/src/middleware.ts b/docs/src/proxy.ts
similarity index 90%
rename from docs/src/middleware.ts
rename to docs/src/proxy.ts
index effbbcb30..872cabcc9 100644
--- a/docs/src/middleware.ts
+++ b/docs/src/proxy.ts
@@ -3,7 +3,7 @@ import { type NextRequest, NextResponse } from 'next/server';
 const APEX_HOST = 'openknowledge.ai';
 const WWW_HOST = `www.${APEX_HOST}`;
 
-export function middleware(request: NextRequest): NextResponse {
+export function proxy(request: NextRequest): NextResponse {
   const host = (request.headers.get('host') ?? request.nextUrl.host).split(':')[0];
 
   if (request.nextUrl.pathname.startsWith('/.well-known/')) {