@auto-engineer/generate-react-client 1.63.0 → 1.65.0

package/CHANGELOG.md

@@ -1,5 +1,50 @@
 # @auto-engineer/generate-react-client
 
+## 1.65.0
+
+### Minor Changes
+
+- [`bd14e09`](https://github.com/BeOnAuto/auto-engineer/commit/bd14e09fa399e218348a4d0f334bc3423106f64a) Thanks [@osamanar](https://github.com/osamanar)! - - Fixed component generation in the React component implementer
+
+- [`f3a6b66`](https://github.com/BeOnAuto/auto-engineer/commit/f3a6b662a35ae480d58a42d5207cb51d1e9106de) Thanks [@osamanar](https://github.com/osamanar)! - - Improved the starter template for React client generation
+
+- [`e4ed42d`](https://github.com/BeOnAuto/auto-engineer/commit/e4ed42dac98562148efc5ae293841c36efa6c5c7) Thanks [@osamanar](https://github.com/osamanar)! - - Fixed type definitions in the React client generator
+
+### Patch Changes
+
+- [`d5c985a`](https://github.com/BeOnAuto/auto-engineer/commit/d5c985a1a4bcd256f6456ecb69d9523ae66c2352) Thanks [@github-actions[bot]](https://github.com/github-actions%5Bbot%5D)! - - **server-generator-apollo-emmett**: remove stale QuestionnaireProgressStatus enum
+  - **server-generator-apollo-emmett**: regenerate shared/types.ts from scratch to prevent stale enums
+  - **global**: version packages
+  - **server-generator-apollo-emmett**: move burst 1 to DONE in ketchup plan
+  - **server-generator-apollo-emmett**: add ketchup plan for stale enums fix
+- Updated dependencies [[`d5c985a`](https://github.com/BeOnAuto/auto-engineer/commit/d5c985a1a4bcd256f6456ecb69d9523ae66c2352), [`bd14e09`](https://github.com/BeOnAuto/auto-engineer/commit/bd14e09fa399e218348a4d0f334bc3423106f64a), [`f3a6b66`](https://github.com/BeOnAuto/auto-engineer/commit/f3a6b662a35ae480d58a42d5207cb51d1e9106de), [`e4ed42d`](https://github.com/BeOnAuto/auto-engineer/commit/e4ed42dac98562148efc5ae293841c36efa6c5c7)]:
+  - @auto-engineer/file-upload@1.65.0
+  - @auto-engineer/message-bus@1.65.0
+
+## 1.64.0
+
+### Minor Changes
+
+- [`e34d090`](https://github.com/BeOnAuto/auto-engineer/commit/e34d090e4b0395ec87ff241dfc483530869108e9) Thanks [@github-actions[bot]](https://github.com/github-actions%5Bbot%5D)! - - **examples/typical**: updates auto config
+  - **packages/react-component-implementer**: fixes storybook not found
+  - **global**: version packages
+
+### Patch Changes
+
+- [`d03809f`](https://github.com/BeOnAuto/auto-engineer/commit/d03809fc59b903ad18a3c6536661bd5e14205e54) Thanks [@rami-hatoum](https://github.com/rami-hatoum)! - - **server-generator-apollo-emmett**: add ketchup plan for stale enums fix
+
+- [`37077d3`](https://github.com/BeOnAuto/auto-engineer/commit/37077d33d6bc319afc6b4a583d2dc4bdcd1e3998) Thanks [@rami-hatoum](https://github.com/rami-hatoum)! - - Removed .env file from the typical example project to prevent environment secrets from being tracked in version control
+
+- [`ab31e10`](https://github.com/BeOnAuto/auto-engineer/commit/ab31e10bdc9389b7e123d7425e3a3105894710b2) Thanks [@rami-hatoum](https://github.com/rami-hatoum)! - - **server-generator-apollo-emmett**: move burst 1 to DONE in ketchup plan
+
+- [`0b27996`](https://github.com/BeOnAuto/auto-engineer/commit/0b27996df56fad5b38e78828de875c2091e5fd6d) Thanks [@rami-hatoum](https://github.com/rami-hatoum)! - - Removed stale QuestionnaireProgressStatus enum that was no longer in use, preventing potential type conflicts in the Apollo Emmett server generator
+
+- [`4bc755b`](https://github.com/BeOnAuto/auto-engineer/commit/4bc755b4187b30906c7272aa7c49af00dfae6c4a) Thanks [@rami-hatoum](https://github.com/rami-hatoum)! - - **server-generator-apollo-emmett**: regenerate shared/types.ts from scratch to prevent stale enums
+
+- Updated dependencies [[`d03809f`](https://github.com/BeOnAuto/auto-engineer/commit/d03809fc59b903ad18a3c6536661bd5e14205e54), [`37077d3`](https://github.com/BeOnAuto/auto-engineer/commit/37077d33d6bc319afc6b4a583d2dc4bdcd1e3998), [`e34d090`](https://github.com/BeOnAuto/auto-engineer/commit/e34d090e4b0395ec87ff241dfc483530869108e9), [`ab31e10`](https://github.com/BeOnAuto/auto-engineer/commit/ab31e10bdc9389b7e123d7425e3a3105894710b2), [`0b27996`](https://github.com/BeOnAuto/auto-engineer/commit/0b27996df56fad5b38e78828de875c2091e5fd6d), [`4bc755b`](https://github.com/BeOnAuto/auto-engineer/commit/4bc755b4187b30906c7272aa7c49af00dfae6c4a)]:
+  - @auto-engineer/file-upload@1.64.0
+  - @auto-engineer/message-bus@1.64.0
+
 ## 1.63.0
 
 ### Minor Changes

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

@@ -1,24 +1,19 @@
-import { readFileSync } from "node:fs";
-import { dirname, join } from "node:path";
-import { fileURLToPath } from "node:url";
-import type { StorybookConfig } from "@storybook/react-vite";
+import { readFileSync } from 'node:fs';
+import { dirname, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import type { StorybookConfig } from '@storybook/react-vite';
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
-const managerHeadContent = readFileSync(
-	join(__dirname, "manager-head.html"),
-	"utf-8",
-);
+const managerHeadContent = readFileSync(join(__dirname, 'manager-head.html'), 'utf-8');
 
-const isFastMode = process.env.STORYBOOK_FAST === "1";
+const isFastMode = process.env.STORYBOOK_FAST === '1';
 
 const config: StorybookConfig = {
-	stories: isFastMode
-		? ["../src/**/*.stories.@(ts|tsx)"]
-		: ["../src/**/*.mdx", "../src/**/*.stories.@(ts|tsx)"],
+	stories: isFastMode ? ['../src/**/*.stories.@(ts|tsx)'] : ['../src/**/*.mdx', '../src/**/*.stories.@(ts|tsx)'],
 	addons: [
-		...(isFastMode ? [] : [getAbsolutePath("@storybook/addon-docs")]),
+		...(isFastMode ? [] : [getAbsolutePath('@storybook/addon-docs')]),
 		{
-			name: getAbsolutePath("@storybook/addon-mcp"),
+			name: getAbsolutePath('@storybook/addon-mcp'),
 			options: {
 				toolsets: {
 					dev: true,
@@ -26,9 +21,9 @@ const config: StorybookConfig = {
 				},
 			},
 		},
-		getAbsolutePath("@vueless/storybook-dark-mode"),
+		getAbsolutePath('@vueless/storybook-dark-mode'),
 	],
-	staticDirs: ["../public"],
+	staticDirs: ['../public'],
 	features: {
 		experimentalComponentsManifest: true,
 	},
@@ -36,19 +31,19 @@ const config: StorybookConfig = {
 		disableWhatsNewNotifications: true,
 	},
 	framework: {
-		name: getAbsolutePath("@storybook/react-vite"),
+		name: getAbsolutePath('@storybook/react-vite'),
 		options: {},
 	},
 	typescript: {
-		reactDocgen: isFastMode ? false : "react-docgen-typescript",
+		reactDocgen: isFastMode ? false : 'react-docgen-typescript',
 		reactDocgenTypescriptOptions: {
-			tsconfigPath: join(__dirname, "../tsconfig.app.json"),
+			tsconfigPath: join(__dirname, '../tsconfig.app.json'),
 		},
 	},
 	viteFinal: (config) => {
 		config.server = {
 			...config.server,
-			host: "0.0.0.0",
+			host: '0.0.0.0',
 			allowedHosts: true,
 			watch: {
 				// Wait for files to stop being written before triggering HMR
@@ -61,7 +56,7 @@ const config: StorybookConfig = {
 		};
 		config.define = {
 			...config.define,
-			"import.meta.env.STORYBOOK_FAST": JSON.stringify(isFastMode),
+			'import.meta.env.STORYBOOK_FAST': JSON.stringify(isFastMode),
 		};
 		return config;
 	},
@@ -70,6 +65,6 @@ const config: StorybookConfig = {
 
 export default config;
 
-function getAbsolutePath(value: string): any {
+function getAbsolutePath(value: string): string {
 	return dirname(fileURLToPath(import.meta.resolve(`${value}/package.json`)));
 }

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

@@ -1,5 +1,5 @@
 <script>
-  (function() {
+  (() => {
     // Check localStorage for dark mode state before anything renders
     var isDark = false;
     try {
@@ -8,7 +8,7 @@
         var parsed = JSON.parse(stored);
         isDark = parsed && parsed.current === 'dark';
       }
-    } catch(e) {}
+    } catch(_e) {}
 
     // Also check URL parameter
     var urlParams = new URLSearchParams(window.location.search);
@@ -27,7 +27,7 @@
 </script>
 <style>
   html, body {
-    transition: none !important;
+    transition: none;
   }
 
   /* Fix preview area white flash - target all loading/skeleton states */
@@ -43,8 +43,8 @@
   .sb-previewBlock *,
   /* Emotion CSS classes in preview area (exclude loader) */
   [class^="css-"]:not([class*="loader"]) {
-    background-color: #f0f3f9 !important;
-    color-scheme: light !important;
+    background-color: #f0f3f9;
+    color-scheme: light;
   }
 
   /* Make spinner transparent in light mode too */
@@ -52,9 +52,9 @@
   .sb-loader *,
   [class*="loader"],
   [class*="loader"] * {
-    fill: transparent !important;
-    background: transparent !important;
-    background-color: transparent !important;
+    fill: transparent;
+    background: transparent;
+    background-color: transparent;
   }
 
   html[data-theme="dark"] main[role="main"],
@@ -69,8 +69,8 @@
   html[data-theme="dark"] .sb-previewBlock *,
   /* Emotion CSS classes in preview area - dark mode (exclude loader) */
   html[data-theme="dark"] [class^="css-"]:not(.sb-loader):not([class*="loader"]) {
-    background-color: #1a1f2e !important;
-    color-scheme: dark !important;
+    background-color: #1a1f2e;
+    color-scheme: dark;
   }
 
   /* Fix spinner - make completely transparent */
@@ -78,14 +78,14 @@
   html[data-theme="dark"] .sb-loader *,
   html[data-theme="dark"] [class*="loader"],
   html[data-theme="dark"] [class*="loader"] * {
-    fill: transparent !important;
-    background: transparent !important;
-    background-color: transparent !important;
+    fill: transparent;
+    background: transparent;
+    background-color: transparent;
   }
 
   /* Set dark background on all iframes in dark mode to reduce flash from external content */
   html[data-theme="dark"] iframe {
-    background-color: #1a1f2e !important;
+    background-color: #1a1f2e;
   }
 
   /* Force sidebar and nav backgrounds - target the actual container divs */
@@ -94,7 +94,7 @@
   [class*="Sidebar"],
   nav[class],
   aside[class] {
-    background-color: #f0f3f9 !important;
+    background-color: #f0f3f9;
   }
 
   html[data-theme="dark"] #storybook-explorer-tree,
@@ -102,7 +102,7 @@
   html[data-theme="dark"] [class*="Sidebar"],
   html[data-theme="dark"] nav[class],
   html[data-theme="dark"] aside[class] {
-    background-color: #1a1f2e !important;
+    background-color: #1a1f2e;
   }
 
   /* Force toolbar/header backgrounds */
@@ -111,7 +111,7 @@
   [class*="bar"],
   [class*="Bar"],
   header[class] {
-    background-color: #f0f3f9 !important;
+    background-color: #f0f3f9;
   }
 
   html[data-theme="dark"] [class*="toolbar"],
@@ -119,18 +119,18 @@
   html[data-theme="dark"] [class*="bar"],
   html[data-theme="dark"] [class*="Bar"],
   html[data-theme="dark"] header[class] {
-    background-color: #1a1f2e !important;
+    background-color: #1a1f2e;
   }
 
   /* Force ALL sidebar text to dark gray instead of blue */
   [data-nodetype],
   [data-nodetype] * {
-    color: #2d3748 !important;
+    color: #2d3748;
   }
 
   html[data-theme="dark"] [data-nodetype],
   html[data-theme="dark"] [data-nodetype] * {
-    color: #e2e8f0 !important;
+    color: #e2e8f0;
   }
 
   /* Sidebar selection styles - subtle background */
@@ -138,15 +138,15 @@
   [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;
+    background-color: #e2e8f0;
+    border-radius: 0.5rem;
   }
 
   [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;
+    color: #1a202c;
   }
 
   /* Dark mode selected item */
@@ -154,14 +154,14 @@
   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;
+    background-color: #3d4663;
   }
 
   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;
+    color: #f7fafc;
   }
 
   /* Hover state */
@@ -169,28 +169,28 @@
   [data-nodetype="document"]:hover,
   [data-nodetype="component"]:hover,
   [data-nodetype="group"]:hover {
-    background-color: #edf2f7 !important;
-    border-radius: 0.5rem !important;
+    background-color: #edf2f7;
+    border-radius: 0.5rem;
   }
 
   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;
+    background-color: #2d3748;
   }
 
   /* Selected hover - keep selected state */
   [data-nodetype][data-selected="true"]:hover {
-    background-color: #e2e8f0 !important;
+    background-color: #e2e8f0;
   }
 
   html[data-theme="dark"] [data-nodetype][data-selected="true"]:hover {
-    background-color: #3d4663 !important;
+    background-color: #3d4663;
   }
 </style>
 <script>
-(function() {
+(() => {
   if (window.parent === window) return;
   function notify() {
     window.parent.postMessage({ type: 'iframe-url-change', url: location.href }, '*');

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

@@ -1,20 +1,20 @@
+import { UPDATE_DARK_MODE_EVENT_NAME } from '@vueless/storybook-dark-mode';
+import { STORY_CHANGED } from 'storybook/internal/core-events';
 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;
+	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();
 
@@ -22,143 +22,143 @@ const initialIsDark = urlTheme ? urlTheme === 'dark' : getStoredDarkMode();
 // 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',
+	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',
+	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;
 
 addons.setConfig({
-  theme: customTheme,
-  sidebar: {
-    collapsedRoots: ['ui-components'],
-  },
-  showPanel: false,
+	theme: customTheme,
+	sidebar: {
+		collapsedRoots: ['ui-components'],
+	},
+	showPanel: false,
 });
 
 // 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());
+	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';
-    }
-  });
+	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';
+		}
+	});
 });