@pixldocs/canvas-renderer 0.4.8 → 0.5.0

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) => {
@@ -4861,6 +4874,7 @@ const PageCanvas = forwardRef(
     const prevCanvasUpdateVersionRef = useRef(canvasUpdateVersion);
     const syncTriggeredByPanelRef = useRef(false);
     const hasRunPostReadyReflowForPageRef = useRef(null);
+    const hasNotifiedReadyForPageRef = useRef(null);
     const hasClearedCachesBeforeFirstSyncRef = useRef(false);
     const [guides, setGuides] = useState([]);
     const [gridResizeLabel, setGridResizeLabel] = useState(null);
@@ -5123,10 +5137,8 @@ const PageCanvas = forwardRef(
           clearFabricCharCache();
           clearMeasurementCache();
           setReady(true);
-          if (onReady) onReady();
         } catch (e) {
           setReady(true);
-          if (onReady) onReady();
         }
       };
       initFonts();
@@ -7098,6 +7110,11 @@ const PageCanvas = 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;
@@ -7139,6 +7156,7 @@ const PageCanvas = forwardRef(
             requestAnimationFrame(() => {
               if (cancelled) return;
               runReflowAndPersist();
+              notifyReady();
             });
           });
         });
@@ -7147,7 +7165,7 @@ const PageCanvas = forwardRef(
         cancelled = true;
         cancelAnimationFrame(raf1);
       };
-    }, [ready, pageId]);
+    }, [ready, pageId, onReady]);
     useEffect(() => {
       const fc = fabricRef.current;
       if (!fc || isRebuildingRef.current || !isActive) return;
@@ -8761,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,
@@ -8777,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;
@@ -9333,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 };
@@ -9503,12 +9523,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) => {
@@ -9551,7 +9571,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();
@@ -9587,7 +9607,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) {
@@ -9801,9 +9821,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;
@@ -10710,6 +10741,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) {
@@ -10720,6 +10752,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,
@@ -10761,7 +10794,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]);
@@ -10769,6 +10823,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,
     {
@@ -10778,7 +10835,8 @@ function PixldocsPreview(props) {
       absoluteZoom,
       onDynamicFieldClick,
       onReady
-    }
+    },
+    previewKey
   ) });
 }
 class PixldocsRenderer {