@pixldocs/canvas-renderer 0.3.9 → 0.3.10

package/dist/index.cjs

@@ -8575,6 +8575,47 @@ const PreviewCanvas$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.def
   __proto__: null,
   PreviewCanvas
 }, Symbol.toStringTag, { value: "Module" }));
+function applyThemeToConfig(config, themeOverrides) {
+  var _a, _b, _c;
+  if (!themeOverrides || Object.keys(themeOverrides).length === 0) return config;
+  const cloned = JSON.parse(JSON.stringify(config));
+  if ((_a = cloned.themeConfig) == null ? void 0 : _a.variables) {
+    for (const [key, value] of Object.entries(themeOverrides)) {
+      if (cloned.themeConfig.variables[key]) {
+        cloned.themeConfig.variables[key].value = value;
+      }
+    }
+  }
+  const varMap = /* @__PURE__ */ new Map();
+  if ((_b = cloned.themeConfig) == null ? void 0 : _b.variables) {
+    for (const [key, def] of Object.entries(cloned.themeConfig.variables)) {
+      varMap.set(key, themeOverrides[key] ?? def.value);
+    }
+  }
+  function walkAndApply(nodes) {
+    if (!nodes) return;
+    for (const node of nodes) {
+      const bindings = node.themeBindings;
+      if (bindings) {
+        for (const [prop, varName] of Object.entries(bindings)) {
+          const value = varMap.get(varName);
+          if (value !== void 0) {
+            node[prop] = value;
+          }
+        }
+      }
+      if (node.children) walkAndApply(node.children);
+    }
+  }
+  for (const page of cloned.pages || []) {
+    const bgBinding = (_c = page.themeBindings) == null ? void 0 : _c.backgroundColor;
+    if (bgBinding && varMap.has(bgBinding) && page.settings) {
+      page.settings.backgroundColor = varMap.get(bgBinding);
+    }
+    walkAndApply(page.children || []);
+  }
+  return cloned;
+}
 function mapFormDefFieldType(t) {
   if (["text", "email", "tel", "textarea", "date", "url", "number", "toggle", "color", "image"].includes(t)) return t;
   if (t === "currency") return "number";
@@ -10055,7 +10096,7 @@ async function resolveTemplateData(options) {
   return { config, templateName: template.name || "Untitled", templateId };
 }
 async function resolveFromForm(options) {
-  var _a, _b, _c, _d, _e;
+  var _a, _b, _c, _d, _e, _f, _g;
   const { templateId, formSchemaId, sectionState, themeId, supabaseUrl, supabaseAnonKey } = options;
   const [templateRow, formSchemaRow, defaultForm] = await Promise.all([
     fetchRow(supabaseUrl, supabaseAnonKey, "templates", templateId),
@@ -10180,13 +10221,21 @@ async function resolveFromForm(options) {
     Object.keys(repeatableNestedEntryCounts).length > 0 ? repeatableNestedEntryCounts : void 0,
     displayFormatMap.size > 0 ? displayFormatMap : void 0
   );
-  if (themeId && themeId !== "default" && templateConfig.themeConfig) {
+  if ((_d = resolvedConfig.themeConfig) == null ? void 0 : _d.variables) {
+    const baseOverrides = {};
+    for (const [key, def] of Object.entries(resolvedConfig.themeConfig.variables)) {
+      baseOverrides[key] = def.value;
+    }
+    resolvedConfig = applyThemeToConfig(resolvedConfig, baseOverrides);
+  }
+  if (templateConfig.themeConfig) {
     const tc = templateConfig.themeConfig;
-    const variant = (_d = tc.variants) == null ? void 0 : _d.find((v) => v.id === themeId);
-    if (variant && tc.properties) {
+    const variant = themeId && themeId !== "default" ? (_e = tc.variants) == null ? void 0 : _e.find((v) => v.id === themeId) : null;
+    const shouldApplyDefaults = !variant && ((_f = tc.properties) == null ? void 0 : _f.length);
+    if ((variant || shouldApplyDefaults) && tc.properties) {
       const themed = JSON.parse(JSON.stringify(resolvedConfig));
       for (const prop of tc.properties) {
-        const value = (_e = variant.values) == null ? void 0 : _e[prop.id];
+        const value = variant ? (_g = variant.values) == null ? void 0 : _g[prop.id] : prop.defaultValue;
         if (value === void 0) continue;
         if (prop.targetProperty === "backgroundColor" && prop.elementId === "__pageBackground__") {
           themed.pages.forEach((p) => {
@@ -10392,20 +10441,30 @@ async function loadGoogleFontCSS(rawFontFamily) {
   loadingPromises.delete(fontFamily);
 }
 function collectFontsFromConfig(config) {
+  var _a;
   const fonts = /* @__PURE__ */ new Set();
   fonts.add("Open Sans");
   function walk(nodes) {
-    var _a;
+    var _a2;
     if (!nodes) return;
     for (const node of nodes) {
-      if (node.fontFamily) fonts.add(node.fontFamily);
-      if ((_a = node.smartProps) == null ? void 0 : _a.fontFamily) fonts.add(node.smartProps.fontFamily);
+      if (node.fontFamily) fonts.add(normalizeFontFamily(node.fontFamily));
+      if ((_a2 = node.smartProps) == null ? void 0 : _a2.fontFamily) fonts.add(normalizeFontFamily(node.smartProps.fontFamily));
       if (node.children) walk(node.children);
     }
   }
   for (const page of config.pages || []) {
     walk(page.children || []);
   }
+  if ((_a = config.themeConfig) == null ? void 0 : _a.variables) {
+    for (const def of Object.values(config.themeConfig.variables)) {
+      if (def.value && typeof def.value === "string" && !def.value.startsWith("#") && !def.value.startsWith("rgb")) {
+        if (def.label && /font/i.test(def.label)) {
+          fonts.add(normalizeFontFamily(def.value));
+        }
+      }
+    }
+  }
   return fonts;
 }
 class PixldocsRenderer {
@@ -10653,47 +10712,6 @@ class PixldocsRenderer {
     });
   }
 }
-function applyThemeToConfig(config, themeOverrides) {
-  var _a, _b, _c;
-  if (!themeOverrides || Object.keys(themeOverrides).length === 0) return config;
-  const cloned = JSON.parse(JSON.stringify(config));
-  if ((_a = cloned.themeConfig) == null ? void 0 : _a.variables) {
-    for (const [key, value] of Object.entries(themeOverrides)) {
-      if (cloned.themeConfig.variables[key]) {
-        cloned.themeConfig.variables[key].value = value;
-      }
-    }
-  }
-  const varMap = /* @__PURE__ */ new Map();
-  if ((_b = cloned.themeConfig) == null ? void 0 : _b.variables) {
-    for (const [key, def] of Object.entries(cloned.themeConfig.variables)) {
-      varMap.set(key, themeOverrides[key] ?? def.value);
-    }
-  }
-  function walkAndApply(nodes) {
-    if (!nodes) return;
-    for (const node of nodes) {
-      const bindings = node.themeBindings;
-      if (bindings) {
-        for (const [prop, varName] of Object.entries(bindings)) {
-          const value = varMap.get(varName);
-          if (value !== void 0) {
-            node[prop] = value;
-          }
-        }
-      }
-      if (node.children) walkAndApply(node.children);
-    }
-  }
-  for (const page of cloned.pages || []) {
-    const bgBinding = (_c = page.themeBindings) == null ? void 0 : _c.backgroundColor;
-    if (bgBinding && varMap.has(bgBinding) && page.settings) {
-      page.settings.backgroundColor = varMap.get(bgBinding);
-    }
-    walkAndApply(page.children || []);
-  }
-  return cloned;
-}
 exports.PixldocsPreview = PixldocsPreview;
 exports.PixldocsRenderer = PixldocsRenderer;
 exports.applyThemeToConfig = applyThemeToConfig;