feat(ui): D.0 foundation for Live 12 restyle — primitives + Storybook

.github/workflows/chromatic.yml

@@ -0,0 +1,53 @@
+name: Chromatic
+
+# Runs Chromatic visual regression on the apps/ui Storybook build.
+# Requires the CHROMATIC_PROJECT_TOKEN repository secret to be set.
+# Non-blocking — uses --exit-zero-on-changes so visual diffs do not fail CI.
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+    paths:
+      - "apps/ui/**"
+      - ".github/workflows/chromatic.yml"
+
+jobs:
+  chromatic:
+    name: Chromatic
+    runs-on: ubuntu-latest
+    if: ${{ github.event.pull_request.draft == false }}
+    defaults:
+      run:
+        working-directory: apps/ui
+    steps:
+      - uses: actions/checkout@v6
+        with:
+          # Chromatic needs full history to detect baselines.
+          fetch-depth: 0
+      - uses: actions/setup-node@v6
+        with:
+          node-version: "20"
+          cache: "npm"
+          cache-dependency-path: apps/ui/package-lock.json
+      - run: npm ci
+      - name: Check Chromatic project token
+        id: chromatic_check
+        env:
+          CHROMATIC_TOKEN: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+        run: |
+          if [ -z "$CHROMATIC_TOKEN" ]; then
+            echo "::notice::CHROMATIC_PROJECT_TOKEN secret is not configured — skipping Chromatic publish. Set the secret in repository settings to enable visual regression."
+            echo "skip=true" >> "$GITHUB_OUTPUT"
+          else
+            echo "skip=false" >> "$GITHUB_OUTPUT"
+          fi
+      - name: Publish to Chromatic
+        if: steps.chromatic_check.outputs.skip != 'true'
+        uses: chromaui/action@latest
+        with:
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          workingDir: apps/ui
+          exitZeroOnChanges: true
+          onlyChanged: true

apps/ui/.gitignore

@@ -9,3 +9,4 @@ coverage/
 !.env.example
 playwright-report/
 test-results/
+storybook-static/

apps/ui/.storybook/main.ts

@@ -0,0 +1,17 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+  framework: '@storybook/react-vite',
+  stories: ['../src/**/*.stories.@(ts|tsx)'],
+  addons: ['@storybook/addon-a11y'],
+  // Reapply the Tailwind v4 plugin so Storybook sees the @theme tokens from
+  // src/index.css. The app uses @tailwindcss/vite; Storybook's standalone Vite
+  // pipeline does not pick that up by default.
+  viteFinal: async (vite) => {
+    const { default: tailwindcss } = await import('@tailwindcss/vite');
+    vite.plugins = [...(vite.plugins ?? []), tailwindcss()];
+    return vite;
+  },
+};
+
+export default config;

apps/ui/.storybook/preview.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import type { Preview } from '@storybook/react-vite';
+
+import '../src/index.css';
+import { TooltipProvider } from '../src/components/ui/Tooltip';
+
+const preview: Preview = {
+  parameters: {
+    backgrounds: {
+      default: 'app',
+      values: [
+        { name: 'app', value: '#2b2b2b' },
+        { name: 'panel', value: '#3c3c3c' },
+        { name: 'card', value: '#444444' },
+        { name: 'surface-dark', value: '#222222' },
+      ],
+    },
+    layout: 'centered',
+    controls: { expanded: true },
+  },
+  decorators: [
+    (Story) => (
+      <TooltipProvider>
+        <div className="font-sans text-text-primary p-6 min-w-[320px]">
+          <Story />
+        </div>
+      </TooltipProvider>
+    ),
+  ],
+};
+
+export default preview;