@tpitre/story-ui 4.12.1 → 4.13.0

package/dist/cli/generateRegistry.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Component Registry Generator
+ *
+ * Generates a `componentRegistry.ts` file that maps component names to
+ * actual React/Vue/etc imports for use by the Voice Canvas ComponentRenderer.
+ *
+ * Design-system agnostic — uses existing component discovery to find
+ * components from npm packages, local directories, and custom elements.
+ *
+ * Called during `npx story-ui init` and can be re-run with `npx story-ui registry`.
+ */
+export interface RegistryGeneratorOptions {
+    /** Working directory (defaults to cwd) */
+    cwd?: string;
+    /** Output path relative to cwd (defaults to src/stories/StoryUI/voice/canvas/) */
+    outputDir?: string;
+}
+/**
+ * Generate the component registry file using project's discovered components.
+ * Returns the path to the generated file.
+ */
+export declare function generateComponentRegistry(options?: RegistryGeneratorOptions): Promise<string>;
+//# sourceMappingURL=generateRegistry.d.ts.map

package/dist/cli/generateRegistry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"generateRegistry.d.ts","sourceRoot":"","sources":["../../cli/generateRegistry.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAOH,MAAM,WAAW,wBAAwB;IACvC,0CAA0C;IAC1C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,kFAAkF;IAClF,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;GAGG;AACH,wBAAsB,yBAAyB,CAAC,OAAO,GAAE,wBAA6B,GAAG,OAAO,CAAC,MAAM,CAAC,CAgDvG"}

package/dist/cli/generateRegistry.js

@@ -0,0 +1,155 @@
+/**
+ * Component Registry Generator
+ *
+ * Generates a `componentRegistry.ts` file that maps component names to
+ * actual React/Vue/etc imports for use by the Voice Canvas ComponentRenderer.
+ *
+ * Design-system agnostic — uses existing component discovery to find
+ * components from npm packages, local directories, and custom elements.
+ *
+ * Called during `npx story-ui init` and can be re-run with `npx story-ui registry`.
+ */
+import path from 'path';
+import fs from 'fs';
+import { loadUserConfig } from '../story-generator/configLoader.js';
+import { EnhancedComponentDiscovery } from '../story-generator/enhancedComponentDiscovery.js';
+/**
+ * Generate the component registry file using project's discovered components.
+ * Returns the path to the generated file.
+ */
+export async function generateComponentRegistry(options = {}) {
+    const cwd = options.cwd || process.cwd();
+    // loadUserConfig reads from cwd — ensure we're in the right directory
+    const originalCwd = process.cwd();
+    if (cwd !== originalCwd)
+        process.chdir(cwd);
+    const config = loadUserConfig();
+    if (cwd !== originalCwd)
+        process.chdir(originalCwd);
+    // Discover components using the existing discovery system
+    const discovery = new EnhancedComponentDiscovery(config);
+    const components = await discovery.discoverAll();
+    const componentNames = components.map(c => c.name).sort();
+    if (componentNames.length === 0) {
+        console.warn('⚠️  No components discovered — registry will be empty');
+    }
+    const importPath = config.importPath || '@mantine/core';
+    const framework = config.componentFramework || 'react';
+    const importStyle = config.importStyle || 'barrel';
+    // Determine output directory
+    const outputDir = options.outputDir
+        ? path.resolve(cwd, options.outputDir)
+        : path.resolve(cwd, 'src/stories/StoryUI/voice/canvas');
+    if (!fs.existsSync(outputDir)) {
+        fs.mkdirSync(outputDir, { recursive: true });
+    }
+    const outputPath = path.join(outputDir, 'componentRegistry.ts');
+    // Generate the file content
+    let code;
+    if (framework === 'react') {
+        code = generateReactRegistry(componentNames, importPath, importStyle);
+    }
+    else if (framework === 'vue') {
+        code = generateVueRegistry(componentNames, importPath, importStyle);
+    }
+    else {
+        // Fallback: generic registry with dynamic imports note
+        code = generateGenericRegistry(componentNames, importPath, framework);
+    }
+    fs.writeFileSync(outputPath, code, 'utf-8');
+    console.log(`✅ Component registry generated: ${path.relative(cwd, outputPath)} (${componentNames.length} components)`);
+    return outputPath;
+}
+// ── React registry generator ────────────────────────────────
+function generateReactRegistry(names, importPath, importStyle) {
+    // Separate parent components from sub-components (e.g., "Card.Section")
+    const topLevel = names.filter(n => !n.includes('.'));
+    const subComponents = names.filter(n => n.includes('.'));
+    // For barrel imports, import all top-level from one path
+    // For individual imports, import each from its own path
+    let imports;
+    if (importStyle === 'individual') {
+        imports = topLevel.map(name => `import { ${name} } from '${importPath}/${name}';`).join('\n');
+    }
+    else {
+        // Barrel import — single line
+        imports = `import {\n${topLevel.map(n => `  ${n},`).join('\n')}\n} from '${importPath}';`;
+    }
+    // Build registry entries
+    const entries = topLevel.map(name => `  '${name}': ${name},`);
+    // Sub-components map automatically via dot-notation in ComponentRenderer
+    // e.g., "Card.Section" resolves to Card.Section at runtime
+    // But we still add them for explicit lookup
+    for (const sub of subComponents) {
+        const [parent, child] = sub.split('.');
+        entries.push(`  '${sub}': (${parent} as any).${child},`);
+    }
+    return `/**
+ * Auto-generated component registry for Voice Canvas
+ * Source: ${importPath}
+ * Components: ${names.length}
+ *
+ * DO NOT EDIT — regenerate with: npx story-ui registry
+ */
+
+${imports}
+import type { ComponentRegistry } from './ComponentRenderer';
+
+export const registry: ComponentRegistry = {
+${entries.join('\n')}
+};
+
+export default registry;
+`;
+}
+// ── Vue registry generator ──────────────────────────────────
+function generateVueRegistry(names, importPath, importStyle) {
+    const topLevel = names.filter(n => !n.includes('.'));
+    let imports;
+    if (importStyle === 'individual') {
+        imports = topLevel.map(name => `import { ${name} } from '${importPath}/${name}';`).join('\n');
+    }
+    else {
+        imports = `import {\n${topLevel.map(n => `  ${n},`).join('\n')}\n} from '${importPath}';`;
+    }
+    const entries = topLevel.map(name => `  '${name}': ${name},`);
+    return `/**
+ * Auto-generated component registry for Voice Canvas (Vue)
+ * Source: ${importPath}
+ * Components: ${names.length}
+ *
+ * DO NOT EDIT — regenerate with: npx story-ui registry
+ */
+
+${imports}
+
+export const registry: Record<string, any> = {
+${entries.join('\n')}
+};
+
+export default registry;
+`;
+}
+// ── Generic fallback ────────────────────────────────────────
+function generateGenericRegistry(names, importPath, framework) {
+    return `/**
+ * Auto-generated component registry for Voice Canvas (${framework})
+ * Source: ${importPath}
+ * Components: ${names.length}
+ *
+ * NOTE: This is a placeholder registry for ${framework}.
+ * You may need to customize imports for your framework.
+ *
+ * DO NOT EDIT — regenerate with: npx story-ui registry
+ */
+
+// TODO: Add imports for ${framework} components from '${importPath}'
+// ${names.map(n => `// import { ${n} } from '${importPath}';`).join('\n')}
+
+export const registry: Record<string, any> = {
+${names.map(n => `  // '${n}': ${n},`).join('\n')}
+};
+
+export default registry;
+`;
+}

package/dist/cli/index.js

@@ -10,9 +10,24 @@ import { updateCommand, statusCommand } from './update.js';
 import net from 'net';
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
-// Read version from package.json
-const packageJsonPath = path.resolve(__dirname, '..', 'package.json');
-const packageVersion = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8')).version;
+// Read version from package.json (try both src/cli and dist/cli paths)
+const packageJsonPaths = [
+    path.resolve(__dirname, '..', 'package.json'), // From src/cli
+    path.resolve(__dirname, '..', '..', 'package.json'), // From dist/cli
+];
+let packageVersion = 'unknown';
+for (const p of packageJsonPaths) {
+    if (fs.existsSync(p)) {
+        try {
+            const pkg = JSON.parse(fs.readFileSync(p, 'utf-8'));
+            if (pkg.version) {
+                packageVersion = pkg.version;
+                break;
+            }
+        }
+        catch { /* skip */ }
+    }
+}
 const program = new Command();
 program
     .name('story-ui')

package/dist/cli/setup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"setup.d.ts","sourceRoot":"","sources":["../../cli/setup.ts"],"names":[],"mappings":"AAmDA;;GAEG;AACH,wBAAgB,iCAAiC,SA8ChD;AAiWD,MAAM,WAAW,YAAY;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAC7C,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,wBAAsB,YAAY,CAAC,OAAO,GAAE,YAAiB,iBA85B5D"}
+{"version":3,"file":"setup.d.ts","sourceRoot":"","sources":["../../cli/setup.ts"],"names":[],"mappings":"AAmDA;;GAEG;AACH,wBAAgB,iCAAiC,SA8ChD;AAoXD,MAAM,WAAW,YAAY;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAC7C,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,wBAAsB,YAAY,CAAC,OAAO,GAAE,YAAiB,iBA6/B5D"}

package/dist/cli/setup.js

@@ -128,10 +128,19 @@ function setupStorybookPreview(designSystem) {
     const designSystemConfigs = {
         chakra: {
             imports: [
+                "import React from 'react'",
                 "import type { Preview } from '@storybook/react-vite'",
-                "import { ChakraProvider, defaultSystem } from '@chakra-ui/react'",
-                "import React from 'react'"
+                "import * as ChakraUI from '@chakra-ui/react'",
             ],
+            globals: `
+const { ChakraProvider, defaultSystem } = ChakraUI;
+
+// Expose all Chakra components for Voice Canvas live preview.
+// Voice Canvas uses these globals to render components without import statements.
+(window as any).__STORY_UI_DESIGN_SYSTEM__ = ChakraUI;
+(window as any).__STORY_UI_CANVAS_PROVIDER__ = ({ children }: { children: React.ReactNode }) => (
+  <ChakraProvider value={defaultSystem}>{children}</ChakraProvider>
+);`,
             decorator: `(Story) => (
       <ChakraProvider value={defaultSystem}>
         <Story />
@@ -140,11 +149,20 @@ function setupStorybookPreview(designSystem) {
         },
         mantine: {
             imports: [
+                "import React from 'react'",
                 "import type { Preview } from '@storybook/react-vite'",
-                "import { MantineProvider } from '@mantine/core'",
+                "import * as MantineCore from '@mantine/core'",
                 "import '@mantine/core/styles.css'",
-                "import React from 'react'"
             ],
+            globals: `
+const { MantineProvider } = MantineCore;
+
+// Expose all Mantine components for Voice Canvas live preview.
+// Voice Canvas uses these globals to render components without import statements.
+(window as any).__STORY_UI_DESIGN_SYSTEM__ = MantineCore;
+(window as any).__STORY_UI_CANVAS_PROVIDER__ = ({ children }: { children: React.ReactNode }) => (
+  <MantineProvider>{children}</MantineProvider>
+);`,
             decorator: `(Story) => (
       <MantineProvider>
         <Story />
@@ -157,6 +175,7 @@ function setupStorybookPreview(designSystem) {
         return;
     // Create the preview content
     const previewContent = `${config.imports.join('\n')}
+${config.globals || ''}
 
 const preview: Preview = {
   parameters: {
@@ -917,6 +936,8 @@ Material UI (MUI) is a React component library implementing Material Design.
     // Copy component files
     const templatesDir = path.resolve(__dirname, '../../templates/StoryUI');
     const componentFiles = ['StoryUIPanel.tsx', 'StoryUIPanel.mdx', 'StoryUIPanel.css'];
+    // Voice Canvas files (subdirectory)
+    const voiceFiles = ['VoiceCanvas.tsx', 'VoiceControls.tsx', 'useVoiceInput.ts', 'voiceCommands.ts', 'types.ts'];
     console.log(chalk.blue('\n📦 Installing Story UI component...'));
     for (const file of componentFiles) {
         const sourcePath = path.join(templatesDir, file);
@@ -934,6 +955,96 @@ Material UI (MUI) is a React component library implementing Material Design.
             console.warn(chalk.yellow(`⚠️  Template file not found: ${file}`));
         }
     }
+    // Copy Voice Canvas files
+    const voiceSourceDir = path.join(templatesDir, 'voice');
+    const voiceTargetDir = path.join(storyUITargetDir, 'voice');
+    if (fs.existsSync(voiceSourceDir)) {
+        if (!fs.existsSync(voiceTargetDir)) {
+            fs.mkdirSync(voiceTargetDir, { recursive: true });
+        }
+        for (const file of voiceFiles) {
+            const sourcePath = path.join(voiceSourceDir, file);
+            const targetPath = path.join(voiceTargetDir, file);
+            if (fs.existsSync(sourcePath)) {
+                fs.copyFileSync(sourcePath, targetPath);
+                console.log(chalk.green(`✅ Copied voice/${file}`));
+            }
+        }
+    }
+    // Generate component registry for Voice Canvas with static design system import
+    // Vite requires static imports — bare specifiers can't be resolved at runtime
+    const canvasTargetDir = path.join(voiceTargetDir, 'canvas');
+    if (!fs.existsSync(canvasTargetDir)) {
+        fs.mkdirSync(canvasTargetDir, { recursive: true });
+    }
+    // Copy canvas template files (types.ts, operations.ts, ComponentRenderer.tsx)
+    const canvasSourceDir = path.join(voiceSourceDir, 'canvas');
+    if (fs.existsSync(canvasSourceDir)) {
+        for (const file of fs.readdirSync(canvasSourceDir)) {
+            if (file === 'componentRegistry.ts')
+                continue; // generated below
+            const src = path.join(canvasSourceDir, file);
+            const dst = path.join(canvasTargetDir, file);
+            if (fs.statSync(src).isFile()) {
+                fs.copyFileSync(src, dst);
+                console.log(chalk.green(`✅ Copied voice/canvas/${file}`));
+            }
+        }
+    }
+    // Generate the registry with a lazy async import of the design system.
+    // Uses a literal string in import() so Vite resolves it at build time,
+    // but execution is deferred until loadRegistry() is called — avoiding
+    // module-level side effects that can crash the docs page.
+    if (config.importPath && config.importStyle !== 'individual') {
+        const registryContent = `/**
+ * Component registry for Voice Canvas — lazy-loaded from design system.
+ *
+ * Uses dynamic import('${config.importPath}') with a literal string so Vite
+ * resolves it at build time, but the import only executes when loadRegistry()
+ * is called (not at module evaluation time). This prevents crashes from
+ * module-level side effects.
+ *
+ * Generated by story-ui init. Regenerate with: npx story-ui registry
+ */
+
+export const registry: Record<string, any> = {};
+
+let _loaded = false;
+
+export async function loadRegistry(): Promise<Record<string, any>> {
+  if (_loaded) return registry;
+
+  try {
+    const mod = await import('${config.importPath}');
+
+    for (const [key, value] of Object.entries(mod)) {
+      if (/^[A-Z]/.test(key) && (typeof value === 'function' || typeof value === 'object')) {
+        registry[key] = value;
+      }
+    }
+
+    _loaded = true;
+    console.log(\\\`[componentRegistry] Loaded \\\${Object.keys(registry).length} components from ${config.importPath}\\\`);
+  } catch (err) {
+    console.error('[componentRegistry] Failed to load design system:', err);
+  }
+
+  return registry;
+}
+
+export default registry;
+`;
+        fs.writeFileSync(path.join(canvasTargetDir, 'componentRegistry.ts'), registryContent);
+        console.log(chalk.green(`✅ Generated voice/canvas/componentRegistry.ts with ${config.importPath} imports`));
+    }
+    else {
+        // For individual import style or unknown, copy the placeholder
+        const placeholderSrc = path.join(canvasSourceDir, 'componentRegistry.ts');
+        if (fs.existsSync(placeholderSrc)) {
+            fs.copyFileSync(placeholderSrc, path.join(canvasTargetDir, 'componentRegistry.ts'));
+        }
+        console.log(chalk.yellow(`⚠️  Voice Canvas registry is empty — populate voice/canvas/componentRegistry.ts manually`));
+    }
     // Configure Storybook bundler for StoryUIPanel requirements
     console.log(chalk.blue('\n🔧 Configuring Storybook for Story UI...'));
     const mainConfigPath = path.join(process.cwd(), '.storybook', 'main.ts');

package/dist/cli/update.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"update.d.ts","sourceRoot":"","sources":["../../cli/update.ts"],"names":[],"mappings":"AASA;;;;;GAKG;AAEH,MAAM,WAAW,aAAa;IAC5B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,OAAO,CAAC;IACjB,YAAY,EAAE,MAAM,EAAE,CAAC;IACvB,aAAa,EAAE,MAAM,EAAE,CAAC;IACxB,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,cAAc,EAAE,MAAM,CAAC;IACvB,UAAU,EAAE,MAAM,CAAC;CACpB;AAgTD;;GAEG;AACH,wBAAsB,aAAa,CAAC,OAAO,GAAE,aAAkB,GAAG,OAAO,CAAC,YAAY,CAAC,CAkItF;AAED;;GAEG;AACH,wBAAgB,aAAa,IAAI,IAAI,CA+BpC"}
+{"version":3,"file":"update.d.ts","sourceRoot":"","sources":["../../cli/update.ts"],"names":[],"mappings":"AASA;;;;;GAKG;AAEH,MAAM,WAAW,aAAa;IAC5B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,OAAO,CAAC;IACjB,YAAY,EAAE,MAAM,EAAE,CAAC;IACvB,aAAa,EAAE,MAAM,EAAE,CAAC;IACxB,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,cAAc,EAAE,MAAM,CAAC;IACvB,UAAU,EAAE,MAAM,CAAC;CACpB;AA0UD;;GAEG;AACH,wBAAsB,aAAa,CAAC,OAAO,GAAE,aAAkB,GAAG,OAAO,CAAC,YAAY,CAAC,CAkItF;AAED;;GAEG;AACH,wBAAgB,aAAa,IAAI,IAAI,CA+BpC"}

package/dist/cli/update.js

@@ -26,6 +26,32 @@ const MANAGED_FILES = [
         source: 'templates/StoryUI/index.tsx',
         target: 'src/stories/StoryUI/index.tsx',
         description: 'Panel registration'
+    },
+    // Voice Canvas files
+    {
+        source: 'templates/StoryUI/voice/VoiceCanvas.tsx',
+        target: 'src/stories/StoryUI/voice/VoiceCanvas.tsx',
+        description: 'Voice Canvas component'
+    },
+    {
+        source: 'templates/StoryUI/voice/VoiceControls.tsx',
+        target: 'src/stories/StoryUI/voice/VoiceControls.tsx',
+        description: 'Voice control UI components'
+    },
+    {
+        source: 'templates/StoryUI/voice/useVoiceInput.ts',
+        target: 'src/stories/StoryUI/voice/useVoiceInput.ts',
+        description: 'Voice input hook'
+    },
+    {
+        source: 'templates/StoryUI/voice/voiceCommands.ts',
+        target: 'src/stories/StoryUI/voice/voiceCommands.ts',
+        description: 'Voice command definitions'
+    },
+    {
+        source: 'templates/StoryUI/voice/types.ts',
+        target: 'src/stories/StoryUI/voice/types.ts',
+        description: 'Voice module type definitions'
     }
 ];
 // Files that should NEVER be modified by update

package/dist/mcp-server/index.js

@@ -22,14 +22,23 @@ import { UrlRedirectService } from '../story-generator/urlRedirectService.js';
 import { getProviders, getModels, configureProviderRoute, validateApiKey, setDefaultProvider, setModel, getUISettings, applyUISettings, getSettingsConfig } from './routes/providers.js';
 import { listFrameworks, detectCurrentFramework, getFrameworkDetails, validateStoryForFramework, postProcessStoryForFramework, } from './routes/frameworks.js';
 import mcpRemoteRouter from './routes/mcpRemote.js';
+// Voice Canvas endpoints
+import { canvasIntentHandler, warmCanvasComponentCache } from './routes/canvasIntent.js';
+import { canvasSaveHandler } from './routes/canvasSave.js';
+import { canvasGenerateHandler, ensureVoiceCanvasStory } from './routes/canvasGenerate.js';
+import { canvasPreviewHandler } from './routes/canvasPreview.js';
 import { getAdapterRegistry } from '../story-generator/framework-adapters/index.js';
+// Manifest — story ↔ chat source of truth
+import { manifestGetHandler, manifestPatchHandler, manifestDeleteHandler, manifestReconcileHandler, manifestPollHandler, } from './routes/manifest.js';
+import { getManifestManager } from '../story-generator/manifestManager.js';
 // Supported story file extensions for all frameworks
 const STORY_EXTENSIONS = ['.stories.tsx', '.stories.ts', '.stories.svelte', '.stories.js'];
 /**
  * Check if a file is a story file (supports all framework extensions)
  */
 function isStoryFile(filename) {
-    return STORY_EXTENSIONS.some(ext => filename.endsWith(ext));
+    return STORY_EXTENSIONS.some(ext => filename.endsWith(ext))
+        && !filename.startsWith('voice-canvas'); // scratchpad — excluded from story lists
 }
 /**
  * Remove story extension from filename to get base name
@@ -99,6 +108,27 @@ app.get('/mcp/props', getProps);
 app.post('/mcp/claude', claudeProxy);
 app.post('/mcp/generate-story', generateStoryFromPrompt);
 app.post('/mcp/generate-story-stream', generateStoryFromPromptStream);
+// Voice Canvas endpoints
+app.post('/mcp/canvas-generate', canvasGenerateHandler); // generate + write voice-canvas.stories.tsx
+app.post('/mcp/canvas-preview', canvasPreviewHandler); // undo/redo: rewrite voice-canvas.stories.tsx
+app.post('/mcp/canvas-save', canvasSaveHandler); // save canvas to named .stories.tsx
+app.post('/mcp/canvas-intent', canvasIntentHandler); // legacy (kept for compatibility)
+// Manifest — story ↔ chat source of truth
+// NOTE: /reconcile must be registered BEFORE /:fileName to avoid route conflict
+app.get('/story-ui/manifest/poll', manifestPollHandler);
+app.post('/story-ui/manifest/reconcile', manifestReconcileHandler);
+app.get('/story-ui/manifest', manifestGetHandler);
+app.patch('/story-ui/manifest/:fileName', manifestPatchHandler);
+app.delete('/story-ui/manifest/:fileName', manifestDeleteHandler);
+// Expose design-system config for auto-registry loading
+app.get('/mcp/canvas-config', (_req, res) => {
+    res.json({
+        importPath: config.importPath || '',
+        importStyle: config.importStyle || 'barrel',
+        componentPrefix: config.componentPrefix || '',
+        componentFramework: config.componentFramework || 'react',
+    });
+});
 // LLM Provider management routes
 app.get('/mcp/providers', getProviders);
 app.get('/mcp/providers/models', getModels);
@@ -292,6 +322,7 @@ app.delete('/mcp/stories/:storyId', async (req, res) => {
 // Proxy routes for frontend compatibility (maps /story-ui/ to /mcp/)
 app.post('/story-ui/generate', generateStoryFromPrompt);
 app.post('/story-ui/generate-stream', generateStoryFromPromptStream);
+// voice-render and convert-to-story aliases removed
 app.post('/story-ui/claude', claudeProxy);
 app.get('/story-ui/components', getComponents);
 app.get('/story-ui/props', getProps);
@@ -428,6 +459,33 @@ app.post('/story-ui/stories', async (req, res) => {
         return res.status(500).json({ error: 'Failed to save story' });
     }
 });
+// Rename story title in file and manifest
+app.patch('/story-ui/stories/:fileName/rename', async (req, res) => {
+    try {
+        const { fileName } = req.params;
+        const { title } = req.body;
+        if (!title || typeof title !== 'string' || !title.trim()) {
+            return res.status(400).json({ error: 'title is required' });
+        }
+        const newTitle = title.trim();
+        const storiesPath = config.generatedStoriesPath;
+        const filePath = safePath(storiesPath, fileName);
+        if (!filePath || !fs.existsSync(filePath)) {
+            return res.status(404).json({ error: 'Story not found' });
+        }
+        // Update the title string inside the file (replaces title: 'Generated/OldTitle')
+        let content = fs.readFileSync(filePath, 'utf-8');
+        content = content.replace(/(title:\s*['"`]Generated\/)[^'"`]*/, `$1${newTitle.replace(/'/g, "\\'")}`);
+        fs.writeFileSync(filePath, content, 'utf-8');
+        // Update manifest entry title
+        getManifestManager().upsert(fileName, { title: newTitle });
+        return res.json({ success: true, title: newTitle });
+    }
+    catch (error) {
+        const message = error instanceof Error ? error.message : String(error);
+        return res.status(500).json({ error: message });
+    }
+});
 // Delete story by ID (RESTful endpoint)
 // Supports both fileName format (Button-a1b2c3d4.stories.tsx) and legacy storyId format (story-a1b2c3d4)
 app.delete('/story-ui/stories/:id', async (req, res) => {
@@ -451,6 +509,7 @@ app.delete('/story-ui/stories/:id', async (req, res) => {
         }
         if (fs.existsSync(filePath)) {
             fs.unlinkSync(filePath);
+            getManifestManager().delete(fileName);
             console.log(`✅ Deleted story: ${filePath}`);
             return res.json({ success: true, message: 'Story deleted successfully' });
         }
@@ -464,6 +523,7 @@ app.delete('/story-ui/stories/:id', async (req, res) => {
             if (matchingFile) {
                 const matchedFilePath = path.join(storiesPath, matchingFile);
                 fs.unlinkSync(matchedFilePath);
+                getManifestManager().delete(matchingFile);
                 console.log(`✅ Deleted story by hash match: ${matchedFilePath}`);
                 return res.json({ success: true, message: 'Story deleted successfully' });
             }
@@ -602,6 +662,7 @@ app.delete('/story-ui/stories', async (req, res) => {
             }
             if (fs.existsSync(filePath)) {
                 fs.unlinkSync(filePath);
+                getManifestManager().delete(fileName);
                 console.log(`✅ Deleted story: ${filePath}`);
                 return res.json({ success: true, message: 'Story deleted successfully' });
             }
@@ -617,6 +678,7 @@ app.delete('/story-ui/stories', async (req, res) => {
                         return res.status(400).json({ success: false, error: 'Invalid file path' });
                     }
                     fs.unlinkSync(filePath);
+                    getManifestManager().delete(matchingFile);
                     console.log(`✅ Deleted story by hash match: ${filePath}`);
                     return res.json({ success: true, message: 'Story deleted successfully' });
                 }
@@ -632,12 +694,14 @@ app.delete('/story-ui/stories', async (req, res) => {
         // Support all story file extensions
         const storyFiles = files.filter(file => isStoryFile(file));
         let deleted = 0;
+        const manifest = getManifestManager();
         for (const file of storyFiles) {
             try {
                 const fp = safePath(storiesPath, file);
                 if (!fp)
                     continue;
                 fs.unlinkSync(fp);
+                manifest.delete(file);
                 deleted++;
             }
             catch (err) {
@@ -819,6 +883,27 @@ if (storybookProxyEnabled) {
 app.listen(PORT, () => {
     console.error(`MCP server running on port ${PORT}`);
     console.error(`Stories will be generated to: ${config.generatedStoriesPath}`);
+    // Pre-warm canvas component cache in background so first voice request is fast
+    warmCanvasComponentCache().catch(() => { });
+    // Ensure voice-canvas scratchpad story file exists before client polling starts.
+    // If it's missing, the first canvas generate creates it, triggering a false-positive
+    // "externally generated story" detection which reloads the page and kills Voice Canvas.
+    try {
+        ensureVoiceCanvasStory(config.generatedStoriesPath || './src/stories/generated/');
+    }
+    catch (err) {
+        console.error('[voice-canvas] Could not pre-create story template:', err);
+    }
+    // Initialize manifest manager (loads file, migrates from StoryTracker, reconciles)
+    setTimeout(() => {
+        try {
+            getManifestManager();
+            console.error('[manifest] Initialized and reconciled');
+        }
+        catch (err) {
+            console.error('[manifest] Init error:', err);
+        }
+    }, 500);
 }).on('error', (err) => {
     if (err.code === 'EADDRINUSE') {
         console.error(`\n❌ Port ${PORT} is already in use!`);

package/dist/mcp-server/routes/canvasGenerate.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Canvas Generate Endpoint
+ *
+ * Generates a JSX component for the Voice Canvas preview.
+ * Uses the same quality pipeline as standard story generation.
+ * Writes a voice-canvas.stories.tsx file so the iframe renders with
+ * the full Storybook decorator chain (Provider, themes, etc.).
+ *
+ * Voice Canvas requires a React-based Storybook framework.
+ * Components come from window.__STORY_UI_DESIGN_SYSTEM__ set in .storybook/preview.tsx.
+ *
+ * POST /mcp/canvas-generate
+ * Body: { prompt, canvasCode?, provider, model, conversationHistory? }
+ * Returns: { canvasCode: string, storyId: string }
+ */
+import { Request, Response } from 'express';
+export declare const VOICE_CANVAS_STORY_ID = "generated-voice-canvas--default";
+export declare function ensureReactLive(): void;
+/**
+ * Write the static voice-canvas story template if it doesn't exist yet.
+ * Subsequent calls are no-ops — the file never changes after initial creation.
+ */
+export declare function ensureVoiceCanvasStory(storiesDir: string): void;
+export declare function canvasGenerateHandler(req: Request, res: Response): Promise<Response<any, Record<string, any>>>;
+//# sourceMappingURL=canvasGenerate.d.ts.map

package/dist/mcp-server/routes/canvasGenerate.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvasGenerate.d.ts","sourceRoot":"","sources":["../../../mcp-server/routes/canvasGenerate.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAW5C,eAAO,MAAM,qBAAqB,oCAAoC,CAAC;AAmIvE,wBAAgB,eAAe,IAAI,IAAI,CAuBtC;AAID;;;GAGG;AACH,wBAAgB,sBAAsB,CAAC,UAAU,EAAE,MAAM,GAAG,IAAI,CAU/D;AAuBD,wBAAsB,qBAAqB,CAAC,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,+CAwEtE"}