chore: add Storybook 10 with browser-mode tests via Vitest

.claude/launch.json

@@ -6,6 +6,12 @@
       "runtimeExecutable": "pnpm",
       "runtimeArgs": ["--dir", "demo", "dev"],
       "port": 5173
+    },
+    {
+      "name": "storybook",
+      "runtimeExecutable": "pnpm",
+      "runtimeArgs": ["storybook"],
+      "port": 6006
     }
   ]
 }

.github/workflows/ci.yml

@@ -40,7 +40,7 @@ jobs:
   test:
     name: Test (Node ${{ matrix.node-version }})
     runs-on: ubuntu-latest
-    timeout-minutes: 5
+    timeout-minutes: 10
     strategy:
       matrix:
         node-version: [20, 22]
@@ -49,4 +49,6 @@ jobs:
       - uses: ./.github/actions/setup
         with:
           node-version: ${{ matrix.node-version }}
+      - name: Install Playwright Chromium
+        run: pnpm exec playwright install --with-deps chromium
       - run: pnpm test

.github/workflows/publish.yml

@@ -20,6 +20,8 @@ jobs:
       - uses: ./.github/actions/setup
       - run: pnpm run lint
       - run: pnpm run typecheck
+      - name: Install Playwright Chromium
+        run: pnpm exec playwright install --with-deps chromium
       - run: pnpm test
       - run: pnpm run build:clean
       - run: pnpm publish --provenance --access public --no-git-checks

.gitignore

@@ -1,6 +1,7 @@
 node_modules/
 dist/
 coverage/
+storybook-static/
 *.tsbuildinfo
 .env
 .env.*

.storybook/main.ts

@@ -0,0 +1,18 @@
+import { mergeConfig } from 'vite';
+import tailwindcss from '@tailwindcss/vite';
+import type { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+  framework: '@storybook/react-vite',
+  stories: ['../src/**/*.stories.@(ts|tsx)'],
+  addons: ['@storybook/addon-docs', '@storybook/addon-a11y', '@storybook/addon-vitest'],
+  typescript: {
+    reactDocgen: 'react-docgen-typescript'
+  },
+  viteFinal: (viteConfig) =>
+    mergeConfig(viteConfig, {
+      plugins: [tailwindcss()]
+    })
+};
+
+export default config;

.storybook/preview.css

@@ -0,0 +1,62 @@
+/**
+ * Storybook preview stylesheet. Pulls in the package's source CSS (which
+ * handles Tailwind v4 + scanning src/ for utilities) and supplies the
+ * shadcn-style design tokens that consumers normally provide. Without
+ * these vars the components fall back to their hardcoded defaults; with
+ * them set, the builder renders against a coherent palette in both
+ * light and dark mode.
+ */
+@import "../src/styles.src.css";
+
+:root {
+  --background: 0 0% 100%;
+  --foreground: 222.2 84% 4.9%;
+  --card: 0 0% 100%;
+  --card-foreground: 222.2 84% 4.9%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 222.2 84% 4.9%;
+  --primary: 231.7 48.6% 54.1%;
+  --primary-foreground: 210 40% 98%;
+  --secondary: 210 40% 96%;
+  --secondary-foreground: 222.2 47.4% 11.2%;
+  --muted: 210 40% 96%;
+  --muted-foreground: 215.4 16.3% 46.9%;
+  --accent: 210 40% 96%;
+  --accent-foreground: 222.2 47.4% 11.2%;
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 210 40% 98%;
+  --border: 214.3 31.8% 91.4%;
+  --input: 214.3 31.8% 91.4%;
+  --ring: 231.7 48.6% 54.1%;
+  --radius: 0.5rem;
+}
+
+.dark {
+  --background: 222.2 84% 4.9%;
+  --foreground: 210 40% 98%;
+  --card: 222.2 84% 4.9%;
+  --card-foreground: 210 40% 98%;
+  --popover: 222.2 84% 4.9%;
+  --popover-foreground: 210 40% 98%;
+  --primary: 217.2 91.2% 59.8%;
+  --primary-foreground: 222.2 47.4% 11.2%;
+  --secondary: 217.2 32.6% 17.5%;
+  --secondary-foreground: 210 40% 98%;
+  --muted: 217.2 32.6% 17.5%;
+  --muted-foreground: 215 20.2% 65.1%;
+  --accent: 217.2 32.6% 17.5%;
+  --accent-foreground: 210 40% 98%;
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 210 40% 98%;
+  --border: 217.2 32.6% 17.5%;
+  --input: 217.2 32.6% 17.5%;
+  --ring: 224.3 76.3% 48%;
+}
+
+html,
+body,
+#storybook-root {
+  height: 100%;
+  background-color: hsl(var(--background));
+  color: hsl(var(--foreground));
+}

.storybook/preview.ts

@@ -0,0 +1,50 @@
+import type { Preview } from '@storybook/react-vite';
+import './preview.css';
+
+const preview: Preview = {
+  parameters: {
+    layout: 'centered',
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i
+      }
+    },
+    a11y: {
+      test: 'todo'
+    },
+    backgrounds: {
+      default: 'light',
+      values: [
+        { name: 'light', value: '#ffffff' },
+        { name: 'dark', value: '#0b1020' }
+      ]
+    }
+  },
+  globalTypes: {
+    theme: {
+      description: 'Builder color theme',
+      defaultValue: 'light',
+      toolbar: {
+        title: 'Theme',
+        icon: 'paintbrush',
+        items: [
+          { value: 'light', title: 'Light' },
+          { value: 'dark', title: 'Dark' }
+        ],
+        dynamicTitle: true
+      }
+    }
+  },
+  decorators: [
+    (Story, context) => {
+      const theme = context.globals.theme === 'dark' ? 'dark' : '';
+      if (typeof document !== 'undefined') {
+        document.documentElement.classList.toggle('dark', theme === 'dark');
+      }
+      return Story();
+    }
+  ]
+};
+
+export default preview;

package.json

@@ -31,6 +31,8 @@
     "test": "vitest run",
     "test:watch": "vitest",
     "test:coverage": "vitest run --coverage",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
     "lint": "biome check .",
     "lint:fix": "biome check --fix .",
     "format": "biome format --write .",
@@ -47,14 +49,14 @@
     "@radix-ui/react-radio-group": "^1.2.3",
     "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-tooltip": "^1.2.7",
+    "@tightknitai/slack-block-kit-validator": "^0.1.0-alpha.0",
     "@tiptap/extension-link": "^3.22.3",
     "@tiptap/react": "^3.3.1",
     "@tiptap/starter-kit": "^3.3.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.563.0",
     "nanoid": "^5.1.7",
-    "@tightknitai/slack-block-kit-validator": "^0.1.0-alpha.0",
     "slack-blocks-to-jsx": "^1.0.4",
     "tailwind-merge": "^2.6.0"
   },
@@ -65,20 +67,30 @@
   },
   "devDependencies": {
     "@biomejs/biome": "^2.4.15",
+    "@storybook/addon-a11y": "^10.4.0",
+    "@storybook/addon-docs": "^10.4.0",
+    "@storybook/addon-vitest": "^10.4.0",
+    "@storybook/react-vite": "^10.4.0",
     "@tailwindcss/cli": "^4.1.8",
+    "@tailwindcss/vite": "^4.3.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.1.0",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",
+    "@vitest/browser": "^4.1.6",
+    "@vitest/browser-playwright": "^4.1.6",
     "@vitest/coverage-v8": "^4.1.4",
     "jsdom": "^25.0.1",
     "lefthook": "^2.1.5",
+    "playwright": "^1.60.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "slack-web-api-client": "^1.1.11",
+    "storybook": "^10.4.0",
     "tailwindcss": "^4.1.8",
     "tsup": "^8.3.5",
     "typescript": "^6.0.3",
+    "vite": "^7.3.3",
     "vitest": "^4.1.4"
   },
   "repository": {