@auto-engineer/generate-react-client 1.28.0 → 1.30.0

package/CHANGELOG.md

@@ -1,5 +1,66 @@
 # @auto-engineer/generate-react-client
 
+## 1.30.0
+
+### Minor Changes
+
+- [`2181802`](https://github.com/BeOnAuto/auto-engineer/commit/21818027dc5db0ab2b69116e7dae4ed458fa6c3d) Thanks [@github-actions[bot]](https://github.com/github-actions%5Bbot%5D)! - - **pipeline**: use .declare().accepts() in auto.config.ts
+  - **pipeline**: add .declare() to EmitChain, SettledChain, HandleChain
+  - **pipeline**: add AcceptsDescriptor type and .declare().accepts() builder
+  - **react-component-implementer**: parallelize type check and browser validation
+  - **react-component-implementer**: wire mcp-pool for connection reuse
+
+- [`b095ae5`](https://github.com/BeOnAuto/auto-engineer/commit/b095ae52b9574566f64cc194b8567a001ae1210c) Thanks [@SamHatoum](https://github.com/SamHatoum)! - - **generate-react-client**: add postMessage-based iframe navigation tracking
+
+### Patch Changes
+
+- Updated dependencies [[`2181802`](https://github.com/BeOnAuto/auto-engineer/commit/21818027dc5db0ab2b69116e7dae4ed458fa6c3d), [`b095ae5`](https://github.com/BeOnAuto/auto-engineer/commit/b095ae52b9574566f64cc194b8567a001ae1210c)]:
+  - @auto-engineer/message-bus@1.30.0
+
+## 1.29.0
+
+### Minor Changes
+
+- [`2ef9632`](https://github.com/BeOnAuto/auto-engineer/commit/2ef9632a2db081f201981422f2ba26b026fa7277) Thanks [@SamHatoum](https://github.com/SamHatoum)! - ### react-component-implementer
+  - Add staging workflow with `writeStagedStory`, `checkStagedTypes`, and `promoteFromStaging`
+  - Add MCP connection pool and browser pool for resource reuse
+  - Add context filtering and system prompt caching to reduce tokens
+  - Add ts-service for type-aware error feedback with property suggestions
+  - Parallelize type checking and browser validation
+  - Replace score-based visual evaluation with binary ACK/NACK criteria
+  - Enable incremental TypeScript checking in staging
+
+  ### pipeline
+  - Add `.declare().accepts()` builder for AcceptsDescriptor type
+  - Show source commands in pipeline graph
+
+  ### job-graph-processor
+  - Add `hasFailedJobs` utility and discriminate GraphProcessed vs GraphProcessingFailed
+  - Bridge context.emit in command handler for downstream event routing
+
+  ### server-generator-apollo-emmett
+  - Add cleanServerDir to preserve node_modules during regeneration
+  - Accept Model directly instead of modelPath
+
+  ### server-generator-nestjs
+  - Accept Model directly instead of modelPath
+
+  ### generate-react-client
+  - Lock in overwrite behavior for copyStarter
+
+  ### narrative
+  - Remove export-schema command
+
+  ### global
+  - Remove references to information-architect and model-diff packages
+  - Fix biome lint errors for CI compliance
+  - Update examples and configuration files
+
+### Patch Changes
+
+- Updated dependencies [[`2ef9632`](https://github.com/BeOnAuto/auto-engineer/commit/2ef9632a2db081f201981422f2ba26b026fa7277)]:
+  - @auto-engineer/message-bus@1.29.0
+
 ## 1.28.0
 
 ### Minor Changes

package/dist/src/copy-starter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"copy-starter.d.ts","sourceRoot":"","sources":["../../src/copy-starter.ts"],"names":[],"mappings":"AA8BA,wBAAsB,WAAW,CAAC,UAAU,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,CAWxF"}
+{"version":3,"file":"copy-starter.d.ts","sourceRoot":"","sources":["../../src/copy-starter.ts"],"names":[],"mappings":"AA8BA,wBAAsB,WAAW,CAAC,UAAU,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,CAUxF"}

package/dist/src/copy-starter.js

@@ -26,7 +26,6 @@ export async function copyStarter(starterDir, targetDir) {
     const src = path.isAbsolute(starterDir) ? starterDir : path.resolve(process.cwd(), starterDir);
     const dest = path.isAbsolute(targetDir) ? targetDir : path.resolve(process.cwd(), targetDir);
     debug('Copying starter from %s to %s', src, dest);
-    await fs.rm(dest, { recursive: true, force: true });
     const fileCount = await copyDir(src, dest);
     debug('Copied %d files to %s', fileCount, dest);
     return fileCount;

package/dist/src/copy-starter.js.map

@@ -1 +1 @@
-{"version":3,"file":"copy-starter.js","sourceRoot":"","sources":["../../src/copy-starter.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,KAAK,IAAI,MAAM,WAAW,CAAC;AAClC,OAAO,WAAW,MAAM,OAAO,CAAC;AAEhC,MAAM,KAAK,GAAG,WAAW,CAAC,yCAAyC,CAAC,CAAC;AAErE,MAAM,IAAI,GAAG,IAAI,GAAG,CAAC,CAAC,cAAc,EAAE,gBAAgB,EAAE,WAAW,CAAC,CAAC,CAAC;AAEtE,KAAK,UAAU,OAAO,CAAC,GAAW,EAAE,IAAY;IAC9C,MAAM,EAAE,CAAC,KAAK,CAAC,IAAI,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;IAC1C,MAAM,OAAO,GAAG,MAAM,EAAE,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC;IAC/D,IAAI,KAAK,GAAG,CAAC,CAAC;IAEd,KAAK,MAAM,KAAK,IAAI,OAAO,EAAE,CAAC;QAC5B,IAAI,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC;YAAE,SAAS;QAEnC,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC;QAC3C,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC;QAE7C,IAAI,KAAK,CAAC,WAAW,EAAE,EAAE,CAAC;YACxB,KAAK,IAAI,MAAM,OAAO,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;QAC5C,CAAC;aAAM,IAAI,KAAK,CAAC,MAAM,EAAE,EAAE,CAAC;YAC1B,MAAM,EAAE,CAAC,QAAQ,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;YACrC,KAAK,EAAE,CAAC;QACV,CAAC;IACH,CAAC;IAED,OAAO,KAAK,CAAC;AACf,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,WAAW,CAAC,UAAkB,EAAE,SAAiB;IACrE,MAAM,GAAG,GAAG,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,UAAU,CAAC,CAAC;IAC/F,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,SAAS,CAAC,CAAC;IAE7F,KAAK,CAAC,+BAA+B,EAAE,GAAG,EAAE,IAAI,CAAC,CAAC;IAElD,MAAM,EAAE,CAAC,EAAE,CAAC,IAAI,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC;IACpD,MAAM,SAAS,GAAG,MAAM,OAAO,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC;IAE3C,KAAK,CAAC,uBAAuB,EAAE,SAAS,EAAE,IAAI,CAAC,CAAC;IAChD,OAAO,SAAS,CAAC;AACnB,CAAC"}
+{"version":3,"file":"copy-starter.js","sourceRoot":"","sources":["../../src/copy-starter.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,KAAK,IAAI,MAAM,WAAW,CAAC;AAClC,OAAO,WAAW,MAAM,OAAO,CAAC;AAEhC,MAAM,KAAK,GAAG,WAAW,CAAC,yCAAyC,CAAC,CAAC;AAErE,MAAM,IAAI,GAAG,IAAI,GAAG,CAAC,CAAC,cAAc,EAAE,gBAAgB,EAAE,WAAW,CAAC,CAAC,CAAC;AAEtE,KAAK,UAAU,OAAO,CAAC,GAAW,EAAE,IAAY;IAC9C,MAAM,EAAE,CAAC,KAAK,CAAC,IAAI,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;IAC1C,MAAM,OAAO,GAAG,MAAM,EAAE,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC;IAC/D,IAAI,KAAK,GAAG,CAAC,CAAC;IAEd,KAAK,MAAM,KAAK,IAAI,OAAO,EAAE,CAAC;QAC5B,IAAI,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC;YAAE,SAAS;QAEnC,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC;QAC3C,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC;QAE7C,IAAI,KAAK,CAAC,WAAW,EAAE,EAAE,CAAC;YACxB,KAAK,IAAI,MAAM,OAAO,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;QAC5C,CAAC;aAAM,IAAI,KAAK,CAAC,MAAM,EAAE,EAAE,CAAC;YAC1B,MAAM,EAAE,CAAC,QAAQ,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;YACrC,KAAK,EAAE,CAAC;QACV,CAAC;IACH,CAAC;IAED,OAAO,KAAK,CAAC;AACf,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,WAAW,CAAC,UAAkB,EAAE,SAAiB;IACrE,MAAM,GAAG,GAAG,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,UAAU,CAAC,CAAC;IAC/F,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,SAAS,CAAC,CAAC;IAE7F,KAAK,CAAC,+BAA+B,EAAE,GAAG,EAAE,IAAI,CAAC,CAAC;IAElD,MAAM,SAAS,GAAG,MAAM,OAAO,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC;IAE3C,KAAK,CAAC,uBAAuB,EAAE,SAAS,EAAE,IAAI,CAAC,CAAC;IAChD,OAAO,SAAS,CAAC;AACnB,CAAC"}

package/dist/src/copy-starter.specs.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=copy-starter.specs.d.ts.map

package/dist/src/copy-starter.specs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"copy-starter.specs.d.ts","sourceRoot":"","sources":["../../src/copy-starter.specs.ts"],"names":[],"mappings":""}

package/dist/src/copy-starter.specs.js

@@ -0,0 +1,37 @@
+import * as fs from 'node:fs/promises';
+import * as os from 'node:os';
+import * as path from 'node:path';
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+import { copyStarter } from './copy-starter.js';
+describe('copyStarter', () => {
+    let tmpDir;
+    let starterDir;
+    let targetDir;
+    beforeEach(async () => {
+        tmpDir = await fs.mkdtemp(path.join(os.tmpdir(), 'copy-starter-'));
+        starterDir = path.join(tmpDir, 'starter');
+        targetDir = path.join(tmpDir, 'target');
+        await fs.mkdir(starterDir, { recursive: true });
+        await fs.mkdir(targetDir, { recursive: true });
+    });
+    afterEach(async () => {
+        await fs.rm(tmpDir, { recursive: true, force: true });
+    });
+    it('preserves pre-existing files in target', async () => {
+        await fs.writeFile(path.join(starterDir, 'a.txt'), 'from starter');
+        await fs.writeFile(path.join(targetDir, 'b.txt'), 'pre-existing');
+        await copyStarter(starterDir, targetDir);
+        const aContent = await fs.readFile(path.join(targetDir, 'a.txt'), 'utf-8');
+        const bContent = await fs.readFile(path.join(targetDir, 'b.txt'), 'utf-8');
+        expect(aContent).toBe('from starter');
+        expect(bContent).toBe('pre-existing');
+    });
+    it('overwrites files that exist in both source and target', async () => {
+        await fs.writeFile(path.join(starterDir, 'a.txt'), 'new content');
+        await fs.writeFile(path.join(targetDir, 'a.txt'), 'old content');
+        await copyStarter(starterDir, targetDir);
+        const content = await fs.readFile(path.join(targetDir, 'a.txt'), 'utf-8');
+        expect(content).toBe('new content');
+    });
+});
+//# sourceMappingURL=copy-starter.specs.js.map

package/dist/src/copy-starter.specs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"copy-starter.specs.js","sourceRoot":"","sources":["../../src/copy-starter.specs.ts"],"names":[],"mappings":"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"}

package/dist/starter/.storybook/main.ts

@@ -1,8 +1,15 @@
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
 import { fileURLToPath } from "node:url";
-import { dirname } from "node:path";
 import type { StorybookConfig } from "@storybook/react-vite";
 
-const isFastMode = !!process.env.STORYBOOK_FAST;
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const managerHeadContent = readFileSync(
+	join(__dirname, "manager-head.html"),
+	"utf-8",
+);
+
+const isFastMode = process.env.STORYBOOK_FAST === "1";
 
 const config: StorybookConfig = {
 	stories: isFastMode
@@ -19,6 +26,7 @@ const config: StorybookConfig = {
 				},
 			},
 		},
+		getAbsolutePath("@vueless/storybook-dark-mode"),
 	],
 	staticDirs: ["../public"],
 	features: {
@@ -39,8 +47,13 @@ const config: StorybookConfig = {
 			...config.server,
 			allowedHosts: [".worker.on.auto", ".worker-dev.on.auto"],
 		};
+		config.define = {
+			...config.define,
+			"import.meta.env.STORYBOOK_FAST": JSON.stringify(isFastMode),
+		};
 		return config;
 	},
+	managerHead: () => managerHeadContent,
 };
 
 export default config;

package/dist/starter/.storybook/manager-head.html

@@ -0,0 +1,154 @@
+<script>
+  (function() {
+    // Check localStorage for dark mode state before anything renders
+    var isDark = false;
+    try {
+      var stored = localStorage.getItem('sb-addon-themes-3');
+      if (stored) {
+        var parsed = JSON.parse(stored);
+        isDark = parsed && parsed.current === 'dark';
+      }
+    } catch(e) {}
+
+    // Also check URL parameter
+    var urlParams = new URLSearchParams(window.location.search);
+    var urlTheme = urlParams.get('theme');
+    if (urlTheme) {
+      isDark = urlTheme === 'dark';
+    }
+
+    // Apply matching theme background colors immediately (blue-tinted grays)
+    document.documentElement.style.backgroundColor = isDark ? '#1a1f2e' : '#f0f3f9';
+    document.documentElement.style.colorScheme = isDark ? 'dark' : 'light';
+
+    // Store theme state for CSS
+    document.documentElement.dataset.theme = isDark ? 'dark' : 'light';
+  })();
+</script>
+<style>
+  html, body {
+    transition: none !important;
+  }
+
+  /* Force sidebar and nav backgrounds - target the actual container divs */
+  #storybook-explorer-tree,
+  [class*="sidebar"],
+  [class*="Sidebar"],
+  nav[class],
+  aside[class] {
+    background-color: #f0f3f9 !important;
+  }
+
+  html[data-theme="dark"] #storybook-explorer-tree,
+  html[data-theme="dark"] [class*="sidebar"],
+  html[data-theme="dark"] [class*="Sidebar"],
+  html[data-theme="dark"] nav[class],
+  html[data-theme="dark"] aside[class] {
+    background-color: #1a1f2e !important;
+  }
+
+  /* Force toolbar/header backgrounds */
+  [class*="toolbar"],
+  [class*="Toolbar"],
+  [class*="bar"],
+  [class*="Bar"],
+  header[class] {
+    background-color: #f0f3f9 !important;
+  }
+
+  html[data-theme="dark"] [class*="toolbar"],
+  html[data-theme="dark"] [class*="Toolbar"],
+  html[data-theme="dark"] [class*="bar"],
+  html[data-theme="dark"] [class*="Bar"],
+  html[data-theme="dark"] header[class] {
+    background-color: #1a1f2e !important;
+  }
+
+  /* Force ALL sidebar text to dark gray instead of blue */
+  [data-nodetype],
+  [data-nodetype] * {
+    color: #2d3748 !important;
+  }
+
+  html[data-theme="dark"] [data-nodetype],
+  html[data-theme="dark"] [data-nodetype] * {
+    color: #e2e8f0 !important;
+  }
+
+  /* Sidebar selection styles - subtle background */
+  [data-nodetype="story"][data-selected="true"],
+  [data-nodetype="document"][data-selected="true"],
+  [data-nodetype="component"][data-selected="true"],
+  [data-nodetype="group"][data-selected="true"] {
+    background-color: #e2e8f0 !important;
+    border-radius: 0.5rem !important;
+  }
+
+  [data-nodetype="story"][data-selected="true"] *,
+  [data-nodetype="document"][data-selected="true"] *,
+  [data-nodetype="component"][data-selected="true"] *,
+  [data-nodetype="group"][data-selected="true"] * {
+    color: #1a202c !important;
+  }
+
+  /* Dark mode selected item */
+  html[data-theme="dark"] [data-nodetype="story"][data-selected="true"],
+  html[data-theme="dark"] [data-nodetype="document"][data-selected="true"],
+  html[data-theme="dark"] [data-nodetype="component"][data-selected="true"],
+  html[data-theme="dark"] [data-nodetype="group"][data-selected="true"] {
+    background-color: #3d4663 !important;
+  }
+
+  html[data-theme="dark"] [data-nodetype="story"][data-selected="true"] *,
+  html[data-theme="dark"] [data-nodetype="document"][data-selected="true"] *,
+  html[data-theme="dark"] [data-nodetype="component"][data-selected="true"] *,
+  html[data-theme="dark"] [data-nodetype="group"][data-selected="true"] * {
+    color: #f7fafc !important;
+  }
+
+  /* Hover state */
+  [data-nodetype="story"]:hover,
+  [data-nodetype="document"]:hover,
+  [data-nodetype="component"]:hover,
+  [data-nodetype="group"]:hover {
+    background-color: #edf2f7 !important;
+    border-radius: 0.5rem !important;
+  }
+
+  html[data-theme="dark"] [data-nodetype="story"]:hover,
+  html[data-theme="dark"] [data-nodetype="document"]:hover,
+  html[data-theme="dark"] [data-nodetype="component"]:hover,
+  html[data-theme="dark"] [data-nodetype="group"]:hover {
+    background-color: #2d3748 !important;
+  }
+
+  /* Selected hover - keep selected state */
+  [data-nodetype][data-selected="true"]:hover {
+    background-color: #e2e8f0 !important;
+  }
+
+  html[data-theme="dark"] [data-nodetype][data-selected="true"]:hover {
+    background-color: #3d4663 !important;
+  }
+</style>
+<script>
+(function() {
+  if (window.parent === window) return;
+  function notify() {
+    window.parent.postMessage({ type: 'iframe-url-change', url: location.href }, '*');
+  }
+  var pushState = history.pushState;
+  var replaceState = history.replaceState;
+  history.pushState = function() {
+    pushState.apply(this, arguments);
+    notify();
+  };
+  history.replaceState = function() {
+    replaceState.apply(this, arguments);
+    notify();
+  };
+  window.addEventListener('popstate', notify);
+  window.addEventListener('hashchange', notify);
+  notify();
+})();
+</script>

package/dist/starter/.storybook/manager.ts

@@ -0,0 +1,165 @@
+import { addons } from 'storybook/manager-api';
+import { create } from 'storybook/theming';
+import { STORY_CHANGED } from 'storybook/internal/core-events';
+import { UPDATE_DARK_MODE_EVENT_NAME } from '@vueless/storybook-dark-mode';
+
+// Get initial theme from localStorage (dark mode addon) or URL parameter
+const urlParams = new URLSearchParams(window.location.search);
+const urlTheme = urlParams.get('theme');
+const getStoredDarkMode = (): boolean => {
+  try {
+    const stored = localStorage.getItem('sb-addon-themes-3');
+    if (stored) {
+      const parsed = JSON.parse(stored);
+      return parsed?.current === 'dark';
+    }
+  } catch {}
+  return false;
+};
+const initialIsDark = urlTheme ? urlTheme === 'dark' : getStoredDarkMode();
+
+// Theme colors matching app's design with subtle blue tint
+// Analyzed from screenshots - app has slight blue undertone in grays
+
+const lightTheme = create({
+  base: 'light',
+  brandTitle: ' ',
+  brandUrl: '/',
+  brandImage: '/blank.svg',
+
+  // App background colors - matching your app's blue-tinted sidebar
+  appBg: '#f0f3f9',           // sidebar background (blue-tinted like your app)
+  appContentBg: '#ffffff',    // main content area
+  appPreviewBg: '#ffffff',    // preview/canvas background
+  appBorderColor: '#e2e8f0',  // borders (blue-tinted)
+  appBorderRadius: 10,        // 0.625rem = 10px
+
+  // Text colors - dark gray, not blue
+  textColor: '#2d3748',       // dark gray text for sidebar items
+  textMutedColor: '#718096',  // muted gray text
+  textInverseColor: '#f7fafc',// inverse text
+
+  // Toolbar/UI colors
+  barBg: '#f0f3f9',           // toolbar background (blue-tinted)
+  barTextColor: '#2d3748',    // toolbar text (dark gray)
+  barHoverColor: '#1a202c',   // toolbar hover
+  barSelectedColor: '#1a202c',// toolbar selected
+
+  // Form colors
+  inputBg: '#ffffff',         // input background
+  inputBorder: '#e2e8f0',     // input border
+  inputTextColor: '#2d3748',  // input text
+
+  // Button colors
+  buttonBg: '#edf2f7',        // button background
+  buttonBorder: '#e2e8f0',    // button border
+
+  // Boolean inputs
+  booleanBg: '#edf2f7',
+  booleanSelectedBg: '#2d3748',
+
+  // Grid colors for canvas
+  gridCellSize: 10,
+
+  // Color for links/interactive items - override the blue
+  colorPrimary: '#2d3748',
+  colorSecondary: '#4a5568',
+});
+
+const darkTheme = create({
+  base: 'dark',
+  brandTitle: ' ',
+  brandUrl: '/',
+  brandImage: '/blank.svg',
+
+  // App background colors - matching app's dark blue-tinted theme
+  appBg: '#1a1f2e',           // sidebar background (blue-tinted dark)
+  appContentBg: '#131620',    // main content area (darker)
+  appPreviewBg: '#131620',    // preview/canvas background
+  appBorderColor: '#2a3142',  // borders (blue-tinted)
+  appBorderRadius: 10,
+
+  // Text colors - light gray, not blue
+  textColor: '#e2e8f0',       // light gray text
+  textMutedColor: '#a0aec0',  // muted gray text
+  textInverseColor: '#1a1f2e',// inverse text
+
+  // Toolbar/UI colors
+  barBg: '#1a1f2e',           // toolbar background
+  barTextColor: '#e2e8f0',    // toolbar text (light gray)
+  barHoverColor: '#f7fafc',   // toolbar hover
+  barSelectedColor: '#f7fafc',// toolbar selected
+
+  // Form colors
+  inputBg: '#242938',         // input background
+  inputBorder: '#3d4663',     // input border
+  inputTextColor: '#e2e8f0',  // input text
+
+  // Button colors
+  buttonBg: '#242938',        // button background
+  buttonBorder: '#3d4663',    // button border
+
+  // Boolean inputs
+  booleanBg: '#242938',
+  booleanSelectedBg: '#e2e8f0',
+
+  // Grid colors for canvas
+  gridCellSize: 10,
+
+  // Color for links/interactive items - override the blue
+  colorPrimary: '#e2e8f0',
+  colorSecondary: '#a0aec0',
+});
+
+const customTheme = initialIsDark ? darkTheme : lightTheme;
+
+// Hide the addon panel globally (Storybook 8+/10 API)
+addons.setConfig({
+  bottomPanelHeight: 0,
+  layoutCustomisations: {
+    showPanel: () => false,
+  },
+  theme: customTheme,
+});
+
+// Set default story to Design System Overview if no path specified
+if (!urlParams.has('path')) {
+  const newUrl = new URL(window.location.href);
+  newUrl.searchParams.set('path', '/story/design-system-overview--default');
+  window.history.replaceState({}, '', newUrl.toString());
+}
+
+// Register addon to handle navigation sync and theme after Storybook is ready
+addons.register('url-sync', (api) => {
+  const channel = api.getChannel();
+  if (!channel) return;
+
+  // Set initial dark mode state (pass string "dark" or "light", not boolean)
+  if (initialIsDark) {
+    channel.emit(UPDATE_DARK_MODE_EVENT_NAME, 'dark');
+  }
+
+  // Report navigation changes to parent window for URL bar sync
+  channel.on(STORY_CHANGED, (storyId: string) => {
+    if (window.parent !== window) {
+      window.parent.postMessage({ type: 'storybook-navigation', storyId }, '*');
+    }
+  });
+
+  // Listen for theme changes from parent window
+  window.addEventListener('message', (event) => {
+    if (event.data?.type === 'storybook-theme-change' && event.data?.theme) {
+      const isDark = event.data.theme === 'dark';
+      // Update the dark mode addon
+      channel.emit(UPDATE_DARK_MODE_EVENT_NAME, event.data.theme);
+      // Update the Storybook manager theme
+      addons.setConfig({
+        theme: isDark ? darkTheme : lightTheme,
+      });
+      // Update CSS theme selector and background
+      document.documentElement.dataset.theme = isDark ? 'dark' : 'light';
+      document.documentElement.style.backgroundColor = isDark ? '#1a1f2e' : '#f0f3f9';
+      document.documentElement.style.colorScheme = isDark ? 'dark' : 'light';
+    }
+  });
+});

package/dist/starter/.storybook/preview-head.html

@@ -0,0 +1,31 @@
+<script>
+  (function() {
+    var isDark = false;
+    var stored, parsed, urlParams, urlTheme;
+    try {
+      stored = localStorage.getItem('sb-addon-themes-3');
+      if (stored) {
+        parsed = JSON.parse(stored);
+        isDark = parsed && parsed.current === 'dark';
+      }
+    } catch(_) {}
+
+    urlParams = new URLSearchParams(window.location.search);
+    urlTheme = urlParams.get('theme');
+    if (urlTheme) {
+      isDark = urlTheme === 'dark';
+    }
+
+    if (isDark) {
+      document.documentElement.classList.add('dark');
+    }
+    // Dark: appContentBg=#222325, Light: #FFFFFF
+    document.documentElement.style.backgroundColor = isDark ? '#222325' : '#FFFFFF';
+    document.documentElement.style.colorScheme = isDark ? 'dark' : 'light';
+  })();
+</script>
+<style>
+  html, body {
+    transition: none;
+  }
+</style>

package/dist/starter/.storybook/preview.tsx

@@ -1,9 +1,51 @@
 import type { Preview } from '@storybook/react-vite';
+import type { PropsWithChildren } from 'react';
+import { useEffect, useState } from 'react';
+import { addons } from 'storybook/preview-api';
+import { themes } from 'storybook/theming';
+import { DocsContainer } from '@storybook/addon-docs/blocks';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { DARK_MODE_EVENT_NAME } from '@vueless/storybook-dark-mode';
 import { initialize, mswLoader } from 'msw-storybook-addon';
 import '../src/index.css';
 
-initialize();
+initialize({
+  onUnhandledRequest: 'bypass',
+});
+
+// Apply theme to the preview iframe (for component styling and background)
+const applyTheme = (isDark: boolean) => {
+  if (isDark) {
+    document.documentElement.classList.add('dark');
+  } else {
+    document.documentElement.classList.remove('dark');
+  }
+  // Update background color to match Storybook theme
+  document.documentElement.style.backgroundColor = isDark ? '#222325' : '#FFFFFF';
+  document.documentElement.style.colorScheme = isDark ? 'dark' : 'light';
+};
+
+// Get initial theme from URL parameter or localStorage
+const urlParams = new URLSearchParams(window.location.search);
+const urlTheme = urlParams.get('theme');
+const getStoredDarkMode = (): boolean => {
+  try {
+    const stored = localStorage.getItem('sb-addon-themes-3');
+    if (stored) {
+      const parsed = JSON.parse(stored);
+      return parsed?.current === 'dark';
+    }
+  } catch {}
+  return false;
+};
+const initialIsDark = urlTheme ? urlTheme === 'dark' : getStoredDarkMode();
+applyTheme(initialIsDark);
+
+// Listen to dark mode addon changes and sync with our CSS class
+const channel = addons.getChannel();
+channel.on(DARK_MODE_EVENT_NAME, (isDark: boolean) => {
+  applyTheme(isDark);
+});
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -13,7 +55,28 @@ const queryClient = new QueryClient({
   },
 });
 
+// Themed docs container that responds to dark mode
+function ThemedDocsContainer({
+  children,
+  context,
+}: PropsWithChildren<{ context: Parameters<typeof DocsContainer>[0]['context'] }>) {
+  const [isDark, setIsDark] = useState(initialIsDark);
+
+  useEffect(() => {
+    const ch = addons.getChannel();
+    ch.on(DARK_MODE_EVENT_NAME, setIsDark);
+    return () => ch.off(DARK_MODE_EVENT_NAME, setIsDark);
+  }, []);
+
+  return (
+    <DocsContainer context={context} theme={isDark ? themes.dark : themes.light}>
+      {children}
+    </DocsContainer>
+  );
+}
+
 const preview: Preview = {
+  tags: ['autodocs'],
   decorators: [
     (Story) => (
       <QueryClientProvider client={queryClient}>
@@ -33,10 +96,20 @@ const preview: Preview = {
     },
     layout: 'padded',
     options: {
+      showPanel: false,
       storySort: {
-        order: ['Design System', 'UI Components'],
+        order: ['Design System', ['Overview', '*'], 'UI Components'],
       },
     },
+    darkMode: {
+      current: initialIsDark ? 'dark' : 'light',
+      stylePreview: true,
+      dark: themes.dark,
+      light: themes.light,
+    },
+    docs: {
+      container: ThemedDocsContainer,
+    },
   },
   initialGlobals: {
     showPanel: false,

package/dist/starter/package.json

@@ -9,6 +9,7 @@
     "preview": "vite preview",
     "type-check": "tsc --noEmit -p tsconfig.app.json",
     "storybook": "storybook dev -p 6006",
+    "storybook:fast": "STORYBOOK_FAST=1 storybook dev -p 6006",
     "build-storybook": "storybook build"
   },
   "dependencies": {
@@ -20,6 +21,7 @@
     "cmdk": "^1.1.1",
     "date-fns": "^4.1.0",
     "embla-carousel-react": "^8.6.0",
+    "graphql-request": "^7.4.0",
     "input-otp": "^1.4.2",
     "lucide-react": "^0.539.0",
     "next-themes": "^0.4.6",
@@ -44,6 +46,7 @@
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react-swc": "^4.2.2",
+    "@vueless/storybook-dark-mode": "^10.0.7",
     "msw": "^2.12.10",
     "msw-storybook-addon": "^2.0.6",
     "storybook": "^10.2.8",