@tpitre/story-ui 4.6.2 → 4.6.3

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/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.2",
+  "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 */
 }
 
 /* ============================================