@pixldocs/canvas-renderer 0.5.491 → 0.5.493

package/dist/{index-sfUNqu61.cjs → index-CapZsm7x.cjs}

@@ -12079,7 +12079,29 @@ const PageCanvas = react.forwardRef(
     const [rotationLabel, setRotationLabel] = react.useState(null);
     const [sizeLabel, setSizeLabel] = react.useState(null);
     const [ready, setReady] = react.useState(false);
+    const onReadyRef = react.useRef(onReady);
+    const pendingInitialImageLoadsRef = react.useRef(0);
     const [unlockRequestId, setUnlockRequestId] = react.useState(0);
+    react.useEffect(() => {
+      onReadyRef.current = onReady;
+    }, [onReady]);
+    const trackInitialImageLoad = react.useCallback((promise) => {
+      if (hasNotifiedReadyForPageRef.current === pageId) {
+        return;
+      }
+      pendingInitialImageLoadsRef.current += 1;
+      let settled = false;
+      const finish = () => {
+        if (settled) return;
+        settled = true;
+        pendingInitialImageLoadsRef.current = Math.max(0, pendingInitialImageLoadsRef.current - 1);
+      };
+      const timeout = window.setTimeout(finish, 12e3);
+      void promise.finally(() => {
+        window.clearTimeout(timeout);
+        finish();
+      });
+    }, [pageId]);
     const applyLogicalGroupSelectionVisualState = react.useCallback((selection, groupId) => {
       var _a2;
       selection.__pixldocsGroupSelection = groupId;
@@ -12290,7 +12312,23 @@ const PageCanvas = react.forwardRef(
     }, [selectedIds]);
     react.useEffect(() => {
       const fc = fabricRef.current;
-      if (!fc || !isActive || !currentPage) return;
+      if (!fc || !currentPage) return;
+      if (!isActive) {
+        try {
+          fc.__activeEditingGroupId = null;
+          drilledGroupIdRef.current = null;
+          setDrilledGroupBounds(null);
+          preserveActiveSelectionAfterTransformRef.current = null;
+          recentGroupSelectionRestoreRef.current = null;
+          if (fc.getActiveObject()) {
+            fc.discardActiveObject();
+          }
+          clearCanvasActiveVisuals(fc);
+          fc.requestRenderAll();
+        } catch {
+        }
+        return;
+      }
       const pageChildren2 = currentPage.children ?? [];
       const hasMissingSelection = selectedIds.some((id) => !findNodeById(pageChildren2, id));
       const activeEditingGroupId = fc.__activeEditingGroupId ?? null;
@@ -17116,6 +17154,10 @@ const PageCanvas = react.forwardRef(
           const innerImg = ct == null ? void 0 : ct._img;
           const innerSrc = ((_a2 = innerImg == null ? void 0 : innerImg.getSrc) == null ? void 0 : _a2.call(innerImg)) || ((_b2 = innerImg == null ? void 0 : innerImg._originalElement) == null ? void 0 : _b2.src) || (innerImg == null ? void 0 : innerImg.src) || "";
           const isPlaceholder = !innerSrc || innerSrc === EMPTY_IMAGE_PLACEHOLDER_DATA_URL;
+          const activatedAt = cropGroupActivatedAtRef.current.get(target) ?? 0;
+          if (Date.now() - activatedAt < 400) {
+            return;
+          }
           const targetId = getObjectId(target);
           const pageChildrenForCrop = ((_c2 = useEditorStore.getState().canvas.pages.find((p) => p.id === pageId)) == null ? void 0 : _c2.children) ?? [];
           const parentForCrop = targetId ? findParentGroup(pageChildrenForCrop, targetId) : null;
@@ -17132,10 +17174,6 @@ const PageCanvas = react.forwardRef(
               }
               return;
             }
-            const activatedAt = cropGroupActivatedAtRef.current.get(target) ?? 0;
-            if (Date.now() - activatedAt < 400) {
-              return;
-            }
           }
           if (innerImg && !isPlaceholder && !isCropGroupInCropMode(target)) {
             enterCropMode(target);
@@ -18099,7 +18137,7 @@ const PageCanvas = react.forwardRef(
               placeholder.dirty = true;
               fc.requestRenderAll();
               if (imageUrl) {
-                loadImageAsync2(elementForImage, placeholder, fc);
+                trackInitialImageLoad(loadImageAsync2(elementForImage, placeholder, fc));
               }
             } else {
               const resolvedSizeCreate = pageTree.length > 0 ? getNodeBounds(element, pageTree) : { width: typeof element.width === "number" ? element.width : 200, height: typeof element.height === "number" ? element.height : 50 };
@@ -18362,12 +18400,35 @@ const PageCanvas = react.forwardRef(
     }, [allowEditing, isActive, pageId]);
     react.useEffect(() => {
       if (!ready || hasRunPostReadyReflowForPageRef.current === pageId) return;
-      hasRunPostReadyReflowForPageRef.current = pageId;
       let cancelled = false;
+      let retryTimer = null;
+      const readyWaitStartedAt = performance.now();
+      const maxAssetWaitMs = 2500;
+      let notifyRaf1 = null;
+      let notifyRaf2 = null;
       const notifyReady = () => {
         if (cancelled || hasNotifiedReadyForPageRef.current === pageId) return;
-        hasNotifiedReadyForPageRef.current = pageId;
-        onReady == null ? void 0 : onReady();
+        const finishWhenAssetsSettle = () => {
+          if (cancelled || hasNotifiedReadyForPageRef.current === pageId) return;
+          if (pendingInitialImageLoadsRef.current > 0 && performance.now() - readyWaitStartedAt < maxAssetWaitMs) {
+            retryTimer = window.setTimeout(finishWhenAssetsSettle, 50);
+            return;
+          }
+          notifyRaf1 = requestAnimationFrame(() => {
+            notifyRaf2 = requestAnimationFrame(() => {
+              var _a2;
+              if (cancelled || hasNotifiedReadyForPageRef.current === pageId) return;
+              if (pendingInitialImageLoadsRef.current > 0 && performance.now() - readyWaitStartedAt < maxAssetWaitMs) {
+                retryTimer = window.setTimeout(finishWhenAssetsSettle, 50);
+                return;
+              }
+              hasRunPostReadyReflowForPageRef.current = pageId;
+              hasNotifiedReadyForPageRef.current = pageId;
+              (_a2 = onReadyRef.current) == null ? void 0 : _a2.call(onReadyRef);
+            });
+          });
+        };
+        finishWhenAssetsSettle();
       };
       const runReflowAndPersist = () => {
         var _a2;
@@ -18375,37 +18436,42 @@ const PageCanvas = react.forwardRef(
         if (!fc || cancelled) return;
         const state = useEditorStore.getState();
         const repositionTree = isPreviewMode && (pageChildren == null ? void 0 : pageChildren.length) ? pageChildren ?? [] : ((_a2 = state.canvas.pages.find((p) => p.id === pageId)) == null ? void 0 : _a2.children) ?? [];
-        runFontReloadAndReflow({
-          canvas: fc,
-          pageTree: repositionTree,
-          pageBoundsOptions,
-          preserveGlobalFontCache,
-          // Persist measured Textbox sizes back to the editor store. The
-          // headless path passes no callback (it has no store to persist into).
-          persistTextboxSize: (id, measured, el) => {
-            const storeW = el.width ?? 0;
-            const storeH = el.height ?? 0;
-            const shouldKeepFixedSize = el.overflowPolicy === "auto-shrink";
-            const updates = {};
-            if (!shouldKeepFixedSize && measured.width > 0 && typeof storeW === "number" && Math.abs(measured.width - storeW) > 0.1) {
-              updates.width = measured.width;
-            }
-            if (shouldKeepFixedSize) {
-              if (measured.height > 0 && typeof storeH === "number" && measured.height < storeH - 0.5) updates.height = measured.height;
-            } else {
-              if (measured.height > 0 && (typeof storeH !== "number" || Math.abs(measured.height - storeH) > 0.1)) updates.height = measured.height;
-            }
-            if (Object.keys(updates).length > 0) {
-              state.updateElement(id, updates, { recordHistory: false, skipLayoutRecalc: true });
-            }
-          },
-          // Rebuild section/background groups before resnapping top-level objects.
-          preResnapSync: (isPreviewMode || isExportMode) && doSyncRef.current ? () => {
-            var _a3;
-            return (_a3 = doSyncRef.current) == null ? void 0 : _a3.call(doSyncRef);
-          } : void 0
-        });
+        try {
+          runFontReloadAndReflow({
+            canvas: fc,
+            pageTree: repositionTree,
+            pageBoundsOptions,
+            preserveGlobalFontCache,
+            // Persist measured Textbox sizes back to the editor store. The
+            // headless path passes no callback (it has no store to persist into).
+            persistTextboxSize: (id, measured, el) => {
+              const storeW = el.width ?? 0;
+              const storeH = el.height ?? 0;
+              const shouldKeepFixedSize = el.overflowPolicy === "auto-shrink";
+              const updates = {};
+              if (!shouldKeepFixedSize && measured.width > 0 && typeof storeW === "number" && Math.abs(measured.width - storeW) > 0.1) {
+                updates.width = measured.width;
+              }
+              if (shouldKeepFixedSize) {
+                if (measured.height > 0 && typeof storeH === "number" && measured.height < storeH - 0.5) updates.height = measured.height;
+              } else {
+                if (measured.height > 0 && (typeof storeH !== "number" || Math.abs(measured.height - storeH) > 0.1)) updates.height = measured.height;
+              }
+              if (Object.keys(updates).length > 0) {
+                state.updateElement(id, updates, { recordHistory: false, skipLayoutRecalc: true });
+              }
+            },
+            // Rebuild section/background groups before resnapping top-level objects.
+            preResnapSync: (isPreviewMode || isExportMode) && doSyncRef.current ? () => {
+              var _a3;
+              return (_a3 = doSyncRef.current) == null ? void 0 : _a3.call(doSyncRef);
+            } : void 0
+          });
+        } catch (err) {
+          console.warn("[PageCanvas] post-ready reflow failed; continuing canvas ready state", err);
+        }
       };
+      const fallbackTimer = window.setTimeout(notifyReady, 3500);
       const raf1 = requestAnimationFrame(() => {
         requestAnimationFrame(() => {
           if (cancelled) return;
@@ -18421,9 +18487,13 @@ const PageCanvas = react.forwardRef(
       });
       return () => {
         cancelled = true;
+        window.clearTimeout(fallbackTimer);
         cancelAnimationFrame(raf1);
+        if (retryTimer !== null) window.clearTimeout(retryTimer);
+        if (notifyRaf1 !== null) cancelAnimationFrame(notifyRaf1);
+        if (notifyRaf2 !== null) cancelAnimationFrame(notifyRaf2);
       };
-    }, [ready, pageId, onReady]);
+    }, [ready, pageId]);
     react.useEffect(() => {
       var _a2;
       const fc = fabricRef.current;
@@ -22006,7 +22076,6 @@ function applyFormDataToConfig(config, mappings, formValues, repeatableSectionsF
     return void 0;
   }
   const applyValue = (elementId, targetProperty, value, fieldKey, svgColorKey) => {
-    var _a3;
     const isTextLike = targetProperty === "text" || targetProperty === "content";
     const isImageLike = targetProperty === "src" || targetProperty === "imageUrl";
     if (value === void 0 || value === null) {
@@ -22032,19 +22101,32 @@ function applyFormDataToConfig(config, mappings, formValues, repeatableSectionsF
       }
     }
     if (elementId === PAGE_BACKGROUND_ELEMENT_ID && targetProperty === "backgroundColor") {
-      if ((_a3 = pages[0]) == null ? void 0 : _a3.settings) {
-        const settings = pages[0].settings;
+      let applied = false;
+      const hasExplicitBg = (settings) => {
+        const raw = settings.backgroundColor;
+        if (typeof raw !== "string") return false;
+        const trimmed = raw.trim().toLowerCase();
+        if (!trimmed) return false;
+        if (trimmed === "transparent" || trimmed === "none") return false;
+        return true;
+      };
+      for (const page of pages) {
+        if (!page.settings) continue;
+        const settings = page.settings;
+        if (hasExplicitBg(settings) && !("backgroundGradient" in settings)) continue;
         if (isGradientConfig(effectiveValue)) {
           settings.backgroundGradient = effectiveValue;
           settings.backgroundColor = "";
-          return true;
+          applied = true;
+          continue;
         }
         if (typeof effectiveValue === "string") {
           if ("backgroundGradient" in settings) delete settings.backgroundGradient;
           settings.backgroundColor = effectiveValue;
-          return true;
+          applied = true;
         }
       }
+      if (applied) return true;
     }
     for (const page of pages) {
       if (page.children && setInTree(page.children, elementId, targetProperty, effectiveValue, svgColorKey)) return true;
@@ -25759,7 +25841,19 @@ function PixldocsPreview(props) {
     isResolveMode ? props.themeId : void 0
   ]);
   const config = isResolveMode ? resolvedConfig : props.config;
-  const previewKey = react.useMemo(() => `${pageIndex}`, [pageIndex]);
+  const previewKey = react.useMemo(() => {
+    var _a3, _b3;
+    const page = (_a3 = config == null ? void 0 : config.pages) == null ? void 0 : _a3[pageIndex];
+    const settings = (page == null ? void 0 : page.settings) ?? {};
+    const gradientSignature = settings.backgroundGradient ? JSON.stringify(settings.backgroundGradient) : "";
+    return [
+      pageIndex,
+      (page == null ? void 0 : page.id) ?? "page",
+      settings.backgroundColor ?? "",
+      gradientSignature,
+      ((_b3 = page == null ? void 0 : page.children) == null ? void 0 : _b3.length) ?? 0
+    ].join("|");
+  }, [config, pageIndex]);
   const fontSignature = react.useMemo(() => computeFontSignature(config), [config]);
   const imageSignature = react.useMemo(() => computeImageSignature(config), [config]);
   const [imagesReady, setImagesReady] = react.useState(true);
@@ -26442,9 +26536,9 @@ function captureFabricCanvasSvgForPdf(fabricInstance, canvasWidth, canvasHeight)
   }
   return svgString;
 }
-const resolvedPackageVersion = "0.5.491";
+const resolvedPackageVersion = "0.5.493";
 const PACKAGE_VERSION = resolvedPackageVersion;
-const DEPLOYMENT_VERSION_MARKER = "__PIXLDOCS_CANVAS_RENDERER_VERSION__:0.5.491";
+const DEPLOYMENT_VERSION_MARKER = "__PIXLDOCS_CANVAS_RENDERER_VERSION__:0.5.493";
 const roundParityValue = (value) => {
   if (typeof value !== "number") return value;
   return Number.isFinite(value) ? Number(value.toFixed(3)) : value;
@@ -27258,7 +27352,7 @@ class PixldocsRenderer {
         await this.waitForCanvasScene(container, cloned, i);
       }
       console.log(`[canvas-renderer][pdf-unified] mounted ${cloned.pages.length} page(s), handing off to client exportMultiPagePdf`);
-      const { exportMultiPagePdf, preparePagesForExport } = await Promise.resolve().then(() => require("./vectorPdfExport-BWUlBEaK.cjs"));
+      const { exportMultiPagePdf, preparePagesForExport } = await Promise.resolve().then(() => require("./vectorPdfExport-obFAiUhx.cjs"));
       const prepared = preparePagesForExport(
         cloned.pages,
         canvasWidth,
@@ -29578,7 +29672,7 @@ async function prepareLiveCanvasSvgForPdf(rawSvg, pageWidth, pageHeight, pageKey
     if (options == null ? void 0 : options.stripPageBackground) stripRootPageBackgroundFromSvg(svgToDraw);
     sanitizeSvgTreeForPdf(svgToDraw);
     try {
-      const { bakeTextAnchorPositionsFromLiveSvg, logTextMeasurementDiagnostic } = await Promise.resolve().then(() => require("./vectorPdfExport-BWUlBEaK.cjs"));
+      const { bakeTextAnchorPositionsFromLiveSvg, logTextMeasurementDiagnostic } = await Promise.resolve().then(() => require("./vectorPdfExport-obFAiUhx.cjs"));
       try {
         await logTextMeasurementDiagnostic(svgToDraw);
       } catch {
@@ -29892,4 +29986,4 @@ exports.setAutoShrinkDebug = setAutoShrinkDebug;
 exports.setBundledAssetPrefixes = setBundledAssetPrefixes;
 exports.warmResolvedTemplateForPreview = warmResolvedTemplateForPreview;
 exports.warmTemplateFromForm = warmTemplateFromForm;
-//# sourceMappingURL=index-sfUNqu61.cjs.map
+//# sourceMappingURL=index-CapZsm7x.cjs.map