@tpitre/story-ui 4.6.1 → 4.6.3

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

@@ -1 +1 @@
-{"version":3,"file":"generateStory.d.ts","sourceRoot":"","sources":["../../../mcp-server/routes/generateStory.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAmd5C,wBAAsB,uBAAuB,CAAC,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,2DA8lBxE"}
+{"version":3,"file":"generateStory.d.ts","sourceRoot":"","sources":["../../../mcp-server/routes/generateStory.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAyd5C,wBAAsB,uBAAuB,CAAC,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,2DA8lBxE"}

package/dist/mcp-server/routes/generateStory.js

@@ -312,29 +312,34 @@ async function preValidateImports(code, config, discovery) {
     }
     // Extract icon imports (keep existing icon validation)
     if (config.iconImports?.package) {
-        const allowedIcons = new Set(config.iconImports?.commonIcons || []);
         const iconImports = extractImportsFromCode(code, config.iconImports.package);
-        for (const iconName of iconImports) {
-            if (isBlacklistedIcon(iconName, allowedIcons)) {
-                const correction = ICON_CORRECTIONS[iconName];
-                if (correction) {
-                    errors.push(`Invalid icon: "${iconName}" does not exist. Did you mean "${correction}"?`);
-                }
-                else {
-                    errors.push(`Invalid icon: "${iconName}" is not in the list of available icons.`);
-                }
-            }
-            else if (!allowedIcons.has(iconName)) {
-                // Try to find a similar icon
-                const similarIcon = findSimilarIcon(iconName, allowedIcons);
-                if (similarIcon) {
-                    errors.push(`Invalid icon: "${iconName}" does not exist. Did you mean "${similarIcon}"?`);
+        // If allowAllIcons is true, skip per-icon validation (trust the icon package)
+        // This is used when we auto-detect a known icon package but don't have a full manifest
+        if (!config.iconImports.allowAllIcons) {
+            const allowedIcons = new Set(config.iconImports?.commonIcons || []);
+            for (const iconName of iconImports) {
+                if (isBlacklistedIcon(iconName, allowedIcons)) {
+                    const correction = ICON_CORRECTIONS[iconName];
+                    if (correction) {
+                        errors.push(`Invalid icon: "${iconName}" does not exist. Did you mean "${correction}"?`);
+                    }
+                    else {
+                        errors.push(`Invalid icon: "${iconName}" is not in the list of available icons.`);
+                    }
                 }
-                else {
-                    errors.push(`Invalid icon: "${iconName}" is not in the list of available icons.`);
+                else if (!allowedIcons.has(iconName)) {
+                    // Try to find a similar icon
+                    const similarIcon = findSimilarIcon(iconName, allowedIcons);
+                    if (similarIcon) {
+                        errors.push(`Invalid icon: "${iconName}" does not exist. Did you mean "${similarIcon}"?`);
+                    }
+                    else {
+                        errors.push(`Invalid icon: "${iconName}" is not in the list of available icons.`);
+                    }
                 }
             }
         }
+        // When allowAllIcons is true, we trust that the LLM will use valid icons from the package
     }
     return {
         isValid: errors.length === 0,

package/dist/mcp-server/routes/generateStoryStream.js

@@ -1160,19 +1160,24 @@ async function preValidateImports(code, config, discovery) {
         }
     }
     if (config.iconImports?.package) {
-        const allowedIcons = new Set(config.iconImports?.commonIcons || []);
         const iconImports = extractImportsFromCode(code, config.iconImports.package);
-        for (const iconName of iconImports) {
-            if (isBlacklistedIcon(iconName, allowedIcons)) {
-                const correction = ICON_CORRECTIONS[iconName];
-                if (correction) {
-                    errors.push(`Invalid icon: "${iconName}" does not exist. Did you mean "${correction}"?`);
-                }
-                else {
-                    errors.push(`Invalid icon: "${iconName}" is not available.`);
+        // If allowAllIcons is true, skip per-icon validation (trust the icon package)
+        // This is used when we auto-detect a known icon package but don't have a full manifest
+        if (!config.iconImports.allowAllIcons) {
+            const allowedIcons = new Set(config.iconImports?.commonIcons || []);
+            for (const iconName of iconImports) {
+                if (isBlacklistedIcon(iconName, allowedIcons)) {
+                    const correction = ICON_CORRECTIONS[iconName];
+                    if (correction) {
+                        errors.push(`Invalid icon: "${iconName}" does not exist. Did you mean "${correction}"?`);
+                    }
+                    else {
+                        errors.push(`Invalid icon: "${iconName}" is not available.`);
+                    }
                 }
             }
         }
+        // When allowAllIcons is true, we trust that the LLM will use valid icons from the package
     }
     return { isValid: errors.length === 0, errors };
 }

package/dist/story-generator/configLoader.d.ts

@@ -1,4 +1,4 @@
-import { StoryUIConfig } from '../story-ui.config.js';
+import { StoryUIConfig, IconImportsConfig } from '../story-ui.config.js';
 /**
  * Loads Story UI configuration from the user's project
  * Looks for story-ui.config.js in the current working directory
@@ -30,4 +30,9 @@ export declare function detectStorybookFramework(dependencies: Record<string, st
  * Auto-detects design system configuration by analyzing the project structure
  */
 export declare function autoDetectDesignSystem(): Partial<StoryUIConfig> | null;
+/**
+ * Detects installed icon package from package.json dependencies
+ * Returns configuration for the first detected icon package
+ */
+export declare function detectInstalledIconPackage(projectPath?: string): IconImportsConfig | null;
 //# sourceMappingURL=configLoader.d.ts.map

package/dist/story-generator/configLoader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"configLoader.d.ts","sourceRoot":"","sources":["../../story-generator/configLoader.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,aAAa,EAAuC,MAAM,uBAAuB,CAAC;AAU3F;;;;GAIG;AACH,wBAAgB,cAAc,IAAI,aAAa,CAmH9C;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,MAAM,EAAE,aAAa,GAAG;IAAE,OAAO,EAAE,OAAO,CAAC;IAAC,MAAM,EAAE,MAAM,EAAE,CAAA;CAAE,CAsD5F;AA0DD;;GAEG;AACH,wBAAgB,sBAAsB,CAAC,WAAW,GAAE,MAAsB,GAAG;IAC3E,UAAU,EAAE,MAAM,EAAE,CAAC;IACrB,aAAa,EAAE,MAAM,EAAE,CAAC;IACxB,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,iBAAiB,EAAE,MAAM,EAAE,CAAC;IAC5B,cAAc,EAAE,MAAM,EAAE,CAAC;CAC1B,CAkGA;AAED;;GAEG;AACH,wBAAgB,wBAAwB,CAAC,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,MAAM,CAWrF;AAED;;GAEG;AACH,wBAAgB,sBAAsB,IAAI,OAAO,CAAC,aAAa,CAAC,GAAG,IAAI,CAqEtE"}
+{"version":3,"file":"configLoader.d.ts","sourceRoot":"","sources":["../../story-generator/configLoader.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,aAAa,EAAuC,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAuF9G;;;;GAIG;AACH,wBAAgB,cAAc,IAAI,aAAa,CA4H9C;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,MAAM,EAAE,aAAa,GAAG;IAAE,OAAO,EAAE,OAAO,CAAC;IAAC,MAAM,EAAE,MAAM,EAAE,CAAA;CAAE,CAsD5F;AA0DD;;GAEG;AACH,wBAAgB,sBAAsB,CAAC,WAAW,GAAE,MAAsB,GAAG;IAC3E,UAAU,EAAE,MAAM,EAAE,CAAC;IACrB,aAAa,EAAE,MAAM,EAAE,CAAC;IACxB,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,iBAAiB,EAAE,MAAM,EAAE,CAAC;IAC5B,cAAc,EAAE,MAAM,EAAE,CAAC;CAC1B,CAkGA;AAED;;GAEG;AACH,wBAAgB,wBAAwB,CAAC,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,MAAM,CAWrF;AAED;;GAEG;AACH,wBAAgB,sBAAsB,IAAI,OAAO,CAAC,aAAa,CAAC,GAAG,IAAI,CAqEtE;AAgPD;;;GAGG;AACH,wBAAgB,0BAA0B,CAAC,WAAW,CAAC,EAAE,MAAM,GAAG,iBAAiB,GAAG,IAAI,CAkCzF"}

package/dist/story-generator/configLoader.js

@@ -2,6 +2,71 @@ import fs from 'fs';
 import path from 'path';
 import { createRequire } from 'module';
 import { DEFAULT_CONFIG, createStoryUIConfig } from '../story-ui.config.js';
+const KNOWN_ICON_PACKAGES = [
+    {
+        name: '@tabler/icons-react',
+        importPath: '@tabler/icons-react',
+        commonIcons: [
+            'IconHome', 'IconSettings', 'IconUser', 'IconSearch', 'IconMenu2',
+            'IconBell', 'IconMail', 'IconCalendar', 'IconClock', 'IconStar',
+            'IconHeart', 'IconPlus', 'IconMinus', 'IconX', 'IconCheck',
+            'IconChevronRight', 'IconChevronLeft', 'IconChevronDown', 'IconChevronUp',
+            'IconArrowRight', 'IconArrowLeft', 'IconArrowUp', 'IconArrowDown',
+            'IconEdit', 'IconTrash', 'IconDownload', 'IconUpload', 'IconShare',
+            'IconFilter', 'IconSort', 'IconRefresh', 'IconEye', 'IconEyeOff',
+            'IconLock', 'IconUnlock', 'IconCopy', 'IconClipboard', 'IconFolder',
+            'IconFile', 'IconImage', 'IconVideo', 'IconMusic', 'IconLink',
+            'IconExternalLink', 'IconDots', 'IconDotsVertical', 'IconGripVertical',
+            'IconTrendingUp', 'IconTrendingDown', 'IconActivity', 'IconPieChart',
+            'IconDatabase', 'IconServer', 'IconCode', 'IconTerminal',
+        ],
+    },
+    {
+        name: 'lucide-react',
+        importPath: 'lucide-react',
+        commonIcons: [
+            'Home', 'Settings', 'User', 'Search', 'Menu',
+            'Bell', 'Mail', 'Calendar', 'Clock', 'Star',
+            'Heart', 'Plus', 'Minus', 'X', 'Check',
+            'ChevronRight', 'ChevronLeft', 'ChevronDown', 'ChevronUp',
+            'ArrowRight', 'ArrowLeft', 'ArrowUp', 'ArrowDown',
+            'Edit', 'Trash', 'Download', 'Upload', 'Share',
+            'Filter', 'RefreshCw', 'Eye', 'EyeOff',
+            'Lock', 'Unlock', 'Copy', 'Clipboard', 'Folder',
+        ],
+    },
+    {
+        name: '@heroicons/react',
+        importPath: '@heroicons/react/24/outline',
+        commonIcons: [
+            'HomeIcon', 'Cog6ToothIcon', 'UserIcon', 'MagnifyingGlassIcon', 'Bars3Icon',
+            'BellIcon', 'EnvelopeIcon', 'CalendarIcon', 'ClockIcon', 'StarIcon',
+            'HeartIcon', 'PlusIcon', 'MinusIcon', 'XMarkIcon', 'CheckIcon',
+            'ChevronRightIcon', 'ChevronLeftIcon', 'ChevronDownIcon', 'ChevronUpIcon',
+            'ArrowRightIcon', 'ArrowLeftIcon', 'ArrowUpIcon', 'ArrowDownIcon',
+        ],
+    },
+    {
+        name: 'react-icons',
+        importPath: 'react-icons/fa',
+        commonIcons: [
+            'FaHome', 'FaCog', 'FaUser', 'FaSearch', 'FaBars',
+            'FaBell', 'FaEnvelope', 'FaCalendar', 'FaClock', 'FaStar',
+            'FaHeart', 'FaPlus', 'FaMinus', 'FaTimes', 'FaCheck',
+            'FaChevronRight', 'FaChevronLeft', 'FaChevronDown', 'FaChevronUp',
+        ],
+    },
+    {
+        name: '@phosphor-icons/react',
+        importPath: '@phosphor-icons/react',
+        commonIcons: [
+            'House', 'Gear', 'User', 'MagnifyingGlass', 'List',
+            'Bell', 'Envelope', 'Calendar', 'Clock', 'Star',
+            'Heart', 'Plus', 'Minus', 'X', 'Check',
+            'CaretRight', 'CaretLeft', 'CaretDown', 'CaretUp',
+        ],
+    },
+];
 // Create require function for ESM compatibility
 const require = createRequire(import.meta.url);
 // Config cache to prevent excessive loading
@@ -87,6 +152,14 @@ export function loadUserConfig() {
                         }
                     }
                 }
+                // Auto-detect icon package if not already configured
+                // This is critical for allowing icon imports in generated stories
+                if (!config.iconImports) {
+                    const detectedIconPackage = detectInstalledIconPackage();
+                    if (detectedIconPackage) {
+                        config.iconImports = detectedIconPackage;
+                    }
+                }
                 // Cache the loaded config
                 cachedConfig = config;
                 configLoadTime = now;
@@ -601,3 +674,39 @@ function detectLayoutPatterns(layoutPatterns, componentPrefix) {
     }
     return rules;
 }
+/**
+ * Detects installed icon package from package.json dependencies
+ * Returns configuration for the first detected icon package
+ */
+export function detectInstalledIconPackage(projectPath) {
+    const cwd = projectPath || process.cwd();
+    const packageJsonPath = path.join(cwd, 'package.json');
+    if (!fs.existsSync(packageJsonPath)) {
+        return null;
+    }
+    try {
+        const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8'));
+        const allDeps = {
+            ...packageJson.dependencies,
+            ...packageJson.devDependencies,
+        };
+        // Check for known icon packages
+        for (const iconPackage of KNOWN_ICON_PACKAGES) {
+            if (allDeps[iconPackage.name]) {
+                console.log(`🎨 Detected icon package: ${iconPackage.name}`);
+                return {
+                    package: iconPackage.name,
+                    importPath: iconPackage.importPath,
+                    commonIcons: iconPackage.commonIcons,
+                    // Allow all icons from this package - don't require explicit validation
+                    // This is crucial: icon libraries have thousands of icons, we can't list them all
+                    allowAllIcons: true,
+                };
+            }
+        }
+    }
+    catch (error) {
+        console.warn('Failed to detect icon package:', error);
+    }
+    return null;
+}

package/dist/story-generator/framework-adapters/base-adapter.d.ts

@@ -69,7 +69,7 @@ export declare abstract class BaseFrameworkAdapter implements FrameworkAdapter {
      */
     protected log(message: string, data?: Record<string, unknown>): void;
     /**
-     * Get common story structure rules
+     * Get common story structure rules including MANDATORY spacing
      */
     protected getCommonRules(): string;
 }

package/dist/story-generator/framework-adapters/base-adapter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"base-adapter.d.ts","sourceRoot":"","sources":["../../../story-generator/framework-adapters/base-adapter.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EACL,aAAa,EACb,cAAc,EACd,gBAAgB,EAChB,sBAAsB,EACvB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAG/D;;GAEG;AACH,8BAAsB,oBAAqB,YAAW,gBAAgB;IACpE,QAAQ,CAAC,QAAQ,CAAC,IAAI,EAAE,aAAa,CAAC;IACtC,QAAQ,CAAC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IAC/B,QAAQ,CAAC,QAAQ,CAAC,wBAAwB,EAAE,cAAc,EAAE,CAAC;IAC7D,QAAQ,CAAC,QAAQ,CAAC,gBAAgB,EAAE,MAAM,CAAC;IAE3C;;OAEG;IACH,QAAQ,CAAC,oBAAoB,CAC3B,MAAM,EAAE,aAAa,EACrB,OAAO,CAAC,EAAE,sBAAsB,GAC/B,MAAM;IAET;;OAEG;IACH,0BAA0B,CACxB,UAAU,EAAE,mBAAmB,EAAE,EACjC,MAAM,EAAE,aAAa,GACpB,MAAM;IAmBT;;OAEG;IACH,SAAS,CAAC,oBAAoB,CAC5B,SAAS,EAAE,mBAAmB,EAC9B,MAAM,EAAE,aAAa,GACpB,MAAM;IAkBT;;OAEG;IACH,SAAS,CAAC,aAAa,CACrB,SAAS,EAAE,mBAAmB,EAC9B,MAAM,EAAE,aAAa,GACpB,MAAM;IAUT;;OAEG;IACH,SAAS,CAAC,wBAAwB,CAChC,UAAU,EAAE,mBAAmB,EAAE,GAChC,MAAM,CAAC,MAAM,EAAE,mBAAmB,EAAE,CAAC;IAcxC;;OAEG;IACH,QAAQ,CAAC,gBAAgB,CAAC,MAAM,EAAE,aAAa,GAAG,MAAM;IAExD;;OAEG;IACH,QAAQ,CAAC,mBAAmB,CAC1B,MAAM,EAAE,aAAa,EACrB,UAAU,EAAE,mBAAmB,EAAE,GAChC,MAAM;IAET;;OAEG;IACH,eAAe,CACb,UAAU,EAAE,mBAAmB,EAAE,EACjC,MAAM,EAAE,aAAa,GACpB,MAAM;IAoBT;;;OAGG;IACH,WAAW,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM;IAmBzC;;OAEG;IACH,QAAQ,CAAC,YAAY,EAAE,MAAM,GAAG;QAAE,KAAK,EAAE,OAAO,CAAC;QAAC,MAAM,EAAE,MAAM,EAAE,CAAA;KAAE;IAkBpE;;OAEG;IACH,QAAQ,CAAC,gBAAgB,CAAC,OAAO,CAAC,EAAE,sBAAsB,GAAG,MAAM;IAEnE;;OAEG;IACH,SAAS,CAAC,GAAG,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAIpE;;OAEG;IACH,SAAS,CAAC,cAAc,IAAI,MAAM;CAoBnC"}
+{"version":3,"file":"base-adapter.d.ts","sourceRoot":"","sources":["../../../story-generator/framework-adapters/base-adapter.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EACL,aAAa,EACb,cAAc,EACd,gBAAgB,EAChB,sBAAsB,EACvB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAG/D;;GAEG;AACH,8BAAsB,oBAAqB,YAAW,gBAAgB;IACpE,QAAQ,CAAC,QAAQ,CAAC,IAAI,EAAE,aAAa,CAAC;IACtC,QAAQ,CAAC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IAC/B,QAAQ,CAAC,QAAQ,CAAC,wBAAwB,EAAE,cAAc,EAAE,CAAC;IAC7D,QAAQ,CAAC,QAAQ,CAAC,gBAAgB,EAAE,MAAM,CAAC;IAE3C;;OAEG;IACH,QAAQ,CAAC,oBAAoB,CAC3B,MAAM,EAAE,aAAa,EACrB,OAAO,CAAC,EAAE,sBAAsB,GAC/B,MAAM;IAET;;OAEG;IACH,0BAA0B,CACxB,UAAU,EAAE,mBAAmB,EAAE,EACjC,MAAM,EAAE,aAAa,GACpB,MAAM;IAmBT;;OAEG;IACH,SAAS,CAAC,oBAAoB,CAC5B,SAAS,EAAE,mBAAmB,EAC9B,MAAM,EAAE,aAAa,GACpB,MAAM;IAkBT;;OAEG;IACH,SAAS,CAAC,aAAa,CACrB,SAAS,EAAE,mBAAmB,EAC9B,MAAM,EAAE,aAAa,GACpB,MAAM;IAUT;;OAEG;IACH,SAAS,CAAC,wBAAwB,CAChC,UAAU,EAAE,mBAAmB,EAAE,GAChC,MAAM,CAAC,MAAM,EAAE,mBAAmB,EAAE,CAAC;IAcxC;;OAEG;IACH,QAAQ,CAAC,gBAAgB,CAAC,MAAM,EAAE,aAAa,GAAG,MAAM;IAExD;;OAEG;IACH,QAAQ,CAAC,mBAAmB,CAC1B,MAAM,EAAE,aAAa,EACrB,UAAU,EAAE,mBAAmB,EAAE,GAChC,MAAM;IAET;;OAEG;IACH,eAAe,CACb,UAAU,EAAE,mBAAmB,EAAE,EACjC,MAAM,EAAE,aAAa,GACpB,MAAM;IAoBT;;;OAGG;IACH,WAAW,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM;IAmBzC;;OAEG;IACH,QAAQ,CAAC,YAAY,EAAE,MAAM,GAAG;QAAE,KAAK,EAAE,OAAO,CAAC;QAAC,MAAM,EAAE,MAAM,EAAE,CAAA;KAAE;IAkBpE;;OAEG;IACH,QAAQ,CAAC,gBAAgB,CAAC,OAAO,CAAC,EAAE,sBAAsB,GAAG,MAAM;IAEnE;;OAEG;IACH,SAAS,CAAC,GAAG,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAIpE;;OAEG;IACH,SAAS,CAAC,cAAc,IAAI,MAAM;CA2DnC"}

package/dist/story-generator/framework-adapters/base-adapter.js

@@ -132,7 +132,7 @@ export class BaseFrameworkAdapter {
         logger.debug(`[${this.name}Adapter] ${message}`, data);
     }
     /**
-     * Get common story structure rules
+     * Get common story structure rules including MANDATORY spacing
      */
     getCommonRules() {
         return `
@@ -148,10 +148,49 @@ IMAGE RULES:
 - Always include alt text for images
 - Example: https://picsum.photos/400/300?random=1
 
-SPACING RULES:
-- Use the design system's spacing tokens when available
-- Maintain consistent margins and padding
-- Follow the layout grid system if present
+MANDATORY SPACING & LAYOUT RULES (NON-NEGOTIABLE):
+** CRITICAL: Every generated component MUST have professional-quality spacing. Components without proper spacing look broken and unprofessional. **
+
+1. STORY WRAPPER (REQUIRED for every story):
+   - The render function MUST return a wrapper div with padding
+   - Pattern: render: () => <div style={{ padding: "24px" }}>...content...</div>
+   - This ensures content has breathing room within the Storybook canvas
+
+2. FORM FIELD SPACING (CRITICAL):
+   - ALWAYS wrap form fields in a container with vertical spacing
+   - Use flexbox column with gap: <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+   - Or use design system spacing tokens if available
+   - MINIMUM 16px gap between form fields
+
+3. BUTTON SPACING:
+   - Submit/action buttons: 24px margin-top from form fields above
+   - Pattern: <div style={{ marginTop: "24px" }}><Button>Submit</Button></div>
+   - Button groups should be wrapped with margin-top from content
+
+4. SECTION SPACING:
+   - Between major sections: 32-48px
+   - Between related content groups: 24px
+   - Use dividers or significant whitespace between unrelated content
+
+5. HEADING SPACING:
+   - More space ABOVE headings (24-32px) than below (8-16px)
+   - Pattern: <Heading style={{ marginTop: "32px", marginBottom: "12px" }}>
+
+6. CARD/CONTAINER PADDING:
+   - Internal padding: minimum 16px, preferred 24px
+   - Pattern: <Card style={{ padding: "24px" }}>
+
+7. SPECIFIC VALUES TO USE:
+   - Tight spacing (icons, inline): 4-8px
+   - Related items: 8-12px
+   - Form fields: 16px gap
+   - Buttons from content: 24px margin-top
+   - Sections: 32-48px
+   - Major divisions: 48-64px
+
+SPACING VALIDATION (Self-check before generating):
+Ask yourself: "Does every element have adequate breathing room from its neighbors?"
+If any elements appear cramped or touching, add appropriate spacing.
 `;
     }
 }

package/dist/story-generator/framework-adapters/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../story-generator/framework-adapters/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,cAAc,YAAY,CAAC;AAG3B,OAAO,EACL,iBAAiB,EACjB,eAAe,EACf,oBAAoB,GACrB,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAGzD,OAAO,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AACtE,OAAO,EAAE,oBAAoB,EAAE,0BAA0B,EAAE,MAAM,6BAA6B,CAAC;AAC/F,OAAO,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAChE,OAAO,EAAE,cAAc,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAC5E,OAAO,EAAE,aAAa,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAGzE,OAAO,EACL,aAAa,EACb,gBAAgB,EAChB,iBAAiB,EACjB,eAAe,EACf,sBAAsB,EACvB,MAAM,YAAY,CAAC;AAOpB,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAG/D;;;;;GAKG;AACH,cAAM,eAAe;IACnB,OAAO,CAAC,QAAQ,CAAmD;IACnE,OAAO,CAAC,cAAc,CAAmB;IACzC,OAAO,CAAC,iBAAiB,CAAkC;;IAU3D;;OAEG;IACH,OAAO,CAAC,uBAAuB;IAY/B;;OAEG;IACH,QAAQ,CAAC,OAAO,EAAE,gBAAgB,GAAG,IAAI;IAIzC;;OAEG;IACH,GAAG,CAAC,IAAI,EAAE,aAAa,GAAG,gBAAgB,GAAG,SAAS;IAItD;;OAEG;IACH,MAAM,IAAI,gBAAgB,EAAE;IAI5B;;OAEG;IACH,iBAAiB,IAAI,aAAa,EAAE;IAIpC;;OAEG;IACH,sBAAsB,IAAI,aAAa,EAAE;IAIzC;;OAEG;IACH,UAAU,CAAC,IAAI,EAAE,aAAa,GAAG,gBAAgB;IAIjD;;OAEG;IACH,UAAU,IAAI,gBAAgB;IAI9B;;OAEG;IACH,UAAU,CAAC,IAAI,EAAE,aAAa,GAAG,IAAI;IAQrC;;OAEG;IACG,UAAU,CAAC,WAAW,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,gBAAgB,CAAC;IAoBjE;;OAEG;IACH,oBAAoB,IAAI,iBAAiB,GAAG,IAAI;IAIhD;;OAEG;IACG,cAAc,CAClB,MAAM,EAAE,aAAa,EACrB,UAAU,EAAE,mBAAmB,EAAE,EACjC,OAAO,CAAC,EAAE,sBAAsB,GAC/B,OAAO,CAAC,eAAe,CAAC;CA8B5B;AAKD;;GAEG;AACH,wBAAgB,kBAAkB,IAAI,eAAe,CAKpD;AAED;;GAEG;AACH,wBAAgB,UAAU,CAAC,IAAI,EAAE,aAAa,GAAG,gBAAgB,GAAG,SAAS,CAE5E;AAED;;GAEG;AACH,wBAAgB,iBAAiB,IAAI,gBAAgB,CAEpD;AAED;;GAEG;AACH,wBAAsB,iBAAiB,CAAC,WAAW,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,gBAAgB,CAAC,CAEvF;AAED;;GAEG;AACH,wBAAsB,uBAAuB,CAC3C,MAAM,EAAE,aAAa,EACrB,UAAU,EAAE,mBAAmB,EAAE,EACjC,OAAO,CAAC,EAAE,sBAAsB,GAC/B,OAAO,CAAC,eAAe,CAAC,CAE1B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../story-generator/framework-adapters/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,cAAc,YAAY,CAAC;AAG3B,OAAO,EACL,iBAAiB,EACjB,eAAe,EACf,oBAAoB,GACrB,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAGzD,OAAO,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AACtE,OAAO,EAAE,oBAAoB,EAAE,0BAA0B,EAAE,MAAM,6BAA6B,CAAC;AAC/F,OAAO,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAChE,OAAO,EAAE,cAAc,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAC5E,OAAO,EAAE,aAAa,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAGzE,OAAO,EACL,aAAa,EACb,gBAAgB,EAChB,iBAAiB,EACjB,eAAe,EACf,sBAAsB,EACvB,MAAM,YAAY,CAAC;AAOpB,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAI/D;;;;;GAKG;AACH,cAAM,eAAe;IACnB,OAAO,CAAC,QAAQ,CAAmD;IACnE,OAAO,CAAC,cAAc,CAAmB;IACzC,OAAO,CAAC,iBAAiB,CAAkC;;IAU3D;;OAEG;IACH,OAAO,CAAC,uBAAuB;IAY/B;;OAEG;IACH,QAAQ,CAAC,OAAO,EAAE,gBAAgB,GAAG,IAAI;IAIzC;;OAEG;IACH,GAAG,CAAC,IAAI,EAAE,aAAa,GAAG,gBAAgB,GAAG,SAAS;IAItD;;OAEG;IACH,MAAM,IAAI,gBAAgB,EAAE;IAI5B;;OAEG;IACH,iBAAiB,IAAI,aAAa,EAAE;IAIpC;;OAEG;IACH,sBAAsB,IAAI,aAAa,EAAE;IAIzC;;OAEG;IACH,UAAU,CAAC,IAAI,EAAE,aAAa,GAAG,gBAAgB;IAIjD;;OAEG;IACH,UAAU,IAAI,gBAAgB;IAI9B;;OAEG;IACH,UAAU,CAAC,IAAI,EAAE,aAAa,GAAG,IAAI;IAQrC;;OAEG;IACG,UAAU,CAAC,WAAW,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,gBAAgB,CAAC;IAoBjE;;OAEG;IACH,oBAAoB,IAAI,iBAAiB,GAAG,IAAI;IAIhD;;OAEG;IACG,cAAc,CAClB,MAAM,EAAE,aAAa,EACrB,UAAU,EAAE,mBAAmB,EAAE,EACjC,OAAO,CAAC,EAAE,sBAAsB,GAC/B,OAAO,CAAC,eAAe,CAAC;CAkC5B;AAKD;;GAEG;AACH,wBAAgB,kBAAkB,IAAI,eAAe,CAKpD;AAED;;GAEG;AACH,wBAAgB,UAAU,CAAC,IAAI,EAAE,aAAa,GAAG,gBAAgB,GAAG,SAAS,CAE5E;AAED;;GAEG;AACH,wBAAgB,iBAAiB,IAAI,gBAAgB,CAEpD;AAED;;GAEG;AACH,wBAAsB,iBAAiB,CAAC,WAAW,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,gBAAgB,CAAC,CAEvF;AAED;;GAEG;AACH,wBAAsB,uBAAuB,CAC3C,MAAM,EAAE,aAAa,EACrB,UAAU,EAAE,mBAAmB,EAAE,EACjC,OAAO,CAAC,EAAE,sBAAsB,GAC/B,OAAO,CAAC,eAAe,CAAC,CAE1B"}

package/dist/story-generator/framework-adapters/index.js

@@ -22,6 +22,7 @@ import { AngularAdapter } from './angular-adapter.js';
 import { SvelteAdapter } from './svelte-adapter.js';
 import { detectFramework } from './framework-detector.js';
 import { logger } from '../logger.js';
+import { generateLayoutInstructions } from '../promptGenerator.js';
 /**
  * Framework Adapter Registry
  *
@@ -147,10 +148,13 @@ class AdapterRegistry {
             adapter = await this.autoDetect();
         }
         logger.debug('Generating prompt with adapter', { adapter: adapter.type });
+        // Generate layout instructions including mandatory spacing rules
+        const layoutInstructionsArray = generateLayoutInstructions(config);
+        const layoutInstructionsString = layoutInstructionsArray.join('\n');
         return {
             systemPrompt: adapter.generateSystemPrompt(config, options),
             componentReference: adapter.generateComponentReference(components, config),
-            layoutInstructions: '',
+            layoutInstructions: layoutInstructionsString,
             examples: adapter.generateExamples(config),
             sampleStory: adapter.generateSampleStory(config, components),
             framework: this.detectedFramework || {

package/dist/story-generator/promptGenerator.d.ts

@@ -19,6 +19,12 @@ export interface GeneratedPrompt {
  * Generates a comprehensive AI prompt based on the configuration and discovered components
  */
 export declare function generatePrompt(config: StoryUIConfig, components: DiscoveredComponent[]): GeneratedPrompt;
+/**
+ * Generates layout-specific instructions including MANDATORY vertical spacing rules
+ * @param config - The StoryUI configuration object
+ * @returns Array of layout instruction strings to be included in the prompt
+ */
+export declare function generateLayoutInstructions(config: StoryUIConfig): string[];
 /**
  * Builds the complete Claude prompt
  */

package/dist/story-generator/promptGenerator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"promptGenerator.d.ts","sourceRoot":"","sources":["../../story-generator/promptGenerator.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAI9D,OAAO,EAEL,eAAe,EACf,sBAAsB,EACtB,aAAa,EACb,gBAAgB,EACjB,MAAM,+BAA+B,CAAC;AAyOvC;;;GAGG;AACH,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAAC,eAAe,EAAE,oBAAoB,CAAC;IACvF,kBAAkB,EAAE,MAAM,EAAE,CAAC;CAC9B;AAED,MAAM,WAAW,eAAe;IAC9B,YAAY,EAAE,MAAM,CAAC;IACrB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,kBAAkB,EAAE,MAAM,EAAE,CAAC;IAC7B,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;CACrB;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,MAAM,EAAE,aAAa,EAAE,UAAU,EAAE,mBAAmB,EAAE,GAAG,eAAe,CAcxG;AA2hBD;;GAEG;AACH,wBAAsB,iBAAiB,CACrC,UAAU,EAAE,MAAM,EAClB,MAAM,EAAE,aAAa,EACrB,UAAU,EAAE,mBAAmB,EAAE,GAChC,OAAO,CAAC,MAAM,CAAC,CA8JjB;AAED;;;GAGG;AACH,wBAAsB,4BAA4B,CAChD,MAAM,EAAE,aAAa,EACrB,UAAU,EAAE,mBAAmB,EAAE,EACjC,OAAO,CAAC,EAAE,sBAAsB,GAC/B,OAAO,CAAC,oBAAoB,CAAC,CAqB/B;AAED;;;GAGG;AACH,wBAAsB,yBAAyB,CAC7C,UAAU,EAAE,MAAM,EAClB,MAAM,EAAE,aAAa,EACrB,UAAU,EAAE,mBAAmB,EAAE,EACjC,OAAO,CAAC,EAAE,sBAAsB,GAC/B,OAAO,CAAC,MAAM,CAAC,CAiHjB;AA4ED;;GAEG;AACH,wBAAsB,sBAAsB,CAAC,WAAW,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,aAAa,CAAC,CAIzF;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,SAAS,EAAE,aAAa,GAAG,gBAAgB,CAG9E;AAED;;GAEG;AACH,wBAAgB,sBAAsB,IAAI,aAAa,EAAE,CAGxD"}
+{"version":3,"file":"promptGenerator.d.ts","sourceRoot":"","sources":["../../story-generator/promptGenerator.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAI9D,OAAO,EAEL,eAAe,EACf,sBAAsB,EACtB,aAAa,EACb,gBAAgB,EACjB,MAAM,+BAA+B,CAAC;AAyOvC;;;GAGG;AACH,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAAC,eAAe,EAAE,oBAAoB,CAAC;IACvF,kBAAkB,EAAE,MAAM,EAAE,CAAC;CAC9B;AAED,MAAM,WAAW,eAAe;IAC9B,YAAY,EAAE,MAAM,CAAC;IACrB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,kBAAkB,EAAE,MAAM,EAAE,CAAC;IAC7B,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;CACrB;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,MAAM,EAAE,aAAa,EAAE,UAAU,EAAE,mBAAmB,EAAE,GAAG,eAAe,CAcxG;AAqTD;;;;GAIG;AACH,wBAAgB,0BAA0B,CAAC,MAAM,EAAE,aAAa,GAAG,MAAM,EAAE,CA6D1E;AA0MD;;GAEG;AACH,wBAAsB,iBAAiB,CACrC,UAAU,EAAE,MAAM,EAClB,MAAM,EAAE,aAAa,EACrB,UAAU,EAAE,mBAAmB,EAAE,GAChC,OAAO,CAAC,MAAM,CAAC,CA8JjB;AAED;;;GAGG;AACH,wBAAsB,4BAA4B,CAChD,MAAM,EAAE,aAAa,EACrB,UAAU,EAAE,mBAAmB,EAAE,EACjC,OAAO,CAAC,EAAE,sBAAsB,GAC/B,OAAO,CAAC,oBAAoB,CAAC,CAqB/B;AAED;;;GAGG;AACH,wBAAsB,yBAAyB,CAC7C,UAAU,EAAE,MAAM,EAClB,MAAM,EAAE,aAAa,EACrB,UAAU,EAAE,mBAAmB,EAAE,EACjC,OAAO,CAAC,EAAE,sBAAsB,GAC/B,OAAO,CAAC,MAAM,CAAC,CAiHjB;AA4ED;;GAEG;AACH,wBAAsB,sBAAsB,CAAC,WAAW,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,aAAa,CAAC,CAIzF;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,SAAS,EAAE,aAAa,GAAG,gBAAgB,CAG9E;AAED;;GAEG;AACH,wBAAgB,sBAAsB,IAAI,aAAa,EAAE,CAGxD"}

package/dist/story-generator/promptGenerator.js

@@ -465,13 +465,47 @@ function formatComponentReference(component, config) {
     return reference;
 }
 /**
- * Generates layout-specific instructions
+ * Generates layout-specific instructions including MANDATORY vertical spacing rules
+ * @param config - The StoryUI configuration object
+ * @returns Array of layout instruction strings to be included in the prompt
  */
-function generateLayoutInstructions(config) {
+export function generateLayoutInstructions(config) {
     const instructions = [];
     const layoutRules = config.layoutRules;
+    // MANDATORY VERTICAL SPACING RULES - These are non-negotiable for professional UI quality
+    instructions.push('MANDATORY VERTICAL SPACING RULES (NON-NEGOTIABLE):');
+    instructions.push('');
+    instructions.push('** CRITICAL: Every component MUST have proper vertical spacing. Components without spacing look broken and unprofessional. **');
+    instructions.push('');
+    instructions.push('1. FORM FIELDS: Always wrap form fields in a container with vertical spacing:');
+    instructions.push('   - Use flexbox column with gap: <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>');
+    instructions.push('   - Or use your design system\'s spacing tokens if available');
+    instructions.push('   - MINIMUM 16px gap between form fields, 24px for complex forms');
+    instructions.push('');
+    instructions.push('2. BUTTON SPACING: Buttons MUST have margin-top from content above:');
+    instructions.push('   - Submit/action buttons: 24px margin-top from form fields');
+    instructions.push('   - Button groups: wrap in <div style={{ marginTop: "24px" }}>');
+    instructions.push('');
+    instructions.push('3. SECTION SPACING: Logical sections need clear visual separation:');
+    instructions.push('   - Between major sections: 32-48px');
+    instructions.push('   - Between related content groups: 24px');
+    instructions.push('   - Use dividers or significant whitespace between unrelated content');
+    instructions.push('');
+    instructions.push('4. HEADING SPACING: Headings need asymmetric spacing:');
+    instructions.push('   - More space ABOVE headings (24-32px) than below (8-16px)');
+    instructions.push('   - This creates visual hierarchy and groups content with its heading');
+    instructions.push('');
+    instructions.push('5. CARD/CONTAINER PADDING: Internal padding is mandatory:');
+    instructions.push('   - Minimum 16px padding on all sides');
+    instructions.push('   - Preferred 24px for cards with multiple elements');
+    instructions.push('   - Use design system spacing tokens when available');
+    instructions.push('');
+    instructions.push('6. WRAPPER PATTERN (REQUIRED): The story render function MUST return a wrapper div with padding:');
+    instructions.push('   - render: () => <div style={{ padding: "24px" }}>...content...</div>');
+    instructions.push('   - This ensures content has breathing room within the Storybook canvas');
+    instructions.push('');
     if (layoutRules.multiColumnWrapper && layoutRules.columnComponent) {
-        instructions.push('CRITICAL LAYOUT RULES:');
+        instructions.push('MULTI-COLUMN LAYOUT RULES:');
         instructions.push(`- For ANY multi-column layout (2, 3, or more columns), use ${layoutRules.multiColumnWrapper} components`);
         instructions.push(`- Each column must be wrapped in its own ${layoutRules.columnComponent} element`);
         instructions.push(`- Structure: <${layoutRules.multiColumnWrapper}><${layoutRules.columnComponent}>column 1</${layoutRules.columnComponent}><${layoutRules.columnComponent}>column 2</${layoutRules.columnComponent}></${layoutRules.multiColumnWrapper}>`);
@@ -479,14 +513,17 @@ function generateLayoutInstructions(config) {
         instructions.push(`- NEVER use CSS properties as props (like display="grid" or gridTemplateColumns) - these are not valid props`);
         instructions.push(`- For grid-like layouts, use Flex with wrap prop and appropriate gap, NOT CSS Grid`);
         instructions.push(`- The ${layoutRules.multiColumnWrapper} should be the main component in your story for multi-column layouts`);
+        instructions.push('');
     }
     if (layoutRules.prohibitedElements && layoutRules.prohibitedElements.length > 0) {
         instructions.push(`- NEVER use plain HTML ${layoutRules.prohibitedElements.join(', ')} elements - ALWAYS use the provided design system components`);
     }
     // Generic layout instructions for all design systems
+    instructions.push('GENERAL LAYOUT BEST PRACTICES:');
     instructions.push(`- Use semantic heading components from your design system instead of raw <h1>-<h6> tags`);
-    instructions.push(`- Use the design system's layout components and spacing tokens instead of inline styles`);
+    instructions.push(`- Use the design system's layout components and spacing tokens instead of inline styles when available`);
     instructions.push(`- Prefer design system components over plain HTML elements for consistent styling`);
+    instructions.push(`- ALWAYS test mentally: "Does this component have enough visual breathing room?" If not, add spacing.`);
     return instructions;
 }
 /**

package/dist/story-ui.config.d.ts

@@ -23,6 +23,16 @@ export interface AdditionalImport {
     path: string;
     components: string[];
 }
+export interface IconImportsConfig {
+    /** Package name for icon imports (e.g., '@tabler/icons-react', 'lucide-react') */
+    package: string;
+    /** Import path pattern (e.g., '@tabler/icons-react' or 'lucide-react') */
+    importPath: string;
+    /** Common icons that are known to exist (for validation fallback) */
+    commonIcons?: string[];
+    /** Whether to allow any icon from this package (skip individual validation) */
+    allowAllIcons?: boolean;
+}
 export interface DesignSystemGuidelines {
     name: string;
     preferredComponents?: {
@@ -72,6 +82,8 @@ export interface StoryUIConfig {
     considerationsPath?: string;
     storybookFramework?: string;
     designSystemGuidelines?: DesignSystemGuidelines;
+    /** Icon imports configuration (auto-detected from package.json or manually configured) */
+    iconImports?: IconImportsConfig;
 }
 export declare const DEFAULT_CONFIG: StoryUIConfig;
 export declare const GENERIC_CONFIG_TEMPLATE: Partial<StoryUIConfig>;

package/dist/story-ui.config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"story-ui.config.d.ts","sourceRoot":"","sources":["../story-ui.config.ts"],"names":[],"mappings":"AAOA,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,YAAY,GAAG,UAAU,GAAG,OAAO,CAAC;IAC/E,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;CAClB;AAGD,MAAM,WAAW,WAAW;IAC1B,kBAAkB,EAAE,MAAM,CAAC;IAC3B,eAAe,EAAE,MAAM,CAAC;IACxB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,cAAc,CAAC,EAAE;QACf,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;KACnC,CAAC;IACF,kBAAkB,CAAC,EAAE,MAAM,EAAE,CAAC;CAC/B;AAGD,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,MAAM,EAAE,CAAC;CACtB;AAKD,MAAM,WAAW,sBAAsB;IACrC,IAAI,EAAE,MAAM,CAAC;IACb,mBAAmB,CAAC,EAAE;QACpB,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,CAAC;KAC5B,CAAC;IACF,aAAa,CAAC,EAAE;QACd,MAAM,EAAE,MAAM,CAAC;QACf,MAAM,EAAE,MAAM,EAAE,CAAC;KAClB,CAAC;IACF,WAAW,CAAC,EAAE;QACZ,MAAM,EAAE,MAAM,CAAC;QACf,UAAU,EAAE,MAAM,EAAE,CAAC;KACtB,CAAC;IACF,kBAAkB,CAAC,EAAE;QACnB,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;QACzB,iBAAiB,CAAC,EAAE,MAAM,EAAE,CAAC;QAC7B,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;KACzB,CAAC;IACF,gBAAgB,CAAC,EAAE;QACjB,mBAAmB,CAAC,EAAE,OAAO,CAAC;QAC9B,uBAAuB,CAAC,EAAE,OAAO,CAAC;QAClC,uBAAuB,CAAC,EAAE,OAAO,CAAC;KACnC,CAAC;IACF,+FAA+F;IAC/F,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAGD,MAAM,WAAW,aAAa;IAC5B,oBAAoB,EAAE,MAAM,CAAC;IAC7B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,EAAE,MAAM,CAAC;IACtB,UAAU,EAAE,MAAM,CAAC;IACnB,eAAe,EAAE,MAAM,CAAC;IACxB,wGAAwG;IACxG,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mHAAmH;IACnH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,UAAU,EAAE,eAAe,EAAE,CAAC;IAC9B,gBAAgB,CAAC,EAAE,eAAe,EAAE,CAAC;IACrC,WAAW,EAAE,WAAW,CAAC;IACzB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kBAAkB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC9B,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB,iBAAiB,CAAC,EAAE,gBAAgB,EAAE,CAAC;IACvC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,sBAAsB,CAAC,EAAE,sBAAsB,CAAC;CACjD;AAGD,eAAO,MAAM,cAAc,EAAE,aA4E5B,CAAC;AAGF,eAAO,MAAM,uBAAuB,EAAE,OAAO,CAAC,aAAa,CAoB1D,CAAC;AAGF,eAAO,MAAM,eAAe,EAAE,aAA8B,CAAC;AAG7D,wBAAgB,mBAAmB,CAAC,UAAU,EAAE,OAAO,CAAC,aAAa,CAAC,GAAG,aAAa,CAarF"}
+{"version":3,"file":"story-ui.config.d.ts","sourceRoot":"","sources":["../story-ui.config.ts"],"names":[],"mappings":"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"}

package/dist/templates/StoryUI/StoryUIPanel.css

@@ -1248,6 +1248,7 @@
 
 /* ============================================
    Completion Card - shares bubble styling with message bubbles
+   Uses explicit colors with !important to prevent design system overrides
    ============================================ */
 .sui-completion {
   max-width: 85%;
@@ -1256,9 +1257,17 @@
   border-bottom-left-radius: var(--radius-sm);
   font-size: 0.9375rem;
   line-height: 1.6;
-  border: 1px solid hsl(var(--border));
-  background: hsl(var(--card));
-  color: hsl(var(--foreground));
+  /* Explicit light mode colors */
+  background: #ffffff !important;
+  color: #18181b !important;
+  border: 1px solid #e4e4e7 !important;
+}
+
+/* Completion card - dark mode */
+.sui-root.dark .sui-completion {
+  background: #27272a !important;
+  color: #fafafa !important;
+  border: 1px solid #3f3f46 !important;
 }
 
 .sui-completion-header {
@@ -1266,7 +1275,13 @@
   align-items: center;
   gap: var(--space-2);
   font-weight: 500;
-  color: hsl(var(--success));
+  /* Explicit green for success - readable on white */
+  color: #16a34a !important;
+}
+
+/* Completion header - dark mode */
+.sui-root.dark .sui-completion-header {
+  color: #22c55e !important;
 }
 
 .sui-completion-components {
@@ -1278,48 +1293,81 @@
 
 .sui-completion-tag {
   padding: 0.125rem var(--space-2);
-  background: hsl(var(--info) / 0.15);
-  color: hsl(var(--info));
+  /* Explicit blue colors - readable tag styling */
+  background: #eff6ff !important;
+  color: #2563eb !important;
   border-radius: var(--radius-full);
   font-size: 0.75rem;
   font-family: var(--font-mono);
 }
 
+/* Completion tag - dark mode */
+.sui-root.dark .sui-completion-tag {
+  background: #1e3a5f !important;
+  color: #60a5fa !important;
+}
+
 .sui-completion-metrics {
   display: flex;
   gap: var(--space-4);
   margin-top: var(--space-3);
   font-size: 0.8125rem;
-  color: hsl(var(--muted-foreground));
+  /* Explicit muted gray */
+  color: #71717a !important;
+}
+
+/* Completion metrics - dark mode */
+.sui-root.dark .sui-completion-metrics {
+  color: #a1a1aa !important;
 }
 
 /* Fallback story styling (error placeholder was created) */
 .sui-completion-fallback .sui-completion-header {
-  color: hsl(var(--warning, 38 92% 50%));
+  color: #ca8a04 !important; /* Amber/warning color */
+}
+
+.sui-root.dark .sui-completion-fallback .sui-completion-header {
+  color: #facc15 !important; /* Lighter amber for dark mode */
 }
 
 .sui-completion-fallback-warning {
   margin-top: var(--space-2);
   padding: var(--space-2) var(--space-3);
-  background: hsl(var(--warning, 38 92% 50%) / 0.15);
+  background: #fef9c3 !important; /* Light amber background */
   border-radius: var(--radius-md);
   font-size: 0.8125rem;
 }
 
+.sui-root.dark .sui-completion-fallback-warning {
+  background: #422006 !important; /* Dark amber background */
+}
+
 .sui-completion-fallback-warning strong {
   display: block;
-  color: hsl(var(--warning, 38 92% 50%));
+  color: #ca8a04 !important; /* Amber text */
   margin-bottom: var(--space-1);
 }
 
+.sui-root.dark .sui-completion-fallback-warning strong {
+  color: #facc15 !important;
+}
+
 .sui-completion-fallback-warning p {
   margin: 0;
-  color: hsl(var(--muted-foreground));
+  color: #71717a !important; /* Muted gray */
+}
+
+.sui-root.dark .sui-completion-fallback-warning p {
+  color: #a1a1aa !important;
 }
 
 /* Error completion styling (generation failed completely) */
 .sui-completion-error .sui-completion-header {
-  color: hsl(var(--destructive));
+  color: #dc2626 !important; /* Red for errors */
+}
+
+.sui-root.dark .sui-completion-error .sui-completion-header {
+  color: #f87171 !important; /* Lighter red for dark mode */
 }
 
 /* ============================================

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tpitre/story-ui",
-  "version": "4.6.1",
+  "version": "4.6.3",
   "description": "AI-powered Storybook story generator with dynamic component discovery",
   "type": "module",
   "main": "dist/index.js",

package/templates/StoryUI/StoryUIPanel.css

@@ -1248,6 +1248,7 @@
 
 /* ============================================
    Completion Card - shares bubble styling with message bubbles
+   Uses explicit colors with !important to prevent design system overrides
    ============================================ */
 .sui-completion {
   max-width: 85%;
@@ -1256,9 +1257,17 @@
   border-bottom-left-radius: var(--radius-sm);
   font-size: 0.9375rem;
   line-height: 1.6;
-  border: 1px solid hsl(var(--border));
-  background: hsl(var(--card));
-  color: hsl(var(--foreground));
+  /* Explicit light mode colors */
+  background: #ffffff !important;
+  color: #18181b !important;
+  border: 1px solid #e4e4e7 !important;
+}
+
+/* Completion card - dark mode */
+.sui-root.dark .sui-completion {
+  background: #27272a !important;
+  color: #fafafa !important;
+  border: 1px solid #3f3f46 !important;
 }
 
 .sui-completion-header {
@@ -1266,7 +1275,13 @@
   align-items: center;
   gap: var(--space-2);
   font-weight: 500;
-  color: hsl(var(--success));
+  /* Explicit green for success - readable on white */
+  color: #16a34a !important;
+}
+
+/* Completion header - dark mode */
+.sui-root.dark .sui-completion-header {
+  color: #22c55e !important;
 }
 
 .sui-completion-components {
@@ -1278,48 +1293,81 @@
 
 .sui-completion-tag {
   padding: 0.125rem var(--space-2);
-  background: hsl(var(--info) / 0.15);
-  color: hsl(var(--info));
+  /* Explicit blue colors - readable tag styling */
+  background: #eff6ff !important;
+  color: #2563eb !important;
   border-radius: var(--radius-full);
   font-size: 0.75rem;
   font-family: var(--font-mono);
 }
 
+/* Completion tag - dark mode */
+.sui-root.dark .sui-completion-tag {
+  background: #1e3a5f !important;
+  color: #60a5fa !important;
+}
+
 .sui-completion-metrics {
   display: flex;
   gap: var(--space-4);
   margin-top: var(--space-3);
   font-size: 0.8125rem;
-  color: hsl(var(--muted-foreground));
+  /* Explicit muted gray */
+  color: #71717a !important;
+}
+
+/* Completion metrics - dark mode */
+.sui-root.dark .sui-completion-metrics {
+  color: #a1a1aa !important;
 }
 
 /* Fallback story styling (error placeholder was created) */
 .sui-completion-fallback .sui-completion-header {
-  color: hsl(var(--warning, 38 92% 50%));
+  color: #ca8a04 !important; /* Amber/warning color */
+}
+
+.sui-root.dark .sui-completion-fallback .sui-completion-header {
+  color: #facc15 !important; /* Lighter amber for dark mode */
 }
 
 .sui-completion-fallback-warning {
   margin-top: var(--space-2);
   padding: var(--space-2) var(--space-3);
-  background: hsl(var(--warning, 38 92% 50%) / 0.15);
+  background: #fef9c3 !important; /* Light amber background */
   border-radius: var(--radius-md);
   font-size: 0.8125rem;
 }
 
+.sui-root.dark .sui-completion-fallback-warning {
+  background: #422006 !important; /* Dark amber background */
+}
+
 .sui-completion-fallback-warning strong {
   display: block;
-  color: hsl(var(--warning, 38 92% 50%));
+  color: #ca8a04 !important; /* Amber text */
   margin-bottom: var(--space-1);
 }
 
+.sui-root.dark .sui-completion-fallback-warning strong {
+  color: #facc15 !important;
+}
+
 .sui-completion-fallback-warning p {
   margin: 0;
-  color: hsl(var(--muted-foreground));
+  color: #71717a !important; /* Muted gray */
+}
+
+.sui-root.dark .sui-completion-fallback-warning p {
+  color: #a1a1aa !important;
 }
 
 /* Error completion styling (generation failed completely) */
 .sui-completion-error .sui-completion-header {
-  color: hsl(var(--destructive));
+  color: #dc2626 !important; /* Red for errors */
+}
+
+.sui-root.dark .sui-completion-error .sui-completion-header {
+  color: #f87171 !important; /* Lighter red for dark mode */
 }
 
 /* ============================================