@tpitre/story-ui 4.5.2 → 4.6.0

package/dist/cli/index.js

@@ -58,6 +58,11 @@ program
         console.log(`⚠️  Port ${requestedPort} is in use. Using ${finalPort} instead.`);
     }
     const env = { ...process.env, PORT: String(finalPort) };
+    // Set memory limit to prevent heap exhaustion during vision/image processing
+    // Default to 8GB for handling large images and self-healing retry loops
+    if (!env.NODE_OPTIONS?.includes('--max-old-space-size')) {
+        env.NODE_OPTIONS = `${env.NODE_OPTIONS || ''} --max-old-space-size=8192`.trim();
+    }
     if (options.config) {
         env.STORY_UI_CONFIG_PATH = options.config;
     }

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,2DA+kBxE"}
+{"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"}

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

@@ -710,10 +710,23 @@ export async function generateStoryFromPrompt(req, res) {
         }
         // Create title for the story (clean, without hash - hash goes in id for uniqueness)
         const prettyPrompt = escapeTitleForTS(aiTitle);
-        // Title is now clean without hash - uniqueness is ensured via Storybook's id parameter
-        const cleanTitle = prettyPrompt;
+        // For NEW stories, check if title already exists and add version if needed
+        // This prevents multiple stories from stacking under the same navigation group
+        // e.g., "Navigation Bar" → "Navigation Bar v2" → "Navigation Bar v3"
+        let cleanTitle;
+        if (isActualUpdate) {
+            // For updates, keep the original title (don't version)
+            cleanTitle = prettyPrompt;
+        }
+        else {
+            // For new stories, check for duplicates and version if needed
+            cleanTitle = storyTracker.getNextVersionTitle(prettyPrompt);
+            if (cleanTitle !== prettyPrompt) {
+                logger.log(`📋 Title "${prettyPrompt}" already exists, using "${cleanTitle}" instead`);
+            }
+        }
         // Generate Storybook-compatible ID with hash for uniqueness (prevents duplicate story errors)
-        const storyIdSlug = `${prettyPrompt.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '')}-${hash}`;
+        const storyIdSlug = `${cleanTitle.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '')}-${hash}`;
         // Fix title with storyPrefix - handle multiple story formats
         // Note: (?::\s*\w+(?:<[^>]+>)?)? handles TypeScript type annotations including generics
         // e.g., "const meta: Meta = {" or "const meta: Meta<typeof Button> = {"
@@ -793,8 +806,9 @@ export async function generateStoryFromPrompt(req, res) {
             config: config
         });
         // Register with story tracker
+        // Use cleanTitle (which may include version suffix) for proper deduplication tracking
         const mapping = {
-            title: aiTitle,
+            title: cleanTitle,
             fileName: finalFileName,
             storyId,
             hash,
@@ -855,7 +869,7 @@ export async function generateStoryFromPrompt(req, res) {
             fileName: finalFileName,
             storyId,
             outPath,
-            title: aiTitle,
+            title: cleanTitle, // Use versioned title (e.g., "Navigation Bar v2")
             story: fileContents,
             storage: 'file-system',
             isUpdate: isActualUpdate,

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

@@ -1 +1 @@
-{"version":3,"file":"generateStoryStream.d.ts","sourceRoot":"","sources":["../../../mcp-server/routes/generateStoryStream.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AA0c5C,wBAAsB,6BAA6B,CAAC,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,iBA4pB9E"}
+{"version":3,"file":"generateStoryStream.d.ts","sourceRoot":"","sources":["../../../mcp-server/routes/generateStoryStream.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AA0c5C,wBAAsB,6BAA6B,CAAC,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,iBA2qB9E"}

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

@@ -816,10 +816,23 @@ export async function generateStoryFromPromptStream(req, res) {
         }
         // Create title for the story (clean, without hash - hash goes in id for uniqueness)
         const prettyPrompt = escapeTitleForTS(aiTitle);
-        // Title is now clean without hash - uniqueness is ensured via Storybook's id parameter
-        const cleanTitle = prettyPrompt;
+        // For NEW stories, check if title already exists and add version if needed
+        // This prevents multiple stories from stacking under the same navigation group
+        // e.g., "Navigation Bar" → "Navigation Bar v2" → "Navigation Bar v3"
+        let cleanTitle;
+        if (isActualUpdate) {
+            // For updates, keep the original title (don't version)
+            cleanTitle = prettyPrompt;
+        }
+        else {
+            // For new stories, check for duplicates and version if needed
+            cleanTitle = storyTracker.getNextVersionTitle(prettyPrompt);
+            if (cleanTitle !== prettyPrompt) {
+                logger.log(`📋 Title "${prettyPrompt}" already exists, using "${cleanTitle}" instead`);
+            }
+        }
         // Generate Storybook-compatible ID with hash for uniqueness (prevents duplicate story errors)
-        const storyIdSlug = `${prettyPrompt.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '')}-${hash}`;
+        const storyIdSlug = `${cleanTitle.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '')}-${hash}`;
         // Fix title with storyPrefix - handle multiple story formats
         // Note: (?::\s*\w+(?:<[^>]+>)?)? handles TypeScript type annotations including generics
         // e.g., "const meta: Meta = {" or "const meta: Meta<typeof Button> = {"
@@ -873,8 +886,9 @@ export async function generateStoryFromPromptStream(req, res) {
             config: config
         });
         // Register with story tracker
+        // Use cleanTitle (which may include version suffix) for proper deduplication tracking
         const mapping = {
-            title: aiTitle,
+            title: cleanTitle,
             fileName: finalFileName,
             storyId,
             hash,
@@ -902,7 +916,7 @@ export async function generateStoryFromPromptStream(req, res) {
         // IMPORTANT: success is FALSE when we had to create a fallback error story
         stream.sendCompletion({
             success: !isFallbackStory,
-            title: aiTitle,
+            title: cleanTitle, // Use versioned title (e.g., "Navigation Bar v2")
             fileName: finalFileName,
             storyId,
             summary: {

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;AAEvC;;;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;AA0gBD;;GAEG;AACH,wBAAsB,iBAAiB,CACrC,UAAU,EAAE,MAAM,EAClB,MAAM,EAAE,aAAa,EACrB,UAAU,EAAE,mBAAmB,EAAE,GAChC,OAAO,CAAC,MAAM,CAAC,CAqMjB;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,CAwJjB;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;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"}

package/dist/story-generator/promptGenerator.js

@@ -1,6 +1,165 @@
 import { loadConsiderations, considerationsToPrompt } from './considerationsLoader.js';
 import { DocumentationLoader } from './documentationLoader.js';
 import { getAdapterRegistry, } from './framework-adapters/index.js';
+import * as fs from 'fs';
+import * as path from 'path';
+/**
+ * Known icon packages and their common icons
+ * Used for smart detection when icon packages are installed
+ */
+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',
+            'IconSun', 'IconMoon', 'IconCloud', 'IconBolt', 'IconDroplet',
+            'IconMapPin', 'IconPhone', 'IconMessage', 'IconSend', 'IconInbox',
+            'IconArchive', 'IconTag', 'IconBookmark', 'IconFlag', 'IconAward',
+            'IconTrendingUp', 'IconTrendingDown', 'IconActivity', 'IconPieChart',
+            'IconBarChart', 'IconLineChart', 'IconDatabase', 'IconServer', 'IconCode',
+            'IconTerminal', 'IconBrandGithub', 'IconBrandTwitter', 'IconBrandLinkedin',
+            'IconWorld', 'IconGlobe', 'IconWifi', 'IconBluetooth', 'IconCpu',
+            'IconDeviceDesktop', 'IconDeviceMobile', 'IconPrinter', 'IconCamera',
+            'IconMicrophone', 'IconVolume', 'IconPlayerPlay', 'IconPlayerPause',
+        ],
+        importStyle: 'named',
+        description: 'Tabler Icons - Free and open source icons (Mantine recommended)',
+    },
+    {
+        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',
+            'File', 'Image', 'Video', 'Music', 'Link',
+            'ExternalLink', 'MoreHorizontal', 'MoreVertical', 'GripVertical',
+            'Sun', 'Moon', 'Cloud', 'Zap', 'Droplet',
+            'MapPin', 'Phone', 'MessageSquare', 'Send', 'Inbox',
+        ],
+        importStyle: 'named',
+        description: 'Lucide Icons - Beautiful & consistent icons',
+    },
+    {
+        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',
+            'PencilIcon', 'TrashIcon', 'ArrowDownTrayIcon', 'ArrowUpTrayIcon', 'ShareIcon',
+            'FunnelIcon', 'ArrowPathIcon', 'EyeIcon', 'EyeSlashIcon',
+            'LockClosedIcon', 'LockOpenIcon', 'ClipboardIcon', 'FolderIcon',
+            'DocumentIcon', 'PhotoIcon', 'VideoCameraIcon', 'MusicalNoteIcon', 'LinkIcon',
+        ],
+        importStyle: 'named',
+        description: 'Heroicons - Beautiful hand-crafted SVG icons by Tailwind',
+    },
+    {
+        name: 'react-icons',
+        importPath: 'react-icons/fi', // Feather icons subset - most common
+        commonIcons: [
+            'FiHome', 'FiSettings', 'FiUser', 'FiSearch', 'FiMenu',
+            'FiBell', 'FiMail', 'FiCalendar', 'FiClock', 'FiStar',
+            'FiHeart', 'FiPlus', 'FiMinus', 'FiX', 'FiCheck',
+            'FiChevronRight', 'FiChevronLeft', 'FiChevronDown', 'FiChevronUp',
+            'FiArrowRight', 'FiArrowLeft', 'FiArrowUp', 'FiArrowDown',
+            'FiEdit', 'FiTrash', 'FiDownload', 'FiUpload', 'FiShare',
+            'FiFilter', 'FiRefreshCw', 'FiEye', 'FiEyeOff',
+        ],
+        importStyle: 'named',
+        description: 'React Icons - Popular icon packs as React components',
+    },
+    {
+        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',
+            'ArrowRight', 'ArrowLeft', 'ArrowUp', 'ArrowDown',
+            'PencilSimple', 'Trash', 'DownloadSimple', 'UploadSimple', 'ShareNetwork',
+            'Funnel', 'ArrowsClockwise', 'Eye', 'EyeSlash',
+        ],
+        importStyle: 'named',
+        description: 'Phosphor Icons - Flexible icon family',
+    },
+];
+/**
+ * Detects installed icon packages by checking package.json
+ * Returns the first detected icon package info, or null if none found
+ */
+function detectInstalledIconPackage(projectPath) {
+    const cwd = projectPath || process.cwd();
+    const packageJsonPath = path.join(cwd, 'package.json');
+    try {
+        if (!fs.existsSync(packageJsonPath)) {
+            return null;
+        }
+        const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8'));
+        const allDeps = {
+            ...packageJson.dependencies,
+            ...packageJson.devDependencies,
+        };
+        // Check each known icon package
+        for (const iconPackage of KNOWN_ICON_PACKAGES) {
+            if (allDeps[iconPackage.name]) {
+                return iconPackage;
+            }
+        }
+        return null;
+    }
+    catch (error) {
+        // If we can't read package.json, assume no icon package
+        return null;
+    }
+}
+/**
+ * Generates icon usage instructions for the prompt
+ * Uses smart detection to enable real icons when a supported icon package is installed
+ */
+function generateIconInstructions(components, projectPath) {
+    const instructions = [];
+    // First, check if an icon package is installed in the project
+    const installedIconPackage = detectInstalledIconPackage(projectPath);
+    if (installedIconPackage) {
+        // Icon package detected - enable icon usage with the installed package
+        const sampleIcons = installedIconPackage.commonIcons.slice(0, 20).join(', ');
+        instructions.push('', '✅ ICON LIBRARY AVAILABLE ✅', `You have ${installedIconPackage.name} installed in this project.`, `${installedIconPackage.description}`, '', '📦 How to use icons:', `   Import path: import { IconName } from '${installedIconPackage.importPath}';`, `   Example icons: ${sampleIcons}`, '', '🎯 ICON BEST PRACTICES:', '   - Use icons to enhance visual clarity and user experience', '   - Common use cases: navigation, actions, status indicators, decorative elements', '   - Icons should complement text, not replace it entirely for accessibility', '   - Use consistent icon sizing (typically 16-24px for inline, 24-48px for prominent)', '', '⚠️ IMPORTANT:', `   - ONLY import icons from '${installedIconPackage.importPath}'`, '   - Do NOT import from other icon libraries not installed in the project', '   - If you need an icon that may not exist, use a similar common icon from the list above', '');
+        return instructions;
+    }
+    // No icon package installed - check if design system has icon components
+    const iconComponents = components.filter(c => c.name && typeof c.name === 'string' &&
+        (c.name.toLowerCase().includes('icon') || c.name === 'Icon' || c.name === 'v-icon' || c.name === 'mat-icon' || c.name === 'sl-icon'));
+    if (iconComponents.length > 0) {
+        // Design system has icon support - allow those, prohibit external libraries
+        const allowedIconNames = iconComponents.map(c => c.name).join(', ');
+        instructions.push('', '🔶 ICON USAGE RULES 🔶', `Your design system includes icon components: ${allowedIconNames}`, '✅ You MAY use these icon components from the Available components list', '🚫 Do NOT import from external icon libraries:', '   - @tabler/icons-react, @tabler/icons', '   - react-icons, lucide-react, @heroicons/react', '   - @fortawesome/react-fontawesome, @phosphor-icons/react', '   - Any other external icon package', 'If you need icons beyond what the design system provides, use Unicode symbols (→ ✓ + ×) or text labels instead.', '');
+    }
+    else {
+        // No icon components discovered - prohibit all icon imports
+        instructions.push('', '🔴 ICON IMPORT RESTRICTION 🔴', 'This design system does not include icon components in the available components list.', '🚫 Do NOT import from ANY icon library:', '   - @tabler/icons-react, @tabler/icons', '   - react-icons, lucide-react, @heroicons/react', '   - @fortawesome/react-fontawesome, @phosphor-icons/react', '   - @mui/icons-material, @chakra-ui/icons', '   - Any other icon package', '✅ Instead, use:', '   - Unicode symbols: → ✓ ✗ + − × ÷ • ★ ♦ ▶ ◀ ▲ ▼', '   - Text labels: "Add", "Remove", "Edit", "Delete"', '   - Badge or Button components with text content', 'Icons are NOT in the available components list and WILL cause import errors.', '');
+    }
+    return instructions;
+}
 /**
  * Generates a comprehensive AI prompt based on the configuration and discovered components
  */
@@ -177,6 +336,23 @@ ANY component not in that list DOES NOT EXIST and will cause import errors.
 Before importing any component, verify it exists in the Available components list.
 If a component is not listed, DO NOT use it - choose an alternative from the available list.
 
+🎨 CREATIVE APPROXIMATION - WHEN COMPONENTS DON'T EXIST 🎨
+If the user asks for a UI that requires components NOT in your available list (like Calendar, Chart, Map, etc.):
+**DO NOT fail or refuse** - instead, CREATIVELY APPROXIMATE the UI using available components!
+
+Common approximation strategies:
+• Calendar/DatePicker → Use Grid/SimpleGrid with Text for days, Badge for selected dates
+• Charts/Graphs → Use Progress bars, RingProgress, or Stack of colored Box components
+• Timeline → Use Stack with Card/Paper for each event, connecting lines with Divider
+• Carousel/Slider → Use Group with Image components and Button for navigation
+• Data Tables → Use Table components, or Stack of Card/Paper rows
+• Tree View → Use nested Stack/Accordion with List or NavLink components
+• Star Ratings → Use Group of ThemeIcon or inline SVG stars
+• Maps → Use Image with a static map placeholder
+
+The goal is VISUAL SIMILARITY, not exact functionality. Users are exploring design possibilities.
+They want to see what a UI COULD look like - be creative with basic layout components!
+
 🔴 IMPORT PATH RULE - MANDATORY 🔴
 ALWAYS use the EXACT import path shown in parentheses after each component name.
 For example: If the Available components list shows "Button (import from 'antd')",
@@ -562,18 +738,9 @@ export async function buildClaudePrompt(userPrompt, config, components) {
             });
         });
     }
-    // Smart icon handling - allow design system icons, prohibit external libraries
-    const iconComponents = components.filter(c => c.name && typeof c.name === 'string' &&
-        (c.name.toLowerCase().includes('icon') || c.name === 'Icon' || c.name === 'v-icon' || c.name === 'mat-icon' || c.name === 'sl-icon'));
-    if (iconComponents.length > 0) {
-        // Design system has icon support - allow those, prohibit external libraries
-        const allowedIconNames = iconComponents.map(c => c.name).join(', ');
-        promptParts.push('', '🔶 ICON USAGE RULES 🔶', `Your design system includes icon components: ${allowedIconNames}`, '✅ You MAY use these icon components from the Available components list', '🚫 Do NOT import from external icon libraries:', '   - @tabler/icons-react, @tabler/icons', '   - react-icons, lucide-react, @heroicons/react', '   - @fortawesome/react-fontawesome, @phosphor-icons/react', '   - Any other external icon package', 'If you need icons beyond what the design system provides, use Unicode symbols (→ ✓ + ×) or text labels instead.', '');
-    }
-    else {
-        // No icon components discovered - prohibit all icon imports
-        promptParts.push('', '🔴 ICON IMPORT RESTRICTION 🔴', 'This design system does not include icon components in the available components list.', '🚫 Do NOT import from ANY icon library:', '   - @tabler/icons-react, @tabler/icons', '   - react-icons, lucide-react, @heroicons/react', '   - @fortawesome/react-fontawesome, @phosphor-icons/react', '   - @mui/icons-material, @chakra-ui/icons', '   - Any other icon package', '✅ Instead, use:', '   - Unicode symbols: → ✓ ✗ + − × ÷ • ★ ♦ ▶ ◀ ▲ ▼', '   - Text labels: "Add", "Remove", "Edit", "Delete"', '   - Badge or Button components with text content', 'Icons are NOT in the available components list and WILL cause import errors.', '');
-    }
+    // Smart icon handling - detect installed icon packages or fall back to design system icons
+    const iconInstructions = generateIconInstructions(components);
+    promptParts.push(...iconInstructions);
     // Reinforce NO children in args rule
     promptParts.push('', '🔴 CRITICAL REMINDER: NEVER use children in args 🔴', 'Always use render functions for any layout or component composition.', '');
     // Determine framework from config for rules section
@@ -698,18 +865,9 @@ export async function buildFrameworkAwarePrompt(userPrompt, config, components,
             });
         });
     }
-    // Smart icon handling - allow design system icons, prohibit external libraries
-    const iconComponents = components.filter(c => c.name && typeof c.name === 'string' &&
-        (c.name.toLowerCase().includes('icon') || c.name === 'Icon' || c.name === 'v-icon' || c.name === 'mat-icon' || c.name === 'sl-icon'));
-    if (iconComponents.length > 0) {
-        // Design system has icon support - allow those, prohibit external libraries
-        const allowedIconNames = iconComponents.map(c => c.name).join(', ');
-        promptParts.push('', '🔶 ICON USAGE RULES 🔶', `Your design system includes icon components: ${allowedIconNames}`, '✅ You MAY use these icon components from the Available components list', '🚫 Do NOT import from external icon libraries:', '   - @tabler/icons-react, @tabler/icons', '   - react-icons, lucide-react, @heroicons/react', '   - @fortawesome/react-fontawesome, @phosphor-icons/react', '   - Any other external icon package', 'If you need icons beyond what the design system provides, use Unicode symbols (→ ✓ + ×) or text labels instead.', '');
-    }
-    else {
-        // No icon components discovered - prohibit all icon imports
-        promptParts.push('', '🔴 ICON IMPORT RESTRICTION 🔴', 'This design system does not include icon components in the available components list.', '🚫 Do NOT import from ANY icon library:', '   - @tabler/icons-react, @tabler/icons', '   - react-icons, lucide-react, @heroicons/react', '   - @fortawesome/react-fontawesome, @phosphor-icons/react', '   - @mui/icons-material, @chakra-ui/icons', '   - Any other icon package', '✅ Instead, use:', '   - Unicode symbols: → ✓ ✗ + − × ÷ • ★ ♦ ▶ ◀ ▲ ▼', '   - Text labels: "Add", "Remove", "Edit", "Delete"', '   - Badge or Button components with text content', 'Icons are NOT in the available components list and WILL cause import errors.', '');
-    }
+    // Smart icon handling - detect installed icon packages or fall back to design system icons
+    const iconInstructions2 = generateIconInstructions(components);
+    promptParts.push(...iconInstructions2);
     // Add framework-specific rules
     const frameworkType = generated.framework.componentFramework;
     const frameworkRules = getFrameworkSpecificRules(frameworkType);

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

@@ -1 +1 @@
-{"version":3,"file":"selfHealingLoop.d.ts","sourceRoot":"","sources":["../../story-generator/selfHealingLoop.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"selfHealingLoop.d.ts","sourceRoot":"","sources":["../../story-generator/selfHealingLoop.ts"],"names":[],"mappings":"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"}

package/dist/story-generator/selfHealingLoop.js

@@ -196,19 +196,47 @@ export function buildSelfHealingPrompt(originalCode, errors, attempt, options) {
         errors.patternErrors.forEach((e) => sections.push(`- ${e}`));
         sections.push('');
     }
-    // Import errors section
+    // Import errors section - with approximation guidance
     if (errors.importErrors.length > 0) {
-        sections.push('### Import Errors');
-        sections.push(`These components do not exist in "${options.importPath}":`);
+        sections.push('### Import Errors - MUST USE AVAILABLE COMPONENTS');
+        sections.push('');
+        sections.push('🚨 **CRITICAL: DO NOT try to import these components again - they DO NOT EXIST:**');
         errors.importErrors.forEach((e) => sections.push(`- ${e}`));
         sections.push('');
+        sections.push('### HOW TO FIX: Approximate the UI with Available Components');
+        sections.push('');
+        sections.push('You MUST recreate the same visual appearance using ONLY the available components listed below.');
+        sections.push('Think creatively - almost any UI can be approximated with basic layout and display components.');
+        sections.push('');
+        sections.push('**Common approximation strategies:**');
+        sections.push('- **Calendar/DatePicker** → Use Grid/SimpleGrid with Text components to create a calendar-like grid layout');
+        sections.push('- **Chart/Graph** → Use Progress, RingProgress, or Stack with colored Box components');
+        sections.push('- **Timeline** → Use Stack/Timeline with Card or Paper components for each event');
+        sections.push('- **Carousel/Slider** → Use Grid or Group with Image and navigation Button components');
+        sections.push('- **DataTable** → Use Table components or Stack of Card/Paper rows');
+        sections.push('- **TreeView** → Use nested Stack/Accordion with NavLink or List components');
+        sections.push('- **Rating/Stars** → Use Group of ActionIcon or ThemeIcon components');
+        sections.push('- **Map** → Use Image with a placeholder map image and overlaid markers using Box');
+        sections.push('');
+        sections.push('**The goal is visual similarity, not exact functionality.**');
+        sections.push('Users want to see what a UI could look like - use basic components creatively!');
+        sections.push('');
         // Show available components (design-system agnostic)
         if (options.availableComponents.length > 0) {
-            sections.push('**Available components include:**');
-            const displayComponents = options.availableComponents.slice(0, 20);
-            sections.push(displayComponents.join(', '));
-            if (options.availableComponents.length > 20) {
-                sections.push(`... and ${options.availableComponents.length - 20} more`);
+            sections.push('**Available components you MUST use instead:**');
+            // Group by likely use case for easier reference
+            const layoutComponents = options.availableComponents.filter(c => /^(Box|Stack|Group|Grid|SimpleGrid|Flex|Container|Center|Space|Paper|Card|Divider)$/i.test(c));
+            const displayComponents = options.availableComponents.filter(c => /^(Text|Title|Badge|Avatar|Image|ThemeIcon|ActionIcon|Button|Anchor)$/i.test(c));
+            const otherComponents = options.availableComponents.filter(c => !layoutComponents.includes(c) && !displayComponents.includes(c));
+            if (layoutComponents.length > 0) {
+                sections.push(`- **Layout:** ${layoutComponents.join(', ')}`);
+            }
+            if (displayComponents.length > 0) {
+                sections.push(`- **Display:** ${displayComponents.join(', ')}`);
+            }
+            if (otherComponents.length > 0) {
+                const displayOthers = otherComponents.slice(0, 30);
+                sections.push(`- **Other:** ${displayOthers.join(', ')}${otherComponents.length > 30 ? ` ... and ${otherComponents.length - 30} more` : ''}`);
             }
             sections.push('');
         }
@@ -224,18 +252,21 @@ export function buildSelfHealingPrompt(originalCode, errors, attempt, options) {
     sections.push('1. Fix ALL errors listed above');
     sections.push('2. Keep the same component structure and layout');
     sections.push('3. Do NOT add new features - only fix the errors');
+    sections.push('4. **CRITICAL: Escape apostrophes in title strings** - Use `\\\'` not `\'`');
+    sections.push('   Example: `title: \'Women\\\'s Athletic Dashboard\'` NOT `title: \'Women\'s Athletic Dashboard\'`');
+    sections.push('5. Do NOT duplicate title segments - "Dashboard Dashboard" is WRONG');
     if (options.framework === 'svelte') {
-        sections.push('4. Use proper Svelte 5 syntax (class=, onclick=, NOT on:click=)');
-        sections.push('5. NEVER nest a component inside itself: <Comp><Comp>X</Comp></Comp> is WRONG! Use <Comp>X</Comp>');
-        sections.push(`6. Only import from ROOT: import { Comp } from "${options.importPath}" - NEVER use deep paths like "${options.importPath}/dist/..." or "${options.importPath}/components/..."`);
-        sections.push(`7. Return the COMPLETE corrected code in a \`\`\`svelte code block`);
-        sections.push('8. Do NOT include any explanation - just the corrected code block');
+        sections.push('6. Use proper Svelte 5 syntax (class=, onclick=, NOT on:click=)');
+        sections.push('7. NEVER nest a component inside itself: <Comp><Comp>X</Comp></Comp> is WRONG! Use <Comp>X</Comp>');
+        sections.push(`8. Only import from ROOT: import { Comp } from "${options.importPath}" - NEVER use deep paths like "${options.importPath}/dist/..." or "${options.importPath}/components/..."`);
+        sections.push(`9. Return the COMPLETE corrected code in a \`\`\`svelte code block`);
+        sections.push('10. Do NOT include any explanation - just the corrected code block');
     }
     else {
-        sections.push('4. Ensure all JSX elements are properly opened and closed');
-        sections.push(`5. Only import components that exist in "${options.importPath}"`);
-        sections.push(`6. Return the COMPLETE corrected code in a \`\`\`${codeBlockLang} code block`);
-        sections.push('7. Do NOT include any explanation - just the corrected code block');
+        sections.push('6. Ensure all JSX elements are properly opened and closed');
+        sections.push(`7. Only import components that exist in "${options.importPath}"`);
+        sections.push(`8. Return the COMPLETE corrected code in a \`\`\`${codeBlockLang} code block`);
+        sections.push('9. Do NOT include any explanation - just the corrected code block');
     }
     return sections.join('\n');
 }

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

@@ -44,5 +44,17 @@ export declare class StoryTracker {
      * Clean up orphaned mappings (stories that no longer exist)
      */
     cleanupOrphaned(generatedStoriesPath: string): number;
+    /**
+     * Get the next available version for a title
+     * If "Navigation Bar" exists, returns "Navigation Bar v2"
+     * If "Navigation Bar v2" exists, returns "Navigation Bar v3", etc.
+     *
+     * This is only used for NEW stories (not updates to existing stories)
+     */
+    getNextVersionTitle(baseTitle: string): string;
+    /**
+     * Escape special regex characters in a string
+     */
+    private escapeRegex;
 }
 //# sourceMappingURL=storyTracker.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"storyTracker.d.ts","sourceRoot":"","sources":["../../story-generator/storyTracker.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAEtD,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,qBAAa,YAAY;IACvB,OAAO,CAAC,WAAW,CAAS;IAC5B,OAAO,CAAC,QAAQ,CAA4B;gBAEhC,MAAM,EAAE,aAAa;IAMjC;;OAEG;IACH,OAAO,CAAC,YAAY;IAgBpB;;OAEG;IACH,OAAO,CAAC,YAAY;IASpB;;OAEG;IACH,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,YAAY,GAAG,SAAS;IAkBpD;;OAEG;IACH,YAAY,CAAC,MAAM,EAAE,MAAM,GAAG,YAAY,GAAG,SAAS;IA4CtD;;OAEG;IACH,aAAa,CAAC,OAAO,EAAE,YAAY,GAAG,IAAI;IAwB1C;;OAEG;IACH,WAAW,CAAC,eAAe,EAAE,MAAM,GAAG,OAAO;IAqB7C;;OAEG;IACH,cAAc,IAAI,YAAY,EAAE;IAIhC;;OAEG;IACH,eAAe,CAAC,oBAAoB,EAAE,MAAM,GAAG,MAAM;CAiBtD"}
+{"version":3,"file":"storyTracker.d.ts","sourceRoot":"","sources":["../../story-generator/storyTracker.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAEtD,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,qBAAa,YAAY;IACvB,OAAO,CAAC,WAAW,CAAS;IAC5B,OAAO,CAAC,QAAQ,CAA4B;gBAEhC,MAAM,EAAE,aAAa;IAMjC;;OAEG;IACH,OAAO,CAAC,YAAY;IAgBpB;;OAEG;IACH,OAAO,CAAC,YAAY;IASpB;;OAEG;IACH,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,YAAY,GAAG,SAAS;IAkBpD;;OAEG;IACH,YAAY,CAAC,MAAM,EAAE,MAAM,GAAG,YAAY,GAAG,SAAS;IA4CtD;;OAEG;IACH,aAAa,CAAC,OAAO,EAAE,YAAY,GAAG,IAAI;IAwB1C;;OAEG;IACH,WAAW,CAAC,eAAe,EAAE,MAAM,GAAG,OAAO;IAqB7C;;OAEG;IACH,cAAc,IAAI,YAAY,EAAE;IAIhC;;OAEG;IACH,eAAe,CAAC,oBAAoB,EAAE,MAAM,GAAG,MAAM;IAkBrD;;;;;;OAMG;IACH,mBAAmB,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM;IAoC9C;;OAEG;IACH,OAAO,CAAC,WAAW;CAGpB"}

package/dist/story-generator/storyTracker.js

@@ -163,4 +163,46 @@ export class StoryTracker {
         }
         return removed;
     }
+    /**
+     * Get the next available version for a title
+     * If "Navigation Bar" exists, returns "Navigation Bar v2"
+     * If "Navigation Bar v2" exists, returns "Navigation Bar v3", etc.
+     *
+     * This is only used for NEW stories (not updates to existing stories)
+     */
+    getNextVersionTitle(baseTitle) {
+        if (!baseTitle || typeof baseTitle !== 'string') {
+            return baseTitle;
+        }
+        const normalizedBase = baseTitle.toLowerCase().trim();
+        // Check if the exact title already exists
+        if (!this.mappings.has(normalizedBase)) {
+            return baseTitle; // No conflict, use as-is
+        }
+        // Find the highest existing version
+        let highestVersion = 1;
+        // Check for base title (v1 implicitly)
+        if (this.mappings.has(normalizedBase)) {
+            highestVersion = 1;
+        }
+        // Check for versioned titles (v2, v3, etc.)
+        for (const existingTitle of this.mappings.keys()) {
+            // Match patterns like "title v2", "title v3", etc.
+            const versionMatch = existingTitle.match(new RegExp(`^${this.escapeRegex(normalizedBase)}\\s+v(\\d+)$`, 'i'));
+            if (versionMatch) {
+                const version = parseInt(versionMatch[1], 10);
+                if (version > highestVersion) {
+                    highestVersion = version;
+                }
+            }
+        }
+        // Return the next version
+        return `${baseTitle} v${highestVersion + 1}`;
+    }
+    /**
+     * Escape special regex characters in a string
+     */
+    escapeRegex(str) {
+        return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    }
 }

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,CAiErE"}
+{"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,CA6DrE"}

package/dist/story-generator/storyValidator.js

@@ -11,14 +11,10 @@ export function validateStory(storyContent) {
         { 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.' },
         // Catch Angular TS4111 patterns - "this.property" state management in render functions
         { pattern: /this\.\w+\s*=\s*\$?event\./i, message: 'Do not use "this.property = event.value" in Angular stories. This causes TS4111 errors. Use argTypes with action property for events and create separate stories for different states.' },
         { pattern: /this\.\w+\+\+/i, message: 'Do not use "this.property++" in Angular stories. This causes TS4111 errors. Use argTypes with action property for events instead of managing state.' },
         { pattern: /this\.\w+--/i, message: 'Do not use "this.property--" in Angular stories. This causes TS4111 errors. Use argTypes with action property for events instead of managing state.' },
-        // Catch flowbite-svelte deep path imports that break in production
-        { pattern: /from\s+['"]flowbite-svelte\/[^'"]+['"]/i, message: 'Do not use deep path imports for flowbite-svelte. Use named exports from root: import { Component } from "flowbite-svelte"' },
     ];
     lines.forEach((line, index) => {
         for (const { pattern, message } of forbiddenPatterns) {

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

@@ -1 +1 @@
-{"version":3,"file":"validateStory.d.ts","sourceRoot":"","sources":["../../story-generator/validateStory.ts"],"names":[],"mappings":"AAKA,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,GAAE,MAAoB,EAAE,MAAM,CAAC,EAAE,GAAG,GAAG,gBAAgB,CAsH9G;AA2hBD;;;GAGG;AACH,wBAAgB,2BAA2B,CAAC,UAAU,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,GAAG,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,gBAAgB,CAoFjH;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,GAAG,MAAM,CA+BvE"}
+{"version":3,"file":"validateStory.d.ts","sourceRoot":"","sources":["../../story-generator/validateStory.ts"],"names":[],"mappings":"AAKA,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,GAAE,MAAoB,EAAE,MAAM,CAAC,EAAE,GAAG,GAAG,gBAAgB,CAsH9G;AAgrBD;;;GAGG;AACH,wBAAgB,2BAA2B,CAAC,UAAU,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,GAAG,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,gBAAgB,CAoFjH;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,GAAG,MAAM,CA+BvE"}