@tpitre/story-ui 3.10.2 → 3.10.4

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

@@ -132,8 +132,11 @@ export function extractImportsFromCode(code, importPath) {
 }
 /**
  * Generate a filename from a story title and hash.
+ * @param title - The story title
+ * @param hash - The unique hash for the story
+ * @param extension - The file extension (e.g., '.stories.tsx' or '.stories.ts')
  */
-export function fileNameFromTitle(title, hash) {
+export function fileNameFromTitle(title, hash, extension = '.stories.tsx') {
     if (!title || typeof title !== 'string') {
         title = 'untitled';
     }
@@ -146,7 +149,7 @@ export function fileNameFromTitle(title, hash) {
         .replace(/^-+|-+$/g, '')
         .replace(/"|'/g, '')
         .slice(0, 60);
-    return `${base}-${hash}.stories.tsx`;
+    return `${base}-${hash}${extension}`;
 }
 /**
  * Find a similar icon name from the allowed icons set.
@@ -183,3 +186,157 @@ export function findSimilarIcon(iconName, allowedIcons) {
     }
     return null;
 }
+/**
+ * Creates a framework-aware fallback story when generation fails.
+ * Uses the adapter to generate framework-appropriate code.
+ */
+export function createFrameworkAwareFallbackStory(prompt, config, framework) {
+    const title = prompt.length > 50 ? prompt.substring(0, 50) + '...' : prompt;
+    const escapedTitle = title.replace(/"/g, '\\"').replace(/'/g, "\\'");
+    const storyPrefix = config.storyPrefix || 'Generated/';
+    // Framework-specific fallback templates
+    switch (framework) {
+        case 'vue':
+            return `import type { Meta, StoryObj } from '@storybook/vue3';
+
+// Fallback story generated due to AI generation error
+const meta: Meta = {
+  title: '${storyPrefix}${escapedTitle}',
+  parameters: {
+    docs: {
+      description: {
+        story: 'This is a fallback story created when the AI generation failed due to syntax errors.'
+      }
+    }
+  }
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+  render: () => ({
+    template: \`
+      <div style="padding: 2rem; text-align: center; border: 2px dashed #ccc; border-radius: 8px;">
+        <h2>Story Generation Error</h2>
+        <p>The AI-generated story contained syntax errors and could not be created.</p>
+        <p><strong>Original prompt:</strong> ${escapedTitle}</p>
+        <p>Please try rephrasing your request.</p>
+      </div>
+    \`
+  })
+};`;
+        case 'angular':
+            return `import type { Meta, StoryObj } from '@storybook/angular';
+
+// Fallback story generated due to AI generation error
+const meta: Meta = {
+  title: '${storyPrefix}${escapedTitle}',
+  parameters: {
+    docs: {
+      description: {
+        story: 'This is a fallback story created when the AI generation failed due to syntax errors.'
+      }
+    }
+  }
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+  render: () => ({
+    template: \`
+      <div style="padding: 2rem; text-align: center; border: 2px dashed #ccc; border-radius: 8px;">
+        <h2>Story Generation Error</h2>
+        <p>The AI-generated story contained syntax errors and could not be created.</p>
+        <p><strong>Original prompt:</strong> ${escapedTitle}</p>
+        <p>Please try rephrasing your request.</p>
+      </div>
+    \`
+  })
+};`;
+        case 'svelte':
+            return `import type { Meta, StoryObj } from '@storybook/svelte';
+
+// Fallback story generated due to AI generation error
+const meta: Meta = {
+  title: '${storyPrefix}${escapedTitle}',
+  parameters: {
+    docs: {
+      description: {
+        story: 'This is a fallback story created when the AI generation failed due to syntax errors.'
+      }
+    }
+  }
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+  render: () => ({
+    Component: null,
+    props: {}
+  })
+};`;
+        case 'web-components':
+            return `import { html } from 'lit';
+import type { Meta, StoryObj } from '@storybook/web-components';
+
+// Fallback story generated due to AI generation error
+const meta: Meta = {
+  title: '${storyPrefix}${escapedTitle}',
+  parameters: {
+    docs: {
+      description: {
+        story: 'This is a fallback story created when the AI generation failed due to syntax errors.'
+      }
+    }
+  }
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+  render: () => html\`
+    <div style="padding: 2rem; text-align: center; border: 2px dashed #ccc; border-radius: 8px;">
+      <h2>Story Generation Error</h2>
+      <p>The AI-generated story contained syntax errors and could not be created.</p>
+      <p><strong>Original prompt:</strong> ${escapedTitle}</p>
+      <p>Please try rephrasing your request.</p>
+    </div>
+  \`
+};`;
+        case 'react':
+        default:
+            const storybookFramework = config.storybookFramework || '@storybook/react';
+            return `import React from 'react';
+import type { StoryObj } from '${storybookFramework}';
+
+// Fallback story generated due to AI generation error
+export default {
+  title: '${storyPrefix}${escapedTitle}',
+  component: () => (
+    <div style={{ padding: '2rem', textAlign: 'center', border: '2px dashed #ccc', borderRadius: '8px' }}>
+      <h2>Story Generation Error</h2>
+      <p>The AI-generated story contained syntax errors and could not be created.</p>
+      <p><strong>Original prompt:</strong> ${escapedTitle}</p>
+      <p>Please try rephrasing your request or contact support.</p>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'This is a fallback story created when the AI generation failed due to syntax errors.'
+      }
+    }
+  }
+};
+
+export const Default: StoryObj = {
+  args: {}
+};`;
+    }
+}

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

@@ -1 +1 @@
-{"version":3,"file":"angular-adapter.d.ts","sourceRoot":"","sources":["../../../story-generator/framework-adapters/angular-adapter.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EACL,aAAa,EACb,cAAc,EACd,sBAAsB,EACvB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAE/D,qBAAa,cAAe,SAAQ,oBAAoB;IACtD,QAAQ,CAAC,IAAI,EAAE,aAAa,CAAa;IACzC,QAAQ,CAAC,IAAI,aAAa;IAC1B,QAAQ,CAAC,wBAAwB,EAAE,cAAc,EAAE,CAGjD;IACF,QAAQ,CAAC,gBAAgB,iBAAiB;IAE1C,oBAAoB,CAClB,MAAM,EAAE,aAAa,EACrB,OAAO,CAAC,EAAE,sBAAsB,GAC/B,MAAM;IA0HT,gBAAgB,CAAC,MAAM,EAAE,aAAa,GAAG,MAAM;IA+J/C,mBAAmB,CACjB,MAAM,EAAE,aAAa,EACrB,UAAU,EAAE,mBAAmB,EAAE,GAChC,MAAM;IAqDT,gBAAgB,CAAC,OAAO,CAAC,EAAE,sBAAsB,GAAG,MAAM;IA4B1D;;OAEG;IACH,OAAO,CAAC,WAAW;IAOnB;;OAEG;IACH,WAAW,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM;IAkBzC;;OAEG;IACH,QAAQ,CAAC,YAAY,EAAE,MAAM,GAAG;QAAE,KAAK,EAAE,OAAO,CAAC;QAAC,MAAM,EAAE,MAAM,EAAE,CAAA;KAAE;CA2BrE;AAED;;GAEG;AACH,wBAAgB,oBAAoB,IAAI,cAAc,CAErD"}
+{"version":3,"file":"angular-adapter.d.ts","sourceRoot":"","sources":["../../../story-generator/framework-adapters/angular-adapter.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EACL,aAAa,EACb,cAAc,EACd,sBAAsB,EACvB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAE/D,qBAAa,cAAe,SAAQ,oBAAoB;IACtD,QAAQ,CAAC,IAAI,EAAE,aAAa,CAAa;IACzC,QAAQ,CAAC,IAAI,aAAa;IAC1B,QAAQ,CAAC,wBAAwB,EAAE,cAAc,EAAE,CAGjD;IACF,QAAQ,CAAC,gBAAgB,iBAAiB;IAE1C,oBAAoB,CAClB,MAAM,EAAE,aAAa,EACrB,OAAO,CAAC,EAAE,sBAAsB,GAC/B,MAAM;IAkIT,gBAAgB,CAAC,MAAM,EAAE,aAAa,GAAG,MAAM;IAgK/C,mBAAmB,CACjB,MAAM,EAAE,aAAa,EACrB,UAAU,EAAE,mBAAmB,EAAE,GAChC,MAAM;IAqDT,gBAAgB,CAAC,OAAO,CAAC,EAAE,sBAAsB,GAAG,MAAM;IA4B1D;;OAEG;IACH,OAAO,CAAC,WAAW;IAOnB;;OAEG;IACH,WAAW,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM;IAkBzC;;OAEG;IACH,QAAQ,CAAC,YAAY,EAAE,MAAM,GAAG;QAAE,KAAK,EAAE,OAAO,CAAC;QAAC,MAAM,EAAE,MAAM,EAAE,CAAA;KAAE;CA2BrE;AAED;;GAEG;AACH,wBAAgB,oBAAoB,IAAI,cAAc,CAErD"}

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

@@ -133,6 +133,14 @@ CONTENT PROJECTION (ng-content):
 - Default slot: Content between tags
 - Named slots: Use ngProjectAs or select attribute
 
+MATERIAL ICONS (CRITICAL - If using @angular/material):
+- ALWAYS use full icon names, NEVER abbreviate: "favorite" (not "fav"), "home" (not "ho"), "delete" (not "de"), "settings" (not "se")
+- Always import MatIconModule in moduleMetadata when using <mat-icon>
+- Correct syntax: <mat-icon>favorite</mat-icon>, <mat-icon>home</mat-icon>
+- Common icons: home, favorite, delete, settings, search, menu, close, add, remove, edit, save, cancel, check, arrow_back, arrow_forward
+- For filled variants: favorite, star, check_circle
+- For outlined variants: favorite_border, star_border, check_circle_outline
+
 ${this.getCommonRules()}`;
     }
     generateExamples(config) {
@@ -227,7 +235,6 @@ export const ProductCard: Story = {
 \`\`\`typescript
 import type { Meta, StoryObj } from '@storybook/angular';
 import { applicationConfig } from '@storybook/angular';
-import { action } from '@storybook/addon-actions';
 import { ButtonComponent } from 'your-library';
 
 const meta: Meta<ButtonComponent> = {
@@ -238,16 +245,18 @@ const meta: Meta<ButtonComponent> = {
       providers: [],
     }),
   ],
+  argTypes: {
+    // Use argTypes with action for event logging instead of addon-actions
+    onClick: { action: 'clicked' },
+  },
 };
 
 export default meta;
 type Story = StoryObj<ButtonComponent>;
 
 export const WithClick: Story = {
-  render: () => ({
-    props: {
-      onClick: action('button-click'),
-    },
+  render: (args) => ({
+    props: args,
     template: \`
       <app-button (click)="onClick($event)" variant="primary">
         Click me

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

@@ -1 +1 @@
-{"version":3,"file":"svelte-adapter.d.ts","sourceRoot":"","sources":["../../../story-generator/framework-adapters/svelte-adapter.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EACL,aAAa,EACb,cAAc,EACd,sBAAsB,EACvB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAE/D,qBAAa,aAAc,SAAQ,oBAAoB;IACrD,QAAQ,CAAC,IAAI,EAAE,aAAa,CAAY;IACxC,QAAQ,CAAC,IAAI,YAAY;IACzB,QAAQ,CAAC,wBAAwB,EAAE,cAAc,EAAE,CAGjD;IACF,QAAQ,CAAC,gBAAgB,iBAAiB;IAE1C,oBAAoB,CAClB,MAAM,EAAE,aAAa,EACrB,OAAO,CAAC,EAAE,sBAAsB,GAC/B,MAAM;IA8GT,gBAAgB,CAAC,MAAM,EAAE,aAAa,GAAG,MAAM;IAuJ/C,mBAAmB,CACjB,MAAM,EAAE,aAAa,EACrB,UAAU,EAAE,mBAAmB,EAAE,GAChC,MAAM;IA4CT,gBAAgB,CAAC,OAAO,CAAC,EAAE,sBAAsB,GAAG,MAAM;IAsB1D;;OAEG;IACH,WAAW,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM;IAiDzC;;OAEG;IACH,QAAQ,CAAC,YAAY,EAAE,MAAM,GAAG;QAAE,KAAK,EAAE,OAAO,CAAC;QAAC,MAAM,EAAE,MAAM,EAAE,CAAA;KAAE;IAwBpE;;OAEG;IACH,eAAe,CACb,UAAU,EAAE,mBAAmB,EAAE,EACjC,MAAM,EAAE,aAAa,GACpB,MAAM;CAWV;AAED;;GAEG;AACH,wBAAgB,mBAAmB,IAAI,aAAa,CAEnD"}
+{"version":3,"file":"svelte-adapter.d.ts","sourceRoot":"","sources":["../../../story-generator/framework-adapters/svelte-adapter.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EACL,aAAa,EACb,cAAc,EACd,sBAAsB,EACvB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAE/D,qBAAa,aAAc,SAAQ,oBAAoB;IACrD,QAAQ,CAAC,IAAI,EAAE,aAAa,CAAY;IACxC,QAAQ,CAAC,IAAI,YAAY;IACzB,QAAQ,CAAC,wBAAwB,EAAE,cAAc,EAAE,CAGjD;IACF,QAAQ,CAAC,gBAAgB,iBAAiB;IAE1C,oBAAoB,CAClB,MAAM,EAAE,aAAa,EACrB,OAAO,CAAC,EAAE,sBAAsB,GAC/B,MAAM;IAmGT,gBAAgB,CAAC,MAAM,EAAE,aAAa,GAAG,MAAM;IAyI/C,mBAAmB,CACjB,MAAM,EAAE,aAAa,EACrB,UAAU,EAAE,mBAAmB,EAAE,GAChC,MAAM;IA4CT,gBAAgB,CAAC,OAAO,CAAC,EAAE,sBAAsB,GAAG,MAAM;IAsB1D;;OAEG;IACH,WAAW,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM;IAiDzC;;OAEG;IACH,QAAQ,CAAC,YAAY,EAAE,MAAM,GAAG;QAAE,KAAK,EAAE,OAAO,CAAC;QAAC,MAAM,EAAE,MAAM,EAAE,CAAA;KAAE;IAwBpE;;OAEG;IACH,eAAe,CACb,UAAU,EAAE,mBAAmB,EAAE,EACjC,MAAM,EAAE,aAAa,GACpB,MAAM;CAWV;AAED;;GAEG;AACH,wBAAgB,mBAAmB,IAAI,aAAa,CAEnD"}

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

@@ -28,43 +28,40 @@ Use ONLY the Svelte components from the ${componentSystemName} listed below.
 
 MANDATORY IMPORTS - First lines of every story file:
 1. import type { Meta, StoryObj } from '@storybook/svelte';
-2. import ComponentName from '${config.importPath || 'your-library'}/ComponentName.svelte';
+2. import { ComponentName } from '${config.importPath || 'flowbite-svelte'}';
 
-SVELTE STORY FORMAT:
-- Import .svelte files directly
+SVELTE STORY FORMAT (CSF 3.0):
+- Use named imports from flowbite-svelte (NOT default imports from .svelte files)
 - Props are passed via args object
-- Use render function for complex templates
+- Use render function ONLY for multiple components or complex layouts
 
-STORY STRUCTURE (CSF 3.0):
+STORY STRUCTURE:
 - Meta object with component, title, and parameters
-- Stories use args for simple prop passing
-- Use render for component composition
+- Stories use args for prop passing
+- Keep stories simple - avoid complex render functions when possible
 
 CRITICAL RULES:
-- Import Svelte components (default export from .svelte files)
-- For slots, use render with a wrapper component
-- Events use on: directive in Svelte templates
+- Import using named exports: import { Button, Card } from 'flowbite-svelte';
+- DO NOT use 'slot' property in render functions - it does NOT work
+- DO NOT use 'children' in args
+- For components that need text content, use the component's text/label prop if available
+- For button text, most Flowbite components accept text as a prop or the component handles it
 
-CRITICAL - SVELTE SLOT CONTENT:
-- Svelte components use SLOTS for content, NOT children props
-- Always use render function with 'slot' property for text/content
-- Never use 'children' in args - it will cause runtime errors
-
-Example structure:
+SIMPLE EXAMPLE (PREFERRED):
 \`\`\`typescript
 import type { Meta, StoryObj } from '@storybook/svelte';
-import { Button } from 'your-library';
+import { Button } from 'flowbite-svelte';
 
 const meta: Meta<Button> = {
   title: 'Components/Button',
   component: Button,
   tags: ['autodocs'],
+  parameters: { layout: 'centered' },
   argTypes: {
-    variant: {
+    color: {
       control: 'select',
-      options: ['primary', 'secondary', 'ghost'],
+      options: ['primary', 'blue', 'alternative', 'dark', 'light', 'green', 'red'],
     },
-    onclick: { action: 'clicked' },
   },
 };
 
@@ -73,201 +70,179 @@ type Story = StoryObj<typeof meta>;
 
 export const Primary: Story = {
   args: {
-    variant: 'primary',
+    color: 'primary',
   },
-  render: (args) => ({
+};
+
+export const AllColors: Story = {
+  render: () => ({
     Component: Button,
-    props: args,
-    slot: 'Click me',
+    props: { color: 'blue' },
   }),
 };
 \`\`\`
 
-For stories with slots (using wrapper component):
-\`\`\`svelte
-<!-- ButtonWithIcon.stories.svelte -->
-<script context="module" lang="ts">
-  import type { Meta } from '@storybook/svelte';
-  import Button from 'your-library/Button.svelte';
-  import Icon from 'your-library/Icon.svelte';
-
-  export const meta: Meta<Button> = {
-    title: 'Components/Button/WithIcon',
-    component: Button,
-  };
-</script>
-
-<script lang="ts">
-  import { Story } from '@storybook/svelte';
-</script>
-
-<Story name="With Icon">
-  <Button variant="primary">
-    <Icon slot="icon" name="star" />
-    Starred
-  </Button>
-</Story>
+FOR MULTIPLE COMPONENTS (use render with template):
+\`\`\`typescript
+import type { Meta, StoryObj } from '@storybook/svelte';
+import { ButtonGroup, Button } from 'flowbite-svelte';
+
+const meta: Meta<ButtonGroup> = {
+  title: 'Components/ButtonGroup',
+  component: ButtonGroup,
+  tags: ['autodocs'],
+  parameters: { layout: 'centered' },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// For simple button groups, just show the component
+export const Default: Story = {
+  args: {},
+};
 \`\`\`
 
 SVELTE TEMPLATE SYNTAX:
 - Props: property={value}
-- Events: on:event={handler}
+- Events: onclick={handler} (Svelte 5 syntax, NOT on:click)
 - Two-way binding: bind:value
 - Conditionals: {#if condition}...{/if}
 - Loops: {#each items as item}...{/each}
 
-SLOTS:
-- Default slot: Content between tags
-- Named slots: <span slot="name">content</span>
-- Slot props: let:prop
-
 ${this.getCommonRules()}`;
     }
     generateExamples(config) {
-        const lib = config.importPath || 'your-library';
+        const lib = config.importPath || 'flowbite-svelte';
         return `
-## Example Stories for Svelte
+## Example Stories for Svelte (CSF 3.0 Format)
 
-### TypeScript Stories File
+### Simple Component Story (PREFERRED)
 \`\`\`typescript
 import type { Meta, StoryObj } from '@storybook/svelte';
-import { Button } from 'your-library';
+import { Button } from '${lib}';
 
 const meta: Meta<Button> = {
   title: 'Components/Button',
   component: Button,
   tags: ['autodocs'],
+  parameters: { layout: 'centered' },
   argTypes: {
-    variant: {
+    color: {
       control: 'select',
-      options: ['primary', 'secondary', 'ghost'],
+      options: ['primary', 'blue', 'alternative', 'dark', 'light', 'green', 'red'],
     },
     size: {
       control: 'select',
-      options: ['small', 'medium', 'large'],
+      options: ['xs', 'sm', 'md', 'lg', 'xl'],
     },
-    onclick: { action: 'clicked' },
   },
 };
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-// IMPORTANT: Use render with slot property for content
-export const Default: Story = {
+export const Primary: Story = {
   args: {
-    variant: 'primary',
-    size: 'medium',
+    color: 'primary',
+    size: 'md',
   },
-  render: (args) => ({
-    Component: Button,
-    props: args,
-    slot: 'Button',
-  }),
 };
 
 export const Disabled: Story = {
   args: {
-    variant: 'primary',
+    color: 'primary',
     disabled: true,
   },
-  render: (args) => ({
+};
+
+export const AllSizes: Story = {
+  render: () => ({
     Component: Button,
-    props: args,
-    slot: 'Disabled',
+    props: { color: 'blue', size: 'lg' },
   }),
 };
 \`\`\`
 
-### Svelte Stories File (for complex templates)
-\`\`\`svelte
-<!-- Card.stories.svelte -->
-<script context="module" lang="ts">
-  import type { Meta } from '@storybook/svelte';
-  import Card from '${lib}/Card.svelte';
-  import Button from 'your-library/Button.svelte';
-  import Text from '${lib}/Text.svelte';
-
-  export const meta: Meta<Card> = {
-    title: 'Components/Card',
-    component: Card,
-  };
-</script>
-
-<script lang="ts">
-  import { Story, Template } from '@storybook/svelte';
-</script>
-
-<Story name="Product Card">
-  <Card style="width: 300px">
-    <img
-      slot="media"
-      src="https://picsum.photos/300/200"
-      alt="Product"
-    />
-    <Text slot="title" variant="heading">Product Name</Text>
-    <Text>$99.00</Text>
-    <Button slot="actions" variant="primary">Add to Cart</Button>
-  </Card>
-</Story>
-
-<Story name="Simple Card">
-  <Card>
-    <Text>Simple card content</Text>
-  </Card>
-</Story>
-\`\`\`
+### Card Component Story
+\`\`\`typescript
+import type { Meta, StoryObj } from '@storybook/svelte';
+import { Card } from '${lib}';
 
-### With Reactive State
-\`\`\`svelte
-<!-- Input.stories.svelte -->
-<script context="module" lang="ts">
-  import type { Meta } from '@storybook/svelte';
-  import Input from '${lib}/Input.svelte';
-
-  export const meta: Meta<Input> = {
-    title: 'Components/Input',
-    component: Input,
-  };
-</script>
-
-<script lang="ts">
-  import { Story } from '@storybook/svelte';
-  let value = '';
-</script>
-
-<Story name="Controlled">
-  <div>
-    <Input bind:value placeholder="Type here..." />
-    <p>Value: {value}</p>
-  </div>
-</Story>
+const meta: Meta<Card> = {
+  title: 'Components/Card',
+  component: Card,
+  tags: ['autodocs'],
+  parameters: { layout: 'centered' },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    class: 'max-w-sm',
+  },
+};
+
+export const WithImage: Story = {
+  args: {
+    img: 'https://picsum.photos/300/200',
+    class: 'max-w-sm',
+  },
+};
+
+export const Horizontal: Story = {
+  args: {
+    horizontal: true,
+    class: 'max-w-xl',
+  },
+};
 \`\`\`
 
-### With Event Handling
+### Alert Component Story
 \`\`\`typescript
 import type { Meta, StoryObj } from '@storybook/svelte';
-import { action } from '@storybook/addon-actions';
-import { Button } from 'your-library';
+import { Alert } from '${lib}';
 
-const meta: Meta<Button> = {
-  title: 'Components/Button',
-  component: Button,
+const meta: Meta<Alert> = {
+  title: 'Components/Alert',
+  component: Alert,
+  tags: ['autodocs'],
+  parameters: { layout: 'centered' },
+  argTypes: {
+    color: {
+      control: 'select',
+      options: ['primary', 'blue', 'red', 'green', 'yellow', 'dark'],
+    },
+  },
 };
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const WithClickHandler: Story = {
+export const Info: Story = {
   args: {
-    variant: 'primary',
-    onclick: action('button-clicked'),
+    color: 'blue',
+  },
+};
+
+export const Success: Story = {
+  args: {
+    color: 'green',
+  },
+};
+
+export const Warning: Story = {
+  args: {
+    color: 'yellow',
+  },
+};
+
+export const Error: Story = {
+  args: {
+    color: 'red',
   },
-  render: (args) => ({
-    Component: Button,
-    props: args,
-    slot: 'Click me',
-  }),
 };
 \`\`\`
 `;

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

@@ -1 +1 @@
-{"version":3,"file":"storyValidator.d.ts","sourceRoot":"","sources":["../../story-generator/storyValidator.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,eAAe;IAC9B,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;CACd;AAED,wBAAgB,aAAa,CAAC,YAAY,EAAE,MAAM,GAAG,eAAe,EAAE,CA2CrE"}
+{"version":3,"file":"storyValidator.d.ts","sourceRoot":"","sources":["../../story-generator/storyValidator.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,eAAe;IAC9B,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;CACd;AAED,wBAAgB,aAAa,CAAC,YAAY,EAAE,MAAM,GAAG,eAAe,EAAE,CA+CrE"}

package/dist/story-generator/storyValidator.js

@@ -7,8 +7,12 @@ export function validateStory(storyContent) {
         { pattern: /UNSAFE_style\s*=\s*\{/i, message: 'The `UNSAFE_style` prop is strictly forbidden. Do not use it for any reason.' },
         { pattern: /UNSAFE_className\s*=\s*['"]/i, message: 'The `UNSAFE_className` prop is forbidden.' },
         { pattern: /<Text\s+as\s*=\s*["']h[1-6]["']/i, message: 'Text component does not support heading elements (h1-h6) in the "as" prop. Use Heading component instead.' },
-        // Remove overly strict rules - divs, imgs, and inline styles are fine in moderation
-        // Only check for actual syntax errors or patterns that would break Storybook
+        // Catch imports that don't exist in production environments
+        { pattern: /from\s+['"]@storybook\/addon-actions['"]/i, message: 'Do not import from @storybook/addon-actions. Use argTypes with action property instead: argTypes: { onClick: { action: "clicked" } }' },
+        // Catch Svelte slot property which doesn't work in modern Storybook
+        { pattern: /slot:\s*['"][^'"]+['"]/i, message: 'The slot property in render functions does not work in Svelte Storybook. Use simple args-based stories instead.' },
+        // Catch abbreviated Material icon names that will render as text instead of icons
+        { pattern: /<mat-icon>\s*(fav|ho|de|se|sta|che|add|rem|edi|sav|can|men|clo|sea)\s*<\/mat-icon>/i, message: 'Material icon name appears to be abbreviated. Use full icon names: "favorite" (not "fav"), "home" (not "ho"), "delete" (not "de"), "settings" (not "se"), etc.' },
     ];
     lines.forEach((line, index) => {
         for (const { pattern, message } of forbiddenPatterns) {