canvas-ui-sdk 0.3.1 → 0.3.2

package/dist/index.js

@@ -27268,6 +27268,179 @@ 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");
@@ -27469,6 +27642,58 @@ function ExportPanel({ theme }) {
         importStatus === "error" && /* @__PURE__ */ jsx("span", { style: { fontSize: "12px", color: "#dc2626" }, children: "Invalid JSON format" })
       ] })
     ] }),
+    overrideCount > 0 && /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          borderTop: "1px solid #e5e7eb",
+          paddingTop: "16px"
+        },
+        children: /* @__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: "Bake into source code"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: () => handleCopy(generateBakePrompt(theme), "bake"),
+                style: {
+                  fontSize: "12px",
+                  color: copyStatus === "bake" ? "#059669" : "#1165ef",
+                  background: "none",
+                  border: "none",
+                  cursor: "pointer",
+                  fontWeight: 500
+                },
+                children: copyStatus === "bake" ? "Copied!" : "Copy prompt"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(
+            "p",
+            {
+              style: {
+                fontSize: "12px",
+                color: "#6b7280",
+                lineHeight: "1.4"
+              },
+              children: "Copies a prompt for Claude Code that updates your source files with the current theme values."
+            }
+          )
+        ] })
+      }
+    ),
     theme.isDirty && /* @__PURE__ */ jsx(
       "div",
       {