canvas-ui-sdk 0.3.1 → 0.3.3

package/dist/index.js

@@ -27268,14 +27268,185 @@ function InputSizeGroup({
     }
   );
 }
+
+// src/components/theme-drawer/utils/generate-bake-prompt.ts
+var BASELINE_FONTS = /* @__PURE__ */ new Set(["Inter", "Geist", "Geist Mono"]);
+function fontToImportName(name) {
+  return name.replace(/ /g, "_");
+}
+function fontToVarName(name) {
+  return `--font-${name.toLowerCase().replace(/ /g, "-")}`;
+}
+function fontToInstanceName(name) {
+  const words = name.split(/\s+/);
+  return words.map(
+    (w, i) => i === 0 ? w.toLowerCase() : w.charAt(0).toUpperCase() + w.slice(1).toLowerCase()
+  ).join("");
+}
+function generateBakePrompt(theme) {
+  const overrides = theme.overrides;
+  const rootVars = [];
+  const bodyVars = [];
+  const fontVarsToRemoveFromRoot = [];
+  for (const [name, value] of Object.entries(overrides)) {
+    if (name.startsWith("--canvas-")) {
+      rootVars.push([name, value]);
+    } else if (name === "--typo-global-font") {
+      const cssVar = fontToVarName(value);
+      bodyVars.push([name, `var(${cssVar}), "${value}", sans-serif`]);
+    } else if (/^--typo-.*-font$/.test(name)) {
+      bodyVars.push([name, `"${value}", sans-serif`]);
+      fontVarsToRemoveFromRoot.push(name);
+    } else {
+      bodyVars.push([name, value]);
+    }
+  }
+  rootVars.sort(([a], [b]) => a.localeCompare(b));
+  bodyVars.sort(([a], [b]) => a.localeCompare(b));
+  fontVarsToRemoveFromRoot.sort();
+  const fontNames = /* @__PURE__ */ new Set();
+  for (const [name, value] of Object.entries(overrides)) {
+    if ((name === "--typo-global-font" || /^--typo-.*-font$/.test(name)) && value && !BASELINE_FONTS.has(value)) {
+      fontNames.add(value);
+    }
+  }
+  const newFonts = Array.from(fontNames).sort();
+  const sections = [];
+  let sectionNum = 0;
+  if (rootVars.length > 0 || bodyVars.length > 0) {
+    sectionNum++;
+    const lines = [];
+    lines.push(`## ${sectionNum}. Update \`src/app/globals.css\``);
+    lines.push("");
+    if (rootVars.length > 0) {
+      lines.push("In the `:root` block, update these variables:");
+      lines.push("");
+      lines.push("```css");
+      for (const [name, value] of rootVars) {
+        lines.push(`${name}: ${value};`);
+      }
+      lines.push("```");
+      lines.push("");
+    }
+    if (bodyVars.length > 0) {
+      lines.push(
+        "In the `body` block inside `@layer base`, add these CSS variable declarations (before the existing `font-family` rule):"
+      );
+      lines.push("");
+      lines.push("```css");
+      for (const [name, value] of bodyVars) {
+        lines.push(`${name}: ${value};`);
+      }
+      lines.push("```");
+      lines.push("");
+    }
+    if (fontVarsToRemoveFromRoot.length > 0) {
+      lines.push(
+        "Remove these lines from the `:root` block (they are now overridden in `body`):"
+      );
+      lines.push("");
+      for (const name of fontVarsToRemoveFromRoot) {
+        lines.push(`- \`${name}: var(--typo-global-font);\``);
+      }
+      lines.push("");
+    }
+    sections.push(lines.join("\n"));
+  }
+  if (newFonts.length > 0) {
+    sectionNum++;
+    const lines = [];
+    lines.push(`## ${sectionNum}. Update \`src/app/layout.tsx\``);
+    lines.push("");
+    const allImports = ["Inter", ...newFonts.map(fontToImportName)];
+    lines.push("Update the `next/font/google` import:");
+    lines.push("");
+    lines.push("```typescript");
+    lines.push(`import { ${allImports.join(", ")} } from "next/font/google";`);
+    lines.push("```");
+    lines.push("");
+    lines.push("Add these font instances after the existing `inter` declaration:");
+    lines.push("");
+    lines.push("```typescript");
+    for (let i = 0; i < newFonts.length; i++) {
+      const font = newFonts[i];
+      const importName = fontToImportName(font);
+      const instanceName = fontToInstanceName(font);
+      const varName = fontToVarName(font);
+      lines.push(`const ${instanceName} = ${importName}({`);
+      lines.push(`  variable: "${varName}",`);
+      lines.push(`  subsets: ["latin"],`);
+      lines.push(`  weight: ["400", "500", "600", "700"],`);
+      lines.push(`});`);
+      if (i < newFonts.length - 1) lines.push("");
+    }
+    lines.push("```");
+    lines.push("");
+    const varRefs = newFonts.map((f) => `\${${fontToInstanceName(f)}.variable}`).join(" ");
+    lines.push("Update the `<body>` className to include the new font variables:");
+    lines.push("");
+    lines.push("```tsx");
+    lines.push(
+      `<body className={\`\${inter.variable} ${varRefs} antialiased\`}>`
+    );
+    lines.push("```");
+    lines.push("");
+    sections.push(lines.join("\n"));
+  }
+  sectionNum++;
+  {
+    const lines = [];
+    lines.push(`## ${sectionNum}. Update \`src/lib/theme-config.ts\``);
+    lines.push("");
+    lines.push("Create or replace this file with:");
+    lines.push("");
+    lines.push("```typescript");
+    lines.push(`import type { BrandingState, ImageKey } from "canvas-ui-sdk";`);
+    lines.push("");
+    const b = theme.branding;
+    lines.push(`export const savedBranding: BrandingState = {`);
+    lines.push(`  iconShape: "${b.iconShape}",`);
+    lines.push(`  iconName: "${b.iconName}",`);
+    lines.push(`  bgColor: "${b.bgColor}",`);
+    lines.push(`  iconColor: "${b.iconColor}",`);
+    lines.push(`  wordmark: "${b.wordmark}",`);
+    lines.push(`};`);
+    lines.push("");
+    lines.push(`export const savedImages: Record<ImageKey, string> = {`);
+    const imageKeys = ["logoLight", "logoDark", "faviconLight", "faviconDark"];
+    for (const key of imageKeys) {
+      lines.push(`  ${key}: "${theme.images[key] || ""}",`);
+    }
+    lines.push(`};`);
+    lines.push("```");
+    lines.push("");
+    sections.push(lines.join("\n"));
+  }
+  sectionNum++;
+  {
+    const lines = [];
+    lines.push(`## ${sectionNum}. Delete \`.data/theme.json\``);
+    lines.push("");
+    lines.push("Remove the runtime overrides file:");
+    lines.push("");
+    lines.push("```bash");
+    lines.push("rm .data/theme.json");
+    lines.push("```");
+    sections.push(lines.join("\n"));
+  }
+  const header = [
+    "# Bake Theme Into Source Code",
+    "",
+    "Apply the following theme overrides as source-code defaults so the app loads with the correct styling on first paint \u2014 no flash of unstyled content.",
+    ""
+  ].join("\n");
+  return header + sections.join("\n");
+}
 function ExportPanel({ theme }) {
-  const [importValue, setImportValue] = useState("");
-  const [importStatus, setImportStatus] = useState("idle");
   const [copyStatus, setCopyStatus] = useState(null);
-  const handleCopy = async (content, type) => {
+  const handleCopy = async (content) => {
     try {
       await navigator.clipboard.writeText(content);
-      setCopyStatus(type);
+      setCopyStatus("bake");
       setTimeout(() => setCopyStatus(null), 2e3);
     } catch {
       const textarea = document.createElement("textarea");
@@ -27284,16 +27455,10 @@ function ExportPanel({ theme }) {
       textarea.select();
       document.execCommand("copy");
       document.body.removeChild(textarea);
-      setCopyStatus(type);
+      setCopyStatus("bake");
       setTimeout(() => setCopyStatus(null), 2e3);
     }
   };
-  const handleImport = () => {
-    const success = theme.importJSON(importValue);
-    setImportStatus(success ? "success" : "error");
-    if (success) setImportValue("");
-    setTimeout(() => setImportStatus("idle"), 3e3);
-  };
   const overrideCount = Object.keys(theme.overrides).length;
   return /* @__PURE__ */ jsxs("div", { "data-theme-drawer-panel": true, className: "flex flex-col gap-5 p-4", children: [
     /* @__PURE__ */ jsx(
@@ -27309,59 +27474,7 @@ function ExportPanel({ theme }) {
         children: theme.isDirty ? `${overrideCount} variable${overrideCount !== 1 ? "s" : ""} modified` : "No modifications \u2014 using defaults"
       }
     ),
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-        /* @__PURE__ */ jsx(
-          "h3",
-          {
-            style: {
-              fontSize: "13px",
-              fontWeight: 600,
-              color: "#374151",
-              textTransform: "uppercase",
-              letterSpacing: "0.05em"
-            },
-            children: "Export CSS"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            onClick: () => handleCopy(theme.exportCSS(), "css"),
-            style: {
-              fontSize: "12px",
-              color: copyStatus === "css" ? "#059669" : "#1165ef",
-              background: "none",
-              border: "none",
-              cursor: "pointer",
-              fontWeight: 500
-            },
-            children: copyStatus === "css" ? "Copied!" : "Copy"
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsx(
-        "pre",
-        {
-          style: {
-            fontSize: "11px",
-            fontFamily: "monospace",
-            padding: "12px",
-            background: "#f9fafb",
-            border: "1px solid #e5e7eb",
-            borderRadius: "6px",
-            overflowX: "auto",
-            maxHeight: "200px",
-            overflowY: "auto",
-            color: "#374151",
-            whiteSpace: "pre-wrap",
-            wordBreak: "break-all"
-          },
-          children: theme.exportCSS()
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+    overrideCount > 0 && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
         /* @__PURE__ */ jsx(
           "h3",
@@ -27373,102 +27486,37 @@ function ExportPanel({ theme }) {
               textTransform: "uppercase",
               letterSpacing: "0.05em"
             },
-            children: "Export JSON"
+            children: "Bake into source code"
           }
         ),
         /* @__PURE__ */ jsx(
           "button",
           {
-            onClick: () => handleCopy(theme.exportJSON(), "json"),
+            onClick: () => handleCopy(generateBakePrompt(theme)),
             style: {
               fontSize: "12px",
-              color: copyStatus === "json" ? "#059669" : "#1165ef",
+              color: copyStatus === "bake" ? "#059669" : "#1165ef",
               background: "none",
               border: "none",
               cursor: "pointer",
               fontWeight: 500
             },
-            children: copyStatus === "json" ? "Copied!" : "Copy"
+            children: copyStatus === "bake" ? "Copied!" : "Copy prompt"
           }
         )
       ] }),
       /* @__PURE__ */ jsx(
-        "pre",
+        "p",
         {
           style: {
-            fontSize: "11px",
-            fontFamily: "monospace",
-            padding: "12px",
-            background: "#f9fafb",
-            border: "1px solid #e5e7eb",
-            borderRadius: "6px",
-            overflowX: "auto",
-            maxHeight: "200px",
-            overflowY: "auto",
-            color: "#374151",
-            whiteSpace: "pre-wrap",
-            wordBreak: "break-all"
+            fontSize: "12px",
+            color: "#6b7280",
+            lineHeight: "1.4"
           },
-          children: theme.exportJSON()
+          children: "Copies a prompt for Claude Code that updates your source files with the current theme values."
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
-      /* @__PURE__ */ jsx(
-        "h3",
-        {
-          style: {
-            fontSize: "13px",
-            fontWeight: 600,
-            color: "#374151",
-            textTransform: "uppercase",
-            letterSpacing: "0.05em"
-          },
-          children: "Import JSON"
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "textarea",
-        {
-          value: importValue,
-          onChange: (e) => setImportValue(e.target.value),
-          placeholder: "Paste exported JSON here...",
-          rows: 5,
-          style: {
-            fontSize: "11px",
-            fontFamily: "monospace",
-            padding: "12px",
-            border: "1px solid #e5e7eb",
-            borderRadius: "6px",
-            color: "#374151",
-            background: "#ffffff",
-            resize: "vertical"
-          }
-        }
-      ),
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            onClick: handleImport,
-            disabled: !importValue.trim(),
-            style: {
-              fontSize: "13px",
-              fontWeight: 500,
-              color: "#ffffff",
-              background: importValue.trim() ? "#1165ef" : "#9ca3af",
-              border: "none",
-              cursor: importValue.trim() ? "pointer" : "not-allowed",
-              padding: "8px 16px",
-              borderRadius: "6px"
-            },
-            children: "Import"
-          }
-        ),
-        importStatus === "success" && /* @__PURE__ */ jsx("span", { style: { fontSize: "12px", color: "#059669" }, children: "Theme imported!" }),
-        importStatus === "error" && /* @__PURE__ */ jsx("span", { style: { fontSize: "12px", color: "#dc2626" }, children: "Invalid JSON format" })
-      ] })
-    ] }),
     theme.isDirty && /* @__PURE__ */ jsx(
       "div",
       {