vibe-design-system 2.8.22 → 2.8.23

package/package.json

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

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

@@ -1608,37 +1608,65 @@ function writeFoundationsStories(foundations) {
       : rawIcons.map((name) => ({ name, total: 0, topFiles: [] }));
 
     const iconsContent = [
+      "import { useState } from \"react\";",
       "import type { Meta, StoryObj } from \"@storybook/react\";",
       "import * as Lucide from \"lucide-react\";",
       "",
       "const meta = { title: \"Foundations/Icons\" } satisfies Meta;",
       "export default meta;",
       "type Story = StoryObj;",
+      "type IconEntry = { name: string; total: number; topFiles: string[] };",
       "",
-      `const iconData = ${JSON.stringify(iconData, null, 2)};`,
+      `const iconData: IconEntry[] = ${JSON.stringify(iconData, null, 2)};`,
       "",
       "export const Default: Story = {",
       "  render: () => {",
+      "    const [copied, setCopied] = useState<string | null>(null);",
       "    const usedIcons = iconData.filter((d) => d.total > 0);",
       "    const unusedIcons = iconData.filter((d) => d.total === 0);",
-      "    const renderCard = (d: { name: string; total: number; topFiles: string[] }) => {",
+      "",
+      "    const handleCopy = (name: string) => {",
+      "      navigator.clipboard?.writeText(name).then(() => {",
+      "        setCopied(name);",
+      "        setTimeout(() => setCopied(null), 1400);",
+      "      });",
+      "    };",
+      "",
+      "    const renderCard = (d: IconEntry, faded = false) => {",
       "      const Icon = (Lucide as Record<string, any>)[d.name];",
       "      if (!Icon) return null;",
+      "      const isCopied = copied === d.name;",
       "      return (",
-      "        <div key={d.name} style={{ display: \"flex\", flexDirection: \"column\", gap: 8, padding: 14,",
-      "          border: \"1px solid #1e293b\", borderRadius: 10, background: \"#0f172a\" }}>",
+      "        <div",
+      "          key={d.name}",
+      "          onClick={() => handleCopy(d.name)}",
+      "          title={`Click to copy: ${d.name}`}",
+      "          style={{",
+      "            display: \"flex\", flexDirection: \"column\", gap: 10, padding: 14,",
+      "            border: `1px solid ${isCopied ? \"#4ade80\" : \"#1e293b\"}`,",
+      "            borderRadius: 10,",
+      "            background: isCopied ? \"#052e16\" : \"#0f172a\",",
+      "            cursor: \"pointer\",",
+      "            opacity: faded ? 0.4 : 1,",
+      "            transition: \"border-color 0.15s, background 0.15s\",",
+      "          }}",
+      "        >",
       "          <div style={{ display: \"flex\", justifyContent: \"space-between\", alignItems: \"flex-start\" }}>",
-      "            <Icon size={22} strokeWidth={1.5} />",
+      "            <div style={{ padding: 8, background: \"#1e293b\", borderRadius: 8, display: \"flex\", alignItems: \"center\", justifyContent: \"center\" }}>",
+      "              <Icon size={22} strokeWidth={1.75} color=\"#94a3b8\" />",
+      "            </div>",
       "            {d.total > 0 && (",
       "              <span style={{ fontSize: 11, fontWeight: 600, background: \"#1e293b\",",
-      "                color: \"#94a3b8\", padding: \"2px 7px\", borderRadius: 999 }}>",
+      "                color: \"#94a3b8\", padding: \"2px 7px\", borderRadius: 999, alignSelf: \"flex-start\" }}>",
       "                ×{d.total}",
       "              </span>",
       "            )}",
       "          </div>",
-      "          <span style={{ fontSize: 12, fontWeight: 500, color: \"#e2e8f0\" }}>{d.name}</span>",
+      "          <span style={{ fontSize: 12, fontWeight: 500, color: isCopied ? \"#4ade80\" : \"#e2e8f0\" }}>",
+      "            {isCopied ? \"Copied!\" : d.name}",
+      "          </span>",
       "          {d.topFiles.length > 0 && (",
-      "            <div style={{ display: \"flex\", flexWrap: \"wrap\", gap: 4, marginTop: 2 }}>",
+      "            <div style={{ display: \"flex\", flexWrap: \"wrap\", gap: 4 }}>",
       "              {d.topFiles.map((f) => (",
       "                <span key={f} style={{ fontSize: 10, background: \"#1e293b\", color: \"#64748b\",",
       "                  padding: \"1px 6px\", borderRadius: 4 }}>{f}</span>",
@@ -1655,7 +1683,7 @@ function writeFoundationsStories(foundations) {
       "            {iconData.length} icons imported from <code style={{ fontSize: 12 }}>lucide-react</code> in app code.",
       "          </p>",
       "          <p style={{ margin: 0, fontSize: 12, color: \"#475569\" }}>",
-      "            Sorted by usage frequency · Badge shows total JSX usages · Chips show top components.",
+      "            Sorted by usage frequency · Badge = total JSX usages · Click any card to copy the icon name.",
       "          </p>",
       "        </div>",
       "        {usedIcons.length > 0 && (",
@@ -1665,8 +1693,8 @@ function writeFoundationsStories(foundations) {
       "              Active — {usedIcons.length}",
       "            </p>",
       "            <div style={{ display: \"grid\", gridTemplateColumns: \"repeat(auto-fill, minmax(160px, 1fr))\",",
-      "              gap: 10, marginBottom: 32 }}>",
-      "              {usedIcons.map(renderCard)}",
+      "              gap: 10, marginBottom: 36 }}>",
+      "              {usedIcons.map((d) => renderCard(d, false))}",
       "            </div>",
       "          </>",
       "        )}",
@@ -1674,11 +1702,11 @@ function writeFoundationsStories(foundations) {
       "          <>",
       "            <p style={{ margin: \"0 0 12px\", fontSize: 12, fontWeight: 600, color: \"#334155\",",
       "              textTransform: \"uppercase\", letterSpacing: \"0.06em\" }}>",
-      "              Imported (not used in JSX) — {unusedIcons.length}",
+      "              Imported, not used in JSX — {unusedIcons.length}",
       "            </p>",
       "            <div style={{ display: \"grid\", gridTemplateColumns: \"repeat(auto-fill, minmax(140px, 1fr))\",",
-      "              gap: 8, opacity: 0.45 }}>",
-      "              {unusedIcons.map(renderCard)}",
+      "              gap: 8 }}>",
+      "              {unusedIcons.map((d) => renderCard(d, true))}",
       "            </div>",
       "          </>",
       "        )}",