canvas-ui-sdk 0.2.0 → 0.3.1

package/dist/index.js

@@ -165,7 +165,8 @@ var sizeStyles = {
     fontSize: "var(--btn-mini-font-size)",
     borderRadius: "var(--btn-mini-radius)",
     fontWeight: "var(--btn-mini-font-weight)",
-    letterSpacing: "var(--btn-mini-letter-spacing)"
+    letterSpacing: "var(--btn-mini-letter-spacing)",
+    fontFamily: "var(--btn-mini-font-family, var(--typo-button-font, var(--typo-global-font)))"
   },
   sm: {
     height: "var(--btn-small-height)",
@@ -174,7 +175,8 @@ var sizeStyles = {
     fontSize: "var(--btn-small-font-size)",
     borderRadius: "var(--btn-small-radius)",
     fontWeight: "var(--btn-small-font-weight)",
-    letterSpacing: "var(--btn-small-letter-spacing)"
+    letterSpacing: "var(--btn-small-letter-spacing)",
+    fontFamily: "var(--btn-small-font-family, var(--typo-button-font, var(--typo-global-font)))"
   },
   default: {
     height: "var(--btn-standard-height)",
@@ -183,7 +185,8 @@ var sizeStyles = {
     fontSize: "var(--btn-standard-font-size)",
     borderRadius: "var(--btn-standard-radius)",
     fontWeight: "var(--btn-standard-font-weight)",
-    letterSpacing: "var(--btn-standard-letter-spacing)"
+    letterSpacing: "var(--btn-standard-letter-spacing)",
+    fontFamily: "var(--btn-standard-font-family, var(--typo-button-font, var(--typo-global-font)))"
   },
   lg: {
     height: "var(--btn-large-height)",
@@ -192,7 +195,8 @@ var sizeStyles = {
     fontSize: "var(--btn-large-font-size)",
     borderRadius: "var(--btn-large-radius)",
     fontWeight: "var(--btn-large-font-weight)",
-    letterSpacing: "var(--btn-large-letter-spacing)"
+    letterSpacing: "var(--btn-large-letter-spacing)",
+    fontFamily: "var(--btn-large-font-family, var(--typo-button-font, var(--typo-global-font)))"
   }
 };
 var canvasVariants = ["primary", "primary-outline", "primary-neutral", "neutral", "neutral-delete", "delete"];
@@ -3468,10 +3472,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 +3500,7 @@ function ThemeProvider({
   brandAssets = []
 }) {
   const [previewBranding, setPreviewBranding] = useState(null);
+  const [previewImages, setPreviewImages] = useState(null);
   const contextValue = {
     images,
     branding,
@@ -3499,7 +3509,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 }) });
 }
@@ -4552,19 +4564,24 @@ function Sidebar2({
 }
 
 // src/lib/css-variable-sync.ts
+function getStyleTarget() {
+  return document.body ?? document.documentElement;
+}
 function setCSSVariable(name, value) {
-  document.documentElement.style.setProperty(name, value);
+  getStyleTarget().style.setProperty(name, value);
   broadcastCSSVariables({ [name]: value });
 }
 function setCSSVariables(variables) {
+  const target = getStyleTarget();
   Object.entries(variables).forEach(([name, value]) => {
-    document.documentElement.style.setProperty(name, value);
+    target.style.setProperty(name, value);
   });
   broadcastCSSVariables(variables);
 }
 function removeCSSVariables(names) {
+  const target = getStyleTarget();
   names.forEach((name) => {
-    document.documentElement.style.removeProperty(name);
+    target.style.removeProperty(name);
   });
   const iframes = document.querySelectorAll("iframe");
   iframes.forEach((iframe) => {
@@ -24222,6 +24239,86 @@ function isVariableReference(value) {
   return value?.startsWith("var(") ?? false;
 }
 
+// src/components/theme-drawer/components/font-config.ts
+var googleFontFamilies = {
+  // Sans-Serif
+  Inter: "Inter",
+  Geist: "Geist",
+  "Plus Jakarta Sans": "Plus+Jakarta+Sans",
+  Poppins: "Poppins",
+  "IBM Plex Sans": "IBM+Plex+Sans",
+  Roboto: "Roboto",
+  "Open Sans": "Open+Sans",
+  "Noto Sans": "Noto+Sans",
+  Montserrat: "Montserrat",
+  Lato: "Lato",
+  Raleway: "Raleway",
+  "DM Sans": "DM+Sans",
+  "Work Sans": "Work+Sans",
+  Manrope: "Manrope",
+  Outfit: "Outfit",
+  "Source Sans 3": "Source+Sans+3",
+  // Serif
+  "Playfair Display": "Playfair+Display",
+  Merriweather: "Merriweather",
+  "Noto Serif": "Noto+Serif",
+  "Libre Baskerville": "Libre+Baskerville",
+  // Monospace
+  "IBM Plex Mono": "IBM+Plex+Mono",
+  "Courier Prime": "Courier+Prime",
+  "Geist Mono": "Geist+Mono"
+};
+var loadedFonts = /* @__PURE__ */ new Set();
+function loadGoogleFont(fontName) {
+  if (loadedFonts.has(fontName)) return;
+  const fontFamily = googleFontFamilies[fontName];
+  if (!fontFamily) return;
+  const link = document.createElement("link");
+  link.rel = "stylesheet";
+  link.href = `https://fonts.googleapis.com/css2?family=${fontFamily}:wght@400;500;600;700&display=swap`;
+  document.head.appendChild(link);
+  loadedFonts.add(fontName);
+}
+var fontsPreloaded = false;
+function preloadAllFonts() {
+  if (fontsPreloaded) return;
+  Object.keys(googleFontFamilies).forEach((fontName) => {
+    loadGoogleFont(fontName);
+  });
+  fontsPreloaded = true;
+}
+var fontOptions = [
+  { value: "Courier Prime", label: "Courier Prime" },
+  { value: "DM Sans", label: "DM Sans" },
+  { value: "Geist", label: "Geist" },
+  { value: "Geist Mono", label: "Geist Mono" },
+  { value: "IBM Plex Mono", label: "IBM Plex Mono" },
+  { value: "IBM Plex Sans", label: "IBM Plex Sans" },
+  { value: "Inter", label: "Inter" },
+  { value: "Lato", label: "Lato" },
+  { value: "Libre Baskerville", label: "Libre Baskerville" },
+  { value: "Manrope", label: "Manrope" },
+  { value: "Merriweather", label: "Merriweather" },
+  { value: "Montserrat", label: "Montserrat" },
+  { value: "Noto Sans", label: "Noto Sans" },
+  { value: "Noto Serif", label: "Noto Serif" },
+  { value: "Open Sans", label: "Open Sans" },
+  { value: "Outfit", label: "Outfit" },
+  { value: "Playfair Display", label: "Playfair Display" },
+  { value: "Plus Jakarta Sans", label: "Plus Jakarta Sans" },
+  { value: "Poppins", label: "Poppins" },
+  { value: "Raleway", label: "Raleway" },
+  { value: "Roboto", label: "Roboto" },
+  { value: "Source Sans 3", label: "Source Sans 3" },
+  { value: "Work Sans", label: "Work Sans" }
+];
+var fontWeightOptions = [
+  { value: "400", label: "Regular (400)" },
+  { value: "500", label: "Medium (500)" },
+  { value: "600", label: "Semibold (600)" },
+  { value: "700", label: "Bold (700)" }
+];
+
 // src/components/theme-drawer/hooks/use-theme-state.ts
 var FONT_VARS = [
   "--typo-h1-font",
@@ -24267,22 +24364,72 @@ 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;
+}
+var FONT_VAR_PREFIXES = ["--typo-", "--btn-"];
+var FONT_VAR_SUFFIXES = ["-font", "-font-family"];
+function loadFontsFromOverrides(overrides) {
+  for (const [key, value] of Object.entries(overrides)) {
+    if (!value) continue;
+    const isFontVar = FONT_VAR_PREFIXES.some((p) => key.startsWith(p)) && FONT_VAR_SUFFIXES.some((s) => key.endsWith(s));
+    if (isFontVar) {
+      const fontName = value.replace(/^["']|["']$/g, "").split(",")[0].trim();
+      if (fontName) loadGoogleFont(fontName);
+    }
+  }
+}
 function useThemeState(options) {
   const {
     storageKey = "canvas-ui-theme",
     initialOverrides,
+    initialBranding,
+    initialImages,
+    initialCustomButtonStyles,
     onThemeChange,
     onBrandingChange,
-    onImagesChange
+    onImagesChange,
+    onSave
   } = options ?? {};
+  const [savedOverrides, setSavedOverrides] = useState(() => {
+    return initialOverrides ?? {};
+  });
+  const [savedBranding, setSavedBranding] = useState(
+    () => initialBranding ?? { ...defaultBranding }
+  );
+  const [savedImages, setSavedImages] = useState(
+    () => initialImages ?? { ...defaultImages }
+  );
+  const [savedCustomButtonStyles, setSavedCustomButtonStyles] = useState(
+    () => initialCustomButtonStyles ?? [...defaultCustomButtonStyles]
+  );
   const [overrides, setOverrides] = useState(() => {
     return initialOverrides ?? {};
   });
-  const [branding, setBrandingState] = useState({ ...defaultBranding });
-  const [images, setImagesState] = useState({ ...defaultImages });
-  const [customButtonStyles, setCustomButtonStyles] = useState([
-    ...defaultCustomButtonStyles
-  ]);
+  const [branding, setBrandingState] = useState(
+    () => initialBranding ?? { ...defaultBranding }
+  );
+  const [images, setImagesState] = useState(
+    () => initialImages ?? { ...defaultImages }
+  );
+  const [customButtonStyles, setCustomButtonStyles] = useState(
+    () => initialCustomButtonStyles ?? [...defaultCustomButtonStyles]
+  );
   const [brandHue, setBrandHueState] = useState(217);
   const [brandVibrancy, setBrandVibrancyState] = useState(1);
   const [syncRelatedColors, setSyncRelatedColorsState] = useState(true);
@@ -24292,7 +24439,9 @@ function useThemeState(options) {
   onBrandingChangeRef.current = onBrandingChange;
   const onImagesChangeRef = useRef(onImagesChange);
   onImagesChangeRef.current = onImagesChange;
-  const persistState = useCallback(
+  const onSaveRef = useRef(onSave);
+  onSaveRef.current = onSave;
+  const persistToStorage = useCallback(
     (ovr, brd, img, cbs) => {
       try {
         localStorage.setItem(
@@ -24306,21 +24455,31 @@ function useThemeState(options) {
   );
   useEffect(() => {
     try {
+      if (initialOverrides && Object.keys(initialOverrides).length > 0) {
+        setCSSVariables(initialOverrides);
+        loadFontsFromOverrides(initialOverrides);
+        return;
+      }
       const stored = localStorage.getItem(storageKey);
       if (stored) {
         const parsed = importJSON(stored);
         if (parsed) {
           if (parsed.overrides) {
+            setSavedOverrides(parsed.overrides);
             setOverrides(parsed.overrides);
             setCSSVariables(parsed.overrides);
+            loadFontsFromOverrides(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"]) {
@@ -24328,8 +24487,6 @@ function useThemeState(options) {
             setBrandHueState(hsl.h);
           }
         }
-      } else if (initialOverrides) {
-        setCSSVariables(initialOverrides);
       }
     } catch {
     }
@@ -24338,13 +24495,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 +24516,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 +24527,60 @@ 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);
+            onSaveRef.current?.({
+              overrides: currentOverrides,
+              branding: currentBranding,
+              images: currentImages,
+              customButtonStyles: 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 +24588,10 @@ function useThemeState(options) {
     setCustomButtonStyles([...defaultCustomButtonStyles]);
     setBrandHueState(217);
     setBrandVibrancyState(1);
+    setSavedOverrides({});
+    setSavedBranding({ ...defaultBranding });
+    setSavedImages({ ...defaultImages });
+    setSavedCustomButtonStyles([...defaultCustomButtonStyles]);
     try {
       localStorage.removeItem(storageKey);
     } catch {
@@ -24398,60 +24609,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 +24663,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) => {
@@ -24508,7 +24689,7 @@ function useThemeState(options) {
           const defaultHsl = hexToHsl2(defaultColor);
           const newHex = hslToHex2(hue, defaultHsl.s, defaultHsl.l);
           newValues["--canvas-primary"] = newHex;
-          document.documentElement.style.setProperty("--canvas-primary", newHex);
+          (document.body ?? document.documentElement).style.setProperty("--canvas-primary", newHex);
         }
       }
       setOverrides((prev) => {
@@ -24516,7 +24697,7 @@ function useThemeState(options) {
         varsToUpdate.forEach((varName) => {
           if (varName === "--canvas-sidebar-light-active-text" || varName === "--canvas-border-input-focus") {
             newValues[varName] = effectivePrimaryColor;
-            document.documentElement.style.setProperty(varName, effectivePrimaryColor);
+            (document.body ?? document.documentElement).style.setProperty(varName, effectivePrimaryColor);
             return;
           }
           if (varName === "--canvas-primary") return;
@@ -24536,15 +24717,14 @@ function useThemeState(options) {
           );
           const newHex = hslToHex2(hue, newS, newL);
           newValues[varName] = newHex;
-          document.documentElement.style.setProperty(varName, newHex);
+          (document.body ?? document.documentElement).style.setProperty(varName, newHex);
         });
         const next = { ...prev, ...newValues };
-        persistState(next);
         onThemeChangeRef.current?.(next);
         return next;
       });
     },
-    [persistState]
+    []
   );
   const setBrandHue = useCallback(
     (hue) => {
@@ -24565,11 +24745,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 +24770,8 @@ function useThemeState(options) {
     exportCSS: () => exportCSS(overrides),
     exportJSON: () => exportJSON(overrides, branding, images, customButtonStyles),
     importJSON: handleImportJSON,
+    save,
+    discard,
     branding,
     setBranding,
     images,
@@ -25735,86 +25930,6 @@ function ImageUploadRow({
     }
   );
 }
-
-// src/components/theme-drawer/components/font-config.ts
-var googleFontFamilies = {
-  // Sans-Serif
-  Inter: "Inter",
-  Geist: "Geist",
-  "Plus Jakarta Sans": "Plus+Jakarta+Sans",
-  Poppins: "Poppins",
-  "IBM Plex Sans": "IBM+Plex+Sans",
-  Roboto: "Roboto",
-  "Open Sans": "Open+Sans",
-  "Noto Sans": "Noto+Sans",
-  Montserrat: "Montserrat",
-  Lato: "Lato",
-  Raleway: "Raleway",
-  "DM Sans": "DM+Sans",
-  "Work Sans": "Work+Sans",
-  Manrope: "Manrope",
-  Outfit: "Outfit",
-  "Source Sans 3": "Source+Sans+3",
-  // Serif
-  "Playfair Display": "Playfair+Display",
-  Merriweather: "Merriweather",
-  "Noto Serif": "Noto+Serif",
-  "Libre Baskerville": "Libre+Baskerville",
-  // Monospace
-  "IBM Plex Mono": "IBM+Plex+Mono",
-  "Courier Prime": "Courier+Prime",
-  "Geist Mono": "Geist+Mono"
-};
-var loadedFonts = /* @__PURE__ */ new Set();
-function loadGoogleFont(fontName) {
-  if (loadedFonts.has(fontName)) return;
-  const fontFamily = googleFontFamilies[fontName];
-  if (!fontFamily) return;
-  const link = document.createElement("link");
-  link.rel = "stylesheet";
-  link.href = `https://fonts.googleapis.com/css2?family=${fontFamily}:wght@400;500;600;700&display=swap`;
-  document.head.appendChild(link);
-  loadedFonts.add(fontName);
-}
-var fontsPreloaded = false;
-function preloadAllFonts() {
-  if (fontsPreloaded) return;
-  Object.keys(googleFontFamilies).forEach((fontName) => {
-    loadGoogleFont(fontName);
-  });
-  fontsPreloaded = true;
-}
-var fontOptions = [
-  { value: "Courier Prime", label: "Courier Prime" },
-  { value: "DM Sans", label: "DM Sans" },
-  { value: "Geist", label: "Geist" },
-  { value: "Geist Mono", label: "Geist Mono" },
-  { value: "IBM Plex Mono", label: "IBM Plex Mono" },
-  { value: "IBM Plex Sans", label: "IBM Plex Sans" },
-  { value: "Inter", label: "Inter" },
-  { value: "Lato", label: "Lato" },
-  { value: "Libre Baskerville", label: "Libre Baskerville" },
-  { value: "Manrope", label: "Manrope" },
-  { value: "Merriweather", label: "Merriweather" },
-  { value: "Montserrat", label: "Montserrat" },
-  { value: "Noto Sans", label: "Noto Sans" },
-  { value: "Noto Serif", label: "Noto Serif" },
-  { value: "Open Sans", label: "Open Sans" },
-  { value: "Outfit", label: "Outfit" },
-  { value: "Playfair Display", label: "Playfair Display" },
-  { value: "Plus Jakarta Sans", label: "Plus Jakarta Sans" },
-  { value: "Poppins", label: "Poppins" },
-  { value: "Raleway", label: "Raleway" },
-  { value: "Roboto", label: "Roboto" },
-  { value: "Source Sans 3", label: "Source Sans 3" },
-  { value: "Work Sans", label: "Work Sans" }
-];
-var fontWeightOptions = [
-  { value: "400", label: "Regular (400)" },
-  { value: "500", label: "Medium (500)" },
-  { value: "600", label: "Semibold (600)" },
-  { value: "700", label: "Bold (700)" }
-];
 var typographyColorOptions = [
   { value: "var(--canvas-text)", label: "Text" },
   { value: "var(--canvas-text-muted)", label: "Text Muted" },
@@ -27441,8 +27556,8 @@ var drawerStyles = {
   }),
   footer: {
     display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
+    flexDirection: "column",
+    gap: "8px",
     padding: "12px 16px",
     borderTop: "1px solid #e5e7eb",
     flexShrink: 0,
@@ -27480,7 +27595,11 @@ function ThemeDrawer({
   onBrandingChange,
   onImagesChange,
   onImageUpload,
+  onSave,
   initialOverrides,
+  initialBranding,
+  initialImages,
+  initialCustomButtonStyles,
   storageKey,
   title = "Design Variables",
   width = 464
@@ -27494,15 +27613,53 @@ function ThemeDrawer({
   const theme = useThemeState({
     storageKey,
     initialOverrides,
+    initialBranding,
+    initialImages,
+    initialCustomButtonStyles,
     onThemeChange,
     onBrandingChange,
-    onImagesChange
+    onImagesChange,
+    onSave
   });
-  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 +27678,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 +27721,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 +27740,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 +27751,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 +27820,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"
+              }
+            )
+          ] }) })
         ]
       }
     ) })