elide-dev · Sam Gammon (sgammon) · Jul 6, 2026 · Jul 6, 2026 · Jul 6, 2026 · Jul 6, 2026
diff --git a/.github/workflows/check.test.yml b/.github/workflows/check.test.yml
@@ -0,0 +1,42 @@
+name: Test
+
+"on":
+  workflow_call:
+  workflow_dispatch:
+
+permissions:
+  contents: read
+
+jobs:
+  test:
+    name: "Vitest (stories)"
+    runs-on: ${{ vars.RUNNER_DEFAULT || 'ubuntu-latest' }}
+    permissions:
+      contents: read
+    steps:
+      - name: "Setup: Harden Runner"
+        uses: step-security/harden-runner@9af89fc71515a100421586dfdb3dc9c984fbf411 # v2.19.4
+        with:
+          egress-policy: audit
+      - name: "Setup: Checkout"
+        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+        with:
+          persist-credentials: false
+      - name: "Setup: Bun"
+        uses: oven-sh/setup-bun@0c5077e51419868618aeaa5fe8019c62421857d6 # v2.2.0
+        with:
+          bun-version: "1.3.14"
+      - name: "Setup: Turbo cache"
+        uses: actions/cache@55cc8345863c7cc4c66a329aec7e433d2d1c52a9 # v6.1.0
+        with:
+          path: .turbo
+          key: ${{ runner.os }}-turbo-test-${{ github.sha }}
+          restore-keys: |
+            ${{ runner.os }}-turbo-test-
+            ${{ runner.os }}-turbo-
+      - name: "Install: Dependencies"
+        run: bun install --frozen-lockfile
+      - name: "Setup: Playwright Chromium"
+        run: bunx playwright install --with-deps chromium
+      - name: "Test: Stories via Vitest (browser mode)"
+        run: bun run test
diff --git a/.github/workflows/on.pr.yml b/.github/workflows/on.pr.yml
@@ -25,6 +25,13 @@ jobs:
       contents: read
     secrets: inherit
 
+  test:
+    name: "Test"
+    uses: ./.github/workflows/check.test.yml
+    permissions:
+      contents: read
+    secrets: inherit
+
   storybook:
     name: "Storybook"
     uses: ./.github/workflows/job.storybook.yml

diff --git a/.github/workflows/on.push.yml b/.github/workflows/on.push.yml
@@ -26,6 +26,13 @@ jobs:
       contents: read
     secrets: inherit
 
+  test:
+    name: "Test"
+    uses: ./.github/workflows/check.test.yml
+    permissions:
+      contents: read
+    secrets: inherit
+
   storybook:
     name: "Storybook"
     uses: ./.github/workflows/job.storybook.yml

diff --git a/.mcp.json b/.mcp.json
@@ -3,6 +3,10 @@
     "chrome-devtools": {
       "command": "bunx",
       "args": ["chrome-devtools-mcp@latest"]
+    },
+    "storybook": {
+      "type": "http",
+      "url": "http://localhost:6006/mcp"
     }
   }
 }
diff --git a/COMPONENTS.md b/COMPONENTS.md
@@ -47,16 +47,16 @@ radii, type. See the package README.
 | `Sidebar` | todo | `SectionSwitcher`, `NavGroup`, `NavItem` (active, external, comingSoon), progress | left nav |
 | `TableOfContents` | todo | `items`, active-on-scroll; mono variant for API methods | right rail "On this page" |
 | `AiActions` | todo | Copy as Markdown · View as text · Open in ChatGPT/Claude | right rail panel |
-| `Breadcrumbs` | todo | `segments` | above page title |
-| `PageFooterNav` | todo | `prev?`, `next?` (right-grouped cards) | bottom prev/next |
+| `Breadcrumbs` | **done** | `segments` | above page title |
+| `PageFooterNav` | **done** | `prev?`, `next?` (right-grouped cards) | bottom prev/next |
 | `CardGrid` + `FeatureCard` | todo | cols; card: icon·title·description·badge·href | "Start here", category grid |
 | `StatStrip` | todo | `stats: {value,label}[]` | API landing metrics |
 | `StatusBadge` | todo | thin wrapper over `Badge` status tones | reference status |
 | `ApiMethod` + `ParamRow` | todo | `signature`, `status`, params, example slot | node:fs entries |
 | `SupportMatrix` / `DataTable` | todo | columns, status cells (✓/✗) | method support table |
 | `CommandPalette` | registry+ | built on `Command`; groups: pages·actions; recent | ⌘K overlay |
 | `MobileNav` | todo | top bar + `Sheet` drawer + bottom "Search or ask AI" bar | mobile screens |
-| `ThemeProvider` / `useTheme` | todo | class/`data-theme` on `<html>`, persisted | dark/light toggle |
+| `ThemeProvider` / `useTheme` | **done** | class/`data-theme` on `<html>`, persisted | dark/light toggle |
 
 ## Tier 3 — Marketing widgets (from elide.dev)
 

diff --git a/apps/storybook/.storybook/main.ts b/apps/storybook/.storybook/main.ts
@@ -6,7 +6,12 @@ import type { StorybookConfig } from "@storybook/react-vite";
  */
 const config: StorybookConfig = {
   stories: ["../../../packages/ui/src/**/*.stories.@(ts|tsx|mdx)"],
-  addons: ["@storybook/addon-a11y", "@chromatic-com/storybook"],
+  addons: [
+    "@storybook/addon-a11y",
+    "@chromatic-com/storybook",
+    "@storybook/addon-vitest",
+    "@storybook/addon-mcp"
+  ],
   framework: {
     name: "@storybook/react-vite",
     options: {},

diff --git a/apps/storybook/package.json b/apps/storybook/package.json
@@ -7,7 +7,8 @@
     "dev": "storybook dev -p 6006",
     "build": "storybook build",
     "build-storybook": "storybook build",
-    "chromatic": "chromatic --exit-zero-on-changes"
+    "chromatic": "chromatic --exit-zero-on-changes",
+    "test": "vitest run"
   },
   "dependencies": {
     "@elide/tokens": "workspace:*",
@@ -18,15 +19,22 @@
   "devDependencies": {
     "@chromatic-com/storybook": "^5.2.1",
     "@storybook/addon-a11y": "^10.4.6",
+    "@storybook/addon-mcp": "^0.6.0",
+    "@storybook/addon-vitest": "^10.4.6",
     "@storybook/react-vite": "^10.4.6",
     "@tailwindcss/vite": "^4.3.2",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^6.0.3",
+    "@vitest/browser": "^4.1.10",
+    "@vitest/browser-playwright": "^4.1.10",
+    "@vitest/coverage-v8": "^4.1.10",
     "chromatic": "^18.0.1",
+    "playwright": "^1.61.1",
     "storybook": "^10.4.6",
     "tailwindcss": "^4.3.2",
     "typescript": "^6.0.3",
-    "vite": "^8.1.3"
+    "vite": "^8.1.3",
+    "vitest": "^4.1.10"
   }
 }
diff --git a/apps/storybook/vitest.config.ts b/apps/storybook/vitest.config.ts
@@ -0,0 +1,20 @@
+import { defineConfig } from "vitest/config";
+import { playwright } from "@vitest/browser-playwright";
+import { storybookTest } from "@storybook/addon-vitest/vitest-plugin";
+
+// Runs every story as a test in a real Chromium (Playwright). Interaction
+// assertions live in each story's `play` function. Storybook's plugin reuses
+// the .storybook config (framework, Tailwind viteFinal, decorators), and since
+// Storybook 10.3 the addon applies the preview annotations automatically.
+export default defineConfig({
+  plugins: [storybookTest({ configDir: ".storybook" })],
+  test: {
+    name: "storybook",
+    browser: {
+      enabled: true,
+      provider: playwright(),
+      headless: true,
+      instances: [{ browser: "chromium" }],
+    },
+  },
+});