diff --git a/.github/workflows/checks.yml b/.github/workflows/checks.yml
new file mode 100644
index 0000000..91c1ab4
--- /dev/null
+++ b/.github/workflows/checks.yml
@@ -0,0 +1,22 @@
+name: Checks
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+
+jobs:
+  checks:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+
+      - name: Every export resolves
+        run: node scripts/check-exports.mjs
+
+      - name: The package is publishable
+        run: npm pack --dry-run
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..c2658d7
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+node_modules/
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..76e967c
--- /dev/null
+++ b/README.md
@@ -0,0 +1,73 @@
+# SourceAnt design
+
+The pieces every SourceAnt surface is built from: the colour tokens, the
+primitives, and the graph renderer.
+
+It exists because the alternative was copying. A design copied by hand drifts
+the moment either copy changes, and the drift is invisible until somebody
+notices the two products no longer look like one.
+
+## What is in it, and what is not
+
+Tokens, and the pieces a screen is assembled from: `Avatar`, `Badge`, `Button`,
+`Card`, `Field`, `Input`, `ItemCard`, `Logo`, `Modal`, `PageHead`, `Select`,
+`Tabs`, `Textarea`, and `CodeGraph`.
+
+Nothing that knows what a workspace, a review or a proposal is. Those belong to
+whichever application has them, and a package that grew to hold them would be
+that application wearing a different name.
+
+## Using it
+
+Pin it by commit. There are no releases: this moves with the products that use
+it, and a version number would be a promise nobody is keeping yet. A pinned
+commit costs nothing and stops a change here breaking a build there.
+
+```json
+{
+  "dependencies": {
+    "@sourceant/design": "github:sourceant/design#<commit>"
+  }
+}
+```
+
+Take the Tailwind preset, and say which of your own files to scan:
+
+```js
+import design from '@sourceant/design/tailwind'
+
+export default {
+  presets: [design],
+  content: ['./index.html', './src/**/*.{js,ts,vue}'],
+}
+```
+
+Import the tokens once, before anything else:
+
+```js
+import '@sourceant/design/tokens.css'
+```
+
+Then use what you need:
+
+```js
+import { Button, Card, CodeGraph } from '@sourceant/design'
+```
+
+Source is shipped rather than a build, because every consumer already compiles
+Vue. Vite needs to be told not to pre-bundle it:
+
+```js
+export default defineConfig({
+  optimizeDeps: { exclude: ['@sourceant/design'] },
+})
+```
+
+## Themes
+
+Dark is the default. A `.light` class on the root element switches it; the
+tokens are defined for both and nothing else needs to know which is on.
+
+## Licence
+
+MIT.
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..a7b3cf3
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,1060 @@
+{
+  "name": "@sourceant/design",
+  "version": "0.1.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "@sourceant/design",
+      "version": "0.1.0",
+      "license": "MIT",
+      "peerDependencies": {
+        "@tailwindcss/typography": "^0.5.20",
+        "3d-force-graph": "^1.80.0",
+        "class-variance-authority": "^0.7.1",
+        "clsx": "^2.1.1",
+        "d3-force-3d": "^3.0.6",
+        "force-graph": "^1.51.4",
+        "lucide-vue-next": "^0.563.0",
+        "markdown-it": "^15.0.1",
+        "tailwind-merge": "^3.4.0",
+        "three-spritetext": "^1.10.0",
+        "vue": "^3.5.0"
+      }
+    },
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.29.7.tgz",
+      "integrity": "sha512-Pb5ijPrZ89GDH8223L4UP8i6QApWxs04RbPQJTeWDV0/keR2E36MeKnyr6LYmUUvqRRI+Iv87SuF1W6ErINzYw==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.29.7.tgz",
+      "integrity": "sha512-qehxGkRj55h/ff8EMaJ+cYhyaKlHIxqYDn682wQD7RNp9UujOQsHog2uS0r2vzr4pW+sXf90NeeayjcNaX3fFg==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/parser": {
+      "version": "7.29.8",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.8.tgz",
+      "integrity": "sha512-E8lTAYNB1KW+FH+VGJuZM1ioAx2E6oVlvQFRrf5P8ZZmsiJXYAD9vTFV7yyEURNzgh1dFqMZuO6tUwcARbqFCA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/types": "^7.29.8"
+      },
+      "bin": {
+        "parser": "bin/babel-parser.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@babel/runtime": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.29.7.tgz",
+      "integrity": "sha512-Nq8OhGWiZIZGV6hLHoyAKLLcJihP/xFeBMGJoUrxTX2psI8dCifzLhZISFb+VWS3wFMRDmCGw5R+dOySCqPLhw==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/types": {
+      "version": "7.29.8",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.29.8.tgz",
+      "integrity": "sha512-Vj1jF3cPfxg7OAfoI7QnVKLoILlm2JF9pnVHrX8qx7AHMiYWT+NDAA7jChlNgRS4WTLc/fD1lXLmPixluj+3Gg==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.29.7",
+        "@babel/helper-validator-identifier": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.6.0.tgz",
+      "integrity": "sha512-T7jf+5zgsZHwNJ4lvQ7/aezbyk0nNX+zJVWpmHA7VYsEx7a7qr5Rg5IbtJFqkgze5Y2sruq1RUY8Q837Od7iFw==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/@tailwindcss/typography": {
+      "version": "0.5.20",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.20.tgz",
+      "integrity": "sha512-hwbzQuNUfcPvbegQFatVPl/MY/tcM9KLl963hQ5laJKPh81TEZ1+dNG9PirGvcaDBkp+BCshExAyKVPW91dozw==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "postcss-selector-parser": "6.0.10"
+      },
+      "peerDependencies": {
+        "tailwindcss": ">=3.0.0 || >=4.0.0 || insiders"
+      }
+    },
+    "node_modules/@tweenjs/tween.js": {
+      "version": "25.0.0",
+      "resolved": "https://registry.npmjs.org/@tweenjs/tween.js/-/tween.js-25.0.0.tgz",
+      "integrity": "sha512-XKLA6syeBUaPzx4j3qwMqzzq+V4uo72BnlbOjmuljLrRqdsd3qnzvZZoxvMHZ23ndsRS4aufU6JOZYpCbU6T1A==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/@vue/compiler-core": {
+      "version": "3.5.42",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.42.tgz",
+      "integrity": "sha512-2Ye1ilMtKXxl8qZUrQ5j0CdgenFp/HFQmta6rfRyfEsTG69L6Wk+tWuNoHYHMx9E8tF2Slvdg1FuwDvAXdy1LQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/parser": "^7.29.8",
+        "@vue/shared": "3.5.42",
+        "entities": "^7.0.1",
+        "estree-walker": "^2.0.2",
+        "source-map-js": "^1.2.1"
+      }
+    },
+    "node_modules/@vue/compiler-core/node_modules/entities": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-7.0.1.tgz",
+      "integrity": "sha512-TWrgLOFUQTH994YUyl1yT4uyavY5nNB5muff+RtWaqNVCAK408b5ZnnbNAUEWLTCpum9w6arT70i1XdQ4UeOPA==",
+      "license": "BSD-2-Clause",
+      "peer": true,
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/@vue/compiler-dom": {
+      "version": "3.5.42",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.42.tgz",
+      "integrity": "sha512-qbhQZEFmycr+ni/qyuccS4sucNN7VAbDfbkvNxWOX2VfgFm90MNs3/UhRNKoPMEIVn0F8gdlYjLPvqxHwHeQOA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@vue/compiler-core": "3.5.42",
+        "@vue/shared": "3.5.42"
+      }
+    },
+    "node_modules/@vue/compiler-sfc": {
+      "version": "3.5.42",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.42.tgz",
+      "integrity": "sha512-fkCAFB4okcAANGMThboWnScp/gzWjU0ZSkVnjTIiplmMDq2uq0tIB3j+xVu4rhv5rvOgBySCysudmbMd6xRRqw==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/parser": "^7.29.8",
+        "@vue/compiler-core": "3.5.42",
+        "@vue/compiler-dom": "3.5.42",
+        "@vue/compiler-ssr": "3.5.42",
+        "@vue/shared": "3.5.42",
+        "estree-walker": "^2.0.2",
+        "magic-string": "^0.30.21",
+        "postcss": "^8.5.19",
+        "source-map-js": "^1.2.1"
+      }
+    },
+    "node_modules/@vue/compiler-ssr": {
+      "version": "3.5.42",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.42.tgz",
+      "integrity": "sha512-xmLk3wLkbizPAiLyomjgFFosf2ys9b5Ghb+oh/k2tnvipNz8OFrQOiTcWCzyK7MpBp9KkyGtfvgfLUivbmuGYA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@vue/compiler-dom": "3.5.42",
+        "@vue/shared": "3.5.42"
+      }
+    },
+    "node_modules/@vue/reactivity": {
+      "version": "3.5.42",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.42.tgz",
+      "integrity": "sha512-TzNNfKpb7hDxbQltwAut8VDQA5YP+BuRlxntHUuRjyKwlMvmAPbs3unhCvieijifY6vFfVBwsS7wG/C7uq+bEQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@vue/shared": "3.5.42"
+      }
+    },
+    "node_modules/@vue/runtime-core": {
+      "version": "3.5.42",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.42.tgz",
+      "integrity": "sha512-9uACtuHs7vJGkm5Bp3xu4xRDLFTIYy5DgxpToVjqGIAhAEKwQfsaLvKINhM6nFVp6bZPRFGdDqd1g52MqKsotA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@vue/reactivity": "3.5.42",
+        "@vue/shared": "3.5.42"
+      }
+    },
+    "node_modules/@vue/runtime-dom": {
+      "version": "3.5.42",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.42.tgz",
+      "integrity": "sha512-rsCmhiWLaRxGltLwhlCWyYkFn7WAbKRh0q17eZ1A6Dq6eqc2ACQ61IIryxz0LrsvCzHSilLA9JHovVwM8CNE2g==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@vue/reactivity": "3.5.42",
+        "@vue/runtime-core": "3.5.42",
+        "@vue/shared": "3.5.42",
+        "csstype": "^3.2.3"
+      }
+    },
+    "node_modules/@vue/server-renderer": {
+      "version": "3.5.42",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.42.tgz",
+      "integrity": "sha512-2++5dUyYS4gvo7xQXSECUDhB7TS0aOl5SeVfC5qSq1Jgfhjvegw1zqhwTIR3imZ+QYPJQw9gfcFvXGAjGZ7ajQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@vue/compiler-ssr": "3.5.42",
+        "@vue/runtime-dom": "3.5.42",
+        "@vue/shared": "3.5.42"
+      }
+    },
+    "node_modules/@vue/shared": {
+      "version": "3.5.42",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.42.tgz",
+      "integrity": "sha512-2rPxex1jQf4jvl9MOHl6YaXCPcrNqz/FstMOEh3QWY+/OME9nQTvl9WYeCwhW7AFjaR0SnngZGlp/wkR6rkI6g==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/3d-force-graph": {
+      "version": "1.80.0",
+      "resolved": "https://registry.npmjs.org/3d-force-graph/-/3d-force-graph-1.80.0.tgz",
+      "integrity": "sha512-tzI353gW1nXPpnC7VTa3JjMg+3cp77qOLUFO0vucPTfF+q5R6sQsNsIqVTbRIb7RSypn14nBa4yfkOe9ThxASw==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "accessor-fn": "1",
+        "kapsule": "^1.16",
+        "three": ">=0.179 <1",
+        "three-forcegraph": "1",
+        "three-render-objects": "^1.41"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/accessor-fn": {
+      "version": "1.5.3",
+      "resolved": "https://registry.npmjs.org/accessor-fn/-/accessor-fn-1.5.3.tgz",
+      "integrity": "sha512-rkAofCwe/FvYFUlMB0v0gWmhqtfAtV1IUkdPbfhTUyYniu5LrC0A0UJkTH0Jv3S8SvwkmfuAlY+mQIJATdocMA==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/argparse": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-3.0.1.tgz",
+      "integrity": "sha512-nM4mHF/KM1v59ZNKX7zfusQz5wUAxR511YG8Vo6TyiV4aqhu++rbJW4v04xsWhpSsHFj66flT8P7znVpyO20xQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/puzrin"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/nodeca"
+        }
+      ],
+      "license": "PSF-2.0",
+      "peer": true
+    },
+    "node_modules/bezier-js": {
+      "version": "6.1.4",
+      "resolved": "https://registry.npmjs.org/bezier-js/-/bezier-js-6.1.4.tgz",
+      "integrity": "sha512-PA0FW9ZpcHbojUCMu28z9Vg/fNkwTj5YhusSAjHHDfHDGLxJ6YUKrAN2vk1fP2MMOxVw4Oko16FMlRGVBGqLKg==",
+      "license": "MIT",
+      "peer": true,
+      "funding": {
+        "type": "individual",
+        "url": "https://github.com/Pomax/bezierjs/blob/master/FUNDING.md"
+      }
+    },
+    "node_modules/canvas-color-tracker": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/canvas-color-tracker/-/canvas-color-tracker-1.3.2.tgz",
+      "integrity": "sha512-ryQkDX26yJ3CXzb3hxUVNlg1NKE4REc5crLBq661Nxzr8TNd236SaEf2ffYLXyI5tSABSeguHLqcVq4vf9L3Zg==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "tinycolor2": "^1.6.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/class-variance-authority": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.1.tgz",
+      "integrity": "sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==",
+      "license": "Apache-2.0",
+      "peer": true,
+      "dependencies": {
+        "clsx": "^2.1.1"
+      },
+      "funding": {
+        "url": "https://polar.sh/cva"
+      }
+    },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "license": "MIT",
+      "peer": true,
+      "bin": {
+        "cssesc": "bin/cssesc"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/csstype": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
+      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/d3-array": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
+      "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
+      "license": "ISC",
+      "peer": true,
+      "dependencies": {
+        "internmap": "1 - 2"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-binarytree": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/d3-binarytree/-/d3-binarytree-1.0.2.tgz",
+      "integrity": "sha512-cElUNH+sHu95L04m92pG73t2MEJXKu+GeKUN1TJkFsu93E5W8E9Sc3kHEGJKgenGvj19m6upSn2EunvMgMD2Yw==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+      "license": "ISC",
+      "peer": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-dispatch": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
+      "integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==",
+      "license": "ISC",
+      "peer": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-drag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-3.0.0.tgz",
+      "integrity": "sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==",
+      "license": "ISC",
+      "peer": true,
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-selection": "3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-ease": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
+      "license": "BSD-3-Clause",
+      "peer": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-force-3d": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/d3-force-3d/-/d3-force-3d-3.0.6.tgz",
+      "integrity": "sha512-4tsKHUPLOVkyfEffZo1v6sFHvGFwAIIjt/W8IThbp08DYAsXZck+2pSHEG5W1+gQgEvFLdZkYvmJAbRM2EzMnA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "d3-binarytree": "1",
+        "d3-dispatch": "1 - 3",
+        "d3-octree": "1",
+        "d3-quadtree": "1 - 3",
+        "d3-timer": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-format": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.2.tgz",
+      "integrity": "sha512-AJDdYOdnyRDV5b6ArilzCPPwc1ejkHcoyFarqlPqT7zRYjhavcT3uSrqcMvsgh2CgoPbK3RCwyHaVyxYcP2Arg==",
+      "license": "ISC",
+      "peer": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "license": "ISC",
+      "peer": true,
+      "dependencies": {
+        "d3-color": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-octree": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/d3-octree/-/d3-octree-1.1.0.tgz",
+      "integrity": "sha512-F8gPlqpP+HwRPMO/8uOu5wjH110+6q4cgJvgJT6vlpy3BEaDIKlTZrgHKZSp/i1InRpVfh4puY/kvL6MxK930A==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/d3-quadtree": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-3.0.1.tgz",
+      "integrity": "sha512-04xDrxQTDTCFwP5H6hRhsRcb9xxv2RzkcsygFzmkSIOJy3PeRJP7sNk3VRIbKXcog561P9oU0/rVH6vDROAgUw==",
+      "license": "ISC",
+      "peer": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-scale": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
+      "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
+      "license": "ISC",
+      "peer": true,
+      "dependencies": {
+        "d3-array": "2.10.0 - 3",
+        "d3-format": "1 - 3",
+        "d3-interpolate": "1.2.0 - 3",
+        "d3-time": "2.1.1 - 3",
+        "d3-time-format": "2 - 4"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-scale-chromatic": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-scale-chromatic/-/d3-scale-chromatic-3.1.0.tgz",
+      "integrity": "sha512-A3s5PWiZ9YCXFye1o246KoscMWqf8BsD9eRiJ3He7C9OBaxKhAd5TFCdEx/7VbKtxxTsu//1mMJFrEt572cEyQ==",
+      "license": "ISC",
+      "peer": true,
+      "dependencies": {
+        "d3-color": "1 - 3",
+        "d3-interpolate": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-selection": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
+      "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
+      "license": "ISC",
+      "peer": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
+      "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
+      "license": "ISC",
+      "peer": true,
+      "dependencies": {
+        "d3-array": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time-format": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
+      "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
+      "license": "ISC",
+      "peer": true,
+      "dependencies": {
+        "d3-time": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+      "license": "ISC",
+      "peer": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-transition": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-3.0.1.tgz",
+      "integrity": "sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==",
+      "license": "ISC",
+      "peer": true,
+      "dependencies": {
+        "d3-color": "1 - 3",
+        "d3-dispatch": "1 - 3",
+        "d3-ease": "1 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-timer": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "d3-selection": "2 - 3"
+      }
+    },
+    "node_modules/d3-zoom": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-3.0.0.tgz",
+      "integrity": "sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==",
+      "license": "ISC",
+      "peer": true,
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-drag": "2 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-selection": "2 - 3",
+        "d3-transition": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/data-bind-mapper": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/data-bind-mapper/-/data-bind-mapper-1.0.3.tgz",
+      "integrity": "sha512-QmU3lyEnbENQPo0M1F9BMu4s6cqNNp8iJA+b/HP2sSb7pf3dxwF3+EP1eO69rwBfH9kFJ1apmzrtogAmVt2/Xw==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "accessor-fn": "1"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/entities": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-8.0.0.tgz",
+      "integrity": "sha512-zwfzJecQ/Uej6tusMqwAqU/6KL2XaB2VZ2Jg54Je6ahNBGNH6Ek6g3jjNCF0fG9EWQKGZNddNjU5F1ZQn/sBnA==",
+      "license": "BSD-2-Clause",
+      "peer": true,
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/estree-walker": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/float-tooltip": {
+      "version": "1.7.5",
+      "resolved": "https://registry.npmjs.org/float-tooltip/-/float-tooltip-1.7.5.tgz",
+      "integrity": "sha512-/kXzuDnnBqyyWyhDMH7+PfP8J/oXiAavGzcRxASOMRHFuReDtofizLLJsf7nnDLAfEaMW4pVWaXrAjtnglpEkg==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "d3-selection": "2 - 3",
+        "kapsule": "^1.16",
+        "preact": "10"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/force-graph": {
+      "version": "1.51.4",
+      "resolved": "https://registry.npmjs.org/force-graph/-/force-graph-1.51.4.tgz",
+      "integrity": "sha512-TdJ2KbkoiDQ7NIRx8IPGD0mAXXpLhamS7c+b7W98b0MHG7lphnda1VOQX/98UDTsttIAdH4TcP0l0MauSnLK8w==",
+      "license": "MIT",
+      "peer": true,
+      "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"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/index-array-by": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/index-array-by/-/index-array-by-1.4.2.tgz",
+      "integrity": "sha512-SP23P27OUKzXWEC/TOyWlwLviofQkCSCKONnc62eItjp69yCZZPqDQtr3Pw5gJDnPeUMqExmKydNZaJO0FU9pw==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/internmap": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
+      "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
+      "license": "ISC",
+      "peer": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/kapsule": {
+      "version": "1.16.3",
+      "resolved": "https://registry.npmjs.org/kapsule/-/kapsule-1.16.3.tgz",
+      "integrity": "sha512-4+5mNNf4vZDSwPhKprKwz3330iisPrb08JyMgbsdFrimBCKNHecua/WBwvVg3n7vwx0C1ARjfhwIpbrbd9n5wg==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "lodash-es": "4"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/linkify-it": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-6.1.0.tgz",
+      "integrity": "sha512-wJ/TwpSDTLepCrQoYWYIExIKg5Zchex2Nn5yk2mFnB+6PtdkHtyLx742md9csRjjOnGkKIS/RrbY7l8D6gT9Vw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/puzrin"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/markdown-it"
+        }
+      ],
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "uc.micro": "^3.0.0"
+      }
+    },
+    "node_modules/lodash-es": {
+      "version": "4.18.1",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.18.1.tgz",
+      "integrity": "sha512-J8xewKD/Gk22OZbhpOVSwcs60zhd95ESDwezOFuA3/099925PdHJ7OFHNTGtajL3AlZkykD32HykiMo+BIBI8A==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/lucide-vue-next": {
+      "version": "0.563.0",
+      "resolved": "https://registry.npmjs.org/lucide-vue-next/-/lucide-vue-next-0.563.0.tgz",
+      "integrity": "sha512-zsE/lCKtmaa7bGfhSpN84br1K9YoQ5pCN+2oKWjQQG3Lo6ufUUKBuHSjNFI6RvUevxaajNXb8XwFUKeTXG3sIA==",
+      "deprecated": "Package deprecated. Please use @lucide/vue instead.",
+      "license": "ISC",
+      "peer": true,
+      "peerDependencies": {
+        "vue": ">=3.0.1"
+      }
+    },
+    "node_modules/magic-string": {
+      "version": "0.30.21",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
+      "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.5"
+      }
+    },
+    "node_modules/markdown-it": {
+      "version": "15.0.1",
+      "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-15.0.1.tgz",
+      "integrity": "sha512-9/7gE95FNPkfUWrjJIoHZza2iLmuJlPD0UNMxPi7bxUrbCR525YZY0r+zyfes0dZI5ZZ/uNIXUJca0pJvtw41g==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/puzrin"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/markdown-it"
+        }
+      ],
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "argparse": "^3.0.0",
+        "entities": "^8.0.0",
+        "linkify-it": "^6.0.0",
+        "mdurl": "^2.1.0",
+        "punycode.js": "^2.3.1",
+        "uc.micro": "^3.0.0"
+      },
+      "bin": {
+        "markdown-it": "bin/markdown-it.mjs"
+      }
+    },
+    "node_modules/mdurl": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-2.1.0.tgz",
+      "integrity": "sha512-1+HBaOx0zi/dQWht8rNv9MYf9qqpqL/kxI0hXImU6Y547zM6Sni8BQibt7ifgMcYtQg41ao3Ivd6cnSM86inpg==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.18",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.18.tgz",
+      "integrity": "sha512-DTg4MJbGMWkfi6VZFdNt2/caMbQy4Ou+Op/hJQvGEWcnVfoA1QA+xzRKAzw9jD6+GVOOeYr/mIcuDSdug6F6+w==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "peer": true,
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/ngraph.events": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/ngraph.events/-/ngraph.events-1.4.0.tgz",
+      "integrity": "sha512-NeDGI4DSyjBNBRtA86222JoYietsmCXbs8CEB0dZ51Xeh4lhVl1y3wpWLumczvnha8sFQIW4E0vvVWwgmX2mGw==",
+      "license": "BSD-3-Clause",
+      "peer": true
+    },
+    "node_modules/ngraph.forcelayout": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/ngraph.forcelayout/-/ngraph.forcelayout-3.3.1.tgz",
+      "integrity": "sha512-MKBuEh1wujyQHFTW57y5vd/uuEOK0XfXYxm3lC7kktjJLRdt/KEKEknyOlc6tjXflqBKEuYBBcu7Ax5VY+S6aw==",
+      "license": "BSD-3-Clause",
+      "peer": true,
+      "dependencies": {
+        "ngraph.events": "^1.0.0",
+        "ngraph.merge": "^1.0.0",
+        "ngraph.random": "^1.0.0"
+      }
+    },
+    "node_modules/ngraph.graph": {
+      "version": "20.1.2",
+      "resolved": "https://registry.npmjs.org/ngraph.graph/-/ngraph.graph-20.1.2.tgz",
+      "integrity": "sha512-W/G3GBR3Y5UxMLHTUCPP9v+pbtpzwuAEIqP5oZV+9IwgxAIEZwh+Foc60iPc1idlnK7Zxu0p3puxAyNmDvBd0Q==",
+      "license": "BSD-3-Clause",
+      "peer": true,
+      "dependencies": {
+        "ngraph.events": "^1.4.0"
+      }
+    },
+    "node_modules/ngraph.merge": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/ngraph.merge/-/ngraph.merge-1.0.0.tgz",
+      "integrity": "sha512-5J8YjGITUJeapsomtTALYsw7rFveYkM+lBj3QiYZ79EymQcuri65Nw3knQtFxQBU1r5iOaVRXrSwMENUPK62Vg==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/ngraph.random": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/ngraph.random/-/ngraph.random-1.2.0.tgz",
+      "integrity": "sha512-4EUeAGbB2HWX9njd6bP6tciN6ByJfoaAvmVL9QTaZSeXrW46eNGA9GajiXiPBbvFqxUWFkEbyo6x5qsACUuVfA==",
+      "license": "BSD-3-Clause",
+      "peer": true
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "license": "ISC",
+      "peer": true
+    },
+    "node_modules/polished": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/polished/-/polished-4.3.1.tgz",
+      "integrity": "sha512-OBatVyC/N7SCW/FaDHrSd+vn0o5cS855TOmYi4OkdWUMSJCET/xip//ch8xGUvtr3i44X9LVyWwQlRMTN3pwSA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/runtime": "^7.17.8"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/postcss": {
+      "version": "8.5.26",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.26.tgz",
+      "integrity": "sha512-u82N74LFzG8ca+dD8puPnplTXoGH4fTPpVGuIbt36G3qvNlkvfD0lEAZSxaly3KX8TS/L1A1gsCEmvKmBcVbkQ==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "nanoid": "^3.3.17",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/postcss-selector-parser": {
+      "version": "6.0.10",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
+      "integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/preact": {
+      "version": "10.29.8",
+      "resolved": "https://registry.npmjs.org/preact/-/preact-10.29.8.tgz",
+      "integrity": "sha512-ej2aVZ+vZ8WO7tvlQWRM9N63A0KzF9q4mWJfDUHgYaIofWY9hu74QdnQrjoPMmZi2/nZ5gN0bJCQF49xQqx09Q==",
+      "license": "MIT",
+      "peer": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/preact"
+      },
+      "peerDependencies": {
+        "preact-render-to-string": ">=5"
+      },
+      "peerDependenciesMeta": {
+        "preact-render-to-string": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/punycode.js": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/punycode.js/-/punycode.js-2.3.1.tgz",
+      "integrity": "sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "license": "BSD-3-Clause",
+      "peer": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/tailwind-merge": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.6.0.tgz",
+      "integrity": "sha512-uxL7qAVQriqRQPAyK3pj66VqskWqoZ37PW94jwOTwNfq/z9oyu1V+eqrZqtR2+fCiXdYOZe/Modt8GtvqNzu+w==",
+      "license": "MIT",
+      "peer": true,
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/dcastil"
+      }
+    },
+    "node_modules/tailwindcss": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.3.3.tgz",
+      "integrity": "sha512-gOhV3P7ufE62QDGg1zVaTgCR+EtPv92k2nIhVcVKcLmxT1sUBsQGhnZj175j+MqRt4zLF7ic+sCYjfhxMxj7YQ==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/three": {
+      "version": "0.185.1",
+      "resolved": "https://registry.npmjs.org/three/-/three-0.185.1.tgz",
+      "integrity": "sha512-5aojFCXKwnjBRZvUnt3WFfEcvUJgkN5LlijRFN95hMy8WVkG4I0QNcJE+OuWvuJ0bOdStrbfXn0pkd6/QyiAlg==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/three-forcegraph": {
+      "version": "1.43.4",
+      "resolved": "https://registry.npmjs.org/three-forcegraph/-/three-forcegraph-1.43.4.tgz",
+      "integrity": "sha512-FtmiZP/T16ZQaHza3JDaDn0YTXFtg9e7pGnTeU8nzu0NNkx7MpWbF/GvmpbQsWHx3rukHtkRv1fTorLPB3FDEA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "accessor-fn": "1",
+        "d3-array": "1 - 3",
+        "d3-force-3d": "2 - 3",
+        "d3-scale": "1 - 4",
+        "d3-scale-chromatic": "1 - 3",
+        "data-bind-mapper": "1",
+        "kapsule": "^1.16",
+        "ngraph.forcelayout": "3",
+        "ngraph.graph": "20",
+        "tinycolor2": "1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "three": ">=0.118.3"
+      }
+    },
+    "node_modules/three-render-objects": {
+      "version": "1.42.0",
+      "resolved": "https://registry.npmjs.org/three-render-objects/-/three-render-objects-1.42.0.tgz",
+      "integrity": "sha512-KYfkPrYGEbIK8ChFocWqOF1aAN80FBUBWVYB8mB2oBpVuVN+52FvvngVYB5ieFANQu7Rt21rPYZ/xKaAgVWWRQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@tweenjs/tween.js": "18 - 25",
+        "accessor-fn": "1",
+        "float-tooltip": "^1.7",
+        "kapsule": "^1.16",
+        "polished": "4"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "three": ">=0.179"
+      }
+    },
+    "node_modules/three-spritetext": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/three-spritetext/-/three-spritetext-1.10.0.tgz",
+      "integrity": "sha512-t08iP1FCU1lQh8T5MmCpdijKgas8GDHJE0LqMGBuVu3xqMMpFnEZhTlih7FlxLPQizHIGoumUSpfOlY1GO/Tgg==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "three": ">=0.86.0"
+      }
+    },
+    "node_modules/tinycolor2": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.6.0.tgz",
+      "integrity": "sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/uc.micro": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-3.0.0.tgz",
+      "integrity": "sha512-U3PppEkleoTnIfi8BozMx3yju3qc/L6SwqWo2Sw+54PX+PX0q9I+r1Um5HCmqD7n9VDX5/v3vQH/AjA6deDdtw==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/vue": {
+      "version": "3.5.42",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.42.tgz",
+      "integrity": "sha512-4RyHQTbQvOPs3MfvUO1Sg0YRrKNnA0mAVtvpd12Tg1fKDN7OHBUl1IqSn8zGJjK9nI3NkNp8cgTpVrSZC5TTcA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@vue/compiler-dom": "3.5.42",
+        "@vue/compiler-sfc": "3.5.42",
+        "@vue/runtime-dom": "3.5.42",
+        "@vue/server-renderer": "3.5.42",
+        "@vue/shared": "3.5.42"
+      },
+      "peerDependencies": {
+        "typescript": "*"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    }
+  }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..0928153
--- /dev/null
+++ b/package.json
@@ -0,0 +1,33 @@
+{
+  "name": "@sourceant/design",
+  "version": "0.1.0",
+  "description": "SourceAnt design system: tokens, primitives, and the graph renderer",
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
+  "exports": {
+    ".": "./src/index.js",
+    "./tokens.css": "./src/styles/tokens.css",
+    "./tailwind": "./tailwind-preset.js",
+    "./*": "./src/*"
+  },
+  "files": [
+    "src",
+    "tailwind-preset.js"
+  ],
+  "peerDependencies": {
+    "@tailwindcss/typography": "^0.5.20",
+    "3d-force-graph": "^1.80.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "d3-force-3d": "^3.0.6",
+    "force-graph": "^1.51.4",
+    "lucide-vue-next": "^0.563.0",
+    "markdown-it": "^15.0.1",
+    "tailwind-merge": "^3.4.0",
+    "three-spritetext": "^1.10.0",
+    "vue": "^3.5.0"
+  }
+}
diff --git a/scripts/check-exports.mjs b/scripts/check-exports.mjs
new file mode 100644
index 0000000..f8629e6
--- /dev/null
+++ b/scripts/check-exports.mjs
@@ -0,0 +1,56 @@
+/* Every path this package promises resolves to a file that exists.
+ *
+ * The package ships source rather than a build, so nothing fails until an
+ * application imports it. A renamed component or a missing entry point is a
+ * broken install for whoever depends on this, discovered at their build rather
+ * than ours.
+ */
+
+import { readFileSync, existsSync } from 'node:fs'
+import { dirname, join, resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const here = dirname(fileURLToPath(import.meta.url))
+const root = resolve(here, '..')
+const manifest = JSON.parse(readFileSync(join(root, 'package.json'), 'utf8'))
+
+const problems = []
+
+for (const [name, target] of Object.entries(manifest.exports ?? {})) {
+  // A wildcard promises a directory rather than one file.
+  const path = join(root, target.replace('/*', ''))
+  if (!existsSync(path)) {
+    problems.push(`exports "${name}" points at ${target}, which does not exist`)
+  }
+}
+
+for (const included of manifest.files ?? []) {
+  if (!existsSync(join(root, included))) {
+    problems.push(`files lists ${included}, which does not exist`)
+  }
+}
+
+// Imports here carry no extension, because a bundler adds one. Node does not,
+// so resolving them means trying what a bundler would.
+const EXTENSIONS = ['', '.js', '.ts', '.vue', '/index.js', '/index.ts']
+
+function resolves(from, target) {
+  return EXTENSIONS.some((suffix) => existsSync(join(root, from, target + suffix)))
+}
+
+// Everything the entry point names has to be there, since a component removed
+// or renamed leaves an export nobody can import.
+const index = readFileSync(join(root, 'src/index.js'), 'utf8')
+for (const [, target] of index.matchAll(/from '(\.\/[^']+)'/g)) {
+  if (!resolves('src', target.slice(2))) {
+    problems.push(`src/index.js exports ${target}, which does not exist`)
+  }
+}
+
+if (problems.length) {
+  console.error('This package promises what it does not ship:')
+  for (const one of problems) console.error(`  ${one}`)
+  process.exit(1)
+}
+
+console.log('Every export resolves.')
diff --git a/src/components/Avatar.vue b/src/components/Avatar.vue
new file mode 100644
index 0000000..f57c797
--- /dev/null
+++ b/src/components/Avatar.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { cn } from '../lib/utils'
+
+interface Props {
+  src?: string | null
+  alt?: string
+  fallback?: string
+  size?: 'sm' | 'md' | 'lg'
+  class?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 'md',
+  fallback: '?',
+})
+
+const sizeClasses = {
+  sm: 'h-8 w-8 text-xs',
+  md: 'h-10 w-10 text-sm',
+  lg: 'h-12 w-12 text-base',
+}
+
+const imageError = ref(false)
+
+const showFallback = computed(() => !props.src || imageError.value)
+</script>
+
+<template>
+  <div
+    :class="cn(
+      'relative flex shrink-0 overflow-hidden rounded-full',
+      sizeClasses[size],
+      props.class
+    )"
+  >
+    <img
+      v-if="!showFallback"
+      :src="src ?? undefined"
+      :alt="alt"
+      class="aspect-square h-full w-full object-cover"
+      @error="imageError = true"
+    />
+    <div
+      v-else
+      class="flex h-full w-full items-center justify-center bg-muted font-medium text-muted-foreground"
+    >
+      {{ fallback }}
+    </div>
+  </div>
+</template>
diff --git a/src/components/Badge.vue b/src/components/Badge.vue
new file mode 100755
index 0000000..d397e92
--- /dev/null
+++ b/src/components/Badge.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '../lib/utils'
+
+const badgeVariants = cva(
+  'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  {
+    variants: {
+      variant: {
+        default: 'border-transparent bg-primary text-primary-foreground shadow',
+        secondary: 'border-transparent bg-secondary text-secondary-foreground',
+        destructive: 'border-transparent bg-destructive text-destructive-foreground shadow',
+        outline: 'text-foreground',
+        success: 'border-transparent bg-success/20 text-success',
+        warning: 'border-transparent bg-warning/20 text-warning',
+        glow: 'border-primary/30 bg-primary/10 text-primary',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+)
+
+type BadgeVariants = VariantProps<typeof badgeVariants>
+
+interface Props {
+  variant?: BadgeVariants['variant']
+  class?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'default',
+})
+</script>
+
+<template>
+  <div :class="cn(badgeVariants({ variant }), props.class)">
+    <slot />
+  </div>
+</template>
diff --git a/src/components/Button.vue b/src/components/Button.vue
new file mode 100755
index 0000000..351239a
--- /dev/null
+++ b/src/components/Button.vue
@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '../lib/utils'
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
+        destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
+        outline: 'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
+        secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+        glow: 'bg-primary text-primary-foreground shadow-lg hover:bg-primary/90 glow-sm hover:glow',
+      },
+      size: {
+        default: 'h-9 px-4 py-2',
+        sm: 'h-8 rounded-md px-3 text-xs',
+        lg: 'h-11 rounded-md px-8',
+        xl: 'h-12 rounded-lg px-10 text-base',
+        icon: 'h-9 w-9',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+)
+
+type ButtonVariants = VariantProps<typeof buttonVariants>
+
+interface Props {
+  variant?: ButtonVariants['variant']
+  size?: ButtonVariants['size']
+  as?: string
+  class?: string
+  disabled?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'default',
+  size: 'default',
+  as: 'button',
+})
+</script>
+
+<template>
+  <component
+    :is="as"
+    :class="cn(buttonVariants({ variant, size }), props.class)"
+    :disabled="disabled"
+  >
+    <slot />
+  </component>
+</template>
diff --git a/src/components/Card.vue b/src/components/Card.vue
new file mode 100644
index 0000000..eaa6c6b
--- /dev/null
+++ b/src/components/Card.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '../lib/utils'
+
+interface Props {
+  class?: HTMLAttributes['class']
+  hover?: boolean
+  glow?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  hover: false,
+  glow: false,
+})
+</script>
+
+<template>
+  <div
+    :class="cn(
+      'rounded-lg border bg-card text-card-foreground shadow-sm',
+      hover && 'transition-all duration-200 hover:border-primary/50 hover:-translate-y-1',
+      glow && 'glow-sm',
+      props.class
+    )"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/src/components/Chip.vue b/src/components/Chip.vue
new file mode 100644
index 0000000..7190ae2
--- /dev/null
+++ b/src/components/Chip.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { X } from 'lucide-vue-next'
+import { cn } from '../lib/utils'
+
+/** One of several things somebody chose, and can unchoose.
+ *
+ * A badge says what something is; a chip says what somebody picked. The
+ * difference is that the second one comes off. A list of choices with no way
+ * back out of them is a list of decisions, which is a worse thing to hand
+ * anybody.
+ */
+
+type Tone = 'default' | 'success' | 'warning' | 'danger' | 'muted'
+
+interface Props {
+  tone?: Tone
+  /** Off where the chip reports something rather than holding a choice. */
+  removable?: boolean
+  /** What it is, for whoever is not looking at it. */
+  label?: string
+  class?: string
+}
+
+const props = withDefaults(defineProps<Props>(), { tone: 'default', removable: false })
+defineEmits<{ remove: [] }>()
+
+const TONES: Record<Tone, string> = {
+  default: 'border-primary/30 bg-primary/10 text-foreground',
+  success: 'border-success/40 bg-success/10 text-foreground',
+  warning: 'border-warning/40 bg-warning/10 text-foreground',
+  danger: 'border-destructive/40 bg-destructive/10 text-foreground',
+  muted: 'border-border bg-muted/60 text-muted-foreground',
+}
+</script>
+
+<template>
+  <span
+    :class="cn(
+      'inline-flex max-w-full items-center gap-1 rounded-full border py-0.5 pl-2.5 text-xs',
+      removable ? 'pr-1' : 'pr-2.5',
+      TONES[tone],
+      props.class,
+    )"
+  >
+    <slot name="mark" />
+    <span class="min-w-0 truncate"><slot /></span>
+    <button
+      v-if="removable"
+      type="button"
+      class="shrink-0 rounded-full p-0.5 text-muted-foreground transition-colors hover:bg-background/60 hover:text-foreground"
+      :aria-label="label ? `Remove ${label}` : 'Remove'"
+      @click="$emit('remove')"
+    >
+      <X class="h-3 w-3" />
+    </button>
+  </span>
+</template>
diff --git a/src/components/CodeGraph.vue b/src/components/CodeGraph.vue
new file mode 100644
index 0000000..7cb513d
--- /dev/null
+++ b/src/components/CodeGraph.vue
@@ -0,0 +1,359 @@
+<script setup lang="ts">
+import { ref, onMounted, onBeforeUnmount, watch, computed } from 'vue'
+import type { GraphNode, KnowledgeGraphData } from '../types'
+import { useContextKinds } from '../composables/useContextKinds'
+
+interface Props {
+  height?: string
+  repo?: string
+  mode?: '2d' | '3d' | 'web' | 'tree' | 'radial' | 'layered'
+  /** The graph to draw. Nothing is drawn until there is one. */
+  data?: KnowledgeGraphData | null
+  /** Parts the reader has switched off in the legend. */
+  hidden?: number[]
+}
+const emit = defineEmits<{ select: [id: string] }>()
+const props = withDefaults(defineProps<Props>(), {
+  height: '460px',
+  repo: '',
+  mode: '2d',
+  data: null,
+  hidden: () => [],
+})
+
+/** A node once the canvas has what it needs: how big, what colour, and whether
+ *  it is busy enough to be worth naming. The engine adds a position in place. */
+interface Drawn extends GraphNode {
+  color: string
+  radius: number
+  named: boolean
+  x: number
+  y: number
+  z?: number
+}
+/** A link once the engine has resolved its ends from ids to the nodes. */
+interface DrawnLink {
+  source: Drawn | string
+  target: Drawn | string
+  type?: string
+}
+/** Either end, once resolved. Before the first tick they are still ids. */
+const ends = (l: DrawnLink): [Drawn | null, Drawn | null] => [
+  typeof l.source === 'object' ? l.source : null,
+  typeof l.target === 'object' ? l.target : null,
+]
+const together = (l: DrawnLink): Drawn | null => {
+  const [a, b] = ends(l)
+  return a && b && a.community === b.community && a.community !== null ? a : null
+}
+
+const el = ref<HTMLElement | null>(null)
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+let graph: any = null
+let engine: '2d' | '3d' | null = null
+let ro: ResizeObserver | null = null
+// Where every node was last time, so a refetch settles rather than restarting.
+const seats = new Map<string, { x: number, y: number, z: number }>()
+
+const { ink } = useContextKinds()
+
+/**
+ * Ten colours for the parts of a code graph, and no more: past this the palette
+ * repeats and colour stops meaning anything. Tableau 10, which is chosen to stay
+ * distinguishable next to itself.
+ */
+const PARTS = [
+  '#4E79A7', '#F28E2B', '#E15759', '#76B7B2', '#59A14F',
+  '#EDC948', '#B07AA1', '#FF9DA7', '#9C755F', '#BAB0AC',
+]
+/** Everything outside the coloured parts, and every line: present, not shouting. */
+const QUIET = '#6b7280'
+
+/**
+ * The graph draws to canvas and WebGL, where a CSS custom property is nothing,
+ * so these have to be concrete. Kinds come from the one table the rest of the
+ * app uses; only the two the knowledge graph adds are named here.
+ */
+function colorFor(node: { kind: string, community?: number | null }): string {
+  if (typeof node.community === 'number') {
+    return PARTS[node.community % PARTS.length]!
+  }
+  const kind = (node.kind || '').toLowerCase()
+  if (kind === 'code') return '#E20C18'
+  if (kind === 'file') return QUIET
+  // A code graph node outside a coloured part, rather than a knowledge kind.
+  if (['class', 'function', 'method', 'module', 'route', 'variable', 'symbol'].includes(kind)) {
+    return QUIET
+  }
+  return ink(kind)
+}
+
+function shortName(name: string): string {
+  return name && name.length > 28 ? `${name.slice(0, 27)}…` : name
+}
+
+const hasGraph = computed(() => !!props.data && props.data.nodes.length > 0)
+defineExpose({ hasGraph })
+
+const hiddenParts = computed(() => new Set(props.hidden))
+
+/**
+ * The drawing, with everything the canvas needs worked out once rather than per
+ * frame: size, colour, and whether a node is big enough to earn a label.
+ */
+function effectiveData() {
+  const src = props.data ?? { nodes: [], links: [] }
+  const shown = src.nodes.filter(
+    n => typeof n.community !== 'number' || !hiddenParts.value.has(n.community),
+  )
+  const here = new Set(shown.map(n => n.id))
+  const busiest = Math.max(1, ...shown.map(n => n.degree ?? 0))
+
+  const nodes = shown.map((n) => {
+    const seat = seats.get(n.id)
+    return {
+      ...n,
+      ...(seat ?? {}),
+      color: colorFor(n),
+      // Sized against how much meets here, not against whichever node happens
+      // to be busiest. Measured relatively, a graph where the busiest node has
+      // three neighbours drew half of itself at full size, which says "these
+      // are the big ones" about a graph that has none.
+      //
+      // Square root, not linear: linear makes one hub enormous and flattens
+      // everything else onto the floor, which is the same as no sizing at all.
+      radius: Math.min(3 + 2.4 * Math.sqrt(n.degree ?? 0), 11),
+      // Named where something actually meets, and where a name is worth the
+      // room. Every label is a moving object once the layout settles, so a
+      // drawing that names most of itself is text sliding over a picture.
+      named: (n.degree ?? 0) >= Math.max(4, busiest * 0.5),
+    }
+  })
+
+  const links = src.links
+    .filter(l => here.has(String(l.source)) && here.has(String(l.target)))
+    .map(l => ({ ...l }))
+
+  return { nodes, links }
+}
+
+/**
+ * Lines fade as there are more of them. Two thousand at full strength is a
+ * white haze with nodes somewhere inside it; the nodes stay bright and the mesh
+ * behind them recedes.
+ */
+function linkAlpha(count: number): number {
+  return Math.max(0.06, Math.min(0.5, Math.sqrt(400 / Math.max(1, count))))
+}
+
+/** A hex colour at a given strength, which is the only form a canvas stroke takes. */
+function faded(hex: string, alpha: number): string {
+  const n = parseInt(hex.slice(1), 16)
+  const a = Math.max(0, Math.min(1, alpha)).toFixed(3)
+  return `rgba(${(n >> 16) & 255}, ${(n >> 8) & 255}, ${n & 255}, ${a})`
+}
+
+const dagModeFor = (m: string): string | null =>
+  m === 'tree' ? 'td' : m === 'radial' ? 'radialout' : m === 'layered' ? 'zout' : null
+
+function remember() {
+  if (!graph) return
+  for (const node of graph.graphData().nodes) {
+    if (Number.isFinite(node.x)) {
+      seats.set(node.id, { x: node.x, y: node.y, z: node.z ?? 0 })
+    }
+  }
+}
+
+function teardown() {
+  remember()
+  if (graph) {
+    graph._destructor?.()
+    graph = null
+  }
+  if (el.value) el.value.innerHTML = ''
+}
+
+async function mount(mode: string) {
+  if (!el.value) return
+  const want: '2d' | '3d' = mode === '2d' ? '2d' : '3d'
+
+  if (graph && engine === want) {
+    if (want === '3d') graph.dagMode(dagModeFor(mode))
+    remember()
+    graph.graphData(effectiveData())
+    return
+  }
+
+  teardown()
+  engine = want
+
+  if (want === '2d') {
+    const ForceGraph = (await import('force-graph')).default
+    const { forceCollide, forceManyBody, forceX, forceY } = await import('d3-force-3d')
+    const drawing = effectiveData()
+    const alpha = linkAlpha(drawing.links.length)
+    let hovered: string | null = null
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    graph = new (ForceGraph as any)(el.value)
+    graph
+      .backgroundColor('rgba(0,0,0,0)')
+      .graphData(drawing)
+      .nodeRelSize(4)
+      .nodeColor((n: Drawn) => n.color)
+      .nodeLabel((n: Drawn) => (n.path ? `${n.name} — ${n.path}` : n.name))
+      .nodeCanvasObject((node: Drawn, ctx: CanvasRenderingContext2D, scale: number) => {
+        const lit = !hovered || hovered === node.id
+        ctx.globalAlpha = lit ? 1 : 0.25
+        ctx.beginPath()
+        ctx.arc(node.x, node.y, node.radius, 0, 2 * Math.PI)
+        ctx.fillStyle = node.color
+        ctx.fill()
+
+        if (!node.named && hovered !== node.id) {
+          ctx.globalAlpha = 1
+          return
+        }
+        // Held at a constant size on screen, so zooming in reveals more of the
+        // graph rather than magnifying the words.
+        const fontSize = Math.max(11 / scale, 1.5)
+        ctx.font = `${fontSize}px ui-sans-serif, system-ui, sans-serif`
+        ctx.fillStyle = node.color
+        ctx.textAlign = 'left'
+        ctx.textBaseline = 'middle'
+        ctx.fillText(shortName(node.name), node.x + node.radius + 2 / scale, node.y)
+        ctx.globalAlpha = 1
+      })
+      .nodePointerAreaPaint((node: Drawn, color: string, ctx: CanvasRenderingContext2D) => {
+        ctx.fillStyle = color
+        ctx.beginPath()
+        ctx.arc(node.x, node.y, node.radius + 2, 0, 2 * Math.PI)
+        ctx.fill()
+      })
+      // A line between two parts is the interesting one, so it keeps its colour
+      // while a line inside a part takes the colour of the part it is inside.
+      .linkColor((l: DrawnLink) => {
+        const inside = together(l)
+        return faded(inside ? inside.color : QUIET, alpha * (inside ? 1.6 : 1))
+      })
+      .linkWidth(0.6)
+      .linkDirectionalArrowLength(2.5)
+      .linkDirectionalArrowRelPos(1)
+      .linkLabel((l: DrawnLink) => l.type ?? '')
+      .onNodeHover((node: Drawn | null) => {
+        hovered = node ? node.id : null
+        if (el.value) el.value.style.cursor = node ? 'pointer' : ''
+        // The flat drawing only repaints on a tick, and the layout settles, so
+        // after it has come to rest nothing would show what is under the
+        // cursor.
+        graph?.refresh?.()
+      })
+      .width(el.value.clientWidth)
+      .height(el.value.clientHeight)
+      .onNodeClick((node: Drawn) => emit('select', String(node.id)))
+
+    graph.d3AlphaDecay(0.02).d3VelocityDecay(0.35).cooldownTicks(220)
+
+    /**
+     * The defaults produce exactly the picture this replaces. Repulsion reaches
+     * across the entire canvas with no cutoff, so anything loosely attached
+     * accelerates away and never comes back; nothing pulls a node towards the
+     * middle, because the built-in centring only slides the whole cloud; and
+     * there is no collision at all, so the connected part collapses into a knot
+     * too dense to read.
+     */
+    graph.d3Force('charge', forceManyBody().strength(-140).distanceMax(420))
+    graph.d3Force('center', null)
+    graph.d3Force('x', forceX(0).strength(0.03))
+    graph.d3Force('y', forceY(0).strength(0.03))
+    graph.d3Force('collide', forceCollide((n: Drawn) => n.radius + 2).iterations(2))
+    // Symbols in one part sit closer together than symbols in different ones,
+    // which is what makes a part read as a part.
+    graph.d3Force('link')
+      ?.distance((l: DrawnLink) => (together(l) ? 26 : 70))
+      .strength((l: DrawnLink) => (together(l) ? 0.7 : 0.08))
+
+    let fitted = false
+    graph.onEngineTick(() => {
+      // Fit once it has taken shape, rather than after the fifteen second
+      // timeout the engine would otherwise be left to hit.
+      if (!fitted && graph.d3Force('link')) {
+        fitted = true
+        setTimeout(() => graph?.zoomToFit(600, 60), 700)
+      }
+    })
+    graph.onEngineStop(() => {
+      remember()
+      graph?.zoomToFit(600, 60)
+    })
+    return
+  }
+
+  const ForceGraph3D = (await import('3d-force-graph')).default
+  const THREE = await import('three')
+  const drawing = effectiveData()
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  graph = new (ForceGraph3D as any)(el.value)
+  graph
+    .backgroundColor('rgba(0,0,0,0)')
+    .showNavInfo(false)
+    .onDagError(() => undefined)
+    .dagLevelDistance(46)
+    .dagMode(dagModeFor(mode))
+    .graphData(drawing)
+    .nodeLabel((n: Drawn) => (n.path ? `${n.name} — ${n.path}` : n.name))
+    // A sphere, not a floating word. Drawn as text the graph had no shape at
+    // all: no hubs, no clusters, just labels hanging in the dark.
+    .nodeThreeObject((node: Drawn) => {
+      const geometry = new THREE.SphereGeometry(node.radius, 12, 10)
+      const material = new THREE.MeshLambertMaterial({
+        color: node.color,
+        transparent: true,
+        opacity: 0.92,
+      })
+      return new THREE.Mesh(geometry, material)
+    })
+    .linkColor(() => QUIET)
+    .linkOpacity(linkAlpha(drawing.links.length))
+    .linkWidth(0.5)
+    .linkDirectionalArrowLength(2)
+    .linkDirectionalArrowRelPos(1)
+    .linkLabel((l: DrawnLink) => l.type ?? '')
+    .width(el.value.clientWidth)
+    .height(el.value.clientHeight)
+    .onNodeClick((node: Drawn) => emit('select', String(node.id)))
+
+  graph.d3Force('charge')?.strength(-140).distanceMax(420)
+  graph.onEngineStop(() => {
+    remember()
+    graph?.zoomToFit(600, 60)
+  })
+}
+
+onMounted(async () => {
+  await mount(props.mode)
+  ro = new ResizeObserver(() => {
+    if (graph && el.value) graph.width(el.value.clientWidth).height(el.value.clientHeight)
+  })
+  if (el.value) ro.observe(el.value)
+})
+
+watch(() => props.mode, m => mount(m))
+watch(() => props.repo, () => {
+  // A different repository is a different graph, so nothing is worth keeping.
+  seats.clear()
+  mount(props.mode)
+})
+watch(() => props.data, () => mount(props.mode))
+watch(() => props.hidden, () => mount(props.mode), { deep: true })
+
+onBeforeUnmount(() => {
+  if (ro) { ro.disconnect(); ro = null }
+  teardown()
+})
+</script>
+
+<template>
+  <div ref="el" :style="{ height: props.height }" class="w-full" />
+</template>
diff --git a/src/components/Diff.vue b/src/components/Diff.vue
new file mode 100644
index 0000000..c68cbab
--- /dev/null
+++ b/src/components/Diff.vue
@@ -0,0 +1,211 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { cn } from '../lib/utils'
+import DotIndicator from './DotIndicator.vue'
+import Markdown from './Markdown.vue'
+
+/** What changed in one file, with room for things said about a line.
+ *
+ * A unified patch already carries the line numbers on both sides, so they are
+ * read out of it rather than counted: a hunk header says where it starts, and
+ * every line after it moves one side, the other, or both.
+ */
+
+type Tone = 'neutral' | 'info' | 'success' | 'warning' | 'danger'
+
+interface Note {
+  line?: number | null
+  severity?: string
+  /** Markdown, because a model writes backticks and lists whether or not
+   * anybody asked it to. Rendered as text it shows the punctuation. */
+  detail: string
+  /** What to put there instead, where whoever said it offered one. */
+  code?: string
+  /** What it replaces. Without it a suggestion is an addition out of nowhere,
+   * and the reader has to find what is going away themselves. */
+  replacing?: string
+  /** Who said it: a skill's name, or what kind of suggestion it is. */
+  from?: string
+  /** What kind of thing it is, in colour. */
+  tone?: Tone
+}
+
+interface Props {
+  patch?: string
+  /** Anything said about a line, drawn where it was said. */
+  notes?: Note[]
+  class?: string
+}
+
+const props = withDefaults(defineProps<Props>(), { patch: '', notes: () => [] })
+
+const EDGE: Record<string, string> = {
+  neutral: 'bg-card',
+  info: 'border-primary/30 bg-primary/5',
+  success: 'border-success/40 bg-success/5',
+  warning: 'border-warning/40 bg-warning/5',
+  danger: 'border-destructive/40 bg-destructive/5',
+}
+
+const LABEL: Record<string, string> = {
+  neutral: 'text-muted-foreground',
+  info: 'text-primary',
+  success: 'text-success',
+  warning: 'text-warning',
+  danger: 'text-destructive',
+}
+
+function edge(note: Note): string {
+  if (note.severity === 'blocking') return EDGE.danger
+  return EDGE[note.tone ?? 'neutral'] ?? EDGE.neutral
+}
+
+function label(note: Note): string {
+  if (note.severity === 'blocking') return LABEL.danger
+  return LABEL[note.tone ?? 'neutral'] ?? LABEL.neutral
+}
+
+const HUNK = /^@@ -(\d+)(?:,\d+)? \+(\d+)(?:,\d+)? @@/
+
+interface Row {
+  kind: 'hunk' | 'added' | 'removed' | 'kept' | 'meta'
+  text: string
+  before: number | null
+  after: number | null
+}
+
+const rows = computed<Row[]>(() => {
+  const out: Row[] = []
+  let before = 0
+  let after = 0
+  let started = false
+
+  for (const line of (props.patch ?? '').split('\n')) {
+    const hunk = HUNK.exec(line)
+    if (hunk) {
+      before = Number(hunk[1])
+      after = Number(hunk[2])
+      started = true
+      out.push({ kind: 'hunk', text: line, before: null, after: null })
+      continue
+    }
+    // Everything before the first hunk is git telling you which file this is,
+    // which the page has already said.
+    if (!started) continue
+
+    if (line.startsWith('+')) {
+      out.push({ kind: 'added', text: line.slice(1), before: null, after: after++ })
+    } else if (line.startsWith('-')) {
+      out.push({ kind: 'removed', text: line.slice(1), before: before++, after: null })
+    } else if (line.startsWith('\\')) {
+      out.push({ kind: 'meta', text: line, before: null, after: null })
+    } else {
+      out.push({ kind: 'kept', text: line.slice(1), before: before++, after: after++ })
+    }
+  }
+  return out
+})
+
+const TONE: Record<string, string> = {
+  added: 'bg-success/10',
+  removed: 'bg-destructive/10',
+  hunk: 'bg-muted/60 text-muted-foreground',
+  meta: 'text-muted-foreground',
+  kept: '',
+}
+
+const MARK: Record<string, string> = { added: '+', removed: '-', kept: ' ', hunk: '', meta: '' }
+
+// Said about a line, so it can be drawn under it.
+const said = computed(() => {
+  const by = new Map<number, Note[]>()
+  for (const note of props.notes ?? []) {
+    if (!note.line) continue
+    by.set(note.line, [...(by.get(note.line) ?? []), note])
+  }
+  return by
+})
+
+// Anything said about the file rather than about a line in it.
+const overall = computed(() => (props.notes ?? []).filter((note) => !note.line))
+</script>
+
+<template>
+  <div :class="cn('overflow-hidden rounded-md border', props.class)">
+    <div v-if="overall.length" class="space-y-2 border-b bg-muted/30 p-3">
+      <div
+        v-for="(note, index) in overall"
+        :key="index"
+        class="rounded border text-sm"
+        :class="edge(note)"
+      >
+        <div class="px-3 py-2">
+          <DotIndicator
+            v-if="note.from"
+            :tone="note.severity === 'blocking' ? 'danger' : (note.tone ?? 'neutral')"
+            :title="String(note.from)"
+            :label="String(note.from).toLowerCase()"
+            class="mr-2"
+          />
+          <Markdown :source="note.detail" class="inline [&>p]:inline" />
+        </div>
+        <pre
+          v-if="note.replacing"
+          class="overflow-x-auto border-t bg-destructive/10 px-3 py-2 font-mono text-xs"
+        >{{ note.replacing }}</pre>
+        <pre
+          v-if="note.code"
+          class="overflow-x-auto border-t bg-success/10 px-3 py-2 font-mono text-xs"
+        >{{ note.code }}</pre>
+      </div>
+    </div>
+
+    <div v-if="!rows.length" class="p-4 text-sm text-muted-foreground">
+      Nothing to show for this one. It may be a file git stores whole rather than as lines.
+    </div>
+
+    <div v-else class="overflow-x-auto">
+      <table class="w-full border-collapse font-mono text-xs leading-relaxed">
+        <tbody>
+          <template v-for="(row, index) in rows" :key="index">
+            <tr :class="TONE[row.kind]">
+              <td class="w-12 select-none border-r px-2 text-right align-top text-muted-foreground">
+                {{ row.before ?? '' }}
+              </td>
+              <td class="w-12 select-none border-r px-2 text-right align-top text-muted-foreground">
+                {{ row.after ?? '' }}
+              </td>
+              <td class="w-4 select-none pl-2 align-top text-muted-foreground">{{ MARK[row.kind] }}</td>
+              <td class="whitespace-pre-wrap break-all py-0.5 pr-3 align-top">{{ row.text }}</td>
+            </tr>
+
+            <tr v-for="(note, at) in said.get(row.after ?? -1) ?? []" :key="`${index}-${at}`">
+              <td colspan="4" class="px-3 py-2">
+                <div class="rounded border font-sans text-sm" :class="edge(note)">
+                  <div class="px-3 py-2">
+                    <DotIndicator
+                      v-if="note.from"
+                      :tone="note.severity === 'blocking' ? 'danger' : (note.tone ?? 'neutral')"
+                      :title="String(note.from)"
+                      :label="String(note.from).toLowerCase()"
+                      class="mr-2"
+                    />
+                    <Markdown :source="note.detail" class="inline [&>p]:inline" />
+                  </div>
+                  <pre
+                    v-if="note.replacing"
+                    class="overflow-x-auto border-t bg-destructive/10 px-3 py-2 font-mono text-xs"
+                  >{{ note.replacing }}</pre>
+                  <pre
+                    v-if="note.code"
+                    class="overflow-x-auto border-t bg-success/10 px-3 py-2 font-mono text-xs"
+                  >{{ note.code }}</pre>
+                </div>
+              </td>
+            </tr>
+          </template>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
diff --git a/src/components/DotIndicator.vue b/src/components/DotIndicator.vue
new file mode 100644
index 0000000..c70d7f8
--- /dev/null
+++ b/src/components/DotIndicator.vue
@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { cn } from '../lib/utils'
+
+/** One thing's state, in the smallest mark that can carry it.
+ *
+ * Small enough to sit inside a line of code without moving it, which is what a
+ * badge cannot do: a word in a box next to a diff line pushes the line and
+ * reads louder than the code it is about.
+ *
+ * Bright rather than tinted, because at this size a wash of colour is grey.
+ * Always give it a title: colour alone is not readable to everyone, and this
+ * has no text of its own unless one is passed.
+ */
+
+type Tone = 'neutral' | 'info' | 'success' | 'warning' | 'danger'
+
+interface Props {
+  tone?: Tone
+  /** Said out loud, and shown on hover. Colour alone is not a label. */
+  title: string
+  /** Shown beside the dot, for a list where there is room for one. */
+  label?: string
+  /** For something still happening. */
+  pulse?: boolean
+  class?: string
+}
+
+const props = withDefaults(defineProps<Props>(), { tone: 'neutral', pulse: false })
+
+const FILL: Record<Tone, string> = {
+  neutral: 'bg-muted-foreground',
+  info: 'bg-primary',
+  success: 'bg-success',
+  warning: 'bg-warning',
+  danger: 'bg-destructive',
+}
+
+const INK: Record<Tone, string> = {
+  neutral: 'text-muted-foreground',
+  info: 'text-primary',
+  success: 'text-success',
+  warning: 'text-warning',
+  danger: 'text-destructive',
+}
+</script>
+
+<template>
+  <span
+    :class="cn('inline-flex items-center gap-1.5 align-middle', props.class)"
+    :title="title"
+  >
+    <span class="relative flex h-2 w-2 shrink-0">
+      <span
+        v-if="pulse"
+        :class="cn('absolute inline-flex h-full w-full animate-ping rounded-full opacity-60', FILL[tone])"
+      />
+      <span :class="cn('relative inline-flex h-2 w-2 rounded-full', FILL[tone])" />
+    </span>
+    <span v-if="label" :class="cn('text-xs font-medium', INK[tone])">{{ label }}</span>
+    <span v-else class="sr-only">{{ title }}</span>
+  </span>
+</template>
diff --git a/src/components/Empty.vue b/src/components/Empty.vue
new file mode 100644
index 0000000..d8e65f0
--- /dev/null
+++ b/src/components/Empty.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { cn } from '../lib/utils'
+import Card from './Card.vue'
+
+/** A list with nothing in it, and what to do about that.
+ *
+ * Title says what is missing, body says why it is worth having, actions are
+ * how to get one. One padding and one measure across every page.
+ */
+
+interface Props {
+  title: string
+  /** Quieter, for a state nobody needs to act on. */
+  compact?: boolean
+  class?: string
+}
+
+const props = withDefaults(defineProps<Props>(), { compact: false })
+</script>
+
+<template>
+  <Card :class="cn('px-6 text-center', props.compact ? 'py-8' : 'py-16', props.class)">
+    <div v-if="$slots.icon" class="mb-3 flex justify-center text-muted-foreground">
+      <slot name="icon" />
+    </div>
+    <h2 :class="cn('font-semibold', props.compact ? 'text-base' : 'text-lg')">{{ title }}</h2>
+    <p
+      v-if="$slots.default"
+      class="mx-auto mt-1 max-w-lg text-sm text-muted-foreground"
+    >
+      <slot />
+    </p>
+    <div v-if="$slots.actions" class="mt-4 flex flex-wrap items-center justify-center gap-2">
+      <slot name="actions" />
+    </div>
+  </Card>
+</template>
diff --git a/src/components/Field.vue b/src/components/Field.vue
new file mode 100644
index 0000000..3c67b09
--- /dev/null
+++ b/src/components/Field.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { cn } from '../lib/utils'
+
+/** A label, what it controls, and whatever has to be said about it.
+ *
+ * Every form in the product had its own spelling of the same three lines, so
+ * the label was uppercase in one place and not another. */
+
+interface Props {
+  label?: string
+  /** Said under the control, for what a person needs to know before typing. */
+  hint?: string
+  /** Said instead of the hint, when something is wrong. */
+  error?: string
+  for?: string
+  class?: string
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <div :class="cn('w-full', props.class)">
+    <label
+      v-if="label"
+      :for="props.for"
+      class="mb-1.5 flex items-center gap-2 text-xs font-medium uppercase tracking-wider text-muted-foreground"
+    >
+      {{ label }}
+      <slot name="label" />
+    </label>
+    <slot />
+    <p v-if="error" class="mt-1 text-xs text-destructive">{{ error }}</p>
+    <p v-else-if="hint" class="mt-1 text-xs text-muted-foreground">{{ hint }}</p>
+  </div>
+</template>
diff --git a/src/components/Input.vue b/src/components/Input.vue
new file mode 100644
index 0000000..1c135ba
--- /dev/null
+++ b/src/components/Input.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { controlVariants, type ControlSize } from '../lib/control'
+import { cn } from '../lib/utils'
+
+/** One line of text. Every screen wrote these classes out by hand. */
+
+interface Props {
+  modelValue?: string | number
+  /** The button's scale, so a row of controls comes out one height. */
+  size?: ControlSize
+  class?: string
+  invalid?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), { size: 'default', invalid: false })
+defineEmits<{ 'update:modelValue': [string] }>()
+</script>
+
+<template>
+  <input
+    :value="modelValue"
+    :class="cn(controlVariants({ size, invalid }), props.class)"
+    @input="$emit('update:modelValue', ($event.target as HTMLInputElement).value)"
+  >
+</template>
diff --git a/src/components/ItemCard.vue b/src/components/ItemCard.vue
new file mode 100644
index 0000000..56296df
--- /dev/null
+++ b/src/components/ItemCard.vue
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import Card from './Card.vue'
+import { cn } from '../lib/utils'
+
+/** One thing in a list of things.
+ *
+ * A tinted tile, a name with whatever is true of it beside it, a line of
+ * detail, and what can be done to it on the right. Repositories, knowledge and
+ * the overview were each spelling this out, which is why their corners and
+ * their tiles had drifted apart.
+ */
+
+interface Props {
+  title: string
+  /** Under the title, in the typeface a path deserves. */
+  subtitle?: string
+  /** Which of the product's pillars this belongs to, for the tile behind the icon. */
+  pillar?: 'memory' | 'graph' | 'review' | 'tokens' | 'brand'
+  hover?: boolean
+  class?: string
+}
+
+const props = withDefaults(defineProps<Props>(), { pillar: 'graph', hover: false })
+
+const tints: Record<string, string> = {
+  memory: 'bg-pillar-memory/15 text-pillar-memory',
+  graph: 'bg-pillar-graph/15 text-pillar-graph',
+  review: 'bg-pillar-review/15 text-pillar-review',
+  tokens: 'bg-pillar-tokens/15 text-pillar-tokens',
+  brand: 'bg-primary/15 text-primary',
+}
+</script>
+
+<template>
+  <Card :hover="hover" :class="cn('p-5', props.class)">
+    <div class="flex items-start gap-4">
+      <div
+        v-if="$slots.icon"
+        :class="cn('flex h-11 w-11 shrink-0 items-center justify-center rounded-lg', tints[pillar])"
+      >
+        <slot name="icon" />
+      </div>
+
+      <div class="min-w-0 flex-1">
+        <div class="mb-1 flex flex-wrap items-center gap-2">
+          <h3 class="break-all font-semibold">{{ title }}</h3>
+          <slot name="badges" />
+        </div>
+        <p v-if="subtitle" class="break-all font-mono text-sm text-muted-foreground">
+          {{ subtitle }}
+        </p>
+        <slot />
+        <div v-if="$slots.meta" class="mt-2 flex flex-wrap items-center gap-x-4 gap-y-1 text-sm text-muted-foreground">
+          <slot name="meta" />
+        </div>
+      </div>
+
+      <div v-if="$slots.actions" class="flex shrink-0 items-center gap-1">
+        <slot name="actions" />
+      </div>
+    </div>
+  </Card>
+</template>
diff --git a/src/components/ListInput.vue b/src/components/ListInput.vue
new file mode 100644
index 0000000..9dd210d
--- /dev/null
+++ b/src/components/ListInput.vue
@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Plus, X } from 'lucide-vue-next'
+import Button from './Button.vue'
+import Input from './Input.vue'
+import { type ControlSize } from '../lib/control'
+import { cn } from '../lib/utils'
+
+/** Several of something, added one at a time and removed one at a time.
+ *
+ * A box of lines is a text editor pretending to be a list: nothing tells you
+ * an entry is malformed, nothing stops two of the same, and removing one means
+ * selecting exactly the right characters. Directories, globs and tags are all
+ * lists, and all of them were being typed into a box.
+ */
+
+interface Props {
+  modelValue?: string[]
+  placeholder?: string
+  /** What one entry is called, for the button and for whoever is not looking. */
+  noun?: string
+  /** Drawn in the typeface a path deserves. */
+  mono?: boolean
+  size?: ControlSize
+  class?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: () => [],
+  noun: 'entry',
+  mono: false,
+  size: 'default',
+})
+
+const emit = defineEmits<{ 'update:modelValue': [string[]] }>()
+
+const draft = ref('')
+
+function add() {
+  const one = draft.value.trim()
+  // Adding the same thing twice is a person telling you it is already there.
+  if (!one || props.modelValue.includes(one)) {
+    draft.value = ''
+    return
+  }
+  emit('update:modelValue', [...props.modelValue, one])
+  draft.value = ''
+}
+
+function drop(one: string) {
+  emit('update:modelValue', props.modelValue.filter((kept) => kept !== one))
+}
+</script>
+
+<template>
+  <div :class="cn('space-y-2', props.class)">
+    <ul v-if="modelValue.length" class="space-y-1.5">
+      <li
+        v-for="one in modelValue"
+        :key="one"
+        class="flex items-center gap-2 rounded-md border bg-muted/40 py-1 pl-3 pr-1 text-sm"
+      >
+        <span :class="cn('min-w-0 flex-1 break-all', mono && 'font-mono text-xs')">{{ one }}</span>
+        <Button variant="ghost" size="icon" class="h-6 w-6 shrink-0" :aria-label="`Remove ${one}`" @click="drop(one)">
+          <X class="h-3.5 w-3.5" />
+        </Button>
+      </li>
+    </ul>
+
+    <div class="flex gap-2">
+      <Input
+        v-model="draft"
+        :size="size"
+        :placeholder="placeholder"
+        :class="mono ? 'font-mono' : undefined"
+        :aria-label="`Add ${noun}`"
+        @keydown.enter.prevent="add"
+      />
+      <Button :size="size" variant="outline" class="shrink-0" :disabled="!draft.trim()" @click="add">
+        <Plus class="mr-1.5 h-3.5 w-3.5" />
+        Add
+      </Button>
+    </div>
+  </div>
+</template>
diff --git a/src/components/Loading.vue b/src/components/Loading.vue
new file mode 100644
index 0000000..e2995a7
--- /dev/null
+++ b/src/components/Loading.vue
@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Loader2 } from 'lucide-vue-next'
+import { cn } from '../lib/utils'
+
+/** Not here yet, as Empty is nothing here.
+ *
+ * Centred in whatever it fills, because a small spinner in a corner reads as a
+ * page that has finished and gone wrong. The note underneath is for work that
+ * outlives the page: say so there, or people close the tab.
+ */
+
+interface Props {
+  label?: string
+  /** A second line, for work that keeps going whether or not anyone watches. */
+  note?: string
+  size?: 'sm' | 'md' | 'lg'
+  /** Fills its parent and centres in it, rather than sitting in the flow. */
+  fill?: boolean
+  class?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  label: 'Working',
+  size: 'md',
+  fill: true,
+})
+
+const SPINNER: Record<string, string> = {
+  sm: 'h-5 w-5',
+  md: 'h-8 w-8',
+  lg: 'h-10 w-10',
+}
+
+const TEXT: Record<string, string> = {
+  sm: 'text-sm',
+  md: 'text-base',
+  lg: 'text-lg',
+}
+
+const pad = computed(() => (props.size === 'sm' ? 'py-8' : 'py-16'))
+</script>
+
+<template>
+  <div
+    :class="cn(
+      'flex flex-col items-center justify-center gap-3 text-center',
+      fill ? 'min-h-0 flex-1' : pad,
+      props.class,
+    )"
+    role="status"
+    aria-live="polite"
+  >
+    <span class="relative flex items-center justify-center">
+      <span
+        :class="cn('absolute inline-flex animate-ping rounded-full bg-primary/20', SPINNER[size])"
+      />
+      <Loader2 :class="cn('relative animate-spin text-muted-foreground', SPINNER[size])" />
+    </span>
+    <p :class="cn('font-medium', TEXT[size])">{{ label }}</p>
+    <p v-if="note || $slots.default" class="max-w-md text-sm text-muted-foreground">
+      <slot>{{ note }}</slot>
+    </p>
+  </div>
+</template>
diff --git a/src/components/Logo.vue b/src/components/Logo.vue
new file mode 100755
index 0000000..832ecc6
--- /dev/null
+++ b/src/components/Logo.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+interface Props {
+  size?: 'sm' | 'md' | 'lg'
+  showText?: boolean
+}
+
+withDefaults(defineProps<Props>(), {
+  size: 'md',
+  showText: true,
+})
+
+const sizeClasses = {
+  sm: 'h-7 w-7 min-h-7 min-w-7',
+  md: 'h-8 w-8 min-h-8 min-w-8',
+  lg: 'h-10 w-10 min-h-10 min-w-10',
+}
+
+const textSizes = {
+  sm: 'text-base',
+  md: 'text-lg',
+  lg: 'text-xl',
+}
+</script>
+
+<template>
+  <div class="flex items-center gap-2.5">
+    <div :class="[sizeClasses[size], 'relative flex-shrink-0']">
+      <svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-full h-full">
+        <rect width="32" height="32" rx="6" fill="#E20C18"/>
+        <!-- Ant head -->
+        <ellipse cx="16" cy="12" rx="5.5" ry="5" fill="white"/>
+        <!-- Ant thorax -->
+        <ellipse cx="16" cy="19" rx="4" ry="3" fill="white"/>
+        <!-- Ant abdomen -->
+        <ellipse cx="16" cy="25" rx="5" ry="4" fill="white"/>
+        <!-- Antennae -->
+        <path d="M12 8L8 4" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
+        <path d="M20 8L24 4" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
+        <!-- Eyes -->
+        <circle cx="14" cy="11" r="1.2" fill="#E20C18"/>
+        <circle cx="18" cy="11" r="1.2" fill="#E20C18"/>
+      </svg>
+    </div>
+    <span v-if="showText" :class="[textSizes[size], 'font-semibold tracking-tight']">
+      <span class="text-brand">Source</span><span class="text-brand">Ant</span>
+      <span class="text-muted-foreground font-normal ml-1">Memory</span>
+    </span>
+  </div>
+</template>
diff --git a/src/components/Markdown.vue b/src/components/Markdown.vue
new file mode 100644
index 0000000..e510005
--- /dev/null
+++ b/src/components/Markdown.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import MarkdownIt from 'markdown-it'
+import { computed } from 'vue'
+import { cn } from '../lib/utils'
+
+/** Prose somebody wrote in markdown, drawn as prose.
+ *
+ * The colours come from the design tokens rather than from the typography
+ * plugin's own, so a page reads the same in either theme without a second
+ * palette to keep in step.
+ *
+ * HTML in the source is not rendered. What goes through here is written by
+ * whoever is using the product, and a component that runs their markup is a
+ * component that runs anybody's.
+ */
+
+interface Props {
+  source?: string
+  class?: string
+}
+
+const props = defineProps<Props>()
+
+const markdown = new MarkdownIt({ html: false, linkify: true, breaks: false })
+
+const rendered = computed(() => markdown.render(props.source ?? ''))
+
+const TONE = [
+  'prose prose-sm max-w-none',
+  'prose-headings:text-foreground prose-headings:font-semibold',
+  'prose-p:text-muted-foreground prose-li:text-muted-foreground',
+  'prose-strong:text-foreground prose-em:text-foreground',
+  'prose-a:text-primary prose-a:no-underline hover:prose-a:underline',
+  'prose-code:text-foreground prose-code:before:content-none prose-code:after:content-none',
+  'prose-code:rounded prose-code:bg-muted/60 prose-code:px-1 prose-code:py-0.5',
+  'prose-pre:bg-muted/50 prose-pre:text-foreground prose-pre:border',
+  'prose-blockquote:border-border prose-blockquote:text-muted-foreground',
+  'prose-hr:border-border prose-th:text-foreground prose-td:text-muted-foreground',
+].join(' ')
+</script>
+
+<template>
+  <!-- eslint-disable-next-line vue/no-v-html -- markdown-it is configured to
+       render no HTML, so what reaches here is markup this component made. -->
+  <div :class="cn(TONE, props.class)" v-html="rendered" />
+</template>
diff --git a/src/components/Modal.vue b/src/components/Modal.vue
new file mode 100755
index 0000000..20abe26
--- /dev/null
+++ b/src/components/Modal.vue
@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { X } from 'lucide-vue-next'
+import { onMounted, onUnmounted } from 'vue'
+import { cn } from '../lib/utils'
+import UiCard from './Card.vue'
+
+interface Props {
+  open: boolean
+  class?: string
+  maxWidth?: 'sm' | 'md' | 'lg' | 'xl' | '2xl'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  maxWidth: 'lg',
+})
+
+const emit = defineEmits<{
+  close: []
+}>()
+
+const maxWidthClasses = {
+  sm: 'max-w-sm',
+  md: 'max-w-md',
+  lg: 'max-w-lg',
+  xl: 'max-w-xl',
+  '2xl': 'max-w-2xl',
+}
+
+function onKeydown(e: KeyboardEvent) {
+  if (e.key === 'Escape') emit('close')
+}
+
+onMounted(() => window.addEventListener('keydown', onKeydown))
+onUnmounted(() => window.removeEventListener('keydown', onKeydown))
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition
+      enter-active-class="transition duration-200"
+      enter-from-class="opacity-0"
+      enter-to-class="opacity-100"
+      leave-active-class="transition duration-150"
+      leave-from-class="opacity-100"
+      leave-to-class="opacity-0"
+    >
+      <div
+        v-if="open"
+        class="fixed inset-0 z-50 flex items-center justify-center p-4"
+      >
+        <div
+          class="absolute inset-0 bg-background/80 backdrop-blur-sm"
+          @click="emit('close')"
+        />
+        <UiCard
+          :class="cn(
+            'relative w-full max-h-[85vh] overflow-auto p-6 animate-fade-up',
+            maxWidthClasses[maxWidth],
+            props.class
+          )"
+        >
+          <button
+            class="absolute top-4 right-4 p-1 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
+            @click="emit('close')"
+          >
+            <X class="h-4 w-4" />
+          </button>
+          <slot />
+        </UiCard>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
diff --git a/src/components/Notice.vue b/src/components/Notice.vue
new file mode 100644
index 0000000..9d44126
--- /dev/null
+++ b/src/components/Notice.vue
@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { CircleAlert, CircleCheck, Info, TriangleAlert } from 'lucide-vue-next'
+import { cn } from '../lib/utils'
+
+/** Something a page needs to say, in the colour of what it means.
+ *
+ * The brand colour here is a red, a few degrees from the one that means
+ * something went wrong. Every page that wanted to say "this went well" reached
+ * for a primary tint and told people their work had failed. Saying what a
+ * notice means, rather than picking a tint, is the only way that stops
+ * happening.
+ */
+
+type Tone = 'info' | 'success' | 'warning' | 'danger'
+
+interface Props {
+  tone?: Tone
+  /** Off where the sentence already carries its own meaning. */
+  icon?: boolean
+  class?: string
+}
+
+const props = withDefaults(defineProps<Props>(), { tone: 'info', icon: true })
+
+const TONES: Record<Tone, string> = {
+  info: 'border-border bg-muted/50 text-foreground',
+  success: 'border-success/40 bg-success/10 text-foreground',
+  warning: 'border-warning/40 bg-warning/10 text-foreground',
+  danger: 'border-destructive/40 bg-destructive/10 text-foreground',
+}
+
+const MARKS = {
+  info: Info,
+  success: CircleCheck,
+  warning: TriangleAlert,
+  danger: CircleAlert,
+}
+
+const INK: Record<Tone, string> = {
+  info: 'text-muted-foreground',
+  success: 'text-success',
+  warning: 'text-warning',
+  danger: 'text-destructive',
+}
+
+const mark = computed(() => MARKS[props.tone])
+</script>
+
+<template>
+  <div
+    :class="cn('flex gap-3 rounded-md border px-4 py-3 text-sm', TONES[tone], props.class)"
+    :role="tone === 'danger' ? 'alert' : 'status'"
+  >
+    <component :is="mark" v-if="icon" :class="cn('mt-0.5 h-4 w-4 shrink-0', INK[tone])" />
+    <div class="min-w-0 flex-1"><slot /></div>
+    <slot name="actions" />
+  </div>
+</template>
diff --git a/src/components/Origin.vue b/src/components/Origin.vue
new file mode 100644
index 0000000..30efb7f
--- /dev/null
+++ b/src/components/Origin.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { cn } from '../lib/utils'
+
+/** Which thing an item belongs to, for a list that holds several things'.
+ *
+ * Only worth showing where the list is mixed. In a view already narrowed to
+ * one repository this repeats the same words on every row, and a label that is
+ * always the same is read once and then not at all, which is worse than no
+ * label because it costs the room.
+ *
+ * Quiet on purpose: it says where something came from, not what it is.
+ */
+
+interface Props {
+  name: string
+  /** Reads better in the typeface for a path or an owner/name pair. */
+  mono?: boolean
+  class?: string
+}
+
+const props = withDefaults(defineProps<Props>(), { mono: true })
+</script>
+
+<template>
+  <span
+    :class="cn(
+      'inline-flex max-w-full items-center gap-1 rounded border border-border/60 bg-muted/40 px-1.5 py-0.5 text-[11px] text-muted-foreground',
+      props.mono && 'font-mono',
+      props.class,
+    )"
+  >
+    <span v-if="$slots.icon" class="shrink-0"><slot name="icon" /></span>
+    <span class="truncate">{{ name }}</span>
+  </span>
+</template>
diff --git a/src/components/PageHead.vue b/src/components/PageHead.vue
new file mode 100644
index 0000000..8caa023
--- /dev/null
+++ b/src/components/PageHead.vue
@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { cn } from '../lib/utils'
+
+/** What a page is, and what can be done to all of it.
+ *
+ * A detail page is the same header with a way back and something true of the
+ * thing beside its name, so those are slots here rather than a second header
+ * that drifts from this one.
+ */
+
+interface Props {
+  title: string
+  sub?: string
+  pillar?: 'memory' | 'graph' | 'review' | 'tokens' | 'brand'
+  /** Overrides the pillar tint where the page is about a state rather than an
+   * area. A review's icon has to agree with its verdict: the review pillar is
+   * a green, so a page of requested changes was showing a green tick. */
+  tone?: 'neutral' | 'info' | 'success' | 'warning' | 'danger'
+  /** A path, an id, anything that reads better in the typeface for one. */
+  mono?: boolean
+  class?: string
+}
+
+const props = withDefaults(defineProps<Props>(), { pillar: 'graph', mono: false })
+
+const tints: Record<string, string> = {
+  memory: 'bg-pillar-memory/15 text-pillar-memory',
+  graph: 'bg-pillar-graph/15 text-pillar-graph',
+  review: 'bg-pillar-review/15 text-pillar-review',
+  tokens: 'bg-pillar-tokens/15 text-pillar-tokens',
+  brand: 'bg-primary/15 text-primary',
+}
+
+const tones: Record<string, string> = {
+  neutral: 'bg-muted text-muted-foreground',
+  info: 'bg-primary/15 text-primary',
+  success: 'bg-success/15 text-success',
+  warning: 'bg-warning/15 text-warning',
+  danger: 'bg-destructive/15 text-destructive',
+}
+
+const tint = computed(() => (props.tone ? tones[props.tone] : tints[props.pillar]))
+</script>
+
+<template>
+  <div :class="cn('mb-6 flex flex-wrap items-start justify-between gap-4', props.class)">
+    <div class="flex min-w-0 items-center gap-3">
+      <slot name="back" />
+      <div
+        v-if="$slots.icon"
+        :class="cn('flex h-11 w-11 shrink-0 items-center justify-center rounded-lg', tint)"
+      >
+        <slot name="icon" />
+      </div>
+      <div class="min-w-0">
+        <div class="flex flex-wrap items-center gap-2">
+          <h1 class="text-xl font-semibold">{{ title }}</h1>
+          <slot name="badges" />
+        </div>
+        <p
+          v-if="sub"
+          :class="cn('text-sm text-muted-foreground', mono && 'break-all font-mono')"
+        >
+          {{ sub }}
+        </p>
+        <div
+          v-if="$slots.meta"
+          class="mt-1.5 flex flex-wrap items-center gap-x-3 gap-y-1.5 text-sm text-muted-foreground"
+        >
+          <slot name="meta" />
+        </div>
+      </div>
+    </div>
+    <div v-if="$slots.actions" class="flex flex-wrap items-center gap-2">
+      <slot name="actions" />
+    </div>
+  </div>
+</template>
diff --git a/src/components/Section.vue b/src/components/Section.vue
new file mode 100644
index 0000000..9798a09
--- /dev/null
+++ b/src/components/Section.vue
@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { ChevronDown } from 'lucide-vue-next'
+import { cn } from '../lib/utils'
+
+/** One part of a longer document, not a card.
+ *
+ * A card is a thing you could pick up and put somewhere else. These are the
+ * parts of one continuous read, so they are divided by a rule and a heading,
+ * the way any document is. Boxing each one draws a border between paragraphs
+ * of the same argument, and a page of stacked boxes reads as a list of
+ * unrelated objects.
+ *
+ * Tone tints the icon and the count. It is not a border and not a fill: at
+ * this size a wash of colour behind a paragraph makes the paragraph harder to
+ * read and the colour easier to ignore.
+ */
+
+type Tone = 'neutral' | 'info' | 'success' | 'warning' | 'danger'
+
+interface Props {
+  title: string
+  tone?: Tone
+  /** A number the section is about: findings, files, suggestions. */
+  count?: number | null
+  collapsible?: boolean
+  /** Starts closed. Only meaningful when collapsible. */
+  closed?: boolean
+  class?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  tone: 'neutral',
+  count: null,
+  collapsible: false,
+  closed: false,
+})
+
+const open = ref(!props.closed)
+
+const INK: Record<Tone, string> = {
+  neutral: 'text-muted-foreground',
+  info: 'text-primary',
+  success: 'text-success',
+  warning: 'text-warning',
+  danger: 'text-destructive',
+}
+
+const COUNT: Record<Tone, string> = {
+  neutral: 'bg-muted text-muted-foreground',
+  info: 'bg-primary/10 text-primary',
+  success: 'bg-success/10 text-success',
+  warning: 'bg-warning/10 text-warning',
+  danger: 'bg-destructive/10 text-destructive',
+}
+
+const shown = computed(() => (props.collapsible ? open.value : true))
+</script>
+
+<template>
+  <section :class="cn('py-4 first:pt-0 last:pb-0', props.class)">
+    <component
+      :is="collapsible ? 'button' : 'div'"
+      :type="collapsible ? 'button' : undefined"
+      :aria-expanded="collapsible ? String(open) : undefined"
+      :class="cn('flex w-full items-center gap-2 text-left', collapsible && 'cursor-pointer')"
+      @click="collapsible && (open = !open)"
+    >
+      <span v-if="$slots.icon" :class="cn('shrink-0', INK[tone])"><slot name="icon" /></span>
+      <h2 class="font-semibold">{{ title }}</h2>
+      <span
+        v-if="count !== null"
+        :class="cn('rounded-full px-2 py-0.5 text-xs font-medium tabular-nums', COUNT[tone])"
+      >
+        {{ count }}
+      </span>
+      <ChevronDown
+        v-if="collapsible"
+        :class="cn('ml-auto h-4 w-4 shrink-0 text-muted-foreground transition-transform', open && 'rotate-180')"
+      />
+    </component>
+    <div v-show="shown" class="mt-3">
+      <slot />
+    </div>
+  </section>
+</template>
diff --git a/src/components/Select.vue b/src/components/Select.vue
new file mode 100644
index 0000000..0865ca0
--- /dev/null
+++ b/src/components/Select.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { controlVariants, type ControlSize } from '../lib/control'
+import { cn } from '../lib/utils'
+
+/** One of a known set. The options are the caller's, the look is not. */
+
+interface Props {
+  modelValue?: string | number
+  /** The button's scale, so a row of controls comes out one height. */
+  size?: ControlSize
+  class?: string
+  invalid?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), { size: 'default', invalid: false })
+defineEmits<{ 'update:modelValue': [string] }>()
+</script>
+
+<template>
+  <select
+    :value="modelValue"
+    :class="cn(controlVariants({ size, invalid }), 'w-auto', props.class)"
+    @change="$emit('update:modelValue', ($event.target as HTMLSelectElement).value)"
+  >
+    <slot />
+  </select>
+</template>
diff --git a/src/components/Status.vue b/src/components/Status.vue
new file mode 100644
index 0000000..9c3bea1
--- /dev/null
+++ b/src/components/Status.vue
@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { cn } from '../lib/utils'
+
+/** Where something stands, in one line: a verdict, a run, a check.
+ *
+ * Same tone vocabulary as Notice and Chip, so one meaning is one colour.
+ * The label should read as plain speech: "Changes requested", not "not ready".
+ */
+
+type Tone = 'neutral' | 'info' | 'success' | 'warning' | 'danger'
+
+interface Props {
+  tone?: Tone
+  label: string
+  /** A number the state is about: files, findings, comments. */
+  count?: number | null
+  /** Pulses the dot, for something still running. */
+  busy?: boolean
+  class?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  tone: 'neutral',
+  count: null,
+  busy: false,
+})
+
+const DOTS: Record<Tone, string> = {
+  neutral: 'bg-muted-foreground',
+  info: 'bg-primary',
+  success: 'bg-success',
+  warning: 'bg-warning',
+  danger: 'bg-destructive',
+}
+
+const INK: Record<Tone, string> = {
+  neutral: 'text-muted-foreground',
+  info: 'text-foreground',
+  success: 'text-foreground',
+  warning: 'text-foreground',
+  danger: 'text-foreground',
+}
+
+const shown = computed(() =>
+  props.count === null || props.count === undefined ? null : props.count,
+)
+</script>
+
+<template>
+  <span
+    :class="cn('inline-flex items-center gap-2 text-sm font-medium', INK[tone], props.class)"
+    role="status"
+  >
+    <span class="relative flex h-2 w-2 shrink-0">
+      <span
+        v-if="busy"
+        :class="cn('absolute inline-flex h-full w-full animate-ping rounded-full opacity-60', DOTS[tone])"
+      />
+      <span :class="cn('relative inline-flex h-2 w-2 rounded-full', DOTS[tone])" />
+    </span>
+    <span>{{ label }}</span>
+    <span v-if="shown !== null" class="text-muted-foreground tabular-nums">{{ shown }}</span>
+  </span>
+</template>
diff --git a/src/components/Tabs.vue b/src/components/Tabs.vue
new file mode 100644
index 0000000..de2fda8
--- /dev/null
+++ b/src/components/Tabs.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { cn } from '../lib/utils'
+
+/** One of a few, shown all at once.
+ *
+ * The same control as a graph's layout switcher and the source switcher beside
+ * it, which had been two spellings of one thing.
+ */
+
+interface Tab {
+  id: string
+  label: string
+}
+
+interface Props {
+  modelValue: string
+  tabs: Tab[]
+  /** A name for whoever is not looking at it. */
+  label?: string
+  class?: string
+}
+
+const props = defineProps<Props>()
+defineEmits<{ 'update:modelValue': [string] }>()
+</script>
+
+<template>
+  <div
+    role="group"
+    :aria-label="label"
+    :class="cn('inline-flex rounded-md border bg-card p-0.5', props.class)"
+  >
+    <button
+      v-for="tab in tabs"
+      :key="tab.id"
+      type="button"
+      :aria-pressed="modelValue === tab.id"
+      :class="cn(
+        'rounded px-3 py-1 text-xs font-medium transition-colors',
+        modelValue === tab.id
+          ? 'bg-primary/15 text-primary'
+          : 'text-muted-foreground hover:text-foreground',
+      )"
+      @click="$emit('update:modelValue', tab.id)"
+    >
+      {{ tab.label }}
+    </button>
+  </div>
+</template>
diff --git a/src/components/Textarea.vue b/src/components/Textarea.vue
new file mode 100644
index 0000000..137ff35
--- /dev/null
+++ b/src/components/Textarea.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { roomyVariants, type ControlSize } from '../lib/control'
+import { cn } from '../lib/utils'
+
+/** More than one line of text, and it grows downwards only. */
+
+interface Props {
+  modelValue?: string
+  rows?: number
+  /** The same scale as the other controls, minus the height its rows decide. */
+  size?: ControlSize
+  class?: string
+  invalid?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  rows: 3,
+  size: 'default',
+  invalid: false,
+})
+defineEmits<{ 'update:modelValue': [string] }>()
+</script>
+
+<template>
+  <textarea
+    :value="modelValue"
+    :rows="rows"
+    :class="cn(roomyVariants({ size, invalid }), props.class)"
+    @input="$emit('update:modelValue', ($event.target as HTMLTextAreaElement).value)"
+  />
+</template>
diff --git a/src/composables/useContextKinds.ts b/src/composables/useContextKinds.ts
new file mode 100644
index 0000000..207e3c2
--- /dev/null
+++ b/src/composables/useContextKinds.ts
@@ -0,0 +1,78 @@
+/**
+ * What each kind of knowledge looks like, in one place.
+ *
+ * Six screens carried their own copy of this map, identical to the character,
+ * so a colour could only be changed by finding all six. Lookups are
+ * case-insensitive because the API answers lowercase and some screens title-case
+ * it for display.
+ *
+ * Tailwind only ever sees literal class names, so these are spelled out in full
+ * rather than assembled.
+ */
+const TONE: Record<string, string> = {
+  decision: 'bg-blue-600/10 text-blue-600 border-blue-600/20',
+  constraint: 'bg-amber-600/10 text-amber-600 border-amber-600/20',
+  workaround: 'bg-red-600/10 text-red-600 border-red-600/20',
+  convention: 'bg-violet-600/10 text-violet-600 border-violet-600/20',
+  pattern: 'bg-emerald-600/10 text-emerald-600 border-emerald-600/20',
+  discussion: 'bg-cyan-600/10 text-cyan-600 border-cyan-600/20',
+  review: 'bg-pink-600/10 text-pink-600 border-pink-600/20',
+  plan: 'bg-lime-600/10 text-lime-600 border-lime-600/20',
+}
+
+const FILL: Record<string, string> = {
+  decision: 'bg-blue-600',
+  constraint: 'bg-amber-600',
+  workaround: 'bg-red-600',
+  convention: 'bg-violet-600',
+  pattern: 'bg-emerald-600',
+  discussion: 'bg-cyan-600',
+  review: 'bg-pink-600',
+  plan: 'bg-lime-600',
+}
+
+/**
+ * Concrete hex, for the graph: it draws to canvas, where a CSS variable is
+ * nothing.
+ *
+ * Measured rather than chosen. The set these replace had two pairs a reader
+ * could not separate: part against system was indistinguishable to a red-green
+ * colourblind reader, and review against discussion was hard to tell apart with
+ * full colour vision.
+ *
+ * Eight hues cannot all be separated from one another, which is a fact about
+ * eight rather than about these eight: red-green colourblindness collapses pink
+ * onto green whatever shades are picked. These pass every check except one pair
+ * of neighbours, and a drawing that needs more than colour to be read needs a
+ * second channel rather than better colours.
+ */
+const INK: Record<string, string> = {
+  system: '#7c3aed', part: '#d97706', contract: '#0891b2',
+  decision: '#2563eb', constraint: '#d97706', workaround: '#dc2626',
+  convention: '#7c3aed', pattern: '#059669', discussion: '#0891b2',
+  review: '#db2777', plan: '#65a30d',
+}
+
+export function useContextKinds() {
+  const NEUTRAL = 'bg-muted text-muted-foreground border-border'
+
+  function tone(kind?: string | null) {
+    return TONE[(kind ?? '').toLowerCase()] ?? NEUTRAL
+  }
+
+  function fill(kind?: string | null) {
+    return FILL[(kind ?? '').toLowerCase()] ?? 'bg-muted-foreground'
+  }
+
+  function ink(kind?: string | null) {
+    return INK[(kind ?? '').toLowerCase()] ?? '#a1a1aa'
+  }
+
+  const legend = Object.keys(INK).map(kind => ({
+    kind,
+    label: kind.charAt(0).toUpperCase() + kind.slice(1),
+    color: INK[kind]!,
+  }))
+
+  return { tone, fill, ink, legend, kinds: Object.keys(TONE) }
+}
diff --git a/src/index.js b/src/index.js
new file mode 100644
index 0000000..77fba35
--- /dev/null
+++ b/src/index.js
@@ -0,0 +1,36 @@
+/* Everything this package offers, in one place.
+ *
+ * Source is shipped rather than a build. Consumers already compile Vue, and a
+ * build step here would be one more thing to be stale: a package pinned by
+ * commit should be exactly what that commit says.
+ */
+
+export { default as Avatar } from './components/Avatar.vue'
+export { default as Badge } from './components/Badge.vue'
+export { default as Button } from './components/Button.vue'
+export { default as Card } from './components/Card.vue'
+export { default as CodeGraph } from './components/CodeGraph.vue'
+export { default as Field } from './components/Field.vue'
+export { default as Input } from './components/Input.vue'
+export { default as ItemCard } from './components/ItemCard.vue'
+export { default as PageHead } from './components/PageHead.vue'
+export { default as Select } from './components/Select.vue'
+export { default as Tabs } from './components/Tabs.vue'
+export { default as Textarea } from './components/Textarea.vue'
+export { default as ListInput } from './components/ListInput.vue'
+export { default as Chip } from './components/Chip.vue'
+export { default as Diff } from './components/Diff.vue'
+export { default as Logo } from './components/Logo.vue'
+export { default as Markdown } from './components/Markdown.vue'
+export { default as Modal } from './components/Modal.vue'
+export { default as Notice } from './components/Notice.vue'
+export { default as Status } from './components/Status.vue'
+export { default as Empty } from './components/Empty.vue'
+export { default as DotIndicator } from './components/DotIndicator.vue'
+export { default as Loading } from './components/Loading.vue'
+export { default as Origin } from './components/Origin.vue'
+export { default as Section } from './components/Section.vue'
+
+export { useContextKinds } from './composables/useContextKinds'
+export { controlVariants, roomyVariants } from './lib/control'
+export { cn } from './lib/utils'
diff --git a/src/lib/control.ts b/src/lib/control.ts
new file mode 100644
index 0000000..197a760
--- /dev/null
+++ b/src/lib/control.ts
@@ -0,0 +1,59 @@
+import { cva, type VariantProps } from 'class-variance-authority'
+
+/** What every form control looks like, at the sizes a button comes in.
+ *
+ * A select, an input and a button standing next to each other were three
+ * different heights, because each was written out by hand with whatever padding
+ * looked right on its own. They share one scale here instead, and the heights
+ * are the button's: a row of controls is only ever as tidy as its tallest
+ * member agrees to be.
+ *
+ * A textarea takes the padding and the type size but not the height, which its
+ * rows decide.
+ */
+export const controlVariants = cva(
+  [
+    'w-full rounded-md border bg-muted/50 text-foreground outline-none transition-colors',
+    'placeholder:text-muted-foreground focus:border-primary/50',
+    'disabled:cursor-not-allowed disabled:opacity-50',
+  ].join(' '),
+  {
+    variants: {
+      size: {
+        sm: 'h-8 px-3 text-xs',
+        default: 'h-9 px-3 text-sm',
+        lg: 'h-11 px-4 text-base',
+      },
+      invalid: {
+        true: 'border-destructive/60 focus:border-destructive',
+        false: '',
+      },
+    },
+    defaultVariants: { size: 'default', invalid: false },
+  },
+)
+
+/** The same, for a control whose height comes from its content. */
+export const roomyVariants = cva(
+  [
+    'w-full resize-y rounded-md border bg-muted/50 text-foreground outline-none transition-colors',
+    'placeholder:text-muted-foreground focus:border-primary/50',
+    'disabled:cursor-not-allowed disabled:opacity-50',
+  ].join(' '),
+  {
+    variants: {
+      size: {
+        sm: 'px-3 py-1.5 text-xs',
+        default: 'px-3 py-2 text-sm',
+        lg: 'px-4 py-2.5 text-base',
+      },
+      invalid: {
+        true: 'border-destructive/60 focus:border-destructive',
+        false: '',
+      },
+    },
+    defaultVariants: { size: 'default', invalid: false },
+  },
+)
+
+export type ControlSize = NonNullable<VariantProps<typeof controlVariants>['size']>
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
new file mode 100755
index 0000000..d32b0fe
--- /dev/null
+++ b/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
diff --git a/src/styles/tokens.css b/src/styles/tokens.css
new file mode 100644
index 0000000..5a7314e
--- /dev/null
+++ b/src/styles/tokens.css
@@ -0,0 +1,163 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root,
+  .dark {
+    color-scheme: dark;
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 240 9% 7%;
+    --card-foreground: 0 0% 98%;
+    --popover: 240 9% 7%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 357 89% 47%;
+    --primary-foreground: 0 0% 100%;
+    --secondary: 240 4% 16%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 240 5% 14%;
+    --muted-foreground: 240 5% 64.9%;
+    --accent: 240 4% 16%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 50.6%;
+    --destructive-foreground: 0 0% 98%;
+    --success: 142 71% 45%;
+    --success-foreground: 0 0% 98%;
+    --warning: 38 92% 50%;
+    --warning-foreground: 0 0% 98%;
+    --border: 240 6% 16%;
+    --input: 240 6% 16%;
+    --ring: 357 89% 47%;
+    --radius: 0.25rem;
+    --brand: 357 89% 47%;
+    /* Capability pillar accents, shared with the marketing site */
+    --pillar-memory: 217 91% 60%;
+    --pillar-graph: 262 83% 66%;
+    --pillar-review: 142 71% 45%;
+    --pillar-tokens: 38 92% 50%;
+  }
+
+  .light {
+    color-scheme: light;
+    --background: 240 20% 98%;
+    --foreground: 240 10% 10%;
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 10%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 240 10% 10%;
+    --primary: 357 89% 47%;
+    --primary-foreground: 0 0% 100%;
+    --secondary: 240 10% 94%;
+    --secondary-foreground: 240 10% 20%;
+    --muted: 240 10% 94%;
+    --muted-foreground: 240 5% 45%;
+    --accent: 357 60% 96%;
+    --accent-foreground: 357 70% 40%;
+    --destructive: 0 84% 60%;
+    --destructive-foreground: 0 0% 100%;
+    --success: 142 70% 35%;
+    --success-foreground: 0 0% 100%;
+    --warning: 38 92% 45%;
+    --warning-foreground: 0 0% 100%;
+    --border: 240 10% 90%;
+    --input: 240 10% 90%;
+    --ring: 357 89% 47%;
+    --brand: 357 89% 47%;
+    --pillar-memory: 217 91% 55%;
+    --pillar-graph: 262 83% 58%;
+    --pillar-review: 142 71% 40%;
+    --pillar-tokens: 38 92% 45%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+
+  body {
+    @apply bg-background text-foreground font-sans antialiased;
+  }
+
+  html {
+    scroll-behavior: smooth;
+  }
+}
+
+@layer components {
+  .gradient-text {
+    @apply bg-gradient-to-r from-primary via-purple-400 to-pink-400 bg-clip-text text-transparent;
+  }
+
+  .light .gradient-text {
+    @apply from-purple-600 via-violet-600 to-pink-600;
+  }
+
+  .gradient-border {
+    @apply relative;
+  }
+
+  .gradient-border::before {
+    content: '';
+    @apply absolute -inset-[1px] rounded-lg bg-gradient-to-r from-primary via-purple-500 to-pink-500 opacity-20;
+  }
+
+  .glass {
+    @apply bg-background/80 backdrop-blur-xl;
+  }
+
+  .light .glass {
+    @apply bg-background/90 backdrop-blur-xl border-b border-border/50;
+  }
+
+  .glow {
+    box-shadow: 0 0 60px -15px hsl(var(--primary) / 0.3);
+  }
+
+  .light .glow {
+    box-shadow: 0 0 60px -15px hsl(var(--primary) / 0.15);
+  }
+
+  .glow-sm {
+    box-shadow: 0 0 30px -10px hsl(var(--primary) / 0.2);
+  }
+
+  .light .glow-sm {
+    box-shadow: 0 0 30px -10px hsl(var(--primary) / 0.1);
+  }
+
+  .text-brand {
+    color: hsl(var(--brand));
+  }
+
+  .bg-brand {
+    background-color: hsl(var(--brand));
+  }
+
+  .border-brand {
+    border-color: hsl(var(--brand));
+  }
+}
+
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
+
+  .animate-delay-100 {
+    animation-delay: 100ms;
+  }
+
+  .animate-delay-200 {
+    animation-delay: 200ms;
+  }
+
+  .animate-delay-300 {
+    animation-delay: 300ms;
+  }
+
+  .animate-delay-500 {
+    animation-delay: 500ms;
+  }
+}
diff --git a/src/types.ts b/src/types.ts
new file mode 100644
index 0000000..401b5e9
--- /dev/null
+++ b/src/types.ts
@@ -0,0 +1,69 @@
+/* What the agent answers with when asked for a graph.
+ *
+ * One definition, shared by the renderer and everything feeding it. Two of them
+ * is how a drawing and its data drift apart.
+ */
+
+export interface GraphNode {
+  id: string
+  name: string
+  /**
+   * Knowledge: system | part | contract | decision | constraint | convention |
+   * pattern | workaround | discussion | review | file | code.
+   * Code: class | function | method | module | route | variable | symbol.
+   */
+  kind: string
+  status?: string
+  /** Where it lives, when the graph is of code. */
+  path?: string | null
+  /** What it is written in, when it is a file. */
+  language?: string
+  /** What the index filed it under, when the local index answered. */
+  labels?: string[]
+  /** How many lines meet here. The canvas sizes a node by this. */
+  degree?: number
+  /** Which part of the code it belongs to, or null if that part is not coloured. */
+  community?: number | null
+}
+
+/** One part of a code graph: a set of symbols more connected to each other
+ *  than to the rest, named after where it lives or what it is built around. */
+export interface GraphCommunity {
+  id: number
+  name: string
+  size: number
+}
+
+/** A typed edge between two graph nodes. */
+export interface GraphLink {
+  source: string
+  target: string
+  type?: string
+}
+
+/** Nodes and edges served for the graph view. */
+export interface KnowledgeGraphData {
+  nodes: GraphNode[]
+  links: GraphLink[]
+  /** The parts worth colouring, biggest first. Code graphs only. */
+  communities?: GraphCommunity[]
+  /** True when the answer was cut to a size a person can read. */
+  truncated?: boolean
+  /** The node it was walked out from, or null if it drew everything. */
+  focus?: string | null
+}
+
+/** One repository indexed on this machine. */
+export interface Repository {
+  name: string
+  path: string
+}
+
+/** One thing recorded about a repository. */
+export interface Knowledge {
+  id: string
+  kind: string
+  status: string
+  summary: string
+  properties: Record<string, unknown>
+}
diff --git a/tailwind-preset.js b/tailwind-preset.js
new file mode 100644
index 0000000..5cd8407
--- /dev/null
+++ b/tailwind-preset.js
@@ -0,0 +1,127 @@
+import typography from '@tailwindcss/typography'
+
+/* The design, as a Tailwind preset.
+ *
+ * Content globs are deliberately absent: which files to scan is the consuming
+ * application's question and differs in every one of them.
+ */
+
+export default {
+  darkMode: 'class',
+  theme: {
+    container: {
+      center: true,
+      padding: '2rem',
+      screens: {
+        '2xl': '1400px',
+      },
+    },
+    extend: {
+      fontFamily: {
+        sans: ['Inter', 'system-ui', 'sans-serif'],
+        mono: ['JetBrains Mono', 'monospace'],
+      },
+      colors: {
+        brand: {
+          DEFAULT: 'hsl(var(--brand))',
+          red: '#E20C18',
+        },
+        border: 'hsl(var(--border))',
+        input: 'hsl(var(--input))',
+        ring: 'hsl(var(--ring))',
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
+        primary: {
+          DEFAULT: 'hsl(var(--primary))',
+          foreground: 'hsl(var(--primary-foreground))',
+        },
+        secondary: {
+          DEFAULT: 'hsl(var(--secondary))',
+          foreground: 'hsl(var(--secondary-foreground))',
+        },
+        destructive: {
+          DEFAULT: 'hsl(var(--destructive))',
+          foreground: 'hsl(var(--destructive-foreground))',
+        },
+        muted: {
+          DEFAULT: 'hsl(var(--muted))',
+          foreground: 'hsl(var(--muted-foreground))',
+        },
+        accent: {
+          DEFAULT: 'hsl(var(--accent))',
+          foreground: 'hsl(var(--accent-foreground))',
+        },
+        popover: {
+          DEFAULT: 'hsl(var(--popover))',
+          foreground: 'hsl(var(--popover-foreground))',
+        },
+        card: {
+          DEFAULT: 'hsl(var(--card))',
+          foreground: 'hsl(var(--card-foreground))',
+        },
+        success: {
+          DEFAULT: 'hsl(var(--success))',
+          foreground: 'hsl(var(--success-foreground))',
+        },
+        warning: {
+          DEFAULT: 'hsl(var(--warning))',
+          foreground: 'hsl(var(--warning-foreground))',
+        },
+        pillar: {
+          memory: 'hsl(var(--pillar-memory) / <alpha-value>)',
+          graph: 'hsl(var(--pillar-graph) / <alpha-value>)',
+          review: 'hsl(var(--pillar-review) / <alpha-value>)',
+          tokens: 'hsl(var(--pillar-tokens) / <alpha-value>)',
+        },
+      },
+      borderRadius: {
+        lg: 'var(--radius)',
+        md: 'calc(var(--radius) - 2px)',
+        sm: 'calc(var(--radius) - 4px)',
+        xl: 'calc(var(--radius) + 2px)',
+        '2xl': 'calc(var(--radius) + 4px)',
+      },
+      keyframes: {
+        'accordion-down': {
+          from: { height: '0' },
+          to: { height: 'var(--radix-accordion-content-height)' },
+        },
+        'accordion-up': {
+          from: { height: 'var(--radix-accordion-content-height)' },
+          to: { height: '0' },
+        },
+        'fade-in': {
+          from: { opacity: '0' },
+          to: { opacity: '1' },
+        },
+        'fade-up': {
+          from: { opacity: '0', transform: 'translateY(10px)' },
+          to: { opacity: '1', transform: 'translateY(0)' },
+        },
+        'slide-in-right': {
+          from: { transform: 'translateX(100%)' },
+          to: { transform: 'translateX(0)' },
+        },
+        shimmer: {
+          '100%': { transform: 'translateX(100%)' },
+        },
+        pulse: {
+          '0%, 100%': { opacity: '1' },
+          '50%': { opacity: '0.5' },
+        },
+      },
+      animation: {
+        'accordion-down': 'accordion-down 0.2s ease-out',
+        'accordion-up': 'accordion-up 0.2s ease-out',
+        'fade-in': 'fade-in 0.3s ease-out',
+        'fade-up': 'fade-up 0.4s ease-out',
+        'slide-in-right': 'slide-in-right 0.3s ease-out',
+        shimmer: 'shimmer 2s infinite',
+        pulse: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+      },
+    },
+  },
+  // A design system that ships a component for prose has to ship the plugin
+  // that makes prose look like anything.
+  plugins: [typography],
+}