@pixldocs/canvas-renderer 0.4.8 → 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) => {
@@ -4880,6 +4893,7 @@ const PageCanvas = react.forwardRef(
     const prevCanvasUpdateVersionRef = react.useRef(canvasUpdateVersion);
     const syncTriggeredByPanelRef = react.useRef(false);
     const hasRunPostReadyReflowForPageRef = react.useRef(null);
+    const hasNotifiedReadyForPageRef = react.useRef(null);
     const hasClearedCachesBeforeFirstSyncRef = react.useRef(false);
     const [guides, setGuides] = react.useState([]);
     const [gridResizeLabel, setGridResizeLabel] = react.useState(null);
@@ -5142,10 +5156,8 @@ const PageCanvas = react.forwardRef(
           clearFabricCharCache();
           clearMeasurementCache();
           setReady(true);
-          if (onReady) onReady();
         } catch (e) {
           setReady(true);
-          if (onReady) onReady();
         }
       };
       initFonts();
@@ -7117,6 +7129,11 @@ const PageCanvas = react.forwardRef(
       if (!ready || hasRunPostReadyReflowForPageRef.current === pageId) return;
       hasRunPostReadyReflowForPageRef.current = pageId;
       let cancelled = false;
+      const notifyReady = () => {
+        if (cancelled || hasNotifiedReadyForPageRef.current === pageId) return;
+        hasNotifiedReadyForPageRef.current = pageId;
+        onReady == null ? void 0 : onReady();
+      };
       const runReflowAndPersist = () => {
         const fc = fabricRef.current;
         if (!fc || cancelled) return;
@@ -7158,6 +7175,7 @@ const PageCanvas = react.forwardRef(
             requestAnimationFrame(() => {
               if (cancelled) return;
               runReflowAndPersist();
+              notifyReady();
             });
           });
         });
@@ -7166,7 +7184,7 @@ const PageCanvas = react.forwardRef(
         cancelled = true;
         cancelAnimationFrame(raf1);
       };
-    }, [ready, pageId]);
+    }, [ready, pageId, onReady]);
     react.useEffect(() => {
       const fc = fabricRef.current;
       if (!fc || isRebuildingRef.current || !isActive) return;
@@ -8780,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,
@@ -8796,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;
@@ -9352,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 };
@@ -9522,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) => {
@@ -9570,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();
@@ -9606,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) {
@@ -9820,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;
@@ -10729,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) {
@@ -10739,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,
@@ -10780,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]);
@@ -10788,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,
     {
@@ -10797,7 +10854,8 @@ function PixldocsPreview(props) {
       absoluteZoom,
       onDynamicFieldClick,
       onReady
-    }
+    },
+    previewKey
   ) });
 }
 class PixldocsRenderer {