canvas-ui-sdk 0.3.2 → 0.3.4

package/dist/index.js

@@ -27392,8 +27392,13 @@ function generateBakePrompt(theme) {
     lines.push("");
     sections.push(lines.join("\n"));
   }
-  sectionNum++;
-  {
+  const brandingChanged = theme.branding.iconShape !== defaultBranding.iconShape || theme.branding.iconName !== defaultBranding.iconName || theme.branding.bgColor !== defaultBranding.bgColor || theme.branding.iconColor !== defaultBranding.iconColor || theme.branding.wordmark !== defaultBranding.wordmark;
+  const imageKeys = ["logoLight", "logoDark", "faviconLight", "faviconDark"];
+  const imagesChanged = imageKeys.some(
+    (key) => (theme.images[key] || "") !== (defaultImages[key] || "")
+  );
+  if (brandingChanged || imagesChanged) {
+    sectionNum++;
     const lines = [];
     lines.push(`## ${sectionNum}. Update \`src/lib/theme-config.ts\``);
     lines.push("");
@@ -27412,7 +27417,6 @@ function generateBakePrompt(theme) {
     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] || ""}",`);
     }
@@ -27442,13 +27446,11 @@ function generateBakePrompt(theme) {
   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");
@@ -27457,16 +27459,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(
@@ -27482,218 +27478,73 @@ 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"
-          }
-        ),
+    overrideCount > 0 && (() => {
+      const prompt = generateBakePrompt(theme);
+      return /* @__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(prompt),
+              style: {
+                fontSize: "12px",
+                color: copyStatus === "bake" ? "#059669" : "#1165ef",
+                background: "none",
+                border: "none",
+                cursor: "pointer",
+                fontWeight: 500
+              },
+              children: copyStatus === "bake" ? "Copied!" : "Copy prompt"
+            }
+          )
+        ] }),
         /* @__PURE__ */ jsx(
-          "button",
+          "p",
           {
-            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: [
-      /* @__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"
+              color: "#6b7280",
+              lineHeight: "1.4"
             },
-            children: "Export JSON"
+            children: "Copies a prompt for Claude Code that updates your source files with the current theme values."
           }
         ),
         /* @__PURE__ */ jsx(
-          "button",
+          "pre",
           {
-            onClick: () => handleCopy(theme.exportJSON(), "json"),
             style: {
-              fontSize: "12px",
-              color: copyStatus === "json" ? "#059669" : "#1165ef",
-              background: "none",
-              border: "none",
-              cursor: "pointer",
-              fontWeight: 500
+              fontSize: "11px",
+              fontFamily: "ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace",
+              background: "#f9fafb",
+              border: "1px solid #e5e7eb",
+              borderRadius: "6px",
+              padding: "12px",
+              maxHeight: "300px",
+              overflow: "auto",
+              whiteSpace: "pre-wrap",
+              wordBreak: "break-word",
+              color: "#374151",
+              lineHeight: "1.5",
+              margin: 0
             },
-            children: copyStatus === "json" ? "Copied!" : "Copy"
+            children: prompt
           }
         )
-      ] }),
-      /* @__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.exportJSON()
-        }
-      )
-    ] }),
-    /* @__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" })
-      ] })
-    ] }),
-    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",
       {