canvas-ui-sdk 0.3.0 → 0.3.1

package/dist/index.d.ts

@@ -4754,12 +4754,21 @@ interface ThemeDrawerProps {
     onBrandingChange?: (branding: BrandingState) => void;
     onImagesChange?: (images: Record<ImageKey, string>) => void;
     onImageUpload?: (key: ImageKey, file: File) => Promise<string>;
+    onSave?: (themeData: {
+        overrides: Record<string, string>;
+        branding: BrandingState;
+        images: Record<ImageKey, string>;
+        customButtonStyles: CustomButtonStyle[];
+    }) => void;
     initialOverrides?: Record<string, string>;
+    initialBranding?: BrandingState;
+    initialImages?: Record<ImageKey, string>;
+    initialCustomButtonStyles?: CustomButtonStyle[];
     storageKey?: string;
     title?: string;
     width?: number;
 }
-declare function ThemeDrawer({ devOnly, triggerPosition, defaultOpen, panels: enabledPanels, onThemeChange, onBrandingChange, onImagesChange, onImageUpload, initialOverrides, storageKey, title, width, }: ThemeDrawerProps): react_jsx_runtime.JSX.Element | null;
+declare function ThemeDrawer({ devOnly, triggerPosition, defaultOpen, panels: enabledPanels, onThemeChange, onBrandingChange, onImagesChange, onImageUpload, onSave, initialOverrides, initialBranding, initialImages, initialCustomButtonStyles, storageKey, title, width, }: ThemeDrawerProps): react_jsx_runtime.JSX.Element | null;
 
 interface HslColorPickerProps {
     value: string;

package/dist/index.js

@@ -165,7 +165,8 @@ var sizeStyles = {
     fontSize: "var(--btn-mini-font-size)",
     borderRadius: "var(--btn-mini-radius)",
     fontWeight: "var(--btn-mini-font-weight)",
-    letterSpacing: "var(--btn-mini-letter-spacing)"
+    letterSpacing: "var(--btn-mini-letter-spacing)",
+    fontFamily: "var(--btn-mini-font-family, var(--typo-button-font, var(--typo-global-font)))"
   },
   sm: {
     height: "var(--btn-small-height)",
@@ -174,7 +175,8 @@ var sizeStyles = {
     fontSize: "var(--btn-small-font-size)",
     borderRadius: "var(--btn-small-radius)",
     fontWeight: "var(--btn-small-font-weight)",
-    letterSpacing: "var(--btn-small-letter-spacing)"
+    letterSpacing: "var(--btn-small-letter-spacing)",
+    fontFamily: "var(--btn-small-font-family, var(--typo-button-font, var(--typo-global-font)))"
   },
   default: {
     height: "var(--btn-standard-height)",
@@ -183,7 +185,8 @@ var sizeStyles = {
     fontSize: "var(--btn-standard-font-size)",
     borderRadius: "var(--btn-standard-radius)",
     fontWeight: "var(--btn-standard-font-weight)",
-    letterSpacing: "var(--btn-standard-letter-spacing)"
+    letterSpacing: "var(--btn-standard-letter-spacing)",
+    fontFamily: "var(--btn-standard-font-family, var(--typo-button-font, var(--typo-global-font)))"
   },
   lg: {
     height: "var(--btn-large-height)",
@@ -192,7 +195,8 @@ var sizeStyles = {
     fontSize: "var(--btn-large-font-size)",
     borderRadius: "var(--btn-large-radius)",
     fontWeight: "var(--btn-large-font-weight)",
-    letterSpacing: "var(--btn-large-letter-spacing)"
+    letterSpacing: "var(--btn-large-letter-spacing)",
+    fontFamily: "var(--btn-large-font-family, var(--typo-button-font, var(--typo-global-font)))"
   }
 };
 var canvasVariants = ["primary", "primary-outline", "primary-neutral", "neutral", "neutral-delete", "delete"];
@@ -4560,19 +4564,24 @@ function Sidebar2({
 }
 
 // src/lib/css-variable-sync.ts
+function getStyleTarget() {
+  return document.body ?? document.documentElement;
+}
 function setCSSVariable(name, value) {
-  document.documentElement.style.setProperty(name, value);
+  getStyleTarget().style.setProperty(name, value);
   broadcastCSSVariables({ [name]: value });
 }
 function setCSSVariables(variables) {
+  const target = getStyleTarget();
   Object.entries(variables).forEach(([name, value]) => {
-    document.documentElement.style.setProperty(name, value);
+    target.style.setProperty(name, value);
   });
   broadcastCSSVariables(variables);
 }
 function removeCSSVariables(names) {
+  const target = getStyleTarget();
   names.forEach((name) => {
-    document.documentElement.style.removeProperty(name);
+    target.style.removeProperty(name);
   });
   const iframes = document.querySelectorAll("iframe");
   iframes.forEach((iframe) => {
@@ -24230,6 +24239,86 @@ function isVariableReference(value) {
   return value?.startsWith("var(") ?? false;
 }
 
+// src/components/theme-drawer/components/font-config.ts
+var googleFontFamilies = {
+  // Sans-Serif
+  Inter: "Inter",
+  Geist: "Geist",
+  "Plus Jakarta Sans": "Plus+Jakarta+Sans",
+  Poppins: "Poppins",
+  "IBM Plex Sans": "IBM+Plex+Sans",
+  Roboto: "Roboto",
+  "Open Sans": "Open+Sans",
+  "Noto Sans": "Noto+Sans",
+  Montserrat: "Montserrat",
+  Lato: "Lato",
+  Raleway: "Raleway",
+  "DM Sans": "DM+Sans",
+  "Work Sans": "Work+Sans",
+  Manrope: "Manrope",
+  Outfit: "Outfit",
+  "Source Sans 3": "Source+Sans+3",
+  // Serif
+  "Playfair Display": "Playfair+Display",
+  Merriweather: "Merriweather",
+  "Noto Serif": "Noto+Serif",
+  "Libre Baskerville": "Libre+Baskerville",
+  // Monospace
+  "IBM Plex Mono": "IBM+Plex+Mono",
+  "Courier Prime": "Courier+Prime",
+  "Geist Mono": "Geist+Mono"
+};
+var loadedFonts = /* @__PURE__ */ new Set();
+function loadGoogleFont(fontName) {
+  if (loadedFonts.has(fontName)) return;
+  const fontFamily = googleFontFamilies[fontName];
+  if (!fontFamily) return;
+  const link = document.createElement("link");
+  link.rel = "stylesheet";
+  link.href = `https://fonts.googleapis.com/css2?family=${fontFamily}:wght@400;500;600;700&display=swap`;
+  document.head.appendChild(link);
+  loadedFonts.add(fontName);
+}
+var fontsPreloaded = false;
+function preloadAllFonts() {
+  if (fontsPreloaded) return;
+  Object.keys(googleFontFamilies).forEach((fontName) => {
+    loadGoogleFont(fontName);
+  });
+  fontsPreloaded = true;
+}
+var fontOptions = [
+  { value: "Courier Prime", label: "Courier Prime" },
+  { value: "DM Sans", label: "DM Sans" },
+  { value: "Geist", label: "Geist" },
+  { value: "Geist Mono", label: "Geist Mono" },
+  { value: "IBM Plex Mono", label: "IBM Plex Mono" },
+  { value: "IBM Plex Sans", label: "IBM Plex Sans" },
+  { value: "Inter", label: "Inter" },
+  { value: "Lato", label: "Lato" },
+  { value: "Libre Baskerville", label: "Libre Baskerville" },
+  { value: "Manrope", label: "Manrope" },
+  { value: "Merriweather", label: "Merriweather" },
+  { value: "Montserrat", label: "Montserrat" },
+  { value: "Noto Sans", label: "Noto Sans" },
+  { value: "Noto Serif", label: "Noto Serif" },
+  { value: "Open Sans", label: "Open Sans" },
+  { value: "Outfit", label: "Outfit" },
+  { value: "Playfair Display", label: "Playfair Display" },
+  { value: "Plus Jakarta Sans", label: "Plus Jakarta Sans" },
+  { value: "Poppins", label: "Poppins" },
+  { value: "Raleway", label: "Raleway" },
+  { value: "Roboto", label: "Roboto" },
+  { value: "Source Sans 3", label: "Source Sans 3" },
+  { value: "Work Sans", label: "Work Sans" }
+];
+var fontWeightOptions = [
+  { value: "400", label: "Regular (400)" },
+  { value: "500", label: "Medium (500)" },
+  { value: "600", label: "Semibold (600)" },
+  { value: "700", label: "Bold (700)" }
+];
+
 // src/components/theme-drawer/hooks/use-theme-state.ts
 var FONT_VARS = [
   "--typo-h1-font",
@@ -24293,30 +24382,54 @@ function isEqual(a, b) {
   }
   return false;
 }
+var FONT_VAR_PREFIXES = ["--typo-", "--btn-"];
+var FONT_VAR_SUFFIXES = ["-font", "-font-family"];
+function loadFontsFromOverrides(overrides) {
+  for (const [key, value] of Object.entries(overrides)) {
+    if (!value) continue;
+    const isFontVar = FONT_VAR_PREFIXES.some((p) => key.startsWith(p)) && FONT_VAR_SUFFIXES.some((s) => key.endsWith(s));
+    if (isFontVar) {
+      const fontName = value.replace(/^["']|["']$/g, "").split(",")[0].trim();
+      if (fontName) loadGoogleFont(fontName);
+    }
+  }
+}
 function useThemeState(options) {
   const {
     storageKey = "canvas-ui-theme",
     initialOverrides,
+    initialBranding,
+    initialImages,
+    initialCustomButtonStyles,
     onThemeChange,
     onBrandingChange,
-    onImagesChange
+    onImagesChange,
+    onSave
   } = options ?? {};
   const [savedOverrides, setSavedOverrides] = useState(() => {
     return initialOverrides ?? {};
   });
-  const [savedBranding, setSavedBranding] = useState({ ...defaultBranding });
-  const [savedImages, setSavedImages] = useState({ ...defaultImages });
-  const [savedCustomButtonStyles, setSavedCustomButtonStyles] = useState([
-    ...defaultCustomButtonStyles
-  ]);
+  const [savedBranding, setSavedBranding] = useState(
+    () => initialBranding ?? { ...defaultBranding }
+  );
+  const [savedImages, setSavedImages] = useState(
+    () => initialImages ?? { ...defaultImages }
+  );
+  const [savedCustomButtonStyles, setSavedCustomButtonStyles] = useState(
+    () => initialCustomButtonStyles ?? [...defaultCustomButtonStyles]
+  );
   const [overrides, setOverrides] = useState(() => {
     return initialOverrides ?? {};
   });
-  const [branding, setBrandingState] = useState({ ...defaultBranding });
-  const [images, setImagesState] = useState({ ...defaultImages });
-  const [customButtonStyles, setCustomButtonStyles] = useState([
-    ...defaultCustomButtonStyles
-  ]);
+  const [branding, setBrandingState] = useState(
+    () => initialBranding ?? { ...defaultBranding }
+  );
+  const [images, setImagesState] = useState(
+    () => initialImages ?? { ...defaultImages }
+  );
+  const [customButtonStyles, setCustomButtonStyles] = useState(
+    () => initialCustomButtonStyles ?? [...defaultCustomButtonStyles]
+  );
   const [brandHue, setBrandHueState] = useState(217);
   const [brandVibrancy, setBrandVibrancyState] = useState(1);
   const [syncRelatedColors, setSyncRelatedColorsState] = useState(true);
@@ -24326,6 +24439,8 @@ function useThemeState(options) {
   onBrandingChangeRef.current = onBrandingChange;
   const onImagesChangeRef = useRef(onImagesChange);
   onImagesChangeRef.current = onImagesChange;
+  const onSaveRef = useRef(onSave);
+  onSaveRef.current = onSave;
   const persistToStorage = useCallback(
     (ovr, brd, img, cbs) => {
       try {
@@ -24340,6 +24455,11 @@ function useThemeState(options) {
   );
   useEffect(() => {
     try {
+      if (initialOverrides && Object.keys(initialOverrides).length > 0) {
+        setCSSVariables(initialOverrides);
+        loadFontsFromOverrides(initialOverrides);
+        return;
+      }
       const stored = localStorage.getItem(storageKey);
       if (stored) {
         const parsed = importJSON(stored);
@@ -24348,6 +24468,7 @@ function useThemeState(options) {
             setSavedOverrides(parsed.overrides);
             setOverrides(parsed.overrides);
             setCSSVariables(parsed.overrides);
+            loadFontsFromOverrides(parsed.overrides);
           }
           if (parsed.branding) {
             setSavedBranding(parsed.branding);
@@ -24366,8 +24487,6 @@ function useThemeState(options) {
             setBrandHueState(hsl.h);
           }
         }
-      } else if (initialOverrides) {
-        setCSSVariables(initialOverrides);
       }
     } catch {
     }
@@ -24420,6 +24539,12 @@ function useThemeState(options) {
             setSavedImages(currentImages);
             setSavedCustomButtonStyles(currentCbs);
             persistToStorage(currentOverrides, currentBranding, currentImages, currentCbs);
+            onSaveRef.current?.({
+              overrides: currentOverrides,
+              branding: currentBranding,
+              images: currentImages,
+              customButtonStyles: currentCbs
+            });
             return currentCbs;
           });
           return currentImages;
@@ -24564,7 +24689,7 @@ function useThemeState(options) {
           const defaultHsl = hexToHsl2(defaultColor);
           const newHex = hslToHex2(hue, defaultHsl.s, defaultHsl.l);
           newValues["--canvas-primary"] = newHex;
-          document.documentElement.style.setProperty("--canvas-primary", newHex);
+          (document.body ?? document.documentElement).style.setProperty("--canvas-primary", newHex);
         }
       }
       setOverrides((prev) => {
@@ -24572,7 +24697,7 @@ function useThemeState(options) {
         varsToUpdate.forEach((varName) => {
           if (varName === "--canvas-sidebar-light-active-text" || varName === "--canvas-border-input-focus") {
             newValues[varName] = effectivePrimaryColor;
-            document.documentElement.style.setProperty(varName, effectivePrimaryColor);
+            (document.body ?? document.documentElement).style.setProperty(varName, effectivePrimaryColor);
             return;
           }
           if (varName === "--canvas-primary") return;
@@ -24592,7 +24717,7 @@ function useThemeState(options) {
           );
           const newHex = hslToHex2(hue, newS, newL);
           newValues[varName] = newHex;
-          document.documentElement.style.setProperty(varName, newHex);
+          (document.body ?? document.documentElement).style.setProperty(varName, newHex);
         });
         const next = { ...prev, ...newValues };
         onThemeChangeRef.current?.(next);
@@ -25805,86 +25930,6 @@ function ImageUploadRow({
     }
   );
 }
-
-// src/components/theme-drawer/components/font-config.ts
-var googleFontFamilies = {
-  // Sans-Serif
-  Inter: "Inter",
-  Geist: "Geist",
-  "Plus Jakarta Sans": "Plus+Jakarta+Sans",
-  Poppins: "Poppins",
-  "IBM Plex Sans": "IBM+Plex+Sans",
-  Roboto: "Roboto",
-  "Open Sans": "Open+Sans",
-  "Noto Sans": "Noto+Sans",
-  Montserrat: "Montserrat",
-  Lato: "Lato",
-  Raleway: "Raleway",
-  "DM Sans": "DM+Sans",
-  "Work Sans": "Work+Sans",
-  Manrope: "Manrope",
-  Outfit: "Outfit",
-  "Source Sans 3": "Source+Sans+3",
-  // Serif
-  "Playfair Display": "Playfair+Display",
-  Merriweather: "Merriweather",
-  "Noto Serif": "Noto+Serif",
-  "Libre Baskerville": "Libre+Baskerville",
-  // Monospace
-  "IBM Plex Mono": "IBM+Plex+Mono",
-  "Courier Prime": "Courier+Prime",
-  "Geist Mono": "Geist+Mono"
-};
-var loadedFonts = /* @__PURE__ */ new Set();
-function loadGoogleFont(fontName) {
-  if (loadedFonts.has(fontName)) return;
-  const fontFamily = googleFontFamilies[fontName];
-  if (!fontFamily) return;
-  const link = document.createElement("link");
-  link.rel = "stylesheet";
-  link.href = `https://fonts.googleapis.com/css2?family=${fontFamily}:wght@400;500;600;700&display=swap`;
-  document.head.appendChild(link);
-  loadedFonts.add(fontName);
-}
-var fontsPreloaded = false;
-function preloadAllFonts() {
-  if (fontsPreloaded) return;
-  Object.keys(googleFontFamilies).forEach((fontName) => {
-    loadGoogleFont(fontName);
-  });
-  fontsPreloaded = true;
-}
-var fontOptions = [
-  { value: "Courier Prime", label: "Courier Prime" },
-  { value: "DM Sans", label: "DM Sans" },
-  { value: "Geist", label: "Geist" },
-  { value: "Geist Mono", label: "Geist Mono" },
-  { value: "IBM Plex Mono", label: "IBM Plex Mono" },
-  { value: "IBM Plex Sans", label: "IBM Plex Sans" },
-  { value: "Inter", label: "Inter" },
-  { value: "Lato", label: "Lato" },
-  { value: "Libre Baskerville", label: "Libre Baskerville" },
-  { value: "Manrope", label: "Manrope" },
-  { value: "Merriweather", label: "Merriweather" },
-  { value: "Montserrat", label: "Montserrat" },
-  { value: "Noto Sans", label: "Noto Sans" },
-  { value: "Noto Serif", label: "Noto Serif" },
-  { value: "Open Sans", label: "Open Sans" },
-  { value: "Outfit", label: "Outfit" },
-  { value: "Playfair Display", label: "Playfair Display" },
-  { value: "Plus Jakarta Sans", label: "Plus Jakarta Sans" },
-  { value: "Poppins", label: "Poppins" },
-  { value: "Raleway", label: "Raleway" },
-  { value: "Roboto", label: "Roboto" },
-  { value: "Source Sans 3", label: "Source Sans 3" },
-  { value: "Work Sans", label: "Work Sans" }
-];
-var fontWeightOptions = [
-  { value: "400", label: "Regular (400)" },
-  { value: "500", label: "Medium (500)" },
-  { value: "600", label: "Semibold (600)" },
-  { value: "700", label: "Bold (700)" }
-];
 var typographyColorOptions = [
   { value: "var(--canvas-text)", label: "Text" },
   { value: "var(--canvas-text-muted)", label: "Text Muted" },
@@ -27550,7 +27595,11 @@ function ThemeDrawer({
   onBrandingChange,
   onImagesChange,
   onImageUpload,
+  onSave,
   initialOverrides,
+  initialBranding,
+  initialImages,
+  initialCustomButtonStyles,
   storageKey,
   title = "Design Variables",
   width = 464
@@ -27564,9 +27613,13 @@ function ThemeDrawer({
   const theme = useThemeState({
     storageKey,
     initialOverrides,
+    initialBranding,
+    initialImages,
+    initialCustomButtonStyles,
     onThemeChange,
     onBrandingChange,
-    onImagesChange
+    onImagesChange,
+    onSave
   });
   const { setPreviewBranding, setPreviewImages } = usePreviewBranding();
   useEffect(() => {