@pixldocs/canvas-renderer 0.3.10 → 0.3.12

package/dist/index.cjs

@@ -10096,7 +10096,7 @@ async function resolveTemplateData(options) {
   return { config, templateName: template.name || "Untitled", templateId };
 }
 async function resolveFromForm(options) {
-  var _a, _b, _c, _d, _e, _f, _g;
+  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),
@@ -10228,37 +10228,8 @@ async function resolveFromForm(options) {
     }
     resolvedConfig = applyThemeToConfig(resolvedConfig, baseOverrides);
   }
-  if (templateConfig.themeConfig) {
-    const tc = templateConfig.themeConfig;
-    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 = 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) => {
-            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;
-    }
-  }
+  resolvedConfig = applyThemeVariantToConfig(resolvedConfig, templateConfig.themeConfig, themeId);
+  normalizeConfigForEC2Parity(resolvedConfig);
   resolvedConfig = applyContentBoundsPagination(resolvedConfig);
   return {
     config: resolvedConfig,
@@ -10274,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") {
@@ -10415,9 +10481,8 @@ async function loadGoogleFontCSS(rawFontFamily) {
         loadedFonts.add(fontFamily);
         return;
       }
-      const weights = "100;200;300;400;500;600;700;800;900";
       const encoded = encodeURIComponent(fontFamily);
-      const url = `https://fonts.googleapis.com/css2?family=${encoded}:ital,wght@0,${weights};1,${weights}&display=swap`;
+      const url = `https://fonts.googleapis.com/css?family=${encoded}:300,400,500,600,700&display=swap`;
       const link = document.createElement("link");
       link.rel = "stylesheet";
       link.href = url;