@pixldocs/canvas-renderer 0.4.9 → 0.5.1

package/dist/index.js

@@ -2184,6 +2184,18 @@ const useEditorStore = create((set, get) => ({
     const committed = commitFromState(state, nextCanvas);
     return { canvas: nextCanvas, ...committed };
   }),
+  setPageBoundRepeatablePage: (pageId, repeatablePageId) => set((state) => {
+    const updatedPages = state.canvas.pages.map((p) => {
+      if (p.id !== pageId) return p;
+      const next = { ...p };
+      if (repeatablePageId) next.boundRepeatablePageId = repeatablePageId;
+      else delete next.boundRepeatablePageId;
+      return next;
+    });
+    const nextCanvas = { ...state.canvas, pages: updatedPages };
+    const committed = commitFromState(state, nextCanvas);
+    return { canvas: nextCanvas, ...committed };
+  }),
   moveElementsToPage: (elementIds, targetPageId) => set((state) => {
     const currentPage = getCurrentPageFromCanvas(state.canvas);
     const nodesToMove = [];
@@ -2328,7 +2340,8 @@ const useEditorStore = create((set, get) => ({
         id: p.id,
         name: p.name,
         children,
-        settings: { backgroundColor: "#ffffff", ...p.settings }
+        settings: { backgroundColor: "#ffffff", ...p.settings },
+        ...p.boundRepeatablePageId ? { boundRepeatablePageId: p.boundRepeatablePageId } : {}
       };
     });
     pagesWithPositions = pagesWithPositions.map((p) => {
@@ -8766,13 +8779,14 @@ function formDefSectionsToInferred(schemaSections, repeatableNodeMap) {
         const labelPrefix = rawPrefix.startsWith("field_") ? rawPrefix : `field_${rawPrefix}`;
         const treeNodeId = repeatableNodeMap == null ? void 0 : repeatableNodeMap.get(def.label.trim().toLowerCase());
         const prefix = treeNodeId ? `field_${treeNodeId}` : labelPrefix;
+        const minEntries = def.minEntries != null ? Math.max(0, def.minEntries) : 1;
         const section = {
           id: def.id,
           label: def.label,
           order: def.order ?? 0,
           type: "repeatable",
           templateKeyPrefix: prefix,
-          minEntries: def.minEntries ?? 1,
+          minEntries,
           maxEntries: def.maxEntries,
           entryFields: def.fields.map((f, i) => ({
             key: f.key,
@@ -8782,7 +8796,8 @@ function formDefSectionsToInferred(schemaSections, repeatableNodeMap) {
             templateKey: f.key,
             placeholder: f.placeholder
           })),
-          initialEntryCount: def.minEntries ?? 1,
+          // Honor minEntries: 0 — start with no entries, user adds via "+ Add" button.
+          initialEntryCount: minEntries,
           parentId
         };
         if (treeNodeId) section.treeNodeId = treeNodeId;
@@ -9241,7 +9256,7 @@ function applyTextCase(text, textCase) {
       return text;
   }
 }
-function setInTree$1(nodes, elementId, targetProperty, value) {
+function setInTree(nodes, elementId, targetProperty, value) {
   for (const node of nodes) {
     if (node.id === elementId) {
       if (targetProperty === "link") {
@@ -9268,7 +9283,7 @@ function setInTree$1(nodes, elementId, targetProperty, value) {
       return true;
     }
     if (node.children && Array.isArray(node.children)) {
-      if (setInTree$1(node.children, elementId, targetProperty, value)) return true;
+      if (setInTree(node.children, elementId, targetProperty, value)) return true;
     }
   }
   return false;
@@ -9338,11 +9353,11 @@ function idPrefix(node) {
   if (t === "shape") return "shape";
   return "el";
 }
-function cloneNodeWithNewIds$1(node) {
+function cloneNodeWithNewIds$1(node, cloneSuffix) {
   const oldToNew = /* @__PURE__ */ new Map();
   function clone(n) {
     var _a;
-    const newId = generateId(idPrefix(n));
+    const newId = cloneSuffix ? `${baseId(n.id)}__c${cloneSuffix}` : generateId(idPrefix(n));
     oldToNew.set(n.id, newId);
     const base = baseId(n.id);
     const withMeta = { ...n, id: newId, __baseNodeId: base, __sourceId: n.id };
@@ -9508,12 +9523,55 @@ function getNestedRepeatableEntryCount(parentId, parentIndex, childId, formValue
   }
   return Math.max(1, maxIndex);
 }
-function applyFormDataToConfig(config, mappings, formValues, repeatableSectionsFromSchema, repeatableEntryCounts, repeatableNestedEntryCounts, displayFormatMap) {
-  var _a, _b, _c, _d, _e;
+function applyFormDataToConfig(config, mappings, formValues, repeatableSectionsFromSchema, repeatableEntryCounts, repeatableNestedEntryCounts, displayFormatMap, repeatablePagesFromSchema) {
+  var _a, _b, _c, _d, _e, _f;
   const cloned = JSON.parse(JSON.stringify(config));
   if (!cloned.pages) return cloned;
   const dynamicFields = cloned.dynamicFields;
-  const pages = cloned.pages;
+  let pages = cloned.pages;
+  if (repeatablePagesFromSchema == null ? void 0 : repeatablePagesFromSchema.length) {
+    const expanded = [];
+    for (const page of pages) {
+      const boundId = page.boundRepeatablePageId;
+      const schemaEntry = boundId ? repeatablePagesFromSchema.find((p) => p.pageId === boundId) : void 0;
+      if (!schemaEntry) {
+        expanded.push(page);
+        continue;
+      }
+      const prefix = schemaEntry.templateKeyPrefix;
+      let inferredN = 1;
+      const keyPrefix = `field_${prefix}_`;
+      for (const k of Object.keys(formValues)) {
+        if (!k.startsWith(keyPrefix)) continue;
+        const rest = k.slice(keyPrefix.length);
+        const m = /^(\d+)_/.exec(rest);
+        if (m) inferredN = Math.max(inferredN, parseInt(m[1], 10));
+      }
+      const N = Math.max(0, schemaEntry.entryCount ?? inferredN);
+      if (N === 0) {
+        continue;
+      }
+      const basePageId = baseId(page.id);
+      for (let i = 1; i <= N; i++) {
+        const clonedPage = JSON.parse(JSON.stringify(page));
+        clonedPage.id = N === 1 && i === 1 ? page.id : `${basePageId}_${i}`;
+        clonedPage.__repeatablePagePrefix = prefix;
+        clonedPage.__repeatablePageEntryIndex = i;
+        clonedPage.__repeatablePageBaseId = basePageId;
+        if ((_a = clonedPage.children) == null ? void 0 : _a.length) {
+          const suffix = `${basePageId}_p${i}`;
+          const reidChildren = (nodes) => nodes.map((n) => {
+            const [reclone] = cloneNodeWithNewIds$1(n, suffix);
+            return reclone;
+          });
+          if (i > 1) clonedPage.children = reidChildren(clonedPage.children);
+        }
+        expanded.push(clonedPage);
+      }
+    }
+    pages = expanded;
+    cloned.pages = pages;
+  }
   const repeatableList = (repeatableSectionsFromSchema == null ? void 0 : repeatableSectionsFromSchema.length) ? repeatableSectionsFromSchema : getRepeatableFromConfig(pages);
   const nodeIds = repeatableList.map((r) => r.nodeId);
   const entryCountFromList = (baseNodeId) => {
@@ -9525,7 +9583,7 @@ function applyFormDataToConfig(config, mappings, formValues, repeatableSectionsF
   const elementIdToFieldId = /* @__PURE__ */ new Map();
   if (dynamicFields == null ? void 0 : dynamicFields.length) {
     for (const f of dynamicFields) {
-      const elId = (_b = (_a = f.mappings) == null ? void 0 : _a[0]) == null ? void 0 : _b.elementId;
+      const elId = (_c = (_b = f.mappings) == null ? void 0 : _b[0]) == null ? void 0 : _c.elementId;
       if (elId) elementIdToFieldId.set(elId, f.id);
     }
   }
@@ -9556,7 +9614,7 @@ function applyFormDataToConfig(config, mappings, formValues, repeatableSectionsF
     const N = Math.max(1, countFromState ?? getRepeatableEntryCount(baseNodeId, formValues));
     const clones = [];
     for (let i = 1; i <= N; i++) {
-      const [clone, oldToNew] = cloneNodeWithNewIds$1(node);
+      const [clone, oldToNew] = cloneNodeWithNewIds$1(node, `${baseNodeId}_e${i}`);
       delete clone.repeatableSection;
       clones.push(clone);
       const newToOriginal = /* @__PURE__ */ new Map();
@@ -9592,7 +9650,7 @@ function applyFormDataToConfig(config, mappings, formValues, repeatableSectionsF
         const phase1Map = phase1NewToOriginal.get(`${parentBaseNodeId}_${parentIndex1Based}`);
         const clones = [];
         for (let i = 1; i <= N; i++) {
-          const [clone, oldToNew] = cloneNodeWithNewIds$1(node);
+          const [clone, oldToNew] = cloneNodeWithNewIds$1(node, `${parentBaseNodeId}_p${parentIndex1Based}_${baseNodeId}_e${i}`);
           delete clone.repeatableSection;
           clones.push(clone);
           for (const [oldId, newId] of oldToNew) {
@@ -9739,7 +9797,7 @@ function applyFormDataToConfig(config, mappings, formValues, repeatableSectionsF
       }
     }
     for (const page of pages) {
-      if (page.children && setInTree$1(page.children, elementId, targetProperty, effectiveValue)) return true;
+      if (page.children && setInTree(page.children, elementId, targetProperty, effectiveValue)) return true;
     }
     return false;
   };
@@ -9770,7 +9828,7 @@ function applyFormDataToConfig(config, mappings, formValues, repeatableSectionsF
         const [, parentId, parentIndexStr, childId, childIndexStr, fieldId] = nestedMatch;
         const value = formValues[key];
         const field = getFieldForRepeatableKey(fieldId, key);
-        const mapping = (_c = field == null ? void 0 : field.mappings) == null ? void 0 : _c[0];
+        const mapping = (_d = field == null ? void 0 : field.mappings) == null ? void 0 : _d[0];
         if (!mapping) continue;
         const oldElementId = mapping.elementId;
         const mapKeyByElement = `${baseId(parentId)}_${parentIndexStr}_${baseId(childId)}_${childIndexStr}_${oldElementId}`;
@@ -9806,15 +9864,26 @@ function applyFormDataToConfig(config, mappings, formValues, repeatableSectionsF
       }
     }
   }
+  const repeatablePagePrefixSet = new Set(
+    (repeatablePagesFromSchema ?? []).map((p) => `field_${p.templateKeyPrefix}_`)
+  );
   if (dynamicFields == null ? void 0 : dynamicFields.length) {
     for (const key of Object.keys(formValues)) {
       if (NESTED_REPEATABLE_KEY_REGEX.test(key)) continue;
+      let isPageKey = false;
+      for (const pfx of repeatablePagePrefixSet) {
+        if (key.startsWith(pfx)) {
+          isPageKey = true;
+          break;
+        }
+      }
+      if (isPageKey) continue;
       const match = key.match(REPEATABLE_KEY_REGEX);
       if (!match) continue;
       const [, nodeId, indexStr, fieldId] = match;
       const value = formValues[key];
       const field = getFieldForRepeatableKey(fieldId);
-      const mapping = (_d = field == null ? void 0 : field.mappings) == null ? void 0 : _d[0];
+      const mapping = (_e = field == null ? void 0 : field.mappings) == null ? void 0 : _e[0];
       if (!mapping) continue;
       const oldElementId = mapping.elementId;
       const mapKeyByElement = `${baseId(nodeId)}_${indexStr}_${oldElementId}`;
@@ -9836,8 +9905,49 @@ function applyFormDataToConfig(config, mappings, formValues, repeatableSectionsF
     const value = formValues[m.field_key];
     applyValue(m.element_id, m.target_property, value, m.field_key);
   }
+  if ((repeatablePagesFromSchema == null ? void 0 : repeatablePagesFromSchema.length) && (dynamicFields == null ? void 0 : dynamicFields.length)) {
+    const findInPage = (page, originalId) => {
+      var _a2;
+      if (!((_a2 = page.children) == null ? void 0 : _a2.length)) return void 0;
+      const findIn = (nodes) => {
+        var _a3;
+        for (const n of nodes) {
+          const src = n.__sourceId;
+          if (n.id === originalId || src === originalId || baseId(n.id) === baseId(originalId)) return n.id;
+          if (isGroup(n) && ((_a3 = n.children) == null ? void 0 : _a3.length)) {
+            const f = findIn(n.children);
+            if (f) return f;
+          }
+        }
+        return void 0;
+      };
+      return findIn(page.children);
+    };
+    for (const page of pages) {
+      const meta = page;
+      const prefix = meta.__repeatablePagePrefix;
+      const entryIndex = meta.__repeatablePageEntryIndex;
+      if (!prefix || !entryIndex) continue;
+      const fieldIdPrefix = `field_${prefix}_N_`;
+      for (const field of dynamicFields) {
+        if (!field.id.startsWith(fieldIdPrefix)) continue;
+        const fieldKeySuffix = field.id.slice(fieldIdPrefix.length);
+        const formKey = `field_${prefix}_${entryIndex}_${fieldKeySuffix}`;
+        if (!(formKey in formValues)) continue;
+        const value = formValues[formKey];
+        for (const m of field.mappings ?? []) {
+          const originalId = m.elementId;
+          const targetProperty = m.targetProperty || "text";
+          if (!originalId) continue;
+          const resolvedId = findInPage(page, originalId);
+          if (!resolvedId) continue;
+          if (page.children) setInTree(page.children, resolvedId, targetProperty, value);
+        }
+      }
+    }
+  }
   for (const page of pages) {
-    if ((_e = page.children) == null ? void 0 : _e.length) {
+    if ((_f = page.children) == null ? void 0 : _f.length) {
       page.children = applyStackReflowToPageTree(page.children);
     }
   }
@@ -10202,52 +10312,122 @@ async function fetchDefaultForm(supabaseUrl, anonKey, formSchemaId) {
   const rows = await res.json();
   return rows.length ? rows[0] : null;
 }
-function applyFormDataSimple(config, formData) {
-  var _a;
-  const cloned = JSON.parse(JSON.stringify(config));
-  if (!cloned.pages || !((_a = cloned.dynamicFields) == null ? void 0 : _a.length)) return cloned;
-  const dynamicFields = cloned.dynamicFields;
-  for (const field of dynamicFields) {
-    const value = formData[field.id];
-    if (value === void 0) continue;
-    for (const mapping of field.mappings) {
-      setInTree(cloned.pages.flatMap((p) => p.children), mapping.elementId, mapping.targetProperty, value);
+function deriveRepeatablePagesFromTemplate(config, inlineFormSchema) {
+  if (!Array.isArray(config == null ? void 0 : config.pages) || config.pages.length === 0) return [];
+  const schemaPages = inlineFormSchema == null ? void 0 : inlineFormSchema.repeatablePages;
+  const collectIds = (nodes, out2) => {
+    for (const n of nodes ?? []) {
+      if (n == null ? void 0 : n.id) out2.add(n.id);
+      if (Array.isArray(n == null ? void 0 : n.children)) collectIds(n.children, out2);
     }
-  }
-  return cloned;
-}
-function setInTree(nodes, elementId, targetProperty, value) {
-  for (const node of nodes) {
-    if (node.id === elementId) {
-      if (targetProperty === "text" && node.type === "text" && typeof value === "string") {
-        node[targetProperty] = value === "" ? " " : value;
-      } else if (targetProperty === "link") {
-        node.linkConfig = { ...node.linkConfig || {}, url: String(value ?? "") };
-      } else {
-        node[targetProperty] = value;
+  };
+  const dynamicFields = config.dynamicFields;
+  const out = [];
+  for (const page of config.pages) {
+    const boundId = page == null ? void 0 : page.boundRepeatablePageId;
+    if (!boundId) continue;
+    let templateKeyPrefix;
+    if (Array.isArray(schemaPages)) {
+      const found = schemaPages.find((rp) => (rp == null ? void 0 : rp.id) === boundId);
+      if (found == null ? void 0 : found.templateKeyPrefix) templateKeyPrefix = found.templateKeyPrefix;
+    }
+    if (!templateKeyPrefix && Array.isArray(dynamicFields) && dynamicFields.length > 0) {
+      const idsOnThisPage = /* @__PURE__ */ new Set();
+      collectIds(page.children || [], idsOnThisPage);
+      const prefixCounts = /* @__PURE__ */ new Map();
+      for (const f of dynamicFields) {
+        const m = /^field_(.+)_N_/.exec(f.id);
+        if (!m) continue;
+        const prefix = m[1];
+        for (const map of f.mappings || []) {
+          if (idsOnThisPage.has(map.elementId)) {
+            prefixCounts.set(prefix, (prefixCounts.get(prefix) || 0) + 1);
+            break;
+          }
+        }
       }
-      if (targetProperty === "text" && node.type === "text") {
-        const overflowPolicy = String(node.overflowPolicy ?? "grow-and-push");
-        if (overflowPolicy !== "auto-shrink") {
-          delete node.height;
+      let best;
+      let bestCount = 0;
+      for (const [prefix, count] of prefixCounts) {
+        if (count > bestCount) {
+          best = prefix;
+          bestCount = count;
         }
       }
-      return true;
+      if (best) templateKeyPrefix = best;
     }
-    if (node.children && Array.isArray(node.children)) {
-      if (setInTree(node.children, elementId, targetProperty, value)) return true;
+    if (templateKeyPrefix) {
+      out.push({ pageId: boundId, templateKeyPrefix });
     }
   }
-  return false;
+  return out;
 }
 async function resolveTemplateData(options) {
   const { templateId, formData, supabaseUrl, supabaseAnonKey } = options;
   const template = await fetchRow(supabaseUrl, supabaseAnonKey, "templates", templateId);
   let config = template.config;
+  const inlineFormSchema = template.form_schema;
   const defaultData = template.default_data;
-  if (defaultData) config = applyFormDataSimple(config, defaultData);
-  if (formData && Object.keys(formData).length > 0) config = applyFormDataSimple(config, formData);
-  return { config, templateName: template.name || "Untitled", templateId, price: template.price ?? 0 };
+  if (inlineFormSchema && typeof inlineFormSchema === "object") {
+    if (!Array.isArray(config.dynamicFields) && Array.isArray(inlineFormSchema.dynamicFields)) {
+      config.dynamicFields = inlineFormSchema.dynamicFields;
+    }
+    if (!Array.isArray(config.fieldGroups) && Array.isArray(inlineFormSchema.fieldGroups)) {
+      config.fieldGroups = inlineFormSchema.fieldGroups;
+    }
+  }
+  normalizeLayoutModes(config);
+  const repeatableSectionsInput = [];
+  if (Array.isArray(inlineFormSchema == null ? void 0 : inlineFormSchema.repeatableSections)) {
+    for (const r of inlineFormSchema.repeatableSections) {
+      if ((r == null ? void 0 : r.nodeId) && (r == null ? void 0 : r.label)) {
+        repeatableSectionsInput.push({
+          nodeId: r.nodeId,
+          label: r.label,
+          minEntries: r.minEntries,
+          maxEntries: r.maxEntries
+        });
+      }
+    }
+    if (repeatableSectionsInput.length > 0) {
+      paintRepeatableSections(config, repeatableSectionsInput);
+    }
+  }
+  const mergedFormData = {
+    ...defaultData && typeof defaultData === "object" && !Array.isArray(defaultData) ? defaultData : {},
+    ...formData ?? {}
+  };
+  const dynamicFields = config.dynamicFields;
+  if (!Array.isArray(dynamicFields) || dynamicFields.length === 0) {
+    return { config, templateName: template.name || "Untitled", templateId, price: template.price ?? 0 };
+  }
+  const mappings = [];
+  for (const f of dynamicFields) {
+    for (const m of f.mappings || []) {
+      mappings.push({
+        field_key: f.id,
+        element_id: m.elementId,
+        target_property: m.targetProperty || "text"
+      });
+    }
+  }
+  const repeatablePagesInput = deriveRepeatablePagesFromTemplate(config, inlineFormSchema);
+  const resolvedConfig = applyFormDataToConfig(
+    config,
+    mappings,
+    mergedFormData,
+    repeatableSectionsInput,
+    void 0,
+    void 0,
+    void 0,
+    repeatablePagesInput.length > 0 ? repeatablePagesInput : void 0
+  );
+  return {
+    config: resolvedConfig,
+    templateName: template.name || "Untitled",
+    templateId,
+    price: template.price ?? 0
+  };
 }
 async function resolveFromForm(options) {
   var _a, _b, _c, _d;
@@ -10715,6 +10895,7 @@ function PixldocsPreview(props) {
   const [resolvedConfig, setResolvedConfig] = useState(null);
   const [isLoading, setIsLoading] = useState(false);
   const [fontsReady, setFontsReady] = useState(false);
+  const [fontsReadyVersion, setFontsReadyVersion] = useState(0);
   const isResolveMode = !("config" in props && props.config);
   useEffect(() => {
     if (!isResolveMode) {
@@ -10725,6 +10906,7 @@ function PixldocsPreview(props) {
     if (!p.templateId || !p.formSchemaId || !p.supabaseUrl || !p.supabaseAnonKey) return;
     let cancelled = false;
     setIsLoading(true);
+    setFontsReady(false);
     resolveFromForm({
       templateId: p.templateId,
       formSchemaId: p.formSchemaId,
@@ -10766,7 +10948,28 @@ function PixldocsPreview(props) {
   ]);
   const config = isResolveMode ? resolvedConfig : props.config;
   useEffect(() => {
-    if (isResolveMode || !config) return;
+    var _a, _b;
+    if (!config) return;
+    let cancelled = false;
+    const bump = () => {
+      if (cancelled) return;
+      clearMeasurementCache();
+      setFontsReadyVersion((v) => v + 1);
+    };
+    (_b = (_a = document.fonts) == null ? void 0 : _a.ready) == null ? void 0 : _b.then(bump);
+    const timeoutId = window.setTimeout(bump, 350);
+    return () => {
+      cancelled = true;
+      window.clearTimeout(timeoutId);
+    };
+  }, [config]);
+  const previewKey = useMemo(() => `${pageIndex}-${fontsReadyVersion}`, [pageIndex, fontsReadyVersion]);
+  useEffect(() => {
+    if (isResolveMode) return;
+    if (!config) {
+      setFontsReady(false);
+      return;
+    }
     setFontsReady(false);
     ensureFontsForResolvedConfig(config).then(() => setFontsReady(true)).catch(() => setFontsReady(true));
   }, [isResolveMode, config]);
@@ -10774,6 +10977,9 @@ function PixldocsPreview(props) {
     return /* @__PURE__ */ jsx("div", { className, style: { ...style, display: "flex", alignItems: "center", justifyContent: "center", minHeight: 200 }, children: /* @__PURE__ */ jsx("div", { style: { color: "#888", fontSize: 14 }, children: "Loading preview..." }) });
   }
   if (!config) return null;
+  if (!fontsReady) {
+    return /* @__PURE__ */ jsx("div", { className, style: { ...style, display: "flex", alignItems: "center", justifyContent: "center", minHeight: 200 }, children: /* @__PURE__ */ jsx("div", { style: { color: "#888", fontSize: 14 }, children: "Loading preview..." }) });
+  }
   return /* @__PURE__ */ jsx("div", { className, style, children: /* @__PURE__ */ jsx(
     PreviewCanvas,
     {
@@ -10783,7 +10989,8 @@ function PixldocsPreview(props) {
       absoluteZoom,
       onDynamicFieldClick,
       onReady
-    }
+    },
+    previewKey
   ) });
 }
 class PixldocsRenderer {