@pixldocs/canvas-renderer 0.4.9 → 0.5.0

package/dist/index.cjs

@@ -2203,6 +2203,18 @@ const useEditorStore = zustand.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 = [];
@@ -2347,7 +2359,8 @@ const useEditorStore = zustand.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) => {
@@ -8785,13 +8798,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,
@@ -8801,7 +8815,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;
@@ -9357,11 +9372,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 };
@@ -9527,12 +9542,12 @@ function getNestedRepeatableEntryCount(parentId, parentIndex, childId, formValue
   }
   return Math.max(1, maxIndex);
 }
-function applyFormDataToConfig(config, mappings, formValues, repeatableSectionsFromSchema, repeatableEntryCounts, repeatableNestedEntryCounts, displayFormatMap) {
+function applyFormDataToConfig(config, mappings, formValues, repeatableSectionsFromSchema, repeatableEntryCounts, repeatableNestedEntryCounts, displayFormatMap, repeatablePagesFromSchema) {
   var _a, _b, _c, _d, _e;
   const cloned = JSON.parse(JSON.stringify(config));
   if (!cloned.pages) return cloned;
   const dynamicFields = cloned.dynamicFields;
-  const pages = cloned.pages;
+  let pages = cloned.pages;
   const repeatableList = (repeatableSectionsFromSchema == null ? void 0 : repeatableSectionsFromSchema.length) ? repeatableSectionsFromSchema : getRepeatableFromConfig(pages);
   const nodeIds = repeatableList.map((r) => r.nodeId);
   const entryCountFromList = (baseNodeId) => {
@@ -9575,7 +9590,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();
@@ -9611,7 +9626,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) {
@@ -9825,9 +9840,20 @@ function applyFormDataToConfig(config, mappings, formValues, repeatableSectionsF
       }
     }
   }
+  const repeatablePagePrefixSet = new Set(
+    [].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;
@@ -10734,6 +10760,7 @@ function PixldocsPreview(props) {
   const [resolvedConfig, setResolvedConfig] = react.useState(null);
   const [isLoading, setIsLoading] = react.useState(false);
   const [fontsReady, setFontsReady] = react.useState(false);
+  const [fontsReadyVersion, setFontsReadyVersion] = react.useState(0);
   const isResolveMode = !("config" in props && props.config);
   react.useEffect(() => {
     if (!isResolveMode) {
@@ -10744,6 +10771,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,
@@ -10785,7 +10813,28 @@ function PixldocsPreview(props) {
   ]);
   const config = isResolveMode ? resolvedConfig : props.config;
   react.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 = react.useMemo(() => `${pageIndex}-${fontsReadyVersion}`, [pageIndex, fontsReadyVersion]);
+  react.useEffect(() => {
+    if (isResolveMode) return;
+    if (!config) {
+      setFontsReady(false);
+      return;
+    }
     setFontsReady(false);
     ensureFontsForResolvedConfig(config).then(() => setFontsReady(true)).catch(() => setFontsReady(true));
   }, [isResolveMode, config]);
@@ -10793,6 +10842,9 @@ function PixldocsPreview(props) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className, style: { ...style, display: "flex", alignItems: "center", justifyContent: "center", minHeight: 200 }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: "#888", fontSize: 14 }, children: "Loading preview..." }) });
   }
   if (!config) return null;
+  if (!fontsReady) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className, style: { ...style, display: "flex", alignItems: "center", justifyContent: "center", minHeight: 200 }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: "#888", fontSize: 14 }, children: "Loading preview..." }) });
+  }
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className, style, children: /* @__PURE__ */ jsxRuntime.jsx(
     PreviewCanvas,
     {
@@ -10802,7 +10854,8 @@ function PixldocsPreview(props) {
       absoluteZoom,
       onDynamicFieldClick,
       onReady
-    }
+    },
+    previewKey
   ) });
 }
 class PixldocsRenderer {