canvas-ui-sdk 0.3.2 → 0.3.3

package/dist/index.js

@@ -27442,13 +27442,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 +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(
@@ -27482,7 +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: [
+    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",
@@ -27494,206 +27486,37 @@ function ExportPanel({ theme }) {
               textTransform: "uppercase",
               letterSpacing: "0.05em"
             },
-            children: "Export CSS"
+            children: "Bake into source code"
           }
         ),
         /* @__PURE__ */ jsx(
           "button",
           {
-            onClick: () => handleCopy(theme.exportCSS(), "css"),
+            onClick: () => handleCopy(generateBakePrompt(theme)),
             style: {
               fontSize: "12px",
-              color: copyStatus === "css" ? "#059669" : "#1165ef",
+              color: copyStatus === "bake" ? "#059669" : "#1165ef",
               background: "none",
               border: "none",
               cursor: "pointer",
               fontWeight: 500
             },
-            children: copyStatus === "css" ? "Copied!" : "Copy"
+            children: copyStatus === "bake" ? "Copied!" : "Copy 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.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"
-            },
-            children: "Export JSON"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            onClick: () => handleCopy(theme.exportJSON(), "json"),
-            style: {
-              fontSize: "12px",
-              color: copyStatus === "json" ? "#059669" : "#1165ef",
-              background: "none",
-              border: "none",
-              cursor: "pointer",
-              fontWeight: 500
-            },
-            children: copyStatus === "json" ? "Copied!" : "Copy"
-          }
-        )
-      ] }),
-      /* @__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" })
-      ] })
-    ] }),
-    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",
       {