@pixldocs/canvas-renderer 0.3.9 → 0.3.11

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;
   const { templateId, formSchemaId, sectionState, themeId, supabaseUrl, supabaseAnonKey } = options;
   const [templateRow, formSchemaRow, defaultForm] = await Promise.all([
     fetchRow(supabaseUrl, supabaseAnonKey, "templates", templateId),
@@ -10180,36 +10221,15 @@ async function resolveFromForm(options) {
     Object.keys(repeatableNestedEntryCounts).length > 0 ? repeatableNestedEntryCounts : void 0,
     displayFormatMap.size > 0 ? displayFormatMap : void 0
   );
-  if (themeId && themeId !== "default" && 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 themed = JSON.parse(JSON.stringify(resolvedConfig));
-      for (const prop of tc.properties) {
-        const value = (_e = variant.values) == null ? void 0 : _e[prop.id];
-        if (value === void 0) continue;
-        if (prop.targetProperty === "backgroundColor" && prop.elementId === "__pageBackground__") {
-          themed.pages.forEach((p) => {
-            p.settings.backgroundColor = value;
-          });
-          continue;
-        }
-        for (const page of themed.pages) {
-          const els = flattenAll(page.children || []);
-          for (const el of els) {
-            if (el.id === prop.elementId || baseId(el.id) === baseId(prop.elementId)) {
-              if (prop.svgColorKey && el.svgColorMap) {
-                el.svgColorMap = { ...el.svgColorMap, [prop.svgColorKey]: value };
-              } else {
-                el[prop.targetProperty] = value;
-              }
-            }
-          }
-        }
-      }
-      resolvedConfig = themed;
+  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);
   }
+  resolvedConfig = applyThemeVariantToConfig(resolvedConfig, templateConfig.themeConfig, themeId);
+  normalizeConfigForEC2Parity(resolvedConfig);
   resolvedConfig = applyContentBoundsPagination(resolvedConfig);
   return {
     config: resolvedConfig,
@@ -10225,6 +10245,101 @@ function flattenAll(nodes) {
   }
   return result;
 }
+function themeBaseId(id) {
+  if (!id) return id ?? "";
+  let out = id;
+  out = out.replace(/_inner\d+_\d+_/g, "");
+  out = out.replace(/_clone\d+_/g, "");
+  out = out.replace(/_clone_\d+/g, "");
+  while (/_\d+$/.test(out)) out = out.replace(/_\d+$/, "");
+  return out;
+}
+function applyThemeVariantToConfig(config, themeConfig, themeId) {
+  var _a, _b, _c, _d;
+  if (!themeConfig) return config;
+  const variant = themeId && themeId !== "default" ? (_a = themeConfig.variants) == null ? void 0 : _a.find((v) => v.id === themeId) : null;
+  const shouldApplyDefaults = !variant && ((_b = themeConfig.properties) == null ? void 0 : _b.length);
+  if (!variant && !shouldApplyDefaults) return config;
+  if (!((_c = themeConfig.properties) == null ? void 0 : _c.length)) return config;
+  const result = JSON.parse(JSON.stringify(config));
+  const cloneIdMap = config.__cloneIdMap || {};
+  const pageElements = result.pages.map((page) => flattenAll(page.children || []));
+  for (const prop of themeConfig.properties) {
+    const value = variant ? (_d = variant.values) == null ? void 0 : _d[prop.id] : prop.defaultValue;
+    if (value === void 0) continue;
+    if (prop.targetProperty === "backgroundColor" && prop.elementId === "__pageBackground__") {
+      result.pages.forEach((p) => {
+        p.settings.backgroundColor = value;
+      });
+      continue;
+    }
+    if (prop.targetProperty === "backgroundGradient" && prop.elementId === "__pageBackground__" && prop.svgColorKey) {
+      const stopMatch = prop.svgColorKey.match(/^stop:(\d+)$/);
+      if (stopMatch) {
+        const stopIndex = parseInt(stopMatch[1], 10);
+        result.pages.forEach((p) => {
+          var _a2, _b2;
+          if ((_b2 = (_a2 = p.settings.backgroundGradient) == null ? void 0 : _a2.stops) == null ? void 0 : _b2[stopIndex]) {
+            p.settings.backgroundGradient = {
+              ...p.settings.backgroundGradient,
+              stops: p.settings.backgroundGradient.stops.map(
+                (s, i) => i === stopIndex ? { ...s, color: value } : s
+              )
+            };
+          }
+        });
+      }
+      continue;
+    }
+    const propBase = themeBaseId(prop.elementId);
+    const targetIds = /* @__PURE__ */ new Set([prop.elementId, propBase]);
+    for (const [mapKey, mappedId] of Object.entries(cloneIdMap)) {
+      if (mapKey.endsWith(`_${prop.elementId}`) || mapKey.endsWith(`_${propBase}`)) {
+        targetIds.add(mappedId);
+      }
+    }
+    for (const els of pageElements) {
+      for (const el of els) {
+        const elBase = themeBaseId(el.id);
+        const sourceId = el.__sourceId;
+        const sourceBase = sourceId ? themeBaseId(sourceId) : void 0;
+        const cloneBase = el.__baseNodeId;
+        const cloneBaseNorm = cloneBase ? themeBaseId(cloneBase) : void 0;
+        const match = targetIds.has(el.id) || targetIds.has(elBase) || (sourceId ? targetIds.has(sourceId) : false) || (sourceBase ? targetIds.has(sourceBase) : false) || (cloneBase ? targetIds.has(cloneBase) : false) || (cloneBaseNorm ? targetIds.has(cloneBaseNorm) : false);
+        if (!match) continue;
+        if (prop.svgColorKey && el.svgColorMap) {
+          el.svgColorMap = { ...el.svgColorMap, [prop.svgColorKey]: value };
+        } else {
+          el[prop.targetProperty] = value;
+        }
+      }
+    }
+  }
+  return result;
+}
+function normalizeConfigForEC2Parity(config) {
+  function walk(node) {
+    if (node.layoutMode === "stack" || node.layoutMode === "stacked") {
+      node.layoutMode = "vertical-stack";
+    }
+    const layoutMode = String(node.layoutMode ?? "");
+    const isStack = isVerticalStackLayoutMode(layoutMode) || layoutMode === "horizontal-stack" || layoutMode === "horizontal-fill";
+    if (isStack && node.stackSpacing == null) node.stackSpacing = 8;
+    if (node.type === "text") {
+      const overflowPolicy = String(node.overflowPolicy ?? "grow-and-push");
+      const fontSize = typeof node.fontSize === "number" ? node.fontSize : 16;
+      if (overflowPolicy === "auto-shrink" && fontSize >= 24) node.overflowPolicy = "grow-and-push";
+      delete node.height;
+    }
+    if (Array.isArray(node.children)) {
+      delete node.height;
+      for (const child of node.children) walk(child);
+    }
+  }
+  for (const page of config.pages ?? []) {
+    for (const child of page.children ?? []) walk(child);
+  }
+}
 function normalizeLayoutModes(config) {
   function walk(node) {
     if (node.layoutMode === "stack" || node.layoutMode === "stacked") {
@@ -10392,20 +10507,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 +10778,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;