canvas-ui-sdk 0.2.0 → 0.3.0

package/dist/index.d.ts

@@ -4670,6 +4670,8 @@ interface ThemeContextValue {
 interface PreviewBrandingContextValue {
     previewBranding: ThemeBranding | null;
     setPreviewBranding: (branding: ThemeBranding | null) => void;
+    previewImages: ThemeImages | null;
+    setPreviewImages: (images: ThemeImages | null) => void;
 }
 declare const ThemeContext: React$1.Context<ThemeContextValue>;
 declare const PreviewBrandingContext: React$1.Context<PreviewBrandingContextValue>;
@@ -4722,6 +4724,8 @@ interface ThemeState {
     exportCSS: () => string;
     exportJSON: () => string;
     importJSON: (json: string) => boolean;
+    save: () => void;
+    discard: () => void;
     branding: BrandingState;
     setBranding: (updates: Partial<BrandingState>) => void;
     images: Record<ImageKey, string>;

package/dist/index.js

@@ -3468,10 +3468,15 @@ var ThemeContext = createContext({
 var PreviewBrandingContext = createContext({
   previewBranding: null,
   setPreviewBranding: () => {
+  },
+  previewImages: null,
+  setPreviewImages: () => {
   }
 });
 function useThemeImages() {
-  return useContext(ThemeContext).images;
+  const { images } = useContext(ThemeContext);
+  const { previewImages } = useContext(PreviewBrandingContext);
+  return previewImages ?? images;
 }
 function useThemeBranding() {
   const { branding, isMounted } = useContext(ThemeContext);
@@ -3491,6 +3496,7 @@ function ThemeProvider({
   brandAssets = []
 }) {
   const [previewBranding, setPreviewBranding] = useState(null);
+  const [previewImages, setPreviewImages] = useState(null);
   const contextValue = {
     images,
     branding,
@@ -3499,7 +3505,9 @@ function ThemeProvider({
   };
   const previewBrandingValue = {
     previewBranding,
-    setPreviewBranding
+    setPreviewBranding,
+    previewImages,
+    setPreviewImages
   };
   return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(PreviewBrandingContext.Provider, { value: previewBrandingValue, children }) });
 }
@@ -24267,6 +24275,24 @@ var brandColorVars = [
   "--canvas-sidebar-dark-border",
   "--canvas-border-input-focus"
 ];
+function isEqual(a, b) {
+  if (a === b) return true;
+  if (a == null || b == null) return false;
+  if (typeof a !== typeof b) return false;
+  if (Array.isArray(a) && Array.isArray(b)) {
+    if (a.length !== b.length) return false;
+    return a.every((v, i) => isEqual(v, b[i]));
+  }
+  if (typeof a === "object" && typeof b === "object") {
+    const aObj = a;
+    const bObj = b;
+    const aKeys = Object.keys(aObj);
+    const bKeys = Object.keys(bObj);
+    if (aKeys.length !== bKeys.length) return false;
+    return aKeys.every((k) => isEqual(aObj[k], bObj[k]));
+  }
+  return false;
+}
 function useThemeState(options) {
   const {
     storageKey = "canvas-ui-theme",
@@ -24275,6 +24301,14 @@ function useThemeState(options) {
     onBrandingChange,
     onImagesChange
   } = options ?? {};
+  const [savedOverrides, setSavedOverrides] = useState(() => {
+    return initialOverrides ?? {};
+  });
+  const [savedBranding, setSavedBranding] = useState({ ...defaultBranding });
+  const [savedImages, setSavedImages] = useState({ ...defaultImages });
+  const [savedCustomButtonStyles, setSavedCustomButtonStyles] = useState([
+    ...defaultCustomButtonStyles
+  ]);
   const [overrides, setOverrides] = useState(() => {
     return initialOverrides ?? {};
   });
@@ -24292,7 +24326,7 @@ function useThemeState(options) {
   onBrandingChangeRef.current = onBrandingChange;
   const onImagesChangeRef = useRef(onImagesChange);
   onImagesChangeRef.current = onImagesChange;
-  const persistState = useCallback(
+  const persistToStorage = useCallback(
     (ovr, brd, img, cbs) => {
       try {
         localStorage.setItem(
@@ -24311,16 +24345,20 @@ function useThemeState(options) {
         const parsed = importJSON(stored);
         if (parsed) {
           if (parsed.overrides) {
+            setSavedOverrides(parsed.overrides);
             setOverrides(parsed.overrides);
             setCSSVariables(parsed.overrides);
           }
           if (parsed.branding) {
+            setSavedBranding(parsed.branding);
             setBrandingState(parsed.branding);
           }
           if (parsed.images) {
+            setSavedImages(parsed.images);
             setImagesState(parsed.images);
           }
           if (parsed.customButtonStyles) {
+            setSavedCustomButtonStyles(parsed.customButtonStyles);
             setCustomButtonStyles(parsed.customButtonStyles);
           }
           if (parsed.overrides?.["--canvas-primary"]) {
@@ -24338,13 +24376,12 @@ function useThemeState(options) {
     (name, value) => {
       setOverrides((prev) => {
         const next = { ...prev, [name]: value };
-        persistState(next, void 0, void 0, void 0);
         setCSSVariables({ [name]: value });
         onThemeChangeRef.current?.(next);
         return next;
       });
     },
-    [persistState]
+    []
   );
   const resetCategory = useCallback(
     (prefix) => {
@@ -24360,7 +24397,6 @@ function useThemeState(options) {
             next[key] = value;
           }
         }
-        persistState(next);
         const fontVarsToRemove = FONT_VARS.filter((v) => v.startsWith(prefix));
         if (fontVarsToRemove.length > 0) {
           removeCSSVariables(fontVarsToRemove);
@@ -24372,8 +24408,54 @@ function useThemeState(options) {
         return next;
       });
     },
-    [persistState]
+    []
   );
+  const save = useCallback(() => {
+    setOverrides((currentOverrides) => {
+      setBrandingState((currentBranding) => {
+        setImagesState((currentImages) => {
+          setCustomButtonStyles((currentCbs) => {
+            setSavedOverrides(currentOverrides);
+            setSavedBranding(currentBranding);
+            setSavedImages(currentImages);
+            setSavedCustomButtonStyles(currentCbs);
+            persistToStorage(currentOverrides, currentBranding, currentImages, currentCbs);
+            return currentCbs;
+          });
+          return currentImages;
+        });
+        return currentBranding;
+      });
+      return currentOverrides;
+    });
+  }, [persistToStorage]);
+  const discard = useCallback(() => {
+    setSavedOverrides((currentSaved) => {
+      setOverrides(currentSaved);
+      removeCSSVariables(FONT_VARS);
+      setCSSVariables({ ...allDefaults, ...currentSaved });
+      onThemeChangeRef.current?.(currentSaved);
+      if (currentSaved["--canvas-primary"]) {
+        const hsl = hexToHsl2(currentSaved["--canvas-primary"]);
+        setBrandHueState(hsl.h);
+      }
+      return currentSaved;
+    });
+    setSavedBranding((currentSaved) => {
+      setBrandingState(currentSaved);
+      onBrandingChangeRef.current?.(currentSaved);
+      return currentSaved;
+    });
+    setSavedImages((currentSaved) => {
+      setImagesState(currentSaved);
+      onImagesChangeRef.current?.(currentSaved);
+      return currentSaved;
+    });
+    setSavedCustomButtonStyles((currentSaved) => {
+      setCustomButtonStyles(currentSaved);
+      return currentSaved;
+    });
+  }, []);
   const resetAll = useCallback(() => {
     setOverrides({});
     setBrandingState({ ...defaultBranding });
@@ -24381,6 +24463,10 @@ function useThemeState(options) {
     setCustomButtonStyles([...defaultCustomButtonStyles]);
     setBrandHueState(217);
     setBrandVibrancyState(1);
+    setSavedOverrides({});
+    setSavedBranding({ ...defaultBranding });
+    setSavedImages({ ...defaultImages });
+    setSavedCustomButtonStyles([...defaultCustomButtonStyles]);
     try {
       localStorage.removeItem(storageKey);
     } catch {
@@ -24398,60 +24484,47 @@ function useThemeState(options) {
       if (parsed.branding) setBrandingState(parsed.branding);
       if (parsed.images) setImagesState(parsed.images);
       if (parsed.customButtonStyles) setCustomButtonStyles(parsed.customButtonStyles);
-      persistState(ovr, parsed.branding, parsed.images, parsed.customButtonStyles);
       removeCSSVariables(FONT_VARS);
       setCSSVariables({ ...allDefaults, ...ovr });
       onThemeChangeRef.current?.(ovr);
       return true;
     },
-    [persistState]
+    []
   );
   const setBranding = useCallback(
     (updates) => {
       setBrandingState((prev) => {
         const next = { ...prev, ...updates };
-        setOverrides((ovr) => {
-          persistState(ovr, next);
-          return ovr;
-        });
         onBrandingChangeRef.current?.(next);
         return next;
       });
     },
-    [persistState]
+    []
   );
   const setImage = useCallback(
     (key, url) => {
       setImagesState((prev) => {
         const next = { ...prev, [key]: url };
-        setOverrides((ovr) => {
-          persistState(ovr, void 0, next);
-          return ovr;
-        });
         onImagesChangeRef.current?.(next);
         return next;
       });
     },
-    [persistState]
+    []
   );
   const deleteImage = useCallback(
     (key) => {
       setImagesState((prev) => {
         const next = { ...prev, [key]: "" };
-        setOverrides((ovr) => {
-          persistState(ovr, void 0, next);
-          return ovr;
-        });
         onImagesChangeRef.current?.(next);
         return next;
       });
     },
-    [persistState]
+    []
   );
   const addCustomButtonStyle = useCallback(() => {
     setCustomButtonStyles((prev) => {
       const id = `custom-${Date.now()}`;
-      const next = [
+      return [
         ...prev,
         {
           id,
@@ -24465,38 +24538,21 @@ function useThemeState(options) {
           borderHover: "var(--canvas-primary-dark)"
         }
       ];
-      setOverrides((ovr) => {
-        persistState(ovr, void 0, void 0, next);
-        return ovr;
-      });
-      return next;
     });
-  }, [persistState]);
+  }, []);
   const updateCustomButtonStyle = useCallback(
     (id, updates) => {
-      setCustomButtonStyles((prev) => {
-        const next = prev.map((s) => s.id === id ? { ...s, ...updates } : s);
-        setOverrides((ovr) => {
-          persistState(ovr, void 0, void 0, next);
-          return ovr;
-        });
-        return next;
-      });
+      setCustomButtonStyles(
+        (prev) => prev.map((s) => s.id === id ? { ...s, ...updates } : s)
+      );
     },
-    [persistState]
+    []
   );
   const deleteCustomButtonStyle = useCallback(
     (id) => {
-      setCustomButtonStyles((prev) => {
-        const next = prev.filter((s) => s.id !== id);
-        setOverrides((ovr) => {
-          persistState(ovr, void 0, void 0, next);
-          return ovr;
-        });
-        return next;
-      });
+      setCustomButtonStyles((prev) => prev.filter((s) => s.id !== id));
     },
-    [persistState]
+    []
   );
   const applyBrandHueVibrancy = useCallback(
     (hue, vibrancy, skipPrimary = false) => {
@@ -24539,12 +24595,11 @@ function useThemeState(options) {
           document.documentElement.style.setProperty(varName, newHex);
         });
         const next = { ...prev, ...newValues };
-        persistState(next);
         onThemeChangeRef.current?.(next);
         return next;
       });
     },
-    [persistState]
+    []
   );
   const setBrandHue = useCallback(
     (hue) => {
@@ -24565,11 +24620,24 @@ function useThemeState(options) {
     []
   );
   const variables = useMemo(() => ({ ...allDefaults, ...overrides }), [overrides]);
-  const unsavedChangesCount = Object.keys(overrides).length;
+  const isDirty = useMemo(() => {
+    return !isEqual(overrides, savedOverrides) || !isEqual(branding, savedBranding) || !isEqual(images, savedImages) || !isEqual(customButtonStyles, savedCustomButtonStyles);
+  }, [overrides, savedOverrides, branding, savedBranding, images, savedImages, customButtonStyles, savedCustomButtonStyles]);
+  const unsavedChangesCount = useMemo(() => {
+    let count = 0;
+    const allKeys = /* @__PURE__ */ new Set([...Object.keys(overrides), ...Object.keys(savedOverrides)]);
+    for (const key of allKeys) {
+      if (overrides[key] !== savedOverrides[key]) count++;
+    }
+    if (!isEqual(branding, savedBranding)) count++;
+    if (!isEqual(images, savedImages)) count++;
+    if (!isEqual(customButtonStyles, savedCustomButtonStyles)) count++;
+    return count;
+  }, [overrides, savedOverrides, branding, savedBranding, images, savedImages, customButtonStyles, savedCustomButtonStyles]);
   return {
     variables,
     overrides,
-    isDirty: unsavedChangesCount > 0,
+    isDirty,
     unsavedChangesCount,
     setVariable,
     resetCategory,
@@ -24577,6 +24645,8 @@ function useThemeState(options) {
     exportCSS: () => exportCSS(overrides),
     exportJSON: () => exportJSON(overrides, branding, images, customButtonStyles),
     importJSON: handleImportJSON,
+    save,
+    discard,
     branding,
     setBranding,
     images,
@@ -27441,8 +27511,8 @@ var drawerStyles = {
   }),
   footer: {
     display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
+    flexDirection: "column",
+    gap: "8px",
     padding: "12px 16px",
     borderTop: "1px solid #e5e7eb",
     flexShrink: 0,
@@ -27498,11 +27568,45 @@ function ThemeDrawer({
     onBrandingChange,
     onImagesChange
   });
-  const activePanels = enabledPanels ? panelConfig.filter((p) => enabledPanels.includes(p.id)) : panelConfig;
-  const handleReset = () => {
+  const { setPreviewBranding, setPreviewImages } = usePreviewBranding();
+  useEffect(() => {
+    if (open) {
+      setPreviewBranding(theme.branding);
+    }
+  }, [open, theme.branding, setPreviewBranding]);
+  useEffect(() => {
+    if (open) {
+      setPreviewImages(theme.images);
+    }
+  }, [open, theme.images, setPreviewImages]);
+  const handleOpenChange = useCallback(
+    (newOpen) => {
+      if (!newOpen) {
+        if (theme.isDirty) {
+          theme.discard();
+        }
+        setPreviewBranding(null);
+        setPreviewImages(null);
+        setResetConfirmOpen(false);
+      }
+      setOpen(newOpen);
+    },
+    [theme, setPreviewBranding, setPreviewImages]
+  );
+  const handleSave = useCallback(() => {
+    theme.save();
+  }, [theme]);
+  const handleDiscard = useCallback(() => {
+    theme.discard();
+  }, [theme]);
+  const handleReset = useCallback(() => {
     theme.resetAll();
+    setPreviewBranding(null);
+    setPreviewImages(null);
     setResetConfirmOpen(false);
-  };
+  }, [theme, setPreviewBranding, setPreviewImages]);
+  const activePanels = enabledPanels ? panelConfig.filter((p) => enabledPanels.includes(p.id)) : panelConfig;
+  const showFooter = theme.isDirty || resetConfirmOpen;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     !open && /* @__PURE__ */ jsx(
       "button",
@@ -27521,7 +27625,7 @@ function ThemeDrawer({
         children: /* @__PURE__ */ jsx(PaletteIcon6, {})
       }
     ),
-    /* @__PURE__ */ jsx(Sheet, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx(Sheet, { open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsxs(
       SheetContent,
       {
         side: "right",
@@ -27564,7 +27668,7 @@ function ThemeDrawer({
                       marginTop: "2px",
                       fontFamily: drawerStyles.container.fontFamily
                     },
-                    children: theme.unsavedChangesCount > 0 ? `${theme.unsavedChangesCount} unsaved modification${theme.unsavedChangesCount !== 1 ? "s" : ""}` : "Customize your design system"
+                    children: theme.unsavedChangesCount > 0 ? `${theme.unsavedChangesCount} unsaved change${theme.unsavedChangesCount !== 1 ? "s" : ""}` : "Customize your design system"
                   }
                 )
               ] })
@@ -27583,7 +27687,7 @@ function ThemeDrawer({
             ScrollArea,
             {
               className: "flex-1 overflow-hidden",
-              style: { height: `calc(100vh - ${theme.isDirty ? 200 : 150}px)` },
+              style: { height: `calc(100vh - ${showFooter ? 200 : 150}px)` },
               children: /* @__PURE__ */ jsxs("div", { style: drawerStyles.container, children: [
                 activeTab === "colors" && /* @__PURE__ */ jsx(ColorsPanel, { theme }),
                 activeTab === "images" && /* @__PURE__ */ jsx(ImagesPanel, { theme, onImageUpload }),
@@ -27594,7 +27698,7 @@ function ThemeDrawer({
               ] })
             }
           ),
-          theme.isDirty && /* @__PURE__ */ jsx("div", { style: drawerStyles.footer, children: resetConfirmOpen ? /* @__PURE__ */ jsxs(
+          showFooter && /* @__PURE__ */ jsx("div", { style: drawerStyles.footer, children: resetConfirmOpen ? /* @__PURE__ */ jsxs(
             "div",
             {
               style: {
@@ -27663,24 +27767,75 @@ function ThemeDrawer({
                 )
               ]
             }
-          ) : /* @__PURE__ */ jsx(
-            "button",
-            {
-              onClick: () => setResetConfirmOpen(true),
-              style: {
-                fontSize: "13px",
-                fontWeight: 500,
-                color: "#dc2626",
-                background: "none",
-                border: "1px solid #fca5a5",
-                cursor: "pointer",
-                padding: "8px 16px",
-                borderRadius: "6px",
-                width: "100%"
-              },
-              children: "Reset All to Defaults"
-            }
-          ) })
+          ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  gap: "8px",
+                  width: "100%"
+                },
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      onClick: handleDiscard,
+                      style: {
+                        flex: 1,
+                        fontSize: "13px",
+                        fontWeight: 500,
+                        color: "#374151",
+                        background: "#ffffff",
+                        border: "1px solid #e5e7eb",
+                        cursor: "pointer",
+                        padding: "8px 16px",
+                        borderRadius: "6px"
+                      },
+                      children: "Discard"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      onClick: handleSave,
+                      style: {
+                        flex: 1,
+                        fontSize: "13px",
+                        fontWeight: 600,
+                        color: "#ffffff",
+                        background: "#1f2937",
+                        border: "1px solid #1f2937",
+                        cursor: "pointer",
+                        padding: "8px 16px",
+                        borderRadius: "6px"
+                      },
+                      children: "Save"
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: () => setResetConfirmOpen(true),
+                style: {
+                  fontSize: "12px",
+                  fontWeight: 400,
+                  color: "#9ca3af",
+                  background: "none",
+                  border: "none",
+                  cursor: "pointer",
+                  padding: "2px 0",
+                  textAlign: "center",
+                  textDecoration: "underline",
+                  textUnderlineOffset: "2px"
+                },
+                children: "Reset all to defaults"
+              }
+            )
+          ] }) })
         ]
       }
     ) })