vibe-design-system 2.8.66 → 2.8.67

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vibe-design-system",
-  "version": "2.8.66",
+  "version": "2.8.67",
   "description": "Auto-generate design systems for vibe coding projects",
   "homepage": "https://vibedesign.tech",
   "repository": {

package/vds-core-template/story-generator.mjs

@@ -2505,6 +2505,7 @@ function writeFoundationsStories(foundations) {
       .slice(0, 60); // cap to avoid extremely long stories
 
     const colorsContent = [
+      "import React from \"react\";",
       "import type { Meta, StoryObj } from \"@storybook/react\";",
       "",
       "const meta = { title: \"Foundations/Colors\", parameters: { layout: \"fullscreen\" } } satisfies Meta;",
@@ -2630,6 +2631,7 @@ function writeFoundationsStories(foundations) {
     const sansFamily = typo.fontSans || typo.tailwindSans || typo.body || "system-ui, sans-serif";
 
     const typoContent = [
+      "import React from \"react\";",
       "import type { Meta, StoryObj } from \"@storybook/react\";",
       "",
       "const meta = { title: \"Foundations/Typography\", parameters: { layout: \"fullscreen\" } } satisfies Meta;",
@@ -2790,6 +2792,7 @@ function writeFoundationsStories(foundations) {
 
   const brandContent =
     [
+      "import React from \"react\";",
       "import type { Meta, StoryObj } from \"@storybook/react\";",
       "",
       "const meta = { title: \"Foundations/Brand\", parameters: { layout: \"fullscreen\" } } satisfies Meta;",
@@ -2823,6 +2826,7 @@ function writeFoundationsStories(foundations) {
 
     const iconsContent = [
       "import { useState } from \"react\";",
+      "import React from \"react\";",
       "import type { Meta, StoryObj } from \"@storybook/react\";",
       "import * as Lucide from \"lucide-react\";",
       "",
@@ -2997,6 +3001,7 @@ function writeFoundationsStories(foundations) {
     const containerCount = gridSystem.containerCount || 0;
 
     const gridContent = [
+      "import React from \"react\";",
       "import type { Meta, StoryObj } from \"@storybook/react\";",
       "",
       "const meta = { title: \"Foundations/Grid\", parameters: { layout: \"fullscreen\" } } satisfies Meta;",
@@ -3186,6 +3191,7 @@ function writeFoundationsStories(foundations) {
     }));
     const buttonsContent =
       [
+        "import React from \"react\";",
         "import type { Meta, StoryObj } from \"@storybook/react\";",
         "",
         "const meta = { title: \"Foundations/Button Usage\", parameters: { layout: \"fullscreen\" } } satisfies Meta;",
@@ -3261,6 +3267,7 @@ function writeFoundationsStories(foundations) {
 
     const usedSpacing = (foundations?.tokenUsage?.spacing || []).slice(0, 16);
     const spacingContent = [
+      "import React from \"react\";",
       "import type { Meta, StoryObj } from \"@storybook/react\";",
       "",
       "const meta = { title: \"Foundations/Spacing & Layout\", parameters: { layout: \"fullscreen\" } } satisfies Meta;",
@@ -3368,6 +3375,7 @@ function writeFoundationsStories(foundations) {
     const zIndexSemantics = { "z-0": "Base", "z-10": "Low / hover", "z-20": "Dropdown", "z-30": "Sticky", "z-40": "Fixed", "z-50": "Modal / overlay" };
 
     const elevationContent = [
+      "import React from \"react\";",
       "import type { Meta, StoryObj } from \"@storybook/react\";",
       "",
       "const meta = { title: \"Foundations/Elevation & Shadows\", parameters: { layout: \"fullscreen\" } } satisfies Meta;",
@@ -3490,6 +3498,7 @@ function writeFoundationsStories(foundations) {
     const usedRadius = (foundations?.tokenUsage?.radius || []).slice(0, 12);
 
     const borderContent = [
+      "import React from \"react\";",
       "import type { Meta, StoryObj } from \"@storybook/react\";",
       "",
       "const meta = { title: \"Foundations/Border & Radius\", parameters: { layout: \"fullscreen\" } } satisfies Meta;",
@@ -3593,6 +3602,7 @@ function writeFoundationsStories(foundations) {
     const motionChips = (foundations?.tokenUsage?.animations || []).slice(0, 24);
 
     const motionContent = [
+      "import React from \"react\";",
       "import type { Meta, StoryObj } from \"@storybook/react\";",
       "import { useState, useEffect } from \"react\";",
       "",
@@ -3743,6 +3753,7 @@ function writeComponentSuggestionsStory(componentSuggestions) {
   }));
   const content =
     [
+      "import React from \"react\";",
       "import type { Meta, StoryObj } from \"@storybook/react\";",
       "import { useState } from \"react\";",
       "",
@@ -4089,6 +4100,7 @@ function writeComponentInventoryStory(components, foundations) {
   )].length;
 
   const content = [
+    `import React from "react";`,
     `import type { Meta, StoryObj } from "@storybook/react";`,
     ``,
     `const meta = { title: "Foundations/Component Inventory", parameters: { layout: "fullscreen" } } satisfies Meta;`,
@@ -4227,6 +4239,7 @@ function writeChangelogStory(changelog) {
   const entries = Array.isArray(changelog) ? changelog.map((e) => ({ version: e.version, date: e.date, changes: e.changes || [] })) : [];
   const content =
     [
+      "import React from \"react\";",
       "import type { Meta, StoryObj } from \"@storybook/react\";",
       "",
       "const meta = { title: \"Foundations/Changelog\", tags: [\"autodocs\"], parameters: { layout: \"fullscreen\" } } satisfies Meta;",