@pixldocs/canvas-renderer 0.3.8 → 0.3.10

package/dist/index.js

@@ -8556,6 +8556,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";
@@ -10036,7 +10077,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),
@@ -10045,8 +10086,20 @@ async function resolveFromForm(options) {
   ]);
   const templateConfig = templateRow.config;
   const templateFormSchema = templateRow.form_schema;
-  const schemaSections = (_a = formSchemaRow.schema) == null ? void 0 : _a.sections;
+  if (templateFormSchema) {
+    if (!Array.isArray(templateConfig.dynamicFields) && Array.isArray(templateFormSchema.dynamicFields)) {
+      templateConfig.dynamicFields = templateFormSchema.dynamicFields;
+    }
+    if (!Array.isArray(templateConfig.fieldGroups) && Array.isArray(templateFormSchema.fieldGroups)) {
+      templateConfig.fieldGroups = templateFormSchema.fieldGroups;
+    }
+  }
+  normalizeLayoutModes(templateConfig);
   const repeatableFromSchema = templateFormSchema == null ? void 0 : templateFormSchema.repeatableSections;
+  if ((repeatableFromSchema == null ? void 0 : repeatableFromSchema.length) && templateConfig.pages) {
+    paintRepeatableSections(templateConfig, repeatableFromSchema);
+  }
+  const schemaSections = (_a = formSchemaRow.schema) == null ? void 0 : _a.sections;
   const repeatableNodeMap = /* @__PURE__ */ new Map();
   if (repeatableFromSchema) {
     for (const r of repeatableFromSchema) {
@@ -10078,9 +10131,7 @@ async function resolveFromForm(options) {
     }
   }
   const flatFormData = flattenSectionStateToFormData(mergedSectionState, inferredSections);
-  const configDynamicFields = templateConfig.dynamicFields;
-  const formSchemaDynamicFields = templateFormSchema == null ? void 0 : templateFormSchema.dynamicFields;
-  const dynamicFields = ((configDynamicFields == null ? void 0 : configDynamicFields.length) ? configDynamicFields : formSchemaDynamicFields) || [];
+  const dynamicFields = templateConfig.dynamicFields || [];
   const mappings = [];
   for (const field of dynamicFields) {
     if (field.mappings) {
@@ -10151,13 +10202,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) => {
@@ -10196,6 +10255,54 @@ function flattenAll(nodes) {
   }
   return result;
 }
+function normalizeLayoutModes(config) {
+  function walk(node) {
+    if (node.layoutMode === "stack" || node.layoutMode === "stacked") {
+      node.layoutMode = "vertical-stack";
+    }
+    if (Array.isArray(node.children)) {
+      for (const child of node.children) walk(child);
+    }
+  }
+  for (const page of config.pages ?? []) {
+    if (page.children) {
+      for (const child of page.children) walk(child);
+    }
+  }
+}
+function paintRepeatableSections(config, repeatableSections) {
+  const pages = config.pages ?? [];
+  function stripFlags(nodes) {
+    for (const node of nodes) {
+      delete node.repeatableSection;
+      if (Array.isArray(node.children)) stripFlags(node.children);
+    }
+  }
+  for (const page of pages) {
+    if (page.children) stripFlags(page.children);
+  }
+  function setRepeatable(nodes, nodeId, payload) {
+    for (const node of nodes) {
+      const id = node.id;
+      if (id && (id === nodeId || baseId(id) === baseId(nodeId))) {
+        node.repeatableSection = payload;
+        return true;
+      }
+      if (Array.isArray(node.children) && setRepeatable(node.children, nodeId, payload)) {
+        return true;
+      }
+    }
+    return false;
+  }
+  for (const section of repeatableSections) {
+    const payload = { label: section.label };
+    if (section.minEntries !== void 0) payload.minEntries = section.minEntries;
+    if (section.maxEntries !== void 0) payload.maxEntries = section.maxEntries;
+    for (const page of pages) {
+      if (setRepeatable(page.children ?? [], section.nodeId, payload)) break;
+    }
+  }
+}
 function PixldocsPreview(props) {
   const {
     pageIndex = 0,
@@ -10315,20 +10422,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 {
@@ -10576,47 +10693,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;
-}
 export {
   PixldocsPreview,
   PixldocsRenderer,