@pixldocs/canvas-renderer 0.5.222 → 0.5.225

package/dist/{index-DxL--cfL.js → index-BpViFQMO.js}

@@ -1,6 +1,7 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+var _a;
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { forwardRef, useRef, useState, useMemo, useEffect, useCallback, useImperativeHandle, createElement } from "react";
 import { flushSync } from "react-dom";
@@ -272,12 +273,12 @@ function lineToString(line) {
   return Array.isArray(line) ? line.join("") : String(line ?? "");
 }
 function measureTextLineWithCanvas(textbox, lineText, lineIndex) {
-  var _a, _b, _c, _d, _e;
+  var _a2, _b, _c, _d, _e;
   if (!lineText) return 0;
   const ctx = getMeasureContext();
   if (!ctx) return null;
   const tb = textbox;
-  const fontSize = Number(((_a = tb.getValueOfPropertyAt) == null ? void 0 : _a.call(tb, lineIndex, 0, "fontSize")) ?? textbox.fontSize ?? 16);
+  const fontSize = Number(((_a2 = tb.getValueOfPropertyAt) == null ? void 0 : _a2.call(tb, lineIndex, 0, "fontSize")) ?? textbox.fontSize ?? 16);
   const fontStyle = String(((_b = tb.getValueOfPropertyAt) == null ? void 0 : _b.call(tb, lineIndex, 0, "fontStyle")) ?? textbox.fontStyle ?? "normal");
   const fontWeight = String(((_c = tb.getValueOfPropertyAt) == null ? void 0 : _c.call(tb, lineIndex, 0, "fontWeight")) ?? textbox.fontWeight ?? "400");
   const fontFamily = String(((_d = tb.getValueOfPropertyAt) == null ? void 0 : _d.call(tb, lineIndex, 0, "fontFamily")) ?? textbox.fontFamily ?? "Open Sans");
@@ -601,7 +602,7 @@ function resolveStackGroupEffectivePositions(group, pageChildren, options) {
   return out;
 }
 function groupBoundsFromChildren(group, pageChildren, options) {
-  var _a, _b;
+  var _a2, _b;
   const kids = group.children ?? [];
   if (kids.length === 0) {
     const w = group.width;
@@ -613,7 +614,7 @@ function groupBoundsFromChildren(group, pageChildren, options) {
   let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
   for (const child of kids) {
     const b = getNodeBounds(child, pageChildren);
-    const cl = positions ? ((_a = positions.get(child.id)) == null ? void 0 : _a.left) ?? getNodeLeft(child) : getNodeLeft(child);
+    const cl = positions ? ((_a2 = positions.get(child.id)) == null ? void 0 : _a2.left) ?? getNodeLeft(child) : getNodeLeft(child);
     const ct = positions ? ((_b = positions.get(child.id)) == null ? void 0 : _b.top) ?? getNodeTop(child) : getNodeTop(child);
     minX = Math.min(minX, cl);
     minY = Math.min(minY, ct);
@@ -652,13 +653,13 @@ function getNodeBoundsFromChildren(node) {
   return getNodeBounds(node);
 }
 function absoluteBoundsRecur(node, pageChildren, options) {
-  var _a, _b;
+  var _a2, _b;
   const parent = pageChildren ? findParentGroup(pageChildren, node.id) : null;
   const b = getNodeBounds(node, pageChildren);
   if (!parent) return b;
   const parentAbs = absoluteBoundsRecur(parent, pageChildren);
   const isStackParent = isStackLayoutMode(parent.layoutMode);
-  const inParentLeft = isStackParent ? ((_a = resolveStackGroupEffectivePositions(parent, pageChildren).get(node.id)) == null ? void 0 : _a.left) ?? b.left : b.left;
+  const inParentLeft = isStackParent ? ((_a2 = resolveStackGroupEffectivePositions(parent, pageChildren).get(node.id)) == null ? void 0 : _a2.left) ?? b.left : b.left;
   const inParentTop = isStackParent ? ((_b = resolveStackGroupEffectivePositions(parent, pageChildren).get(node.id)) == null ? void 0 : _b.top) ?? b.top : b.top;
   return {
     left: parentAbs.left + inParentLeft,
@@ -677,22 +678,41 @@ function absoluteToStorePosition(absoluteLeft, absoluteTop, nodeId, pageChildren
   const parent = findParentGroup(pageChildren, nodeId);
   if (!parent) return { left: absoluteLeft, top: absoluteTop };
   const parentAbs = getAbsoluteBounds(parent, pageChildren);
-  const storeLeft = absoluteLeft - parentAbs.left;
+  const inParentLeft = absoluteLeft - parentAbs.left;
   const inParentTop = absoluteTop - parentAbs.top;
   const isStack = isStackLayoutMode(parent.layoutMode);
-  if (!isStack) return { left: storeLeft, top: inParentTop };
+  if (!isStack) return { left: inParentLeft, top: inParentTop };
   const kids = parent.children ?? [];
   const idx = kids.findIndex((c) => c.id === nodeId);
-  if (idx < 0) return { left: storeLeft, top: inParentTop };
-  if (idx === 0) return { left: storeLeft, top: inParentTop };
+  if (idx < 0) return { left: inParentLeft, top: inParentTop };
   const gap = parent.stackSpacing ?? 8;
+  const padTop = parent.paddingTop ?? 0;
+  const padLeft = parent.paddingLeft ?? 0;
+  const marginTop = node.marginTop ?? 0;
+  const marginLeft = node.marginLeft ?? 0;
   const resolved = resolveStackGroupEffectivePositions(parent, pageChildren);
-  const prev = kids[idx - 1];
-  const prevResolved = resolved.get(prev.id);
-  const prevHeight = getNodeBounds(prev, pageChildren).height;
-  const prevBottom = prevResolved ? prevResolved.top + prevHeight + (prev.marginBottom ?? 0) : 0;
-  const storeTop = inParentTop - prevBottom - gap;
-  return { left: storeLeft, top: Math.max(0, storeTop) };
+  if (isVerticalStackLayoutMode(parent.layoutMode)) {
+    const baseTop = idx === 0 ? padTop : (() => {
+      const prev = kids[idx - 1];
+      const prevResolved = resolved.get(prev.id);
+      const prevHeight = getNodeBounds(prev, pageChildren).height;
+      return (prevResolved ? prevResolved.top + prevHeight + (prev.marginBottom ?? 0) : padTop) + gap;
+    })();
+    return {
+      left: inParentLeft - padLeft - marginLeft,
+      top: inParentTop - baseTop - marginTop
+    };
+  }
+  const baseLeft = idx === 0 ? padLeft : (() => {
+    const prev = kids[idx - 1];
+    const prevResolved = resolved.get(prev.id);
+    const prevWidth = getNodeBounds(prev, pageChildren).width;
+    return (prevResolved ? prevResolved.left + prevWidth + (prev.marginRight ?? 0) : padLeft) + gap;
+  })();
+  return {
+    left: inParentLeft - baseLeft - marginLeft,
+    top: inParentTop - padTop - marginTop
+  };
 }
 function reflowPageFromRoot(_pageChildren) {
   return /* @__PURE__ */ new Map();
@@ -790,6 +810,31 @@ function rewriteFieldMappings(mappings, idMap) {
   if (!(mappings == null ? void 0 : mappings.length)) return [];
   return mappings.filter((m) => idMap.has(m.elementId)).map((m) => ({ ...m, elementId: idMap.get(m.elementId) }));
 }
+let canvasRegistry = /* @__PURE__ */ new Map();
+function registerFabricCanvas(pageId, canvas) {
+  const existing = canvasRegistry.get(pageId);
+  const registryKey = existing && existing !== canvas ? `${pageId}#${Math.random().toString(36).slice(2, 10)}` : pageId;
+  canvasRegistry.set(registryKey, canvas);
+  return registryKey;
+}
+function unregisterFabricCanvas(pageId, canvas) {
+  if (canvas) {
+    const existing = canvasRegistry.get(pageId);
+    if (existing === canvas) canvasRegistry.delete(pageId);
+    return;
+  }
+  canvasRegistry.delete(pageId);
+}
+function getCanvasForPage(pageId) {
+  return canvasRegistry.get(pageId) || null;
+}
+let visibilityOnlyUpdatePendingUntil = 0;
+function markVisibilityOnlyUpdate(ttlMs = 300) {
+  visibilityOnlyUpdatePendingUntil = Date.now() + Math.max(0, ttlMs);
+}
+function isVisibilityOnlyUpdatePending() {
+  return Date.now() < visibilityOnlyUpdatePendingUntil;
+}
 const defaultProjectSettings = {
   showGrid: false,
   snapToGrid: false,
@@ -1094,7 +1139,7 @@ const useEditorStore = create((set, get) => ({
     return out;
   }),
   updateNode: (id, updates, options) => set((state) => {
-    var _a;
+    var _a2;
     const mergedUpdates = { ...updates };
     let nextCanvas = updateCurrentPageChildren(
       state.canvas,
@@ -1167,7 +1212,7 @@ const useEditorStore = create((set, get) => ({
           let next = updateNodeInTree(currentPage.children, id, { children: sortedKids });
           const groupSorted = findNodeById(next, id);
           const orderedKids = (groupSorted == null ? void 0 : groupSorted.children) ?? sortedKids;
-          const firstLeft = typeof ((_a = orderedKids[0]) == null ? void 0 : _a.left) === "number" ? orderedKids[0].left : 0;
+          const firstLeft = typeof ((_a2 = orderedKids[0]) == null ? void 0 : _a2.left) === "number" ? orderedKids[0].left : 0;
           let prevBottom = 0;
           for (let i = 0; i < orderedKids.length; i++) {
             const child = orderedKids[i];
@@ -1273,7 +1318,7 @@ const useEditorStore = create((set, get) => ({
     return { canvas: nextCanvas, canvasUpdateVersion: state.canvasUpdateVersion + 1, ...committed };
   }),
   deleteNodes: (ids) => set((state) => {
-    var _a;
+    var _a2;
     const currentPage = getCurrentPageFromCanvas(state.canvas);
     let nextChildren = currentPage.children;
     const rootLevelIds = new Set(currentPage.children.map((c) => c.id));
@@ -1311,7 +1356,7 @@ const useEditorStore = create((set, get) => ({
         };
       }
     }
-    if ((_a = nextCanvas.dynamicFields) == null ? void 0 : _a.length) {
+    if ((_a2 = nextCanvas.dynamicFields) == null ? void 0 : _a2.length) {
       nextCanvas = {
         ...nextCanvas,
         dynamicFields: nextCanvas.dynamicFields.map((f) => ({
@@ -1583,6 +1628,7 @@ const useEditorStore = create((set, get) => ({
     const node = findNodeById(currentPage.children, id);
     if (!node) return {};
     const newVisible = node.visible === false ? true : false;
+    markVisibilityOnlyUpdate();
     const nextCanvas = updateCurrentPageChildren(
       state.canvas,
       (children) => updateNodeInTree(children, id, { visible: newVisible })
@@ -1620,6 +1666,7 @@ const useEditorStore = create((set, get) => ({
     group.children.forEach((child) => {
       collectChildren(child);
     });
+    markVisibilityOnlyUpdate();
     let nextCanvas = state.canvas;
     nodeIds.forEach((id) => {
       nextCanvas = updateCurrentPageChildren(
@@ -1891,8 +1938,8 @@ const useEditorStore = create((set, get) => ({
           if (stopMatch) {
             const stopIndex = parseInt(stopMatch[1], 10);
             updatedPages = updatedPages.map((p) => {
-              var _a;
-              if (!((_a = p.settings.backgroundGradient) == null ? void 0 : _a.stops[stopIndex])) return p;
+              var _a2;
+              if (!((_a2 = p.settings.backgroundGradient) == null ? void 0 : _a2.stops[stopIndex])) return p;
               return {
                 ...p,
                 settings: {
@@ -1968,8 +2015,8 @@ const useEditorStore = create((set, get) => ({
     if (nodesToGroup.length < 2) return {};
     const parentGroups = topLevelIds.map((id) => findParentGroup(currentPage.children, id));
     const commonParent = parentGroups.length > 0 && parentGroups.every((p) => {
-      var _a;
-      return (p == null ? void 0 : p.id) === ((_a = parentGroups[0]) == null ? void 0 : _a.id);
+      var _a2;
+      return (p == null ? void 0 : p.id) === ((_a2 = parentGroups[0]) == null ? void 0 : _a2.id);
     }) ? parentGroups[0] : null;
     let insertIndex = void 0;
     if (commonParent && topLevelIds.length > 0) {
@@ -2062,20 +2109,36 @@ const useEditorStore = create((set, get) => ({
     const parentId = (parentGroup == null ? void 0 : parentGroup.id) || null;
     const siblings = parentGroup ? parentGroup.children : currentPage.children;
     const groupIndex = siblings.findIndex((n) => n.id === groupId);
+    const childAbs = group.children.map((c) => getAbsoluteBounds(c, currentPage.children));
+    const followingSiblingAbs = siblings.slice(Math.max(0, groupIndex + 1)).map((sibling) => ({ id: sibling.id, abs: getAbsoluteBounds(sibling, currentPage.children) }));
     let nextChildren = removeNodeFromTree(currentPage.children, groupId);
-    const parentAbs = parentId ? getAbsoluteBounds(findNodeById(nextChildren, parentId), nextChildren) : null;
-    for (let i = 0; i < group.children.length; i++) {
+    const placeStoredToMatchAbs = (tree, nodeId, target) => {
+      let t = updateNodeInTree(tree, nodeId, { left: 0, top: 0 });
+      const placed = findNodeById(t, nodeId);
+      if (!placed) return t;
+      const cur = getAbsoluteBounds(placed, t);
+      const dl = target.left - cur.left;
+      const dt = target.top - cur.top;
+      return updateNodeInTree(t, nodeId, { left: dl, top: dt });
+    };
+    const insertReversed = parentId === null;
+    const promotionOrder = insertReversed ? group.children.map((_, i) => group.children.length - 1 - i) : group.children.map((_, i) => i);
+    for (let slot = 0; slot < promotionOrder.length; slot++) {
+      const i = promotionOrder[slot];
       const child = group.children[i];
-      const abs = getAbsoluteBounds(child, currentPage.children);
-      const storeLeft = parentAbs ? abs.left - parentAbs.left : abs.left;
-      const storeTop = parentAbs ? abs.top - parentAbs.top : abs.top;
-      const childWithPos = isElement(child) ? { ...child, left: storeLeft, top: storeTop } : { ...child, left: storeLeft, top: storeTop };
-      nextChildren = addNodeToTree(nextChildren, childWithPos, parentId, groupIndex + i);
+      const abs = childAbs[i];
+      const placeholder = isElement(child) ? { ...child, left: 0, top: 0 } : { ...child, left: 0, top: 0 };
+      nextChildren = addNodeToTree(nextChildren, placeholder, parentId, groupIndex + slot);
+      nextChildren = placeStoredToMatchAbs(nextChildren, child.id, { left: abs.left, top: abs.top });
+    }
+    for (const { id, abs } of followingSiblingAbs) {
+      if (!findNodeById(nextChildren, id)) continue;
+      nextChildren = placeStoredToMatchAbs(nextChildren, id, { left: abs.left, top: abs.top });
     }
     const nextCanvas = updateCurrentPageChildren(state.canvas, () => nextChildren);
     nextCanvas.selectedIds = getAllElementIds(group.children);
     const committed = commitFromState(state, nextCanvas);
-    return { canvas: nextCanvas, ...committed };
+    return { canvas: nextCanvas, canvasUpdateVersion: state.canvasUpdateVersion + 1, ...committed };
   }),
   renameNode: (id, name) => set((state) => {
     const nextCanvas = updateCurrentPageChildren(
@@ -2147,7 +2210,7 @@ const useEditorStore = create((set, get) => ({
     return { canvas: nextCanvas, ...committed };
   }),
   deletePage: (pageId) => set((state) => {
-    var _a;
+    var _a2;
     if (state.canvas.pages.length <= 1) return {};
     const deletedPage = state.canvas.pages.find((p) => p.id === pageId);
     const newPages = state.canvas.pages.filter((p) => p.id !== pageId);
@@ -2183,7 +2246,7 @@ const useEditorStore = create((set, get) => ({
         };
       }
     }
-    if (((_a = nextCanvas.dynamicFields) == null ? void 0 : _a.length) && deletedElementIds.size > 0) {
+    if (((_a2 = nextCanvas.dynamicFields) == null ? void 0 : _a2.length) && deletedElementIds.size > 0) {
       nextCanvas = {
         ...nextCanvas,
         dynamicFields: nextCanvas.dynamicFields.map((f) => ({ ...f, mappings: (f.mappings ?? []).filter((m) => !deletedElementIds.has(m.elementId)) })).filter((f) => (f.mappings ?? []).length > 0)
@@ -2296,7 +2359,7 @@ const useEditorStore = create((set, get) => ({
     return { canvas: nextCanvas, ...committed };
   }),
   updatePageSettings: (pageId, settings) => set((state) => {
-    var _a;
+    var _a2;
     const updatedPages = state.canvas.pages.map(
       (p) => p.id === pageId ? { ...p, settings: { ...p.settings, ...settings } } : p
     );
@@ -2315,11 +2378,11 @@ const useEditorStore = create((set, get) => ({
       if ("backgroundGradient" in settings) {
         const grad = settings.backgroundGradient;
         const gradStopProps = themeConfig.properties.filter((p) => {
-          var _a2;
-          return p.elementId === PAGE_BG_ID && p.targetProperty === "backgroundGradient" && ((_a2 = p.svgColorKey) == null ? void 0 : _a2.startsWith("stop:"));
+          var _a3;
+          return p.elementId === PAGE_BG_ID && p.targetProperty === "backgroundGradient" && ((_a3 = p.svgColorKey) == null ? void 0 : _a3.startsWith("stop:"));
         });
         for (const prop of gradStopProps) {
-          const stopMatch = (_a = prop.svgColorKey) == null ? void 0 : _a.match(/^stop:(\d+)$/);
+          const stopMatch = (_a2 = prop.svgColorKey) == null ? void 0 : _a2.match(/^stop:(\d+)$/);
           if (stopMatch && grad) {
             const stopIndex = parseInt(stopMatch[1], 10);
             if (grad.stops[stopIndex]) {
@@ -2456,7 +2519,7 @@ const useEditorStore = create((set, get) => ({
   }),
   // === LOAD/RESET ===
   loadConfig: (config) => set((state) => {
-    var _a;
+    var _a2;
     const collapsedGroups = /* @__PURE__ */ new Set();
     const collectCollapsedGroups = (nodes) => {
       for (const node of nodes) {
@@ -2524,7 +2587,7 @@ const useEditorStore = create((set, get) => ({
       width: config.canvas.width,
       height: config.canvas.height,
       pages: pagesWithPositions,
-      currentPageId: ((_a = config.pages[0]) == null ? void 0 : _a.id) || "page-1",
+      currentPageId: ((_a2 = config.pages[0]) == null ? void 0 : _a2.id) || "page-1",
       selectedIds: [],
       zoom: 1,
       pan: { x: 0, y: 0 },
@@ -2603,24 +2666,6 @@ const useEditorStore = create((set, get) => ({
     };
   })
 }));
-let canvasRegistry = /* @__PURE__ */ new Map();
-function registerFabricCanvas(pageId, canvas) {
-  const existing = canvasRegistry.get(pageId);
-  const registryKey = existing && existing !== canvas ? `${pageId}#${Math.random().toString(36).slice(2, 10)}` : pageId;
-  canvasRegistry.set(registryKey, canvas);
-  return registryKey;
-}
-function unregisterFabricCanvas(pageId, canvas) {
-  if (canvas) {
-    const existing = canvasRegistry.get(pageId);
-    if (existing === canvas) canvasRegistry.delete(pageId);
-    return;
-  }
-  canvasRegistry.delete(pageId);
-}
-function getCanvasForPage(pageId) {
-  return canvasRegistry.get(pageId) || null;
-}
 const LOCAL_FONTS = /* @__PURE__ */ new Set([
   // Original local fonts (static TTFs)
   "Playfair Display",
@@ -3284,12 +3329,12 @@ const waitUntilFontsAvailable = async (fontFamilies, options) => {
   }
 };
 const clearFabricCharCache = () => {
-  var _a;
+  var _a2;
   const fabricAny = fabric;
   if (fabricAny.cache && typeof fabricAny.cache.clearFontCache === "function") {
     fabricAny.cache.clearFontCache();
   }
-  if (((_a = fabricAny.cache) == null ? void 0 : _a.charWidthsCache) instanceof Map) {
+  if (((_a2 = fabricAny.cache) == null ? void 0 : _a2.charWidthsCache) instanceof Map) {
     fabricAny.cache.charWidthsCache.clear();
   }
   if (typeof fabricAny.charWidthsCache === "object" && fabricAny.charWidthsCache !== null) {
@@ -3315,14 +3360,14 @@ const clearFontCacheAndRerender = (canvas, options = {}) => {
     }
   };
   const collectUnderlineMetrics = (obj) => {
-    var _a, _b;
+    var _a2, _b;
     if (obj instanceof fabric.Textbox) {
       if (!obj.underline) return [];
       const lineWidths = obj.__lineWidths;
       return [{
         id: getObjectId(obj) ?? null,
         text: (obj.text || "").slice(0, 120),
-        textLength: ((_a = obj.text) == null ? void 0 : _a.length) ?? 0,
+        textLength: ((_a2 = obj.text) == null ? void 0 : _a2.length) ?? 0,
         fontFamily: obj.fontFamily,
         fontSize: obj.fontSize,
         fontWeight: obj.fontWeight,
@@ -3344,11 +3389,11 @@ const clearFontCacheAndRerender = (canvas, options = {}) => {
     logUnderlineDebug("before-rerender", beforeMetrics);
   }
   const markDirty = (obj) => {
-    var _a;
+    var _a2;
     if (obj instanceof fabric.Textbox) {
       obj.dirty = true;
     } else if (obj instanceof fabric.Group) {
-      (_a = obj._objects) == null ? void 0 : _a.forEach(markDirty);
+      (_a2 = obj._objects) == null ? void 0 : _a2.forEach(markDirty);
       obj.dirty = true;
     }
   };
@@ -3360,11 +3405,11 @@ const clearFontCacheAndRerender = (canvas, options = {}) => {
   canvas.requestRenderAll();
 };
 const ensureFontLoaded = async (fontFamily) => {
-  var _a, _b, _c;
+  var _a2, _b, _c;
   if (!fontFamily) return;
   if (LOCAL_FONTS.has(fontFamily)) {
     try {
-      const isLoaded = (_a = document.fonts) == null ? void 0 : _a.check(`16px "${fontFamily}"`);
+      const isLoaded = (_a2 = document.fonts) == null ? void 0 : _a2.check(`16px "${fontFamily}"`);
       if (isLoaded) return;
       await ((_b = document.fonts) == null ? void 0 : _b.load(`16px "${fontFamily}"`));
       await ((_c = document.fonts) == null ? void 0 : _c.load(`bold 16px "${fontFamily}"`));
@@ -3626,9 +3671,9 @@ async function getNormalizedSvgUrl(imageUrl, colorMap, sourceFormat) {
   return `data:image/svg+xml,${encoded}`;
 }
 async function normalizeSvgImageDimensions(fabricImage, imageUrl, sourceFormat) {
-  var _a;
+  var _a2;
   if (!isSvgImage(imageUrl, sourceFormat)) return;
-  const el = ((_a = fabricImage.getElement) == null ? void 0 : _a.call(fabricImage)) ?? fabricImage._element;
+  const el = ((_a2 = fabricImage.getElement) == null ? void 0 : _a2.call(fabricImage)) ?? fabricImage._element;
   let w = 0;
   let h = 0;
   const dims = await loadSvgDimensions(imageUrl);
@@ -3681,7 +3726,7 @@ function stabilizePlaceholderGroup(group, width, height) {
 }
 function attachEmptyPlaceholderImage(group, width, height) {
   loadPlaceholderTile().then((htmlImg) => {
-    var _a;
+    var _a2;
     const objects = group._objects;
     const bgRect = objects == null ? void 0 : objects.find((obj) => obj.__isPlaceholderFrame);
     if (!bgRect) return;
@@ -3709,7 +3754,7 @@ function attachEmptyPlaceholderImage(group, width, height) {
     }
     stabilizePlaceholderGroup(group, width, height);
     group.dirty = true;
-    (_a = group.canvas) == null ? void 0 : _a.requestRenderAll();
+    (_a2 = group.canvas) == null ? void 0 : _a2.requestRenderAll();
   }).catch(() => {
   });
 }
@@ -3861,7 +3906,7 @@ function createImageClipPath(element, imgWidth, imgHeight) {
   }
 }
 async function loadImageAsync(element, placeholder, fc, fabricRef, syncLockedRef, isTransforming) {
-  var _a, _b, _c, _d;
+  var _a2, _b, _c, _d;
   const imageUrl = element.src || element.imageUrl;
   if (!imageUrl) return;
   const nextSvgColorMap = element.svgColorMap ? JSON.stringify(element.svgColorMap) : "";
@@ -4023,7 +4068,7 @@ async function loadImageAsync(element, placeholder, fc, fabricRef, syncLockedRef
       let panY = 0.5;
       let zoom = 1;
       if (existingCropGroup) {
-        const existingImg = (_a = existingCropGroup.__cropData) == null ? void 0 : _a._img;
+        const existingImg = (_a2 = existingCropGroup.__cropData) == null ? void 0 : _a2._img;
         if (existingImg) {
           panX = ((_b = existingImg._ct) == null ? void 0 : _b.panX) ?? existingImg.__panX ?? 0.5;
           panY = ((_c = existingImg._ct) == null ? void 0 : _c.panY) ?? existingImg.__panY ?? 0.5;
@@ -4104,9 +4149,9 @@ const canvasImageLoader = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.d
   updateEmptyPlaceholderLayout
 }, Symbol.toStringTag, { value: "Module" }));
 const isCropGroup = (obj) => {
-  var _a;
+  var _a2;
   const g = obj;
-  return Boolean(g && (g.__cropGroup || ((_a = g._ct) == null ? void 0 : _a.isCropGroup)));
+  return Boolean(g && (g.__cropGroup || ((_a2 = g._ct) == null ? void 0 : _a2.isCropGroup)));
 };
 function parseLuminance(fill) {
   if (typeof fill !== "string") return null;
@@ -4214,10 +4259,10 @@ function isLuminanceMaskClipPath(clipPath) {
   return Boolean(clipPath && clipPath.__svgMaskType === "luminance");
 }
 function syncSvgMaskClipPath(cropGroup) {
-  var _a, _b;
+  var _a2, _b;
   const clipPath = cropGroup.clipPath;
   if (!isCropGroup(cropGroup)) return;
-  const frameW = ((_a = cropGroup._ct) == null ? void 0 : _a.frameW) ?? cropGroup.width ?? 0;
+  const frameW = ((_a2 = cropGroup._ct) == null ? void 0 : _a2.frameW) ?? cropGroup.width ?? 0;
   const frameH = ((_b = cropGroup._ct) == null ? void 0 : _b.frameH) ?? cropGroup.height ?? 0;
   if (frameW <= 0 || frameH <= 0) return;
   if (isSvgMaskClipPath(clipPath)) {
@@ -4242,11 +4287,11 @@ async function detectMaskType(svgUrl) {
   }
 }
 async function applySvgMaskToCropGroup(cropGroup, svgUrl) {
-  var _a, _b, _c;
+  var _a2, _b, _c;
   if (!isCropGroup(cropGroup)) {
     throw new Error("Selected object is not a crop group / image");
   }
-  const frameW = ((_a = cropGroup._ct) == null ? void 0 : _a.frameW) ?? cropGroup.width ?? 0;
+  const frameW = ((_a2 = cropGroup._ct) == null ? void 0 : _a2.frameW) ?? cropGroup.width ?? 0;
   const frameH = ((_b = cropGroup._ct) == null ? void 0 : _b.frameH) ?? cropGroup.height ?? 0;
   if (frameW <= 0 || frameH <= 0) {
     throw new Error("Crop group has no frame dimensions");
@@ -4333,11 +4378,11 @@ async function buildLuminanceAlphaCanvas(svgUrl, frameW, frameH) {
   return canvas;
 }
 async function applyLuminanceMaskToCropGroup(cropGroup, svgUrl) {
-  var _a, _b, _c;
+  var _a2, _b, _c;
   if (!isCropGroup(cropGroup)) {
     throw new Error("Selected object is not a crop group / image");
   }
-  const frameW = ((_a = cropGroup._ct) == null ? void 0 : _a.frameW) ?? cropGroup.width ?? 0;
+  const frameW = ((_a2 = cropGroup._ct) == null ? void 0 : _a2.frameW) ?? cropGroup.width ?? 0;
   const frameH = ((_b = cropGroup._ct) == null ? void 0 : _b.frameH) ?? cropGroup.height ?? 0;
   if (frameW <= 0 || frameH <= 0) {
     throw new Error("Crop group has no frame dimensions");
@@ -4387,9 +4432,9 @@ function getAppliedSvgMaskType(obj) {
   return t === "luminance" || t === "shape" ? t : null;
 }
 function clearSvgMaskFromCropGroup(cropGroup) {
-  var _a, _b, _c;
+  var _a2, _b, _c;
   if (!isCropGroup(cropGroup)) return;
-  const frameW = ((_a = cropGroup._ct) == null ? void 0 : _a.frameW) ?? cropGroup.width ?? 0;
+  const frameW = ((_a2 = cropGroup._ct) == null ? void 0 : _a2.frameW) ?? cropGroup.width ?? 0;
   const frameH = ((_b = cropGroup._ct) == null ? void 0 : _b.frameH) ?? cropGroup.height ?? 0;
   const rect = new fabric.Rect({
     width: frameW,
@@ -4430,10 +4475,11 @@ function clamp$1(v, min, max) {
 function applyControlSizeForZoom(canvas, obj) {
   if (!canvas || !obj) return;
   const z = canvas.getZoom() || 1;
-  const size = Math.max(6, Math.round(10 * z));
+  const size = Math.max(6, Math.round(8 * z));
   obj.set({
     cornerSize: size,
-    borderScaleFactor: z
+    // Subtle but visible border at any zoom (min ~1.25px).
+    borderScaleFactor: Math.max(1.25, 1.25 * z)
   });
   obj.setCoords();
 }
@@ -4448,7 +4494,7 @@ function finalizeCropGroupCoords(g) {
   g.setCoords();
 }
 function updateCoverLayout(g) {
-  var _a;
+  var _a2;
   const ct = g.__cropData;
   if (!ct) return;
   const { frameW, frameH, shape, rx: rxRatio, _img: img, _border: border } = ct;
@@ -4595,7 +4641,7 @@ function updateCoverLayout(g) {
     }
   }
   if (!img) {
-    const placeholderFrame = ct._placeholderFrame ?? ((_a = g._objects) == null ? void 0 : _a.find((obj) => obj.__isPlaceholderFrame));
+    const placeholderFrame = ct._placeholderFrame ?? ((_a2 = g._objects) == null ? void 0 : _a2.find((obj) => obj.__isPlaceholderFrame));
     if (placeholderFrame && typeof placeholderFrame.set === "function") {
       placeholderFrame.set({
         width: frameW,
@@ -4731,10 +4777,10 @@ const makeRotatedCursorStyleHandler = (controlKey) => {
   return (_eventData, _control, target) => getRotatedControlCursor(controlKey, target);
 };
 function resizeFrameFromCornerUniform(eventData, transform, _x, _y) {
-  var _a;
+  var _a2;
   const g = transform.target;
   const ct = g.__cropData;
-  if (!ct || !((_a = g._ct) == null ? void 0 : _a.isCropGroup)) return false;
+  if (!ct || !((_a2 = g._ct) == null ? void 0 : _a2.isCropGroup)) return false;
   const canvas = g.canvas;
   if (!canvas) return false;
   const e = getDomEvent(eventData);
@@ -4830,7 +4876,7 @@ function installCanvaMaskControls(g) {
       cursorStyleHandler: makeRotatedCursorStyleHandler(key),
       actionName: "crop",
       actionHandler: (eventData, transform) => {
-        var _a;
+        var _a2;
         const t = transform.target;
         const canvas = t.canvas;
         if (canvas && canvas.__editLockRef) {
@@ -4839,7 +4885,7 @@ function installCanvaMaskControls(g) {
         const { localDx, localDy } = getLocalDeltaStable(t, eventData);
         t.__lockScaleDuringCrop = true;
         resizeFrameFromSide(t, side, localDx, localDy);
-        (_a = t.canvas) == null ? void 0 : _a.requestRenderAll();
+        (_a2 = t.canvas) == null ? void 0 : _a2.requestRenderAll();
         return true;
       }
     });
@@ -5415,7 +5461,7 @@ function enterCropMode(g) {
   return true;
 }
 function exitCropMode(g, commit = true) {
-  var _a;
+  var _a2;
   if (!g[CROP_MODE_FLAG]) return;
   const canvas = g.canvas;
   const handlers = g[CROP_HANDLERS_FLAG];
@@ -5425,7 +5471,7 @@ function exitCropMode(g, commit = true) {
     canvas.off("mouse:down:before", handlers.onCanvasMouseDown);
     if (handlers.onDblClick) canvas.off("mouse:dblclick", handlers.onDblClick);
     window.removeEventListener("keydown", handlers.onKeyDown, true);
-    (_a = handlers.upperCanvasEl) == null ? void 0 : _a.removeEventListener("wheel", handlers.onWheel);
+    (_a2 = handlers.upperCanvasEl) == null ? void 0 : _a2.removeEventListener("wheel", handlers.onWheel);
   }
   g[CROP_HANDLERS_FLAG] = void 0;
   const ghost = g[CROP_GHOST_FLAG];
@@ -5878,6 +5924,18 @@ const hasActiveTextPath = (obj) => {
   const tp = obj.textPath;
   return !!tp && !!tp.preset && tp.preset !== "none";
 };
+const shouldShowOriginalTextBounds = () => {
+  var _a2;
+  try {
+    return typeof window !== "undefined" && ((_a2 = window.localStorage) == null ? void 0 : _a2.getItem("pixldocs:showOriginalTextBounds")) === "1";
+  } catch {
+    return false;
+  }
+};
+const hasActiveTextPathDescendant = (obj) => {
+  const kids = (obj == null ? void 0 : obj._objects) || [];
+  return kids.some((child) => hasActiveTextPath(child) || hasActiveTextPathDescendant(child));
+};
 function applyWarpFillStyle(ctx, obj) {
   const filler = obj.fill;
   if (filler && typeof filler === "object" && Array.isArray(filler.colorStops) && filler.coords) {
@@ -6012,8 +6070,8 @@ function vectorFromFrozenMatrix(matrix, dx, dy) {
   return new fabric.Point(matrix[0] * dx + matrix[2] * dy, matrix[1] * dx + matrix[3] * dy);
 }
 function scaleLocalToScreen(target, p) {
-  var _a;
-  const vpt = ((_a = target == null ? void 0 : target.canvas) == null ? void 0 : _a.viewportTransform) || [1, 0, 0, 1, 0, 0];
+  var _a2;
+  const vpt = ((_a2 = target == null ? void 0 : target.canvas) == null ? void 0 : _a2.viewportTransform) || [1, 0, 0, 1, 0, 0];
   const zx = Math.abs(vpt[0] || 1);
   const zy = Math.abs(vpt[3] || 1);
   const sx = Math.abs((target == null ? void 0 : target.scaleX) || 1);
@@ -6021,14 +6079,14 @@ function scaleLocalToScreen(target, p) {
   return new fabric.Point(p.x * sx * zx, p.y * sy * zy);
 }
 function applyTextPathControls(textbox) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r;
+  var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v;
   const obj = textbox;
   if (!hasActiveTextPath(obj)) {
     obj.__pdTextPathHovered = false;
     if (obj.__pdTextPathControls) {
       try {
         const cu2 = fabric.controlsUtils;
-        const defaults = ((_a = cu2 == null ? void 0 : cu2.createTextboxDefaultControls) == null ? void 0 : _a.call(cu2)) ?? ((_b = cu2 == null ? void 0 : cu2.createObjectDefaultControls) == null ? void 0 : _b.call(cu2));
+        const defaults = ((_a2 = cu2 == null ? void 0 : cu2.createTextboxDefaultControls) == null ? void 0 : _a2.call(cu2)) ?? ((_b = cu2 == null ? void 0 : cu2.createObjectDefaultControls) == null ? void 0 : _b.call(cu2));
         if (defaults) obj.controls = defaults;
       } catch {
       }
@@ -6053,43 +6111,23 @@ function applyTextPathControls(textbox) {
   }
   if (!obj.__pdTextPathHoverWired) {
     obj.on("mouseover", () => {
-      var _a2;
+      var _a3;
       if (!hasActiveTextPath(obj)) return;
       obj.__pdTextPathHovered = true;
-      (_a2 = obj.canvas) == null ? void 0 : _a2.requestRenderAll();
+      (_a3 = obj.canvas) == null ? void 0 : _a3.requestRenderAll();
     });
     obj.on("mouseout", () => {
-      var _a2;
+      var _a3;
       obj.__pdTextPathHovered = false;
-      (_a2 = obj.canvas) == null ? void 0 : _a2.requestRenderAll();
+      (_a3 = obj.canvas) == null ? void 0 : _a3.requestRenderAll();
     });
     obj.__pdTextPathHoverWired = true;
   }
-  obj.controls = {};
+  const cu = fabric.controlsUtils;
+  const defaultControls = ((_d = cu == null ? void 0 : cu.createTextboxDefaultControls) == null ? void 0 : _d.call(cu)) ?? ((_e = cu == null ? void 0 : cu.createObjectDefaultControls) == null ? void 0 : _e.call(cu)) ?? {};
+  obj.controls = { ...defaultControls };
   const halfWOf = (t) => (t.width || 0) / 2;
   const halfHOf = (t) => (t.height || 0) / 2;
-  const cu = fabric.controlsUtils;
-  const renderRotation = (ctx, left, top) => {
-    ctx.save();
-    ctx.translate(left, top);
-    ctx.shadowColor = "rgba(0,0,0,0.25)";
-    ctx.shadowBlur = 2;
-    ctx.shadowOffsetY = 0.5;
-    ctx.fillStyle = "#ffffff";
-    ctx.strokeStyle = "#1d9bf0";
-    ctx.lineWidth = 1.5;
-    ctx.beginPath();
-    ctx.arc(0, 0, 6, 0, Math.PI * 2);
-    ctx.fill();
-    ctx.shadowColor = "transparent";
-    ctx.stroke();
-    ctx.strokeStyle = "#1d9bf0";
-    ctx.lineWidth = 1.25;
-    ctx.beginPath();
-    ctx.arc(0, 0, 3, -Math.PI * 0.85, Math.PI * 0.75);
-    ctx.stroke();
-    ctx.restore();
-  };
   const renderPivot = (ctx, left, top) => {
     ctx.save();
     ctx.translate(left, top);
@@ -6113,17 +6151,7 @@ function applyTextPathControls(textbox) {
     ctx.restore();
   };
   const addRotationAndPivot = () => {
-    var _a2, _b2;
-    obj.controls.tpRot = new fabric.Control({
-      x: 0,
-      y: -0.5,
-      offsetY: -28,
-      cursorStyleHandler: cu == null ? void 0 : cu.rotationStyleHandler,
-      actionHandler: cu == null ? void 0 : cu.rotationWithSnapping,
-      actionName: "rotate",
-      render: renderRotation,
-      withConnection: false
-    });
+    var _a3;
     obj.controls.tpPivot = new fabric.Control({
       x: 0,
       y: 0,
@@ -6132,10 +6160,9 @@ function applyTextPathControls(textbox) {
       actionHandler: () => false,
       render: renderPivot
     });
-    (_a2 = obj.setControlVisible) == null ? void 0 : _a2.call(obj, "tpRot", true);
-    (_b2 = obj.setControlVisible) == null ? void 0 : _b2.call(obj, "tpPivot", true);
+    (_a3 = obj.setControlVisible) == null ? void 0 : _a3.call(obj, "tpPivot", true);
   };
-  if (((_d = obj.textPath) == null ? void 0 : _d.preset) === "circle") {
+  if (((_f = obj.textPath) == null ? void 0 : _f.preset) === "circle") {
     const getRadius = (target) => {
       const tp = target.textPath || {};
       const fs = target.fontSize || 16;
@@ -6145,14 +6172,14 @@ function applyTextPathControls(textbox) {
       return Math.max(fs * 0.75, Number.isFinite(r) && r > 0 ? r : auto);
     };
     const setRadius = (target, r) => {
-      var _a2;
+      var _a3;
       const fs = target.fontSize || 16;
       const clamped = Math.max(fs * 0.75, r);
       if (!target.textPath) target.textPath = { preset: "circle" };
       target.textPath.preset = "circle";
       target.textPath.radius = clamped;
       target.dirty = true;
-      (_a2 = target.canvas) == null ? void 0 : _a2.requestRenderAll();
+      (_a3 = target.canvas) == null ? void 0 : _a3.requestRenderAll();
     };
     const ringPoint = (target, dir) => {
       const r = getRadius(target);
@@ -6223,11 +6250,111 @@ function applyTextPathControls(textbox) {
     obj.controls.crE = new fabric.Control({ x: 0.5, y: 0, cursorStyle: "ew-resize", actionName: "textPath", actionHandler: dragRadius("E"), positionHandler: positionAtRing("E"), render: renderRingHandle });
     obj.controls.crS = new fabric.Control({ x: 0, y: 0.5, cursorStyle: "ns-resize", actionName: "textPath", actionHandler: dragRadius("S"), positionHandler: positionAtRing("S"), render: renderRingHandle });
     obj.controls.crW = new fabric.Control({ x: -0.5, y: 0, cursorStyle: "ew-resize", actionName: "textPath", actionHandler: dragRadius("W"), positionHandler: positionAtRing("W"), render: renderRingHandle });
-    (_e = obj.setControlVisible) == null ? void 0 : _e.call(obj, "crN", true);
-    (_f = obj.setControlVisible) == null ? void 0 : _f.call(obj, "crE", true);
-    (_g = obj.setControlVisible) == null ? void 0 : _g.call(obj, "crS", true);
-    (_h = obj.setControlVisible) == null ? void 0 : _h.call(obj, "crW", true);
+    (_g = obj.setControlVisible) == null ? void 0 : _g.call(obj, "crN", true);
+    (_h = obj.setControlVisible) == null ? void 0 : _h.call(obj, "crE", true);
+    (_i = obj.setControlVisible) == null ? void 0 : _i.call(obj, "crS", true);
+    (_j = obj.setControlVisible) == null ? void 0 : _j.call(obj, "crW", true);
     addRotationAndPivot();
+    const getPivotLocalCentered = (target) => {
+      var _a3;
+      const r = getRadius(target);
+      const cx = r - halfWOf(target);
+      const cy = r - halfHOf(target);
+      const off = (_a3 = target.textPath) == null ? void 0 : _a3.pivot;
+      const ox = off && Number.isFinite(off.x) ? off.x : 0;
+      const oy = off && Number.isFinite(off.y) ? off.y : 0;
+      return new fabric.Point(cx + ox, cy + oy);
+    };
+    const pivotInCanvas = (target) => {
+      const p = getPivotLocalCentered(target);
+      const m = target.calcTransformMatrix();
+      return fabric.util.transformPoint(p, m);
+    };
+    obj.controls.tpPivot = new fabric.Control({
+      x: 0,
+      y: 0,
+      cursorStyle: "move",
+      actionName: "tpPivot",
+      positionHandler: (_d2, finalMatrix, fabricObject) => scaleLocalToScreen(fabricObject, getPivotLocalCentered(fabricObject)).transform(finalMatrix),
+      actionHandler: (_e2, transform, x, y) => {
+        var _a3, _b2;
+        const target = transform.target;
+        const state = transform.__pdCirclePivotDrag || (transform.__pdCirclePivotDrag = {
+          startMatrix: target.calcTransformMatrix(),
+          startOffset: { ...((_a3 = target.textPath) == null ? void 0 : _a3.pivot) || { x: 0, y: 0 } },
+          startLocal: null
+        });
+        if (!state.startLocal) state.startLocal = localPointFromFrozenMatrix(target, x, y, state.startMatrix);
+        const local = localPointFromFrozenMatrix(target, x, y, state.startMatrix);
+        const dx = local.x - state.startLocal.x;
+        const dy = local.y - state.startLocal.y;
+        if (!target.textPath) target.textPath = { preset: "circle" };
+        target.textPath.pivot = {
+          x: (state.startOffset.x || 0) + dx,
+          y: (state.startOffset.y || 0) + dy
+        };
+        target.setCoords();
+        (_b2 = target.canvas) == null ? void 0 : _b2.requestRenderAll();
+        return true;
+      },
+      render: renderPivot
+    });
+    (_k = obj.setControlVisible) == null ? void 0 : _k.call(obj, "tpPivot", true);
+    if (obj.controls.mtr) {
+      const ROT_OFFSET_PX = 40;
+      obj.controls.mtr.positionHandler = (_d2, finalMatrix, fabricObject) => {
+        const t = fabricObject;
+        const b = computeCircleWarpBoundsLocal(t);
+        const topCenterLocal = b ? new fabric.Point((b.minX + b.maxX) / 2, b.minY) : new fabric.Point(0, -(t.height || 0) / 2);
+        const screen = scaleLocalToScreen(t, topCenterLocal);
+        return new fabric.Point(screen.x, screen.y - ROT_OFFSET_PX).transform(finalMatrix);
+      };
+      obj.controls.mtr.actionHandler = (eventData, transform, x, y) => {
+        var _a3;
+        const target = transform.target;
+        const state = transform.__pdCirclePivotRot || (transform.__pdCirclePivotRot = {
+          pivot: pivotInCanvas(target),
+          startAngleDeg: target.angle || 0,
+          startCenter: target.getCenterPoint(),
+          startPointerAngle: Math.atan2(
+            (transform.ey ?? y) - pivotInCanvas(target).y,
+            (transform.ex ?? x) - pivotInCanvas(target).x
+          )
+        });
+        const curAngle = Math.atan2(y - state.pivot.y, x - state.pivot.x);
+        const dRad = curAngle - state.startPointerAngle;
+        const cos = Math.cos(dRad);
+        const sin = Math.sin(dRad);
+        const dx = state.startCenter.x - state.pivot.x;
+        const dy = state.startCenter.y - state.pivot.y;
+        const newCenter = new fabric.Point(
+          state.pivot.x + dx * cos - dy * sin,
+          state.pivot.y + dx * sin + dy * cos
+        );
+        let newAngleDeg = state.startAngleDeg + dRad * 180 / Math.PI;
+        if (eventData && eventData.shiftKey) {
+          newAngleDeg = Math.round(newAngleDeg / 15) * 15;
+        }
+        target.angle = newAngleDeg;
+        target.setPositionByOrigin(newCenter, "center", "center");
+        target.setCoords();
+        (_a3 = target.canvas) == null ? void 0 : _a3.requestRenderAll();
+        return true;
+      };
+      (_l = obj.setControlVisible) == null ? void 0 : _l.call(obj, "mtr", true);
+    }
+    if (!obj.__pdCirclePivotDblWired) {
+      obj.on("mousedblclick", () => {
+        var _a3, _b2;
+        if (((_a3 = obj.textPath) == null ? void 0 : _a3.preset) !== "circle") return;
+        if (obj.__corner !== "tpPivot") return;
+        if (!obj.textPath.pivot) return;
+        obj.textPath.pivot = { x: 0, y: 0 };
+        obj.setCoords();
+        (_b2 = obj.canvas) == null ? void 0 : _b2.requestRenderAll();
+      });
+      obj.__pdCirclePivotDblWired = true;
+    }
     obj.hasBorders = false;
     obj.hasControls = true;
     obj.objectCaching = false;
@@ -6235,7 +6362,7 @@ function applyTextPathControls(textbox) {
     obj.setCoords();
     return;
   }
-  if (((_i = obj.textPath) == null ? void 0 : _i.preset) === "rise") {
+  if (((_m = obj.textPath) == null ? void 0 : _m.preset) === "rise") {
     const getEndpoints = (target) => {
       const w = target.width || 0;
       const fs = target.fontSize || 16;
@@ -6252,7 +6379,7 @@ function applyTextPathControls(textbox) {
       return { leftY, centerY, rightY };
     };
     const setEndpoints = (target, next) => {
-      var _a2;
+      var _a3;
       target.width || 1;
       target.fontSize || 16;
       const lineMid = (next.leftY + next.rightY) / 2;
@@ -6266,7 +6393,7 @@ function applyTextPathControls(textbox) {
       };
       if (target.skewY) target.set("skewY", 0);
       target.dirty = true;
-      (_a2 = target.canvas) == null ? void 0 : _a2.requestRenderAll();
+      (_a3 = target.canvas) == null ? void 0 : _a3.requestRenderAll();
     };
     const positionAtAngleHandle = (key) => (_d2, finalMatrix, target) => {
       const ep = getEndpoints(target);
@@ -6300,8 +6427,8 @@ function applyTextPathControls(textbox) {
     if (obj.skewY) obj.set("skewY", 0);
     obj.controls.rsL = new fabric.Control({ x: -0.5, y: 0, cursorStyle: "ns-resize", actionName: "textPath", actionHandler: dragAngleHandle("leftY"), positionHandler: positionAtAngleHandle("leftY"), render: renderAngleHandle });
     obj.controls.rsR = new fabric.Control({ x: 0.5, y: 0, cursorStyle: "ns-resize", actionName: "textPath", actionHandler: dragAngleHandle("rightY"), positionHandler: positionAtAngleHandle("rightY"), render: renderAngleHandle });
-    (_j = obj.setControlVisible) == null ? void 0 : _j.call(obj, "rsL", true);
-    (_k = obj.setControlVisible) == null ? void 0 : _k.call(obj, "rsR", true);
+    (_n = obj.setControlVisible) == null ? void 0 : _n.call(obj, "rsL", true);
+    (_o = obj.setControlVisible) == null ? void 0 : _o.call(obj, "rsR", true);
     addRotationAndPivot();
     obj.hasBorders = false;
     obj.hasControls = true;
@@ -6388,7 +6515,7 @@ function applyTextPathControls(textbox) {
     return scaleLocalToScreen(target, new fabric.Point(px - halfWOf(target), py - halfHOf(target))).transform(finalMatrix);
   };
   const makeMidTangentDrag = (side) => (_e2, transform, x, y) => {
-    var _a2;
+    var _a3;
     const target = transform.target;
     const local = localPointFromCanvas(target, x, y);
     const current = ensureBezier(target);
@@ -6415,11 +6542,11 @@ function applyTextPathControls(textbox) {
     bz.c1 = apply(bz.c1[0], bz.c1[1]);
     target.textPath = { ...target.textPath || { preset: "custom" }, bezier: bz };
     target.dirty = true;
-    (_a2 = target.canvas) == null ? void 0 : _a2.requestRenderAll();
+    (_a3 = target.canvas) == null ? void 0 : _a3.requestRenderAll();
     return true;
   };
   const makeDrag = (key) => (_e2, transform, x, y) => {
-    var _a2;
+    var _a3;
     const target = transform.target;
     const local = localPointFromCanvas(target, x, y);
     const current = ensureBezier(target);
@@ -6437,11 +6564,11 @@ function applyTextPathControls(textbox) {
     }
     target.textPath = { ...target.textPath || { preset: "custom" }, bezier: bz };
     target.dirty = true;
-    (_a2 = target.canvas) == null ? void 0 : _a2.requestRenderAll();
+    (_a3 = target.canvas) == null ? void 0 : _a3.requestRenderAll();
     return true;
   };
   const makeMidDrag = () => (_e2, transform, x, y) => {
-    var _a2;
+    var _a3;
     const target = transform.target;
     const local = localPointFromCanvas(target, x, y);
     const current = ensureBezier(target);
@@ -6458,7 +6585,7 @@ function applyTextPathControls(textbox) {
     bz.c1 = [bz.c1[0] + dx, bz.c1[1] + dy];
     target.textPath = { ...target.textPath || { preset: "custom" }, bezier: bz };
     target.dirty = true;
-    (_a2 = target.canvas) == null ? void 0 : _a2.requestRenderAll();
+    (_a3 = target.canvas) == null ? void 0 : _a3.requestRenderAll();
     return true;
   };
   const renderAnchor = (ctx, left, top) => {
@@ -6500,13 +6627,13 @@ function applyTextPathControls(textbox) {
   obj.controls.bzMid = new fabric.Control({ x: 0, y: 0, cursorStyle: "move", actionName: "textPath", actionHandler: makeMidDrag(), positionHandler: positionAtMid, render: renderAnchor });
   obj.controls.bzMidT0 = new fabric.Control({ x: 0, y: 0, cursorStyle: "move", actionName: "textPath", actionHandler: makeMidTangentDrag(-1), positionHandler: positionAtMidTangent(-1), render: renderControlHandle });
   obj.controls.bzMidT1 = new fabric.Control({ x: 0, y: 0, cursorStyle: "move", actionName: "textPath", actionHandler: makeMidTangentDrag(1), positionHandler: positionAtMidTangent(1), render: renderControlHandle });
-  (_l = obj.setControlVisible) == null ? void 0 : _l.call(obj, "bzP0", true);
-  (_m = obj.setControlVisible) == null ? void 0 : _m.call(obj, "bzC0", true);
-  (_n = obj.setControlVisible) == null ? void 0 : _n.call(obj, "bzC1", true);
-  (_o = obj.setControlVisible) == null ? void 0 : _o.call(obj, "bzP1", true);
-  (_p = obj.setControlVisible) == null ? void 0 : _p.call(obj, "bzMid", true);
-  (_q = obj.setControlVisible) == null ? void 0 : _q.call(obj, "bzMidT0", true);
-  (_r = obj.setControlVisible) == null ? void 0 : _r.call(obj, "bzMidT1", true);
+  (_p = obj.setControlVisible) == null ? void 0 : _p.call(obj, "bzP0", true);
+  (_q = obj.setControlVisible) == null ? void 0 : _q.call(obj, "bzC0", true);
+  (_r = obj.setControlVisible) == null ? void 0 : _r.call(obj, "bzC1", true);
+  (_s = obj.setControlVisible) == null ? void 0 : _s.call(obj, "bzP1", true);
+  (_t = obj.setControlVisible) == null ? void 0 : _t.call(obj, "bzMid", true);
+  (_u = obj.setControlVisible) == null ? void 0 : _u.call(obj, "bzMidT0", true);
+  (_v = obj.setControlVisible) == null ? void 0 : _v.call(obj, "bzMidT1", true);
   addRotationAndPivot();
   obj.hasBorders = false;
   obj.hasControls = true;
@@ -6514,6 +6641,29 @@ function applyTextPathControls(textbox) {
   obj.setCoords();
 }
 function computeWarpBoundsLocal(obj) {
+  const tp = obj.textPath;
+  if (tp && (tp.preset === "rise" || tp.preset === "angle")) {
+    const w = obj.width || 0;
+    const h = obj.height || 0;
+    const fs2 = obj.fontSize || 16;
+    const ep = tp.endpoints;
+    const defaultLeftY = fs2 * 1.5;
+    const defaultRightY = fs2 * 0.5;
+    const leftY = ep && Number.isFinite(ep.leftY) ? ep.leftY : defaultLeftY;
+    const rightY = ep && Number.isFinite(ep.rightY) ? ep.rightY : defaultRightY;
+    const slope = w > 0 ? (rightY - leftY) / w : 0;
+    const dy = (leftY + rightY) / 2 - h / 2;
+    const halfW2 = w / 2;
+    const halfH2 = h / 2;
+    const yShift = Math.abs(slope) * halfW2;
+    const pad = fs2 * 0.15;
+    return {
+      minX: -halfW2 - pad,
+      maxX: halfW2 + pad,
+      minY: -halfH2 + dy - yShift - pad,
+      maxY: halfH2 + dy + yShift + pad
+    };
+  }
   const resolved = resolveTextPath(obj.textPath, obj.width || 0, obj.fontSize || 16);
   const path = resolved ? measurePath(resolved.d) : null;
   if (!path) return null;
@@ -6539,8 +6689,8 @@ function computeWarpBoundsLocal(obj) {
   };
 }
 function computeCircleWarpBoundsLocal(obj) {
-  var _a;
-  if (((_a = obj.textPath) == null ? void 0 : _a.preset) !== "circle") return null;
+  var _a2;
+  if (((_a2 = obj.textPath) == null ? void 0 : _a2.preset) !== "circle") return null;
   const fs = obj.fontSize || 16;
   const w = obj.width || 0;
   const auto = Math.max(fs * 1.5, w / Math.PI);
@@ -6550,11 +6700,12 @@ function computeCircleWarpBoundsLocal(obj) {
   const halfH = (obj.height || 0) / 2;
   const cx = r - halfW;
   const cy = r - halfH;
-  return { minX: cx - r - fs * 0.2, maxX: cx + r + fs * 0.2, minY: cy - r - fs * 0.6, maxY: cy + r + fs * 0.6 };
+  const pad = fs * 0.85;
+  return { minX: cx - r - pad, maxX: cx + r + pad, minY: cy - r - pad, maxY: cy + r + pad };
 }
 function getTextPathHitBounds(obj) {
-  var _a;
-  return ((_a = obj.textPath) == null ? void 0 : _a.preset) === "circle" ? computeCircleWarpBoundsLocal(obj) : computeWarpBoundsLocal(obj);
+  var _a2;
+  return ((_a2 = obj.textPath) == null ? void 0 : _a2.preset) === "circle" ? computeCircleWarpBoundsLocal(obj) : computeWarpBoundsLocal(obj);
 }
 function textPathBoundsContainScenePoint(obj, point) {
   const bounds = getTextPathHitBounds(obj);
@@ -6567,11 +6718,12 @@ function textPathBoundsContainScenePoint(obj, point) {
     return false;
   }
 }
-function drawTextPathBounds(ctx, obj, bounds) {
-  var _a;
-  if (!obj.canvas) return;
-  const retina = ((_a = obj.getCanvasRetinaScaling) == null ? void 0 : _a.call(obj)) || 1;
-  const matrix = fabric.util.multiplyTransformMatrices(obj.canvas.viewportTransform || [1, 0, 0, 1, 0, 0], obj.calcTransformMatrix());
+function drawTextPathBounds(ctx, obj, bounds, hostCanvas) {
+  var _a2, _b, _c;
+  const host = hostCanvas || obj.canvas || ((_a2 = obj.group) == null ? void 0 : _a2.canvas);
+  if (!host) return;
+  const retina = ((_b = host.getRetinaScaling) == null ? void 0 : _b.call(host)) || ((_c = obj.getCanvasRetinaScaling) == null ? void 0 : _c.call(obj)) || 1;
+  const matrix = fabric.util.multiplyTransformMatrices(host.viewportTransform || [1, 0, 0, 1, 0, 0], obj.calcTransformMatrix());
   const corners = [
     new fabric.Point(bounds.minX, bounds.minY),
     new fabric.Point(bounds.maxX, bounds.minY),
@@ -6592,20 +6744,23 @@ function drawTextPathBounds(ctx, obj, bounds) {
 }
 if (typeof TextboxProto._renderControls === "function" && !TextboxProto.__pixldocsOrigRenderControls) {
   let drawWarpGuides = function(ctx) {
-    var _a, _b, _c, _d, _e, _f, _g;
-    if (!this.canvas) return;
+    var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+    const hostCanvas = this.canvas || ((_a2 = this.group) == null ? void 0 : _a2.canvas) || ((_c = (_b = this.group) == null ? void 0 : _b.group) == null ? void 0 : _c.canvas);
+    if (!hostCanvas) return;
     const hoverBounds = getTextPathHitBounds(this);
-    if (hoverBounds && (this.__pdTextPathHovered || ((_b = (_a = this.canvas).getActiveObject) == null ? void 0 : _b.call(_a)) === this)) {
-      drawTextPathBounds(ctx, this, hoverBounds);
+    const active = (_d = hostCanvas.getActiveObject) == null ? void 0 : _d.call(hostCanvas);
+    const isActiveOrInActive = active === this || !!active && typeof active.contains === "function" && active.contains(this, true);
+    if (hoverBounds && (this.__pdTextPathHovered || isActiveOrInActive)) {
+      drawTextPathBounds(ctx, this, hoverBounds, hostCanvas);
     }
     const resolved = resolveTextPath(this.textPath, this.width || 0, this.fontSize || 16);
     const path = resolved ? measurePath(resolved.d) : null;
     if (!path) return;
     const len = path.getTotalLength();
     if (!Number.isFinite(len) || len <= 0) return;
-    const retina = ((_c = this.getCanvasRetinaScaling) == null ? void 0 : _c.call(this)) || 1;
+    const retina = ((_e = hostCanvas.getRetinaScaling) == null ? void 0 : _e.call(hostCanvas)) || ((_f = this.getCanvasRetinaScaling) == null ? void 0 : _f.call(this)) || 1;
     const matrix = fabric.util.multiplyTransformMatrices(
-      this.canvas.viewportTransform || [1, 0, 0, 1, 0, 0],
+      hostCanvas.viewportTransform || [1, 0, 0, 1, 0, 0],
       this.calcTransformMatrix()
     );
     const halfW = (this.width || 0) / 2;
@@ -6617,8 +6772,8 @@ if (typeof TextboxProto._renderControls === "function" && !TextboxProto.__pixldo
     const toScreenXY = (x, y) => fabric.util.transformPoint(new fabric.Point(x, y), matrix);
     ctx.save();
     ctx.setTransform(retina, 0, 0, retina, 0, 0);
-    const isCircle = ((_d = this.textPath) == null ? void 0 : _d.preset) === "circle";
-    const isAngle = ((_e = this.textPath) == null ? void 0 : _e.preset) === "rise" || ((_f = this.textPath) == null ? void 0 : _f.preset) === "angle";
+    const isCircle = ((_g = this.textPath) == null ? void 0 : _g.preset) === "circle";
+    const isAngle = ((_h = this.textPath) == null ? void 0 : _h.preset) === "rise" || ((_i = this.textPath) == null ? void 0 : _i.preset) === "angle";
     ctx.strokeStyle = "rgba(29, 155, 240, 0.95)";
     ctx.lineWidth = 1.25;
     ctx.setLineDash([]);
@@ -6664,7 +6819,7 @@ if (typeof TextboxProto._renderControls === "function" && !TextboxProto.__pixldo
       ctx.closePath();
       ctx.stroke();
     }
-    const bz = isCircle ? null : (_g = this.textPath) == null ? void 0 : _g.bezier;
+    const bz = isCircle ? null : (_j = this.textPath) == null ? void 0 : _j.bezier;
     if (bz) {
       const a = toScreenXY(bz.p0[0] - halfW, bz.p0[1] - halfH);
       const ah = toScreenXY(bz.c0[0] - halfW, bz.c0[1] - halfH);
@@ -6704,13 +6859,28 @@ if (typeof TextboxProto._renderControls === "function" && !TextboxProto.__pixldo
   TextboxProto.__pixldocsOrigRenderControls = TextboxProto._renderControls;
   TextboxProto._renderControls = function(ctx, styleOverride) {
     if (hasActiveTextPath(this)) {
+      const showOrig = shouldShowOriginalTextBounds();
       const prevBorders = this.hasBorders;
-      this.hasBorders = false;
+      const prevBorderColor = this.borderColor;
+      const prevControls = this.controls;
+      if (!showOrig) {
+        this.hasBorders = false;
+        this.borderColor = "rgba(0,0,0,0)";
+        const filtered = {};
+        for (const key of Object.keys(prevControls || {})) {
+          if (key === "mtr" || key === "tpPivot" || key.startsWith("cr") || key.startsWith("rs") || key.startsWith("bz")) {
+            filtered[key] = prevControls[key];
+          }
+        }
+        this.controls = filtered;
+      }
       try {
         drawWarpGuides.call(this, ctx);
         TextboxProto.__pixldocsOrigRenderControls.call(this, ctx, styleOverride);
       } finally {
         this.hasBorders = prevBorders;
+        this.borderColor = prevBorderColor;
+        this.controls = prevControls;
       }
       return;
     }
@@ -6805,6 +6975,50 @@ if (!TextboxProto.__pixldocsOrigRender && typeof TextboxProto._render === "funct
   };
 }
 TextboxProto.__pixldocsTextboxExtended = true;
+const GroupProto = (_a = fabric.Group) == null ? void 0 : _a.prototype;
+if (GroupProto && typeof GroupProto._renderControls === "function" && !GroupProto.__pixldocsOrigRenderControls) {
+  GroupProto.__pixldocsOrigRenderControls = GroupProto._renderControls;
+  GroupProto._renderControls = function(ctx, styleOverride, childrenOverride) {
+    var _a2;
+    const host = this.canvas;
+    const active = (_a2 = host == null ? void 0 : host.getActiveObject) == null ? void 0 : _a2.call(host);
+    const isActiveOrInActive = !!host && (active === this || !!active && typeof active.contains === "function" && active.contains(this, true));
+    const hideWarpChildBounds = isActiveOrInActive && !shouldShowOriginalTextBounds() && hasActiveTextPathDescendant(this);
+    const prevBorders = this.hasBorders;
+    const prevControls = this.hasControls;
+    const prevBorderColor = this.borderColor;
+    if (hideWarpChildBounds) {
+      this.hasBorders = false;
+      this.hasControls = false;
+      this.borderColor = "rgba(0,0,0,0)";
+      styleOverride = { ...styleOverride || {}, hasBorders: false, hasControls: false, borderColor: "rgba(0,0,0,0)" };
+      childrenOverride = { ...childrenOverride || {}, hasBorders: false, borderColor: "rgba(0,0,0,0)" };
+    }
+    try {
+      GroupProto.__pixldocsOrigRenderControls.call(this, ctx, styleOverride, childrenOverride);
+    } finally {
+      if (hideWarpChildBounds) {
+        this.hasBorders = prevBorders;
+        this.hasControls = prevControls;
+        this.borderColor = prevBorderColor;
+      }
+    }
+    if (!host || !isActiveOrInActive) return;
+    const drawForDescendants = (parent) => {
+      const kids = (parent == null ? void 0 : parent._objects) || [];
+      for (const child of kids) {
+        if (child && Array.isArray(child._objects)) {
+          drawForDescendants(child);
+        }
+        if (child && child.textPath && child.textPath.preset && child.textPath.preset !== "none") {
+          const bounds = getTextPathHitBounds(child);
+          if (bounds) drawTextPathBounds(ctx, child, bounds, host);
+        }
+      }
+    };
+    drawForDescendants(this);
+  };
+}
 const TextboxProtoHit = fabric.Textbox.prototype;
 if (!TextboxProtoHit.__pixldocsOrigGetCoords && typeof TextboxProtoHit.getCoords === "function") {
   TextboxProtoHit.__pixldocsOrigGetCoords = TextboxProtoHit.getCoords;
@@ -6983,7 +7197,7 @@ function buildRoundedRectPath2D(ctx, x, y, w, h, rTL, rTR, rBR, rBL) {
   ctx.closePath();
 }
 function applyTextBackground(obj, cfg) {
-  var _a;
+  var _a2;
   obj[PD_BG_KEY] = { ...cfg };
   try {
     const hasOffset = (Number(cfg == null ? void 0 : cfg.shadowOffsetX) || 0) !== 0 || (Number(cfg == null ? void 0 : cfg.shadowOffsetY) || 0) !== 0;
@@ -7229,10 +7443,10 @@ function applyTextBackground(obj, cfg) {
     }
     return out;
   };
-  const originalToSVG = (_a = obj.toSVG) == null ? void 0 : _a.bind(obj);
+  const originalToSVG = (_a2 = obj.toSVG) == null ? void 0 : _a2.bind(obj);
   if (typeof originalToSVG === "function") {
     obj.toSVG = function(reviver) {
-      var _a2, _b;
+      var _a3, _b;
       let svg = originalToSVG(reviver);
       const bg = this[PD_BG_KEY];
       const shadow = this.shadow;
@@ -7245,7 +7459,7 @@ function applyTextBackground(obj, cfg) {
       const hasBlockShadow = !!bg && bg.shadowType === "block" && hasExtShadowColor && extDist > 0;
       const hasLineShadow = !!bg && bg.shadowType === "line" && hasExtShadowColor && extDist > 0;
       if (!hasBg && !hasShadow && !hasBlockShadow && !hasLineShadow) return svg;
-      const hasActiveTextPath2 = !!(((_a2 = this.textPath) == null ? void 0 : _a2.preset) && this.textPath.preset !== "none");
+      const hasActiveTextPath2 = !!(((_a3 = this.textPath) == null ? void 0 : _a3.preset) && this.textPath.preset !== "none");
       const w = this.width ?? 0;
       const h = this.height ?? 0;
       const pT = Math.max(0, Number((bg == null ? void 0 : bg.padTop) ?? 0));
@@ -7392,7 +7606,7 @@ function recolorSvgFills(svg, color, strokeWidth = 0) {
   return _recolorSvgFills(svg, color, strokeWidth);
 }
 function _recolorSvgFills(svg, color, strokeWidth = 0) {
-  var _a;
+  var _a2;
   const safe = escapeXmlAttr(color);
   const spread = Math.max(0, Number(strokeWidth) || 0);
   try {
@@ -7402,7 +7616,7 @@ function _recolorSvgFills(svg, color, strokeWidth = 0) {
     if (root && root.nodeName !== "parsererror") {
       for (const g of Array.from(root.querySelectorAll("linearGradient, radialGradient, pattern"))) {
         try {
-          (_a = g.parentNode) == null ? void 0 : _a.removeChild(g);
+          (_a2 = g.parentNode) == null ? void 0 : _a2.removeChild(g);
         } catch {
         }
       }
@@ -7490,7 +7704,7 @@ function unionBounds(bounds) {
   return { x: minX, y: minY, w: Math.max(1, maxX - minX), h: Math.max(1, maxY - minY) };
 }
 function computeTextVisualBounds(obj, w, h) {
-  var _a;
+  var _a2;
   const lines = (obj == null ? void 0 : obj._textLines) ?? [];
   if (!lines || lines.length === 0) return { x: -w / 2, y: -h / 2, w, h };
   const rects = [];
@@ -7508,7 +7722,7 @@ function computeTextVisualBounds(obj, w, h) {
       lineW = 0;
     }
     try {
-      lineLeft = ((_a = obj._getLineLeftOffset) == null ? void 0 : _a.call(obj, i)) ?? 0;
+      lineLeft = ((_a2 = obj._getLineLeftOffset) == null ? void 0 : _a2.call(obj, i)) ?? 0;
     } catch {
       lineLeft = 0;
     }
@@ -7526,7 +7740,7 @@ function computeTextVisualBounds(obj, w, h) {
   return unionBounds(rects.length > 0 ? rects : [{ x: -w / 2, y: -h / 2, w, h }]);
 }
 function computeBgRects(obj, w, h, pT, pR, pB, pL, fit) {
-  var _a;
+  var _a2;
   if (!fit) {
     return [{
       x: -w / 2 - pL,
@@ -7559,7 +7773,7 @@ function computeBgRects(obj, w, h, pT, pR, pB, pL, fit) {
       lineW = 0;
     }
     try {
-      lineLeft = ((_a = obj._getLineLeftOffset) == null ? void 0 : _a.call(obj, i)) ?? 0;
+      lineLeft = ((_a2 = obj._getLineLeftOffset) == null ? void 0 : _a2.call(obj, i)) ?? 0;
     } catch {
       lineLeft = 0;
     }
@@ -8332,7 +8546,7 @@ function createShape(element) {
   }
 }
 function createText(element) {
-  var _a, _b;
+  var _a2, _b, _c;
   const overflowPolicy = element.overflowPolicy || "grow-and-push";
   let text = element.text || "Text";
   let fontSize = element.fontSize || 16;
@@ -8372,7 +8586,7 @@ function createText(element) {
       });
       testTextbox.initDimensions();
       const textHeight = testTextbox.height || 0;
-      const renderedLineCount = ((_a = testTextbox.textLines) == null ? void 0 : _a.length) || 1;
+      const renderedLineCount = ((_a2 = testTextbox.textLines) == null ? void 0 : _a2.length) || 1;
       const hasNoImplicitWrap = renderedLineCount <= explicitLineCount;
       const fitsHeight = heightBound <= 0 || textHeight <= heightBound;
       const widthMetrics = getTextboxWidthFitMetrics(testTextbox, fixedWidth);
@@ -8427,7 +8641,7 @@ function createText(element) {
   if (overflowPolicy === "max-lines-ellipsis") {
     const originalText = element.text || "Text";
     const countLines = (testText) => {
-      var _a2;
+      var _a3;
       const tb = new fabric.Textbox(testText, {
         width: element.width,
         fontSize,
@@ -8436,7 +8650,7 @@ function createText(element) {
         splitByGrapheme: element.splitByGrapheme ?? element.wordWrap === "break-word"
       });
       tb.initDimensions();
-      return ((_a2 = tb.textLines) == null ? void 0 : _a2.length) || 1;
+      return ((_a3 = tb.textLines) == null ? void 0 : _a3.length) || 1;
     };
     let low = 0;
     let high = originalText.length;
@@ -8505,10 +8719,30 @@ function createText(element) {
     minWidth: 1,
     dynamicMinWidth: 0,
     scaleX: targetScaleX,
-    scaleY: targetScaleY
+    scaleY: targetScaleY,
+    // Prevent the bottom/top resize handle from flipping the textbox through
+    // zero (which visually "drags" the element up on the page once it can't
+    // shrink any further). Locking flip + a small minScaleLimit makes the
+    // handle simply stop where it is instead of repositioning the element.
+    lockScalingFlip: true,
+    minScaleLimit: 0.01
   });
   textbox.setCoords();
   const widthAfterSet = textbox.width ?? 0;
+  try {
+    (_b = textbox.setControlsVisibility) == null ? void 0 : _b.call(textbox, {
+      tl: true,
+      tr: true,
+      bl: true,
+      br: true,
+      mt: true,
+      mb: true,
+      ml: true,
+      mr: true,
+      mtr: true
+    });
+  } catch {
+  }
   const scaleXAfterSet = textbox.scaleX ?? 1;
   const scaleYAfterSet = textbox.scaleY ?? 1;
   if (Math.abs(widthAfterSet - targetWidth) > 0.01 || Math.abs(scaleXAfterSet - targetScaleX) > 0.01 || Math.abs(scaleYAfterSet - targetScaleY) > 0.01) {
@@ -8539,7 +8773,7 @@ function createText(element) {
       finalFontSize: fontSize,
       textboxWidth: textbox.width,
       textboxHeight: textbox.height,
-      lineCount: ((_b = textbox.textLines) == null ? void 0 : _b.length) || 0,
+      lineCount: ((_c = textbox.textLines) == null ? void 0 : _c.length) || 0,
       lines: (textbox.textLines || []).map((line) => Array.isArray(line) ? line.join("") : String(line ?? "")),
       widthMetrics: getTextboxWidthFitMetrics(textbox, targetWidth)
     }));
@@ -8605,6 +8839,23 @@ function createFabricObject(element) {
     if (element.type === "text" && obj instanceof fabric.Textbox) {
       applyTextPathControls(obj);
     }
+    if (element.type === "line") {
+      obj.setControlsVisibility({
+        tl: false,
+        tr: false,
+        bl: false,
+        br: false,
+        mt: false,
+        mb: false,
+        ml: true,
+        mr: true,
+        mtr: true
+      });
+      obj.set({
+        padding: 8,
+        perPixelTargetFind: false
+      });
+    }
   }
   return obj;
 }
@@ -8661,7 +8912,7 @@ function generateQRMatrix(text, errorCorrectionLevel) {
   return { modules: [[true]], size: 1 };
 }
 function renderQRSvg(props, width, height) {
-  var _a;
+  var _a2;
   props.value || "https://example.com";
   const fgColor = props.fgColor || "#000000";
   const bgColor = props.bgColor || "#FFFFFF";
@@ -8673,7 +8924,7 @@ function renderQRSvg(props, width, height) {
   let pathData = "";
   for (let row = 0; row < size; row++) {
     for (let col = 0; col < size; col++) {
-      if ((_a = modules[row]) == null ? void 0 : _a[col]) {
+      if ((_a2 = modules[row]) == null ? void 0 : _a2[col]) {
         const x = (col + margin) * cellSize;
         const y = (row + margin) * cellSize;
         pathData += `M${x},${y}h${cellSize}v${cellSize}h${-cellSize}Z `;
@@ -9081,6 +9332,21 @@ function renderSmartElementToDataUri(type, props, width, height) {
   if (!svg) return null;
   return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;
 }
+const KEY_SHOW_ORIG_TEXT_BOUNDS = "pixldocs:showOriginalTextBounds";
+const EVT_SHOW_ORIG_TEXT_BOUNDS = "pixldocs:showOriginalTextBoundsChanged";
+function getShowOriginalTextBounds() {
+  if (typeof window === "undefined") return false;
+  try {
+    return window.localStorage.getItem(KEY_SHOW_ORIG_TEXT_BOUNDS) === "1";
+  } catch {
+    return false;
+  }
+}
+function subscribeShowOriginalTextBounds(cb) {
+  const handler = (e) => cb(!!e.detail);
+  window.addEventListener(EVT_SHOW_ORIG_TEXT_BOUNDS, handler);
+  return () => window.removeEventListener(EVT_SHOW_ORIG_TEXT_BOUNDS, handler);
+}
 function hasEdgeFade(p) {
   if (!p) return false;
   const sides = [
@@ -9190,9 +9456,71 @@ function bakeEdgeFade(source, fade) {
     ctx.globalCompositeOperation = "destination-in";
     ctx.drawImage(mask, 0, 0);
     ctx.globalCompositeOperation = "source-over";
+    if (amount < 1) {
+      if (side === "top") ctx.clearRect(0, 0, canvas.width, Math.min(2, canvas.height));
+      else if (side === "bottom") ctx.clearRect(0, Math.max(0, canvas.height - 2), canvas.width, Math.min(2, canvas.height));
+      else if (side === "left") ctx.clearRect(0, 0, Math.min(2, canvas.width), canvas.height);
+      else if (side === "right") ctx.clearRect(Math.max(0, canvas.width - 2), 0, Math.min(2, canvas.width), canvas.height);
+    }
   }
   return canvas;
 }
+const SELECTION_PRIMARY = "hsl(217, 91%, 60%)";
+try {
+  const InteractiveBase = fabric.InteractiveFabricObject ?? fabric.Object;
+  if (InteractiveBase == null ? void 0 : InteractiveBase.ownDefaults) {
+    Object.assign(InteractiveBase.ownDefaults, {
+      borderColor: SELECTION_PRIMARY,
+      borderScaleFactor: 1.25,
+      cornerColor: SELECTION_PRIMARY,
+      cornerStrokeColor: "#ffffff",
+      cornerStyle: "rect",
+      transparentCorners: false,
+      cornerSize: 8,
+      borderOpacityWhenMoving: 0.9
+    });
+  } else if (InteractiveBase == null ? void 0 : InteractiveBase.prototype) {
+    Object.assign(InteractiveBase.prototype, {
+      borderColor: SELECTION_PRIMARY,
+      borderScaleFactor: 1.25,
+      cornerColor: SELECTION_PRIMARY,
+      cornerStrokeColor: "#ffffff",
+      cornerStyle: "rect",
+      transparentCorners: false,
+      cornerSize: 8,
+      borderOpacityWhenMoving: 0.9
+    });
+  }
+} catch (e) {
+  console.warn("[PageCanvas] Failed to apply global selection defaults:", e);
+}
+function applyWarpAwareSelectionBorders(selection) {
+  if (getShowOriginalTextBounds()) {
+    if (selection.__pixldocsOrigASHasBorders !== void 0) {
+      selection.hasBorders = selection.__pixldocsOrigASHasBorders;
+    }
+    return;
+  }
+  const hasWarpedTextObject = (obj) => {
+    if (obj instanceof fabric.Textbox) {
+      const tp = obj.textPath;
+      return !!(tp && tp.preset && tp.preset !== "none");
+    }
+    const children = obj._objects;
+    return Array.isArray(children) && children.some((child) => hasWarpedTextObject(child));
+  };
+  const hasWarpedText = selection.getObjects().some((obj) => {
+    if (!hasWarpedTextObject(obj)) return false;
+    const tp = obj.textPath;
+    return !tp || tp.preset !== "none";
+  });
+  if (hasWarpedText) {
+    if (selection.__pixldocsOrigASHasBorders === void 0) {
+      selection.__pixldocsOrigASHasBorders = selection.hasBorders;
+    }
+    selection.hasBorders = false;
+  }
+}
 const PageCanvas = forwardRef(
   ({
     pageId,
@@ -9236,7 +9564,9 @@ const PageCanvas = forwardRef(
     const justModifiedIdsRef = useRef(/* @__PURE__ */ new Set());
     const previousVisibilityRef = useRef(/* @__PURE__ */ new Map());
     const isSyncingSelectionToFabricRef = useRef(false);
+    const suppressGroupMemberBordersRef = useRef([]);
     const editingTextIdRef = useRef(null);
+    const pendingTextEditOnUpRef = useRef(null);
     const syncLockedRef = useRef(false);
     const editLockRef = useRef(false);
     const editLockCountRef = useRef(0);
@@ -9251,6 +9581,8 @@ const PageCanvas = forwardRef(
     const hasClearedCachesBeforeFirstSyncRef = useRef(false);
     const [guides, setGuides] = useState([]);
     const [gridResizeLabel, setGridResizeLabel] = useState(null);
+    const [rotationLabel, setRotationLabel] = useState(null);
+    const [sizeLabel, setSizeLabel] = useState(null);
     const [ready, setReady] = useState(false);
     const [unlockRequestId, setUnlockRequestId] = useState(0);
     useMemo(
@@ -9262,6 +9594,8 @@ const PageCanvas = forwardRef(
     const [groupOverlayLiveBounds, setGroupOverlayLiveBounds] = useState(null);
     const setGroupOverlayLiveBoundsRef = useRef(setGroupOverlayLiveBounds);
     const skipSelectionClearOnDiscardRef = useRef(false);
+    const skipActiveSelectionBakeOnClearRef = useRef(false);
+    const preserveActiveSelectionAfterTransformRef = useRef(null);
     const imageReloadRequestSeqRef = useRef(/* @__PURE__ */ new Map());
     useRef(null);
     const groupBoundsResizingRef = useRef(false);
@@ -9279,6 +9613,8 @@ const PageCanvas = forwardRef(
     useRef(null);
     const lastTextEditDimensionsRef = useRef(null);
     const lastResizeScaleTargetRef = useRef(null);
+    const preserveSelectionAfterTransformIdRef = useRef(null);
+    const groupSelectionTransformStartRef = useRef(null);
     setGroupOverlayLiveBoundsRef.current = setGroupOverlayLiveBounds;
     const {
       selectElements,
@@ -9333,7 +9669,7 @@ const PageCanvas = forwardRef(
         }
       },
       enterTextEditing: (elementId, charToInsert) => {
-        var _a;
+        var _a2;
         const fc = fabricRef.current;
         if (!fc || !allowEditing) return false;
         let textbox = null;
@@ -9351,7 +9687,7 @@ const PageCanvas = forwardRef(
         textbox.enterEditing();
         if (charToInsert != null && charToInsert.length > 0) {
           const iText = textbox;
-          const start = iText.selectionStart ?? (((_a = iText.text) == null ? void 0 : _a.length) ?? 0);
+          const start = iText.selectionStart ?? (((_a2 = iText.text) == null ? void 0 : _a2.length) ?? 0);
           iText.insertChars(charToInsert, void 0, start);
         }
         fc.requestRenderAll();
@@ -9442,9 +9778,9 @@ const PageCanvas = forwardRef(
       const elementById = new Map(elementsRef.current.map((el) => [el.id, el]));
       let didReflow = false;
       const reflowObject = (obj) => {
-        var _a;
+        var _a2;
         if (obj instanceof fabric.Group) {
-          (_a = obj._objects) == null ? void 0 : _a.forEach(reflowObject);
+          (_a2 = obj._objects) == null ? void 0 : _a2.forEach(reflowObject);
           obj.dirty = true;
           return;
         }
@@ -9652,6 +9988,7 @@ const PageCanvas = forwardRef(
       fabricCanvas.__fontCleanup = fontCleanup;
       fabricCanvas.__isUserTransforming = false;
       fabricCanvas.on("mouse:down", () => {
+        groupSelectionTransformStartRef.current = null;
         if (fabricCanvas._currentTransform) {
           fabricCanvas.__isUserTransforming = true;
         }
@@ -9663,13 +10000,13 @@ const PageCanvas = forwardRef(
         fabricCanvas.__isUserTransforming = true;
       });
       fabricCanvas.on("object:moving", () => {
-        var _a;
+        var _a2;
         fabricCanvas.__isUserTransforming = true;
         didTransformRef.current = true;
         const active = fabricCanvas.getActiveObject();
         if (!active) return;
         const state = useEditorStore.getState();
-        const canvasPage = (_a = state.canvas.pages) == null ? void 0 : _a.find((p) => p.id === pageId);
+        const canvasPage = (_a2 = state.canvas.pages) == null ? void 0 : _a2.find((p) => p.id === pageId);
         const children = (canvasPage == null ? void 0 : canvasPage.children) ?? [];
         if (!canvasPage) return;
         const ids = state.canvas.selectedIds ?? [];
@@ -9704,14 +10041,14 @@ const PageCanvas = forwardRef(
         didTransformRef.current = true;
       });
       const syncSelectionToStore = () => {
-        var _a, _b;
+        var _a2, _b, _c, _d, _e, _f, _g;
         if (!isActiveRef.current || isRebuildingRef.current || isSyncingSelectionToFabricRef.current || !allowSelection) return;
         const active = fabricCanvas.getActiveObject();
         let ids = fabricCanvas.getActiveObjects().map((o) => getObjectId(o)).filter((id) => !!id && id !== "__background__");
         if (ids.length === 1 && active && active instanceof fabric.Group && active.__docuforgeSectionGroup) {
           const groupId = ids[0];
           const state = useEditorStore.getState();
-          const currentPage2 = (_a = state.canvas.pages) == null ? void 0 : _a.find((p) => p.id === pageId);
+          const currentPage2 = (_a2 = state.canvas.pages) == null ? void 0 : _a2.find((p) => p.id === pageId);
           const children = (currentPage2 == null ? void 0 : currentPage2.children) ?? [];
           const node = findNodeById(children, groupId);
           if (node && isGroup(node)) {
@@ -9719,13 +10056,48 @@ const PageCanvas = forwardRef(
             ids = [groupId, ...memberIds];
           }
         }
+        if (active instanceof fabric.ActiveSelection) {
+          const groupSelectionId = active.__pixldocsGroupSelection;
+          if (groupSelectionId) {
+            selectElements([groupSelectionId], false, false);
+            return;
+          }
+        }
         if (ids.length === 1) {
+          const activeEditingGroupId = fabricCanvas.__activeEditingGroupId ?? null;
+          const clickedId = ids[0];
+          const state = useEditorStore.getState();
+          const currentPage2 = (_b = state.canvas.pages) == null ? void 0 : _b.find((p) => p.id === pageId);
+          const children = (currentPage2 == null ? void 0 : currentPage2.children) ?? [];
+          const parent = findParentGroup(children, clickedId);
+          const targetIsInCrop = !!(((_c = active == null ? void 0 : active._ct) == null ? void 0 : _c.isCropGroup) || (active == null ? void 0 : active.__cropGroup) || ((_e = (_d = active == null ? void 0 : active.group) == null ? void 0 : _d._ct) == null ? void 0 : _e.isCropGroup) || ((_f = active == null ? void 0 : active.group) == null ? void 0 : _f.__cropGroup));
+          if (parent && !targetIsInCrop && activeEditingGroupId !== parent.id && !(active && active instanceof fabric.Group && active.__docuforgeSectionGroup)) {
+            const memberIdSet = new Set(getAllElementIds(parent.children ?? []));
+            const memberObjs = fabricCanvas.getObjects().filter((o) => {
+              const oid = getObjectId(o);
+              return !!oid && memberIdSet.has(oid);
+            });
+            if (memberObjs.length > 1) {
+              fabricCanvas.__activeEditingGroupId = null;
+              const sel = new fabric.ActiveSelection(memberObjs, { canvas: fabricCanvas });
+              restoreGroupSelectionVisualState(sel, parent.id);
+              isSyncingSelectionToFabricRef.current = true;
+              try {
+                fabricCanvas.setActiveObject(sel);
+                fabricCanvas.requestRenderAll();
+              } finally {
+                isSyncingSelectionToFabricRef.current = false;
+              }
+              selectElements([parent.id], false, false);
+              return;
+            }
+          }
           selectElements(ids, false, false);
           return;
         }
         if (ids.length > 1) {
           const state = useEditorStore.getState();
-          const currentPage2 = (_b = state.canvas.pages) == null ? void 0 : _b.find((p) => p.id === pageId);
+          const currentPage2 = (_g = state.canvas.pages) == null ? void 0 : _g.find((p) => p.id === pageId);
           const children = (currentPage2 == null ? void 0 : currentPage2.children) ?? [];
           const currentSelectedIds = state.canvas.selectedIds ?? [];
           for (const sid of currentSelectedIds) {
@@ -9734,7 +10106,7 @@ const PageCanvas = forwardRef(
               const memberIds = new Set(getAllElementIds(node.children ?? []));
               const fabricIdSet = new Set(ids);
               if (memberIds.size === fabricIdSet.size && [...memberIds].every((id) => fabricIdSet.has(id))) {
-                selectElements([sid, ...ids], false, true);
+                selectElements([sid], false, false);
                 return;
               }
             }
@@ -9742,32 +10114,98 @@ const PageCanvas = forwardRef(
         }
         selectElements(ids, false, true);
       };
+      const restoreSuppressedGroupBorders = () => {
+        const list = suppressGroupMemberBordersRef.current;
+        if (!list || list.length === 0) return;
+        for (const m of list) {
+          const orig = m.__pixldocsOrigHasBorders;
+          if (orig !== void 0) {
+            m.hasBorders = orig;
+            delete m.__pixldocsOrigHasBorders;
+          } else {
+            m.hasBorders = true;
+          }
+        }
+        suppressGroupMemberBordersRef.current = [];
+      };
       fabricCanvas.on("selection:created", () => {
-        var _a;
+        var _a2;
         syncSelectionToStore();
         const activeObj = fabricCanvas.getActiveObject();
         if (activeObj) applyControlSizeForZoom(fabricCanvas, activeObj);
-        if (activeObj && !(activeObj instanceof fabric.ActiveSelection) && (((_a = activeObj._ct) == null ? void 0 : _a.isCropGroup) || activeObj.__cropGroup)) {
+        if (activeObj && !(activeObj instanceof fabric.ActiveSelection) && (((_a2 = activeObj._ct) == null ? void 0 : _a2.isCropGroup) || activeObj.__cropGroup)) {
           installCanvaMaskControls(activeObj);
         }
       });
       fabricCanvas.on("selection:updated", () => {
-        var _a;
+        var _a2;
+        const next = fabricCanvas.getActiveObject();
+        const isGroupSel = next instanceof fabric.ActiveSelection && next.__pixldocsGroupSelection;
+        if (!isGroupSel) restoreSuppressedGroupBorders();
         syncSelectionToStore();
         const activeObj = fabricCanvas.getActiveObject();
         if (activeObj) applyControlSizeForZoom(fabricCanvas, activeObj);
-        if (activeObj && !(activeObj instanceof fabric.ActiveSelection) && (((_a = activeObj._ct) == null ? void 0 : _a.isCropGroup) || activeObj.__cropGroup)) {
+        if (activeObj && !(activeObj instanceof fabric.ActiveSelection) && (((_a2 = activeObj._ct) == null ? void 0 : _a2.isCropGroup) || activeObj.__cropGroup)) {
           installCanvaMaskControls(activeObj);
         }
       });
+      fabricCanvas.on("mouse:dblclick", (opt) => {
+        var _a2, _b;
+        const target = opt == null ? void 0 : opt.target;
+        if (!target) return;
+        if (target.isEditing) return;
+        if (((_a2 = target._ct) == null ? void 0 : _a2.isCropGroup) || target.__cropGroup) return;
+        const active = fabricCanvas.getActiveObject();
+        let hitChild = null;
+        if (active instanceof fabric.ActiveSelection) {
+          const pointer = fabricCanvas.getViewportPoint(opt.e);
+          const objs = active.getObjects();
+          for (let i = objs.length - 1; i >= 0; i--) {
+            const o = objs[i];
+            if (o.containsPoint && o.containsPoint(pointer)) {
+              hitChild = o;
+              break;
+            }
+          }
+        } else {
+          hitChild = target;
+        }
+        if (!hitChild) return;
+        const childId = getObjectId(hitChild);
+        if (!childId) return;
+        const stateNow = useEditorStore.getState();
+        const pageNow = (_b = stateNow.canvas.pages) == null ? void 0 : _b.find((p) => p.id === pageId);
+        const childrenNow = (pageNow == null ? void 0 : pageNow.children) ?? [];
+        const parent = findParentGroup(childrenNow, childId);
+        if (!parent) return;
+        fabricCanvas.__activeEditingGroupId = parent.id;
+        isSyncingSelectionToFabricRef.current = true;
+        try {
+          fabricCanvas.discardActiveObject();
+          fabricCanvas.setActiveObject(hitChild);
+          fabricCanvas.requestRenderAll();
+        } finally {
+          isSyncingSelectionToFabricRef.current = false;
+        }
+        selectElements([childId], false, false);
+      });
       fabricCanvas.on("selection:cleared", () => {
         if (!isActiveRef.current || isRebuildingRef.current || !allowSelection) return;
         setGroupOverlayLiveBoundsRef.current(null);
         groupBoundsResizingRef.current = false;
+        fabricCanvas.__activeEditingGroupId = null;
+        const preservedGroupSelection = preserveActiveSelectionAfterTransformRef.current;
+        const shouldRestoreGroupSelection = !!((preservedGroupSelection == null ? void 0 : preservedGroupSelection.groupSelectionId) && (!preservedGroupSelection.expiresAt || preservedGroupSelection.expiresAt > Date.now()));
         if (skipSelectionClearOnDiscardRef.current) {
           skipSelectionClearOnDiscardRef.current = false;
+          if (shouldRestoreGroupSelection) restorePreservedGroupSelectionSoon(preservedGroupSelection);
+          return;
+        }
+        if (editLockRef.current || syncLockedRef.current || didTransformRef.current || preserveSelectionAfterTransformIdRef.current || shouldRestoreGroupSelection) {
+          if (shouldRestoreGroupSelection) restorePreservedGroupSelectionSoon(preservedGroupSelection);
           return;
         }
+        restoreSuppressedGroupBorders();
         editLockRef.current = false;
         syncLockedRef.current = false;
         clearSelection();
@@ -9785,6 +10223,12 @@ const PageCanvas = forwardRef(
           return;
         }
         if (target instanceof fabric.ActiveSelection) {
+          const memberIds = target.getObjects().map((o) => getObjectId(o)).filter((id2) => !!id2 && id2 !== "__background__");
+          if (memberIds.length > 1) {
+            const groupSelectionId = target.__pixldocsGroupSelection;
+            preserveActiveSelectionAfterTransformRef.current = { memberIds, groupSelectionId, expiresAt: Date.now() + 1200 };
+            if (groupSelectionId) preserveSelectionAfterTransformIdRef.current = groupSelectionId;
+          }
           target.getObjects().forEach((o) => {
             const id2 = getObjectId(o);
             if (id2) transformingIdsRef.current.add(id2);
@@ -9797,14 +10241,78 @@ const PageCanvas = forwardRef(
       const clearTransforming = () => {
         transformingIdsRef.current.clear();
       };
+      const prepareGroupSelectionTransformStart = (target) => {
+        var _a2, _b;
+        const active = target instanceof fabric.ActiveSelection ? target : fabricCanvas.getActiveObject();
+        if (!(active instanceof fabric.ActiveSelection)) return;
+        const groupId = active.__pixldocsGroupSelection;
+        if (!groupId) return;
+        if (((_a2 = groupSelectionTransformStartRef.current) == null ? void 0 : _a2.groupId) === groupId && groupSelectionTransformStartRef.current.selection === active) return;
+        const pageChildren2 = ((_b = useEditorStore.getState().canvas.pages.find((p) => p.id === pageId)) == null ? void 0 : _b.children) ?? [];
+        const groupNode = findNodeById(pageChildren2, groupId);
+        if (!groupNode) return;
+        const groupAbs = getAbsoluteBounds(groupNode, pageChildren2);
+        const rect = active.getBoundingRect();
+        groupSelectionTransformStartRef.current = {
+          groupId,
+          selection: active,
+          selectionLeft: rect.left,
+          selectionTop: rect.top,
+          groupLeft: groupAbs.left,
+          groupTop: groupAbs.top
+        };
+      };
+      const restoreGroupSelectionVisualState = (selection, groupId) => {
+        selection.__pixldocsGroupSelection = groupId;
+        const members = selection.getObjects();
+        suppressGroupMemberBordersRef.current = members;
+        for (const m of members) {
+          if (m.__pixldocsOrigHasBorders === void 0) {
+            m.__pixldocsOrigHasBorders = m.hasBorders;
+          }
+          m.hasBorders = false;
+        }
+      };
+      const restorePreservedGroupSelectionSoon = (snapshot = preserveActiveSelectionAfterTransformRef.current) => {
+        if (!(snapshot == null ? void 0 : snapshot.groupSelectionId) || snapshot.memberIds.length < 2) return;
+        const groupId = snapshot.groupSelectionId;
+        const memberIds = [...snapshot.memberIds];
+        selectElements([groupId], false, false);
+        requestAnimationFrame(() => {
+          setTimeout(() => {
+            const fc = fabricRef.current;
+            if (!fc || !isActiveRef.current || editingTextIdRef.current) return;
+            const active = fc.getActiveObject();
+            if (active instanceof fabric.ActiveSelection && active.__pixldocsGroupSelection === groupId) {
+              restoreGroupSelectionVisualState(active, groupId);
+              fc.requestRenderAll();
+              return;
+            }
+            const members = memberIds.map((id) => fc.getObjects().find((o) => getObjectId(o) === id)).filter((o) => !!o);
+            if (members.length < 2) return;
+            isSyncingSelectionToFabricRef.current = true;
+            try {
+              const selection = new fabric.ActiveSelection(members, { canvas: fc });
+              restoreGroupSelectionVisualState(selection, groupId);
+              fc.setActiveObject(selection);
+              selection.setCoords();
+              fc.requestRenderAll();
+            } finally {
+              requestAnimationFrame(() => {
+                isSyncingSelectionToFabricRef.current = false;
+              });
+            }
+          }, 0);
+        });
+      };
       const isCropGroup2 = (o) => {
-        var _a;
-        return !!(((_a = o == null ? void 0 : o._ct) == null ? void 0 : _a.isCropGroup) || (o == null ? void 0 : o.__cropGroup));
+        var _a2;
+        return !!(((_a2 = o == null ? void 0 : o._ct) == null ? void 0 : _a2.isCropGroup) || (o == null ? void 0 : o.__cropGroup));
       };
       const promoteToCropGroup = (opt) => {
-        var _a, _b, _c;
+        var _a2, _b, _c;
         const t = opt.target;
-        if (((_a = opt.e) == null ? void 0 : _a.type) !== "mousedown" && ((_b = opt.e) == null ? void 0 : _b.type) !== "pointerdown" && ((_c = opt.e) == null ? void 0 : _c.type) !== "touchstart") {
+        if (((_a2 = opt.e) == null ? void 0 : _a2.type) !== "mousedown" && ((_b = opt.e) == null ? void 0 : _b.type) !== "pointerdown" && ((_c = opt.e) == null ? void 0 : _c.type) !== "touchstart") {
           if (t && isCropGroup2(t)) {
             fabricCanvas._hoveredTarget = t;
           } else if ((t == null ? void 0 : t.group) && isCropGroup2(t.group)) {
@@ -9885,9 +10393,9 @@ const PageCanvas = forwardRef(
         });
       }
       fabricCanvas.on("mouse:down", (opt) => {
-        var _a, _b;
+        var _a2, _b;
         const target = opt.target;
-        const cropGroup = ((_a = target == null ? void 0 : target._ct) == null ? void 0 : _a.isCropGroup) || (target == null ? void 0 : target.__cropGroup) ? target : (target == null ? void 0 : target.group) && (((_b = target.group._ct) == null ? void 0 : _b.isCropGroup) || target.group.__cropGroup) ? target.group : null;
+        const cropGroup = ((_a2 = target == null ? void 0 : target._ct) == null ? void 0 : _a2.isCropGroup) || (target == null ? void 0 : target.__cropGroup) ? target : (target == null ? void 0 : target.group) && (((_b = target.group._ct) == null ? void 0 : _b.isCropGroup) || target.group.__cropGroup) ? target.group : null;
         if (cropGroup) {
           lockEdits();
           didTransformRef.current = false;
@@ -9897,10 +10405,10 @@ const PageCanvas = forwardRef(
         }
       });
       fabricCanvas.on("mouse:down:before", (opt) => {
-        var _a, _b, _c, _d, _e;
+        var _a2, _b, _c, _d, _e;
         if (editLockRef.current) {
           const active = fabricCanvas.getActiveObject();
-          if (active && (((_a = active._ct) == null ? void 0 : _a.isCropGroup) || active.__cropGroup)) {
+          if (active && (((_a2 = active._ct) == null ? void 0 : _a2.isCropGroup) || active.__cropGroup)) {
             opt.target = active;
             if (opt.e) {
               (_c = (_b = opt.e).preventDefault) == null ? void 0 : _c.call(_b);
@@ -9916,22 +10424,25 @@ const PageCanvas = forwardRef(
         promoteToCropGroup(opt);
       });
       fabricCanvas.on("mouse:move:before", promoteToCropGroup);
-      fabricCanvas.on("mouse:down", () => {
+      fabricCanvas.on("mouse:down", (ev) => {
         if (fabricCanvas._currentTransform) {
           lockEdits();
           didTransformRef.current = true;
         }
         const o = fabricCanvas.getActiveObject();
+        pendingTextEditOnUpRef.current = null;
         if (!o) return;
         o.__lockScaleDuringCrop = false;
       });
       fabricCanvas.on("mouse:up", (e) => {
-        var _a;
+        var _a2;
         clearTransforming();
         setGuides([]);
+        setRotationLabel(null);
+        setSizeLabel(null);
         dragStarted = false;
         const activeObj = fabricCanvas.getActiveObject();
-        if (activeObj && (activeObj.__cropGroup || ((_a = activeObj._ct) == null ? void 0 : _a.isCropGroup))) {
+        if (activeObj && (activeObj.__cropGroup || ((_a2 = activeObj._ct) == null ? void 0 : _a2.isCropGroup))) {
           activeObj.__lockScaleDuringCrop = false;
           if (activeObj.__cropDrag) {
             delete activeObj.__cropDrag;
@@ -9972,9 +10483,9 @@ const PageCanvas = forwardRef(
         markTransforming(e.target);
       };
       fabricCanvas.on("object:added", (e) => {
-        var _a;
+        var _a2;
         const obj = e.target;
-        if (obj && (obj.__cropGroup || ((_a = obj._ct) == null ? void 0 : _a.isCropGroup))) {
+        if (obj && (obj.__cropGroup || ((_a2 = obj._ct) == null ? void 0 : _a2.isCropGroup))) {
           if (!obj.__cropGroupId) {
             obj.__cropGroupId = `crop-${Date.now()}-${Math.random()}`;
           }
@@ -9986,13 +10497,28 @@ const PageCanvas = forwardRef(
         if (!isActiveRef.current) return;
         const t = e.target;
         if (t) lastResizeScaleTargetRef.current = t;
+        prepareGroupSelectionTransformStart(t);
         markTransforming(t);
         didTransformRef.current = true;
+        const transformTargetId = t ? getObjectId(t) : null;
+        if (transformTargetId && transformTargetId !== "__background__") {
+          preserveSelectionAfterTransformIdRef.current = transformTargetId;
+        }
         const obj = t;
         if (!obj) return;
         if (obj instanceof fabric.Rect || obj instanceof fabric.Path || obj instanceof fabric.Circle || obj instanceof fabric.Triangle || obj instanceof fabric.Line) {
           obj.set({ strokeUniform: true });
         }
+        try {
+          const br = obj.getBoundingRect();
+          setSizeLabel({
+            width: Math.round(br.width),
+            height: Math.round(br.height),
+            x: br.left + br.width / 2,
+            y: br.top + br.height + 18
+          });
+        } catch {
+        }
         const objId = getObjectId(obj);
         const sourceEl = objId ? elementsRef.current.find((el) => el.id === objId) : null;
         const isCornerShape = (sourceEl == null ? void 0 : sourceEl.type) === "shape" && (sourceEl.shapeType === "circle" || sourceEl.shapeType === "rounded-rect" || sourceEl.shapeType === "triangle");
@@ -10126,8 +10652,23 @@ const PageCanvas = forwardRef(
         const t = e.target;
         if (t) lastResizeScaleTargetRef.current = t;
         markTransforming(t);
+        didTransformRef.current = true;
+        const transformTargetId = t ? getObjectId(t) : null;
+        if (transformTargetId && transformTargetId !== "__background__") {
+          preserveSelectionAfterTransformIdRef.current = transformTargetId;
+        }
         const obj = t;
         if (!obj) return;
+        try {
+          const br = obj.getBoundingRect();
+          setSizeLabel({
+            width: Math.round(br.width),
+            height: Math.round(br.height),
+            x: br.left + br.width / 2,
+            y: br.top + br.height + 18
+          });
+        } catch {
+        }
         const transform = e.transform;
         const corner = (transform == null ? void 0 : transform.corner) || "";
         const scaleGuides = calculateScaleSnapGuidesCallback(obj, corner);
@@ -10136,6 +10677,23 @@ const PageCanvas = forwardRef(
       fabricCanvas.on("object:rotating", (e) => {
         markSimpleTransform(e);
         didTransformRef.current = true;
+        const tr = e.target;
+        const rotateTargetId = tr ? getObjectId(tr) : null;
+        if (rotateTargetId && rotateTargetId !== "__background__") {
+          preserveSelectionAfterTransformIdRef.current = rotateTargetId;
+        }
+        if (tr) {
+          try {
+            const br = tr.getBoundingRect();
+            let angle = ((tr.angle ?? 0) % 360 + 360) % 360;
+            setRotationLabel({
+              angle: Math.round(angle),
+              x: br.left + br.width / 2,
+              y: br.top + br.height / 2
+            });
+          } catch {
+          }
+        }
       });
       fabricCanvas.on("object:skewing", (e) => {
         markSimpleTransform(e);
@@ -10143,8 +10701,13 @@ const PageCanvas = forwardRef(
       });
       fabricCanvas.on("object:moving", (e) => {
         if (!isActiveRef.current) return;
+        prepareGroupSelectionTransformStart(e.target);
         markTransforming(e.target);
         didTransformRef.current = true;
+        const moveTargetId = e.target ? getObjectId(e.target) : null;
+        if (moveTargetId && moveTargetId !== "__background__") {
+          preserveSelectionAfterTransformIdRef.current = moveTargetId;
+        }
         if (!dragStarted) {
           dragStarted = true;
           const selectedEls = elementsRef.current.filter((el) => selectedIdsRef.current.includes(el.id));
@@ -10164,7 +10727,7 @@ const PageCanvas = forwardRef(
       });
       let cropGroupSaveTimer = null;
       fabricCanvas.on("object:modified", (e) => {
-        var _a, _b, _c, _d, _e, _f;
+        var _a2, _b, _c, _d, _e, _f;
         try {
           dragStarted = false;
           setGuides([]);
@@ -10195,12 +10758,8 @@ const PageCanvas = forwardRef(
           }
           const active = fabricCanvas.getActiveObject();
           const activeId = active ? getObjectId(active) : null;
-          const activeObjectsForLog = fabricCanvas.getActiveObjects();
-          if (typeof console !== "undefined" && console.log) {
-            console.log("[object:modified] activeId=", activeId, "isGroup=", active instanceof fabric.Group, "isActiveSelection=", active instanceof fabric.ActiveSelection, "activeObjectsCount=", (activeObjectsForLog == null ? void 0 : activeObjectsForLog.length) ?? 0);
-          }
           if (active && activeId && activeId !== "__background__" && !(active instanceof fabric.Group)) {
-            const pageChildrenForParent = ((_a = useEditorStore.getState().canvas.pages.find((p) => p.id === pageId)) == null ? void 0 : _a.children) ?? [];
+            const pageChildrenForParent = ((_a2 = useEditorStore.getState().canvas.pages.find((p) => p.id === pageId)) == null ? void 0 : _a2.children) ?? [];
             const parentGroup = findParentGroup(pageChildrenForParent, activeId);
             if (parentGroup && isGroup(parentGroup) && parentGroup.backgroundColor) {
               let fabricSectionGroup = active.group && active.group instanceof fabric.Group ? active.group : null;
@@ -10309,10 +10868,10 @@ const PageCanvas = forwardRef(
                   clearTimeout(cropGroupSaveTimer);
                 }
                 cropGroupSaveTimer = setTimeout(() => {
-                  var _a2, _b2, _c2;
+                  var _a3, _b2, _c2;
                   const { updateElement: updateElement2 } = useEditorStore.getState();
                   const img = ct._img;
-                  const zoom3 = ((_a2 = img == null ? void 0 : img._ct) == null ? void 0 : _a2.zoom) ?? 1;
+                  const zoom3 = ((_a3 = img == null ? void 0 : img._ct) == null ? void 0 : _a3.zoom) ?? 1;
                   const panX = ((_b2 = img == null ? void 0 : img._ct) == null ? void 0 : _b2.panX) ?? 0.5;
                   const panY = ((_c2 = img == null ? void 0 : img._ct) == null ? void 0 : _c2.panY) ?? 0.5;
                   const stateCrop = useEditorStore.getState();
@@ -10411,10 +10970,23 @@ const PageCanvas = forwardRef(
           }
           const activeObj = fabricCanvas.getActiveObject();
           let activeObjects = fabricCanvas.getActiveObjects();
+          if (activeObjects.length === 0 && modifiedTarget && getObjectId(modifiedTarget)) {
+            activeObjects = [modifiedTarget];
+          }
           if (activeObjects.length === 1 && typeof activeObjects[0].getObjects === "function" && !getObjectId(activeObjects[0])) {
             activeObjects = activeObjects[0].getObjects();
           }
           const isActiveSelection = activeObj instanceof fabric.ActiveSelection || activeObjects.length > 1;
+          if (activeObj instanceof fabric.ActiveSelection && activeObjects.length > 1) {
+            const memberIds = activeObjects.map((o) => getObjectId(o)).filter((id) => !!id && id !== "__background__");
+            if (memberIds.length > 1) {
+              preserveActiveSelectionAfterTransformRef.current = {
+                memberIds,
+                groupSelectionId: activeObj.__pixldocsGroupSelection,
+                expiresAt: Date.now() + 1200
+              };
+            }
+          }
           const { getCurrentPage: getCurrentPageStore } = useEditorStore.getState();
           const currentPage2 = getCurrentPageStore();
           const selectedElementIds = activeObjects.map((obj) => getObjectId(obj)).filter((id) => !!id && id !== "__background__");
@@ -10437,10 +11009,38 @@ const PageCanvas = forwardRef(
             })();
             const groupToMove = candidateIsStack || allMembersSelected ? candidateGroup : null;
             if (groupToMove) {
+              const activeGroupSelectionId = activeObj instanceof fabric.ActiveSelection ? activeObj.__pixldocsGroupSelection : void 0;
+              const transformStart = activeGroupSelectionId === groupToMove.id ? groupSelectionTransformStartRef.current : null;
               const groupAbs = getAbsoluteBounds(groupToMove, pageChildren2);
               let movedGroupLeft = groupAbs.left;
               let movedGroupTop = groupAbs.top;
-              if (activeObj) {
+              if (activeObj instanceof fabric.ActiveSelection && (transformStart == null ? void 0 : transformStart.groupId) === groupToMove.id) {
+                const selectionRect = activeObj.getBoundingRect();
+                movedGroupLeft = transformStart.groupLeft + (selectionRect.left - transformStart.selectionLeft);
+                movedGroupTop = transformStart.groupTop + (selectionRect.top - transformStart.selectionTop);
+              } else if (activeObj instanceof fabric.ActiveSelection && firstId && firstObj) {
+                const firstNode = findNodeById(pageChildren2, firstId);
+                if (firstNode) {
+                  try {
+                    const oldAbs = getAbsoluteBounds(firstNode, pageChildren2);
+                    const m = fabric.util.multiplyTransformMatrices(
+                      activeObj.calcTransformMatrix(),
+                      firstObj.calcOwnMatrix()
+                    );
+                    const decomposed = fabric.util.qrDecompose(m);
+                    const w = (firstObj.width ?? 0) * Math.abs(decomposed.scaleX || 1);
+                    const h = (firstObj.height ?? 0) * Math.abs(decomposed.scaleY || 1);
+                    const newAbsLeft = firstObj.originX === "center" ? decomposed.translateX - w / 2 : decomposed.translateX;
+                    const newAbsTop = firstObj.originY === "center" ? decomposed.translateY - h / 2 : decomposed.translateY;
+                    movedGroupLeft = groupAbs.left + (newAbsLeft - oldAbs.left);
+                    movedGroupTop = groupAbs.top + (newAbsTop - oldAbs.top);
+                  } catch {
+                    const selectionRect = activeObj.getBoundingRect();
+                    movedGroupLeft = selectionRect.left;
+                    movedGroupTop = selectionRect.top;
+                  }
+                }
+              } else if (activeObj) {
                 const selectionRect = activeObj.getBoundingRect();
                 movedGroupLeft = selectionRect.left;
                 movedGroupTop = selectionRect.top;
@@ -10454,44 +11054,22 @@ const PageCanvas = forwardRef(
               const deltaX = movedGroupLeft - groupAbs.left;
               const deltaY = movedGroupTop - groupAbs.top;
               const hadScale = isActiveSelection && activeObj && (Math.abs((activeObj.scaleX ?? 1) - 1) > 0.01 || Math.abs((activeObj.scaleY ?? 1) - 1) > 0.01);
-              if (!hadScale && (Math.abs(deltaX) > 0.1 || Math.abs(deltaY) > 0.1)) {
-                if (typeof console !== "undefined" && console.log) {
-                  console.log("[object:modified] plain-groups: moving group id=", groupToMove.id, "newLeft=", (groupToMove.left ?? 0) + deltaX, "newTop=", (groupToMove.top ?? 0) + deltaY);
-                }
+              const hadRotation = isActiveSelection && activeObj && Math.abs((activeObj.angle ?? 0) % 360) > 0.01;
+              if (!hadScale && !hadRotation && (Math.abs(deltaX) > 0.1 || Math.abs(deltaY) > 0.1)) {
                 const { updateNode: updateNodeStore, commitHistory: commitHistoryStore, getCurrentElements } = useEditorStore.getState();
                 const newLeft = (groupToMove.left ?? 0) + deltaX;
                 const newTop = (groupToMove.top ?? 0) + deltaY;
                 updateNodeStore(groupToMove.id, { left: newLeft, top: newTop }, { recordHistory: false, skipLayoutRecalc: true });
                 commitHistoryStore();
-                if (isActiveSelection && activeObj instanceof fabric.ActiveSelection) {
-                  skipSelectionClearOnDiscardRef.current = true;
-                  fabricCanvas.discardActiveObject();
-                }
-                const stateAfter = useEditorStore.getState();
-                const pageAfter = stateAfter.canvas.pages.find((p) => p.id === pageId);
-                const pageChildrenAfter = (pageAfter == null ? void 0 : pageAfter.children) ?? [];
-                for (const obj of activeObjects) {
-                  const objId = getObjectId(obj);
-                  if (!objId || objId === "__background__") continue;
-                  const node = findNodeById(pageChildrenAfter, objId);
-                  if (node) {
-                    const abs = getAbsoluteBounds(node, pageChildrenAfter);
-                    const w = (obj.width ?? 0) * (obj.scaleX ?? 1);
-                    const h = (obj.height ?? 0) * (obj.scaleY ?? 1);
-                    const nextLeft = obj.originX === "center" ? abs.left + w / 2 : abs.left;
-                    const nextTop = obj.originY === "center" ? abs.top + h / 2 : abs.top;
-                    obj.set({ left: nextLeft, top: nextTop });
-                    obj.setCoords();
-                  }
-                }
-                if (isActiveSelection && activeObjects.length > 0) {
-                  const selection = new fabric.ActiveSelection([...activeObjects], { canvas: fabricCanvas });
-                  fabricCanvas.setActiveObject(selection);
-                  skipSelectionClearOnDiscardRef.current = false;
+                const groupSelectionId = isActiveSelection && activeObj instanceof fabric.ActiveSelection ? activeObj.__pixldocsGroupSelection : void 0;
+                const targetObjects = isActiveSelection && activeObj instanceof fabric.ActiveSelection ? activeObj.getObjects() : activeObjects;
+                if (groupSelectionId && activeObj instanceof fabric.ActiveSelection) {
+                  restoreGroupSelectionVisualState(activeObj, groupSelectionId);
+                  activeObj.setCoords();
                 }
                 fabricCanvas.requestRenderAll();
                 elementsRef.current = getCurrentElements();
-                for (const obj of activeObjects) {
+                for (const obj of targetObjects) {
                   const objId = getObjectId(obj);
                   if (objId && objId !== "__background__") {
                     justModifiedIdsRef.current.add(objId);
@@ -10499,6 +11077,11 @@ const PageCanvas = forwardRef(
                   }
                 }
                 setTimeout(() => modifiedIdsThisRound.forEach((id) => justModifiedIdsRef.current.delete(id)), 150);
+                groupSelectionTransformStartRef.current = null;
+                restorePreservedGroupSelectionSoon({
+                  memberIds: targetObjects.map((obj) => getObjectId(obj)).filter((id) => !!id && id !== "__background__"),
+                  groupSelectionId
+                });
                 unlockEditsSoon();
                 return;
               }
@@ -10521,7 +11104,10 @@ const PageCanvas = forwardRef(
               intrinsicHeight = obj.height ?? 0;
             } else if (obj instanceof fabric.Line) {
               const x1 = obj.x1 ?? 0, y1 = obj.y1 ?? 0, x2 = obj.x2 ?? 0, y2 = obj.y2 ?? 0;
-              intrinsicWidth = Math.hypot(x2 - x1, y2 - y1) * (obj.scaleX ?? 1);
+              const rawLen = Math.hypot(x2 - x1, y2 - y1);
+              const ownScaleX = obj.scaleX ?? 1;
+              const selScaleX = isActiveSelection && activeObj ? Math.abs(activeObj.scaleX ?? 1) : 1;
+              intrinsicWidth = rawLen * Math.abs(ownScaleX) * selScaleX;
               intrinsicHeight = 0;
             } else {
               intrinsicWidth = obj.width ?? 0;
@@ -10692,20 +11278,37 @@ const PageCanvas = forwardRef(
           for (const gid of stackGroupsToReflow) {
             useEditorStore.getState().reflowStackGroupInPage(pageId, gid);
           }
-          if (isActiveSelection && activeObj && activeObjects.length > 0) {
-            const selectionMatrix = activeObj.calcTransformMatrix();
-            for (const obj of activeObjects) {
-              const objId = getObjectId(obj);
-              if (!objId || objId === "__background__") continue;
-              const objOwnMatrix = obj.calcOwnMatrix();
-              const absoluteMatrix = fabric.util.multiplyTransformMatrices(selectionMatrix, objOwnMatrix);
-              fabric.util.applyTransformToObject(obj, absoluteMatrix);
-              obj.setCoords();
+          if (activeObj instanceof fabric.ActiveSelection && activeObjects.length > 0) {
+            const wasGroupSel = activeObj.__pixldocsGroupSelection;
+            const membersToReselect = activeObjects.filter((o) => {
+              const oid = getObjectId(o);
+              return !!oid && oid !== "__background__";
+            });
+            skipSelectionClearOnDiscardRef.current = true;
+            skipActiveSelectionBakeOnClearRef.current = true;
+            try {
+              fabricCanvas.discardActiveObject();
+            } finally {
+              skipActiveSelectionBakeOnClearRef.current = false;
+            }
+            if (membersToReselect.length > 1) {
+              const newSel = new fabric.ActiveSelection(membersToReselect, { canvas: fabricCanvas });
+              if (wasGroupSel) restoreGroupSelectionVisualState(newSel, wasGroupSel);
+              fabricCanvas.setActiveObject(newSel);
+              newSel.setCoords();
+            } else if (membersToReselect.length === 1) {
+              fabricCanvas.setActiveObject(membersToReselect[0]);
+            }
+            skipSelectionClearOnDiscardRef.current = false;
+            if (wasGroupSel) {
+              restorePreservedGroupSelectionSoon({
+                memberIds: membersToReselect.map((obj) => getObjectId(obj)).filter((id) => !!id && id !== "__background__"),
+                groupSelectionId: wasGroupSel
+              });
             }
-            activeObj.set({ scaleX: 1, scaleY: 1 });
-            activeObj.setCoords();
             fabricCanvas.requestRenderAll();
           }
+          groupSelectionTransformStartRef.current = null;
           setTimeout(() => modifiedIdsThisRound.forEach((id) => justModifiedIdsRef.current.delete(id)), 150);
           commitHistory();
           unlockEditsSoon();
@@ -10722,6 +11325,7 @@ const PageCanvas = forwardRef(
         if (!deselected || deselected.length === 0) return;
         const activeObj = fabricCanvas.getActiveObject();
         if (!(activeObj instanceof fabric.ActiveSelection)) return;
+        if (skipActiveSelectionBakeOnClearRef.current) return;
         const selectionMatrix = activeObj.calcTransformMatrix();
         for (const obj of deselected) {
           const objId = getObjectId(obj);
@@ -10907,7 +11511,8 @@ const PageCanvas = forwardRef(
           }
         }
       }
-      const visibilityBatchThreshold = hasAnyVisibilityChange && (totalVisibilityChanges > 0 && visibilityOnlyCount / totalVisibilityChanges >= 0.8 || totalVisibilityChanges >= 5 && visibilityOnlyCount / totalVisibilityChanges >= 0.7);
+      const visibilityOnlySignal = isVisibilityOnlyUpdatePending();
+      const visibilityBatchThreshold = hasAnyVisibilityChange && visibilityOnlySignal || hasAnyVisibilityChange && (totalVisibilityChanges > 0 && visibilityOnlyCount / totalVisibilityChanges >= 0.8 || totalVisibilityChanges >= 5 && visibilityOnlyCount / totalVisibilityChanges >= 0.7);
       if (visibilityBatchThreshold) {
         visibilityUpdateInProgressRef.current = true;
         setTimeout(() => {
@@ -10917,12 +11522,12 @@ const PageCanvas = forwardRef(
         visibilityUpdateInProgressRef.current = false;
       }
       doSyncRef.current = () => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+        var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j;
         const shouldSkipUpdates2 = syncLockedRef.current || editLockRef.current;
         const state = useEditorStore.getState();
         const elementsToSync = elements;
         elementsRef.current = elementsToSync;
-        const pageTree = isPreviewMode && (pageChildren == null ? void 0 : pageChildren.length) ? pageChildren ?? [] : ((_a = state.canvas.pages.find((p) => p.id === pageId)) == null ? void 0 : _a.children) ?? [];
+        const pageTree = isPreviewMode && (pageChildren == null ? void 0 : pageChildren.length) ? pageChildren ?? [] : ((_a2 = state.canvas.pages.find((p) => p.id === pageId)) == null ? void 0 : _a2.children) ?? [];
         const selectedIdsFromStore = new Set(((_b = state.canvas) == null ? void 0 : _b.selectedIds) ?? []);
         isRebuildingRef.current = true;
         const allElementIds = new Set(elementsToSync.map((el) => el.id));
@@ -10940,8 +11545,13 @@ const PageCanvas = forwardRef(
           if (!sectionDescendantIds.has(id)) validTopLevelIds.add(id);
         });
         const activeBeforeSync = fc.getActiveObject();
+        const transformSelectionId = preserveSelectionAfterTransformIdRef.current;
         const isTransforming2 = !!fc._currentTransform;
-        if (syncTriggeredByPanelRef.current && !shouldSkipUpdates2 && !isTransforming2) {
+        const activeSelectionSnapshot = activeBeforeSync instanceof fabric.ActiveSelection ? {
+          memberIds: activeBeforeSync.getObjects().map((o) => getObjectId(o)).filter((id) => !!id && id !== "__background__"),
+          groupSelectionId: activeBeforeSync.__pixldocsGroupSelection
+        } : preserveActiveSelectionAfterTransformRef.current;
+        if (syncTriggeredByPanelRef.current && !transformSelectionId && !shouldSkipUpdates2 && !isTransforming2) {
           const activeObj = fc.getActiveObject();
           const activeObjId = activeObj ? getObjectId(activeObj) : null;
           const isTextBeingEdited = activeObjId && editingTextIdRef.current === activeObjId;
@@ -10956,15 +11566,44 @@ const PageCanvas = forwardRef(
             currentFabricObjects.set(id, obj);
           }
         });
-        const skipRestoreSelection = syncTriggeredByPanelRef.current;
+        const skipRestoreSelection = syncTriggeredByPanelRef.current && !transformSelectionId;
+        const activeId = transformSelectionId || (activeBeforeSync ? getObjectId(activeBeforeSync) : null);
         const activeStillOnCanvas = activeBeforeSync && fc.getObjects().includes(activeBeforeSync);
-        const activeId = activeBeforeSync ? getObjectId(activeBeforeSync) : null;
+        const replacementById = !activeStillOnCanvas && activeId ? fc.getObjects().find((o) => getObjectId(o) === activeId) ?? null : null;
+        const restoreTarget = activeStillOnCanvas ? activeBeforeSync : replacementById;
         const isActiveTextBeingEdited = activeId && editingTextIdRef.current === activeId && activeBeforeSync instanceof fabric.Textbox;
-        if (!skipRestoreSelection && activeBeforeSync && activeStillOnCanvas && !isActiveTextBeingEdited) {
-          const isCropGroup2 = ((_d = activeBeforeSync._ct) == null ? void 0 : _d.isCropGroup) || activeBeforeSync.__cropGroup;
+        if (!skipRestoreSelection && activeSelectionSnapshot && !isActiveTextBeingEdited && !shouldSkipUpdates2) {
+          const freshMembers = activeSelectionSnapshot.memberIds.map((id) => fc.getObjects().find((o) => getObjectId(o) === id)).filter((o) => !!o);
+          if (freshMembers.length > 1) {
+            isSyncingSelectionToFabricRef.current = true;
+            try {
+              const newSel = new fabric.ActiveSelection(freshMembers, { canvas: fc });
+              if (activeSelectionSnapshot.groupSelectionId) {
+                newSel.__pixldocsGroupSelection = activeSelectionSnapshot.groupSelectionId;
+                suppressGroupMemberBordersRef.current = freshMembers;
+                for (const m of freshMembers) {
+                  if (m.__pixldocsOrigHasBorders === void 0) {
+                    m.__pixldocsOrigHasBorders = m.hasBorders;
+                  }
+                  m.hasBorders = false;
+                }
+              }
+              fc.setActiveObject(newSel);
+              newSel.setCoords();
+              fc.requestRenderAll();
+            } finally {
+              isSyncingSelectionToFabricRef.current = false;
+            }
+          } else if (freshMembers.length === 1) {
+            fc.setActiveObject(freshMembers[0]);
+            fc.requestRenderAll();
+          }
+        } else if (!skipRestoreSelection && restoreTarget && !isActiveTextBeingEdited) {
+          const isCropGroup2 = ((_d = restoreTarget._ct) == null ? void 0 : _d.isCropGroup) || restoreTarget.__cropGroup;
           const isSectionGroup = activeId && sectionGroupIds.has(activeId);
           if ((isCropGroup2 || !shouldSkipUpdates2) && !isSectionGroup) {
-            fc.setActiveObject(activeBeforeSync);
+            fc.setActiveObject(restoreTarget);
+            fc.requestRenderAll();
           }
         }
         for (const id of sectionGroupIds) {
@@ -11053,9 +11692,9 @@ const PageCanvas = forwardRef(
           sectionGroup.__docuforgeSectionGroup = true;
           const bgColor = G.backgroundColor || "#f0f0f0";
           sectionGroup._renderBackground = function(ctx) {
-            var _a2;
+            var _a3;
             if (bgColor === "transparent") return;
-            const dim = ((_a2 = this._getNonTransformedDimensions) == null ? void 0 : _a2.call(this)) ?? { x: this.width ?? gw, y: this.height ?? gh };
+            const dim = ((_a3 = this._getNonTransformedDimensions) == null ? void 0 : _a3.call(this)) ?? { x: this.width ?? gw, y: this.height ?? gh };
             const w = dim.x ?? gw;
             const h = dim.y ?? gh;
             ctx.save();
@@ -11177,8 +11816,17 @@ const PageCanvas = forwardRef(
                       flipX: element.flipX ?? false,
                       flipY: element.flipY ?? false
                     });
-                    const clampedOpacity = element.opacity !== void 0 ? Math.max(0, Math.min(1, element.opacity)) : 1;
-                    existingObj.set({ opacity: clampedOpacity });
+                    const baseOpacity = element.opacity !== void 0 ? Math.max(0, Math.min(1, element.opacity)) : 1;
+                    const clampedOpacity = isHidden ? 0 : baseOpacity;
+                    const isDynamicFieldImg = dynamicFieldIds.includes(element.id);
+                    const canBeEventedImg = isEditorMode || isPreviewMode && isDynamicFieldImg;
+                    existingObj.set({
+                      opacity: clampedOpacity,
+                      selectable: allowSelection && !isHidden,
+                      evented: canBeEventedImg && !isHidden,
+                      hasControls: allowEditing && !isHidden,
+                      hasBorders: allowEditing && !isHidden
+                    });
                     existingObj.set({ width: ct.frameW, height: ct.frameH });
                     existingObj.set({ backgroundColor: "transparent" });
                     const liveMask = existingObj.clipPath;
@@ -11658,6 +12306,57 @@ const PageCanvas = forwardRef(
             }
           }
         });
+        if (!skipRestoreSelection && activeSelectionSnapshot && !isActiveTextBeingEdited) {
+          const currentActive = fc.getActiveObject();
+          const currentMemberIds = currentActive instanceof fabric.ActiveSelection ? currentActive.getObjects().map((o) => getObjectId(o)).filter((id) => !!id && id !== "__background__") : [];
+          const sameActiveSelection = currentMemberIds.length === activeSelectionSnapshot.memberIds.length && activeSelectionSnapshot.memberIds.every((id) => currentMemberIds.includes(id));
+          if (!sameActiveSelection) {
+            const freshMembers = activeSelectionSnapshot.memberIds.map((id) => fc.getObjects().find((o) => getObjectId(o) === id)).filter((o) => !!o);
+            if (freshMembers.length > 1) {
+              isSyncingSelectionToFabricRef.current = true;
+              try {
+                const newSel = new fabric.ActiveSelection(freshMembers, { canvas: fc });
+                if (activeSelectionSnapshot.groupSelectionId) {
+                  newSel.__pixldocsGroupSelection = activeSelectionSnapshot.groupSelectionId;
+                  suppressGroupMemberBordersRef.current = freshMembers;
+                  for (const m of freshMembers) {
+                    if (m.__pixldocsOrigHasBorders === void 0) {
+                      m.__pixldocsOrigHasBorders = m.hasBorders;
+                    }
+                    m.hasBorders = false;
+                  }
+                }
+                fc.setActiveObject(newSel);
+                newSel.setCoords();
+                fc.requestRenderAll();
+              } finally {
+                isSyncingSelectionToFabricRef.current = false;
+              }
+            }
+          }
+        } else if (!skipRestoreSelection && activeId && !isActiveTextBeingEdited) {
+          const currentActive = fc.getActiveObject();
+          const currentActiveId = currentActive ? getObjectId(currentActive) : null;
+          if (currentActiveId !== activeId) {
+            const replacement = fc.getObjects().find((o) => getObjectId(o) === activeId) ?? (() => {
+              for (const o of fc.getObjects()) {
+                if (o instanceof fabric.Group && o.__docuforgeSectionGroup) {
+                  const child = o.getObjects().find((c) => getObjectId(c) === activeId);
+                  if (child) return child;
+                }
+              }
+              return null;
+            })();
+            const isSectionGroup = sectionGroupIds.has(activeId);
+            if (replacement && !isSectionGroup) {
+              fc.setActiveObject(replacement);
+              replacement.setCoords();
+              fc.requestRenderAll();
+            }
+          }
+        }
+        preserveSelectionAfterTransformIdRef.current = null;
+        preserveActiveSelectionAfterTransformRef.current = null;
         syncTriggeredByPanelRef.current = false;
       };
       if (canvasUpdateVersion !== prevCanvasUpdateVersionRef.current) {
@@ -11808,6 +12507,7 @@ const PageCanvas = forwardRef(
       };
     }, [ready, pageId, onReady]);
     useEffect(() => {
+      var _a2;
       const fc = fabricRef.current;
       if (!fc || isRebuildingRef.current || !isActive) return;
       if (isTransforming(fc)) return;
@@ -11815,6 +12515,13 @@ const PageCanvas = forwardRef(
       if (editLockRef.current) return;
       isSyncingSelectionToFabricRef.current = true;
       const selectedSet = new Set(selectedIds);
+      const pageChildrenForSelection = ((_a2 = useEditorStore.getState().canvas.pages.find((p) => p.id === pageId)) == null ? void 0 : _a2.children) ?? [];
+      const selectedGroupSelectionId = selectedIds.find((id) => {
+        const node = findNodeById(pageChildrenForSelection, id);
+        return !!(node && isGroup(node));
+      });
+      const selectedGroupNode = selectedGroupSelectionId ? findNodeById(pageChildrenForSelection, selectedGroupSelectionId) : null;
+      const selectedGroupMemberIds = selectedGroupNode && isGroup(selectedGroupNode) ? new Set(getAllElementIds(selectedGroupNode.children ?? [])) : null;
       const toSelect = [];
       for (const obj of fc.getObjects()) {
         const id = getObjectId(obj);
@@ -11823,10 +12530,14 @@ const PageCanvas = forwardRef(
           toSelect.push(obj);
           continue;
         }
+        if (id && (selectedGroupMemberIds == null ? void 0 : selectedGroupMemberIds.has(id))) {
+          toSelect.push(obj);
+          continue;
+        }
         if (obj instanceof fabric.Group && obj.__docuforgeSectionGroup) {
           for (const child of obj.getObjects()) {
             const childId = getObjectId(child);
-            if (childId && selectedSet.has(childId)) toSelect.push(child);
+            if (childId && (selectedSet.has(childId) || (selectedGroupMemberIds == null ? void 0 : selectedGroupMemberIds.has(childId)))) toSelect.push(child);
           }
         }
       }
@@ -11847,6 +12558,15 @@ const PageCanvas = forwardRef(
         const active = fc.getActiveObject();
         const sameSelection = active instanceof fabric.ActiveSelection && active.getObjects().length === toSelect.length && toSelect.every((obj) => active.getObjects().includes(obj));
         if (sameSelection && isFlatGroupSelection) {
+          if (selectedGroupSelectionId && active instanceof fabric.ActiveSelection) {
+            active.__pixldocsGroupSelection = selectedGroupSelectionId;
+            suppressGroupMemberBordersRef.current = active.getObjects();
+            active.getObjects().forEach((m) => {
+              if (m.__pixldocsOrigHasBorders === void 0) m.__pixldocsOrigHasBorders = m.hasBorders;
+              m.hasBorders = false;
+            });
+            applyWarpAwareSelectionBorders(active);
+          }
           fc.requestRenderAll();
         } else {
           toSelect.forEach((obj) => {
@@ -11854,6 +12574,15 @@ const PageCanvas = forwardRef(
             if (objId) justModifiedIdsRef.current.add(objId);
           });
           const selection = new fabric.ActiveSelection(toSelect, { canvas: fc });
+          if (selectedGroupSelectionId) {
+            selection.__pixldocsGroupSelection = selectedGroupSelectionId;
+            suppressGroupMemberBordersRef.current = toSelect;
+            toSelect.forEach((m) => {
+              if (m.__pixldocsOrigHasBorders === void 0) m.__pixldocsOrigHasBorders = m.hasBorders;
+              m.hasBorders = false;
+            });
+            applyWarpAwareSelectionBorders(selection);
+          }
           fc.setActiveObject(selection);
           if (!isFlatGroupSelection) {
             selection.setCoords();
@@ -11865,13 +12594,25 @@ const PageCanvas = forwardRef(
         isSyncingSelectionToFabricRef.current = false;
       });
     }, [selectedIds, isActive, ready, elements]);
+    useEffect(() => {
+      const unsub = subscribeShowOriginalTextBounds(() => {
+        const fc = fabricRef.current;
+        if (!fc) return;
+        const active = fc.getActiveObject();
+        if (active instanceof fabric.ActiveSelection) {
+          applyWarpAwareSelectionBorders(active);
+        }
+        fc.requestRenderAll();
+      });
+      return unsub;
+    }, []);
     const updateFabricObject = (obj, element, skipPositionUpdate = false) => {
-      var _a, _b, _c;
+      var _a2, _b, _c;
       const fc = fabricRef.current;
       if (fc && isTransforming(fc)) {
         return;
       }
-      const currentPageTree = ((pageChildren == null ? void 0 : pageChildren.length) ? pageChildren : (_a = useEditorStore.getState().canvas.pages.find((p) => p.id === pageId)) == null ? void 0 : _a.children) ?? [];
+      const currentPageTree = ((pageChildren == null ? void 0 : pageChildren.length) ? pageChildren : (_a2 = useEditorStore.getState().canvas.pages.find((p) => p.id === pageId)) == null ? void 0 : _a2.children) ?? [];
       const fabricPos = currentPageTree.length > 0 ? (() => {
         const node = findNodeById(currentPageTree, element.id);
         return node ? getAbsoluteBounds(node, currentPageTree) : { left: element.left ?? 0, top: element.top ?? 0 };
@@ -11935,13 +12676,13 @@ const PageCanvas = forwardRef(
             hasRotatingPoint: false,
             // Hide rotation handle
             // Scale with zoom so handles stay same visual size (controls drawn in canvas pixel space)
-            cornerSize: Math.max(6, Math.round(10 * (fc.getZoom() || 1))),
-            borderScaleFactor: fc.getZoom() || 1,
+            cornerSize: Math.max(6, Math.round(8 * (fc.getZoom() || 1))),
+            borderScaleFactor: Math.max(1.25, 1.25 * (fc.getZoom() || 1)),
             transparentCorners: false,
             cornerStyle: "rect",
-            cornerColor: "#ffffff",
-            cornerStrokeColor: "#4f46e5",
-            borderColor: "#4f46e5",
+            cornerColor: SELECTION_PRIMARY,
+            cornerStrokeColor: "#ffffff",
+            borderColor: SELECTION_PRIMARY,
             padding: 0
           };
           if (!skipPositionUpdate) {
@@ -12273,7 +13014,7 @@ const PageCanvas = forwardRef(
           if (lines.length > maxLines) {
             const originalText = element.text || "Text";
             const countLines = (testText) => {
-              var _a2;
+              var _a3;
               const tb = new fabric.Textbox(testText, {
                 width: rW,
                 fontSize,
@@ -12282,7 +13023,7 @@ const PageCanvas = forwardRef(
                 splitByGrapheme
               });
               tb.initDimensions();
-              return ((_a2 = tb.textLines) == null ? void 0 : _a2.length) || 1;
+              return ((_a3 = tb.textLines) == null ? void 0 : _a3.length) || 1;
             };
             let low = 0;
             let high = originalText.length;
@@ -12656,7 +13397,7 @@ const PageCanvas = forwardRef(
       return Math.max(min, Math.min(max, v));
     };
     const applyEdgeFadeFrameClipPath = (group, element, frameW, frameH, shape, rxRatio) => {
-      var _a, _b, _c;
+      var _a2, _b, _c;
       const fadeElement = element;
       const fadeGroup = group;
       const inputKey = edgeFadeKey(fadeElement);
@@ -12665,7 +13406,7 @@ const PageCanvas = forwardRef(
         fadeGroup.__edgeFadeOriginalDrawObject = group.drawObject;
       }
       if (hasFade) {
-        if ((_a = group.clipPath) == null ? void 0 : _a.__edgeFadeMask) {
+        if ((_a2 = group.clipPath) == null ? void 0 : _a2.__edgeFadeMask) {
           group.clipPath = void 0;
           updateCoverLayout(group);
         }
@@ -12704,6 +13445,7 @@ const PageCanvas = forwardRef(
             ctx.globalCompositeOperation = "destination-out";
             let gradient;
             const eraseAtEdge = 1 - amount;
+            const isFullyFadedAtEdge = amount <= 1e-3;
             const STOPS = 64;
             const gamma = 1 / hardness;
             const addStops = (g) => {
@@ -12720,24 +13462,44 @@ const PageCanvas = forwardRef(
               addStops(gradient);
               ctx.fillStyle = gradient;
               ctx.fillRect(x, y, w, band);
+              if (isFullyFadedAtEdge) {
+                ctx.fillStyle = "rgba(0,0,0,1)";
+                const guard = Math.min(2, band);
+                ctx.fillRect(x - 2, y - 2, w + 4, guard + 2);
+              }
             } else if (side === "bottom") {
               const band = Math.max(1, h * size);
               gradient = ctx.createLinearGradient(0, y + h, 0, y + h - band);
               addStops(gradient);
               ctx.fillStyle = gradient;
               ctx.fillRect(x, y + h - band, w, band);
+              if (isFullyFadedAtEdge) {
+                ctx.fillStyle = "rgba(0,0,0,1)";
+                const guard = Math.min(2, band);
+                ctx.fillRect(x - 2, y + h - guard, w + 4, guard + 2);
+              }
             } else if (side === "left") {
               const band = Math.max(1, w * size);
               gradient = ctx.createLinearGradient(x, 0, x + band, 0);
               addStops(gradient);
               ctx.fillStyle = gradient;
               ctx.fillRect(x, y, band, h);
+              if (isFullyFadedAtEdge) {
+                ctx.fillStyle = "rgba(0,0,0,1)";
+                const guard = Math.min(2, band);
+                ctx.fillRect(x - 2, y - 2, guard + 2, h + 4);
+              }
             } else {
               const band = Math.max(1, w * size);
               gradient = ctx.createLinearGradient(x + w, 0, x + w - band, 0);
               addStops(gradient);
               ctx.fillStyle = gradient;
               ctx.fillRect(x + w - band, y, band, h);
+              if (isFullyFadedAtEdge) {
+                ctx.fillStyle = "rgba(0,0,0,1)";
+                const guard = Math.min(2, band);
+                ctx.fillRect(x + w - guard, y - 2, guard + 2, h + 4);
+              }
             }
             ctx.restore();
           };
@@ -12773,7 +13535,7 @@ const PageCanvas = forwardRef(
       (_c = group.canvas) == null ? void 0 : _c.requestRenderAll();
     };
     const loadImageAsync2 = async (element, placeholder, fc) => {
-      var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p;
+      var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p;
       const imageUrl = element.src || element.imageUrl;
       if (!imageUrl) return;
       const elementId = element.id;
@@ -12803,7 +13565,7 @@ const PageCanvas = forwardRef(
         if (!fabricRef.current || !isLatestRequest()) return;
         await normalizeSvgImageDimensions(img, imageUrl, element.sourceFormat);
         if (!isLatestRequest()) return;
-        const imageFitForFade = element.imageFit || ((_a = element.style) == null ? void 0 : _a.imageFit) || "cover";
+        const imageFitForFade = element.imageFit || ((_a2 = element.style) == null ? void 0 : _a2.imageFit) || "cover";
         const clipShapeForFade = element.clipShape ?? ((_b = element.style) == null ? void 0 : _b.imageFrameShape) ?? (isPreviewMode ? "rectangle" : "none");
         const willUseCropGroupForFade = imageFitForFade !== "fill" || clipShapeForFade && clipShapeForFade !== "none";
         try {
@@ -13062,6 +13824,8 @@ const PageCanvas = forwardRef(
             fc.getActiveObjects().map((o) => getObjectId(o)).filter((id) => !!id)
           );
           const wasPlaceholderSelected = activeIdsBeforeReplace.has(elementId);
+          const prevSelectionMembers = activeBeforeReplace instanceof fabric.ActiveSelection ? activeBeforeReplace.getObjects().slice() : null;
+          const prevSelectionGroupId = prevSelectionMembers ? activeBeforeReplace.__pixldocsGroupSelection : null;
           if (!isLatestRequest()) return;
           const canvasObjects = fc.getObjects();
           const idx = canvasObjects.indexOf(placeholder);
@@ -13079,8 +13843,30 @@ const PageCanvas = forwardRef(
             fc.add(finalObject);
           }
           if (wasPlaceholderSelected && allowSelection) {
-            fc.setActiveObject(finalObject);
-            finalObject.setCoords();
+            if (prevSelectionMembers && prevSelectionMembers.length > 1) {
+              const liveObjects = new Set(fc.getObjects());
+              const swapped = prevSelectionMembers.map((m) => m === placeholder ? finalObject : m).filter((m) => liveObjects.has(m));
+              if (swapped.length > 1) {
+                const selection = new fabric.ActiveSelection(swapped, { canvas: fc });
+                if (prevSelectionGroupId) {
+                  selection.__pixldocsGroupSelection = prevSelectionGroupId;
+                  suppressGroupMemberBordersRef.current = swapped;
+                  swapped.forEach((m) => {
+                    if (m.__pixldocsOrigHasBorders === void 0) {
+                      m.__pixldocsOrigHasBorders = m.hasBorders;
+                    }
+                    m.hasBorders = false;
+                  });
+                }
+                fc.setActiveObject(selection);
+              } else {
+                fc.setActiveObject(finalObject);
+                finalObject.setCoords();
+              }
+            } else {
+              fc.setActiveObject(finalObject);
+              finalObject.setCoords();
+            }
             requestAnimationFrame(() => {
               skipSelectionClearOnDiscardRef.current = false;
             });
@@ -13098,10 +13884,10 @@ const PageCanvas = forwardRef(
     };
     const handleCanvasClick = useCallback(
       (e) => {
-        var _a;
+        var _a2;
         if (!isActive || !fabricRef.current) return;
         fabricRef.current;
-        const rect = (_a = canvasElRef.current) == null ? void 0 : _a.getBoundingClientRect();
+        const rect = (_a2 = canvasElRef.current) == null ? void 0 : _a2.getBoundingClientRect();
         if (!rect) return;
         const x = e.clientX - rect.left;
         const y = e.clientY - rect.top;
@@ -13308,6 +14094,53 @@ const PageCanvas = forwardRef(
                 )
               ] })
             }
+          ),
+          sizeLabel && /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "absolute pointer-events-none flex items-center justify-center rounded-full text-white text-[10px] font-semibold shadow-md",
+              style: {
+                left: sizeLabel.x * zoom,
+                top: sizeLabel.y * zoom,
+                transform: "translate(-50%, 4px)",
+                padding: "2px 6px",
+                backgroundColor: "hsl(256, 80%, 58%)",
+                border: "1px solid rgba(255,255,255,0.9)",
+                fontFamily: "system-ui, -apple-system, sans-serif",
+                lineHeight: 1,
+                whiteSpace: "nowrap"
+              },
+              children: [
+                sizeLabel.width,
+                " × ",
+                sizeLabel.height
+              ]
+            }
+          ),
+          rotationLabel && /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "absolute pointer-events-none flex items-center gap-[3px] rounded-full text-white text-[10px] font-semibold shadow-md",
+              style: {
+                left: rotationLabel.x * zoom,
+                top: rotationLabel.y * zoom,
+                transform: "translate(-50%, -50%)",
+                padding: "2px 6px",
+                backgroundColor: "hsl(256, 80%, 58%)",
+                border: "1px solid rgba(255,255,255,0.9)",
+                fontFamily: "system-ui, -apple-system, sans-serif",
+                lineHeight: 1,
+                whiteSpace: "nowrap"
+              },
+              children: [
+                /* @__PURE__ */ jsxs("svg", { width: "9", height: "9", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", strokeLinejoin: "round", children: [
+                  /* @__PURE__ */ jsx("path", { d: "M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8" }),
+                  /* @__PURE__ */ jsx("path", { d: "M21 3v5h-5" })
+                ] }),
+                rotationLabel.angle,
+                "°"
+              ]
+            }
           )
         ]
       }
@@ -13353,12 +14186,12 @@ function PreviewCanvas({
   onDynamicFieldClick,
   onReady
 }) {
-  var _a, _b, _c, _d, _e;
+  var _a2, _b, _c, _d, _e;
   const canvasRef = useRef(null);
   const containerRef = useRef(null);
   const [containerWidth, setContainerWidth] = useState(0);
   const [hoveredFieldId, setHoveredFieldId] = useState(null);
-  const page = (_a = config == null ? void 0 : config.pages) == null ? void 0 : _a[pageIndex];
+  const page = (_a2 = config == null ? void 0 : config.pages) == null ? void 0 : _a2[pageIndex];
   const canvasWidth = ((_b = config == null ? void 0 : config.canvas) == null ? void 0 : _b.width) || 612;
   const canvasHeight = ((_c = config == null ? void 0 : config.canvas) == null ? void 0 : _c.height) || 792;
   const elementToFieldMap = useMemo(
@@ -13370,8 +14203,8 @@ function PreviewCanvas({
     [elementToFieldMap]
   );
   const laidOutPageChildren = useMemo(() => {
-    var _a2;
-    if (!((_a2 = page == null ? void 0 : page.children) == null ? void 0 : _a2.length)) return [];
+    var _a3;
+    if (!((_a3 = page == null ? void 0 : page.children) == null ? void 0 : _a3.length)) return [];
     const children = JSON.parse(JSON.stringify(page.children));
     const allUpdates = reflowPageFromRoot();
     if (allUpdates.size === 0) return children;
@@ -13409,15 +14242,15 @@ function PreviewCanvas({
     }
   }, [elements]);
   const pageSettings = useMemo(() => {
-    var _a2, _b2;
+    var _a3, _b2;
     return {
-      backgroundColor: ((_a2 = page == null ? void 0 : page.settings) == null ? void 0 : _a2.backgroundColor) || "#ffffff",
+      backgroundColor: ((_a3 = page == null ? void 0 : page.settings) == null ? void 0 : _a3.backgroundColor) || "#ffffff",
       backgroundGradient: (_b2 = page == null ? void 0 : page.settings) == null ? void 0 : _b2.backgroundGradient
     };
   }, [(_d = page == null ? void 0 : page.settings) == null ? void 0 : _d.backgroundColor, (_e = page == null ? void 0 : page.settings) == null ? void 0 : _e.backgroundGradient]);
   const projectSettings = useMemo(() => {
-    var _a2, _b2, _c2;
-    const vars = ((_a2 = config.themeConfig) == null ? void 0 : _a2.variables) || {};
+    var _a3, _b2, _c2;
+    const vars = ((_a3 = config.themeConfig) == null ? void 0 : _a3.variables) || {};
     return {
       showGrid: false,
       snapToGrid: false,
@@ -13449,8 +14282,8 @@ function PreviewCanvas({
   }, [elements, elementToFieldMap]);
   const [actualBounds, setActualBounds] = useState(/* @__PURE__ */ new Map());
   const updateBounds = useCallback(() => {
-    var _a2;
-    if ((_a2 = canvasRef.current) == null ? void 0 : _a2.getAllElementBounds) {
+    var _a3;
+    if ((_a3 = canvasRef.current) == null ? void 0 : _a3.getAllElementBounds) {
       const bounds = canvasRef.current.getAllElementBounds();
       setActualBounds(bounds);
     }
@@ -13576,10 +14409,10 @@ const PreviewCanvas$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.def
   PreviewCanvas
 }, Symbol.toStringTag, { value: "Module" }));
 function applyThemeToConfig(config, themeOverrides) {
-  var _a, _b, _c;
+  var _a2, _b, _c;
   if (!themeOverrides || Object.keys(themeOverrides).length === 0) return config;
   const cloned = JSON.parse(JSON.stringify(config));
-  if ((_a = cloned.themeConfig) == null ? void 0 : _a.variables) {
+  if ((_a2 = cloned.themeConfig) == null ? void 0 : _a2.variables) {
     for (const [key, value] of Object.entries(themeOverrides)) {
       if (cloned.themeConfig.variables[key]) {
         cloned.themeConfig.variables[key].value = value;
@@ -13624,7 +14457,7 @@ function mapFormDefFieldType(t) {
 function formDefSectionsToInferred(schemaSections, repeatableNodeMap) {
   const sections = [];
   function convert(defs, parentId) {
-    var _a, _b;
+    var _a2, _b;
     for (const def of defs) {
       const isRepeatable = def.repeatable === true || def.type === "repeatable";
       const defFields = def.fields ?? def.entryFields ?? [];
@@ -13658,7 +14491,7 @@ function formDefSectionsToInferred(schemaSections, repeatableNodeMap) {
         };
         if (treeNodeId) section.treeNodeId = treeNodeId;
         sections.push(section);
-        if ((_a = def.children) == null ? void 0 : _a.length) {
+        if ((_a2 = def.children) == null ? void 0 : _a2.length) {
           convert(def.children, def.id);
         }
       } else {
@@ -13773,11 +14606,11 @@ function findRepeatableNodesAndElementContainment(pages) {
   return { repeatableNodes, elementIdToRepeatableNodeId };
 }
 function inferFormSchemaFromTemplate(dynamicFields, fieldGroups, options) {
-  var _a;
+  var _a2;
   const sections = [];
   const sortedGroups = [...fieldGroups || []].sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
   const fieldIdsInTreeRepeatable = /* @__PURE__ */ new Set();
-  if ((_a = options == null ? void 0 : options.pages) == null ? void 0 : _a.length) {
+  if ((_a2 = options == null ? void 0 : options.pages) == null ? void 0 : _a2.length) {
     const { repeatableNodes, elementIdToRepeatableNodeId } = findRepeatableNodesAndElementContainment(options.pages);
     const labelNorm = (s) => String(s).trim().toLowerCase();
     for (let idx = 0; idx < repeatableNodes.length; idx++) {
@@ -14252,29 +15085,29 @@ function setInTree(nodes, elementId, targetProperty, value) {
   return false;
 }
 function collectGroupsByBaseId(pages, baseNodeId) {
-  var _a;
+  var _a2;
   const groups = [];
   function collect(children) {
-    var _a2;
+    var _a3;
     if (!Array.isArray(children)) return;
     for (const node of children) {
       const base = node.__baseNodeId ?? baseId(node.id);
       if (base === baseNodeId) groups.push(node);
-      if (isGroup(node) && ((_a2 = node.children) == null ? void 0 : _a2.length)) collect(node.children);
+      if (isGroup(node) && ((_a3 = node.children) == null ? void 0 : _a3.length)) collect(node.children);
     }
   }
-  for (const page of pages) if ((_a = page.children) == null ? void 0 : _a.length) collect(page.children);
+  for (const page of pages) if ((_a2 = page.children) == null ? void 0 : _a2.length) collect(page.children);
   return groups;
 }
 function findElementBySourceIdInSubtree(nodes, sourceId) {
-  var _a;
+  var _a2;
   const sourceBase = baseId(sourceId);
   for (const node of nodes) {
     const src = node.__sourceId;
     const nodeId = node.id;
     if (src === sourceId || nodeId === sourceId) return node.id;
     if (sourceBase && baseId(src ?? nodeId) === sourceBase) return node.id;
-    if (isGroup(node) && ((_a = node.children) == null ? void 0 : _a.length)) {
+    if (isGroup(node) && ((_a2 = node.children) == null ? void 0 : _a2.length)) {
       const found = findElementBySourceIdInSubtree(node.children, sourceId);
       if (found) return found;
     }
@@ -14282,31 +15115,31 @@ function findElementBySourceIdInSubtree(nodes, sourceId) {
   return void 0;
 }
 function findAllRepeatableElementsBySourceId(pages, baseNodeId, oneBasedIndex, sourceElementId, expectedEntriesPerOccurrence) {
-  var _a;
+  var _a2;
   const groups = collectGroupsByBaseId(pages, baseNodeId);
   if (!groups.length) return [];
   const N = Math.max(1, expectedEntriesPerOccurrence ?? groups.length);
   const out = [];
   for (let occStart = 0; occStart < groups.length; occStart += N) {
     const group = groups[occStart + (oneBasedIndex - 1)];
-    if (!group || !isGroup(group) || !((_a = group.children) == null ? void 0 : _a.length)) continue;
+    if (!group || !isGroup(group) || !((_a2 = group.children) == null ? void 0 : _a2.length)) continue;
     const found = findElementBySourceIdInSubtree(group.children, sourceElementId) ?? (group.__sourceId === sourceElementId ? group.id : void 0);
     if (found) out.push(found);
   }
   return out;
 }
 function findNestedRepeatableElementBySourceId(pages, parentBaseNodeId, parentPi, childBaseNodeId, childCi, sourceElementId) {
-  var _a, _b;
+  var _a2, _b;
   const parentGroups = collectGroupsByBaseId(pages, parentBaseNodeId);
   const parentGroup = parentGroups[parentPi - 1];
-  if (!parentGroup || !isGroup(parentGroup) || !((_a = parentGroup.children) == null ? void 0 : _a.length)) return void 0;
+  if (!parentGroup || !isGroup(parentGroup) || !((_a2 = parentGroup.children) == null ? void 0 : _a2.length)) return void 0;
   const childGroups = [];
   function collectChild(children) {
-    var _a2;
+    var _a3;
     for (const node of children) {
       const base = node.__baseNodeId ?? baseId(node.id);
       if (base === childBaseNodeId) childGroups.push(node);
-      if (isGroup(node) && ((_a2 = node.children) == null ? void 0 : _a2.length)) collectChild(node.children);
+      if (isGroup(node) && ((_a3 = node.children) == null ? void 0 : _a3.length)) collectChild(node.children);
     }
   }
   collectChild(parentGroup.children);
@@ -14343,12 +15176,12 @@ function idPrefix(node) {
 function cloneNodeWithNewIds$1(node, cloneSuffix) {
   const oldToNew = /* @__PURE__ */ new Map();
   function clone(n) {
-    var _a;
+    var _a2;
     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 };
-    if (isGroup(n) && ((_a = n.children) == null ? void 0 : _a.length)) {
+    if (isGroup(n) && ((_a2 = n.children) == null ? void 0 : _a2.length)) {
       return { ...withMeta, children: n.children.map(clone) };
     }
     return withMeta;
@@ -14358,13 +15191,13 @@ function cloneNodeWithNewIds$1(node, cloneSuffix) {
   return [cloned, oldToNew];
 }
 function getRepeatableFromConfig(pages) {
-  var _a;
+  var _a2;
   const result = [];
   function walk(children) {
-    var _a2, _b;
+    var _a3, _b;
     if (!children) return;
     for (const node of children) {
-      if (isGroup(node) && isVerticalStackLayoutMode(node.layoutMode) && ((_a2 = node.children) == null ? void 0 : _a2.length)) {
+      if (isGroup(node) && isVerticalStackLayoutMode(node.layoutMode) && ((_a3 = node.children) == null ? void 0 : _a3.length)) {
         for (const child of node.children) {
           const rep = child.repeatableSection;
           if (rep == null ? void 0 : rep.label) result.push({ nodeId: child.id, label: rep.label });
@@ -14373,24 +15206,24 @@ function getRepeatableFromConfig(pages) {
       if (isGroup(node) && ((_b = node.children) == null ? void 0 : _b.length)) walk(node.children);
     }
   }
-  for (const page of pages) if ((_a = page.children) == null ? void 0 : _a.length) walk(page.children);
+  for (const page of pages) if ((_a2 = page.children) == null ? void 0 : _a2.length) walk(page.children);
   return result;
 }
 function findRepeatableByNodeIds(pages, nodeIds) {
-  var _a;
+  var _a2;
   const schemaBaseIds = new Set(nodeIds.map((id) => baseId(id)));
   const result = [];
   const clonePattern = /^(.+)_(\d+)$/;
   const hasRepeatableSection = (n) => {
-    var _a2;
-    return !!((_a2 = n.repeatableSection) == null ? void 0 : _a2.label);
+    var _a3;
+    return !!((_a3 = n.repeatableSection) == null ? void 0 : _a3.label);
   };
   function walk(children, parentRepeatableBaseId, parentInfo, parentRepeatableEntryIndex) {
-    var _a2, _b;
+    var _a3, _b;
     if (!Array.isArray(children)) return;
     for (let i = 0; i < children.length; i++) {
       const node = children[i];
-      if (isGroup(node) && isVerticalStackLayoutMode(node.layoutMode) && ((_a2 = node.children) == null ? void 0 : _a2.length)) {
+      if (isGroup(node) && isVerticalStackLayoutMode(node.layoutMode) && ((_a3 = node.children) == null ? void 0 : _a3.length)) {
         const kids = node.children;
         let j = 0;
         while (j < kids.length) {
@@ -14463,22 +15296,22 @@ function findRepeatableByNodeIds(pages, nodeIds) {
       }
     }
   }
-  for (const page of pages) if ((_a = page.children) == null ? void 0 : _a.length) walk(page.children);
+  for (const page of pages) if ((_a2 = page.children) == null ? void 0 : _a2.length) walk(page.children);
   return result;
 }
 function findAllTopLevelRepeatableBlocks(pages) {
-  var _a;
+  var _a2;
   const result = [];
   const hasRepeatableSection = (n) => {
-    var _a2;
-    return !!((_a2 = n.repeatableSection) == null ? void 0 : _a2.label);
+    var _a3;
+    return !!((_a3 = n.repeatableSection) == null ? void 0 : _a3.label);
   };
   function walk(children) {
-    var _a2;
+    var _a3;
     if (!Array.isArray(children)) return;
     for (let i = 0; i < children.length; i++) {
       const node = children[i];
-      if (!isGroup(node) || !((_a2 = node.children) == null ? void 0 : _a2.length)) continue;
+      if (!isGroup(node) || !((_a3 = node.children) == null ? void 0 : _a3.length)) continue;
       if (hasRepeatableSection(node) && !result.some((r) => r.baseNodeId === baseId(node.id))) {
         result.push({
           parentChildren: children,
@@ -14492,7 +15325,7 @@ function findAllTopLevelRepeatableBlocks(pages) {
       walk(node.children);
     }
   }
-  for (const page of pages) if ((_a = page.children) == null ? void 0 : _a.length) walk(page.children);
+  for (const page of pages) if ((_a2 = page.children) == null ? void 0 : _a2.length) walk(page.children);
   return result;
 }
 function getRepeatableEntryCount(nodeId, formValues) {
@@ -14518,7 +15351,7 @@ function getNestedRepeatableEntryCount(parentId, parentIndex, childId, formValue
   return Math.max(1, maxIndex);
 }
 function applyFormDataToConfig(config, mappings, formValues, repeatableSectionsFromSchema, repeatableEntryCounts, repeatableNestedEntryCounts, displayFormatMap, repeatablePagesFromSchema) {
-  var _a, _b, _c;
+  var _a2, _b, _c;
   const cloned = JSON.parse(JSON.stringify(config));
   if (!cloned.pages) return cloned;
   const dynamicFields = cloned.dynamicFields;
@@ -14552,7 +15385,7 @@ function applyFormDataToConfig(config, mappings, formValues, repeatableSectionsF
         clonedPage.__repeatablePagePrefix = prefix;
         clonedPage.__repeatablePageEntryIndex = i;
         clonedPage.__repeatablePageBaseId = basePageId;
-        if ((_a = clonedPage.children) == null ? void 0 : _a.length) {
+        if ((_a2 = clonedPage.children) == null ? void 0 : _a2.length) {
           const suffix = `${basePageId}_p${i}`;
           const reidChildren = (nodes) => nodes.map((n) => {
             const [reclone] = cloneNodeWithNewIds$1(n, suffix);
@@ -14598,20 +15431,20 @@ function applyFormDataToConfig(config, mappings, formValues, repeatableSectionsF
     return item == null ? void 0 : item.entryCount;
   };
   const entryFilterFromList = (baseNodeId) => {
-    var _a2;
+    var _a3;
     const item = repeatableList.find((r) => baseId(r.nodeId) === baseNodeId || r.nodeId === baseNodeId);
     const filter = item == null ? void 0 : item.entryFilter;
-    return (filter == null ? void 0 : filter.mode) === "range" && ((_a2 = filter.range) == null ? void 0 : _a2.trim()) ? filter : void 0;
+    return (filter == null ? void 0 : filter.mode) === "range" && ((_a3 = filter.range) == null ? void 0 : _a3.trim()) ? filter : void 0;
   };
   const entryMetaFromList = (baseNodeId) => {
     const item = repeatableList.find((r) => baseId(r.nodeId) === baseNodeId || r.nodeId === baseNodeId);
     return item == null ? void 0 : item.entryMeta;
   };
   const nestedEntryMetaFromList = (parentBaseNodeId, parentIndex1Based, childBaseNodeId) => {
-    var _a2;
+    var _a3;
     for (const { parentBaseId, childBaseId } of getNestedBasePairs(parentBaseNodeId, childBaseNodeId)) {
       const item = repeatableList.find((r) => baseId(r.nodeId) === childBaseId || r.nodeId === childBaseId);
-      const meta = (_a2 = item == null ? void 0 : item.nestedEntryMeta) == null ? void 0 : _a2[`${parentBaseId}_${parentIndex1Based}_${childBaseId}`];
+      const meta = (_a3 = item == null ? void 0 : item.nestedEntryMeta) == null ? void 0 : _a3[`${parentBaseId}_${parentIndex1Based}_${childBaseId}`];
       if (meta == null ? void 0 : meta.length) return meta;
     }
     return entryMetaFromList(childBaseNodeId);
@@ -14739,12 +15572,12 @@ function applyFormDataToConfig(config, mappings, formValues, repeatableSectionsF
     for (const [childBaseNodeId, blocks] of byChildBase) {
       const parentBaseNodeId = nestedChildToParent.get(childBaseNodeId);
       blocks.forEach((block, parentIndex0) => {
-        var _a2;
+        var _a3;
         const parentIndex1Based = block.parentEntryIndex ?? parentIndex0 + 1;
         const { parentChildren, startIndex, count, node, baseNodeId } = block;
         const N = getNestedCountForBasePair(parentBaseNodeId, parentIndex1Based, baseNodeId);
         const phase1Map = phase1NewToOriginal.get(`${parentBaseNodeId}_${parentIndex1Based}`);
-        const nestedEntryFilter = ((_a2 = node.repeatableSection) == null ? void 0 : _a2.entryFilter) ?? entryFilterFromList(baseNodeId);
+        const nestedEntryFilter = ((_a3 = node.repeatableSection) == null ? void 0 : _a3.entryFilter) ?? entryFilterFromList(baseNodeId);
         let nestedEntryIndices;
         if (nestedEntryFilter && nestedEntryFilter.mode === "range" && nestedEntryFilter.range) {
           const parsed = parseEntryRange(nestedEntryFilter.range, N, nestedEntryMetaFromList(parentBaseNodeId, parentIndex1Based, baseNodeId));
@@ -14883,7 +15716,7 @@ function applyFormDataToConfig(config, mappings, formValues, repeatableSectionsF
     return void 0;
   }
   const applyValue = (elementId, targetProperty, value, fieldKey) => {
-    var _a2;
+    var _a3;
     const isTextLike = targetProperty === "text" || targetProperty === "content";
     if (value === void 0 || value === null) {
       return false;
@@ -14908,7 +15741,7 @@ function applyFormDataToConfig(config, mappings, formValues, repeatableSectionsF
       }
     }
     if (elementId === PAGE_BACKGROUND_ELEMENT_ID && targetProperty === "backgroundColor" && typeof effectiveValue === "string") {
-      if ((_a2 = pages[0]) == null ? void 0 : _a2.settings) {
+      if ((_a3 = pages[0]) == null ? void 0 : _a3.settings) {
         pages[0].settings.backgroundColor = effectiveValue;
         return true;
       }
@@ -15042,14 +15875,14 @@ function applyFormDataToConfig(config, mappings, formValues, repeatableSectionsF
   }
   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;
+      var _a3;
+      if (!((_a3 = page.children) == null ? void 0 : _a3.length)) return void 0;
       const findIn = (nodes) => {
-        var _a3;
+        var _a4;
         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)) {
+          if (isGroup(n) && ((_a4 = n.children) == null ? void 0 : _a4.length)) {
             const f = findIn(n.children);
             if (f) return f;
           }
@@ -15145,24 +15978,24 @@ function findFlowStack(pageChildren) {
   return all.length > 0 ? all[0] : null;
 }
 function findAllFlowStacks(pageChildren) {
-  var _a;
+  var _a2;
   const result = [];
   for (const node of pageChildren) {
     if (!isGroup(node)) continue;
     const g = node;
-    if (!isVerticalStackLayoutMode(g.layoutMode) || !((_a = g.children) == null ? void 0 : _a.length)) continue;
+    if (!isVerticalStackLayoutMode(g.layoutMode) || !((_a2 = g.children) == null ? void 0 : _a2.length)) continue;
     if (g.children.some(hasBaseNodeId)) result.push(g);
   }
   return result;
 }
 function findNestedFlowStack(entry) {
-  var _a, _b;
+  var _a2, _b;
   const queue = [...entry.children ?? []];
   while (queue.length > 0) {
     const node = queue.shift();
     if (!isGroup(node)) continue;
     const g = node;
-    const hasRepeatableChildren = ((_a = g.children) == null ? void 0 : _a.length) && (g.children.some(hasBaseNodeId) || g.children.some((c) => isGroup(c)));
+    const hasRepeatableChildren = ((_a2 = g.children) == null ? void 0 : _a2.length) && (g.children.some(hasBaseNodeId) || g.children.some((c) => isGroup(c)));
     if (isVerticalStackLayoutMode(g.layoutMode) && hasRepeatableChildren) return g;
     if ((_b = g.children) == null ? void 0 : _b.length) queue.push(...g.children);
   }
@@ -15183,8 +16016,8 @@ function replaceNestedFlowStackChildren(entry, nestedStackId, newChildren, setTo
   return walk(entry);
 }
 function splitEntryAtNested(entry, pageChildren, contentBottom) {
-  var _a;
-  const entryIsNestedStack = isVerticalStackLayoutMode(entry.layoutMode) && ((_a = entry.children) == null ? void 0 : _a.length) && (entry.children.some(hasBaseNodeId) || entry.children.some((c) => isGroup(c)));
+  var _a2;
+  const entryIsNestedStack = isVerticalStackLayoutMode(entry.layoutMode) && ((_a2 = entry.children) == null ? void 0 : _a2.length) && (entry.children.some(hasBaseNodeId) || entry.children.some((c) => isGroup(c)));
   const nested = entryIsNestedStack ? entry : findNestedFlowStack(entry);
   if (!nested) return { stayVersion: null, overflowVersion: entry };
   const nestedKids = nested.children ?? [];
@@ -15295,8 +16128,8 @@ function splitNestedForOverflow(flowStack, stayChildren, overflowChildren, overf
   return { stayChildren: newStay, overflowChildren: newOverflow };
 }
 function paginateSinglePage(sourcePage, pageOffsetIndex) {
-  var _a, _b, _c, _d, _e, _f;
-  const contentTop = (_a = sourcePage.settings) == null ? void 0 : _a.contentTop;
+  var _a2, _b, _c, _d, _e, _f;
+  const contentTop = (_a2 = sourcePage.settings) == null ? void 0 : _a2.contentTop;
   const contentBottom = (_b = sourcePage.settings) == null ? void 0 : _b.contentBottom;
   if (contentTop == null || contentBottom == null || contentBottom <= contentTop) {
     return [sourcePage];
@@ -16161,10 +16994,10 @@ const resolveBestRegisteredVariant = (family, weight, italic) => {
   return null;
 };
 const doesVariantSupportChar = (family, weight, italic, char) => {
-  var _a;
+  var _a2;
   const cp = char.codePointAt(0);
   if (cp == null) return false;
-  return ((_a = registeredVariantCoverage.get(variantKey(family, weight, italic))) == null ? void 0 : _a.has(cp)) === true;
+  return ((_a2 = registeredVariantCoverage.get(variantKey(family, weight, italic))) == null ? void 0 : _a2.has(cp)) === true;
 };
 function bytesToBase64(bytes) {
   let binary = "";
@@ -16172,9 +17005,9 @@ function bytesToBase64(bytes) {
   return btoa(binary);
 }
 function getFontProxyUrl() {
-  var _a;
+  var _a2;
   const viteUrl = (__vite_import_meta_env__ == null ? void 0 : __vite_import_meta_env__.VITE_SUPABASE_URL) || "";
-  const runtimeUrl = typeof globalThis !== "undefined" ? ((_a = globalThis.__CONFIG__) == null ? void 0 : _a.supabaseUrl) || globalThis.__PIXLDOCS_SUPABASE_URL || "" : "";
+  const runtimeUrl = typeof globalThis !== "undefined" ? ((_a2 = globalThis.__CONFIG__) == null ? void 0 : _a2.supabaseUrl) || globalThis.__PIXLDOCS_SUPABASE_URL || "" : "";
   const baseUrl = (viteUrl || runtimeUrl || "").replace(/\/$/, "");
   return baseUrl ? `${baseUrl}/functions/v1/font-proxy` : null;
 }
@@ -16487,20 +17320,20 @@ function splitIntoRuns(text, mainSupportsChar) {
   return runs;
 }
 function rewriteSvgFontsForJsPDF(svgStr) {
-  var _a, _b;
+  var _a2, _b;
   const parser = new DOMParser();
   const doc = parser.parseFromString(svgStr, "image/svg+xml");
   const allTextEls = Array.from(doc.querySelectorAll("text, tspan, textPath"));
   const readStyleToken = (style, prop) => {
-    var _a2;
+    var _a3;
     const match = style.match(new RegExp(`${prop}\\s*:\\s*([^;]+)`, "i"));
-    return ((_a2 = match == null ? void 0 : match[1]) == null ? void 0 : _a2.trim()) || null;
+    return ((_a3 = match == null ? void 0 : match[1]) == null ? void 0 : _a3.trim()) || null;
   };
   const resolveInheritedValue = (el, attr, styleProp = attr) => {
-    var _a2;
+    var _a3;
     let current = el;
     while (current) {
-      const attrVal = (_a2 = current.getAttribute(attr)) == null ? void 0 : _a2.trim();
+      const attrVal = (_a3 = current.getAttribute(attr)) == null ? void 0 : _a3.trim();
       if (attrVal) return attrVal;
       const styleVal = readStyleToken(current.getAttribute("style") || "", styleProp);
       if (styleVal) return styleVal;
@@ -16540,7 +17373,7 @@ function rewriteSvgFontsForJsPDF(svgStr) {
     const inlineStyle = el.getAttribute("style") || "";
     const rawFf = resolveInheritedValue(el, "font-family");
     if (!rawFf) continue;
-    const clean = (_a = rawFf.split(",")[0]) == null ? void 0 : _a.replace(/['"]/g, "").trim();
+    const clean = (_a2 = rawFf.split(",")[0]) == null ? void 0 : _a2.replace(/['"]/g, "").trim();
     if (!isFontAvailable(clean) && !isFamilyEmbedded(clean)) continue;
     const weightRaw = resolveInheritedValue(el, "font-weight") || "400";
     const styleRaw = resolveInheritedValue(el, "font-style") || "normal";
@@ -16688,20 +17521,20 @@ function extractFontFamiliesFromSvgs(svgs) {
   return families;
 }
 async function embedFontVariantsFromSvg(pdf, svgStr, fontBaseUrl) {
-  var _a;
+  var _a2;
   const parser = new DOMParser();
   const doc = parser.parseFromString(svgStr, "image/svg+xml");
   const textEls = Array.from(doc.querySelectorAll("text, tspan, textPath"));
   const readStyleToken = (style, prop) => {
-    var _a2;
+    var _a3;
     const m = style.match(new RegExp(`${prop}\\s*:\\s*([^;]+)`, "i"));
-    return ((_a2 = m == null ? void 0 : m[1]) == null ? void 0 : _a2.trim()) || null;
+    return ((_a3 = m == null ? void 0 : m[1]) == null ? void 0 : _a3.trim()) || null;
   };
   const resolveInherited = (el, attr, styleProp = attr) => {
-    var _a2;
+    var _a3;
     let cur = el;
     while (cur) {
-      const a = (_a2 = cur.getAttribute(attr)) == null ? void 0 : _a2.trim();
+      const a = (_a3 = cur.getAttribute(attr)) == null ? void 0 : _a3.trim();
       if (a) return a;
       const s = readStyleToken(cur.getAttribute("style") || "", styleProp);
       if (s) return s;
@@ -16723,7 +17556,7 @@ async function embedFontVariantsFromSvg(pdf, svgStr, fontBaseUrl) {
   for (const el of textEls) {
     const rawFf = resolveInherited(el, "font-family");
     if (!rawFf) continue;
-    const family = (_a = rawFf.split(",")[0]) == null ? void 0 : _a.replace(/['"]/g, "").trim();
+    const family = (_a2 = rawFf.split(",")[0]) == null ? void 0 : _a2.replace(/['"]/g, "").trim();
     if (!family) continue;
     const weight = resolveFontWeight(parseWeight(resolveInherited(el, "font-weight") || "400"));
     const italic = /italic|oblique/i.test(resolveInherited(el, "font-style") || "normal");
@@ -16902,9 +17735,9 @@ function appendDataUriFontFaceRule(family, weight, style, dataUri) {
   styleEl.appendChild(document.createTextNode(cssText));
 }
 function resolveHarnessFontProxyUrl() {
-  var _a, _b;
+  var _a2, _b;
   try {
-    const runtimeBase = typeof window !== "undefined" && (window.__PIXLDOCS_SUPABASE_URL || ((_a = window.__CONFIG__) == null ? void 0 : _a.supabaseUrl)) || typeof globalThis !== "undefined" && (globalThis.__PIXLDOCS_SUPABASE_URL || ((_b = globalThis.__CONFIG__) == null ? void 0 : _b.supabaseUrl)) || "";
+    const runtimeBase = typeof window !== "undefined" && (window.__PIXLDOCS_SUPABASE_URL || ((_a2 = window.__CONFIG__) == null ? void 0 : _a2.supabaseUrl)) || typeof globalThis !== "undefined" && (globalThis.__PIXLDOCS_SUPABASE_URL || ((_b = globalThis.__CONFIG__) == null ? void 0 : _b.supabaseUrl)) || "";
     const base = String(runtimeBase || "").replace(/\/$/, "");
     return base ? `${base}/functions/v1/font-proxy` : "";
   } catch {
@@ -17065,16 +17898,16 @@ async function loadGoogleFontCSS(rawFontFamily) {
   loadingPromises.delete(fontFamily);
 }
 function collectFontsFromConfig(config) {
-  var _a;
+  var _a2;
   const fonts = /* @__PURE__ */ new Set();
   fonts.add("Open Sans");
   fonts.add("Hind");
   function walk(nodes) {
-    var _a2;
+    var _a3;
     if (!nodes) return;
     for (const node of nodes) {
       if (node.fontFamily) fonts.add(normalizeFontFamily(node.fontFamily));
-      if ((_a2 = node.smartProps) == null ? void 0 : _a2.fontFamily) fonts.add(normalizeFontFamily(node.smartProps.fontFamily));
+      if ((_a3 = node.smartProps) == null ? void 0 : _a3.fontFamily) fonts.add(normalizeFontFamily(node.smartProps.fontFamily));
       if (node.styles && Array.isArray(node.styles)) {
         for (const lineStyle of node.styles) {
           if (lineStyle && typeof lineStyle === "object") {
@@ -17090,7 +17923,7 @@ function collectFontsFromConfig(config) {
   for (const page of config.pages || []) {
     walk(page.children || []);
   }
-  if ((_a = config.themeConfig) == null ? void 0 : _a.variables) {
+  if ((_a2 = config.themeConfig) == null ? void 0 : _a2.variables) {
     for (const def of Object.values(config.themeConfig.variables)) {
       if (def.value && typeof def.value === "string" && !def.value.startsWith("#") && !def.value.startsWith("rgb")) {
         if (def.label && /font/i.test(def.label)) {
@@ -17102,7 +17935,7 @@ function collectFontsFromConfig(config) {
   return fonts;
 }
 function collectFontDescriptorsFromConfig(config, includeCommonTextVariants = true) {
-  var _a;
+  var _a2;
   const seen = /* @__PURE__ */ new Set();
   const descriptors = [];
   function add(family, weight, style) {
@@ -17116,7 +17949,7 @@ function collectFontDescriptorsFromConfig(config, includeCommonTextVariants = tr
     descriptors.push({ family: f, weight: w, style: s });
   }
   function walk(nodes) {
-    var _a2;
+    var _a3;
     if (!nodes) return;
     for (const node of nodes) {
       if (node.fontFamily) {
@@ -17144,7 +17977,7 @@ function collectFontDescriptorsFromConfig(config, includeCommonTextVariants = tr
           }
         }
       }
-      if ((_a2 = node.smartProps) == null ? void 0 : _a2.fontFamily) {
+      if ((_a3 = node.smartProps) == null ? void 0 : _a3.fontFamily) {
         add(node.smartProps.fontFamily, node.smartProps.fontWeight, node.smartProps.fontStyle);
       }
       if (node.styles) {
@@ -17168,7 +18001,7 @@ function collectFontDescriptorsFromConfig(config, includeCommonTextVariants = tr
   for (const page of config.pages || []) {
     walk(page.children || []);
   }
-  if ((_a = config.themeConfig) == null ? void 0 : _a.variables) {
+  if ((_a2 = config.themeConfig) == null ? void 0 : _a2.variables) {
     for (const def of Object.values(config.themeConfig.variables)) {
       if (def.value && typeof def.value === "string" && !def.value.startsWith("#") && !def.value.startsWith("rgb")) {
         if (def.label && /font/i.test(def.label)) {
@@ -17205,8 +18038,8 @@ async function ensureFontsForResolvedConfig(config) {
   }
 }
 function configHasAutoShrinkText$1(config) {
-  var _a;
-  if (!((_a = config == null ? void 0 : config.pages) == null ? void 0 : _a.length)) return false;
+  var _a2;
+  if (!((_a2 = config == null ? void 0 : config.pages) == null ? void 0 : _a2.length)) return false;
   const walk = (nodes) => {
     for (const node of nodes || []) {
       if (!node) continue;
@@ -17339,8 +18172,8 @@ function mergeRepeatableEntryMeta(target, metaSource, sections) {
   return changed ? next : target;
 }
 function buildRepeatablePagesInputForApply(schema, sectionState) {
-  var _a;
-  if (!((_a = schema == null ? void 0 : schema.repeatablePages) == null ? void 0 : _a.length)) return [];
+  var _a2;
+  if (!((_a2 = schema == null ? void 0 : schema.repeatablePages) == null ? void 0 : _a2.length)) return [];
   const normalizeTemplateKeyPrefix = (prefix) => {
     if (!prefix || typeof prefix !== "string") return "";
     return prefix.replace(/^field_/, "");
@@ -17566,7 +18399,7 @@ async function resolveTemplateData(options) {
   };
 }
 async function resolveFromForm(options) {
-  var _a, _b, _c;
+  var _a2, _b, _c;
   const { templateId, formSchemaId, sectionState, flatFormData: directFlatFormData, themeId, supabaseUrl, supabaseAnonKey, prefetched } = options;
   const hasSectionStateInput = !!sectionState && Object.keys(sectionState).length > 0;
   if (!formSchemaId && !hasSectionStateInput) {
@@ -17611,7 +18444,7 @@ async function resolveFromForm(options) {
   let inferredSections;
   if (schemaSections == null ? void 0 : schemaSections.length) {
     inferredSections = formDefSectionsToInferred(schemaSections, repeatableNodeMap);
-  } else if ((_a = templateConfig.dynamicFields) == null ? void 0 : _a.length) {
+  } else if ((_a2 = templateConfig.dynamicFields) == null ? void 0 : _a2.length) {
     const groups = templateConfig.fieldGroups || [];
     inferredSections = inferFormSchemaFromTemplate(
       templateConfig.dynamicFields,
@@ -17799,9 +18632,9 @@ function themeBaseId(id) {
   return out;
 }
 function applyThemeVariantToConfig(config, themeConfig, themeId) {
-  var _a, _b, _c, _d;
+  var _a2, _b, _c, _d;
   if (!themeConfig) return config;
-  const variant = themeId && themeId !== "default" ? (_a = themeConfig.variants) == null ? void 0 : _a.find((v) => v.id === themeId) : null;
+  const variant = themeId && themeId !== "default" ? (_a2 = themeConfig.variants) == null ? void 0 : _a2.find((v) => v.id === themeId) : null;
   const shouldApplyDefaults = !variant && ((_b = themeConfig.properties) == null ? void 0 : _b.length);
   if (!variant && !shouldApplyDefaults) return config;
   if (!((_c = themeConfig.properties) == null ? void 0 : _c.length)) return config;
@@ -17823,8 +18656,8 @@ function applyThemeVariantToConfig(config, themeConfig, themeId) {
       if (stopMatch) {
         const stopIndex = parseInt(stopMatch[1], 10);
         result.pages.forEach((p) => {
-          var _a2, _b2;
-          if ((_b2 = (_a2 = p.settings.backgroundGradient) == null ? void 0 : _a2.stops) == null ? void 0 : _b2[stopIndex]) {
+          var _a3, _b2;
+          if ((_b2 = (_a3 = p.settings.backgroundGradient) == null ? void 0 : _a3.stops) == null ? void 0 : _b2[stopIndex]) {
             p.settings.backgroundGradient = {
               ...p.settings.backgroundGradient,
               stops: p.settings.backgroundGradient.stops.map(
@@ -17901,7 +18734,7 @@ function normalizeLayoutModes(config) {
   }
 }
 function paintRepeatableSections(config, repeatableSections, formSchema) {
-  var _a, _b;
+  var _a2, _b;
   const pages = config.pages ?? [];
   const entryFilters = (formSchema == null ? void 0 : formSchema.entryFilters) ?? [];
   const entryFilterBases = new Set(entryFilters.map((f) => baseId(f.nodeId)));
@@ -17929,7 +18762,7 @@ function paintRepeatableSections(config, repeatableSections, formSchema) {
     return painted;
   }
   for (const section of repeatableSections) {
-    const inlineRange = ((_a = section.entryFilter) == null ? void 0 : _a.mode) === "range" ? (_b = section.entryFilter.range) == null ? void 0 : _b.trim() : void 0;
+    const inlineRange = ((_a2 = section.entryFilter) == null ? void 0 : _a2.mode) === "range" ? (_b = section.entryFilter.range) == null ? void 0 : _b.trim() : void 0;
     const shouldUseInlineFilter = !!inlineRange && !entryFilterBases.has(baseId(section.nodeId));
     const payload = { label: section.label };
     if (section.minEntries !== void 0) payload.minEntries = section.minEntries;
@@ -17942,9 +18775,9 @@ function paintRepeatableSections(config, repeatableSections, formSchema) {
   if (entryFilters.length) {
     const occurrencesByBase = /* @__PURE__ */ new Map();
     const collect = (nodes) => {
-      var _a2;
+      var _a3;
       for (const node of nodes ?? []) {
-        if ((_a2 = node.repeatableSection) == null ? void 0 : _a2.label) {
+        if ((_a3 = node.repeatableSection) == null ? void 0 : _a3.label) {
           const base = baseId(node.id);
           if (!occurrencesByBase.has(base)) occurrencesByBase.set(base, []);
           occurrencesByBase.get(base).push(node);
@@ -17965,7 +18798,7 @@ function paintRepeatableSections(config, repeatableSections, formSchema) {
   }
 }
 async function getTemplateForm(options) {
-  var _a, _b;
+  var _a2, _b;
   const { templateId, supabaseUrl, supabaseAnonKey } = options;
   if (!supabaseUrl || !supabaseAnonKey) {
     throw new Error("[getTemplateForm] supabaseUrl and supabaseAnonKey are required");
@@ -18005,7 +18838,7 @@ async function getTemplateForm(options) {
   let sections;
   if (schemaSections == null ? void 0 : schemaSections.length) {
     sections = formDefSectionsToInferred(schemaSections, repeatableNodeMap);
-  } else if ((_a = templateConfig.dynamicFields) == null ? void 0 : _a.length) {
+  } else if ((_a2 = templateConfig.dynamicFields) == null ? void 0 : _a2.length) {
     sections = inferFormSchemaFromTemplate(
       templateConfig.dynamicFields,
       templateConfig.fieldGroups || [],
@@ -18283,28 +19116,28 @@ const previewBlur = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineP
 }, Symbol.toStringTag, { value: "Module" }));
 const PREVIEW_DEBUG_PREFIX = "[canvas-renderer][preview-debug]";
 function computeFontSignature(config) {
-  var _a;
-  if (!((_a = config == null ? void 0 : config.pages) == null ? void 0 : _a.length)) return "";
+  var _a2;
+  if (!((_a2 = config == null ? void 0 : config.pages) == null ? void 0 : _a2.length)) return "";
   const fams = /* @__PURE__ */ new Set();
   const walk = (nodes) => {
-    var _a2;
+    var _a3;
     for (const node of nodes || []) {
       if (node == null ? void 0 : node.fontFamily) fams.add(String(node.fontFamily));
-      if ((_a2 = node == null ? void 0 : node.children) == null ? void 0 : _a2.length) walk(node.children);
+      if ((_a3 = node == null ? void 0 : node.children) == null ? void 0 : _a3.length) walk(node.children);
     }
   };
   for (const page of config.pages) walk(page.children || []);
   return Array.from(fams).sort().join("|");
 }
 function countUnderlinedNodes(config) {
-  var _a;
-  if (!((_a = config == null ? void 0 : config.pages) == null ? void 0 : _a.length)) return 0;
+  var _a2;
+  if (!((_a2 = config == null ? void 0 : config.pages) == null ? void 0 : _a2.length)) return 0;
   let count = 0;
   const walk = (nodes) => {
-    var _a2;
+    var _a3;
     for (const node of nodes || []) {
       if (node == null ? void 0 : node.underline) count += 1;
-      if ((_a2 = node == null ? void 0 : node.children) == null ? void 0 : _a2.length) walk(node.children);
+      if ((_a3 = node == null ? void 0 : node.children) == null ? void 0 : _a3.length) walk(node.children);
     }
   };
   for (const page of config.pages) walk(page.children || []);
@@ -18336,8 +19169,8 @@ function collectBlurBounds(node, parentLeft, parentTop, inheritedBlur, extraBase
   out.push({ left: absLeft, top: absTop, width: w, height: h });
 }
 function computeFrostedBoundsForPage(config, pageIndex, extraBaseIds, extraExactIds) {
-  var _a;
-  const page = (_a = config == null ? void 0 : config.pages) == null ? void 0 : _a[pageIndex];
+  var _a2;
+  const page = (_a2 = config == null ? void 0 : config.pages) == null ? void 0 : _a2[pageIndex];
   const children = (page == null ? void 0 : page.children) || (page == null ? void 0 : page.elements);
   if (!Array.isArray(children)) return [];
   const out = [];
@@ -18346,7 +19179,7 @@ function computeFrostedBoundsForPage(config, pageIndex, extraBaseIds, extraExact
   return out;
 }
 function PixldocsPreview(props) {
-  var _a, _b;
+  var _a2, _b;
   const {
     pageIndex = 0,
     zoom = 1,
@@ -18357,6 +19190,7 @@ function PixldocsPreview(props) {
     onDynamicFieldClick,
     onReady,
     onError,
+    loadingFallback,
     // Default `false` so PageCanvas blocks textbox creation until the host
     // browser actually has the @font-face rules registered. This matters for
     // `overflowPolicy: 'auto-shrink'` text — `createText` runs the shrink
@@ -18413,10 +19247,10 @@ function PixldocsPreview(props) {
       supabaseUrl: p.supabaseUrl,
       supabaseAnonKey: p.supabaseAnonKey
     }).then((resolved) => {
-      var _a2, _b2;
+      var _a3, _b2;
       if (!cancelled) {
         console.log(PREVIEW_DEBUG_PREFIX, "resolve-done", {
-          pages: ((_b2 = (_a2 = resolved.config) == null ? void 0 : _a2.pages) == null ? void 0 : _b2.length) ?? 0,
+          pages: ((_b2 = (_a3 = resolved.config) == null ? void 0 : _a3.pages) == null ? void 0 : _b2.length) ?? 0,
           underlinedNodes: countUnderlinedNodes(resolved.config)
         });
         setResolvedConfig(resolved.config);
@@ -18525,15 +19359,15 @@ function PixldocsPreview(props) {
   const blurPx = (frostedBlurOptions == null ? void 0 : frostedBlurOptions.blurPx) ?? 5;
   const satPct = (frostedBlurOptions == null ? void 0 : frostedBlurOptions.saturatePct) ?? 130;
   const bgTint = (frostedBlurOptions == null ? void 0 : frostedBlurOptions.background) ?? "rgba(255,255,255,0.12)";
-  const canvasW = getNum((_a = config == null ? void 0 : config.canvas) == null ? void 0 : _a.width, 0);
+  const canvasW = getNum((_a2 = config == null ? void 0 : config.canvas) == null ? void 0 : _a2.width, 0);
   const canvasH = getNum((_b = config == null ? void 0 : config.canvas) == null ? void 0 : _b.height, 0);
   const hasOverlays = frostedBounds.length > 0 && canvasW > 0 && canvasH > 0;
   if (isLoading) {
-    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: { ...style, position: "relative", minHeight: 200, display: "flex", alignItems: "center", justifyContent: "center" }, children: loadingFallback ?? /* @__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: { ...style, position: "relative", minHeight: 200, display: "flex", alignItems: "center", justifyContent: "center" }, children: loadingFallback ?? /* @__PURE__ */ jsx("div", { style: { color: "#888", fontSize: 14 }, children: "Loading preview..." }) });
   }
   return /* @__PURE__ */ jsxs("div", { className, style: { ...style, position: "relative" }, children: [
     /* @__PURE__ */ jsxs(
@@ -18585,7 +19419,7 @@ function PixldocsPreview(props) {
         ]
       }
     ),
-    !canvasSettled && /* @__PURE__ */ jsx("div", { style: { position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center", minHeight: 200 }, children: /* @__PURE__ */ jsx("div", { style: { color: "#888", fontSize: 14 }, children: "Loading preview..." }) })
+    !canvasSettled && /* @__PURE__ */ jsx("div", { style: { position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center", minHeight: 200 }, children: loadingFallback ?? /* @__PURE__ */ jsx("div", { style: { color: "#888", fontSize: 14 }, children: "Loading preview..." }) })
   ] });
 }
 function normalizeSvgDimensions(svg, targetWidth, targetHeight) {
@@ -18667,7 +19501,7 @@ function ensureFabricGradientDef(doc, obj, width, height) {
   return `url(#${id})`;
 }
 function warpTextboxSvgAlongPath(svg, obj) {
-  var _a, _b, _c, _d, _e;
+  var _a2, _b, _c, _d, _e;
   const tp = obj == null ? void 0 : obj.textPath;
   if (!tp || !tp.preset || tp.preset === "none") return svg;
   if (tp.preset === "rise" || tp.preset === "angle") {
@@ -18725,7 +19559,7 @@ function warpTextboxSvgAlongPath(svg, obj) {
   }
   for (const marker of Array.from(doc.querySelectorAll("g.__pdShadowRaster"))) {
     try {
-      (_a = marker.parentNode) == null ? void 0 : _a.removeChild(marker);
+      (_a2 = marker.parentNode) == null ? void 0 : _a2.removeChild(marker);
     } catch {
     }
   }
@@ -18751,9 +19585,9 @@ function warpTextboxSvgAlongPath(svg, obj) {
   const fw = obj.fontWeight ?? 400;
   const fst = obj.fontStyle || "normal";
   const readFill = (el) => {
-    var _a2, _b2;
+    var _a3, _b2;
     if (!el) return "";
-    return el.getAttribute("fill") || ((_b2 = (_a2 = (el.getAttribute("style") || "").match(/(?:^|;)\s*fill\s*:\s*([^;]+)/i)) == null ? void 0 : _a2[1]) == null ? void 0 : _b2.trim()) || "";
+    return el.getAttribute("fill") || ((_b2 = (_a3 = (el.getAttribute("style") || "").match(/(?:^|;)\s*fill\s*:\s*([^;]+)/i)) == null ? void 0 : _a3[1]) == null ? void 0 : _b2.trim()) || "";
   };
   const w = Number(obj.width) || 0;
   const h = Number(obj.height) || 0;
@@ -18946,7 +19780,7 @@ function stampFabricLineMetricsOnTextSvg(svg, obj) {
   const boxWidth = Number(obj.width ?? 0) || 0;
   let lineIndex = 0;
   return svg.replace(/<tspan\b([^>]*)>/gi, (match, attrs) => {
-    var _a;
+    var _a2;
     if (lineIndex >= lines.length || !/\sy\s*=/.test(attrs)) return match;
     let lineWidth = 0;
     let lineLeft = 0;
@@ -18956,7 +19790,7 @@ function stampFabricLineMetricsOnTextSvg(svg, obj) {
       lineWidth = 0;
     }
     try {
-      lineLeft = Number(((_a = obj._getLineLeftOffset) == null ? void 0 : _a.call(obj, lineIndex)) ?? 0);
+      lineLeft = Number(((_a2 = obj._getLineLeftOffset) == null ? void 0 : _a2.call(obj, lineIndex)) ?? 0);
     } catch {
       lineLeft = 0;
     }
@@ -19105,18 +19939,18 @@ function captureFabricCanvasSvgForPdf(fabricInstance, canvasWidth, canvasHeight)
   }
   return svgString;
 }
-const resolvedPackageVersion = "0.5.222";
+const resolvedPackageVersion = "0.5.225";
 const PACKAGE_VERSION = resolvedPackageVersion;
-const DEPLOYMENT_VERSION_MARKER = "__PIXLDOCS_CANVAS_RENDERER_VERSION__:0.5.222";
+const DEPLOYMENT_VERSION_MARKER = "__PIXLDOCS_CANVAS_RENDERER_VERSION__:0.5.225";
 const roundParityValue = (value) => {
   if (typeof value !== "number") return value;
   return Number.isFinite(value) ? Number(value.toFixed(3)) : value;
 };
 function isolatePageForCapture(config, pageIndex) {
-  var _a;
+  var _a2;
   const capturePageId = `__pixldocs_capture_${Date.now().toString(36)}_${Math.random().toString(36).slice(2, 10)}_${pageIndex}`;
   const cloned = JSON.parse(JSON.stringify(config));
-  if ((_a = cloned.pages) == null ? void 0 : _a[pageIndex]) {
+  if ((_a2 = cloned.pages) == null ? void 0 : _a2[pageIndex]) {
     cloned.pages[pageIndex].id = capturePageId;
   }
   return { config: cloned, pageId: capturePageId };
@@ -19278,14 +20112,14 @@ async function downscaleConfigRasterImages(config, maxEdgePx, maxDataUrlBytes =
 }
 let __underlineFixInstalled = false;
 function installUnderlineFix(fab) {
-  var _a;
+  var _a2;
   if (__underlineFixInstalled) return;
-  const TextProto = (_a = fab.Text) == null ? void 0 : _a.prototype;
+  const TextProto = (_a2 = fab.Text) == null ? void 0 : _a2.prototype;
   if (!TextProto || typeof TextProto._renderTextDecoration !== "function") return;
   const original = TextProto._renderTextDecoration;
   const measureLineTextWidth = (obj, ctx, lineIndex) => {
-    var _a2, _b, _c, _d, _e, _f;
-    const rawLine = (_a2 = obj._textLines) == null ? void 0 : _a2[lineIndex];
+    var _a3, _b, _c, _d, _e, _f;
+    const rawLine = (_a3 = obj._textLines) == null ? void 0 : _a3[lineIndex];
     const lineText = Array.isArray(rawLine) ? rawLine.join("") : String(rawLine ?? "");
     if (!lineText) return 0;
     const fontSize = Number(((_b = obj.getValueOfPropertyAt) == null ? void 0 : _b.call(obj, lineIndex, 0, "fontSize")) ?? obj.fontSize ?? 0);
@@ -19377,9 +20211,9 @@ function installUnderlineFix(fab) {
 }
 let __textboxBoxExtensionsInstalled = false;
 function installTextboxBoxExtensions(fab) {
-  var _a;
+  var _a2;
   if (__textboxBoxExtensionsInstalled) return;
-  const TextboxProto2 = (_a = fab.Textbox) == null ? void 0 : _a.prototype;
+  const TextboxProto2 = (_a2 = fab.Textbox) == null ? void 0 : _a2.prototype;
   if (!TextboxProto2) return;
   if (TextboxProto2.__pixldocsTextboxExtended) {
     __textboxBoxExtensionsInstalled = true;
@@ -19438,8 +20272,8 @@ function installTextboxBoxExtensions(fab) {
   __textboxBoxExtensionsInstalled = true;
 }
 function configHasAutoShrinkText(config) {
-  var _a;
-  if (!((_a = config == null ? void 0 : config.pages) == null ? void 0 : _a.length)) return false;
+  var _a2;
+  if (!((_a2 = config == null ? void 0 : config.pages) == null ? void 0 : _a2.length)) return false;
   const walk = (nodes) => {
     for (const node of nodes || []) {
       if (!node) continue;
@@ -19690,8 +20524,8 @@ class PixldocsRenderer {
    * Requires `RendererConfig.deliveryServerUrl` to be set.
    */
   async renderAndDeliver(options) {
-    var _a;
-    const base = (_a = this.config.deliveryServerUrl) == null ? void 0 : _a.replace(/\/+$/, "");
+    var _a2;
+    const base = (_a2 = this.config.deliveryServerUrl) == null ? void 0 : _a2.replace(/\/+$/, "");
     if (!base) {
       throw new Error("renderAndDeliver: RendererConfig.deliveryServerUrl is required");
     }
@@ -19751,7 +20585,7 @@ class PixldocsRenderer {
    * same fonts, same gradients, same draw order, same selectable text.
    */
   async renderPdfViaClientExport(templateConfig, options = {}) {
-    var _a;
+    var _a2;
     await ensureFontsForResolvedConfig(templateConfig);
     const hasAutoShrink = configHasAutoShrinkText(templateConfig);
     await this.awaitFontsForConfig(templateConfig, hasAutoShrink ? 4e3 : 1800);
@@ -19851,7 +20685,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 import("./vectorPdfExport-CTPOHXtQ.js");
+      const { exportMultiPagePdf, preparePagesForExport } = await import("./vectorPdfExport-D46sZGKA.js");
       const prepared = preparePagesForExport(
         cloned.pages,
         canvasWidth,
@@ -19861,7 +20695,7 @@ class PixldocsRenderer {
         title: options.title,
         watermark: !!options.watermark,
         returnBlob: true,
-        pdfTextMode: options.textMode ?? (cloned == null ? void 0 : cloned.pdfTextMode) ?? ((_a = cloned.canvas) == null ? void 0 : _a.n) ?? "auto",
+        pdfTextMode: options.textMode ?? (cloned == null ? void 0 : cloned.pdfTextMode) ?? ((_a2 = cloned.canvas) == null ? void 0 : _a2.n) ?? "auto",
         // Safari/WebKit can still let svg2pdf silently drop valid JPEG data-URL
         // <image> nodes even after the data is compressed and Fabric has loaded
         // it. For auto Safari mode, bypass only the full-page SVG->svg2pdf fast
@@ -20068,9 +20902,9 @@ class PixldocsRenderer {
   }
   waitForCanvasScene(container, config, pageIndex, maxWaitMs = 8e3, pollMs = 50) {
     return new Promise((resolve) => {
-      var _a, _b;
+      var _a2, _b;
       const start = Date.now();
-      const pageHasContent = (((_b = (_a = config.pages[pageIndex]) == null ? void 0 : _a.children) == null ? void 0 : _b.length) ?? 0) > 0;
+      const pageHasContent = (((_b = (_a2 = config.pages[pageIndex]) == null ? void 0 : _a2.children) == null ? void 0 : _b.length) ?? 0) > 0;
       const settle = () => requestAnimationFrame(() => requestAnimationFrame(() => resolve()));
       const check = () => {
         const fabricCanvas = this.getFabricCanvasFromContainer(container);
@@ -20145,8 +20979,8 @@ class PixldocsRenderer {
     return normalized;
   }
   paintPageBackground(ctx, page, width, height) {
-    var _a, _b;
-    const backgroundColor = ((_a = page == null ? void 0 : page.settings) == null ? void 0 : _a.backgroundColor) || "#ffffff";
+    var _a2, _b;
+    const backgroundColor = ((_a2 = page == null ? void 0 : page.settings) == null ? void 0 : _a2.backgroundColor) || "#ffffff";
     const gradient = (_b = page == null ? void 0 : page.settings) == null ? void 0 : _b.backgroundGradient;
     ctx.clearRect(0, 0, width, height);
     ctx.fillStyle = backgroundColor;
@@ -20395,7 +21229,7 @@ class PixldocsRenderer {
       };
       const onReady = () => {
         this.waitForCanvasScene(container, renderConfig, pageIndex).then(async () => {
-          var _a, _b;
+          var _a2, _b;
           try {
             const expectedImageIds = this.getExpectedImageIds(renderConfig, pageIndex);
             await this.waitForCanvasImages(container, expectedImageIds);
@@ -20413,7 +21247,7 @@ class PixldocsRenderer {
               canvasHeight
             );
             const page = renderConfig.pages[pageIndex];
-            const backgroundColor = ((_a = page == null ? void 0 : page.settings) == null ? void 0 : _a.backgroundColor) || "#ffffff";
+            const backgroundColor = ((_a2 = page == null ? void 0 : page.settings) == null ? void 0 : _a2.backgroundColor) || "#ffffff";
             const backgroundGradient = (_b = page == null ? void 0 : page.settings) == null ? void 0 : _b.backgroundGradient;
             cleanup();
             resolve({
@@ -20499,11 +21333,11 @@ class PixldocsRenderer {
     return null;
   }
   logFabricTextParitySnapshot(stage, fabricInstance) {
-    var _a;
+    var _a2;
     if (typeof window === "undefined" || window.__pixldocsDebugAutoShrink !== true) return;
     const sample = [];
     const visit = (obj, groupPath = "") => {
-      var _a2;
+      var _a3;
       if (!obj) return;
       if (isFabricTextboxLike(obj)) {
         const lineWidths = getCanvasMeasuredTextboxLineWidths(obj);
@@ -20520,7 +21354,7 @@ class PixldocsRenderer {
           fontSize: obj.fontSize,
           fontFamily: obj.fontFamily,
           fontWeight: obj.fontWeight,
-          lineCount: ((_a2 = obj.textLines) == null ? void 0 : _a2.length) || 0,
+          lineCount: ((_a3 = obj.textLines) == null ? void 0 : _a3.length) || 0,
           lines: (obj.textLines || []).map((line) => Array.isArray(line) ? line.join("") : String(line ?? "")),
           lineWidths,
           maxLineWidth: lineWidths.length ? Math.max(...lineWidths) : 0
@@ -20531,11 +21365,11 @@ class PixldocsRenderer {
         obj.getObjects().forEach((child) => visit(child, nextPath));
       }
     };
-    (_a = fabricInstance == null ? void 0 : fabricInstance.getObjects) == null ? void 0 : _a.call(fabricInstance).forEach((obj) => visit(obj));
+    (_a2 = fabricInstance == null ? void 0 : fabricInstance.getObjects) == null ? void 0 : _a2.call(fabricInstance).forEach((obj) => visit(obj));
     logJsonLine("[canvas-renderer][fabric-text-parity]", { stage, textboxes: sample.length, sample });
   }
   async waitForStableTextMetrics(container, config, options = {}) {
-    var _a, _b, _c;
+    var _a2, _b, _c;
     if (typeof document !== "undefined") {
       void ensureFontsForResolvedConfig(config);
       await this.waitForRelevantFonts(config);
@@ -20576,7 +21410,7 @@ class PixldocsRenderer {
       }
     }
     fabricInstance.getObjects().forEach(primeCharBounds);
-    (_a = fabricInstance.calcOffset) == null ? void 0 : _a.call(fabricInstance);
+    (_a2 = fabricInstance.calcOffset) == null ? void 0 : _a2.call(fabricInstance);
     (_b = fabricInstance.renderAll) == null ? void 0 : _b.call(fabricInstance);
     await waitForPaint();
     (_c = fabricInstance.renderAll) == null ? void 0 : _c.call(fabricInstance);
@@ -20618,7 +21452,7 @@ function dumpSvgTextDiagnostics(svgStr, pageIndex, tag, stage, maxItems = 30) {
     };
     logParityJson(tag, stage, { kind: "summary", ...summary });
     const sample = texts.slice(0, maxItems).map((t, idx) => {
-      var _a, _b;
+      var _a2, _b;
       const tspans = Array.from(t.querySelectorAll("tspan"));
       const tspanInfo = tspans.slice(0, 8).map((s) => ({
         x: s.getAttribute("x"),
@@ -20633,7 +21467,7 @@ function dumpSvgTextDiagnostics(svgStr, pageIndex, tag, stage, maxItems = 30) {
       let containerWidth = null;
       let cursor = t.parentElement;
       while (cursor && !containerWidth) {
-        containerWidth = (_a = cursor.getAttribute) == null ? void 0 : _a.call(cursor, "width");
+        containerWidth = (_a2 = cursor.getAttribute) == null ? void 0 : _a2.call(cursor, "width");
         cursor = cursor.parentElement;
         if (cursor && ((_b = cursor.tagName) == null ? void 0 : _b.toLowerCase()) === "svg") break;
       }
@@ -20827,7 +21661,7 @@ function rgbToHex(r, g, b) {
   return "#" + [r, g, b].map((x) => Math.max(0, Math.min(255, Math.round(x))).toString(16).padStart(2, "0")).join("");
 }
 function cssColorToHex(css) {
-  var _a;
+  var _a2;
   const s = css.trim();
   if (/^#[0-9a-f]{3}$/i.test(s)) {
     const r = s[1] + s[1], g = s[2] + s[2], b = s[3] + s[3];
@@ -20845,17 +21679,17 @@ function cssColorToHex(css) {
   if (typeof document === "undefined") return null;
   const div = document.createElement("div");
   div.style.color = s;
-  const computed = (_a = document.defaultView) == null ? void 0 : _a.getComputedStyle(div).color;
+  const computed = (_a2 = document.defaultView) == null ? void 0 : _a2.getComputedStyle(div).color;
   if (!computed || !computed.startsWith("rgb")) return null;
   const m = computed.match(/\d+/g);
   if (!m || m.length < 3) return null;
   return "#" + [m[0], m[1], m[2]].map((v) => Number(v).toString(16).padStart(2, "0")).join("");
 }
 function isInSvgDefinitionSubtree(el) {
-  var _a;
+  var _a2;
   let current = el;
   while (current) {
-    if (SVG_DEFINITION_CONTAINER_TAGS.has(((_a = current.tagName) == null ? void 0 : _a.toLowerCase()) ?? "")) return true;
+    if (SVG_DEFINITION_CONTAINER_TAGS.has(((_a2 = current.tagName) == null ? void 0 : _a2.toLowerCase()) ?? "")) return true;
     current = current.parentElement;
   }
   return false;
@@ -21015,27 +21849,27 @@ function normalizeSvgExplicitColors(svg) {
   const clone = svg.cloneNode(true);
   inlineSvgStyleBlockDeclarations(clone);
   const getAttr = (el, attr) => {
-    var _a;
-    const v = el.getAttribute(attr) ?? ((_a = el.style) == null ? void 0 : _a.getPropertyValue(attr));
+    var _a2;
+    const v = el.getAttribute(attr) ?? ((_a2 = el.style) == null ? void 0 : _a2.getPropertyValue(attr));
     if (!v) return null;
     const s = v.trim().toLowerCase();
     if (!s || s === "none" || s === "transparent" || s === "currentcolor") return null;
     return normalizeGradientPaintRef(v);
   };
   const hasExplicitNonePaint = (el, attr) => {
-    var _a, _b;
-    const raw = (el.getAttribute(attr) ?? ((_a = el.style) == null ? void 0 : _a.getPropertyValue(attr)) ?? "").trim().toLowerCase();
+    var _a2, _b;
+    const raw = (el.getAttribute(attr) ?? ((_a2 = el.style) == null ? void 0 : _a2.getPropertyValue(attr)) ?? "").trim().toLowerCase();
     if (raw === "none" || raw === "transparent") return true;
     const rawOpacity = (el.getAttribute(`${attr}-opacity`) ?? ((_b = el.style) == null ? void 0 : _b.getPropertyValue(`${attr}-opacity`)) ?? "").trim().toLowerCase();
     return rawOpacity === "0" || rawOpacity === "0%" || rawOpacity === "0.0";
   };
   function walk(el, parentFill, parentStroke, parentColor) {
-    var _a;
+    var _a2;
     if (isInSvgDefinitionSubtree(el)) {
       for (let i = 0; i < el.children.length; i++) walk(el.children[i], null, null, null);
       return;
     }
-    const tag = ((_a = el.tagName) == null ? void 0 : _a.toLowerCase()) ?? "";
+    const tag = ((_a2 = el.tagName) == null ? void 0 : _a2.toLowerCase()) ?? "";
     const isDrawable = SVG_DRAWABLE_TAGS.has(tag);
     let fill = getAttr(el, "fill");
     let stroke = getAttr(el, "stroke");
@@ -21093,12 +21927,12 @@ function normalizeSvgExplicitColors(svg) {
 function bakeGroupOpacityIntoChildren(svg) {
   const DRAWABLE = /* @__PURE__ */ new Set(["path", "rect", "circle", "ellipse", "polygon", "polyline", "line", "text", "tspan"]);
   function walkAndBake(el, inheritedOpacity) {
-    var _a, _b, _c, _d;
+    var _a2, _b, _c, _d;
     if (isInSvgDefinitionSubtree(el)) {
       for (let i = 0; i < el.children.length; i++) walkAndBake(el.children[i], 1);
       return;
     }
-    const tag = ((_a = el.tagName) == null ? void 0 : _a.toLowerCase()) ?? "";
+    const tag = ((_a2 = el.tagName) == null ? void 0 : _a2.toLowerCase()) ?? "";
     const opacityAttr = parseSvgOpacity(el.getAttribute("opacity"));
     const styleOpacity = parseSvgOpacity(((_b = el.style) == null ? void 0 : _b.getPropertyValue("opacity")) || null);
     const ownOpacity = opacityAttr ?? styleOpacity ?? 1;
@@ -21181,8 +22015,8 @@ function normalizeSvgGradientStopOffsets(svg) {
   }
 }
 function copyGradientAttrsFromRef(gradient, ref) {
-  var _a;
-  const tag = (_a = gradient.tagName) == null ? void 0 : _a.toLowerCase();
+  var _a2;
+  const tag = (_a2 = gradient.tagName) == null ? void 0 : _a2.toLowerCase();
   const attrs = tag === "radialgradient" ? GRADIENT_ATTRS_RADIAL : GRADIENT_ATTRS_LINEAR;
   for (const name of attrs) {
     if (!gradient.hasAttribute(name) && ref.hasAttribute(name)) {
@@ -21210,7 +22044,7 @@ function expandSvgGradientHrefs(svg) {
   for (const g of svg.querySelectorAll("linearGradient, radialGradient")) expand(g);
 }
 function expandSvgUseElements(svg) {
-  var _a;
+  var _a2;
   const doc = svg.ownerDocument;
   for (const use of Array.from(svg.querySelectorAll("use"))) {
     const ref = (use.getAttribute("href") || use.getAttribute("xlink:href") || "").trim();
@@ -21222,7 +22056,7 @@ function expandSvgUseElements(svg) {
     const w = parseFloat(use.getAttribute("width") || "0") || 0;
     const h = parseFloat(use.getAttribute("height") || "0") || 0;
     const g = doc.createElementNS("http://www.w3.org/2000/svg", "g");
-    if (((_a = target.tagName) == null ? void 0 : _a.toLowerCase()) === "symbol") {
+    if (((_a2 = target.tagName) == null ? void 0 : _a2.toLowerCase()) === "symbol") {
       const viewBox = target.getAttribute("viewBox");
       for (let i = 0; i < target.children.length; i++) g.appendChild(target.children[i].cloneNode(true));
       if (viewBox && w && h) {
@@ -21247,6 +22081,8 @@ function normalizeSvgViewBoxOrigin(svg) {
   if (parts.length !== 4) return;
   const [vx, vy, vw, vh] = parts;
   if (vw <= 0 || vh <= 0) return;
+  svg.setAttribute("width", String(vw));
+  svg.setAttribute("height", String(vh));
   if (Math.abs(vx) < 1e-3 && Math.abs(vy) < 1e-3) return;
   const doc = svg.ownerDocument;
   if (!doc) return;
@@ -21333,55 +22169,182 @@ function decodeSvgDataUri(href) {
     }
   }
 }
-function inlineNestedSvgImageDataUris(svgString, domParser = new DOMParser()) {
-  var _a;
+async function readNestedSvgImageMarkup(href) {
+  if (!href) return null;
+  if (href.startsWith("data:image/svg+xml")) return decodeSvgDataUri(href);
+  if (!/\.svg(?:[?#]|$)/i.test(href) && !href.startsWith("blob:")) return null;
+  try {
+    const res = await fetch(href, { cache: "no-store" });
+    if (!res.ok) return null;
+    const text = await res.text();
+    return /<svg[\s>]/i.test(text) ? text : null;
+  } catch {
+    return null;
+  }
+}
+async function inlineNestedSvgImageDataUris(svgString, domParser = new DOMParser()) {
+  var _a2;
   try {
     const doc = domParser.parseFromString(svgString, "image/svg+xml");
     if (doc.querySelector("parsererror")) return svgString;
     const root = doc.documentElement;
     if (!root || root.tagName.toLowerCase() !== "svg") return svgString;
     let changed = false;
-    for (const img of Array.from(doc.querySelectorAll("image"))) {
+    let inlined = 0;
+    const images = Array.from(doc.querySelectorAll("image"));
+    for (const [imageIndex, img] of images.entries()) {
       const href = img.getAttribute("href") || img.getAttributeNS("http://www.w3.org/1999/xlink", "href");
-      if (!href || !href.startsWith("data:image/svg+xml")) continue;
+      if (!href) continue;
       try {
-        const svgContent = decodeSvgDataUri(href);
+        const svgContent = await readNestedSvgImageMarkup(href);
         if (!svgContent || !/<svg[\s>]/i.test(svgContent)) continue;
         const innerDoc = domParser.parseFromString(svgContent, "image/svg+xml");
         if (innerDoc.querySelector("parsererror")) continue;
         const innerSvg = innerDoc.documentElement;
         if (!innerSvg || innerSvg.tagName.toLowerCase() !== "svg") continue;
+        const sourceId = img.getAttribute("id") || `image-${imageIndex}`;
+        prefixSvgIds(innerSvg, `inline-${sourceId}`);
         const ix = parseFloat(img.getAttribute("x") || "0") || 0;
         const iy = parseFloat(img.getAttribute("y") || "0") || 0;
         const iw = parseFloat(img.getAttribute("width") || "0");
         const ih = parseFloat(img.getAttribute("height") || "0");
         if (!(iw > 0 && ih > 0)) continue;
-        const nestedSvg = doc.importNode(innerSvg, true);
-        if (!nestedSvg.getAttribute("viewBox")) nestedSvg.setAttribute("viewBox", `0 0 ${iw} ${ih}`);
-        nestedSvg.setAttribute("x", "0");
-        nestedSvg.setAttribute("y", "0");
-        nestedSvg.setAttribute("width", String(iw));
-        nestedSvg.setAttribute("height", String(ih));
-        nestedSvg.setAttribute("preserveAspectRatio", img.getAttribute("preserveAspectRatio") || nestedSvg.getAttribute("preserveAspectRatio") || "xMidYMid meet");
         const g = doc.createElementNS("http://www.w3.org/2000/svg", "g");
         const existingTransform = img.getAttribute("transform") || "";
-        g.setAttribute("transform", `${existingTransform}${existingTransform ? " " : ""}translate(${ix},${iy})`);
+        const vb = (innerSvg.getAttribute("viewBox") || "").trim().split(/[\s,]+/).map((n) => Number.parseFloat(n));
+        const [vbX, vbY, vbW, vbH] = vb.length === 4 && vb.every((n) => Number.isFinite(n)) && vb[2] > 0 && vb[3] > 0 ? vb : [0, 0, iw, ih];
+        const par = img.getAttribute("preserveAspectRatio") || innerSvg.getAttribute("preserveAspectRatio") || "xMidYMid meet";
+        const parParts = par.trim().split(/\s+/).filter(Boolean);
+        const align = parParts[0] === "defer" ? parParts[1] || "xMidYMid" : parParts[0] || "xMidYMid";
+        const meetOrSlice = parParts[0] === "defer" ? parParts[2] || "meet" : parParts[1] || "meet";
+        let sx = iw / vbW;
+        let sy = ih / vbH;
+        let ox = 0;
+        let oy = 0;
+        if (align !== "none") {
+          const s = meetOrSlice === "slice" ? Math.max(sx, sy) : Math.min(sx, sy);
+          sx = s;
+          sy = s;
+          const extraW = iw - vbW * s;
+          const extraH = ih - vbH * s;
+          if (align.includes("xMid")) ox = extraW / 2;
+          else if (align.includes("xMax")) ox = extraW;
+          if (align.includes("YMid")) oy = extraH / 2;
+          else if (align.includes("YMax")) oy = extraH;
+        }
+        g.setAttribute("transform", `${existingTransform}${existingTransform ? " " : ""}translate(${ix + ox},${iy + oy}) scale(${sx},${sy}) translate(${-vbX},${-vbY})`);
+        const imageClipPath = img.getAttribute("clip-path") || getInlineStyleValue(img, "clip-path");
+        const dropImageClipPath = isRedundantImageClipPathForInlineSvg(root, imageClipPath, ix, iy, iw, ih);
+        if (dropImageClipPath) console.log("[canvas-renderer][pdf] dropped redundant inline SVG image clipPath", { imageIndex, sourceId, clipPath: imageClipPath });
         for (const attr of Array.from(img.attributes)) {
+          if (dropImageClipPath && attr.name === "clip-path") continue;
+          if (dropImageClipPath && attr.name === "style") {
+            const kept = parseInlineSvgStyleDeclarations(attr.value).filter((decl) => decl.key !== "clip-path").map((decl) => `${decl.key}: ${decl.value}`).join("; ");
+            if (kept) g.setAttribute("style", kept);
+            continue;
+          }
           if (["id", "class", "style", "opacity", "display", "visibility", "clip-path", "mask", "filter", "pointer-events"].includes(attr.name)) {
             g.setAttribute(attr.name, attr.value);
           }
         }
-        g.appendChild(nestedSvg);
-        (_a = img.parentNode) == null ? void 0 : _a.replaceChild(g, img);
+        for (const child of Array.from(innerSvg.childNodes)) g.appendChild(doc.importNode(child, true));
+        (_a2 = img.parentNode) == null ? void 0 : _a2.replaceChild(g, img);
         changed = true;
+        inlined++;
       } catch {
       }
     }
+    if (inlined > 0) console.log(`[canvas-renderer][pdf] inlined ${inlined} nested SVG image(s)`);
     return changed ? new XMLSerializer().serializeToString(doc.documentElement) : svgString;
   } catch {
     return svgString;
   }
 }
+function parseSvgLength(value, fallback) {
+  if (!value) return fallback;
+  const trimmed = value.trim();
+  if (!trimmed || trimmed.endsWith("%")) return fallback;
+  const parsed = Number.parseFloat(trimmed);
+  return Number.isFinite(parsed) && parsed > 0 ? parsed : fallback;
+}
+function isIdentitySvgMatrix(value) {
+  var _a2;
+  if (!value) return true;
+  const nums = ((_a2 = value.match(/-?\d*\.?\d+(?:e[-+]?\d+)?/gi)) == null ? void 0 : _a2.map(Number)) ?? [];
+  return nums.length === 6 && Math.abs(nums[0] - 1) < 1e-3 && Math.abs(nums[1]) < 1e-3 && Math.abs(nums[2]) < 1e-3 && Math.abs(nums[3] - 1) < 1e-3 && Math.abs(nums[4]) < 1e-3 && Math.abs(nums[5]) < 1e-3;
+}
+function isRedundantImageClipPathForInlineSvg(root, clipPathRef, ix, iy, iw, ih) {
+  const clipId = extractGradientIdFromPaint(clipPathRef);
+  if (!clipId || !(iw > 0 && ih > 0)) return false;
+  let clip = null;
+  for (const el of root.querySelectorAll("[id]")) {
+    if (el.getAttribute("id") === clipId) {
+      clip = el;
+      break;
+    }
+  }
+  if (!clip || clip.tagName.toLowerCase() !== "clippath") return false;
+  const units = (clip.getAttribute("clipPathUnits") || "userSpaceOnUse").toLowerCase();
+  const rects = Array.from(clip.children).filter((el) => el.tagName.toLowerCase() === "rect");
+  if (rects.length !== 1 || rects[0].parentElement !== clip) return false;
+  const rect = rects[0];
+  if (!isIdentitySvgMatrix(rect.getAttribute("transform"))) return false;
+  const rx = Number.parseFloat(rect.getAttribute("x") || "0") || 0;
+  const ry = Number.parseFloat(rect.getAttribute("y") || "0") || 0;
+  const rw = Number.parseFloat(rect.getAttribute("width") || "0");
+  const rh = Number.parseFloat(rect.getAttribute("height") || "0");
+  if (!(rw > 0 && rh > 0)) return false;
+  const near = (a, b) => Math.abs(a - b) <= Math.max(1, Math.max(Math.abs(a), Math.abs(b)) * 0.01);
+  if (units === "objectboundingbox") return near(rx, 0) && near(ry, 0) && near(rw, 1) && near(rh, 1);
+  return near(rx, ix) && near(ry, iy) && near(rw, iw) && near(rh, ih);
+}
+function flattenNestedSvgViewports(rootSvg) {
+  const nestedSvgs = Array.from(rootSvg.querySelectorAll("svg")).filter((svg) => svg !== rootSvg).reverse();
+  let flattened = 0;
+  for (const nestedSvg of nestedSvgs) {
+    const parent = nestedSvg.parentNode;
+    const doc = nestedSvg.ownerDocument;
+    if (!parent || !doc) continue;
+    const vb = (nestedSvg.getAttribute("viewBox") || "").trim().split(/[\s,]+/).map((n) => Number.parseFloat(n));
+    const hasViewBox = vb.length === 4 && vb.every((n) => Number.isFinite(n)) && vb[2] > 0 && vb[3] > 0;
+    const [vbX, vbY, vbW, vbH] = hasViewBox ? vb : [0, 0, 0, 0];
+    const width = parseSvgLength(nestedSvg.getAttribute("width"), hasViewBox ? vbW : 0);
+    const height = parseSvgLength(nestedSvg.getAttribute("height"), hasViewBox ? vbH : 0);
+    if (!(width > 0 && height > 0)) continue;
+    const x = Number.parseFloat(nestedSvg.getAttribute("x") || "0") || 0;
+    const y = Number.parseFloat(nestedSvg.getAttribute("y") || "0") || 0;
+    const par = nestedSvg.getAttribute("preserveAspectRatio") || "xMidYMid meet";
+    const parParts = par.trim().split(/\s+/).filter(Boolean);
+    const align = parParts[0] === "defer" ? parParts[1] || "xMidYMid" : parParts[0] || "xMidYMid";
+    const meetOrSlice = parParts[0] === "defer" ? parParts[2] || "meet" : parParts[1] || "meet";
+    let sx = hasViewBox ? width / vbW : 1;
+    let sy = hasViewBox ? height / vbH : 1;
+    let ox = 0;
+    let oy = 0;
+    if (hasViewBox && align !== "none") {
+      const s = meetOrSlice === "slice" ? Math.max(sx, sy) : Math.min(sx, sy);
+      sx = s;
+      sy = s;
+      const extraW = width - vbW * s;
+      const extraH = height - vbH * s;
+      if (align.includes("xMid")) ox = extraW / 2;
+      else if (align.includes("xMax")) ox = extraW;
+      if (align.includes("YMid")) oy = extraH / 2;
+      else if (align.includes("YMax")) oy = extraH;
+    }
+    const g = doc.createElementNS("http://www.w3.org/2000/svg", "g");
+    const existingTransform = nestedSvg.getAttribute("transform") || "";
+    const viewBoxTransform = hasViewBox ? `translate(${x + ox},${y + oy}) scale(${sx},${sy}) translate(${-vbX},${-vbY})` : `translate(${x},${y})`;
+    g.setAttribute("transform", `${existingTransform}${existingTransform ? " " : ""}${viewBoxTransform}`);
+    for (const attr of Array.from(nestedSvg.attributes)) {
+      if (["id", "class", "style", "opacity", "display", "visibility", "clip-path", "mask", "filter", "pointer-events"].includes(attr.name)) g.setAttribute(attr.name, attr.value);
+    }
+    for (const child of Array.from(nestedSvg.childNodes)) g.appendChild(child);
+    parent.replaceChild(g, nestedSvg);
+    flattened++;
+  }
+  if (flattened > 0) console.log("[canvas-renderer][pdf] flattened nested SVG viewport(s)", { flattened });
+}
 function inlineComputedStyles(svg) {
   if (typeof document === "undefined") return;
   const wrap = document.createElement("div");
@@ -21393,8 +22356,8 @@ function inlineComputedStyles(svg) {
   document.body.appendChild(wrap);
   try {
     let walk = function(el) {
-      var _a;
-      const tag = (_a = el.tagName) == null ? void 0 : _a.toLowerCase();
+      var _a2;
+      const tag = (_a2 = el.tagName) == null ? void 0 : _a2.toLowerCase();
       if (drawableTags.includes(tag)) {
         const cs = window.getComputedStyle(el);
         const fill = cs.fill;
@@ -21422,7 +22385,7 @@ function inlineComputedStyles(svg) {
 function disambiguateNestedSvgIds(rootSvg) {
   const nestedSvgs = Array.from(rootSvg.querySelectorAll("svg"));
   const toProcess = nestedSvgs.filter((s) => s !== rootSvg);
-  if (toProcess.length < 2) return;
+  if (toProcess.length === 0) return;
   toProcess.forEach((nested, idx) => {
     prefixSvgIds(nested, `n${idx}`);
   });
@@ -21494,9 +22457,9 @@ function getFirstExplicitColorFromSvg(svg) {
     return getGradientStopColorAsHex(svg, gradientId);
   };
   function walk(el) {
-    var _a, _b;
+    var _a2, _b;
     if (fill && stroke) return;
-    const f = el.getAttribute("fill") ?? ((_a = el.style) == null ? void 0 : _a.getPropertyValue("fill"));
+    const f = el.getAttribute("fill") ?? ((_a2 = el.style) == null ? void 0 : _a2.getPropertyValue("fill"));
     const s = el.getAttribute("stroke") ?? ((_b = el.style) == null ? void 0 : _b.getPropertyValue("stroke"));
     if (!fill) {
       if (isRealColor(f)) fill = f;
@@ -21525,16 +22488,16 @@ function isNearWhite(hex) {
   return r >= 250 && g >= 250 && b >= 250;
 }
 function getStopColorRaw(stop) {
-  var _a, _b;
-  return stop.getAttribute("stop-color") ?? ((_b = (_a = stop.style) == null ? void 0 : _a.getPropertyValue("stop-color")) == null ? void 0 : _b.trim()) ?? getInlineStyleValue(stop, "stop-color");
+  var _a2, _b;
+  return stop.getAttribute("stop-color") ?? ((_b = (_a2 = stop.style) == null ? void 0 : _a2.getPropertyValue("stop-color")) == null ? void 0 : _b.trim()) ?? getInlineStyleValue(stop, "stop-color");
 }
 function getGradientStopColorAsHex(svgRoot, gradientId, visited = /* @__PURE__ */ new Set()) {
-  var _a;
+  var _a2;
   if (visited.has(gradientId)) return null;
   visited.add(gradientId);
   const gradient = findGradientInTree(svgRoot, gradientId);
   if (!gradient) return null;
-  const tag = (_a = gradient.tagName) == null ? void 0 : _a.toLowerCase();
+  const tag = (_a2 = gradient.tagName) == null ? void 0 : _a2.toLowerCase();
   if (tag !== "lineargradient" && tag !== "radialgradient") return null;
   const stops = Array.from(gradient.querySelectorAll("stop"));
   if (stops.length > 0) {
@@ -21590,10 +22553,10 @@ async function convertTextDecorationsToLines(svg) {
     else el.removeAttribute("style");
   };
   const resolveInheritedSvgValue = (el, attr, styleProp = attr) => {
-    var _a, _b;
+    var _a2, _b;
     let current = el;
     while (current) {
-      const attrValue = (_a = current.getAttribute(attr)) == null ? void 0 : _a.trim();
+      const attrValue = (_a2 = current.getAttribute(attr)) == null ? void 0 : _a2.trim();
       if (attrValue) return attrValue;
       const styleValue = (_b = getInlineStyleValue(current, styleProp)) == null ? void 0 : _b.trim();
       if (styleValue) return styleValue;
@@ -21773,14 +22736,14 @@ async function convertSvgTextDecorationsToLinesString(svgStr) {
   }
 }
 async function rasterizeShadowMarkers(svg) {
-  var _a, _b, _c, _d, _e, _f;
+  var _a2, _b, _c, _d, _e, _f;
   if (typeof window === "undefined" || typeof document === "undefined") return;
   const markers = Array.from(svg.querySelectorAll("g.__pdShadowRaster"));
   if (markers.length === 0) return;
   const SVG_NS = "http://www.w3.org/2000/svg";
   const XLINK_NS = "http://www.w3.org/1999/xlink";
   try {
-    if ((_a = document.fonts) == null ? void 0 : _a.ready) await document.fonts.ready;
+    if ((_a2 = document.fonts) == null ? void 0 : _a2.ready) await document.fonts.ready;
   } catch {
   }
   const fontFaceCss = await collectInlinedFontFaceCss();
@@ -22014,7 +22977,7 @@ function restoreSourceFontsForShadowRaster(markup) {
 async function prepareLiveCanvasSvgForPdf(rawSvg, pageWidth, pageHeight, pageKey, options) {
   try {
     const parser = new DOMParser();
-    const processedSvg = inlineNestedSvgImageDataUris(rawSvg, parser);
+    const processedSvg = await inlineNestedSvgImageDataUris(rawSvg, parser);
     const doc = parser.parseFromString(processedSvg, "image/svg+xml");
     if (doc.querySelector("parsererror")) return null;
     const svg = doc.documentElement;
@@ -22028,6 +22991,7 @@ async function prepareLiveCanvasSvgForPdf(rawSvg, pageWidth, pageHeight, pageKey
     svg.setAttribute("viewBox", `0 0 ${pageWidth} ${pageHeight}`);
     sanitizeSvgTreeForPdf(svg);
     normalizeSvgViewBoxOrigin(svg);
+    flattenNestedSvgViewports(svg);
     disambiguateNestedSvgIds(svg);
     expandSvgUseElements(svg);
     const svgToDraw = normalizeSvgExplicitColors(svg);
@@ -22041,7 +23005,7 @@ async function prepareLiveCanvasSvgForPdf(rawSvg, pageWidth, pageHeight, pageKey
     if (options == null ? void 0 : options.stripPageBackground) stripRootPageBackgroundFromSvg(svgToDraw);
     sanitizeSvgTreeForPdf(svgToDraw);
     try {
-      const { bakeTextAnchorPositionsFromLiveSvg, logTextMeasurementDiagnostic } = await import("./vectorPdfExport-CTPOHXtQ.js");
+      const { bakeTextAnchorPositionsFromLiveSvg, logTextMeasurementDiagnostic } = await import("./vectorPdfExport-D46sZGKA.js");
       try {
         await logTextMeasurementDiagnostic(svgToDraw);
       } catch {
@@ -22057,8 +23021,8 @@ async function prepareLiveCanvasSvgForPdf(rawSvg, pageWidth, pageHeight, pageKey
   }
 }
 function drawPageBackground(pdf, pageIndex, pageWidth, pageHeight, backgroundColor, backgroundGradient) {
-  var _a, _b;
-  if (backgroundGradient && ((_a = backgroundGradient.stops) == null ? void 0 : _a.length) >= 2) {
+  var _a2, _b;
+  if (backgroundGradient && ((_a2 = backgroundGradient.stops) == null ? void 0 : _a2.length) >= 2) {
     const grad = backgroundGradient;
     const colorStops = grad.stops.map((s) => {
       const c = parseColor(s.color);
@@ -22125,7 +23089,7 @@ function drawPageBackground(pdf, pageIndex, pageWidth, pageHeight, backgroundCol
   }
 }
 async function assemblePdfFromSvgs(svgResults, options = {}) {
-  var _a, _b;
+  var _a2, _b;
   if (svgResults.length === 0) throw new Error("No pages to export");
   const { title, stripPageBackground } = options;
   const firstPage = svgResults[0];
@@ -22141,9 +23105,8 @@ async function assemblePdfFromSvgs(svgResults, options = {}) {
   }
   const pdf = new jsPDF({
     orientation,
-    unit: "px",
+    unit: "pt",
     format: [firstPage.width, firstPage.height],
-    hotfixes: ["px_scaling"],
     compress: true
   });
   if (title) pdf.setProperties({ title, creator: "Pixldocs" });
@@ -22159,7 +23122,7 @@ async function assemblePdfFromSvgs(svgResults, options = {}) {
       const pageOrientation = page.width > page.height ? "landscape" : "portrait";
       pdf.addPage([page.width, page.height], pageOrientation);
     }
-    const hasGradient = !!((_b = (_a = page.backgroundGradient) == null ? void 0 : _a.stops) == null ? void 0 : _b.length);
+    const hasGradient = !!((_b = (_a2 = page.backgroundGradient) == null ? void 0 : _a2.stops) == null ? void 0 : _b.length);
     drawPageBackground(pdf, i, page.width, page.height, page.backgroundColor, page.backgroundGradient);
     const shouldStripBg = stripPageBackground ?? hasGradient;
     const textMode = options.textMode ?? (options.outlineText === true ? "pixel-perfect" : "selectable");
@@ -22441,4 +23404,4 @@ export {
   buildTeaserBlurFlatKeys as y,
   collectFontDescriptorsFromConfig as z
 };
-//# sourceMappingURL=index-DxL--cfL.js.map
+//# sourceMappingURL=index-BpViFQMO.js.map