@pixldocs/canvas-renderer 0.5.225 → 0.5.226

package/dist/{index-6nrov1rx.cjs → index-CXOoVCq1.cjs}

@@ -454,6 +454,148 @@ function fallbackEstimateHeight(element) {
 function clearMeasurementCache() {
   heightCache.clear();
 }
+function computeAutoShrinkFontSize(element) {
+  const baseFontSize = element.fontSize || 16;
+  if (element.overflowPolicy !== "auto-shrink") return baseFontSize;
+  const text = element.text || element.content || "";
+  if (!text) return baseFontSize;
+  const width = element.width || 200;
+  const height = element.height;
+  if (!height) return baseFontSize;
+  let fontSize = baseFontSize;
+  try {
+    while (fontSize > 1) {
+      const testTb = new fabric__namespace.Textbox(text, {
+        width,
+        fontSize,
+        fontFamily: element.fontFamily || "Open Sans",
+        fontWeight: element.fontWeight || 400,
+        fontStyle: element.fontStyle || "normal",
+        lineHeight: element.lineHeight || 1.2,
+        charSpacing: element.charSpacing || 0,
+        splitByGrapheme: false
+      });
+      testTb.initDimensions();
+      const textHeight = testTb.height || 0;
+      const fitsHeight = textHeight <= height;
+      const lineWidths = testTb.__lineWidths;
+      const maxLineWidth = lineWidths && lineWidths.length > 0 ? Math.max(...lineWidths) : 0;
+      const fitsWidth = maxLineWidth <= width + 1;
+      if (fitsHeight && fitsWidth) break;
+      fontSize--;
+    }
+  } catch (e) {
+    console.warn("[autoShrink] Failed to compute shrunk font size:", e);
+    return baseFontSize;
+  }
+  return fontSize;
+}
+function measureTextGlyphHeightForStackHug(el) {
+  const text = el.text || " ";
+  const width = Math.max(1, typeof el.width === "number" ? el.width : 200);
+  let fontSize = el.fontSize || 16;
+  const lineHeight = el.lineHeight || 1.2;
+  const charSpacing = el.charSpacing || 0;
+  const fontFamily = el.fontFamily || "Open Sans";
+  const fontWeight = el.fontWeight || 400;
+  const fontStyle = el.fontStyle || "normal";
+  const isAutoShrink = el.overflowPolicy === "auto-shrink";
+  const splitByGrapheme = isAutoShrink ? false : el.splitByGrapheme ?? el.wordWrap === "break-word";
+  if (isAutoShrink) {
+    const minBoxH = Math.max(0, Number(el.minBoxHeight) || 0);
+    const heightBound = Math.max(typeof el.height === "number" ? el.height : 0, minBoxH);
+    while (fontSize > 1) {
+      const testTb = new fabric__namespace.Textbox(text, {
+        width,
+        fontSize,
+        fontFamily,
+        fontWeight,
+        fontStyle,
+        lineHeight,
+        charSpacing,
+        splitByGrapheme: false
+      });
+      testTb.initDimensions();
+      const textHeight = testTb.height || 0;
+      const lineWidths = getCanvasMeasuredTextboxLineWidths(testTb);
+      const maxLineWidth = lineWidths.length > 0 ? Math.max(...lineWidths) : 0;
+      if ((heightBound <= 0 || textHeight <= heightBound) && maxLineWidth <= width + 1) break;
+      fontSize--;
+    }
+  }
+  const textbox = new fabric__namespace.Textbox(text, {
+    width,
+    fontSize,
+    fontFamily,
+    fontWeight,
+    fontStyle,
+    lineHeight,
+    charSpacing,
+    splitByGrapheme
+  });
+  textbox.initDimensions();
+  return Math.max(1, (textbox.height || 20) * (el.scaleY || 1));
+}
+function getStackChildLayoutSize(parent, child, pageChildren, options) {
+  const b = getNodeBounds(child, pageChildren);
+  if (!parent.hugContent) return { width: b.width, height: b.height };
+  if (!isElement(child)) return { width: b.width, height: b.height };
+  const el = child;
+  if (el.type !== "text") return { width: b.width, height: b.height };
+  const isHorizontal = parent.layoutMode === "horizontal-stack";
+  if (isHorizontal) {
+    try {
+      const isAutoShrink = el.overflowPolicy === "auto-shrink";
+      const effectiveFontSize = isAutoShrink ? computeAutoShrinkFontSize(el) : el.fontSize || 16;
+      const probeWidth = isAutoShrink && typeof el.width === "number" ? el.width : 1e4;
+      const probe = new fabric__namespace.Textbox(el.text || " ", {
+        width: probeWidth,
+        fontSize: effectiveFontSize,
+        fontFamily: el.fontFamily || "Open Sans",
+        fontWeight: el.fontWeight || 400,
+        fontStyle: el.fontStyle || "normal",
+        lineHeight: el.lineHeight || 1.2,
+        charSpacing: el.charSpacing || 0,
+        splitByGrapheme: el.splitByGrapheme ?? el.wordWrap === "break-word"
+      });
+      probe.initDimensions();
+      const lineWidths = getCanvasMeasuredTextboxLineWidths(probe);
+      const maxLine = lineWidths.length > 0 ? Math.max(...lineWidths) : typeof el.width === "number" ? el.width : b.width;
+      const measuredW = Math.ceil(maxLine) + 2;
+      const w = Math.max(1, measuredW * (el.scaleX || 1));
+      return { width: w, height: b.height };
+    } catch {
+      return { width: b.width, height: b.height };
+    }
+  }
+  try {
+    const measuredH = measureTextGlyphHeightForStackHug(el);
+    const h = Math.max(1, measuredH);
+    return { width: b.width, height: h };
+  } catch {
+    return { width: b.width, height: b.height };
+  }
+}
+function getVerticalHugTextAdjust(parent, child) {
+  if (!parent.hugContent) return null;
+  if (parent.layoutMode !== "vertical-stack" && parent.layoutMode !== "stack") return null;
+  if (!isElement(child)) return null;
+  const el = child;
+  if (el.type !== "text") return null;
+  try {
+    const glyphHeight = measureTextGlyphHeightForStackHug(el);
+    const minBoxHeight = Math.max(0, Number(el.minBoxHeight) || 0);
+    const boxHeight = Math.max(typeof el.height === "number" ? el.height : glyphHeight, minBoxHeight);
+    const vAlign = el.verticalAlign ?? "top";
+    const extra = Math.max(0, boxHeight - glyphHeight);
+    let topOffset = 0;
+    if (vAlign === "middle" || vAlign === "center") topOffset = extra / 2;
+    else if (vAlign === "bottom") topOffset = extra;
+    return { topOffset, glyphHeight };
+  } catch {
+    return null;
+  }
+}
 function simpleWidth(node) {
   if (isElement(node)) {
     const w = node.width;
@@ -494,23 +636,33 @@ function resolveStackGroupEffectivePositions(group, pageChildren, options) {
   const out = /* @__PURE__ */ new Map();
   const sizes = /* @__PURE__ */ new Map();
   for (const c of kids) {
-    const b = getNodeBounds(c, pageChildren);
-    sizes.set(c.id, { width: b.width, height: b.height });
+    sizes.set(c.id, getStackChildLayoutSize(group, c, pageChildren));
   }
   if (isVertical) {
     let prevBottom = padTop;
     let firstSeen = false;
+    const placedIds = [];
     for (let i = 0; i < kids.length; i++) {
       const child = kids[i];
       const storedTop = getNodeTop(child);
       const storedLeft = getNodeLeft(child);
       const mTop = child.marginTop ?? 0;
       const mLeft = child.marginLeft ?? 0;
-      const effectiveTop = !firstSeen ? padTop + storedTop + mTop : prevBottom + gap + storedTop + mTop;
+      const hugAdjust = getVerticalHugTextAdjust(group, child);
+      const hugTopOffset = hugAdjust ? hugAdjust.topOffset : 0;
+      const visualTop = !firstSeen ? padTop + storedTop + mTop : prevBottom + gap + storedTop + mTop;
+      const effectiveTop = firstSeen ? visualTop : visualTop - hugTopOffset;
+      if (firstSeen && hugTopOffset > 0 && placedIds.length > 0) {
+        for (const placedId of placedIds) {
+          const placed = out.get(placedId);
+          if (placed) out.set(placedId, { ...placed, top: placed.top + hugTopOffset });
+        }
+      }
       firstSeen = true;
       out.set(child.id, { top: effectiveTop, left: padLeft + storedLeft + mLeft });
-      const h = sizes.get(child.id).height;
-      prevBottom = effectiveTop + h + (child.marginBottom ?? 0);
+      const h = hugAdjust ? hugAdjust.glyphHeight : sizes.get(child.id).height;
+      prevBottom = effectiveTop + hugTopOffset + h + (child.marginBottom ?? 0);
+      placedIds.push(child.id);
     }
   } else {
     let prevRight = padLeft;
@@ -531,7 +683,20 @@ function resolveStackGroupEffectivePositions(group, pageChildren, options) {
   const containerW = typeof group.width === "number" ? group.width : void 0;
   const containerH = typeof group.height === "number" ? group.height : void 0;
   const mainContainer = isVertical ? containerH : containerW;
-  const crossContainer = isVertical ? containerW : containerH;
+  let crossContainer = isVertical ? containerW : containerH;
+  if (kids.length > 0) {
+    let maxCross = 0;
+    for (const c of kids) {
+      const sz = sizes.get(c.id);
+      if (!sz) continue;
+      const cross = isVertical ? sz.width : sz.height;
+      if (cross > maxCross) maxCross = cross;
+    }
+    const crossPad0 = isVertical ? padLeft : padTop;
+    const crossPadEnd = isVertical ? padRight : padBottom;
+    const computed = maxCross + crossPad0 + crossPadEnd;
+    crossContainer = crossContainer != null ? Math.max(crossContainer, computed) : computed;
+  }
   if (align !== "start" && crossContainer != null && kids.length > 0) {
     const crossPad0 = isVertical ? padLeft : padTop;
     const crossPadEnd = isVertical ? padRight : padBottom;
@@ -609,7 +774,8 @@ function resolveStackGroupEffectivePositions(group, pageChildren, options) {
         if (!pos) continue;
         const startMain = cursor + marginStart;
         if (isVertical) {
-          out.set(child.id, { top: startMain, left: pos.left });
+          const hugAdjust = getVerticalHugTextAdjust(group, child);
+          out.set(child.id, { top: startMain - ((hugAdjust == null ? void 0 : hugAdjust.topOffset) ?? 0), left: pos.left });
         } else {
           out.set(child.id, { top: pos.top, left: startMain });
         }
@@ -631,13 +797,16 @@ function groupBoundsFromChildren(group, pageChildren, options) {
   const positions = isStack ? resolveStackGroupEffectivePositions(group, pageChildren) : null;
   let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
   for (const child of kids) {
-    const b = getNodeBounds(child, pageChildren);
+    const sz = isStack ? getStackChildLayoutSize(group, child, pageChildren) : (() => {
+      const b = getNodeBounds(child, pageChildren);
+      return { width: b.width, height: b.height };
+    })();
     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);
-    maxX = Math.max(maxX, cl + b.width);
-    maxY = Math.max(maxY, ct + b.height);
+    maxX = Math.max(maxX, cl + sz.width);
+    maxY = Math.max(maxY, ct + sz.height);
   }
   if (isStack) {
     const padRight = group.paddingRight ?? 0;
@@ -1058,6 +1227,7 @@ const useEditorStore = zustand.create((set, get) => ({
   showDynamicLabels: false,
   showSections: false,
   hoveredGroupId: null,
+  revealedLayerId: null,
   history: [cloneCanvas(initialCanvas)],
   historyIndex: 0,
   lastCommittedSignature: canvasSignature(initialCanvas),
@@ -1597,7 +1767,16 @@ const useEditorStore = zustand.create((set, get) => ({
     let nextChildren = currentPage.children;
     const newNodes = [];
     const duplicateAtPageLevel = [];
-    for (const id of ids) {
+    const idSet = new Set(ids);
+    const filteredIds = ids.filter((id) => {
+      let p = findParentGroup(currentPage.children, id);
+      while (p) {
+        if (idSet.has(p.id)) return false;
+        p = findParentGroup(currentPage.children, p.id);
+      }
+      return true;
+    });
+    for (const id of filteredIds) {
       const node = findNodeById(nextChildren, id);
       if (!node) continue;
       const parent = findParentGroup(nextChildren, id);
@@ -1614,19 +1793,9 @@ const useEditorStore = zustand.create((set, get) => ({
     }
     const pageLevelIds = new Set(duplicateAtPageLevel);
     if (pageLevelIds.size > 0) {
-      const PAGE_MARGIN = 48;
-      const PAGE_GAP = 16;
-      let maxBottom = PAGE_MARGIN;
-      for (const node of currentPage.children) {
-        const b = getNodeBounds(node, currentPage.children);
-        if (b.bottom > maxBottom) maxBottom = b.bottom;
-      }
-      const pageLevelClones = newNodes.filter((n) => pageLevelIds.has(n.id));
-      const bbox = getBoundingBoxOfRoots(pageLevelClones);
-      const shiftX = PAGE_MARGIN - bbox.left;
-      const shiftY = maxBottom + PAGE_GAP - bbox.top;
+      const DUPLICATE_NUDGE = 16;
       nextChildren = nextChildren.map(
-        (node) => pageLevelIds.has(node.id) ? shiftNodeBy(node, shiftX, shiftY) : node
+        (node) => pageLevelIds.has(node.id) ? shiftNodeBy(node, DUPLICATE_NUDGE, DUPLICATE_NUDGE) : node
       );
     }
     let nextCanvas = updateCurrentPageChildren(state.canvas, () => nextChildren);
@@ -2043,12 +2212,19 @@ const useEditorStore = zustand.create((set, get) => ({
       if (firstNodeIndex >= 0) {
         insertIndex = firstNodeIndex;
       }
+    } else if (!commonParent && topLevelIds.length > 0) {
+      const firstNodeIndex = currentPage.children.findIndex((child) => child.id === topLevelIds[0]);
+      if (firstNodeIndex >= 0) {
+        insertIndex = firstNodeIndex;
+      }
     }
-    const pageChildrenForBounds = currentPage.children;
+    const orderSource = commonParent ? commonParent.children : currentPage.children;
+    const orderIndex = /* @__PURE__ */ new Map();
+    orderSource.forEach((n, i) => orderIndex.set(n.id, i));
     nodesToGroup.sort((a, b) => {
-      const aTop = getAbsoluteBounds(a, pageChildrenForBounds).top ?? 0;
-      const bTop = getAbsoluteBounds(b, pageChildrenForBounds).top ?? 0;
-      return aTop - bTop;
+      const ai = orderIndex.has(a.id) ? orderIndex.get(a.id) : Number.MAX_SAFE_INTEGER;
+      const bi = orderIndex.has(b.id) ? orderIndex.get(b.id) : Number.MAX_SAFE_INTEGER;
+      return ai - bi;
     });
     const pageChildren = currentPage.children;
     let groupLeft = Infinity, groupTop = Infinity;
@@ -2139,8 +2315,7 @@ const useEditorStore = zustand.create((set, get) => ({
       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);
+    const promotionOrder = group.children.map((_, i) => i);
     for (let slot = 0; slot < promotionOrder.length; slot++) {
       const i = promotionOrder[slot];
       const child = group.children[i];
@@ -2184,6 +2359,18 @@ const useEditorStore = zustand.create((set, get) => ({
     }
     return { collapsedGroups: newCollapsedSet };
   }),
+  revealLayerNode: (id) => set((state) => {
+    if (!id) return { revealedLayerId: null };
+    const currentPage = getCurrentPageFromCanvas(state.canvas);
+    const next = new Set(state.collapsedGroups);
+    let parent = findParentGroup(currentPage.children, id);
+    let guard = 0;
+    while (parent && guard++ < 32) {
+      next.delete(parent.id);
+      parent = findParentGroup(currentPage.children, parent.id);
+    }
+    return { collapsedGroups: next, revealedLayerId: id };
+  }),
   // Convenience aliases
   groupElements: (ids, name) => get().groupNodes(ids, name),
   ungroupElements: (groupId) => get().ungroupNodes(groupId),
@@ -2630,7 +2817,7 @@ const useEditorStore = zustand.create((set, get) => ({
       boundFormDefId: config.boundFormDefId,
       boundFormDefName: config.boundFormDefName,
       themeConfig: config.themeConfig ?? void 0,
-      pdfTextMode: config.pdfTextMode ?? "selectable"
+      pdfTextMode: config.pdfTextMode ?? "auto"
     };
     const committed = commitFromState(state, nextCanvas);
     const out = {
@@ -4236,6 +4423,9 @@ async function loadSvgAsGroup(url) {
     obj.fill = "#000";
     obj.stroke = null;
     obj.strokeWidth = 0;
+    obj.objectCaching = false;
+    obj.statefullCache = false;
+    obj.noScaleCache = true;
   }
   const group = new fabric__namespace.Group(objects, {
     originX: "center",
@@ -4243,8 +4433,14 @@ async function loadSvgAsGroup(url) {
     selectable: false,
     evented: false,
     hasControls: false,
-    hasBorders: false
+    hasBorders: false,
+    // Do NOT cache the mask group — Fabric would otherwise bake it to a
+    // bitmap at the group's natural size, so the clipPath edges look soft
+    // / pixelated whenever the host image is scaled up on the canvas.
+    objectCaching: false
   });
+  group.statefullCache = false;
+  group.noScaleCache = true;
   const viewBoxW = Number(options.width) || group.width || 1;
   const viewBoxH = Number(options.height) || group.height || 1;
   return { group, viewBoxW, viewBoxH };
@@ -4262,8 +4458,18 @@ function fitMaskGroupToFrame(maskGroup, frameW, frameH) {
     selectable: false,
     evented: false,
     hasControls: false,
-    hasBorders: false
+    hasBorders: false,
+    objectCaching: false
   });
+  const stack = [maskGroup];
+  while (stack.length) {
+    const node = stack.pop();
+    node.objectCaching = false;
+    node.statefullCache = false;
+    node.noScaleCache = true;
+    const kids = node._objects;
+    if (kids && kids.length) stack.push(...kids);
+  }
   maskGroup.absolutePositioned = false;
   maskGroup.excludeFromExport = true;
   maskGroup.inverted = false;
@@ -4386,7 +4592,7 @@ async function buildLuminanceAlphaCanvas(svgUrl, frameW, frameH) {
     const b = px[i + 2];
     const a = px[i + 3];
     const lum = 0.2126 * r + 0.7152 * g + 0.0722 * b;
-    const alpha = lum / 255 * a;
+    const alpha = (255 - lum) / 255 * a;
     px[i] = 255;
     px[i + 1] = 255;
     px[i + 2] = 255;
@@ -5950,10 +6156,6 @@ const shouldShowOriginalTextBounds = () => {
     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) {
@@ -6146,6 +6348,79 @@ function applyTextPathControls(textbox) {
   obj.controls = { ...defaultControls };
   const halfWOf = (t) => (t.width || 0) / 2;
   const halfHOf = (t) => (t.height || 0) / 2;
+  {
+    const cornerLayout = {
+      tl: { sx: -1, sy: -1 },
+      tr: { sx: 1, sy: -1 },
+      br: { sx: 1, sy: 1 },
+      bl: { sx: -1, sy: 1 },
+      mt: { sx: 0, sy: -1 },
+      mb: { sx: 0, sy: 1 },
+      ml: { sx: -1, sy: 0 },
+      mr: { sx: 1, sy: 0 }
+    };
+    for (const key of Object.keys(cornerLayout)) {
+      const existing = obj.controls[key];
+      if (!existing) continue;
+      const { sx, sy } = cornerLayout[key];
+      const customPosition = (_d2, finalMatrix, target) => {
+        const t = target;
+        const bounds = getTextPathHitBounds(t);
+        if (!bounds) {
+          return existing.positionHandler.call(existing, _d2, finalMatrix, target);
+        }
+        const cx = (bounds.minX + bounds.maxX) / 2;
+        const cy = (bounds.minY + bounds.maxY) / 2;
+        const x = sx < 0 ? bounds.minX : sx > 0 ? bounds.maxX : cx;
+        const y = sy < 0 ? bounds.minY : sy > 0 ? bounds.maxY : cy;
+        return scaleLocalToScreen(t, new fabric__namespace.Point(x, y)).transform(finalMatrix);
+      };
+      obj.controls[key] = new fabric__namespace.Control({
+        x: existing.x,
+        y: existing.y,
+        offsetX: existing.offsetX,
+        offsetY: existing.offsetY,
+        cursorStyle: existing.cursorStyle,
+        cursorStyleHandler: existing.cursorStyleHandler,
+        actionName: existing.actionName,
+        actionHandler: existing.actionHandler,
+        mouseDownHandler: existing.mouseDownHandler,
+        mouseUpHandler: existing.mouseUpHandler,
+        getActionName: existing.getActionName,
+        render: existing.render,
+        sizeX: existing.sizeX,
+        sizeY: existing.sizeY,
+        touchSizeX: existing.touchSizeX,
+        touchSizeY: existing.touchSizeY,
+        withConnection: existing.withConnection,
+        positionHandler: customPosition
+      });
+    }
+    const mtrExisting = obj.controls.mtr;
+    if (mtrExisting) {
+      const customMtrPosition = (_d2, finalMatrix, target) => {
+        const t = target;
+        const bounds = getTextPathHitBounds(t);
+        if (!bounds) return mtrExisting.positionHandler.call(mtrExisting, _d2, finalMatrix, target);
+        const cx = (bounds.minX + bounds.maxX) / 2;
+        const offset = mtrExisting.offsetY ?? -40;
+        return scaleLocalToScreen(t, new fabric__namespace.Point(cx, bounds.minY)).transform(finalMatrix).add(new fabric__namespace.Point(0, offset));
+      };
+      obj.controls.mtr = new fabric__namespace.Control({
+        x: mtrExisting.x,
+        y: mtrExisting.y,
+        offsetX: mtrExisting.offsetX,
+        offsetY: mtrExisting.offsetY,
+        cursorStyle: mtrExisting.cursorStyle,
+        cursorStyleHandler: mtrExisting.cursorStyleHandler,
+        actionName: mtrExisting.actionName,
+        actionHandler: mtrExisting.actionHandler,
+        render: mtrExisting.render,
+        withConnection: mtrExisting.withConnection,
+        positionHandler: customMtrPosition
+      });
+    }
+  }
   const renderPivot = (ctx, left, top) => {
     ctx.save();
     ctx.translate(left, top);
@@ -6767,10 +7042,11 @@ if (typeof TextboxProto._renderControls === "function" && !TextboxProto.__pixldo
     if (!hostCanvas) return;
     const hoverBounds = getTextPathHitBounds(this);
     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)) {
+    const isDirectlyActive = active === this;
+    if (hoverBounds && (this.__pdTextPathHovered || isDirectlyActive)) {
       drawTextPathBounds(ctx, this, hoverBounds, hostCanvas);
     }
+    if (!isDirectlyActive) return;
     const resolved = resolveTextPath(this.textPath, this.width || 0, this.fontSize || 16);
     const path = resolved ? measurePath(resolved.d) : null;
     if (!path) return;
@@ -6884,13 +7160,6 @@ if (typeof TextboxProto._renderControls === "function" && !TextboxProto.__pixldo
       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);
@@ -7001,26 +7270,7 @@ if (GroupProto && typeof GroupProto._renderControls === "function" && !GroupProt
     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;
-      }
-    }
+    GroupProto.__pixldocsOrigRenderControls.call(this, ctx, styleOverride, childrenOverride);
     if (!host || !isActiveOrInActive) return;
     const drawForDescendants = (parent) => {
       const kids = (parent == null ? void 0 : parent._objects) || [];
@@ -7045,17 +7295,12 @@ if (!TextboxProtoHit.__pixldocsOrigGetCoords && typeof TextboxProtoHit.getCoords
     const bounds = getTextPathHitBounds(this);
     if (!bounds) return TextboxProtoHit.__pixldocsOrigGetCoords.call(this);
     const matrix = this.calcTransformMatrix();
-    const coords = [
+    return [
       new fabric__namespace.Point(bounds.minX, bounds.minY),
       new fabric__namespace.Point(bounds.maxX, bounds.minY),
       new fabric__namespace.Point(bounds.maxX, bounds.maxY),
       new fabric__namespace.Point(bounds.minX, bounds.maxY)
     ].map((p) => fabric__namespace.util.transformPoint(p, matrix));
-    if (this.group) {
-      const groupMatrix = this.group.calcTransformMatrix();
-      return coords.map((p) => fabric__namespace.util.transformPoint(p, groupMatrix));
-    }
-    return coords;
   };
 }
 if (!TextboxProtoHit.__pixldocsOrigContainsPoint && typeof TextboxProtoHit.containsPoint === "function") {
@@ -8564,7 +8809,7 @@ function createShape(element) {
   }
 }
 function createText(element) {
-  var _a2, _b, _c;
+  var _a2, _b, _c, _d, _e;
   const overflowPolicy = element.overflowPolicy || "grow-and-push";
   let text = element.text || "Text";
   let fontSize = element.fontSize || 16;
@@ -8712,6 +8957,23 @@ function createText(element) {
     objectCaching: false,
     noScaleCache: true,
     splitByGrapheme,
+    // Outline (stroke) support for text — kept in sync with PageCanvas
+    // sync path. Only apply when BOTH a stroke color and positive width are
+    // explicitly set; otherwise fabric defaults stroke to black and renders
+    // an unwanted outline on existing text elements that carry a stray
+    // strokeWidth (e.g. from PDF imports).
+    ...(() => {
+      const s = element.stroke;
+      const w = Number(element.strokeWidth) || 0;
+      const has = !!s && w > 0;
+      return has ? {
+        stroke: s,
+        strokeWidth: w,
+        paintFirst: element.paintFirst || "fill",
+        strokeUniform: true,
+        strokeLineJoin: "round"
+      } : { stroke: void 0, strokeWidth: 0 };
+    })(),
     // When inline markdown formatting is enabled, the displayed text is the
     // PARSED plain text (markdown source lives separately on the element).
     // Allowing canvas inline editing would let the user edit that plain text
@@ -8761,6 +9023,21 @@ function createText(element) {
     });
   } catch {
   }
+  try {
+    const baseCtrls = (_d = (_c = fabric__namespace.Object) == null ? void 0 : _c.prototype) == null ? void 0 : _d.controls;
+    if (baseCtrls) {
+      textbox.controls = {
+        ...textbox.controls || {},
+        tl: baseCtrls.tl,
+        tr: baseCtrls.tr,
+        bl: baseCtrls.bl,
+        br: baseCtrls.br,
+        mt: baseCtrls.mt,
+        mb: baseCtrls.mb
+      };
+    }
+  } 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) {
@@ -8791,7 +9068,7 @@ function createText(element) {
       finalFontSize: fontSize,
       textboxWidth: textbox.width,
       textboxHeight: textbox.height,
-      lineCount: ((_c = textbox.textLines) == null ? void 0 : _c.length) || 0,
+      lineCount: ((_e = textbox.textLines) == null ? void 0 : _e.length) || 0,
       lines: (textbox.textLines || []).map((line) => Array.isArray(line) ? line.join("") : String(line ?? "")),
       widthMetrics: getTextboxWidthFitMetrics(textbox, targetWidth)
     }));
@@ -9350,16 +9627,7 @@ 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);
@@ -9513,31 +9781,12 @@ try {
   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__namespace.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;
+  if (selection.__pixldocsOrigASHasBorders !== void 0) {
+    selection.hasBorders = selection.__pixldocsOrigASHasBorders;
+    delete selection.__pixldocsOrigASHasBorders;
   }
+  selection.hasBorders = true;
+  selection.hasControls = true;
 }
 const PageCanvas = react.forwardRef(
   ({
@@ -9603,7 +9852,46 @@ const PageCanvas = react.forwardRef(
     const [sizeLabel, setSizeLabel] = react.useState(null);
     const [ready, setReady] = react.useState(false);
     const [unlockRequestId, setUnlockRequestId] = react.useState(0);
-    react.useMemo(
+    const applyLogicalGroupSelectionVisualState = react.useCallback((selection, groupId) => {
+      var _a2;
+      selection.__pixldocsGroupSelection = groupId;
+      delete selection.__pixldocsLogicalGroupIds;
+      selection.hasBorders = true;
+      const members = selection.getObjects();
+      for (const prev of suppressGroupMemberBordersRef.current) {
+        if (members.includes(prev)) continue;
+        const origBorders = prev.__pixldocsOrigHasBorders;
+        const origControls = prev.__pixldocsOrigHasControls;
+        const origLockX = prev.__pixldocsOrigLockScalingX;
+        if (origBorders !== void 0) prev.hasBorders = origBorders;
+        if (origControls !== void 0) prev.hasControls = origControls;
+        if (origLockX !== void 0) {
+          prev.lockScalingX = origLockX;
+          prev.lockScalingY = prev.__pixldocsOrigLockScalingY;
+        }
+        delete prev.__pixldocsOrigHasBorders;
+        delete prev.__pixldocsOrigHasControls;
+        delete prev.__pixldocsOrigLockScalingX;
+        delete prev.__pixldocsOrigLockScalingY;
+      }
+      suppressGroupMemberBordersRef.current = members;
+      for (const m of members) {
+        if (m.__pixldocsOrigHasBorders === void 0) m.__pixldocsOrigHasBorders = m.hasBorders;
+        if (m.__pixldocsOrigHasControls === void 0) m.__pixldocsOrigHasControls = m.hasControls;
+        m.hasBorders = false;
+        m.hasControls = false;
+        if (m.__cropGroup || ((_a2 = m._ct) == null ? void 0 : _a2.isCropGroup)) {
+          if (m.__pixldocsOrigLockScalingX === void 0) {
+            m.__pixldocsOrigLockScalingX = m.lockScalingX;
+            m.__pixldocsOrigLockScalingY = m.lockScalingY;
+          }
+          m.lockScalingX = false;
+          m.lockScalingY = false;
+        }
+      }
+      applyWarpAwareSelectionBorders(selection);
+    }, []);
+    const pageBoundsOptions = react.useMemo(
       () => ({ pageContentWidth: canvasWidth, pageContentHeight: canvasHeight }),
       [canvasWidth, canvasHeight]
     );
@@ -9613,7 +9901,9 @@ const PageCanvas = react.forwardRef(
     const setGroupOverlayLiveBoundsRef = react.useRef(setGroupOverlayLiveBounds);
     const skipSelectionClearOnDiscardRef = react.useRef(false);
     const skipActiveSelectionBakeOnClearRef = react.useRef(false);
+    const preserveEditingScopeOnSelectionClearRef = react.useRef(false);
     const preserveActiveSelectionAfterTransformRef = react.useRef(null);
+    const pendingGroupPromotionRef = react.useRef(null);
     const imageReloadRequestSeqRef = react.useRef(/* @__PURE__ */ new Map());
     react.useRef(null);
     const groupBoundsResizingRef = react.useRef(false);
@@ -9633,6 +9923,7 @@ const PageCanvas = react.forwardRef(
     const lastResizeScaleTargetRef = react.useRef(null);
     const preserveSelectionAfterTransformIdRef = react.useRef(null);
     const groupSelectionTransformStartRef = react.useRef(null);
+    const activeSelectionMoveStartRef = react.useRef(null);
     setGroupOverlayLiveBoundsRef.current = setGroupOverlayLiveBounds;
     const {
       selectElements,
@@ -9653,7 +9944,11 @@ const PageCanvas = react.forwardRef(
       if (!currentPage || ids.length === 0) return null;
       for (const id of ids) {
         const node = findNodeById(children, id);
-        if (node && isGroup(node)) return node;
+        if (node && isGroup(node)) {
+          const memberIds2 = new Set(getAllElementIds(node.children ?? []));
+          const pureGroupOnly = ids.every((selectedId) => selectedId === node.id || memberIds2.has(selectedId));
+          return pureGroupOnly ? node : null;
+        }
       }
       const firstId = ids[0];
       const parent = findParentGroup(children, firstId);
@@ -10007,6 +10302,16 @@ const PageCanvas = react.forwardRef(
       fabricCanvas.__isUserTransforming = false;
       fabricCanvas.on("mouse:down", () => {
         groupSelectionTransformStartRef.current = null;
+        activeSelectionMoveStartRef.current = null;
+        const active = fabricCanvas.getActiveObject();
+        if (active instanceof fabric__namespace.ActiveSelection) {
+          const rect = active.getBoundingRect();
+          activeSelectionMoveStartRef.current = {
+            selection: active,
+            selectionLeft: rect.left,
+            selectionTop: rect.top
+          };
+        }
         if (fabricCanvas._currentTransform) {
           fabricCanvas.__isUserTransforming = true;
         }
@@ -10059,8 +10364,21 @@ const PageCanvas = react.forwardRef(
         didTransformRef.current = true;
       });
       const syncSelectionToStore = () => {
-        var _a2, _b, _c, _d, _e, _f, _g;
+        var _a2, _b, _c, _d;
         if (!isActiveRef.current || isRebuildingRef.current || isSyncingSelectionToFabricRef.current || !allowSelection) return;
+        const walkToTopmostGroup = (childId, children, activeEditingGroupId) => {
+          let topmost = null;
+          let currentId = childId;
+          for (let i = 0; i < 32; i++) {
+            const p = findParentGroup(children, currentId);
+            if (!p) break;
+            if (p.backgroundColor) break;
+            if (activeEditingGroupId && p.id === activeEditingGroupId) break;
+            topmost = p;
+            currentId = p.id;
+          }
+          return topmost;
+        };
         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__namespace.Group && active.__docuforgeSectionGroup) {
@@ -10087,8 +10405,8 @@ const PageCanvas = react.forwardRef(
           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));
+          const parent = walkToTopmostGroup(clickedId, children, activeEditingGroupId);
+          const targetIsInCrop = !!(active instanceof fabric__namespace.Group && isCropGroupInCropMode(active) || (active == null ? void 0 : active.group) instanceof fabric__namespace.Group && isCropGroupInCropMode(active.group));
           if (parent && !targetIsInCrop && activeEditingGroupId !== parent.id && !(active && active instanceof fabric__namespace.Group && active.__docuforgeSectionGroup)) {
             const memberIdSet = new Set(getAllElementIds(parent.children ?? []));
             const memberObjs = fabricCanvas.getObjects().filter((o) => {
@@ -10113,9 +10431,75 @@ const PageCanvas = react.forwardRef(
           selectElements(ids, false, false);
           return;
         }
+        if (ids.length > 1 && !(active instanceof fabric__namespace.ActiveSelection && active.__pixldocsGroupSelection)) {
+          const state = useEditorStore.getState();
+          const currentPage2 = (_c = state.canvas.pages) == null ? void 0 : _c.find((p) => p.id === pageId);
+          const children = (currentPage2 == null ? void 0 : currentPage2.children) ?? [];
+          const activeEditingGroupId = fabricCanvas.__activeEditingGroupId ?? null;
+          const involvedGroupIds = /* @__PURE__ */ new Set();
+          const standaloneIds = [];
+          for (const id of ids) {
+            const parent = walkToTopmostGroup(id, children, activeEditingGroupId);
+            if (parent && activeEditingGroupId !== parent.id && !parent.backgroundColor) {
+              involvedGroupIds.add(parent.id);
+            } else {
+              standaloneIds.push(id);
+            }
+          }
+          if (involvedGroupIds.size > 0) {
+            const wantIds = new Set(standaloneIds);
+            const groupedMemberIds = /* @__PURE__ */ new Set();
+            for (const gid of involvedGroupIds) {
+              const g = findNodeById(children, gid);
+              if (g && isGroup(g)) {
+                for (const leafId of getAllElementIds(g.children ?? [])) {
+                  wantIds.add(leafId);
+                  groupedMemberIds.add(leafId);
+                }
+              }
+            }
+            const currentSet = new Set(ids);
+            const needsExpand = wantIds.size !== currentSet.size || [...wantIds].some((id) => !currentSet.has(id));
+            if (needsExpand) {
+              const wantObjs = fabricCanvas.getObjects().filter((o) => {
+                const oid = getObjectId(o);
+                return !!oid && wantIds.has(oid);
+              });
+              if (wantObjs.length >= 2) {
+                isSyncingSelectionToFabricRef.current = true;
+                try {
+                  const sel = new fabric__namespace.ActiveSelection(wantObjs, { canvas: fabricCanvas });
+                  if (involvedGroupIds.size === 1 && standaloneIds.length === 0) {
+                    restoreGroupSelectionVisualState(sel, [...involvedGroupIds][0]);
+                  } else {
+                    markMixedLogicalSelection(sel, [...involvedGroupIds], groupedMemberIds);
+                  }
+                  fabricCanvas.setActiveObject(sel);
+                  fabricCanvas.requestRenderAll();
+                } finally {
+                  isSyncingSelectionToFabricRef.current = false;
+                }
+              }
+            } else {
+              const currentActive = fabricCanvas.getActiveObject();
+              if (currentActive instanceof fabric__namespace.ActiveSelection) {
+                if (involvedGroupIds.size === 1 && standaloneIds.length === 0) {
+                  restoreGroupSelectionVisualState(currentActive, [...involvedGroupIds][0]);
+                } else {
+                  markMixedLogicalSelection(currentActive, [...involvedGroupIds], groupedMemberIds);
+                }
+                currentActive.setCoords();
+                fabricCanvas.requestRenderAll();
+              }
+            }
+            const storeIds = [...involvedGroupIds, ...standaloneIds];
+            selectElements(storeIds, false, false);
+            return;
+          }
+        }
         if (ids.length > 1) {
           const state = useEditorStore.getState();
-          const currentPage2 = (_g = state.canvas.pages) == null ? void 0 : _g.find((p) => p.id === pageId);
+          const currentPage2 = (_d = state.canvas.pages) == null ? void 0 : _d.find((p) => p.id === pageId);
           const children = (currentPage2 == null ? void 0 : currentPage2.children) ?? [];
           const currentSelectedIds = state.canvas.selectedIds ?? [];
           for (const sid of currentSelectedIds) {
@@ -10143,6 +10527,20 @@ const PageCanvas = react.forwardRef(
           } else {
             m.hasBorders = true;
           }
+          const origControls = m.__pixldocsOrigHasControls;
+          if (origControls !== void 0) {
+            m.hasControls = origControls;
+            delete m.__pixldocsOrigHasControls;
+          } else {
+            m.hasControls = true;
+          }
+          const origLockX = m.__pixldocsOrigLockScalingX;
+          if (origLockX !== void 0) {
+            m.lockScalingX = origLockX;
+            m.lockScalingY = m.__pixldocsOrigLockScalingY;
+            delete m.__pixldocsOrigLockScalingX;
+            delete m.__pixldocsOrigLockScalingY;
+          }
         }
         suppressGroupMemberBordersRef.current = [];
       };
@@ -10150,6 +10548,7 @@ const PageCanvas = react.forwardRef(
         var _a2;
         syncSelectionToStore();
         const activeObj = fabricCanvas.getActiveObject();
+        if (activeObj instanceof fabric__namespace.ActiveSelection) applyWarpAwareSelectionBorders(activeObj);
         if (activeObj) applyControlSizeForZoom(fabricCanvas, activeObj);
         if (activeObj && !(activeObj instanceof fabric__namespace.ActiveSelection) && (((_a2 = activeObj._ct) == null ? void 0 : _a2.isCropGroup) || activeObj.__cropGroup)) {
           installCanvaMaskControls(activeObj);
@@ -10158,10 +10557,11 @@ const PageCanvas = react.forwardRef(
       fabricCanvas.on("selection:updated", () => {
         var _a2;
         const next = fabricCanvas.getActiveObject();
-        const isGroupSel = next instanceof fabric__namespace.ActiveSelection && next.__pixldocsGroupSelection;
-        if (!isGroupSel) restoreSuppressedGroupBorders();
+        const isLogicalGroupSel = next instanceof fabric__namespace.ActiveSelection && (next.__pixldocsGroupSelection || Array.isArray(next.__pixldocsLogicalGroupIds));
+        if (!isLogicalGroupSel) restoreSuppressedGroupBorders();
         syncSelectionToStore();
         const activeObj = fabricCanvas.getActiveObject();
+        if (activeObj instanceof fabric__namespace.ActiveSelection) applyWarpAwareSelectionBorders(activeObj);
         if (activeObj) applyControlSizeForZoom(fabricCanvas, activeObj);
         if (activeObj && !(activeObj instanceof fabric__namespace.ActiveSelection) && (((_a2 = activeObj._ct) == null ? void 0 : _a2.isCropGroup) || activeObj.__cropGroup)) {
           installCanvaMaskControls(activeObj);
@@ -10194,24 +10594,83 @@ const PageCanvas = react.forwardRef(
         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;
+        const chain = [];
+        {
+          let currId = childId;
+          for (let i = 0; i < 32; i++) {
+            const p = findParentGroup(childrenNow, currId);
+            if (!p) break;
+            if (p.backgroundColor) break;
+            chain.push(p);
+            currId = p.id;
+          }
+        }
+        if (chain.length === 0) return;
+        const currentScopeId = fabricCanvas.__activeEditingGroupId ?? null;
+        let scopeIdx = chain.length;
+        if (currentScopeId) {
+          const idx = chain.findIndex((g) => g.id === currentScopeId);
+          if (idx >= 0) scopeIdx = idx;
+        }
+        const entryIdx = scopeIdx - 1;
+        if (entryIdx < 0) return;
+        const newScopeGroup = chain[entryIdx];
+        const selectionIdx = entryIdx - 1;
+        const selectInnerObject = (obj) => {
+          delete obj.__pixldocsGroupSelection;
+          delete obj.__pixldocsLogicalGroupIds;
+          obj.set({ selectable: true, evented: true, hasBorders: true, hasControls: true });
+          fabricCanvas.setActiveObject(obj);
+          obj.setCoords();
+        };
+        pendingGroupPromotionRef.current = null;
         isSyncingSelectionToFabricRef.current = true;
         try {
+          skipSelectionClearOnDiscardRef.current = true;
+          preserveEditingScopeOnSelectionClearRef.current = true;
           fabricCanvas.discardActiveObject();
-          fabricCanvas.setActiveObject(hitChild);
-          fabricCanvas.requestRenderAll();
+          skipSelectionClearOnDiscardRef.current = false;
+          preserveEditingScopeOnSelectionClearRef.current = false;
+          restoreSuppressedGroupBorders();
+          fabricCanvas.__activeEditingGroupId = newScopeGroup.id;
+          if (selectionIdx < 0) {
+            selectInnerObject(hitChild);
+            fabricCanvas.requestRenderAll();
+          } else {
+            const subgroup = chain[selectionIdx];
+            const memberIds = new Set(getAllElementIds(subgroup.children ?? []));
+            const memberObjs = fabricCanvas.getObjects().filter((o) => {
+              const oid = getObjectId(o);
+              return !!oid && memberIds.has(oid);
+            });
+            if (memberObjs.length > 1) {
+              const selection = new fabric__namespace.ActiveSelection(memberObjs, { canvas: fabricCanvas });
+              restoreGroupSelectionVisualState(selection, subgroup.id);
+              fabricCanvas.setActiveObject(selection);
+              selection.setCoords();
+            } else if (memberObjs.length === 1) {
+              const only = memberObjs[0];
+              selectInnerObject(only);
+            } else {
+              selectInnerObject(hitChild);
+            }
+            fabricCanvas.requestRenderAll();
+          }
         } finally {
+          skipSelectionClearOnDiscardRef.current = false;
+          preserveEditingScopeOnSelectionClearRef.current = false;
           isSyncingSelectionToFabricRef.current = false;
         }
-        selectElements([childId], false, false);
+        const selectedId = selectionIdx < 0 ? childId : chain[selectionIdx].id;
+        selectElements([selectedId], false, false);
       });
       fabricCanvas.on("selection:cleared", () => {
         if (!isActiveRef.current || isRebuildingRef.current || !allowSelection) return;
         setGroupOverlayLiveBoundsRef.current(null);
         groupBoundsResizingRef.current = false;
-        fabricCanvas.__activeEditingGroupId = null;
+        if (!preserveEditingScopeOnSelectionClearRef.current) {
+          fabricCanvas.__activeEditingGroupId = null;
+        }
         const preservedGroupSelection = preserveActiveSelectionAfterTransformRef.current;
         const shouldRestoreGroupSelection = !!((preservedGroupSelection == null ? void 0 : preservedGroupSelection.groupSelectionId) && (!preservedGroupSelection.expiresAt || preservedGroupSelection.expiresAt > Date.now()));
         if (skipSelectionClearOnDiscardRef.current) {
@@ -10263,6 +10722,14 @@ const PageCanvas = react.forwardRef(
         var _a2, _b;
         const active = target instanceof fabric__namespace.ActiveSelection ? target : fabricCanvas.getActiveObject();
         if (!(active instanceof fabric__namespace.ActiveSelection)) return;
+        if (!activeSelectionMoveStartRef.current || activeSelectionMoveStartRef.current.selection !== active) {
+          const rect2 = active.getBoundingRect();
+          activeSelectionMoveStartRef.current = {
+            selection: active,
+            selectionLeft: rect2.left,
+            selectionTop: rect2.top
+          };
+        }
         const groupId = active.__pixldocsGroupSelection;
         if (!groupId) return;
         if (((_a2 = groupSelectionTransformStartRef.current) == null ? void 0 : _a2.groupId) === groupId && groupSelectionTransformStartRef.current.selection === active) return;
@@ -10281,16 +10748,123 @@ const PageCanvas = react.forwardRef(
         };
       };
       const restoreGroupSelectionVisualState = (selection, groupId) => {
-        selection.__pixldocsGroupSelection = groupId;
-        const members = selection.getObjects();
+        applyLogicalGroupSelectionVisualState(selection, groupId);
+      };
+      const suppressBordersForObjects = (members) => {
+        var _a2;
+        for (const prev of suppressGroupMemberBordersRef.current) {
+          if (members.includes(prev)) continue;
+          const orig = prev.__pixldocsOrigHasBorders;
+          if (orig !== void 0) {
+            prev.hasBorders = orig;
+            delete prev.__pixldocsOrigHasBorders;
+          } else {
+            prev.hasBorders = true;
+          }
+          const origControls = prev.__pixldocsOrigHasControls;
+          if (origControls !== void 0) {
+            prev.hasControls = origControls;
+            delete prev.__pixldocsOrigHasControls;
+          } else {
+            prev.hasControls = true;
+          }
+          const origLockX = prev.__pixldocsOrigLockScalingX;
+          if (origLockX !== void 0) {
+            prev.lockScalingX = origLockX;
+            prev.lockScalingY = prev.__pixldocsOrigLockScalingY;
+            delete prev.__pixldocsOrigLockScalingX;
+            delete prev.__pixldocsOrigLockScalingY;
+          }
+        }
         suppressGroupMemberBordersRef.current = members;
         for (const m of members) {
           if (m.__pixldocsOrigHasBorders === void 0) {
             m.__pixldocsOrigHasBorders = m.hasBorders;
           }
+          if (m.__pixldocsOrigHasControls === void 0) {
+            m.__pixldocsOrigHasControls = m.hasControls;
+          }
           m.hasBorders = false;
+          m.hasControls = false;
+          if (m.__cropGroup || ((_a2 = m._ct) == null ? void 0 : _a2.isCropGroup)) {
+            if (m.__pixldocsOrigLockScalingX === void 0) {
+              m.__pixldocsOrigLockScalingX = m.lockScalingX;
+              m.__pixldocsOrigLockScalingY = m.lockScalingY;
+            }
+            m.lockScalingX = false;
+            m.lockScalingY = false;
+          }
         }
       };
+      const isMultiSelectModifier = (event) => !!((event == null ? void 0 : event.shiftKey) || (event == null ? void 0 : event.metaKey) || (event == null ? void 0 : event.ctrlKey));
+      const pickSelectableObjectAtPointer = (event) => {
+        var _a2;
+        try {
+          const pointer = fabricCanvas.getViewportPoint(event);
+          const objects = fabricCanvas.getObjects();
+          for (let i = objects.length - 1; i >= 0; i--) {
+            const obj = objects[i];
+            const id = getObjectId(obj);
+            if (!id || id === "__background__" || !obj.selectable || !obj.evented || obj.visible === false) continue;
+            const controlHit = (_a2 = obj.findControl) == null ? void 0 : _a2.call(obj, pointer);
+            if (controlHit) continue;
+            if (typeof obj.containsPoint === "function" && obj.containsPoint(pointer)) return obj;
+          }
+        } catch {
+          return null;
+        }
+        return null;
+      };
+      let pendingShiftMultiSelect = null;
+      const applyShiftMultiSelect = (target, event, baselineActive = fabricCanvas.getActiveObject(), baselineObjects = fabricCanvas.getActiveObjects()) => {
+        var _a2, _b, _c;
+        if (!target || !target.selectable) return false;
+        const active = baselineActive;
+        if (!active || ((_a2 = active.getActiveControl) == null ? void 0 : _a2.call(active))) return false;
+        if (active === target && !(active instanceof fabric__namespace.ActiveSelection)) return false;
+        isSyncingSelectionToFabricRef.current = true;
+        try {
+          let nextObjects;
+          if (active instanceof fabric__namespace.ActiveSelection) {
+            const current = baselineObjects.length ? baselineObjects : active.getObjects();
+            nextObjects = current.includes(target) ? current.filter((obj) => obj !== target) : [...current, target];
+          } else {
+            nextObjects = [active, target];
+          }
+          nextObjects = nextObjects.filter((obj, index, arr) => arr.indexOf(obj) === index && fabricCanvas.getObjects().includes(obj));
+          if (nextObjects.length > 1) {
+            const selection = new fabric__namespace.ActiveSelection(nextObjects, { canvas: fabricCanvas });
+            applyWarpAwareSelectionBorders(selection);
+            fabricCanvas.setActiveObject(selection);
+            selection.setCoords();
+            isSyncingSelectionToFabricRef.current = false;
+            syncSelectionToStore();
+          } else if (nextObjects.length === 1) {
+            fabricCanvas.setActiveObject(nextObjects[0]);
+            nextObjects[0].setCoords();
+            const onlyId = getObjectId(nextObjects[0]);
+            if (onlyId) selectElements([onlyId], false, false);
+          }
+          fabricCanvas.requestRenderAll();
+        } finally {
+          requestAnimationFrame(() => {
+            isSyncingSelectionToFabricRef.current = false;
+          });
+        }
+        (_b = event == null ? void 0 : event.preventDefault) == null ? void 0 : _b.call(event);
+        (_c = event == null ? void 0 : event.stopPropagation) == null ? void 0 : _c.call(event);
+        return true;
+      };
+      const markMixedLogicalSelection = (selection, groupIds, groupMemberIds) => {
+        delete selection.__pixldocsGroupSelection;
+        selection.__pixldocsLogicalGroupIds = groupIds;
+        selection.hasBorders = true;
+        const memberObjects = selection.getObjects().filter((obj) => {
+          const id = getObjectId(obj);
+          return !!id && groupMemberIds.has(id);
+        });
+        suppressBordersForObjects(memberObjects);
+      };
       const restorePreservedGroupSelectionSoon = (snapshot = preserveActiveSelectionAfterTransformRef.current) => {
         if (!(snapshot == null ? void 0 : snapshot.groupSelectionId) || snapshot.memberIds.length < 2) return;
         const groupId = snapshot.groupSelectionId;
@@ -10328,7 +10902,7 @@ const PageCanvas = react.forwardRef(
         return !!(((_a2 = o == null ? void 0 : o._ct) == null ? void 0 : _a2.isCropGroup) || (o == null ? void 0 : o.__cropGroup));
       };
       const promoteToCropGroup = (opt) => {
-        var _a2, _b, _c;
+        var _a2, _b, _c, _d, _e, _f;
         const t = opt.target;
         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)) {
@@ -10338,6 +10912,9 @@ const PageCanvas = react.forwardRef(
           }
           return;
         }
+        if (((_d = opt.e) == null ? void 0 : _d.shiftKey) || ((_e = opt.e) == null ? void 0 : _e.metaKey) || ((_f = opt.e) == null ? void 0 : _f.ctrlKey)) {
+          return;
+        }
         if (!t) {
           const pointer = fabricCanvas.getPointer(opt.e);
           const objects = fabricCanvas.getObjects();
@@ -10412,6 +10989,12 @@ const PageCanvas = react.forwardRef(
       }
       fabricCanvas.on("mouse:down", (opt) => {
         var _a2, _b;
+        if (pendingShiftMultiSelect) {
+          const pending = pendingShiftMultiSelect;
+          pendingShiftMultiSelect = null;
+          applyShiftMultiSelect(pending.target, opt.e, pending.active, pending.activeObjects);
+          return;
+        }
         const target = opt.target;
         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) {
@@ -10422,8 +11005,42 @@ const PageCanvas = react.forwardRef(
           fabricCanvas.requestRenderAll();
         }
       });
+      const groupFabricUnionBBox = (g) => {
+        var _a2, _b;
+        const memberIds = new Set(getAllElementIds(g.children ?? []));
+        if (memberIds.size === 0) return null;
+        let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+        let found = false;
+        for (const o of fabricCanvas.getObjects()) {
+          const oid = getObjectId(o);
+          if (!oid || !memberIds.has(oid)) continue;
+          const br = ((_a2 = o.getBoundingRect) == null ? void 0 : _a2.call(o, true, true)) ?? ((_b = o.getBoundingRect) == null ? void 0 : _b.call(o));
+          if (!br) continue;
+          minX = Math.min(minX, br.left);
+          minY = Math.min(minY, br.top);
+          maxX = Math.max(maxX, br.left + br.width);
+          maxY = Math.max(maxY, br.top + br.height);
+          found = true;
+        }
+        if (!found) return null;
+        return { left: minX, top: minY, right: maxX, bottom: maxY };
+      };
+      const pickGroupAtPointer = (px, py, children, activeEditingGroupId) => {
+        let pick = null;
+        for (const node of children) {
+          if (!isGroup(node)) continue;
+          if (node.backgroundColor) continue;
+          if (activeEditingGroupId && node.id === activeEditingGroupId) continue;
+          const b = groupFabricUnionBBox(node);
+          if (!b) continue;
+          if (px < b.left || py < b.top || px > b.right || py > b.bottom) continue;
+          const area = Math.max(1, (b.right - b.left) * (b.bottom - b.top));
+          if (!pick || area < pick.area) pick = { group: node, area };
+        }
+        return pick;
+      };
       fabricCanvas.on("mouse:down:before", (opt) => {
-        var _a2, _b, _c, _d, _e;
+        var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
         if (editLockRef.current) {
           const active = fabricCanvas.getActiveObject();
           if (active && (((_a2 = active._ct) == null ? void 0 : _a2.isCropGroup) || active.__cropGroup)) {
@@ -10439,13 +11056,154 @@ const PageCanvas = react.forwardRef(
           syncLockedRef.current = true;
           lockEdits();
         }
+        const target = opt.target;
+        const targetId = target ? getObjectId(target) : null;
+        const activeEditingGroupId = fabricCanvas.__activeEditingGroupId ?? null;
+        const pageNow = useEditorStore.getState().canvas.pages.find((p) => p.id === pageId);
+        const childrenNow = (pageNow == null ? void 0 : pageNow.children) ?? [];
+        if (isMultiSelectModifier(opt.e)) {
+          const manualTarget = target && !(target instanceof fabric__namespace.ActiveSelection) && targetId && targetId !== "__background__" ? target : pickSelectableObjectAtPointer(opt.e);
+          if (manualTarget) {
+            pendingShiftMultiSelect = {
+              target: manualTarget,
+              active: fabricCanvas.getActiveObject(),
+              activeObjects: fabricCanvas.getActiveObjects().slice()
+            };
+            pendingGroupPromotionRef.current = null;
+            return;
+          }
+        }
+        const findTopmostPromotableGroup = (childId) => {
+          let topmost = null;
+          let currentId = childId;
+          for (let i = 0; i < 32; i++) {
+            const p = findParentGroup(childrenNow, currentId);
+            if (!p) break;
+            if (p.backgroundColor) break;
+            if (activeEditingGroupId && p.id === activeEditingGroupId) break;
+            topmost = p;
+            currentId = p.id;
+          }
+          return topmost;
+        };
+        if (target && targetId && targetId !== "__background__") {
+          const parent = findTopmostPromotableGroup(targetId);
+          const targetIsInCrop = !!(target instanceof fabric__namespace.Group && isCropGroupInCropMode(target) || (target == null ? void 0 : target.group) instanceof fabric__namespace.Group && isCropGroupInCropMode(target.group));
+          const activeNow = fabricCanvas.getActiveObject();
+          const alreadyThisGroup = activeNow instanceof fabric__namespace.ActiveSelection && activeNow.__pixldocsGroupSelection === (parent == null ? void 0 : parent.id);
+          const isMultiSelectKey = !!(((_f = opt.e) == null ? void 0 : _f.shiftKey) || ((_g = opt.e) == null ? void 0 : _g.metaKey) || ((_h = opt.e) == null ? void 0 : _h.ctrlKey));
+          if (parent && !parent.backgroundColor && !targetIsInCrop && activeEditingGroupId !== parent.id && !alreadyThisGroup && !isMultiSelectKey) {
+            const memberIds = new Set(getAllElementIds(parent.children ?? []));
+            const memberObjs = fabricCanvas.getObjects().filter((o) => {
+              const oid = getObjectId(o);
+              return !!oid && memberIds.has(oid);
+            });
+            if (memberObjs.length > 1) {
+              const selection = new fabric__namespace.ActiveSelection(memberObjs, { canvas: fabricCanvas });
+              restoreGroupSelectionVisualState(selection, parent.id);
+              fabricCanvas.setActiveObject(selection);
+              selection.setCoords();
+              fabricCanvas._target = selection;
+              opt.target = selection;
+              pendingGroupPromotionRef.current = { groupId: parent.id, selection };
+            } else if (memberObjs.length === 1) {
+              const only = memberObjs[0];
+              only.__pixldocsGroupSelection = parent.id;
+              fabricCanvas.setActiveObject(only);
+              only.setCoords();
+              fabricCanvas._target = only;
+              opt.target = only;
+              pendingGroupPromotionRef.current = { groupId: parent.id, selection: only };
+            }
+          }
+        } else if (!target || targetId === "__background__") {
+          const isMultiSelectKey = !!(((_i = opt.e) == null ? void 0 : _i.shiftKey) || ((_j = opt.e) == null ? void 0 : _j.metaKey) || ((_k = opt.e) == null ? void 0 : _k.ctrlKey));
+          if (isMultiSelectKey) return;
+          try {
+            const pointer = fabricCanvas.getPointer(opt.e);
+            const px = pointer.x;
+            const py = pointer.y;
+            const pick = pickGroupAtPointer(px, py, childrenNow, activeEditingGroupId);
+            if (pick) {
+              const parent = pick.group;
+              if (activeEditingGroupId !== parent.id) {
+                const memberIds = new Set(getAllElementIds(parent.children ?? []));
+                const memberObjs = fabricCanvas.getObjects().filter((o) => {
+                  const oid = getObjectId(o);
+                  return !!oid && memberIds.has(oid);
+                });
+                if (memberObjs.length > 1) {
+                  const selection = new fabric__namespace.ActiveSelection(memberObjs, { canvas: fabricCanvas });
+                  restoreGroupSelectionVisualState(selection, parent.id);
+                  fabricCanvas.setActiveObject(selection);
+                  selection.setCoords();
+                  fabricCanvas._target = selection;
+                  opt.target = selection;
+                  pendingGroupPromotionRef.current = { groupId: parent.id, selection };
+                } else if (memberObjs.length === 1) {
+                  const only = memberObjs[0];
+                  only.__pixldocsGroupSelection = parent.id;
+                  fabricCanvas.setActiveObject(only);
+                  fabricCanvas._target = only;
+                  opt.target = only;
+                  pendingGroupPromotionRef.current = { groupId: parent.id, selection: only };
+                }
+              }
+            }
+          } catch {
+          }
+        }
         promoteToCropGroup(opt);
       });
       fabricCanvas.on("mouse:move:before", promoteToCropGroup);
+      fabricCanvas.on("after:render", () => {
+        var _a2;
+        try {
+          const active = fabricCanvas.getActiveObject();
+          if (!(active instanceof fabric__namespace.ActiveSelection)) return;
+          const logicalIds = active.__pixldocsLogicalGroupIds;
+          if (!logicalIds || logicalIds.length < 1) return;
+          const pageNow = useEditorStore.getState().canvas.pages.find((p) => p.id === pageId);
+          const childrenNow = (pageNow == null ? void 0 : pageNow.children) ?? [];
+          const ctx = ((_a2 = fabricCanvas.getContext) == null ? void 0 : _a2.call(fabricCanvas)) ?? fabricCanvas.contextContainer;
+          if (!ctx) return;
+          const vt = fabricCanvas.viewportTransform;
+          ctx.save();
+          if (vt) ctx.transform(vt[0], vt[1], vt[2], vt[3], vt[4], vt[5]);
+          ctx.strokeStyle = SELECTION_PRIMARY;
+          ctx.lineWidth = 1.25 / ((vt == null ? void 0 : vt[0]) || 1);
+          ctx.setLineDash([]);
+          for (const gid of logicalIds) {
+            const node = findNodeById(childrenNow, gid);
+            if (!node || !isGroup(node)) continue;
+            const b = groupFabricUnionBBox(node);
+            if (!b) continue;
+            ctx.strokeRect(b.left, b.top, b.right - b.left, b.bottom - b.top);
+          }
+          ctx.restore();
+        } catch {
+        }
+      });
+      fabricCanvas.on("mouse:move", (opt) => {
+        if (fabricCanvas._currentTransform) return;
+        if (editLockRef.current) return;
+        const t = opt.target;
+        const tid = t ? getObjectId(t) : null;
+        if (t && tid && tid !== "__background__") return;
+        try {
+          const pointer = fabricCanvas.getPointer(opt.e);
+          const pageNow = useEditorStore.getState().canvas.pages.find((p) => p.id === pageId);
+          const childrenNow = (pageNow == null ? void 0 : pageNow.children) ?? [];
+          const activeEditingGroupId = fabricCanvas.__activeEditingGroupId ?? null;
+          const pick = pickGroupAtPointer(pointer.x, pointer.y, childrenNow, activeEditingGroupId);
+          fabricCanvas.defaultCursor = pick ? "move" : "default";
+        } catch {
+          fabricCanvas.defaultCursor = "default";
+        }
+      });
       fabricCanvas.on("mouse:down", (ev) => {
         if (fabricCanvas._currentTransform) {
           lockEdits();
-          didTransformRef.current = true;
         }
         const o = fabricCanvas.getActiveObject();
         pendingTextEditOnUpRef.current = null;
@@ -10459,6 +11217,38 @@ const PageCanvas = react.forwardRef(
         setRotationLabel(null);
         setSizeLabel(null);
         dragStarted = false;
+        const pendingPromotion = pendingGroupPromotionRef.current;
+        pendingGroupPromotionRef.current = null;
+        if (pendingPromotion && !didTransformRef.current) {
+          const activeNow = fabricCanvas.getActiveObject();
+          if (activeNow !== pendingPromotion.selection) {
+            isSyncingSelectionToFabricRef.current = true;
+            try {
+              fabricCanvas.setActiveObject(pendingPromotion.selection);
+              pendingPromotion.selection.setCoords();
+              fabricCanvas.requestRenderAll();
+            } finally {
+              requestAnimationFrame(() => {
+                isSyncingSelectionToFabricRef.current = false;
+              });
+            }
+            selectElements([pendingPromotion.groupId], false, false);
+          }
+          try {
+            const sel = pendingPromotion.selection;
+            if (sel instanceof fabric__namespace.ActiveSelection) {
+              restoreGroupSelectionVisualState(sel, pendingPromotion.groupId);
+              sel.hasBorders = true;
+              sel.setCoords();
+              applyWarpAwareSelectionBorders(sel);
+            } else {
+              sel.__pixldocsGroupSelection = pendingPromotion.groupId;
+              sel.setCoords();
+            }
+            fabricCanvas.requestRenderAll();
+          } catch {
+          }
+        }
         const activeObj = fabricCanvas.getActiveObject();
         if (activeObj && (activeObj.__cropGroup || ((_a2 = activeObj._ct) == null ? void 0 : _a2.isCropGroup))) {
           activeObj.__lockScaleDuringCrop = false;
@@ -10500,6 +11290,34 @@ const PageCanvas = react.forwardRef(
         if (!isActiveRef.current) return;
         markTransforming(e.target);
       };
+      const getObjectFrameBoundsInSelection = (selection, obj, frameWidth, frameHeight) => {
+        const w = Math.max(1, frameWidth ?? obj.width ?? 1);
+        const h = Math.max(1, frameHeight ?? obj.height ?? 1);
+        const originX = obj.originX ?? "left";
+        const originY = obj.originY ?? "top";
+        const localLeft = originX === "center" ? -w / 2 : originX === "right" ? -w : 0;
+        const localTop = originY === "center" ? -h / 2 : originY === "bottom" ? -h : 0;
+        const matrix = fabric__namespace.util.multiplyTransformMatrices(
+          selection.calcTransformMatrix(),
+          obj.calcOwnMatrix()
+        );
+        const points = [
+          new fabric__namespace.Point(localLeft, localTop),
+          new fabric__namespace.Point(localLeft + w, localTop),
+          new fabric__namespace.Point(localLeft + w, localTop + h),
+          new fabric__namespace.Point(localLeft, localTop + h)
+        ].map((point) => fabric__namespace.util.transformPoint(point, matrix));
+        const xs = points.map((p) => p.x);
+        const ys = points.map((p) => p.y);
+        const left = Math.min(...xs);
+        const top = Math.min(...ys);
+        return {
+          left,
+          top,
+          width: Math.max(1, Math.max(...xs) - left),
+          height: Math.max(1, Math.max(...ys) - top)
+        };
+      };
       fabricCanvas.on("object:added", (e) => {
         var _a2;
         const obj = e.target;
@@ -10619,11 +11437,18 @@ const PageCanvas = react.forwardRef(
         }
         if (obj instanceof fabric__namespace.Textbox) {
           const sy = obj.scaleY ?? 1;
-          if (Math.abs(sy - 1) > 1e-3) {
+          const sx = obj.scaleX ?? 1;
+          const isUniformCornerScale = Math.abs(sx - sy) < 1e-3 && Math.abs(sx - 1) > 1e-3;
+          if (isUniformCornerScale) {
+            obj.setCoords();
+            obj.dirty = true;
+          } else if (Math.abs(sy - 1) > 1e-3) {
             const center = obj.getCenterPoint();
-            const newMinH = Math.max(0, (obj.height ?? 0) * Math.abs(sy));
+            const newVisualH = (obj.height ?? 0) * Math.abs(sy);
+            const targetScaleY = Math.abs(sx - 1) > 1e-3 ? Math.abs(sx) : 1;
+            const newMinH = Math.max(0, newVisualH / targetScaleY);
             obj.minBoxHeight = newMinH;
-            obj.scaleY = 1;
+            obj.scaleY = targetScaleY;
             try {
               obj.initDimensions();
             } catch {
@@ -10745,7 +11570,7 @@ const PageCanvas = react.forwardRef(
       });
       let cropGroupSaveTimer = null;
       fabricCanvas.on("object:modified", (e) => {
-        var _a2, _b, _c, _d, _e, _f;
+        var _a2, _b, _c, _d, _e, _f, _g;
         try {
           dragStarted = false;
           setGuides([]);
@@ -10966,14 +11791,14 @@ const PageCanvas = react.forwardRef(
           }
           if (active && active instanceof fabric__namespace.Group && !(active instanceof fabric__namespace.ActiveSelection) && getObjectId(active)) {
             const groupId = getObjectId(active);
-            const pageChildren2 = ((_e = useEditorStore.getState().canvas.pages.find((p) => p.id === pageId)) == null ? void 0 : _e.children) ?? [];
+            const pageChildren3 = ((_e = useEditorStore.getState().canvas.pages.find((p) => p.id === pageId)) == null ? void 0 : _e.children) ?? [];
             const w = (active.width ?? 0) * (active.scaleX ?? 1);
             const h = (active.height ?? 0) * (active.scaleY ?? 1);
             const centerX = active.left ?? 0;
             const centerY = active.top ?? 0;
             const groupLeft = active.originX === "center" ? centerX - w / 2 : centerX;
             const groupTop = active.originY === "center" ? centerY - h / 2 : centerY;
-            const storePos = absoluteToStorePosition(groupLeft, groupTop, groupId, pageChildren2);
+            const storePos = absoluteToStorePosition(groupLeft, groupTop, groupId, pageChildren3);
             useEditorStore.getState().updateNode(groupId, { left: storePos.left, top: storePos.top }, { recordHistory: false, skipLayoutRecalc: true });
             commitHistory();
             unlockEditsSoon();
@@ -10988,6 +11813,14 @@ const PageCanvas = react.forwardRef(
           }
           const activeObj = fabricCanvas.getActiveObject();
           let activeObjects = fabricCanvas.getActiveObjects();
+          const activeSelectionMoveStart = activeObj instanceof fabric__namespace.ActiveSelection && ((_f = activeSelectionMoveStartRef.current) == null ? void 0 : _f.selection) === activeObj ? activeSelectionMoveStartRef.current : null;
+          const activeSelectionDelta = activeObj instanceof fabric__namespace.ActiveSelection && activeSelectionMoveStart ? (() => {
+            const rect = activeObj.getBoundingRect();
+            return {
+              x: rect.left - activeSelectionMoveStart.selectionLeft,
+              y: rect.top - activeSelectionMoveStart.selectionTop
+            };
+          })() : null;
           if (activeObjects.length === 0 && modifiedTarget && getObjectId(modifiedTarget)) {
             activeObjects = [modifiedTarget];
           }
@@ -11009,8 +11842,53 @@ const PageCanvas = react.forwardRef(
           const currentPage2 = getCurrentPageStore();
           const selectedElementIds = activeObjects.map((obj) => getObjectId(obj)).filter((id) => !!id && id !== "__background__");
           const anyCropGroup = activeObjects.some((o) => o.__cropGroup);
+          const pageChildren2 = currentPage2.children ?? [];
+          const selectedLogicalGroupIds = (useEditorStore.getState().canvas.selectedIds ?? []).filter((id) => {
+            const node = findNodeById(pageChildren2, id);
+            return !!(node && isGroup(node));
+          });
+          const activeSelectionHadTransform = activeObj instanceof fabric__namespace.ActiveSelection && (Math.abs((activeObj.scaleX ?? 1) - 1) > 0.01 || Math.abs((activeObj.scaleY ?? 1) - 1) > 0.01 || Math.abs((activeObj.angle ?? 0) % 360) > 0.01);
+          if (!anyCropGroup && activeSelectionDelta && !activeSelectionHadTransform && selectedLogicalGroupIds.length > 0) {
+            const selectedStoreIds = useEditorStore.getState().canvas.selectedIds ?? [];
+            const groupMemberIds = /* @__PURE__ */ new Set();
+            selectedLogicalGroupIds.forEach((gid) => {
+              const groupNode = findNodeById(pageChildren2, gid);
+              if (groupNode && isGroup(groupNode)) {
+                getAllElementIds(groupNode.children ?? []).forEach((id) => groupMemberIds.add(id));
+              }
+            });
+            const logicalStandaloneIds = selectedStoreIds.filter((id) => {
+              if (selectedLogicalGroupIds.includes(id)) return false;
+              if (groupMemberIds.has(id)) return false;
+              return !!findNodeById(pageChildren2, id);
+            });
+            if (logicalStandaloneIds.length > 0) {
+              const { updateNode: updateNodeStore, commitHistory: commitHistoryStore } = useEditorStore.getState();
+              [...selectedLogicalGroupIds, ...logicalStandaloneIds].forEach((id) => {
+                const node = findNodeById(pageChildren2, id);
+                if (!node) return;
+                const abs = getAbsoluteBounds(node, pageChildren2, pageBoundsOptions);
+                const nextAbsLeft = abs.left + activeSelectionDelta.x;
+                const nextAbsTop = abs.top + activeSelectionDelta.y;
+                const storePos = absoluteToStorePosition(nextAbsLeft, nextAbsTop, id, pageChildren2);
+                updateNodeStore(id, { left: storePos.left, top: storePos.top }, { recordHistory: false, skipLayoutRecalc: true });
+              });
+              commitHistoryStore();
+              activeObjects.forEach((obj) => {
+                const objId = getObjectId(obj);
+                if (objId && objId !== "__background__") {
+                  justModifiedIdsRef.current.add(objId);
+                  modifiedIdsThisRound.add(objId);
+                }
+              });
+              setTimeout(() => modifiedIdsThisRound.forEach((id) => justModifiedIdsRef.current.delete(id)), 150);
+              activeSelectionMoveStartRef.current = null;
+              groupSelectionTransformStartRef.current = null;
+              unlockEditsSoon();
+              return;
+            }
+          }
           if (selectedElementIds.length > 0 && !anyCropGroup) {
-            const pageChildren2 = currentPage2.children ?? [];
             const firstObj = activeObjects[0];
             const firstId = getObjectId(firstObj);
             const parentGroups = selectedElementIds.map((id) => findParentGroup(pageChildren2, id)).filter((g) => g !== null);
@@ -11105,6 +11983,7 @@ const PageCanvas = react.forwardRef(
               }
             }
           }
+          const pendingCropGroupFrameBakes = [];
           for (const obj of activeObjects) {
             const objId = getObjectId(obj);
             if (!objId || objId === "__background__") continue;
@@ -11158,10 +12037,16 @@ const PageCanvas = react.forwardRef(
             }
             if (obj instanceof fabric__namespace.Group && obj.__cropGroup) {
               const ct = obj.__cropData;
-              const w = (ct == null ? void 0 : ct.frameW) ?? (obj.width ?? 0) * (obj.scaleX ?? 1);
-              const h = (ct == null ? void 0 : ct.frameH) ?? (obj.height ?? 0) * (obj.scaleY ?? 1);
-              absoluteLeft = (absoluteLeft ?? 0) - w / 2;
-              absoluteTop = (absoluteTop ?? 0) - h / 2;
+              if (isActiveSelection && activeObj instanceof fabric__namespace.ActiveSelection) {
+                const frameBounds = getObjectFrameBoundsInSelection(activeObj, obj, ct == null ? void 0 : ct.frameW, ct == null ? void 0 : ct.frameH);
+                absoluteLeft = frameBounds.left;
+                absoluteTop = frameBounds.top;
+              } else {
+                const w = ((ct == null ? void 0 : ct.frameW) ?? obj.width ?? 0) * Math.abs(obj.scaleX ?? 1);
+                const h = ((ct == null ? void 0 : ct.frameH) ?? obj.height ?? 0) * Math.abs(obj.scaleY ?? 1);
+                absoluteLeft = (absoluteLeft ?? 0) - w / 2;
+                absoluteTop = (absoluteTop ?? 0) - h / 2;
+              }
             } else if (obj instanceof fabric__namespace.FabricImage && (obj.originX === "center" || obj.originY === "center")) {
               const w = (obj.width ?? 0) * (obj.scaleX ?? 1);
               const h = (obj.height ?? 0) * (obj.scaleY ?? 1);
@@ -11178,17 +12063,49 @@ const PageCanvas = react.forwardRef(
             if (obj instanceof fabric__namespace.Group && obj.__cropGroup) {
               const ct = obj.__cropData;
               if (ct) {
-                finalWidth = ct.frameW;
-                finalHeight = ct.frameH;
+                const sourceFrameW = Math.max(1, ct.frameW ?? obj.width ?? 1);
+                const sourceFrameH = Math.max(1, ct.frameH ?? obj.height ?? 1);
+                const appliedScaleX = Math.abs(isActiveSelection && activeObj ? activeObj.scaleX ?? 1 : obj.scaleX ?? 1);
+                const appliedScaleY = Math.abs(isActiveSelection && activeObj ? activeObj.scaleY ?? 1 : obj.scaleY ?? 1);
+                finalWidth = Math.max(1, sourceFrameW * appliedScaleX);
+                finalHeight = Math.max(1, sourceFrameH * appliedScaleY);
                 finalScaleX = 1;
                 finalScaleY = 1;
-                obj.set({ scaleX: 1, scaleY: 1 });
-                if (!isActiveSelection) {
+                if (isActiveSelection && activeObj instanceof fabric__namespace.ActiveSelection) {
+                  const frameBounds = getObjectFrameBoundsInSelection(activeObj, obj, sourceFrameW, sourceFrameH);
+                  absoluteLeft = frameBounds.left;
+                  absoluteTop = frameBounds.top;
+                } else {
+                  absoluteLeft = (decomposed.translateX ?? absoluteLeft) - finalWidth / 2;
+                  absoluteTop = (decomposed.translateY ?? absoluteTop) - finalHeight / 2;
+                }
+                finalAbsoluteMatrix = fabric__namespace.util.composeMatrix({
+                  translateX: absoluteLeft + finalWidth / 2,
+                  translateY: absoluteTop + finalHeight / 2,
+                  angle: decomposed.angle ?? (obj.angle ?? 0),
+                  scaleX: 1,
+                  scaleY: 1,
+                  skewX: 0,
+                  skewY: 0
+                });
+                if (isActiveSelection && activeObj instanceof fabric__namespace.ActiveSelection) {
+                  pendingCropGroupFrameBakes.push({
+                    obj,
+                    width: finalWidth,
+                    height: finalHeight,
+                    left: absoluteLeft,
+                    top: absoluteTop,
+                    angle: decomposed.angle ?? (obj.angle ?? 0)
+                  });
+                } else {
+                  ct.frameW = finalWidth;
+                  ct.frameH = finalHeight;
+                  obj.set({ width: finalWidth, height: finalHeight, scaleX: 1, scaleY: 1 });
                   updateCoverLayout(obj);
-                  obj.__lastResizeHandle = null;
+                }
+                obj.__lastResizeHandle = null;
+                if (!isActiveSelection) {
                   fabricCanvas.setActiveObject(obj);
-                } else {
-                  obj.__lastResizeHandle = null;
                 }
               }
             } else if (obj instanceof fabric__namespace.FabricImage) {
@@ -11278,6 +12195,10 @@ const PageCanvas = react.forwardRef(
               if (obj.textPath) {
                 elementUpdate.textPath = obj.textPath;
               }
+              const bakedFs = obj.fontSize;
+              if (typeof bakedFs === "number" && bakedFs > 0) {
+                elementUpdate.fontSize = bakedFs;
+              }
             }
             if (sourceElement && sourceElement.opacity !== void 0) {
               elementUpdate.opacity = sourceElement.opacity;
@@ -11285,7 +12206,7 @@ const PageCanvas = react.forwardRef(
             updateElement(objId, elementUpdate, { recordHistory: false, skipLayoutRecalc: true });
             obj.setCoords();
           }
-          const pageChildrenForReflow = ((_f = useEditorStore.getState().canvas.pages.find((p) => p.id === pageId)) == null ? void 0 : _f.children) ?? [];
+          const pageChildrenForReflow = ((_g = useEditorStore.getState().canvas.pages.find((p) => p.id === pageId)) == null ? void 0 : _g.children) ?? [];
           const stackGroupsToReflow = /* @__PURE__ */ new Set();
           for (const id of modifiedIdsThisRound) {
             const parent = findParentGroup(pageChildrenForReflow, id);
@@ -11309,6 +12230,25 @@ const PageCanvas = react.forwardRef(
             } finally {
               skipActiveSelectionBakeOnClearRef.current = false;
             }
+            for (const bake of pendingCropGroupFrameBakes) {
+              const ct = bake.obj.__cropData;
+              if (!ct) continue;
+              ct.frameW = bake.width;
+              ct.frameH = bake.height;
+              bake.obj.set({
+                left: bake.left + bake.width / 2,
+                top: bake.top + bake.height / 2,
+                width: bake.width,
+                height: bake.height,
+                scaleX: 1,
+                scaleY: 1,
+                angle: bake.angle,
+                originX: "center",
+                originY: "center"
+              });
+              updateCoverLayout(bake.obj);
+              bake.obj.setCoords();
+            }
             if (membersToReselect.length > 1) {
               const newSel = new fabric__namespace.ActiveSelection(membersToReselect, { canvas: fabricCanvas });
               if (wasGroupSel) restoreGroupSelectionVisualState(newSel, wasGroupSel);
@@ -11327,6 +12267,7 @@ const PageCanvas = react.forwardRef(
             fabricCanvas.requestRenderAll();
           }
           groupSelectionTransformStartRef.current = null;
+          activeSelectionMoveStartRef.current = null;
           setTimeout(() => modifiedIdsThisRound.forEach((id) => justModifiedIdsRef.current.delete(id)), 150);
           commitHistory();
           unlockEditsSoon();
@@ -11355,6 +12296,7 @@ const PageCanvas = react.forwardRef(
         }
       });
       fabricCanvas.on("mouse:dblclick", (e) => {
+        var _a2, _b;
         if (!isActiveRef.current || !allowEditing) return;
         let target = e.target;
         if (!target) {
@@ -11363,7 +12305,10 @@ const PageCanvas = react.forwardRef(
         }
         if (target && target instanceof fabric__namespace.Group && target.__cropGroup) {
           const ct = target.__cropData;
-          if ((ct == null ? void 0 : ct._img) && !isCropGroupInCropMode(target)) {
+          const innerImg = ct == null ? void 0 : ct._img;
+          const innerSrc = ((_a2 = innerImg == null ? void 0 : innerImg.getSrc) == null ? void 0 : _a2.call(innerImg)) || ((_b = innerImg == null ? void 0 : innerImg._originalElement) == null ? void 0 : _b.src) || (innerImg == null ? void 0 : innerImg.src) || "";
+          const isPlaceholder = !innerSrc || innerSrc === EMPTY_IMAGE_PLACEHOLDER_DATA_URL;
+          if (innerImg && !isPlaceholder && !isCropGroupInCropMode(target)) {
             enterCropMode(target);
             return;
           }
@@ -11597,14 +12542,7 @@ const PageCanvas = react.forwardRef(
             try {
               const newSel = new fabric__namespace.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;
-                }
+                applyLogicalGroupSelectionVisualState(newSel, activeSelectionSnapshot.groupSelectionId);
               }
               fc.setActiveObject(newSel);
               newSel.setCoords();
@@ -11989,6 +12927,7 @@ const PageCanvas = react.forwardRef(
                   continue;
                 }
                 if (existingObj instanceof fabric__namespace.Group && existingObj.__cropGroup) {
+                  updateFabricObject(existingObj, element, wasJustModified);
                   existingObj.set({
                     flipX: element.flipX ?? false,
                     flipY: element.flipY ?? false,
@@ -11996,6 +12935,7 @@ const PageCanvas = react.forwardRef(
                   });
                   existingObj.setCoords();
                   fc.requestRenderAll();
+                  if (wasJustModified) justModifiedIdsRef.current.delete(element.id);
                   continue;
                 }
                 if (existingObj instanceof fabric__namespace.Textbox && wasJustModified && !syncTriggeredByPanelRef.current) {
@@ -12262,18 +13202,17 @@ const PageCanvas = react.forwardRef(
         }
         if (!shouldSkipUpdates2) {
           const dfsIds = [];
-          const visit = (nodes, reverseGroupChildren = false) => {
-            const list = reverseGroupChildren ? [...nodes].reverse() : nodes;
-            for (const n of list) {
+          const visit = (nodes) => {
+            for (const n of nodes) {
               if (isElement(n)) dfsIds.push(n.id);
               else if (isGroup(n)) {
                 const g = n;
                 if (sectionGroupIds.has(g.id)) dfsIds.push(g.id);
-                visit(g.children ?? [], true);
+                visit(g.children ?? []);
               }
             }
           };
-          visit(pageTree, false);
+          visit(pageTree);
           const allFabricObjects = fc.getObjects();
           allFabricObjects.sort((a, b) => {
             const aIndex = dfsIds.indexOf(getObjectId(a) || "");
@@ -12335,14 +13274,7 @@ const PageCanvas = react.forwardRef(
               try {
                 const newSel = new fabric__namespace.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;
-                  }
+                  applyLogicalGroupSelectionVisualState(newSel, activeSelectionSnapshot.groupSelectionId);
                 }
                 fc.setActiveObject(newSel);
                 newSel.setCoords();
@@ -12534,12 +13466,24 @@ const PageCanvas = react.forwardRef(
       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 selectedGroupIds = selectedIds.filter((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 selectedGroupSelectionId = selectedGroupIds[0];
+      const selectedGroupMemberIdsAll = /* @__PURE__ */ new Set();
+      for (const gid of selectedGroupIds) {
+        const groupNode = findNodeById(pageChildrenForSelection, gid);
+        if (groupNode && isGroup(groupNode)) {
+          getAllElementIds(groupNode.children ?? []).forEach((id) => selectedGroupMemberIdsAll.add(id));
+        }
+      }
+      const standaloneSelectedIds = selectedIds.filter((id) => {
+        if (selectedGroupIds.includes(id)) return false;
+        if (selectedGroupMemberIdsAll.has(id)) return false;
+        return !!findNodeById(pageChildrenForSelection, id);
+      });
+      const isPureSingleGroupSelection = selectedGroupIds.length === 1 && standaloneSelectedIds.length === 0;
       const toSelect = [];
       for (const obj of fc.getObjects()) {
         const id = getObjectId(obj);
@@ -12548,17 +13492,29 @@ const PageCanvas = react.forwardRef(
           toSelect.push(obj);
           continue;
         }
-        if (id && (selectedGroupMemberIds == null ? void 0 : selectedGroupMemberIds.has(id))) {
+        if (id && selectedGroupMemberIdsAll.has(id)) {
           toSelect.push(obj);
           continue;
         }
         if (obj instanceof fabric__namespace.Group && obj.__docuforgeSectionGroup) {
           for (const child of obj.getObjects()) {
             const childId = getObjectId(child);
-            if (childId && (selectedSet.has(childId) || (selectedGroupMemberIds == null ? void 0 : selectedGroupMemberIds.has(childId)))) toSelect.push(child);
+            if (childId && (selectedSet.has(childId) || selectedGroupMemberIdsAll.has(childId))) toSelect.push(child);
           }
         }
       }
+      const restoreSuppressedBordersForSelectionSync = () => {
+        const suppressed = suppressGroupMemberBordersRef.current;
+        for (const member of suppressed) {
+          const origBorders = member.__pixldocsOrigHasBorders;
+          const origControls = member.__pixldocsOrigHasControls;
+          member.hasBorders = origBorders !== void 0 ? origBorders : true;
+          member.hasControls = origControls !== void 0 ? origControls : true;
+          delete member.__pixldocsOrigHasBorders;
+          delete member.__pixldocsOrigHasControls;
+        }
+        suppressGroupMemberBordersRef.current = [];
+      };
       if (toSelect.length === 0) {
         if (!syncLockedRef.current && !editLockRef.current) {
           fc.discardActiveObject();
@@ -12569,6 +13525,12 @@ const PageCanvas = react.forwardRef(
         if (objId) {
           justModifiedIdsRef.current.add(objId);
         }
+        if (!selectedGroupSelectionId) {
+          restoreSuppressedBordersForSelectionSync();
+          delete obj.__pixldocsGroupSelection;
+          delete obj.__pixldocsLogicalGroupIds;
+          obj.set({ selectable: true, evented: true, hasBorders: true, hasControls: true });
+        }
         fc.setActiveObject(obj);
         obj.setCoords();
       } else {
@@ -12577,13 +13539,39 @@ const PageCanvas = react.forwardRef(
         const sameSelection = active instanceof fabric__namespace.ActiveSelection && active.getObjects().length === toSelect.length && toSelect.every((obj) => active.getObjects().includes(obj));
         if (sameSelection && isFlatGroupSelection) {
           if (selectedGroupSelectionId && active instanceof fabric__namespace.ActiveSelection) {
-            active.__pixldocsGroupSelection = selectedGroupSelectionId;
-            suppressGroupMemberBordersRef.current = active.getObjects();
-            active.getObjects().forEach((m) => {
+            if (isPureSingleGroupSelection) {
+              active.__pixldocsGroupSelection = selectedGroupSelectionId;
+              delete active.__pixldocsLogicalGroupIds;
+              suppressGroupMemberBordersRef.current = active.getObjects();
+            } else {
+              delete active.__pixldocsGroupSelection;
+              active.__pixldocsLogicalGroupIds = selectedGroupIds;
+              active.hasBorders = true;
+              suppressGroupMemberBordersRef.current = active.getObjects().filter((m) => {
+                const id = getObjectId(m);
+                return !!id && selectedGroupMemberIdsAll.has(id);
+              });
+            }
+            suppressGroupMemberBordersRef.current.forEach((m) => {
+              var _a3;
               if (m.__pixldocsOrigHasBorders === void 0) m.__pixldocsOrigHasBorders = m.hasBorders;
+              if (m.__pixldocsOrigHasControls === void 0) m.__pixldocsOrigHasControls = m.hasControls;
               m.hasBorders = false;
+              m.hasControls = false;
+              if (m.__cropGroup || ((_a3 = m._ct) == null ? void 0 : _a3.isCropGroup)) {
+                if (m.__pixldocsOrigLockScalingX === void 0) {
+                  m.__pixldocsOrigLockScalingX = m.lockScalingX;
+                  m.__pixldocsOrigLockScalingY = m.lockScalingY;
+                }
+                m.lockScalingX = false;
+                m.lockScalingY = false;
+              }
             });
-            applyWarpAwareSelectionBorders(active);
+            if (isPureSingleGroupSelection) {
+              active.hasBorders = true;
+              active.setCoords();
+              applyWarpAwareSelectionBorders(active);
+            }
           }
           fc.requestRenderAll();
         } else {
@@ -12593,13 +13581,33 @@ const PageCanvas = react.forwardRef(
           });
           const selection = new fabric__namespace.ActiveSelection(toSelect, { canvas: fc });
           if (selectedGroupSelectionId) {
-            selection.__pixldocsGroupSelection = selectedGroupSelectionId;
-            suppressGroupMemberBordersRef.current = toSelect;
-            toSelect.forEach((m) => {
+            if (isPureSingleGroupSelection) {
+              selection.__pixldocsGroupSelection = selectedGroupSelectionId;
+              suppressGroupMemberBordersRef.current = toSelect;
+            } else {
+              selection.__pixldocsLogicalGroupIds = selectedGroupIds;
+              selection.hasBorders = true;
+              suppressGroupMemberBordersRef.current = toSelect.filter((m) => {
+                const id = getObjectId(m);
+                return !!id && selectedGroupMemberIdsAll.has(id);
+              });
+            }
+            suppressGroupMemberBordersRef.current.forEach((m) => {
+              var _a3;
               if (m.__pixldocsOrigHasBorders === void 0) m.__pixldocsOrigHasBorders = m.hasBorders;
+              if (m.__pixldocsOrigHasControls === void 0) m.__pixldocsOrigHasControls = m.hasControls;
               m.hasBorders = false;
+              m.hasControls = false;
+              if (m.__cropGroup || ((_a3 = m._ct) == null ? void 0 : _a3.isCropGroup)) {
+                if (m.__pixldocsOrigLockScalingX === void 0) {
+                  m.__pixldocsOrigLockScalingX = m.lockScalingX;
+                  m.__pixldocsOrigLockScalingY = m.lockScalingY;
+                }
+                m.lockScalingX = false;
+                m.lockScalingY = false;
+              }
             });
-            applyWarpAwareSelectionBorders(selection);
+            if (isPureSingleGroupSelection) applyWarpAwareSelectionBorders(selection);
           }
           fc.setActiveObject(selection);
           if (!isFlatGroupSelection) {
@@ -12905,7 +13913,7 @@ const PageCanvas = react.forwardRef(
         const angleTextPathActive = isTextbox && ((_b = element.textPath) == null ? void 0 : _b.preset) === "rise";
         const appliedSkewY = angleTextPathActive ? 0 : element.skewY ?? 0;
         let posIfNotSkipped = skipPositionUpdate ? {} : { left: fabricPos.left, top: fabricPos.top };
-        if (!skipPositionUpdate && obj instanceof fabric__namespace.FabricImage && obj.originX === "center") {
+        if (!skipPositionUpdate && (obj instanceof fabric__namespace.FabricImage && obj.originX === "center" || obj instanceof fabric__namespace.Group && obj.__cropGroup)) {
           const vW = rW * effectiveScaleX;
           const vH = rH * effectiveScaleY;
           posIfNotSkipped = { left: fabricPos.left + vW / 2, top: fabricPos.top + vH / 2 };
@@ -13084,7 +14092,23 @@ const PageCanvas = react.forwardRef(
           objectCaching: false,
           noScaleCache: true,
           splitByGrapheme,
-          text
+          text,
+          // Text outline (stroke). Only apply when BOTH a stroke color and
+          // positive width are explicitly set — otherwise fabric defaults
+          // stroke to black and renders an unwanted outline on existing
+          // text elements that carry a stray strokeWidth.
+          ...(() => {
+            const s = element.stroke;
+            const w = Number(element.strokeWidth) || 0;
+            const has = !!s && w > 0;
+            return has ? {
+              stroke: s,
+              strokeWidth: w,
+              paintFirst: element.paintFirst || "fill",
+              strokeUniform: true,
+              strokeLineJoin: "round"
+            } : { stroke: void 0, strokeWidth: 0 };
+          })()
         });
         const valign = element.verticalAlign || "top";
         const minBoxH = Math.max(0, Number(element.minBoxHeight) || 0);
@@ -13740,7 +14764,10 @@ const PageCanvas = react.forwardRef(
           let panX = element.cropPanX ?? 0.5;
           let panY = element.cropPanY ?? 0.5;
           let zoom2 = element.cropZoom ?? 1;
-          if (existingCropGroup) {
+          const elementHasExplicitCrop = element.cropPanX != null || element.cropPanY != null || element.cropZoom != null;
+          const existingGroupSource = existingCropGroup ? String(existingCropGroup.__imageSrc || "") : "";
+          const canPreserveLiveCrop = Boolean(existingCropGroup) && (elementHasExplicitCrop || existingGroupSource === imageUrl);
+          if (canPreserveLiveCrop && existingCropGroup) {
             const existingImg = (_j = existingCropGroup.__cropData) == null ? void 0 : _j._img;
             if (existingImg) {
               panX = ((_k = existingImg._ct) == null ? void 0 : _k.panX) ?? existingImg.__panX ?? panX;
@@ -15081,6 +16108,19 @@ function setInTree(nodes, elementId, targetProperty, value) {
       } else if (targetProperty === "text" && node.type === "text" && typeof value === "string") {
         const textVal = value === "" ? " " : value;
         node[targetProperty] = applyTextCase(textVal, node.textCase);
+      } else if ((targetProperty === "src" || targetProperty === "imageUrl") && node.type === "image") {
+        const previousSrc = String(node.src || node.imageUrl || "");
+        const nextSrc = String(value ?? "");
+        const srcChanged = nextSrc !== "" && nextSrc !== previousSrc;
+        node.src = value;
+        node.imageUrl = value;
+        if (srcChanged) {
+          delete node.imageNaturalWidth;
+          delete node.imageNaturalHeight;
+          delete node.cropPanX;
+          delete node.cropPanY;
+          delete node.cropZoom;
+        }
       } else {
         node[targetProperty] = value;
       }
@@ -15090,10 +16130,6 @@ function setInTree(nodes, elementId, targetProperty, value) {
           delete node.height;
         }
       }
-      if ((targetProperty === "src" || targetProperty === "imageUrl") && node.type === "image") {
-        delete node.imageNaturalWidth;
-        delete node.imageNaturalHeight;
-      }
       return true;
     }
     if (node.children && Array.isArray(node.children)) {
@@ -19881,10 +20917,11 @@ function captureFabricCanvasSvgForPdf(fabricInstance, canvasWidth, canvasHeight)
     for (const obj of objs) {
       const isGroupLike = obj instanceof fabric__namespace.Group || (obj == null ? void 0 : obj.type) === "group" || Array.isArray(obj == null ? void 0 : obj._objects);
       const isFadedCropGroup = isGroupLike && (Boolean(obj.__edgeFadeRenderConfig) || Boolean(obj.__edgeFadeKey) || Boolean(obj.__edgeFadeInputKey));
-      if (!isFadedCropGroup) continue;
+      const hasSvgMaskClip = isGroupLike && obj.__cropGroup && obj.clipPath && (obj.clipPath.__svgMask === true || obj.clipPath.__svgMaskUrl || obj.clipPath.__svgMaskType || obj.__svgMaskUrl || obj.__svgMaskType);
+      if (!isFadedCropGroup && !hasSvgMaskClip) continue;
       try {
         const baked = obj.toCanvasElement({
-          multiplier: 2,
+          multiplier: hasSvgMaskClip ? 4 : 2,
           enableRetinaScaling: false
         });
         const rect = obj.getBoundingRect();
@@ -19957,9 +20994,9 @@ function captureFabricCanvasSvgForPdf(fabricInstance, canvasWidth, canvasHeight)
   }
   return svgString;
 }
-const resolvedPackageVersion = "0.5.225";
+const resolvedPackageVersion = "0.5.226";
 const PACKAGE_VERSION = resolvedPackageVersion;
-const DEPLOYMENT_VERSION_MARKER = "__PIXLDOCS_CANVAS_RENDERER_VERSION__:0.5.225";
+const DEPLOYMENT_VERSION_MARKER = "__PIXLDOCS_CANVAS_RENDERER_VERSION__:0.5.226";
 const roundParityValue = (value) => {
   if (typeof value !== "number") return value;
   return Number.isFinite(value) ? Number(value.toFixed(3)) : value;
@@ -20703,7 +21740,7 @@ class PixldocsRenderer {
         await this.waitForCanvasScene(container, cloned, i);
       }
       console.log(`[canvas-renderer][pdf-unified] mounted ${cloned.pages.length} page(s), handing off to client exportMultiPagePdf`);
-      const { exportMultiPagePdf, preparePagesForExport } = await Promise.resolve().then(() => require("./vectorPdfExport-CVeK--lR.cjs"));
+      const { exportMultiPagePdf, preparePagesForExport } = await Promise.resolve().then(() => require("./vectorPdfExport-C18SGeJb.cjs"));
       const prepared = preparePagesForExport(
         cloned.pages,
         canvasWidth,
@@ -23023,7 +24060,7 @@ async function prepareLiveCanvasSvgForPdf(rawSvg, pageWidth, pageHeight, pageKey
     if (options == null ? void 0 : options.stripPageBackground) stripRootPageBackgroundFromSvg(svgToDraw);
     sanitizeSvgTreeForPdf(svgToDraw);
     try {
-      const { bakeTextAnchorPositionsFromLiveSvg, logTextMeasurementDiagnostic } = await Promise.resolve().then(() => require("./vectorPdfExport-CVeK--lR.cjs"));
+      const { bakeTextAnchorPositionsFromLiveSvg, logTextMeasurementDiagnostic } = await Promise.resolve().then(() => require("./vectorPdfExport-C18SGeJb.cjs"));
       try {
         await logTextMeasurementDiagnostic(svgToDraw);
       } catch {
@@ -23419,4 +24456,4 @@ exports.setAutoShrinkDebug = setAutoShrinkDebug;
 exports.setBundledAssetPrefixes = setBundledAssetPrefixes;
 exports.warmResolvedTemplateForPreview = warmResolvedTemplateForPreview;
 exports.warmTemplateFromForm = warmTemplateFromForm;
-//# sourceMappingURL=index-6nrov1rx.cjs.map
+//# sourceMappingURL=index-CXOoVCq1.cjs.map