feat(storybook): begin the approved Gate C UI foundation

.github/workflows/ci.yml

@@ -236,3 +236,21 @@ jobs:
         run: npm run type-check
       - name: Build production app
         run: npm run build
+
+  storybook:
+    name: Storybook Gate C
+    runs-on: ubuntu-latest
+    needs: lint
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+      - name: Setup Node.js
+        uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
+        with:
+          node-version: 24
+      - name: Enable pnpm
+        run: corepack enable pnpm
+      - name: Install frozen dependencies
+        run: pnpm install --frozen-lockfile
+      - name: Build the isolated story catalog
+        run: pnpm build-storybook --quiet

.storybook/main.ts

@@ -1,20 +1,26 @@
 import type { StorybookConfig } from '@storybook/nextjs-vite';
 
 const config: StorybookConfig = {
-  "stories": [
-    "../src/**/*.mdx",
-    "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"
+  stories: [
+    '../src/**/*.mdx',
+    '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)',
   ],
-  "addons": [
-    "@chromatic-com/storybook",
-    "@storybook/addon-vitest",
-    "@storybook/addon-a11y",
-    "@storybook/addon-docs",
-    "@storybook/addon-onboarding"
+  addons: [
+    '@storybook/addon-a11y',
+    '@storybook/addon-docs',
+    '@storybook/addon-vitest',
+    '@chromatic-com/storybook',
   ],
-  "framework": "@storybook/nextjs-vite",
-  "staticDirs": [
-    "..\\public"
-  ]
+  framework: {
+    name: '@storybook/nextjs-vite',
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+  features: {
+    experimentalRSC: true,
+  },
 };
-export default config;
+
+export default config;

.storybook/manager.ts

@@ -0,0 +1,10 @@
+import { addons } from 'storybook/manager-api';
+import { themes } from 'storybook/theming';
+
+addons.setConfig({
+  theme: {
+    ...themes.light,
+    brandTitle: 'TruthBounty · Gate C UI',
+    brandUrl: 'https://github.com/DigiNodes/truthbounty-protocol/tree/main/docs/ux-authority',
+  },
+});

.storybook/preview.ts

@@ -0,0 +1,64 @@
+import { createElement } from 'react';
+import type { Preview } from '@storybook/nextjs-vite';
+
+import '../src/app/globals.css';
+
+const preview: Preview = {
+  globalTypes: {
+    theme: {
+      description: 'Gate C colour scheme',
+      defaultValue: 'light',
+      toolbar: {
+        icon: 'mirror',
+        items: [
+          { value: 'light', title: 'Light' },
+          { value: 'dark', title: 'Dark' },
+        ],
+      },
+    },
+  },
+  decorators: [
+    (Story, context) => {
+      const theme = context.globals.theme === 'dark' ? 'dark' : 'light';
+      return createElement(
+        'div',
+        { className: theme, 'data-theme': theme, style: { minHeight: '100vh' } },
+        createElement(
+          'div',
+          { className: 'bg-canvas text-ink min-h-screen p-6' },
+          createElement(Story),
+        ),
+      );
+    },
+  ],
+  parameters: {
+    layout: 'padded',
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+    a11y: {
+      test: 'error',
+    },
+    viewport: {
+      options: {
+        mobile: {
+          name: 'Mobile · 390 × 844',
+          styles: { width: '390px', height: '844px' },
+        },
+        tablet: {
+          name: 'Tablet · 768 × 1024',
+          styles: { width: '768px', height: '1024px' },
+        },
+        desktop: {
+          name: 'Desktop · 1440 × 900',
+          styles: { width: '1440px', height: '900px' },
+        },
+      },
+    },
+  },
+};
+
+export default preview;

src/stories/README.md

@@ -0,0 +1,31 @@
+# Gate C Storybook boundary
+
+Storybook implements the approved UX authority from
+`truthbounty-protocol/docs/ux-authority` and the high-fidelity prototype in
+`truthbounty-protocol/designs/frontend-v2/prototype`.
+
+## Rules
+
+- Stories display illustrative, visibly non-canonical data only.
+- Story fixtures must remain inside `*.stories.*`, `*.test.*`, or an explicit
+  `__fixtures__` directory and may never be imported by production modules.
+- Components receive capability and lifecycle state from adapters; they do not
+  infer protocol authority, settlement, rewards, confirmations, finality, or
+  projection freshness.
+- Chain-confirmed and API-projected state are separate variants.
+- Optimism/EVM is the only runtime. “Stellar Wave” is a contribution-program
+  label and is not product/runtime authority.
+- New visual or interaction patterns require an authority mapping in the PR.
+
+## Required state coverage
+
+Every stateful component must cover the applicable loading, empty, stale,
+disabled and error states. Transaction surfaces must distinguish pending,
+confirmed, finalized, rejected, reverted, replaced, dropped, reorged and
+indexer-delayed states.
+
+## Responsive and accessibility matrix
+
+Stories are checked at 390 px, 768 px and 1440 px, in light and dark themes.
+Keyboard behavior, visible focus, semantic labels, contrast, reduced motion and
+long-content behavior are required acceptance evidence.