canvas-ui-sdk 0.1.7 → 0.3.0

package/dist/index.js

@@ -3337,6 +3337,7 @@ var defaultButtonSizes = {
   "--btn-mini-radius": "4px",
   "--btn-mini-font-weight": "500",
   "--btn-mini-letter-spacing": "0em",
+  "--btn-mini-font-family": "",
   // Small
   "--btn-small-height": "32px",
   "--btn-small-font-size": "14px",
@@ -3344,6 +3345,7 @@ var defaultButtonSizes = {
   "--btn-small-radius": "6px",
   "--btn-small-font-weight": "500",
   "--btn-small-letter-spacing": "0em",
+  "--btn-small-font-family": "",
   // Standard
   "--btn-standard-height": "40px",
   "--btn-standard-font-size": "14px",
@@ -3351,13 +3353,15 @@ var defaultButtonSizes = {
   "--btn-standard-radius": "8px",
   "--btn-standard-font-weight": "500",
   "--btn-standard-letter-spacing": "0em",
+  "--btn-standard-font-family": "",
   // Large
   "--btn-large-height": "48px",
   "--btn-large-font-size": "16px",
   "--btn-large-px": "20px",
   "--btn-large-radius": "10px",
   "--btn-large-font-weight": "500",
-  "--btn-large-letter-spacing": "0em"
+  "--btn-large-letter-spacing": "0em",
+  "--btn-large-font-family": ""
 };
 var defaultButtonColorStyles = [
   { id: "primary", label: "Primary Save", description: "Main action button", isDefault: true },
@@ -3464,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);
@@ -3487,6 +3496,7 @@ function ThemeProvider({
   brandAssets = []
 }) {
   const [previewBranding, setPreviewBranding] = useState(null);
+  const [previewImages, setPreviewImages] = useState(null);
   const contextValue = {
     images,
     branding,
@@ -3495,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 }) });
 }
@@ -24088,27 +24100,136 @@ function exportCSS(overrides) {
 ${lines.join("\n")}
 }`;
 }
-function exportJSON(overrides) {
-  return JSON.stringify({ overrides }, null, 2);
+function exportJSON(overrides, branding, images, customButtonStyles) {
+  const data = { overrides };
+  if (branding) data.branding = branding;
+  if (images) data.images = images;
+  if (customButtonStyles && customButtonStyles.length > 0) {
+    data.customButtonStyles = customButtonStyles;
+  }
+  return JSON.stringify(data, null, 2);
 }
 function importJSON(json) {
   try {
     const parsed = JSON.parse(json);
-    if (parsed && typeof parsed.overrides === "object" && !Array.isArray(parsed.overrides)) {
-      const overrides = {};
+    if (!parsed || typeof parsed !== "object") return null;
+    let overrides = {};
+    if (parsed.overrides && typeof parsed.overrides === "object" && !Array.isArray(parsed.overrides)) {
       for (const [key, value] of Object.entries(parsed.overrides)) {
         if (typeof key === "string" && typeof value === "string") {
           overrides[key] = value;
         }
       }
-      return Object.keys(overrides).length > 0 ? overrides : null;
     }
-    return null;
+    const result = { overrides };
+    if (parsed.branding && typeof parsed.branding === "object") {
+      result.branding = parsed.branding;
+    }
+    if (parsed.images && typeof parsed.images === "object") {
+      result.images = parsed.images;
+    }
+    if (Array.isArray(parsed.customButtonStyles)) {
+      result.customButtonStyles = parsed.customButtonStyles;
+    }
+    if (Object.keys(overrides).length === 0 && !result.branding && !result.images && !result.customButtonStyles) {
+      return null;
+    }
+    return result;
   } catch {
     return null;
   }
 }
 
+// src/components/theme-drawer/utils/color-utils.ts
+function hexToHsl2(hex) {
+  hex = hex.replace(/^#/, "");
+  if (hex.length === 3) {
+    hex = hex.split("").map((c) => c + c).join("");
+  }
+  const r = parseInt(hex.slice(0, 2), 16) / 255;
+  const g = parseInt(hex.slice(2, 4), 16) / 255;
+  const b = parseInt(hex.slice(4, 6), 16) / 255;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  let h = 0;
+  let s = 0;
+  const l = (max + min) / 2;
+  if (max !== min) {
+    const d = max - min;
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    switch (max) {
+      case r:
+        h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+        break;
+      case g:
+        h = ((b - r) / d + 2) / 6;
+        break;
+      case b:
+        h = ((r - g) / d + 4) / 6;
+        break;
+    }
+  }
+  return {
+    h: Math.round(h * 360),
+    s: Math.round(s * 100),
+    l: Math.round(l * 100)
+  };
+}
+function hslToHex2(h, s, l) {
+  h = (h % 360 + 360) % 360;
+  s /= 100;
+  l /= 100;
+  const c = (1 - Math.abs(2 * l - 1)) * s;
+  const x = c * (1 - Math.abs(h / 60 % 2 - 1));
+  const m = l - c / 2;
+  let r = 0, g = 0, b = 0;
+  if (h >= 0 && h < 60) {
+    r = c;
+    g = x;
+    b = 0;
+  } else if (h >= 60 && h < 120) {
+    r = x;
+    g = c;
+    b = 0;
+  } else if (h >= 120 && h < 180) {
+    r = 0;
+    g = c;
+    b = x;
+  } else if (h >= 180 && h < 240) {
+    r = 0;
+    g = x;
+    b = c;
+  } else if (h >= 240 && h < 300) {
+    r = x;
+    g = 0;
+    b = c;
+  } else if (h >= 300 && h < 360) {
+    r = c;
+    g = 0;
+    b = x;
+  }
+  const toHex = (n) => {
+    const hex = Math.round((n + m) * 255).toString(16);
+    return hex.length === 1 ? "0" + hex : hex;
+  };
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+function resolveBrandingColor(value) {
+  if (!value) return "#ffffff";
+  if (value.startsWith("var(")) {
+    const varName = value.replace("var(", "").replace(")", "");
+    if (typeof window !== "undefined") {
+      const computed = getComputedStyle(document.documentElement).getPropertyValue(varName).trim();
+      return computed || "#ffffff";
+    }
+    return "#ffffff";
+  }
+  return value;
+}
+function isVariableReference(value) {
+  return value?.startsWith("var(") ?? false;
+}
+
 // src/components/theme-drawer/hooks/use-theme-state.ts
 var FONT_VARS = [
   "--typo-h1-font",
@@ -24141,25 +24262,109 @@ var allDefaults = {
   ...defaultButtonColors,
   ...defaultInputSizes
 };
+var brandColorVars = [
+  "--canvas-primary",
+  "--canvas-primary-dark",
+  "--canvas-flair-bg",
+  "--canvas-surface-brand",
+  "--canvas-sidebar-light-active-bg",
+  "--canvas-sidebar-light-active-text",
+  "--canvas-sidebar-dark-bg",
+  "--canvas-sidebar-dark-active-bg",
+  "--canvas-sidebar-dark-text",
+  "--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",
     initialOverrides,
-    onThemeChange
+    onThemeChange,
+    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 ?? {};
   });
+  const [branding, setBrandingState] = useState({ ...defaultBranding });
+  const [images, setImagesState] = useState({ ...defaultImages });
+  const [customButtonStyles, setCustomButtonStyles] = useState([
+    ...defaultCustomButtonStyles
+  ]);
+  const [brandHue, setBrandHueState] = useState(217);
+  const [brandVibrancy, setBrandVibrancyState] = useState(1);
+  const [syncRelatedColors, setSyncRelatedColorsState] = useState(true);
   const onThemeChangeRef = useRef(onThemeChange);
   onThemeChangeRef.current = onThemeChange;
+  const onBrandingChangeRef = useRef(onBrandingChange);
+  onBrandingChangeRef.current = onBrandingChange;
+  const onImagesChangeRef = useRef(onImagesChange);
+  onImagesChangeRef.current = onImagesChange;
+  const persistToStorage = useCallback(
+    (ovr, brd, img, cbs) => {
+      try {
+        localStorage.setItem(
+          storageKey,
+          exportJSON(ovr, brd, img, cbs)
+        );
+      } catch {
+      }
+    },
+    [storageKey]
+  );
   useEffect(() => {
     try {
       const stored = localStorage.getItem(storageKey);
       if (stored) {
         const parsed = importJSON(stored);
         if (parsed) {
-          setOverrides(parsed);
-          setCSSVariables(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"]) {
+            const hsl = hexToHsl2(parsed.overrides["--canvas-primary"]);
+            setBrandHueState(hsl.h);
+          }
         }
       } else if (initialOverrides) {
         setCSSVariables(initialOverrides);
@@ -24171,16 +24376,12 @@ function useThemeState(options) {
     (name, value) => {
       setOverrides((prev) => {
         const next = { ...prev, [name]: value };
-        try {
-          localStorage.setItem(storageKey, exportJSON(next));
-        } catch {
-        }
         setCSSVariables({ [name]: value });
         onThemeChangeRef.current?.(next);
         return next;
       });
     },
-    [storageKey]
+    []
   );
   const resetCategory = useCallback(
     (prefix) => {
@@ -24196,10 +24397,6 @@ function useThemeState(options) {
             next[key] = value;
           }
         }
-        try {
-          localStorage.setItem(storageKey, exportJSON(next));
-        } catch {
-        }
         const fontVarsToRemove = FONT_VARS.filter((v) => v.startsWith(prefix));
         if (fontVarsToRemove.length > 0) {
           removeCSSVariables(fontVarsToRemove);
@@ -24211,10 +24408,65 @@ function useThemeState(options) {
         return next;
       });
     },
-    [storageKey]
+    []
   );
+  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 });
+    setImagesState({ ...defaultImages });
+    setCustomButtonStyles([...defaultCustomButtonStyles]);
+    setBrandHueState(217);
+    setBrandVibrancyState(1);
+    setSavedOverrides({});
+    setSavedBranding({ ...defaultBranding });
+    setSavedImages({ ...defaultImages });
+    setSavedCustomButtonStyles([...defaultCustomButtonStyles]);
     try {
       localStorage.removeItem(storageKey);
     } catch {
@@ -24227,133 +24479,1244 @@ function useThemeState(options) {
     (json) => {
       const parsed = importJSON(json);
       if (!parsed) return false;
-      setOverrides(parsed);
-      try {
-        localStorage.setItem(storageKey, exportJSON(parsed));
-      } catch {
-      }
+      const ovr = parsed.overrides ?? {};
+      setOverrides(ovr);
+      if (parsed.branding) setBrandingState(parsed.branding);
+      if (parsed.images) setImagesState(parsed.images);
+      if (parsed.customButtonStyles) setCustomButtonStyles(parsed.customButtonStyles);
       removeCSSVariables(FONT_VARS);
-      setCSSVariables({ ...allDefaults, ...parsed });
-      onThemeChangeRef.current?.(parsed);
+      setCSSVariables({ ...allDefaults, ...ovr });
+      onThemeChangeRef.current?.(ovr);
       return true;
     },
-    [storageKey]
+    []
+  );
+  const setBranding = useCallback(
+    (updates) => {
+      setBrandingState((prev) => {
+        const next = { ...prev, ...updates };
+        onBrandingChangeRef.current?.(next);
+        return next;
+      });
+    },
+    []
+  );
+  const setImage = useCallback(
+    (key, url) => {
+      setImagesState((prev) => {
+        const next = { ...prev, [key]: url };
+        onImagesChangeRef.current?.(next);
+        return next;
+      });
+    },
+    []
+  );
+  const deleteImage = useCallback(
+    (key) => {
+      setImagesState((prev) => {
+        const next = { ...prev, [key]: "" };
+        onImagesChangeRef.current?.(next);
+        return next;
+      });
+    },
+    []
+  );
+  const addCustomButtonStyle = useCallback(() => {
+    setCustomButtonStyles((prev) => {
+      const id = `custom-${Date.now()}`;
+      return [
+        ...prev,
+        {
+          id,
+          label: "New Style",
+          description: "Custom button style",
+          bg: "var(--canvas-primary)",
+          text: "var(--canvas-primary-foreground)",
+          border: "var(--canvas-primary)",
+          bgHover: "var(--canvas-primary-dark)",
+          textHover: "var(--canvas-primary-foreground)",
+          borderHover: "var(--canvas-primary-dark)"
+        }
+      ];
+    });
+  }, []);
+  const updateCustomButtonStyle = useCallback(
+    (id, updates) => {
+      setCustomButtonStyles(
+        (prev) => prev.map((s) => s.id === id ? { ...s, ...updates } : s)
+      );
+    },
+    []
+  );
+  const deleteCustomButtonStyle = useCallback(
+    (id) => {
+      setCustomButtonStyles((prev) => prev.filter((s) => s.id !== id));
+    },
+    []
+  );
+  const applyBrandHueVibrancy = useCallback(
+    (hue, vibrancy, skipPrimary = false) => {
+      const newValues = {};
+      const varsToUpdate = skipPrimary ? brandColorVars.filter((v) => v !== "--canvas-primary") : brandColorVars;
+      if (!skipPrimary) {
+        const defaultColor = defaultColors["--canvas-primary"];
+        if (defaultColor && defaultColor.startsWith("#")) {
+          const defaultHsl = hexToHsl2(defaultColor);
+          const newHex = hslToHex2(hue, defaultHsl.s, defaultHsl.l);
+          newValues["--canvas-primary"] = newHex;
+          document.documentElement.style.setProperty("--canvas-primary", newHex);
+        }
+      }
+      setOverrides((prev) => {
+        const effectivePrimaryColor = newValues["--canvas-primary"] || prev["--canvas-primary"] || defaultColors["--canvas-primary"];
+        varsToUpdate.forEach((varName) => {
+          if (varName === "--canvas-sidebar-light-active-text" || varName === "--canvas-border-input-focus") {
+            newValues[varName] = effectivePrimaryColor;
+            document.documentElement.style.setProperty(varName, effectivePrimaryColor);
+            return;
+          }
+          if (varName === "--canvas-primary") return;
+          const defaultColor = defaultColors[varName];
+          if (!defaultColor || !defaultColor.startsWith("#")) return;
+          const defaultHsl = hexToHsl2(defaultColor);
+          const minSaturation = 10;
+          const newS = Math.max(
+            minSaturation,
+            Math.min(100, Math.round(defaultHsl.s * vibrancy))
+          );
+          const minLightness = 10;
+          const lightnessMultiplier = vibrancy < 1 ? vibrancy : 1;
+          const newL = Math.max(
+            minLightness,
+            Math.min(100, Math.round(defaultHsl.l * lightnessMultiplier))
+          );
+          const newHex = hslToHex2(hue, newS, newL);
+          newValues[varName] = newHex;
+          document.documentElement.style.setProperty(varName, newHex);
+        });
+        const next = { ...prev, ...newValues };
+        onThemeChangeRef.current?.(next);
+        return next;
+      });
+    },
+    []
+  );
+  const setBrandHue = useCallback(
+    (hue) => {
+      setBrandHueState(hue);
+    },
+    []
+  );
+  const setBrandVibrancy = useCallback(
+    (vibrancy) => {
+      setBrandVibrancyState(vibrancy);
+    },
+    []
+  );
+  const setSyncRelatedColors = useCallback(
+    (sync) => {
+      setSyncRelatedColorsState(sync);
+    },
+    []
   );
-  const variables = { ...allDefaults, ...overrides };
+  const variables = useMemo(() => ({ ...allDefaults, ...overrides }), [overrides]);
+  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: Object.keys(overrides).length > 0,
+    isDirty,
+    unsavedChangesCount,
     setVariable,
     resetCategory,
     resetAll,
     exportCSS: () => exportCSS(overrides),
-    exportJSON: () => exportJSON(overrides),
-    importJSON: handleImportJSON
+    exportJSON: () => exportJSON(overrides, branding, images, customButtonStyles),
+    importJSON: handleImportJSON,
+    save,
+    discard,
+    branding,
+    setBranding,
+    images,
+    setImage,
+    deleteImage,
+    customButtonStyles,
+    addCustomButtonStyle,
+    updateCustomButtonStyle,
+    deleteCustomButtonStyle,
+    brandHue,
+    brandVibrancy,
+    syncRelatedColors,
+    setBrandHue,
+    setBrandVibrancy,
+    setSyncRelatedColors,
+    applyBrandHueVibrancy
   };
 }
-function ColorsPanel({ theme }) {
-  return /* @__PURE__ */ jsx("div", { "data-theme-drawer-panel": true, className: "flex flex-col gap-6 p-4", children: colorVariables.map((category) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", 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: category.category
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          onClick: () => {
-            const prefix = category.variables[0]?.name.split("-").slice(0, 3).join("-");
-            if (prefix) theme.resetCategory(prefix);
-          },
-          style: {
-            fontSize: "11px",
-            color: "#6b7280",
-            background: "none",
-            border: "none",
-            cursor: "pointer",
-            padding: "2px 6px",
-            borderRadius: "4px"
-          },
-          onMouseEnter: (e) => {
-            e.target.style.color = "#374151";
-            e.target.style.background = "#f3f4f6";
-          },
-          onMouseLeave: (e) => {
-            e.target.style.color = "#6b7280";
-            e.target.style.background = "none";
-          },
-          children: "Reset"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: category.variables.map((v) => /* @__PURE__ */ jsx(
-      ColorRow,
+function HslColorPicker({ value, onChange }) {
+  const hsl = hexToHsl2(value);
+  const satLightRef = useRef(null);
+  const [isDragging, setIsDragging] = useState(false);
+  const handleHslChange = (component, newValue) => {
+    const updated = { ...hsl, [component]: newValue };
+    onChange(hslToHex2(updated.h, updated.s, updated.l));
+  };
+  const handleSatLightInteraction = (clientX, clientY) => {
+    if (!satLightRef.current) return;
+    const rect = satLightRef.current.getBoundingClientRect();
+    const x = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
+    const y = Math.max(0, Math.min(1, (clientY - rect.top) / rect.height));
+    const s = Math.round(x * 100);
+    const l = Math.round((1 - y) * 100);
+    onChange(hslToHex2(hsl.h, s, l));
+  };
+  const handlePointerDown = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(true);
+    handleSatLightInteraction(e.clientX, e.clientY);
+    e.target.setPointerCapture(e.pointerId);
+  };
+  const handlePointerMove = (e) => {
+    if (!isDragging) return;
+    handleSatLightInteraction(e.clientX, e.clientY);
+  };
+  const handlePointerUp = (e) => {
+    setIsDragging(false);
+    e.target.releasePointerCapture(e.pointerId);
+  };
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "12px", padding: "12px", width: "256px" }, children: [
+    /* @__PURE__ */ jsx(
+      "div",
       {
-        label: v.label,
-        value: theme.variables[v.name] ?? v.default,
-        defaultValue: v.default,
-        onChange: (val) => theme.setVariable(v.name, val)
-      },
-      v.name
-    )) })
-  ] }, category.category)) });
+        ref: satLightRef,
+        style: {
+          position: "relative",
+          width: "100%",
+          height: "160px",
+          borderRadius: "6px",
+          cursor: "crosshair",
+          touchAction: "none",
+          background: `
+            linear-gradient(to top, #000, transparent),
+            linear-gradient(to right, #fff, hsl(${hsl.h}, 100%, 50%))
+          `
+        },
+        onPointerDown: handlePointerDown,
+        onPointerMove: handlePointerMove,
+        onPointerUp: handlePointerUp,
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              width: "16px",
+              height: "16px",
+              border: "2px solid white",
+              borderRadius: "50%",
+              pointerEvents: "none",
+              transform: "translate(-50%, -50%)",
+              left: `${hsl.s}%`,
+              top: `${100 - hsl.l}%`,
+              boxShadow: "0 0 0 1px rgba(0,0,0,0.3), 0 2px 4px rgba(0,0,0,0.2)"
+            }
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      SliderRow,
+      {
+        label: "Hue",
+        value: hsl.h,
+        min: 0,
+        max: 360,
+        suffix: "\xB0",
+        inputWidth: "48px",
+        onChange: (v) => handleHslChange("h", v),
+        gradient: `linear-gradient(to right,
+          hsl(0, 100%, 50%),
+          hsl(60, 100%, 50%),
+          hsl(120, 100%, 50%),
+          hsl(180, 100%, 50%),
+          hsl(240, 100%, 50%),
+          hsl(300, 100%, 50%),
+          hsl(360, 100%, 50%)
+        )`
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      SliderRow,
+      {
+        label: "Saturation",
+        value: hsl.s,
+        min: 0,
+        max: 100,
+        suffix: "%",
+        inputWidth: "40px",
+        onChange: (v) => handleHslChange("s", v),
+        gradient: `linear-gradient(to right,
+          hsl(${hsl.h}, 0%, ${hsl.l}%),
+          hsl(${hsl.h}, 100%, ${hsl.l}%)
+        )`
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      SliderRow,
+      {
+        label: "Lightness",
+        value: hsl.l,
+        min: 0,
+        max: 100,
+        suffix: "%",
+        inputWidth: "40px",
+        onChange: (v) => handleHslChange("l", v),
+        gradient: `linear-gradient(to right,
+          hsl(${hsl.h}, ${hsl.s}%, 0%),
+          hsl(${hsl.h}, ${hsl.s}%, 50%),
+          hsl(${hsl.h}, ${hsl.s}%, 100%)
+        )`
+      }
+    )
+  ] });
 }
-function ColorRow({
+function SliderRow({
   label,
   value,
-  defaultValue,
-  onChange
+  min,
+  max,
+  suffix,
+  inputWidth,
+  onChange,
+  gradient
 }) {
-  const isModified = value !== defaultValue;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      style: {
-        display: "flex",
-        alignItems: "center",
-        gap: "10px"
-      },
-      children: [
-        /* @__PURE__ */ jsx(
-          "label",
-          {
-            style: {
-              position: "relative",
-              width: "32px",
-              height: "32px",
-              flexShrink: 0,
-              borderRadius: "6px",
-              border: "1px solid #e5e7eb",
-              overflow: "hidden",
-              cursor: "pointer"
-            },
-            children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "4px" }, children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          fontSize: "12px",
+          color: "#6b7280"
+        },
+        children: [
+          /* @__PURE__ */ jsx("span", { children: label }),
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "2px" }, children: [
+            /* @__PURE__ */ jsx(
               "input",
               {
-                type: "color",
+                type: "number",
+                min,
+                max,
                 value,
-                onChange: (e) => onChange(e.target.value),
+                onChange: (e) => onChange(
+                  Math.min(max, Math.max(min, parseInt(e.target.value) || 0))
+                ),
                 style: {
-                  position: "absolute",
-                  inset: "-4px",
-                  width: "calc(100% + 8px)",
-                  height: "calc(100% + 8px)",
-                  cursor: "pointer",
-                  border: "none",
-                  padding: 0
+                  width: inputWidth,
+                  padding: "2px 4px",
+                  fontSize: "12px",
+                  fontFamily: "monospace",
+                  border: "1px solid #e5e7eb",
+                  borderRadius: "4px",
+                  background: "#ffffff",
+                  color: "#374151",
+                  textAlign: "right"
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { children: suffix })
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "range",
+        min,
+        max,
+        value,
+        onChange: (e) => onChange(parseInt(e.target.value)),
+        style: {
+          width: "100%",
+          height: "12px",
+          borderRadius: "6px",
+          appearance: "none",
+          WebkitAppearance: "none",
+          cursor: "pointer",
+          background: gradient
+        }
+      }
+    )
+  ] });
+}
+function ColorInputRow({
+  label,
+  value,
+  onChange,
+  variableOptions
+}) {
+  const [pickerOpen, setPickerOpen] = useState(false);
+  if (variableOptions) {
+    return /* @__PURE__ */ jsx(
+      VariableColorRow,
+      {
+        label,
+        value,
+        onChange,
+        variableOptions
+      }
+    );
+  }
+  const handleHexInput = (e) => {
+    let hex = e.target.value;
+    if (hex && !hex.startsWith("#")) {
+      hex = "#" + hex;
+    }
+    if (/^#[0-9A-Fa-f]{0,6}$/.test(hex)) {
+      onChange(hex);
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: "8px",
+        padding: "8px 0"
+      },
+      children: [
+        /* @__PURE__ */ jsxs(Popover, { open: pickerOpen, onOpenChange: setPickerOpen, children: [
+          /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              style: {
+                width: "32px",
+                height: "32px",
+                borderRadius: "6px",
+                border: "1px solid #e5e7eb",
+                cursor: "pointer",
+                flexShrink: 0,
+                backgroundColor: value,
+                transition: "transform 150ms"
+              },
+              onMouseEnter: (e) => {
+                e.currentTarget.style.transform = "scale(1.05)";
+              },
+              onMouseLeave: (e) => {
+                e.currentTarget.style.transform = "scale(1)";
+              },
+              "aria-label": `Edit ${label} color`
+            }
+          ) }),
+          /* @__PURE__ */ jsx(
+            PopoverContent,
+            {
+              className: "w-auto p-0",
+              align: "start",
+              onPointerDownOutside: (e) => e.preventDefault(),
+              children: /* @__PURE__ */ jsx(HslColorPicker, { value, onChange })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            style: {
+              fontSize: "13px",
+              color: "#374151",
+              flex: 1,
+              minWidth: 0
+            },
+            children: label
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "text",
+            value,
+            onChange: handleHexInput,
+            style: {
+              width: "80px",
+              fontSize: "12px",
+              fontFamily: "monospace",
+              padding: "4px 8px",
+              border: "1px solid #e5e7eb",
+              borderRadius: "4px",
+              color: "#374151",
+              background: "#ffffff",
+              textTransform: "uppercase",
+              textAlign: "center"
+            },
+            placeholder: "#000000"
+          }
+        )
+      ]
+    }
+  );
+}
+function VariableColorRow({
+  label,
+  value,
+  onChange,
+  variableOptions
+}) {
+  const isVariable = isVariableReference(value);
+  const resolvedColor = resolveBrandingColor(value);
+  const selectedOption = variableOptions.find((opt) => opt.value === value);
+  const selectValue = selectedOption ? value : "__custom__";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: "8px",
+        padding: "8px 0"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              width: "24px",
+              height: "24px",
+              borderRadius: "4px",
+              border: "1px solid #e5e7eb",
+              flexShrink: 0,
+              backgroundColor: resolvedColor
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            style: {
+              fontSize: "13px",
+              color: "#374151",
+              flex: 1,
+              minWidth: 0
+            },
+            children: label
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "select",
+          {
+            value: selectValue,
+            onChange: (e) => {
+              if (e.target.value === "__custom__") {
+                onChange("#000000");
+              } else {
+                onChange(e.target.value);
+              }
+            },
+            style: {
+              height: "28px",
+              fontSize: "11px",
+              padding: "0 6px",
+              border: "1px solid #e5e7eb",
+              borderRadius: "4px",
+              color: "#374151",
+              background: "#ffffff",
+              cursor: "pointer",
+              flexShrink: 0,
+              maxWidth: "120px"
+            },
+            children: [
+              variableOptions.map((opt) => /* @__PURE__ */ jsx("option", { value: opt.value, children: opt.label }, opt.value)),
+              /* @__PURE__ */ jsx("option", { value: "__custom__", children: "Custom" })
+            ]
+          }
+        ),
+        !isVariable && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs(Popover, { children: [
+            /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+              "button",
+              {
+                style: {
+                  width: "24px",
+                  height: "24px",
+                  borderRadius: "4px",
+                  border: "1px solid #e5e7eb",
+                  cursor: "pointer",
+                  flexShrink: 0,
+                  backgroundColor: value
+                },
+                "aria-label": `Edit ${label} color`
+              }
+            ) }),
+            /* @__PURE__ */ jsx(
+              PopoverContent,
+              {
+                className: "w-auto p-0",
+                align: "start",
+                onPointerDownOutside: (e) => e.preventDefault(),
+                children: /* @__PURE__ */ jsx(HslColorPicker, { value, onChange })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "text",
+              value,
+              onChange: (e) => {
+                let hex = e.target.value;
+                if (hex && !hex.startsWith("#")) hex = "#" + hex;
+                if (/^#[0-9A-Fa-f]{0,6}$/.test(hex)) onChange(hex);
+              },
+              style: {
+                width: "72px",
+                fontSize: "11px",
+                fontFamily: "monospace",
+                padding: "4px 6px",
+                border: "1px solid #e5e7eb",
+                borderRadius: "4px",
+                color: "#374151",
+                background: "#ffffff",
+                textTransform: "uppercase",
+                textAlign: "center"
+              },
+              placeholder: "#000000"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function ColorsPanel({ theme }) {
+  return /* @__PURE__ */ jsxs("div", { "data-theme-drawer-panel": true, className: "flex flex-col gap-6 p-4", children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          padding: "12px",
+          background: "#f9fafb",
+          borderRadius: "8px",
+          border: "1px solid #e5e7eb"
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            "h3",
+            {
+              style: {
+                fontSize: "11px",
+                fontWeight: 600,
+                color: "#6b7280",
+                textTransform: "uppercase",
+                letterSpacing: "0.05em",
+                marginBottom: "12px"
+              },
+              children: "Brand Controls"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ColorInputRow,
+            {
+              label: "Primary",
+              value: theme.variables["--canvas-primary"] || "#1165ef",
+              onChange: (hex) => {
+                theme.setVariable("--canvas-primary", hex);
+                if (/^#[0-9A-Fa-f]{6}$/.test(hex)) {
+                  const hsl = hexToHsl2(hex);
+                  theme.setBrandHue(hsl.h);
+                  theme.setBrandVibrancy(1);
+                  if (theme.syncRelatedColors) {
+                    theme.applyBrandHueVibrancy(hsl.h, 1, true);
+                  }
+                }
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { style: { marginBottom: "12px" }, children: [
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "space-between",
+                  marginBottom: "6px"
+                },
+                children: [
+                  /* @__PURE__ */ jsx("label", { style: { fontSize: "12px", color: "#6b7280" }, children: "Brand Hue" }),
+                  /* @__PURE__ */ jsxs(
+                    "span",
+                    {
+                      style: { fontSize: "12px", fontFamily: "monospace", color: "#6b7280" },
+                      children: [
+                        theme.brandHue,
+                        "\xB0"
+                      ]
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "range",
+                min: "0",
+                max: "360",
+                value: theme.brandHue,
+                onChange: (e) => {
+                  const newHue = parseInt(e.target.value);
+                  theme.setBrandHue(newHue);
+                  if (theme.syncRelatedColors) {
+                    theme.applyBrandHueVibrancy(newHue, theme.brandVibrancy);
+                  }
+                },
+                style: {
+                  width: "100%",
+                  height: "12px",
+                  borderRadius: "6px",
+                  appearance: "none",
+                  WebkitAppearance: "none",
+                  cursor: "pointer",
+                  background: "linear-gradient(to right, hsl(0, 80%, 50%), hsl(60, 80%, 50%), hsl(120, 80%, 50%), hsl(180, 80%, 50%), hsl(240, 80%, 50%), hsl(300, 80%, 50%), hsl(360, 80%, 50%))"
+                }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { style: { marginBottom: "12px" }, children: [
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "space-between",
+                  marginBottom: "6px"
+                },
+                children: [
+                  /* @__PURE__ */ jsx("label", { style: { fontSize: "12px", color: "#6b7280" }, children: "Brand Vibrancy" }),
+                  /* @__PURE__ */ jsxs(
+                    "span",
+                    {
+                      style: { fontSize: "12px", fontFamily: "monospace", color: "#6b7280" },
+                      children: [
+                        Math.round(theme.brandVibrancy * 100),
+                        "%"
+                      ]
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "range",
+                min: "0",
+                max: "150",
+                value: theme.brandVibrancy * 100,
+                onChange: (e) => {
+                  const newVibrancy = parseInt(e.target.value) / 100;
+                  theme.setBrandVibrancy(newVibrancy);
+                  if (theme.syncRelatedColors) {
+                    theme.applyBrandHueVibrancy(theme.brandHue, newVibrancy, true);
+                  }
+                },
+                style: {
+                  width: "100%",
+                  height: "8px",
+                  borderRadius: "4px",
+                  appearance: "none",
+                  WebkitAppearance: "none",
+                  cursor: "pointer",
+                  background: `linear-gradient(to right, #d1d5db, ${theme.variables["--canvas-primary"] || "#1165ef"})`
+                }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs(
+            "label",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                gap: "8px",
+                cursor: "pointer",
+                fontSize: "13px",
+                color: "#374151"
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "checkbox",
+                    checked: theme.syncRelatedColors,
+                    onChange: (e) => theme.setSyncRelatedColors(e.target.checked),
+                    style: { width: "16px", height: "16px", cursor: "pointer" }
+                  }
+                ),
+                "Apply to related colors"
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    colorVariables.map((category) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsx(
+          "h3",
+          {
+            style: {
+              fontSize: "11px",
+              fontWeight: 600,
+              color: "#6b7280",
+              textTransform: "uppercase",
+              letterSpacing: "0.05em"
+            },
+            children: category.category
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => {
+              const prefix = category.variables[0]?.name.split("-").slice(0, 3).join("-");
+              if (prefix) theme.resetCategory(prefix);
+            },
+            style: {
+              fontSize: "11px",
+              color: "#6b7280",
+              background: "none",
+              border: "none",
+              cursor: "pointer",
+              padding: "2px 6px",
+              borderRadius: "4px"
+            },
+            onMouseEnter: (e) => {
+              e.target.style.color = "#374151";
+              e.target.style.background = "#f3f4f6";
+            },
+            onMouseLeave: (e) => {
+              e.target.style.color = "#6b7280";
+              e.target.style.background = "none";
+            },
+            children: "Reset"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: category.variables.map((v) => /* @__PURE__ */ jsx(
+        ColorInputRow,
+        {
+          label: v.label,
+          value: theme.variables[v.name] ?? v.default,
+          onChange: (val) => theme.setVariable(v.name, val)
+        },
+        v.name
+      )) })
+    ] }, category.category))
+  ] });
+}
+var logoIcons = [
+  { name: "Diamond", icon: Diamond },
+  { name: "Hexagon", icon: Hexagon },
+  { name: "Star", icon: Star$1 },
+  { name: "Lightning", icon: Lightning },
+  { name: "Sparkle", icon: Sparkle },
+  { name: "Infinity", icon: Infinity },
+  { name: "Code", icon: Code },
+  { name: "Terminal", icon: Terminal },
+  { name: "Cpu", icon: Cpu },
+  { name: "Database", icon: Database },
+  { name: "Globe", icon: Globe },
+  { name: "Cloud", icon: Cloud },
+  { name: "WifiHigh", icon: WifiHigh },
+  { name: "Briefcase", icon: Briefcase },
+  { name: "Buildings", icon: Buildings },
+  { name: "Storefront", icon: Storefront },
+  { name: "Handshake", icon: Handshake },
+  { name: "ChartLine", icon: ChartLine },
+  { name: "Palette", icon: Palette },
+  { name: "PencilSimple", icon: PencilSimple },
+  { name: "Camera", icon: Camera },
+  { name: "MusicNote", icon: MusicNote },
+  { name: "Lightbulb", icon: Lightbulb },
+  { name: "Leaf", icon: Leaf },
+  { name: "Tree", icon: Tree },
+  { name: "Sun", icon: Sun },
+  { name: "Moon", icon: Moon },
+  { name: "Fire", icon: Fire },
+  { name: "Drop", icon: Drop },
+  { name: "ChatCircle", icon: ChatCircle },
+  { name: "Envelope", icon: Envelope },
+  { name: "Phone", icon: Phone$1 },
+  { name: "Megaphone", icon: Megaphone$1 },
+  { name: "Heart", icon: Heart },
+  { name: "Shield", icon: Shield },
+  { name: "Trophy", icon: Trophy },
+  { name: "Rocket", icon: Rocket },
+  { name: "Target", icon: Target },
+  { name: "Flag", icon: Flag }
+];
+var iconShapes6 = [
+  { id: "rounded", label: "Rounded", borderRadius: "8px" },
+  { id: "circle", label: "Circle", borderRadius: "50%" },
+  { id: "square", label: "Square", borderRadius: "0px" }
+];
+var brandingColorOptions = [
+  { value: "var(--canvas-primary)", label: "Primary" },
+  { value: "var(--canvas-primary-foreground)", label: "Primary Text" },
+  { value: "var(--canvas-primary-dark)", label: "Primary Dark" },
+  { value: "var(--canvas-surface)", label: "Neutral" },
+  { value: "var(--canvas-surface-hover)", label: "Neutral Hovered" },
+  { value: "var(--canvas-text)", label: "Text" },
+  { value: "var(--canvas-text-muted)", label: "Gray" },
+  { value: "var(--canvas-destructive)", label: "Destructive" }
+];
+var imageConfig = [
+  { key: "logoLight", label: "Logo (Light)" },
+  { key: "logoDark", label: "Logo (Dark)" },
+  { key: "faviconLight", label: "Favicon (Light)" },
+  { key: "faviconDark", label: "Favicon (Dark)" }
+];
+function ImagesPanel({ theme, onImageUpload }) {
+  const currentShape = iconShapes6.find((s) => s.id === theme.branding.iconShape) ?? iconShapes6[0];
+  const resolvedBgColor = resolveBrandingColor(theme.branding.bgColor);
+  const resolvedIconColor = resolveBrandingColor(theme.branding.iconColor);
+  const SelectedIcon = logoIcons.find((i) => i.name === theme.branding.iconName)?.icon ?? Buildings;
+  return /* @__PURE__ */ jsxs("div", { "data-theme-drawer-panel": true, style: { display: "flex", flexDirection: "column", gap: "24px", padding: "16px" }, children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx(
+        "h3",
+        {
+          style: {
+            fontSize: "11px",
+            fontWeight: 600,
+            color: "#6b7280",
+            textTransform: "uppercase",
+            letterSpacing: "0.05em",
+            marginBottom: "12px"
+          },
+          children: "Logo Creator"
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            gap: "12px",
+            marginBottom: "16px",
+            padding: "16px",
+            background: "#f9fafb",
+            borderRadius: "8px",
+            border: "1px solid #e5e7eb"
+          },
+          children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  width: "48px",
+                  height: "48px",
+                  borderRadius: currentShape.borderRadius,
+                  backgroundColor: resolvedBgColor,
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  flexShrink: 0
+                },
+                children: /* @__PURE__ */ jsx(SelectedIcon, { size: 28, color: resolvedIconColor, weight: "bold" })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                style: {
+                  fontSize: "18px",
+                  fontWeight: 700,
+                  color: "#0d121c",
+                  letterSpacing: "-0.01em"
+                },
+                children: theme.branding.wordmark || "canvas"
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          style: {
+            display: "grid",
+            gridTemplateColumns: "1fr 1fr",
+            gap: "8px",
+            marginBottom: "12px"
+          },
+          children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx(
+                "label",
+                {
+                  style: {
+                    display: "block",
+                    fontSize: "12px",
+                    color: "#6b7280",
+                    marginBottom: "4px"
+                  },
+                  children: "Wordmark"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "text",
+                  value: theme.branding.wordmark,
+                  onChange: (e) => theme.setBranding({ wordmark: e.target.value }),
+                  style: {
+                    width: "100%",
+                    fontSize: "13px",
+                    padding: "6px 10px",
+                    border: "1px solid #e5e7eb",
+                    borderRadius: "6px",
+                    color: "#374151",
+                    background: "#ffffff",
+                    boxSizing: "border-box"
+                  },
+                  placeholder: "Your brand name"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx(
+                "label",
+                {
+                  style: {
+                    display: "block",
+                    fontSize: "12px",
+                    color: "#6b7280",
+                    marginBottom: "4px"
+                  },
+                  children: "Icon Shape"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "select",
+                {
+                  value: theme.branding.iconShape,
+                  onChange: (e) => theme.setBranding({ iconShape: e.target.value }),
+                  style: {
+                    width: "100%",
+                    height: "32px",
+                    fontSize: "13px",
+                    padding: "0 10px",
+                    border: "1px solid #e5e7eb",
+                    borderRadius: "6px",
+                    color: "#374151",
+                    background: "#ffffff",
+                    cursor: "pointer",
+                    boxSizing: "border-box"
+                  },
+                  children: iconShapes6.map((shape) => /* @__PURE__ */ jsx("option", { value: shape.id, children: shape.label }, shape.id))
+                }
+              )
+            ] })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { style: { marginBottom: "12px" }, children: [
+        /* @__PURE__ */ jsx(
+          "label",
+          {
+            style: {
+              display: "block",
+              fontSize: "12px",
+              color: "#6b7280",
+              marginBottom: "6px"
+            },
+            children: "Icon"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              display: "grid",
+              gridTemplateColumns: "repeat(8, 1fr)",
+              gap: "4px"
+            },
+            children: logoIcons.map((icon) => {
+              const isSelected = theme.branding.iconName === icon.name;
+              const IconComp = icon.icon;
+              return /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: () => theme.setBranding({ iconName: icon.name }),
+                  title: icon.name,
+                  style: {
+                    width: "100%",
+                    aspectRatio: "1",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    borderRadius: "6px",
+                    border: isSelected ? "2px solid #1165ef" : "1px solid transparent",
+                    background: isSelected ? "#1165ef" : "transparent",
+                    cursor: "pointer",
+                    padding: 0,
+                    transition: "background 100ms, border-color 100ms"
+                  },
+                  onMouseEnter: (e) => {
+                    if (!isSelected) {
+                      e.currentTarget.style.background = "#f3f4f6";
+                    }
+                  },
+                  onMouseLeave: (e) => {
+                    if (!isSelected) {
+                      e.currentTarget.style.background = "transparent";
+                    }
+                  },
+                  children: /* @__PURE__ */ jsx(
+                    IconComp,
+                    {
+                      size: 20,
+                      color: isSelected ? "#ffffff" : "#374151",
+                      weight: "regular"
+                    }
+                  )
+                },
+                icon.name
+              );
+            })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(
+        ColorInputRow,
+        {
+          label: "Background Color",
+          value: theme.branding.bgColor,
+          onChange: (val) => theme.setBranding({ bgColor: val }),
+          variableOptions: brandingColorOptions
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        ColorInputRow,
+        {
+          label: "Icon Color",
+          value: theme.branding.iconColor,
+          onChange: (val) => theme.setBranding({ iconColor: val }),
+          variableOptions: brandingColorOptions
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx(
+        "h3",
+        {
+          style: {
+            fontSize: "11px",
+            fontWeight: 600,
+            color: "#6b7280",
+            textTransform: "uppercase",
+            letterSpacing: "0.05em",
+            marginBottom: "12px"
+          },
+          children: "Upload Custom Images"
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: imageConfig.map((img) => /* @__PURE__ */ jsx(
+        ImageUploadRow,
+        {
+          imageKey: img.key,
+          label: img.label,
+          url: theme.images[img.key],
+          onImageUpload,
+          onSetImage: (url) => theme.setImage(img.key, url),
+          onDeleteImage: () => theme.deleteImage(img.key)
+        },
+        img.key
+      )) })
+    ] })
+  ] });
+}
+function ImageUploadRow({
+  imageKey,
+  label,
+  url,
+  onImageUpload,
+  onSetImage,
+  onDeleteImage
+}) {
+  const fileInputRef = useRef(null);
+  const handleFileChange = async (e) => {
+    const file = e.target.files?.[0];
+    if (!file || !onImageUpload) return;
+    try {
+      const uploadedUrl = await onImageUpload(imageKey, file);
+      onSetImage(uploadedUrl);
+    } catch {
+    }
+    if (fileInputRef.current) {
+      fileInputRef.current.value = "";
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: "10px",
+        padding: "8px 10px",
+        background: "#f9fafb",
+        borderRadius: "6px",
+        border: "1px solid #e5e7eb"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              width: "40px",
+              height: "40px",
+              borderRadius: "4px",
+              border: "1px solid #e5e7eb",
+              background: "#ffffff",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              flexShrink: 0,
+              overflow: "hidden"
+            },
+            children: url ? /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: url,
+                alt: label,
+                style: {
+                  width: "100%",
+                  height: "100%",
+                  objectFit: "contain"
                 }
               }
-            )
+            ) : /* @__PURE__ */ jsx("span", { style: { fontSize: "10px", color: "#9ca3af" }, children: "--" })
           }
         ),
         /* @__PURE__ */ jsx(
@@ -24363,71 +25726,357 @@ function ColorRow({
               fontSize: "13px",
               color: "#374151",
               flex: 1,
-              fontWeight: isModified ? 500 : 400
+              minWidth: 0
             },
             children: label
           }
         ),
-        /* @__PURE__ */ jsx(
-          "input",
+        onImageUpload && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: fileInputRef,
+              type: "file",
+              accept: "image/*",
+              onChange: handleFileChange,
+              style: { display: "none" }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => fileInputRef.current?.click(),
+              style: {
+                fontSize: "12px",
+                fontWeight: 500,
+                color: "#1165ef",
+                background: "#ebf2ff",
+                border: "1px solid #1165ef",
+                borderRadius: "4px",
+                padding: "4px 10px",
+                cursor: "pointer",
+                flexShrink: 0,
+                transition: "background 100ms"
+              },
+              onMouseEnter: (e) => {
+                e.currentTarget.style.background = "#dbeafe";
+              },
+              onMouseLeave: (e) => {
+                e.currentTarget.style.background = "#ebf2ff";
+              },
+              children: "Upload"
+            }
+          )
+        ] }),
+        url && /* @__PURE__ */ jsx(
+          "button",
           {
-            type: "text",
-            value,
-            onChange: (e) => onChange(e.target.value),
+            onClick: onDeleteImage,
+            title: `Remove ${label}`,
             style: {
-              width: "80px",
-              fontSize: "12px",
-              fontFamily: "monospace",
-              padding: "4px 8px",
-              border: "1px solid #e5e7eb",
+              width: "24px",
+              height: "24px",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
               borderRadius: "4px",
-              color: "#374151",
-              background: "#ffffff"
-            }
+              border: "none",
+              background: "transparent",
+              cursor: "pointer",
+              fontSize: "14px",
+              fontWeight: 600,
+              color: "#9ca3af",
+              flexShrink: 0,
+              lineHeight: 1,
+              transition: "color 100ms, background 100ms"
+            },
+            onMouseEnter: (e) => {
+              e.currentTarget.style.color = "#ef4444";
+              e.currentTarget.style.background = "#fef2f2";
+            },
+            onMouseLeave: (e) => {
+              e.currentTarget.style.color = "#9ca3af";
+              e.currentTarget.style.background = "transparent";
+            },
+            children: "\u2715"
           }
         )
       ]
     }
   );
 }
-var typographyGroups = [
-  {
-    label: "Global",
-    prefix: "--typo-global",
-    fields: [{ key: "--typo-global-font", label: "Font Family", type: "text" }]
-  },
-  ...["h1", "h2", "h3", "h4", "h5", "h6"].map((level) => ({
-    label: level.toUpperCase(),
-    prefix: `--typo-${level}`,
-    fields: [
-      { key: `--typo-${level}-font`, label: "Font", type: "text" },
-      { key: `--typo-${level}-size`, label: "Size", type: "text" },
-      { key: `--typo-${level}-size-mobile`, label: "Mobile Size", type: "text" },
-      { key: `--typo-${level}-weight`, label: "Weight", type: "text" },
-      { key: `--typo-${level}-spacing`, label: "Spacing", type: "text" },
-      { key: `--typo-${level}-line-height`, label: "Line Height", type: "text" }
-    ]
-  })),
-  ...["body-xl", "body-l", "body-m", "body-s", "body-xs"].map((level) => ({
-    label: level.replace("body-", "Body ").toUpperCase(),
-    prefix: `--typo-${level}`,
-    fields: [
-      { key: `--typo-${level}-font`, label: "Font", type: "text" },
-      { key: `--typo-${level}-size`, label: "Size", type: "text" },
-      { key: `--typo-${level}-weight`, label: "Weight", type: "text" },
-      { key: `--typo-${level}-spacing`, label: "Spacing", type: "text" },
-      { key: `--typo-${level}-line-height`, label: "Line Height", type: "text" }
-    ]
-  }))
+
+// 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" },
+  { value: "var(--canvas-text-placeholder)", label: "Placeholder" },
+  { value: "var(--canvas-primary)", label: "Primary" },
+  { value: "var(--canvas-destructive)", label: "Destructive" }
+];
+var generalPurposeStyles = [
+  { prefix: "h1", label: "H1", description: "Hero headlines" },
+  { prefix: "h2", label: "H2", description: "Major section headers" },
+  { prefix: "h3", label: "H3", description: "Banner titles" },
+  { prefix: "h4", label: "H4", description: "Page titles" },
+  { prefix: "h5", label: "H5", description: "Large section headers" },
+  { prefix: "h6", label: "H6", description: "Section titles" },
+  { prefix: "body-xl", label: "Body XL", description: "Lead paragraphs" },
+  { prefix: "body-l", label: "Body L", description: "Descriptions" },
+  { prefix: "body-m", label: "Body M", description: "Standard body text" },
+  { prefix: "body-s", label: "Body S", description: "Captions, metadata" },
+  { prefix: "body-xs", label: "Body XS", description: "Fine print, labels" }
+];
+var componentStyles = [
+  { prefix: "menu-label", label: "Menu Label" },
+  { prefix: "sidebar-label", label: "Sidebar Label" },
+  { prefix: "sidebar-tab", label: "Sidebar Tab" },
+  { prefix: "sidebar-subtab", label: "Sidebar Subtab" },
+  { prefix: "header", label: "Header" },
+  { prefix: "input-label", label: "Input Label" },
+  { prefix: "button", label: "Button" }
 ];
 function TypographyPanel({ theme }) {
-  return /* @__PURE__ */ jsx("div", { "data-theme-drawer-panel": true, className: "flex flex-col gap-5 p-4", children: typographyGroups.map((group) => /* @__PURE__ */ jsx(TypoGroup, { group, theme }, group.prefix)) });
+  useEffect(() => {
+    preloadAllFonts();
+  }, []);
+  const globalFont = theme.variables["--typo-global-font"] || "Inter";
+  return /* @__PURE__ */ jsxs("div", { "data-theme-drawer-panel": true, style: { padding: "16px" }, children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          padding: "12px",
+          background: "#f9fafb",
+          borderRadius: "8px",
+          border: "1px solid #e5e7eb",
+          marginBottom: "20px"
+        },
+        children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  fontSize: "13px",
+                  fontWeight: 600,
+                  color: "#374151"
+                },
+                children: "Global Font"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  fontSize: "11px",
+                  color: "#6b7280",
+                  marginTop: "2px"
+                },
+                children: "Default font for all text styles"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(
+            "select",
+            {
+              value: globalFont,
+              onChange: (e) => {
+                const v = e.target.value;
+                loadGoogleFont(v);
+                theme.setVariable("--typo-global-font", v);
+              },
+              style: {
+                height: "32px",
+                fontSize: "12px",
+                padding: "0 8px",
+                border: "1px solid #e5e7eb",
+                borderRadius: "6px",
+                color: "#374151",
+                background: "#ffffff",
+                cursor: "pointer",
+                maxWidth: "180px"
+              },
+              children: fontOptions.map((f) => /* @__PURE__ */ jsx(
+                "option",
+                {
+                  value: f.value,
+                  style: { fontFamily: f.value },
+                  children: f.label
+                },
+                f.value
+              ))
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { style: { marginBottom: "20px" }, children: [
+      /* @__PURE__ */ jsx(
+        "h3",
+        {
+          style: {
+            fontSize: "11px",
+            fontWeight: 600,
+            color: "#6b7280",
+            textTransform: "uppercase",
+            letterSpacing: "0.05em",
+            marginBottom: "4px"
+          },
+          children: "General Purpose"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "p",
+        {
+          style: {
+            fontSize: "11px",
+            color: "#6b7280",
+            marginBottom: "12px"
+          },
+          children: "Headings and body text used across the application."
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: generalPurposeStyles.map((s) => /* @__PURE__ */ jsx(
+        TypographyRow,
+        {
+          config: s,
+          theme,
+          globalFont,
+          hasMutedColor: true
+        },
+        s.prefix
+      )) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx(
+        "h3",
+        {
+          style: {
+            fontSize: "11px",
+            fontWeight: 600,
+            color: "#6b7280",
+            textTransform: "uppercase",
+            letterSpacing: "0.05em",
+            marginBottom: "4px"
+          },
+          children: "Component-Specific"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "p",
+        {
+          style: {
+            fontSize: "11px",
+            color: "#6b7280",
+            marginBottom: "12px"
+          },
+          children: "Typography styles scoped to specific UI components."
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: componentStyles.map((s) => /* @__PURE__ */ jsx(
+        TypographyRow,
+        {
+          config: s,
+          theme,
+          globalFont,
+          hasMutedColor: false
+        },
+        s.prefix
+      )) })
+    ] })
+  ] });
 }
-function TypoGroup({
-  group,
-  theme
+function TypographyRow({
+  config,
+  theme,
+  globalFont,
+  hasMutedColor
 }) {
-  const [expanded, setExpanded] = React13__default.useState(false);
+  const [expanded, setExpanded] = useState(false);
+  const { prefix, label, description } = config;
+  const varKey = (suffix) => `--typo-${prefix}-${suffix}`;
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -24455,7 +26104,20 @@ function TypoGroup({
               color: "#374151"
             },
             children: [
-              /* @__PURE__ */ jsx("span", { children: group.label }),
+              /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "baseline", gap: "8px" }, children: [
+                /* @__PURE__ */ jsx("span", { children: label }),
+                description && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    style: {
+                      fontSize: "11px",
+                      fontWeight: 400,
+                      color: "#6b7280"
+                    },
+                    children: description
+                  }
+                )
+              ] }),
               /* @__PURE__ */ jsx(
                 "span",
                 {
@@ -24471,69 +26133,332 @@ function TypoGroup({
             ]
           }
         ),
-        expanded && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", style: { padding: "10px 12px" }, children: [
-          group.fields.map((field) => /* @__PURE__ */ jsxs(
+        expanded && /* @__PURE__ */ jsxs("div", { style: { padding: "12px" }, children: [
+          /* @__PURE__ */ jsxs(
             "div",
             {
               style: {
-                display: "flex",
-                alignItems: "center",
-                gap: "8px"
+                display: "grid",
+                gridTemplateColumns: "1fr 1fr",
+                gap: "8px",
+                marginBottom: "8px"
               },
               children: [
-                /* @__PURE__ */ jsx(
-                  "label",
-                  {
-                    style: {
-                      fontSize: "12px",
-                      color: "#6b7280",
-                      width: "90px",
-                      flexShrink: 0
-                    },
-                    children: field.label
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "input",
-                  {
-                    type: "text",
-                    value: theme.variables[field.key] ?? "",
-                    onChange: (e) => theme.setVariable(field.key, e.target.value),
-                    placeholder: field.label,
-                    style: {
-                      flex: 1,
-                      fontSize: "12px",
-                      fontFamily: "monospace",
-                      padding: "4px 8px",
-                      border: "1px solid #e5e7eb",
-                      borderRadius: "4px",
-                      color: "#374151",
-                      background: "#ffffff"
+                /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx(
+                    "label",
+                    {
+                      style: {
+                        display: "block",
+                        fontSize: "11px",
+                        color: "#6b7280",
+                        marginBottom: "4px"
+                      },
+                      children: "Font Family"
                     }
-                  }
-                )
+                  ),
+                  /* @__PURE__ */ jsxs(
+                    "select",
+                    {
+                      value: theme.variables[varKey("font")] ?? "",
+                      onChange: (e) => {
+                        const v = e.target.value;
+                        if (v) {
+                          loadGoogleFont(v);
+                          theme.setVariable(varKey("font"), v);
+                        } else {
+                          theme.setVariable(varKey("font"), "");
+                        }
+                      },
+                      style: {
+                        width: "100%",
+                        height: "30px",
+                        fontSize: "12px",
+                        padding: "0 6px",
+                        border: "1px solid #e5e7eb",
+                        borderRadius: "4px",
+                        color: "#374151",
+                        background: "#ffffff",
+                        cursor: "pointer"
+                      },
+                      children: [
+                        /* @__PURE__ */ jsxs("option", { value: "", style: { fontFamily: globalFont }, children: [
+                          "Use Global (",
+                          globalFont,
+                          ")"
+                        ] }),
+                        fontOptions.map((f) => /* @__PURE__ */ jsx(
+                          "option",
+                          {
+                            value: f.value,
+                            style: { fontFamily: f.value },
+                            children: f.label
+                          },
+                          f.value
+                        ))
+                      ]
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx(
+                    "label",
+                    {
+                      style: {
+                        display: "block",
+                        fontSize: "11px",
+                        color: "#6b7280",
+                        marginBottom: "4px"
+                      },
+                      children: "Size"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      type: "text",
+                      value: theme.variables[varKey("size")] ?? "",
+                      onChange: (e) => theme.setVariable(varKey("size"), e.target.value),
+                      placeholder: "e.g. 16px",
+                      style: {
+                        width: "100%",
+                        height: "30px",
+                        fontSize: "12px",
+                        fontFamily: "monospace",
+                        padding: "0 8px",
+                        border: "1px solid #e5e7eb",
+                        borderRadius: "4px",
+                        color: "#374151",
+                        background: "#ffffff",
+                        boxSizing: "border-box"
+                      }
+                    }
+                  )
+                ] })
               ]
-            },
-            field.key
-          )),
+            }
+          ),
           /* @__PURE__ */ jsxs(
-            "button",
+            "div",
             {
-              onClick: () => theme.resetCategory(group.prefix),
               style: {
-                fontSize: "11px",
-                color: "#6b7280",
-                background: "none",
-                border: "none",
-                cursor: "pointer",
-                textAlign: "right",
-                padding: "2px 0"
+                display: "grid",
+                gridTemplateColumns: "1fr 1fr",
+                gap: "8px",
+                marginBottom: "8px"
+              },
+              children: [
+                /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx(
+                    "label",
+                    {
+                      style: {
+                        display: "block",
+                        fontSize: "11px",
+                        color: "#6b7280",
+                        marginBottom: "4px"
+                      },
+                      children: "Mobile Size"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      type: "text",
+                      value: theme.variables[varKey("size-mobile")] ?? "",
+                      onChange: (e) => theme.setVariable(varKey("size-mobile"), e.target.value),
+                      placeholder: "e.g. 14px",
+                      style: {
+                        width: "100%",
+                        height: "30px",
+                        fontSize: "12px",
+                        fontFamily: "monospace",
+                        padding: "0 8px",
+                        border: "1px solid #e5e7eb",
+                        borderRadius: "4px",
+                        color: "#374151",
+                        background: "#ffffff",
+                        boxSizing: "border-box"
+                      }
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx(
+                    "label",
+                    {
+                      style: {
+                        display: "block",
+                        fontSize: "11px",
+                        color: "#6b7280",
+                        marginBottom: "4px"
+                      },
+                      children: "Weight"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(
+                    "select",
+                    {
+                      value: theme.variables[varKey("weight")] ?? "",
+                      onChange: (e) => theme.setVariable(varKey("weight"), e.target.value),
+                      style: {
+                        width: "100%",
+                        height: "30px",
+                        fontSize: "12px",
+                        padding: "0 6px",
+                        border: "1px solid #e5e7eb",
+                        borderRadius: "4px",
+                        color: "#374151",
+                        background: "#ffffff",
+                        cursor: "pointer"
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx("option", { value: "", children: "Default" }),
+                        fontWeightOptions.map((w) => /* @__PURE__ */ jsx("option", { value: w.value, children: w.label }, w.value))
+                      ]
+                    }
+                  )
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                display: "grid",
+                gridTemplateColumns: "1fr 1fr",
+                gap: "8px",
+                marginBottom: "8px"
               },
               children: [
-                "Reset ",
-                group.label
+                /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx(
+                    "label",
+                    {
+                      style: {
+                        display: "block",
+                        fontSize: "11px",
+                        color: "#6b7280",
+                        marginBottom: "4px"
+                      },
+                      children: "Letter Spacing"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      type: "text",
+                      value: theme.variables[varKey("spacing")] ?? "",
+                      onChange: (e) => theme.setVariable(varKey("spacing"), e.target.value),
+                      placeholder: "e.g. -0.02em",
+                      style: {
+                        width: "100%",
+                        height: "30px",
+                        fontSize: "12px",
+                        fontFamily: "monospace",
+                        padding: "0 8px",
+                        border: "1px solid #e5e7eb",
+                        borderRadius: "4px",
+                        color: "#374151",
+                        background: "#ffffff",
+                        boxSizing: "border-box"
+                      }
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx(
+                    "label",
+                    {
+                      style: {
+                        display: "block",
+                        fontSize: "11px",
+                        color: "#6b7280",
+                        marginBottom: "4px"
+                      },
+                      children: "Line Height"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      type: "text",
+                      value: theme.variables[varKey("line-height")] ?? "",
+                      onChange: (e) => theme.setVariable(varKey("line-height"), e.target.value),
+                      placeholder: "e.g. 1.5",
+                      style: {
+                        width: "100%",
+                        height: "30px",
+                        fontSize: "12px",
+                        fontFamily: "monospace",
+                        padding: "0 8px",
+                        border: "1px solid #e5e7eb",
+                        borderRadius: "4px",
+                        color: "#374151",
+                        background: "#ffffff",
+                        boxSizing: "border-box"
+                      }
+                    }
+                  )
+                ] })
               ]
             }
+          ),
+          /* @__PURE__ */ jsx(
+            ColorInputRow,
+            {
+              label: "Color",
+              value: theme.variables[varKey("color")] ?? "var(--canvas-text)",
+              onChange: (val) => theme.setVariable(varKey("color"), val),
+              variableOptions: typographyColorOptions
+            }
+          ),
+          hasMutedColor && /* @__PURE__ */ jsx(
+            ColorInputRow,
+            {
+              label: "Muted Color",
+              value: theme.variables[varKey("color-muted")] ?? "var(--canvas-text-muted)",
+              onChange: (val) => theme.setVariable(varKey("color-muted"), val),
+              variableOptions: typographyColorOptions
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                display: "flex",
+                justifyContent: "flex-end",
+                marginTop: "8px"
+              },
+              children: /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  onClick: () => theme.resetCategory("--typo-" + prefix),
+                  style: {
+                    fontSize: "11px",
+                    color: "#6b7280",
+                    background: "none",
+                    border: "none",
+                    cursor: "pointer",
+                    padding: "4px 8px",
+                    borderRadius: "4px"
+                  },
+                  onMouseEnter: (e) => {
+                    e.currentTarget.style.color = "#374151";
+                    e.currentTarget.style.background = "#f3f4f6";
+                  },
+                  onMouseLeave: (e) => {
+                    e.currentTarget.style.color = "#6b7280";
+                    e.currentTarget.style.background = "none";
+                  },
+                  children: [
+                    "Reset ",
+                    label
+                  ]
+                }
+              )
+            }
           )
         ] })
       ]
@@ -24552,15 +26477,24 @@ var sizeFields = [
   { suffix: "-px", label: "Padding X" },
   { suffix: "-radius", label: "Radius" },
   { suffix: "-font-weight", label: "Weight" },
-  { suffix: "-letter-spacing", label: "Spacing" }
+  { suffix: "-letter-spacing", label: "Spacing" },
+  { suffix: "-font-family", label: "Font Family" }
 ];
-var colorFields = [
-  { suffix: "-bg", label: "Background" },
-  { suffix: "-text", label: "Text" },
-  { suffix: "-border", label: "Border" },
-  { suffix: "-bg-hover", label: "Bg Hover" },
-  { suffix: "-text-hover", label: "Text Hover" },
-  { suffix: "-border-hover", label: "Border Hover" }
+var buttonColorVariableOptions = [
+  { value: "var(--canvas-primary)", label: "Primary" },
+  { value: "var(--canvas-primary-dark)", label: "Primary Dark" },
+  { value: "var(--canvas-primary-foreground)", label: "Primary Text" },
+  { value: "var(--canvas-background)", label: "Background" },
+  { value: "var(--canvas-surface)", label: "Surface" },
+  { value: "var(--canvas-surface-hover)", label: "Surface Hover" },
+  { value: "var(--canvas-surface-brand)", label: "Brand Surface" },
+  { value: "var(--canvas-outline-bg)", label: "Outline Bg" },
+  { value: "var(--canvas-text)", label: "Text" },
+  { value: "var(--canvas-text-muted)", label: "Text Muted" },
+  { value: "var(--canvas-border)", label: "Border" },
+  { value: "var(--canvas-border-input)", label: "Input Border" },
+  { value: "var(--canvas-destructive)", label: "Destructive" },
+  { value: "var(--canvas-transparent)", label: "Transparent" }
 ];
 function ButtonsPanel({ theme }) {
   return /* @__PURE__ */ jsxs("div", { "data-theme-drawer-panel": true, className: "flex flex-col gap-5 p-4", children: [
@@ -24569,9 +26503,9 @@ function ButtonsPanel({ theme }) {
         "h3",
         {
           style: {
-            fontSize: "13px",
+            fontSize: "11px",
             fontWeight: 600,
-            color: "#374151",
+            color: "#6b7280",
             textTransform: "uppercase",
             letterSpacing: "0.05em",
             marginBottom: "12px"
@@ -24582,21 +26516,75 @@ function ButtonsPanel({ theme }) {
       buttonSizeConfigs.map((size) => /* @__PURE__ */ jsx(SizeGroup, { size, theme }, size.id))
     ] }),
     /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx(
-        "h3",
+      /* @__PURE__ */ jsxs(
+        "div",
         {
           style: {
-            fontSize: "13px",
-            fontWeight: 600,
-            color: "#374151",
-            textTransform: "uppercase",
-            letterSpacing: "0.05em",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
             marginBottom: "12px"
           },
-          children: "Button Colors"
+          children: [
+            /* @__PURE__ */ jsx(
+              "h3",
+              {
+                style: {
+                  fontSize: "11px",
+                  fontWeight: 600,
+                  color: "#6b7280",
+                  textTransform: "uppercase",
+                  letterSpacing: "0.05em"
+                },
+                children: "Color Styles"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: theme.addCustomButtonStyle,
+                style: {
+                  fontSize: "11px",
+                  fontWeight: 500,
+                  color: "#1165ef",
+                  background: "none",
+                  border: "1px solid #e5e7eb",
+                  cursor: "pointer",
+                  padding: "4px 10px",
+                  borderRadius: "4px",
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "4px"
+                },
+                children: "+ Add Style"
+              }
+            )
+          ]
         }
       ),
-      defaultButtonColorStyles.map((style) => /* @__PURE__ */ jsx(ColorGroup, { style, theme }, style.id))
+      defaultButtonColorStyles.map((style) => /* @__PURE__ */ jsx(ButtonColorGroup, { style, theme }, style.id)),
+      theme.customButtonStyles.length > 0 && /* @__PURE__ */ jsxs("div", { style: { marginTop: "16px", paddingTop: "16px", borderTop: "1px solid #e5e7eb" }, children: [
+        /* @__PURE__ */ jsx(
+          "h4",
+          {
+            style: {
+              fontSize: "11px",
+              fontWeight: 600,
+              color: "#6b7280",
+              marginBottom: "12px"
+            },
+            children: "Custom Styles"
+          }
+        ),
+        theme.customButtonStyles.map((style) => /* @__PURE__ */ jsx(
+          CustomButtonColorGroup,
+          {
+            style,
+            theme
+          },
+          style.id
+        ))
+      ] })
     ] })
   ] });
 }
@@ -24692,7 +26680,18 @@ function SizeGroup({
                       children: field.label
                     }
                   ),
-                  /* @__PURE__ */ jsx(
+                  field.suffix === "-font-family" ? /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      style: {
+                        flex: 1,
+                        fontSize: "12px",
+                        color: "#9ca3af",
+                        fontStyle: "italic"
+                      },
+                      children: "Uses Button Text style"
+                    }
+                  ) : /* @__PURE__ */ jsx(
                     "input",
                     {
                       type: "text",
@@ -24720,7 +26719,7 @@ function SizeGroup({
     }
   );
 }
-function ColorGroup({
+function ButtonColorGroup({
   style,
   theme
 }) {
@@ -24770,52 +26769,287 @@ function ColorGroup({
             ]
           }
         ),
-        expanded && /* @__PURE__ */ jsx("div", { style: { padding: "10px 12px" }, className: "flex flex-col gap-2", children: colorFields.map((field) => {
-          const key = `${prefix}${field.suffix}`;
-          return /* @__PURE__ */ jsxs(
-            "div",
-            {
-              style: {
-                display: "flex",
-                alignItems: "center",
-                gap: "8px"
-              },
-              children: [
+        expanded && /* @__PURE__ */ jsxs("div", { style: { padding: "10px 12px" }, className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ jsxs("div", { style: { marginBottom: "8px" }, children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                style: {
+                  fontSize: "11px",
+                  fontWeight: 600,
+                  color: "#9ca3af",
+                  textTransform: "uppercase",
+                  letterSpacing: "0.05em"
+                },
+                children: "Normal"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              ColorInputRow,
+              {
+                label: "Background",
+                value: theme.variables[`${prefix}-bg`] ?? "",
+                onChange: (val) => theme.setVariable(`${prefix}-bg`, val),
+                variableOptions: buttonColorVariableOptions
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              ColorInputRow,
+              {
+                label: "Text",
+                value: theme.variables[`${prefix}-text`] ?? "",
+                onChange: (val) => theme.setVariable(`${prefix}-text`, val),
+                variableOptions: buttonColorVariableOptions
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              ColorInputRow,
+              {
+                label: "Border",
+                value: theme.variables[`${prefix}-border`] ?? "",
+                onChange: (val) => theme.setVariable(`${prefix}-border`, val),
+                variableOptions: buttonColorVariableOptions
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                style: {
+                  fontSize: "11px",
+                  fontWeight: 600,
+                  color: "#9ca3af",
+                  textTransform: "uppercase",
+                  letterSpacing: "0.05em"
+                },
+                children: "Hover"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              ColorInputRow,
+              {
+                label: "Background",
+                value: theme.variables[`${prefix}-bg-hover`] ?? "",
+                onChange: (val) => theme.setVariable(`${prefix}-bg-hover`, val),
+                variableOptions: buttonColorVariableOptions
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              ColorInputRow,
+              {
+                label: "Text",
+                value: theme.variables[`${prefix}-text-hover`] ?? "",
+                onChange: (val) => theme.setVariable(`${prefix}-text-hover`, val),
+                variableOptions: buttonColorVariableOptions
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              ColorInputRow,
+              {
+                label: "Border",
+                value: theme.variables[`${prefix}-border-hover`] ?? "",
+                onChange: (val) => theme.setVariable(`${prefix}-border-hover`, val),
+                variableOptions: buttonColorVariableOptions
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function CustomButtonColorGroup({
+  style,
+  theme
+}) {
+  const [expanded, setExpanded] = React13__default.useState(false);
+  const [editing, setEditing] = React13__default.useState(false);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        border: "1px solid #e5e7eb",
+        borderRadius: "8px",
+        marginBottom: "8px",
+        overflow: "hidden"
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              width: "100%",
+              padding: "10px 12px",
+              background: "#f9fafb"
+            },
+            children: [
+              editing ? /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "text",
+                  value: style.label,
+                  onChange: (e) => theme.updateCustomButtonStyle(style.id, { label: e.target.value }),
+                  onBlur: () => setEditing(false),
+                  onKeyDown: (e) => e.key === "Enter" && setEditing(false),
+                  autoFocus: true,
+                  style: {
+                    fontSize: "13px",
+                    fontWeight: 600,
+                    color: "#374151",
+                    border: "1px solid #e5e7eb",
+                    borderRadius: "4px",
+                    padding: "2px 6px",
+                    background: "#ffffff",
+                    flex: 1
+                  }
+                }
+              ) : /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: () => setExpanded(!expanded),
+                  style: {
+                    flex: 1,
+                    textAlign: "left",
+                    fontSize: "13px",
+                    fontWeight: 600,
+                    color: "#374151",
+                    background: "none",
+                    border: "none",
+                    cursor: "pointer"
+                  },
+                  onDoubleClick: (e) => {
+                    e.stopPropagation();
+                    setEditing(true);
+                  },
+                  children: style.label
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "4px" }, children: [
                 /* @__PURE__ */ jsx(
-                  "label",
+                  "button",
                   {
+                    onClick: () => theme.deleteCustomButtonStyle(style.id),
                     style: {
-                      fontSize: "12px",
-                      color: "#6b7280",
-                      width: "80px",
-                      flexShrink: 0
+                      fontSize: "11px",
+                      color: "#dc2626",
+                      background: "none",
+                      border: "none",
+                      cursor: "pointer",
+                      padding: "2px 6px"
                     },
-                    children: field.label
+                    children: "Delete"
                   }
                 ),
                 /* @__PURE__ */ jsx(
-                  "input",
+                  "button",
                   {
-                    type: "text",
-                    value: theme.variables[key] ?? "",
-                    onChange: (e) => theme.setVariable(key, e.target.value),
+                    onClick: () => setExpanded(!expanded),
                     style: {
-                      flex: 1,
-                      fontSize: "12px",
-                      fontFamily: "monospace",
-                      padding: "4px 8px",
-                      border: "1px solid #e5e7eb",
-                      borderRadius: "4px",
-                      color: "#374151",
-                      background: "#ffffff"
-                    }
+                      fontSize: "11px",
+                      color: "#9ca3af",
+                      background: "none",
+                      border: "none",
+                      cursor: "pointer",
+                      transform: expanded ? "rotate(180deg)" : "rotate(0deg)",
+                      transition: "transform 150ms"
+                    },
+                    children: "\u25BC"
                   }
                 )
-              ]
-            },
-            key
-          );
-        }) })
+              ] })
+            ]
+          }
+        ),
+        expanded && /* @__PURE__ */ jsxs("div", { style: { padding: "10px 12px" }, className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ jsxs("div", { style: { marginBottom: "8px" }, children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                style: {
+                  fontSize: "11px",
+                  fontWeight: 600,
+                  color: "#9ca3af",
+                  textTransform: "uppercase",
+                  letterSpacing: "0.05em"
+                },
+                children: "Normal"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              ColorInputRow,
+              {
+                label: "Background",
+                value: style.bg,
+                onChange: (val) => theme.updateCustomButtonStyle(style.id, { bg: val }),
+                variableOptions: buttonColorVariableOptions
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              ColorInputRow,
+              {
+                label: "Text",
+                value: style.text,
+                onChange: (val) => theme.updateCustomButtonStyle(style.id, { text: val }),
+                variableOptions: buttonColorVariableOptions
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              ColorInputRow,
+              {
+                label: "Border",
+                value: style.border,
+                onChange: (val) => theme.updateCustomButtonStyle(style.id, { border: val }),
+                variableOptions: buttonColorVariableOptions
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                style: {
+                  fontSize: "11px",
+                  fontWeight: 600,
+                  color: "#9ca3af",
+                  textTransform: "uppercase",
+                  letterSpacing: "0.05em"
+                },
+                children: "Hover"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              ColorInputRow,
+              {
+                label: "Background",
+                value: style.bgHover,
+                onChange: (val) => theme.updateCustomButtonStyle(style.id, { bgHover: val }),
+                variableOptions: buttonColorVariableOptions
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              ColorInputRow,
+              {
+                label: "Text",
+                value: style.textHover,
+                onChange: (val) => theme.updateCustomButtonStyle(style.id, { textHover: val }),
+                variableOptions: buttonColorVariableOptions
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              ColorInputRow,
+              {
+                label: "Border",
+                value: style.borderHover,
+                onChange: (val) => theme.updateCustomButtonStyle(style.id, { borderHover: val }),
+                variableOptions: buttonColorVariableOptions
+              }
+            )
+          ] })
+        ] })
       ]
     }
   );
@@ -25221,6 +27455,7 @@ function ExportPanel({ theme }) {
 }
 var panelConfig = [
   { id: "colors", label: "Colors" },
+  { id: "images", label: "Images" },
   { id: "typography", label: "Type" },
   { id: "buttons", label: "Buttons" },
   { id: "inputs", label: "Inputs" },
@@ -25257,7 +27492,8 @@ var drawerStyles = {
     background: "#f9fafb",
     padding: "0",
     gap: "0",
-    flexShrink: 0
+    flexShrink: 0,
+    overflowX: "auto"
   },
   tab: (active) => ({
     flex: 1,
@@ -25270,8 +27506,18 @@ var drawerStyles = {
     borderBottom: active ? "2px solid #1f2937" : "2px solid transparent",
     cursor: "pointer",
     transition: "color 150ms, border-color 150ms",
-    textAlign: "center"
-  })
+    textAlign: "center",
+    whiteSpace: "nowrap"
+  }),
+  footer: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "8px",
+    padding: "12px 16px",
+    borderTop: "1px solid #e5e7eb",
+    flexShrink: 0,
+    background: "#ffffff"
+  }
 };
 function PaletteIcon6() {
   return /* @__PURE__ */ jsxs(
@@ -25301,20 +27547,66 @@ function ThemeDrawer({
   defaultOpen = false,
   panels: enabledPanels,
   onThemeChange,
+  onBrandingChange,
+  onImagesChange,
+  onImageUpload,
   initialOverrides,
-  storageKey
+  storageKey,
+  title = "Design Variables",
+  width = 464
 }) {
   if (devOnly && process.env.NODE_ENV === "production") {
     return null;
   }
   const [open, setOpen] = useState(defaultOpen);
   const [activeTab, setActiveTab] = useState("colors");
+  const [resetConfirmOpen, setResetConfirmOpen] = useState(false);
   const theme = useThemeState({
     storageKey,
     initialOverrides,
-    onThemeChange
+    onThemeChange,
+    onBrandingChange,
+    onImagesChange
   });
+  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",
@@ -25333,13 +27625,17 @@ 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",
         "data-theme-drawer": true,
-        className: "!p-0 !gap-0 !w-[380px] !max-w-[380px]",
-        style: drawerStyles.container,
+        className: `!p-0 !gap-0 !w-[${width}px] !max-w-[${width}px]`,
+        style: {
+          ...drawerStyles.container,
+          width: `${width}px`,
+          maxWidth: `${width}px`
+        },
         children: [
           /* @__PURE__ */ jsx(
             SheetHeader,
@@ -25360,7 +27656,7 @@ function ThemeDrawer({
                       color: "#1f2937",
                       fontFamily: drawerStyles.container.fontFamily
                     },
-                    children: "Theme Editor"
+                    children: title
                   }
                 ),
                 /* @__PURE__ */ jsx(
@@ -25372,7 +27668,7 @@ function ThemeDrawer({
                       marginTop: "2px",
                       fontFamily: drawerStyles.container.fontFamily
                     },
-                    children: "Customize your design system"
+                    children: theme.unsavedChangesCount > 0 ? `${theme.unsavedChangesCount} unsaved change${theme.unsavedChangesCount !== 1 ? "s" : ""}` : "Customize your design system"
                   }
                 )
               ] })
@@ -25387,12 +27683,158 @@ function ThemeDrawer({
             },
             panel.id
           )) }),
-          /* @__PURE__ */ jsx(ScrollArea, { className: "flex-1 overflow-hidden", style: { height: "calc(100vh - 140px)" }, children: /* @__PURE__ */ jsxs("div", { style: drawerStyles.container, children: [
-            activeTab === "colors" && /* @__PURE__ */ jsx(ColorsPanel, { theme }),
-            activeTab === "typography" && /* @__PURE__ */ jsx(TypographyPanel, { theme }),
-            activeTab === "buttons" && /* @__PURE__ */ jsx(ButtonsPanel, { theme }),
-            activeTab === "inputs" && /* @__PURE__ */ jsx(InputsPanel, { theme }),
-            activeTab === "export" && /* @__PURE__ */ jsx(ExportPanel, { theme })
+          /* @__PURE__ */ jsx(
+            ScrollArea,
+            {
+              className: "flex-1 overflow-hidden",
+              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 }),
+                activeTab === "typography" && /* @__PURE__ */ jsx(TypographyPanel, { theme }),
+                activeTab === "buttons" && /* @__PURE__ */ jsx(ButtonsPanel, { theme }),
+                activeTab === "inputs" && /* @__PURE__ */ jsx(InputsPanel, { theme }),
+                activeTab === "export" && /* @__PURE__ */ jsx(ExportPanel, { theme })
+              ] })
+            }
+          ),
+          showFooter && /* @__PURE__ */ jsx("div", { style: drawerStyles.footer, children: resetConfirmOpen ? /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                display: "flex",
+                flexDirection: "column",
+                gap: "8px",
+                width: "100%"
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    style: {
+                      fontSize: "13px",
+                      color: "#374151",
+                      textAlign: "center"
+                    },
+                    children: "Reset all settings to defaults?"
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    style: {
+                      display: "flex",
+                      gap: "8px",
+                      justifyContent: "center"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          onClick: () => setResetConfirmOpen(false),
+                          style: {
+                            fontSize: "13px",
+                            fontWeight: 500,
+                            color: "#374151",
+                            background: "#ffffff",
+                            border: "1px solid #e5e7eb",
+                            cursor: "pointer",
+                            padding: "6px 16px",
+                            borderRadius: "6px"
+                          },
+                          children: "Cancel"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          onClick: handleReset,
+                          style: {
+                            fontSize: "13px",
+                            fontWeight: 500,
+                            color: "#ffffff",
+                            background: "#dc2626",
+                            border: "1px solid #dc2626",
+                            cursor: "pointer",
+                            padding: "6px 16px",
+                            borderRadius: "6px"
+                          },
+                          children: "Reset All"
+                        }
+                      )
+                    ]
+                  }
+                )
+              ]
+            }
+          ) : /* @__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"
+              }
+            )
           ] }) })
         ]
       }
@@ -25419,6 +27861,6 @@ function getTopLevelScreens(allScreens) {
   return allScreens.filter((s) => !s.parentId);
 }
 
-export { AccountSettingsShell, ActivityFeed, Avatar, AvatarFallback, AvatarImage, BadgesCard, BlogCards, BottomInputChatWidget, Button, Calendar, CanvasItem, CategoryGrid, CenteredHero, ChatBubble, ChatDateSeparator, ChatInput, ChatMessageList, Checkbox, CheckboxWithLabel, CircularProgressBar, CircularProgressBarList, ComponentPalette, ComponentSearch, ContentDropzone, ContentWithImage, CoreValuesGrid, CreditCardDisplay, CtaBanner, CustomComponentHelper, DashboardHeader, DashboardShell, DateInput, DescriptionCard, DestinationCards, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DonutChartWidget, DoubleSidebar, DoubleSidebarShell, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, FaqAccordion, FaqsTable, FeatureWithImage, FeaturedNewsCards, FeaturedPlaces, FeaturesComparison, FileUploader, FilterPopover, FixedColumnDataTable, FlairBanner, FooterNavbar, FormGroup, GallerySection, GradientBanner, GraphMetricTilesDemo, GridTilesList, Header, HeroDarkCentered, HeroDarkWithImage, HeroFullwidthImage, HeroSection, HowItWorks, IconSidebar, IconSidebarShell, ImageFeedWithNestedComments, ImageUploader, InfoCard, Input, Label2 as Label, LargeImageLabelsList, Sidebar2 as LayoutSidebar, LineChartWidget, LineTabs, LinksCard, Loader, LoginBrandingPanel, MenuSection, MenufocusTemplate, MessengerInput, MessengerSidebar, MetricCard, MetricCardsRow, MetricListCard, MetricsSection, MobileBottomNav, MobileMenuShell, MonthlyCalendarWidget, MultiselectCheckboxField, MultiselectTags, MultistepProgressBarShell, MultistepShell, MultistepSidebarShell, NestedCommentsTable, NestedDataTable, OfficeLocations, PageHeaderSection, Pagination, ParticipantList, PersonaCard, PersonaGrid, PillTabs, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PortfolioCard, PreviewBrandingContext, PricingCards, PricingCta, ProfileCard, ProfileGridTilesList, ProfileImageUploader, ProgressBar, ProgressMetricCard, ProjectContextShell, PromptChipsRow, PromptTemplate, RadioGroup2 as RadioGroup, RadioGroupItem, RangeInput, ReviewsGrid, ReviewsTable, ScreenFlowchart, ScreenPromptBuilder, ScreenPromptTemplate, ScrollArea, ScrollBar, SearchBar, SearchBarShell, SearchSidebar, Searchbox, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SelectablePills, Separator3 as Separator, SettingsListRow, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarNav, SidebarProfileCard, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, SkillsCard, Slider, SlideshowGridTiles, SocialFeed, SocialProof, StandardDataTable, StandardListWithImage, StandardPageShell, StatsCard, StepTracker, Switch, Tabs, TabsContent, TabsList, TabsTrigger, TeamCardsGrid, TeamCircularGrid, TestimonialCarousel, TextInput, Textarea, ThemeContext, ThemeDrawer, ThemeProvider, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TwoColumnWidgets, Typography, UpvotingPostsTable, VerticalHowItWorks, VerticalMultistepShell, VerticalStepTracker, VideoChatControls, VideoContentSection, VideoPlaylistCard, VideoPlaylistItem, WebcamPreview, YouTubePlayer, accountTabs, allColorVariables, blocks, broadcastCSSVariables, buttonVariants, canvasBlocks, cn, colorVariables, defaultBranding, defaultButtonColorStyles, defaultButtonColors, defaultButtonSizes, defaultColors, defaultCustomButtonStyles, defaultDoubleSidebarSections, defaultIconNavItems, defaultImages, defaultInputSizes, defaultProgressBarSteps, defaultSteps, defaultSupportLinks, defaultTypography, defaultVerticalSteps, getChildScreens, getScreenUrl, getTopLevelScreens, groupModalDrawerBlocks, layoutPrimitives, layoutShells, marketingBlocks, pageTemplates, pricingBlocks, removeCSSVariables, setCSSVariable, setCSSVariables, setupCSSVariableListener, useCSSVariableSync, useIsMobile, usePreviewBranding, useSidebar, useThemeBrandAssets, useThemeBranding, useThemeImages, videoBlocks };
+export { AccountSettingsShell, ActivityFeed, Avatar, AvatarFallback, AvatarImage, BadgesCard, BlogCards, BottomInputChatWidget, Button, Calendar, CanvasItem, CategoryGrid, CenteredHero, ChatBubble, ChatDateSeparator, ChatInput, ChatMessageList, Checkbox, CheckboxWithLabel, CircularProgressBar, CircularProgressBarList, ColorInputRow, ComponentPalette, ComponentSearch, ContentDropzone, ContentWithImage, CoreValuesGrid, CreditCardDisplay, CtaBanner, CustomComponentHelper, DashboardHeader, DashboardShell, DateInput, DescriptionCard, DestinationCards, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DonutChartWidget, DoubleSidebar, DoubleSidebarShell, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, FaqAccordion, FaqsTable, FeatureWithImage, FeaturedNewsCards, FeaturedPlaces, FeaturesComparison, FileUploader, FilterPopover, FixedColumnDataTable, FlairBanner, FooterNavbar, FormGroup, GallerySection, GradientBanner, GraphMetricTilesDemo, GridTilesList, Header, HeroDarkCentered, HeroDarkWithImage, HeroFullwidthImage, HeroSection, HowItWorks, HslColorPicker, IconSidebar, IconSidebarShell, ImageFeedWithNestedComments, ImageUploader, InfoCard, Input, Label2 as Label, LargeImageLabelsList, Sidebar2 as LayoutSidebar, LineChartWidget, LineTabs, LinksCard, Loader, LoginBrandingPanel, MenuSection, MenufocusTemplate, MessengerInput, MessengerSidebar, MetricCard, MetricCardsRow, MetricListCard, MetricsSection, MobileBottomNav, MobileMenuShell, MonthlyCalendarWidget, MultiselectCheckboxField, MultiselectTags, MultistepProgressBarShell, MultistepShell, MultistepSidebarShell, NestedCommentsTable, NestedDataTable, OfficeLocations, PageHeaderSection, Pagination, ParticipantList, PersonaCard, PersonaGrid, PillTabs, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PortfolioCard, PreviewBrandingContext, PricingCards, PricingCta, ProfileCard, ProfileGridTilesList, ProfileImageUploader, ProgressBar, ProgressMetricCard, ProjectContextShell, PromptChipsRow, PromptTemplate, RadioGroup2 as RadioGroup, RadioGroupItem, RangeInput, ReviewsGrid, ReviewsTable, ScreenFlowchart, ScreenPromptBuilder, ScreenPromptTemplate, ScrollArea, ScrollBar, SearchBar, SearchBarShell, SearchSidebar, Searchbox, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SelectablePills, Separator3 as Separator, SettingsListRow, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarNav, SidebarProfileCard, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, SkillsCard, Slider, SlideshowGridTiles, SocialFeed, SocialProof, StandardDataTable, StandardListWithImage, StandardPageShell, StatsCard, StepTracker, Switch, Tabs, TabsContent, TabsList, TabsTrigger, TeamCardsGrid, TeamCircularGrid, TestimonialCarousel, TextInput, Textarea, ThemeContext, ThemeDrawer, ThemeProvider, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TwoColumnWidgets, Typography, UpvotingPostsTable, VerticalHowItWorks, VerticalMultistepShell, VerticalStepTracker, VideoChatControls, VideoContentSection, VideoPlaylistCard, VideoPlaylistItem, WebcamPreview, YouTubePlayer, accountTabs, allColorVariables, blocks, broadcastCSSVariables, buttonVariants, canvasBlocks, cn, colorVariables, defaultBranding, defaultButtonColorStyles, defaultButtonColors, defaultButtonSizes, defaultColors, defaultCustomButtonStyles, defaultDoubleSidebarSections, defaultIconNavItems, defaultImages, defaultInputSizes, defaultProgressBarSteps, defaultSteps, defaultSupportLinks, defaultTypography, defaultVerticalSteps, getChildScreens, getScreenUrl, getTopLevelScreens, groupModalDrawerBlocks, layoutPrimitives, layoutShells, marketingBlocks, pageTemplates, pricingBlocks, removeCSSVariables, setCSSVariable, setCSSVariables, setupCSSVariableListener, useCSSVariableSync, useIsMobile, usePreviewBranding, useSidebar, useThemeBrandAssets, useThemeBranding, useThemeImages, videoBlocks };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map