@pixldocs/canvas-renderer 0.5.240 → 0.5.242

package/dist/{index-B2H1tQ0S.js → index-BQ5V2uT8.js}

@@ -1,7 +1,7 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-var _a;
+var _a, _b;
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { forwardRef, useRef, useState, useCallback, useMemo, useEffect, useImperativeHandle, createElement } from "react";
 import { flushSync } from "react-dom";
@@ -273,13 +273,13 @@ function lineToString(line) {
   return Array.isArray(line) ? line.join("") : String(line ?? "");
 }
 function measureTextLineWithCanvas(textbox, lineText, lineIndex) {
-  var _a2, _b, _c, _d, _e;
+  var _a2, _b2, _c, _d, _e;
   if (!lineText) return 0;
   const ctx = getMeasureContext();
   if (!ctx) return null;
   const tb = textbox;
   const fontSize = Number(((_a2 = tb.getValueOfPropertyAt) == null ? void 0 : _a2.call(tb, lineIndex, 0, "fontSize")) ?? textbox.fontSize ?? 16);
-  const fontStyle = String(((_b = tb.getValueOfPropertyAt) == null ? void 0 : _b.call(tb, lineIndex, 0, "fontStyle")) ?? textbox.fontStyle ?? "normal");
+  const fontStyle = String(((_b2 = tb.getValueOfPropertyAt) == null ? void 0 : _b2.call(tb, lineIndex, 0, "fontStyle")) ?? textbox.fontStyle ?? "normal");
   const fontWeight = String(((_c = tb.getValueOfPropertyAt) == null ? void 0 : _c.call(tb, lineIndex, 0, "fontWeight")) ?? textbox.fontWeight ?? "400");
   const fontFamily = String(((_d = tb.getValueOfPropertyAt) == null ? void 0 : _d.call(tb, lineIndex, 0, "fontFamily")) ?? textbox.fontFamily ?? "Open Sans");
   const charSpacing = Number(((_e = tb.getValueOfPropertyAt) == null ? void 0 : _e.call(tb, lineIndex, 0, "charSpacing")) ?? textbox.charSpacing ?? 0);
@@ -768,7 +768,7 @@ function resolveStackGroupEffectivePositions(group, pageChildren, options) {
   return out;
 }
 function groupBoundsFromChildren(group, pageChildren, options) {
-  var _a2, _b;
+  var _a2, _b2;
   const kids = group.children ?? [];
   if (kids.length === 0) {
     const w = group.width;
@@ -784,7 +784,7 @@ function groupBoundsFromChildren(group, pageChildren, options) {
       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);
+    const ct = positions ? ((_b2 = positions.get(child.id)) == null ? void 0 : _b2.top) ?? getNodeTop(child) : getNodeTop(child);
     minX = Math.min(minX, cl);
     minY = Math.min(minY, ct);
     maxX = Math.max(maxX, cl + sz.width);
@@ -822,14 +822,14 @@ function getNodeBoundsFromChildren(node) {
   return getNodeBounds(node);
 }
 function absoluteBoundsRecur(node, pageChildren, options) {
-  var _a2, _b;
+  var _a2, _b2;
   const parent = pageChildren ? findParentGroup(pageChildren, node.id) : null;
   const b = getNodeBounds(node, pageChildren);
   if (!parent) return b;
   const parentAbs = absoluteBoundsRecur(parent, pageChildren);
   const isStackParent = isStackLayoutMode(parent.layoutMode);
   const inParentLeft = isStackParent ? ((_a2 = resolveStackGroupEffectivePositions(parent, pageChildren).get(node.id)) == null ? void 0 : _a2.left) ?? b.left : b.left;
-  const inParentTop = isStackParent ? ((_b = resolveStackGroupEffectivePositions(parent, pageChildren).get(node.id)) == null ? void 0 : _b.top) ?? b.top : b.top;
+  const inParentTop = isStackParent ? ((_b2 = resolveStackGroupEffectivePositions(parent, pageChildren).get(node.id)) == null ? void 0 : _b2.top) ?? b.top : b.top;
   return {
     left: parentAbs.left + inParentLeft,
     top: parentAbs.top + inParentTop,
@@ -1009,7 +1009,7 @@ const defaultProjectSettings = {
   snapToGrid: false,
   gridSize: 20,
   snapToGuides: true,
-  snapThreshold: 5
+  snapThreshold: 8
 };
 const defaultPageSettings = {
   backgroundColor: "#ffffff"
@@ -3547,7 +3547,7 @@ const clearFontCacheAndRerender = (canvas, options = {}) => {
     }
   };
   const collectUnderlineMetrics = (obj) => {
-    var _a2, _b;
+    var _a2, _b2;
     if (obj instanceof fabric.Textbox) {
       if (!obj.underline) return [];
       const lineWidths = obj.__lineWidths;
@@ -3562,7 +3562,7 @@ const clearFontCacheAndRerender = (canvas, options = {}) => {
         height: obj.height ?? null,
         scaleX: obj.scaleX,
         scaleY: obj.scaleY,
-        lineCount: ((_b = obj.textLines) == null ? void 0 : _b.length) ?? 0,
+        lineCount: ((_b2 = obj.textLines) == null ? void 0 : _b2.length) ?? 0,
         maxLineWidth: lineWidths && lineWidths.length > 0 ? Math.max(...lineWidths) : null
       }];
     }
@@ -3592,13 +3592,13 @@ const clearFontCacheAndRerender = (canvas, options = {}) => {
   canvas.requestRenderAll();
 };
 const ensureFontLoaded = async (fontFamily) => {
-  var _a2, _b, _c;
+  var _a2, _b2, _c;
   if (!fontFamily) return;
   if (LOCAL_FONTS.has(fontFamily)) {
     try {
       const isLoaded = (_a2 = document.fonts) == null ? void 0 : _a2.check(`16px "${fontFamily}"`);
       if (isLoaded) return;
-      await ((_b = document.fonts) == null ? void 0 : _b.load(`16px "${fontFamily}"`));
+      await ((_b2 = document.fonts) == null ? void 0 : _b2.load(`16px "${fontFamily}"`));
       await ((_c = document.fonts) == null ? void 0 : _c.load(`bold 16px "${fontFamily}"`));
     } catch (e) {
       console.warn(`Failed to ensure local font loaded: ${fontFamily}`, e);
@@ -4093,7 +4093,7 @@ function createImageClipPath(element, imgWidth, imgHeight) {
   }
 }
 async function loadImageAsync(element, placeholder, fc, fabricRef, syncLockedRef, isTransforming) {
-  var _a2, _b, _c, _d;
+  var _a2, _b2, _c, _d;
   const imageUrl = element.src || element.imageUrl;
   if (!imageUrl) return;
   const nextSvgColorMap = element.svgColorMap ? JSON.stringify(element.svgColorMap) : "";
@@ -4257,7 +4257,7 @@ async function loadImageAsync(element, placeholder, fc, fabricRef, syncLockedRef
       if (existingCropGroup) {
         const existingImg = (_a2 = existingCropGroup.__cropData) == null ? void 0 : _a2._img;
         if (existingImg) {
-          panX = ((_b = existingImg._ct) == null ? void 0 : _b.panX) ?? existingImg.__panX ?? 0.5;
+          panX = ((_b2 = existingImg._ct) == null ? void 0 : _b2.panX) ?? existingImg.__panX ?? 0.5;
           panY = ((_c = existingImg._ct) == null ? void 0 : _c.panY) ?? existingImg.__panY ?? 0.5;
           zoom = ((_d = existingImg._ct) == null ? void 0 : _d.zoom) ?? 1;
         }
@@ -4465,11 +4465,11 @@ function isLuminanceMaskClipPath(clipPath) {
   return Boolean(clipPath && clipPath.__svgMaskType === "luminance");
 }
 function syncSvgMaskClipPath(cropGroup) {
-  var _a2, _b;
+  var _a2, _b2;
   const clipPath = cropGroup.clipPath;
   if (!isCropGroup(cropGroup)) return;
   const frameW = ((_a2 = cropGroup._ct) == null ? void 0 : _a2.frameW) ?? cropGroup.width ?? 0;
-  const frameH = ((_b = cropGroup._ct) == null ? void 0 : _b.frameH) ?? cropGroup.height ?? 0;
+  const frameH = ((_b2 = cropGroup._ct) == null ? void 0 : _b2.frameH) ?? cropGroup.height ?? 0;
   if (frameW <= 0 || frameH <= 0) return;
   if (isSvgMaskClipPath(clipPath)) {
     fitMaskGroupToFrame(clipPath, frameW, frameH);
@@ -4493,12 +4493,12 @@ async function detectMaskType(svgUrl) {
   }
 }
 async function applySvgMaskToCropGroup(cropGroup, svgUrl) {
-  var _a2, _b, _c;
+  var _a2, _b2, _c;
   if (!isCropGroup(cropGroup)) {
     throw new Error("Selected object is not a crop group / image");
   }
   const frameW = ((_a2 = cropGroup._ct) == null ? void 0 : _a2.frameW) ?? cropGroup.width ?? 0;
-  const frameH = ((_b = cropGroup._ct) == null ? void 0 : _b.frameH) ?? cropGroup.height ?? 0;
+  const frameH = ((_b2 = cropGroup._ct) == null ? void 0 : _b2.frameH) ?? cropGroup.height ?? 0;
   if (frameW <= 0 || frameH <= 0) {
     throw new Error("Crop group has no frame dimensions");
   }
@@ -4584,12 +4584,12 @@ async function buildLuminanceAlphaCanvas(svgUrl, frameW, frameH) {
   return canvas;
 }
 async function applyLuminanceMaskToCropGroup(cropGroup, svgUrl) {
-  var _a2, _b, _c;
+  var _a2, _b2, _c;
   if (!isCropGroup(cropGroup)) {
     throw new Error("Selected object is not a crop group / image");
   }
   const frameW = ((_a2 = cropGroup._ct) == null ? void 0 : _a2.frameW) ?? cropGroup.width ?? 0;
-  const frameH = ((_b = cropGroup._ct) == null ? void 0 : _b.frameH) ?? cropGroup.height ?? 0;
+  const frameH = ((_b2 = cropGroup._ct) == null ? void 0 : _b2.frameH) ?? cropGroup.height ?? 0;
   if (frameW <= 0 || frameH <= 0) {
     throw new Error("Crop group has no frame dimensions");
   }
@@ -4638,10 +4638,10 @@ function getAppliedSvgMaskType(obj) {
   return t === "luminance" || t === "shape" ? t : null;
 }
 function clearSvgMaskFromCropGroup(cropGroup) {
-  var _a2, _b, _c;
+  var _a2, _b2, _c;
   if (!isCropGroup(cropGroup)) return;
   const frameW = ((_a2 = cropGroup._ct) == null ? void 0 : _a2.frameW) ?? cropGroup.width ?? 0;
-  const frameH = ((_b = cropGroup._ct) == null ? void 0 : _b.frameH) ?? cropGroup.height ?? 0;
+  const frameH = ((_b2 = cropGroup._ct) == null ? void 0 : _b2.frameH) ?? cropGroup.height ?? 0;
   const rect = new fabric.Rect({
     width: frameW,
     height: frameH,
@@ -4675,17 +4675,16 @@ const svgMaskApply = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.define
   isSvgMaskClipPath,
   syncSvgMaskClipPath
 }, Symbol.toStringTag, { value: "Module" }));
+const SELECTION_BORDER_SCALE$1 = 2;
 function clamp$1(v, min, max) {
   return Math.max(min, Math.min(max, v));
 }
 function applyControlSizeForZoom(canvas, obj) {
   if (!canvas || !obj) return;
-  const z = canvas.getZoom() || 1;
-  const size = Math.max(6, Math.round(8 * z));
   obj.set({
-    cornerSize: size,
-    // Subtle but visible border at any zoom (min ~1.25px).
-    borderScaleFactor: Math.max(1.25, 1.25 * z)
+    cornerSize: 10,
+    touchCornerSize: 20,
+    borderScaleFactor: SELECTION_BORDER_SCALE$1
   });
   obj.setCoords();
 }
@@ -5062,6 +5061,21 @@ function resizeFrameFromSide(g, side, localDx, localDy) {
 function installCanvaMaskControls(g) {
   const ct = g.__cropData;
   if (ct) ct.fit = ct.fit ?? "cover";
+  const controlStyle = {
+    cornerSize: 10,
+    touchCornerSize: 20,
+    borderScaleFactor: SELECTION_BORDER_SCALE$1,
+    transparentCorners: false,
+    cornerStyle: "circle",
+    cornerColor: "hsl(217, 91%, 60%)",
+    cornerStrokeColor: "#ffffff",
+    borderColor: "hsl(217, 91%, 60%)"
+  };
+  g.set(controlStyle);
+  const notifyResizeSnap = (target, corner) => {
+    const handler = target.__resizeSnapHandler;
+    if (typeof handler === "function") handler(target, corner);
+  };
   g.setControlsVisibility({
     mt: true,
     mb: true,
@@ -5091,6 +5105,7 @@ function installCanvaMaskControls(g) {
         const { localDx, localDy } = getLocalDeltaStable(t, eventData);
         t.__lockScaleDuringCrop = true;
         resizeFrameFromSide(t, side, localDx, localDy);
+        notifyResizeSnap(t, side);
         (_a2 = t.canvas) == null ? void 0 : _a2.requestRenderAll();
         return true;
       }
@@ -5115,7 +5130,9 @@ function installCanvaMaskControls(g) {
         if (canvas && canvas.__editLockRef) {
           canvas.__editLockRef.current = true;
         }
-        return resizeFrameFromCornerUniform(eventData, transform);
+        const resized = resizeFrameFromCornerUniform(eventData, transform);
+        if (resized) notifyResizeSnap(t, key);
+        return resized;
       }
     });
   };
@@ -5124,6 +5141,8 @@ function installCanvaMaskControls(g) {
   g.controls.bl = makeCornerControl("bl", -0.5, 0.5, "nesw-resize");
   g.controls.br = makeCornerControl("br", 0.5, 0.5, "nwse-resize");
   g.__hasCustomControls = true;
+  g.set(controlStyle);
+  g.setCoords();
 }
 async function createMaskedImageElement({
   url,
@@ -5694,12 +5713,15 @@ function exitCropMode(g, commit = true) {
   g.hasControls = true;
   g.borderDashArray = void 0;
   installCanvaMaskControls(g);
-  g.borderColor = "#4f46e5";
+  g.borderColor = "hsl(217, 91%, 60%)";
   g.borderDashArray = void 0;
-  g.cornerColor = "#ffffff";
-  g.cornerStrokeColor = "#4f46e5";
-  g.cornerStyle = "rect";
+  g.cornerColor = "hsl(217, 91%, 60%)";
+  g.cornerStrokeColor = "#ffffff";
+  g.cornerStyle = "circle";
   g.transparentCorners = false;
+  g.cornerSize = 10;
+  g.touchCornerSize = 20;
+  g.borderScaleFactor = 2;
   g[CROP_MODE_FLAG] = false;
   g.__cropZoomLastPointer = void 0;
   g.__lastPointerForCrop = void 0;
@@ -5708,6 +5730,16 @@ function exitCropMode(g, commit = true) {
   }
   canvas == null ? void 0 : canvas.requestRenderAll();
 }
+function boundsToSnapPoints(bounds) {
+  return {
+    left: bounds.left,
+    right: bounds.left + bounds.width,
+    top: bounds.top,
+    bottom: bounds.top + bounds.height,
+    centerX: bounds.left + bounds.width / 2,
+    centerY: bounds.top + bounds.height / 2
+  };
+}
 function getObjectSnapPoints(obj) {
   try {
     obj.setCoords();
@@ -5737,7 +5769,8 @@ function getObjectSnapPoints(obj) {
 }
 function calculateSnapGuides(movingObj, canvas, canvasWidth, canvasHeight, snapToGuides, snapThreshold) {
   if (!snapToGuides) return { guides: [], snapDx: 0, snapDy: 0 };
-  const threshold = snapThreshold || 5;
+  const threshold = snapThreshold || 8;
+  const centerThreshold = threshold * 1.75;
   const newGuides = [];
   const horizontalSnaps = [];
   const verticalSnaps = [];
@@ -5757,12 +5790,24 @@ function calculateSnapGuides(movingObj, canvas, canvasWidth, canvasHeight, snapT
       horizontalSnaps.push({ delta: targetPoint - objPoint, distance, guide });
     }
   };
+  const addCanvasCenterVerticalSnap = (objPoint, targetPoint, guide) => {
+    const distance = Math.abs(objPoint - targetPoint);
+    if (distance < centerThreshold) {
+      verticalSnaps.push({ delta: targetPoint - objPoint, distance: distance * 0.85, guide });
+    }
+  };
+  const addCanvasCenterHorizontalSnap = (objPoint, targetPoint, guide) => {
+    const distance = Math.abs(objPoint - targetPoint);
+    if (distance < centerThreshold) {
+      horizontalSnaps.push({ delta: targetPoint - objPoint, distance: distance * 0.85, guide });
+    }
+  };
   addVerticalSnap(moving.left, 0, { type: "vertical", position: 0 });
   addVerticalSnap(moving.right, canvasWidth, { type: "vertical", position: canvasWidth });
   addHorizontalSnap(moving.top, 0, { type: "horizontal", position: 0 });
   addHorizontalSnap(moving.bottom, canvasHeight, { type: "horizontal", position: canvasHeight });
-  addVerticalSnap(moving.centerX, canvasCenterX, { type: "vertical", position: canvasCenterX });
-  addHorizontalSnap(moving.centerY, canvasCenterY, { type: "horizontal", position: canvasCenterY });
+  addCanvasCenterVerticalSnap(moving.centerX, canvasCenterX, { type: "vertical", position: canvasCenterX });
+  addCanvasCenterHorizontalSnap(moving.centerY, canvasCenterY, { type: "horizontal", position: canvasCenterY });
   const rawObjects = canvas.getObjects();
   const allObjects = [];
   for (const obj of rawObjects) {
@@ -5782,16 +5827,22 @@ function calculateSnapGuides(movingObj, canvas, canvasWidth, canvasHeight, snapT
   }
   for (const otherObj of allObjects) {
     const other = getObjectSnapPoints(otherObj);
-    addVerticalSnap(moving.left, other.left, { type: "vertical", position: other.left, start: Math.min(moving.top, other.top), end: Math.max(moving.bottom, other.bottom) });
-    addVerticalSnap(moving.right, other.right, { type: "vertical", position: other.right, start: Math.min(moving.top, other.top), end: Math.max(moving.bottom, other.bottom) });
-    addVerticalSnap(moving.left, other.right, { type: "vertical", position: other.right, start: Math.min(moving.top, other.top), end: Math.max(moving.bottom, other.bottom) });
-    addVerticalSnap(moving.right, other.left, { type: "vertical", position: other.left, start: Math.min(moving.top, other.top), end: Math.max(moving.bottom, other.bottom) });
-    addVerticalSnap(moving.centerX, other.centerX, { type: "vertical", position: other.centerX, start: Math.min(moving.top, other.top), end: Math.max(moving.bottom, other.bottom) });
-    addHorizontalSnap(moving.top, other.top, { type: "horizontal", position: other.top, start: Math.min(moving.left, other.left), end: Math.max(moving.right, other.right) });
-    addHorizontalSnap(moving.bottom, other.bottom, { type: "horizontal", position: other.bottom, start: Math.min(moving.left, other.left), end: Math.max(moving.right, other.right) });
-    addHorizontalSnap(moving.top, other.bottom, { type: "horizontal", position: other.bottom, start: Math.min(moving.left, other.left), end: Math.max(moving.right, other.right) });
-    addHorizontalSnap(moving.bottom, other.top, { type: "horizontal", position: other.top, start: Math.min(moving.left, other.left), end: Math.max(moving.right, other.right) });
-    addHorizontalSnap(moving.centerY, other.centerY, { type: "horizontal", position: other.centerY, start: Math.min(moving.left, other.left), end: Math.max(moving.right, other.right) });
+    const tb = {
+      left: other.left,
+      top: other.top,
+      width: other.right - other.left,
+      height: other.bottom - other.top
+    };
+    addVerticalSnap(moving.left, other.left, { type: "vertical", position: other.left, start: Math.min(moving.top, other.top), end: Math.max(moving.bottom, other.bottom), targetBounds: tb });
+    addVerticalSnap(moving.right, other.right, { type: "vertical", position: other.right, start: Math.min(moving.top, other.top), end: Math.max(moving.bottom, other.bottom), targetBounds: tb });
+    addVerticalSnap(moving.left, other.right, { type: "vertical", position: other.right, start: Math.min(moving.top, other.top), end: Math.max(moving.bottom, other.bottom), targetBounds: tb });
+    addVerticalSnap(moving.right, other.left, { type: "vertical", position: other.left, start: Math.min(moving.top, other.top), end: Math.max(moving.bottom, other.bottom), targetBounds: tb });
+    addVerticalSnap(moving.centerX, other.centerX, { type: "vertical", position: other.centerX, start: Math.min(moving.top, other.top), end: Math.max(moving.bottom, other.bottom), targetBounds: tb });
+    addHorizontalSnap(moving.top, other.top, { type: "horizontal", position: other.top, start: Math.min(moving.left, other.left), end: Math.max(moving.right, other.right), targetBounds: tb });
+    addHorizontalSnap(moving.bottom, other.bottom, { type: "horizontal", position: other.bottom, start: Math.min(moving.left, other.left), end: Math.max(moving.right, other.right), targetBounds: tb });
+    addHorizontalSnap(moving.top, other.bottom, { type: "horizontal", position: other.bottom, start: Math.min(moving.left, other.left), end: Math.max(moving.right, other.right), targetBounds: tb });
+    addHorizontalSnap(moving.bottom, other.top, { type: "horizontal", position: other.top, start: Math.min(moving.left, other.left), end: Math.max(moving.right, other.right), targetBounds: tb });
+    addHorizontalSnap(moving.centerY, other.centerY, { type: "horizontal", position: other.centerY, start: Math.min(moving.left, other.left), end: Math.max(moving.right, other.right), targetBounds: tb });
   }
   let snapDx = 0;
   let snapDy = 0;
@@ -5799,19 +5850,129 @@ function calculateSnapGuides(movingObj, canvas, canvasWidth, canvasHeight, snapT
     verticalSnaps.sort((a, b) => a.distance - b.distance);
     const bestSnap = verticalSnaps[0];
     snapDx = bestSnap.delta;
-    newGuides.push({ ...bestSnap.guide, distance: Math.round(bestSnap.distance) });
+    newGuides.push({ ...bestSnap.guide, kind: "alignment" });
   }
   if (horizontalSnaps.length > 0) {
     horizontalSnaps.sort((a, b) => a.distance - b.distance);
     const bestSnap = horizontalSnaps[0];
     snapDy = bestSnap.delta;
-    newGuides.push({ ...bestSnap.guide, distance: Math.round(bestSnap.distance) });
+    newGuides.push({ ...bestSnap.guide, kind: "alignment" });
+  }
+  const projectedLeft = moving.left + snapDx;
+  const projectedRight = moving.right + snapDx;
+  moving.centerX + snapDx;
+  const projectedTop = moving.top + snapDy;
+  const projectedBottom = moving.bottom + snapDy;
+  moving.centerY + snapDy;
+  if (snapDx === 0) {
+    let bestPair = null;
+    for (const a of allObjects) {
+      const A = getObjectSnapPoints(a);
+      if (A.right > projectedLeft) continue;
+      if (A.bottom < projectedTop || A.top > projectedBottom) continue;
+      for (const b of allObjects) {
+        if (b === a) continue;
+        const B = getObjectSnapPoints(b);
+        if (B.left < projectedRight) continue;
+        if (B.bottom < projectedTop || B.top > projectedBottom) continue;
+        const gapL = projectedLeft - A.right;
+        const gapR = B.left - projectedRight;
+        const diff = gapR - gapL;
+        const absDiff = Math.abs(diff);
+        if (absDiff < threshold && (!bestPair || absDiff < bestPair.absDiff)) {
+          bestPair = { A, B, delta: diff / 2, absDiff };
+        }
+      }
+    }
+    if (bestPair) {
+      snapDx = bestPair.delta;
+      const newLeft = moving.left + snapDx;
+      const newRight = moving.right + snapDx;
+      const equalGap = Math.round(newLeft - bestPair.A.right);
+      const bracketY = (Math.max(bestPair.A.top, projectedTop, bestPair.B.top) + Math.min(bestPair.A.bottom, projectedBottom, bestPair.B.bottom)) / 2;
+      if (equalGap > 0) {
+        const aTb = { left: bestPair.A.left, top: bestPair.A.top, width: bestPair.A.right - bestPair.A.left, height: bestPair.A.bottom - bestPair.A.top };
+        const bTb = { left: bestPair.B.left, top: bestPair.B.top, width: bestPair.B.right - bestPair.B.left, height: bestPair.B.bottom - bestPair.B.top };
+        newGuides.push({
+          type: "horizontal",
+          position: bracketY,
+          kind: "gap",
+          gap: equalGap,
+          start: bestPair.A.right,
+          end: newLeft,
+          bracketAt: bracketY,
+          targetBoundsList: [aTb, bTb]
+        });
+        newGuides.push({
+          type: "horizontal",
+          position: bracketY,
+          kind: "gap",
+          gap: equalGap,
+          start: newRight,
+          end: bestPair.B.left,
+          bracketAt: bracketY,
+          targetBoundsList: [aTb, bTb]
+        });
+      }
+    }
+  }
+  if (snapDy === 0) {
+    let bestPair = null;
+    for (const a of allObjects) {
+      const A = getObjectSnapPoints(a);
+      if (A.bottom > projectedTop) continue;
+      if (A.right < projectedLeft || A.left > projectedRight) continue;
+      for (const b of allObjects) {
+        if (b === a) continue;
+        const B = getObjectSnapPoints(b);
+        if (B.top < projectedBottom) continue;
+        if (B.right < projectedLeft || B.left > projectedRight) continue;
+        const gapT = projectedTop - A.bottom;
+        const gapB = B.top - projectedBottom;
+        const diff = gapB - gapT;
+        const absDiff = Math.abs(diff);
+        if (absDiff < threshold && (!bestPair || absDiff < bestPair.absDiff)) {
+          bestPair = { A, B, delta: diff / 2, absDiff };
+        }
+      }
+    }
+    if (bestPair) {
+      snapDy = bestPair.delta;
+      const newTop = moving.top + snapDy;
+      const newBottom = moving.bottom + snapDy;
+      const equalGap = Math.round(newTop - bestPair.A.bottom);
+      const bracketX = (Math.max(bestPair.A.left, projectedLeft, bestPair.B.left) + Math.min(bestPair.A.right, projectedRight, bestPair.B.right)) / 2;
+      if (equalGap > 0) {
+        const aTb = { left: bestPair.A.left, top: bestPair.A.top, width: bestPair.A.right - bestPair.A.left, height: bestPair.A.bottom - bestPair.A.top };
+        const bTb = { left: bestPair.B.left, top: bestPair.B.top, width: bestPair.B.right - bestPair.B.left, height: bestPair.B.bottom - bestPair.B.top };
+        newGuides.push({
+          type: "vertical",
+          position: bracketX,
+          kind: "gap",
+          gap: equalGap,
+          start: bestPair.A.bottom,
+          end: newTop,
+          bracketAt: bracketX,
+          targetBoundsList: [aTb, bTb]
+        });
+        newGuides.push({
+          type: "vertical",
+          position: bracketX,
+          kind: "gap",
+          gap: equalGap,
+          start: newBottom,
+          end: bestPair.B.top,
+          bracketAt: bracketX,
+          targetBoundsList: [aTb, bTb]
+        });
+      }
+    }
   }
   return { guides: newGuides, snapDx, snapDy };
 }
-function calculateScaleSnapGuides(scalingObj, corner, canvas, canvasWidth, canvasHeight, snapToGuides, snapThreshold) {
+function calculateScaleSnapGuides(scalingObj, corner, canvas, canvasWidth, canvasHeight, snapToGuides, snapThreshold, additionalBounds = []) {
   if (!snapToGuides) return [];
-  const threshold = snapThreshold || 5;
+  const threshold = snapThreshold;
   const newGuides = [];
   const scaling = getObjectSnapPoints(scalingObj);
   const scalingId = getObjectId(scalingObj);
@@ -5824,7 +5985,7 @@ function calculateScaleSnapGuides(scalingObj, corner, canvas, canvasWidth, canva
   const checkVerticalSnap = (edgePosition, targetPosition, guide) => {
     const dist = Math.abs(edgePosition - targetPosition);
     if (dist < threshold) {
-      newGuides.push({ ...guide, distance: Math.round(dist) });
+      newGuides.push({ ...guide, kind: "alignment" });
       return true;
     }
     return false;
@@ -5832,7 +5993,7 @@ function calculateScaleSnapGuides(scalingObj, corner, canvas, canvasWidth, canva
   const checkHorizontalSnap = (edgePosition, targetPosition, guide) => {
     const dist = Math.abs(edgePosition - targetPosition);
     if (dist < threshold) {
-      newGuides.push({ ...guide, distance: Math.round(dist) });
+      newGuides.push({ ...guide, kind: "alignment" });
       return true;
     }
     return false;
@@ -5854,12 +6015,39 @@ function calculateScaleSnapGuides(scalingObj, corner, canvas, canvasWidth, canva
     checkHorizontalSnap(scaling.bottom, canvasCenterY, { type: "horizontal", position: canvasCenterY });
   }
   const rawObjects = canvas.getObjects();
+  const objectBounds = [];
   for (const obj of rawObjects) {
     if (obj === scalingObj) continue;
     const objId = getObjectId(obj);
     if (objId === "__background__") continue;
     if (objId && objId === scalingId) continue;
-    const other = getObjectSnapPoints(obj);
+    if (scalingObj instanceof fabric.ActiveSelection && scalingObj.contains(obj)) continue;
+    if (scalingObj instanceof fabric.Group && typeof scalingObj.getObjects === "function") {
+      const inner = scalingObj.getObjects();
+      if (inner.includes(obj)) continue;
+    }
+    objectBounds.push(getObjectSnapPoints(obj));
+  }
+  for (const bounds of additionalBounds) {
+    objectBounds.push(boundsToSnapPoints(bounds));
+  }
+  let bestWidthMatch = null;
+  let bestWidthDiff = threshold + 1;
+  let bestHeightMatch = null;
+  let bestHeightDiff = threshold + 1;
+  for (const other of objectBounds) {
+    const otherWidth = other.right - other.left;
+    const otherHeight = other.bottom - other.top;
+    const widthDiff = Math.abs(scaling.right - scaling.left - otherWidth);
+    const heightDiff = Math.abs(scaling.bottom - scaling.top - otherHeight);
+    if (resizingLeft !== resizingRight && widthDiff < bestWidthDiff) {
+      bestWidthDiff = widthDiff;
+      bestWidthMatch = other;
+    }
+    if (resizingTop !== resizingBottom && heightDiff < bestHeightDiff) {
+      bestHeightDiff = heightDiff;
+      bestHeightMatch = other;
+    }
     if (resizingLeft) {
       checkVerticalSnap(scaling.left, other.left, {
         type: "vertical",
@@ -5941,6 +6129,18 @@ function calculateScaleSnapGuides(scalingObj, corner, canvas, canvasWidth, canva
       });
     }
   }
+  if (bestWidthMatch && bestWidthDiff < threshold) {
+    newGuides.push(
+      { type: "horizontal", position: scaling.top, start: scaling.left, end: scaling.right, kind: "alignment" },
+      { type: "horizontal", position: bestWidthMatch.top, start: bestWidthMatch.left, end: bestWidthMatch.right, kind: "alignment" }
+    );
+  }
+  if (bestHeightMatch && bestHeightDiff < threshold) {
+    newGuides.push(
+      { type: "vertical", position: scaling.left, start: scaling.top, end: scaling.bottom, kind: "alignment" },
+      { type: "vertical", position: bestHeightMatch.left, start: bestHeightMatch.top, end: bestHeightMatch.bottom, kind: "alignment" }
+    );
+  }
   const seen = /* @__PURE__ */ new Set();
   return newGuides.filter((guide) => {
     const key = `${guide.type}-${guide.position.toFixed(1)}`;
@@ -5949,6 +6149,349 @@ function calculateScaleSnapGuides(scalingObj, corner, canvas, canvasWidth, canva
     return true;
   });
 }
+const MIN_SNAP_BOX = 20;
+const SNAP_HYSTERESIS_PX = 6;
+function applyScaleSnapToBox(box, corner, canvas, canvasWidth, canvasHeight, snapToGuides, snapThreshold, excludeObjectId, options) {
+  var _a2, _b2, _c, _d, _e, _f, _g, _h;
+  const hysteresis = (options == null ? void 0 : options.hysteresis) ?? SNAP_HYSTERESIS_PX;
+  const activeSnapRef = options == null ? void 0 : options.activeSnapRef;
+  const roundSnappedOnly = (options == null ? void 0 : options.roundSnappedOnly) ?? false;
+  if (!snapToGuides || !canvas) {
+    if (roundSnappedOnly) return { ...box };
+    return {
+      left: Math.round(box.left),
+      top: Math.round(box.top),
+      width: Math.round(box.width),
+      height: Math.round(box.height)
+    };
+  }
+  const threshold = snapThreshold || 5;
+  const releaseDist = threshold + hysteresis;
+  const matchDimensions = (options == null ? void 0 : options.matchDimensions) ?? true;
+  const excludedIds = new Set((options == null ? void 0 : options.excludeObjectIds) ?? []);
+  if (excludeObjectId) excludedIds.add(excludeObjectId);
+  const right = box.left + box.width;
+  const bottom = box.top + box.height;
+  const canvasCenterX = canvasWidth / 2;
+  const canvasCenterY = canvasHeight / 2;
+  const resizingLeft = corner.includes("l");
+  const resizingRight = corner.includes("r");
+  const resizingTop = corner.includes("t");
+  const resizingBottom = corner.includes("b");
+  const verticalTargets = [0, canvasWidth, canvasCenterX];
+  const horizontalTargets = [0, canvasHeight, canvasCenterY];
+  const widthTargets = [];
+  const heightTargets = [];
+  if ((_a2 = options == null ? void 0 : options.verticalTargetsExtra) == null ? void 0 : _a2.length) verticalTargets.push(...options.verticalTargetsExtra);
+  if ((_b2 = options == null ? void 0 : options.horizontalTargetsExtra) == null ? void 0 : _b2.length) horizontalTargets.push(...options.horizontalTargetsExtra);
+  const rawObjects = canvas.getObjects();
+  for (const obj of rawObjects) {
+    const objId = getObjectId(obj);
+    if (objId === "__background__") continue;
+    if (objId && excludedIds.has(objId)) continue;
+    const pts = getObjectSnapPoints(obj);
+    verticalTargets.push(pts.left, pts.right, pts.centerX);
+    horizontalTargets.push(pts.top, pts.bottom, pts.centerY);
+    widthTargets.push(Math.max(1, pts.right - pts.left));
+    heightTargets.push(Math.max(1, pts.bottom - pts.top));
+  }
+  for (const bounds of (options == null ? void 0 : options.additionalBounds) ?? []) {
+    const pts = boundsToSnapPoints(bounds);
+    verticalTargets.push(pts.left, pts.right, pts.centerX);
+    horizontalTargets.push(pts.top, pts.bottom, pts.centerY);
+    widthTargets.push(Math.max(1, bounds.width));
+    heightTargets.push(Math.max(1, bounds.height));
+  }
+  const matchAsEdgeEnabled = (options == null ? void 0 : options.matchDimensions) ?? true;
+  if (matchAsEdgeEnabled) {
+    if (resizingLeft && !resizingRight) {
+      for (const w of widthTargets) verticalTargets.push(right - w);
+    } else if (resizingRight && !resizingLeft) {
+      for (const w of widthTargets) verticalTargets.push(box.left + w);
+    }
+    if (resizingTop && !resizingBottom) {
+      for (const h of heightTargets) horizontalTargets.push(bottom - h);
+    } else if (resizingBottom && !resizingTop) {
+      for (const h of heightTargets) horizontalTargets.push(box.top + h);
+    }
+  }
+  const findBestSnap = (edgePos, targets) => {
+    let best = edgePos;
+    let bestDist = threshold + 1;
+    for (const t of targets) {
+      const d = Math.abs(edgePos - t);
+      if (d < bestDist) {
+        bestDist = d;
+        best = t;
+      }
+    }
+    return { value: best, dist: bestDist };
+  };
+  const findBestDimensionSnap = (size, targets) => {
+    let best = size;
+    let bestDist = threshold + 1;
+    for (const t of targets) {
+      const d = Math.abs(size - t);
+      if (d < bestDist) {
+        bestDist = d;
+        best = t;
+      }
+    }
+    return { value: best, dist: bestDist };
+  };
+  let left = box.left;
+  let top = box.top;
+  let width = box.width;
+  let height = box.height;
+  let snappedLeft = false;
+  let snappedRight = false;
+  let snappedTop = false;
+  let snappedBottom = false;
+  if (resizingLeft) {
+    const stick = (_c = activeSnapRef == null ? void 0 : activeSnapRef.current) == null ? void 0 : _c.left;
+    if (stick !== void 0) {
+      const dist = Math.abs(box.left - stick);
+      if (dist <= releaseDist) {
+        left = stick;
+        width = right - left;
+        snappedLeft = true;
+      } else if (dist > releaseDist) {
+        if (activeSnapRef.current) delete activeSnapRef.current.left;
+        const { value, dist: d } = findBestSnap(box.left, verticalTargets);
+        if (d <= threshold) {
+          if (!(activeSnapRef == null ? void 0 : activeSnapRef.current)) activeSnapRef.current = {};
+          activeSnapRef.current.left = value;
+          left = value;
+          width = right - left;
+          snappedLeft = true;
+        } else {
+          left = box.left;
+          width = right - left;
+        }
+      } else {
+        left = box.left;
+        width = right - left;
+      }
+    } else {
+      const { value, dist } = findBestSnap(box.left, verticalTargets);
+      if (dist <= threshold) {
+        if (activeSnapRef) {
+          if (!activeSnapRef.current) activeSnapRef.current = {};
+          activeSnapRef.current.left = value;
+        }
+        left = value;
+        width = right - left;
+        snappedLeft = true;
+      } else {
+        left = box.left;
+        width = right - left;
+      }
+    }
+  }
+  if (resizingRight) {
+    const stick = (_d = activeSnapRef == null ? void 0 : activeSnapRef.current) == null ? void 0 : _d.right;
+    if (stick !== void 0) {
+      const dist = Math.abs(right - stick);
+      if (dist <= releaseDist) {
+        width = stick - left;
+        snappedRight = true;
+      } else if (dist > releaseDist) {
+        if (activeSnapRef == null ? void 0 : activeSnapRef.current) delete activeSnapRef.current.right;
+        const { value, dist: d } = findBestSnap(right, verticalTargets);
+        if (d <= threshold) {
+          if (!(activeSnapRef == null ? void 0 : activeSnapRef.current)) activeSnapRef.current = {};
+          activeSnapRef.current.right = value;
+          width = value - left;
+          snappedRight = true;
+        } else {
+          width = box.width;
+        }
+      } else {
+        width = box.width;
+      }
+    } else {
+      const { value, dist } = findBestSnap(right, verticalTargets);
+      if (dist <= threshold) {
+        if (activeSnapRef) {
+          if (!activeSnapRef.current) activeSnapRef.current = {};
+          activeSnapRef.current.right = value;
+        }
+        width = value - left;
+        snappedRight = true;
+      } else {
+        width = box.width;
+      }
+    }
+  }
+  if (resizingTop) {
+    const stick = (_e = activeSnapRef == null ? void 0 : activeSnapRef.current) == null ? void 0 : _e.top;
+    if (stick !== void 0) {
+      const dist = Math.abs(box.top - stick);
+      if (dist <= releaseDist) {
+        top = stick;
+        height = bottom - top;
+        snappedTop = true;
+      } else if (dist > releaseDist) {
+        if (activeSnapRef == null ? void 0 : activeSnapRef.current) delete activeSnapRef.current.top;
+        const { value, dist: d } = findBestSnap(box.top, horizontalTargets);
+        if (d <= threshold) {
+          if (!(activeSnapRef == null ? void 0 : activeSnapRef.current)) activeSnapRef.current = {};
+          activeSnapRef.current.top = value;
+          top = value;
+          height = bottom - top;
+          snappedTop = true;
+        } else {
+          top = box.top;
+          height = bottom - top;
+        }
+      } else {
+        top = box.top;
+        height = bottom - top;
+      }
+    } else {
+      const { value, dist } = findBestSnap(box.top, horizontalTargets);
+      if (dist <= threshold) {
+        if (activeSnapRef) {
+          if (!activeSnapRef.current) activeSnapRef.current = {};
+          activeSnapRef.current.top = value;
+        }
+        top = value;
+        height = bottom - top;
+        snappedTop = true;
+      } else {
+        top = box.top;
+        height = bottom - top;
+      }
+    }
+  }
+  if (resizingBottom) {
+    const stick = (_f = activeSnapRef == null ? void 0 : activeSnapRef.current) == null ? void 0 : _f.bottom;
+    if (stick !== void 0) {
+      const dist = Math.abs(bottom - stick);
+      if (dist <= releaseDist) {
+        height = stick - top;
+        snappedBottom = true;
+      } else if (dist > releaseDist) {
+        if (activeSnapRef == null ? void 0 : activeSnapRef.current) delete activeSnapRef.current.bottom;
+        const { value, dist: d } = findBestSnap(bottom, horizontalTargets);
+        if (d <= threshold) {
+          if (!(activeSnapRef == null ? void 0 : activeSnapRef.current)) activeSnapRef.current = {};
+          activeSnapRef.current.bottom = value;
+          height = value - top;
+          snappedBottom = true;
+        } else {
+          height = box.height;
+        }
+      } else {
+        height = box.height;
+      }
+    } else {
+      const { value, dist } = findBestSnap(bottom, horizontalTargets);
+      if (dist <= threshold) {
+        if (activeSnapRef) {
+          if (!activeSnapRef.current) activeSnapRef.current = {};
+          activeSnapRef.current.bottom = value;
+        }
+        height = value - top;
+        snappedBottom = true;
+      } else {
+        height = box.height;
+      }
+    }
+  }
+  if (matchDimensions && resizingLeft !== resizingRight && !snappedLeft && !snappedRight && widthTargets.length > 0) {
+    const stick = (_g = activeSnapRef == null ? void 0 : activeSnapRef.current) == null ? void 0 : _g.width;
+    const applyWidth = (targetWidth) => {
+      width = Math.max(MIN_SNAP_BOX, targetWidth);
+      if (resizingLeft) {
+        left = right - width;
+        snappedLeft = true;
+      } else {
+        snappedRight = true;
+      }
+    };
+    if (stick !== void 0) {
+      const dist = Math.abs(box.width - stick);
+      if (dist <= releaseDist) {
+        applyWidth(stick);
+      } else if (dist > releaseDist) {
+        if (activeSnapRef == null ? void 0 : activeSnapRef.current) delete activeSnapRef.current.width;
+        const { value, dist: d } = findBestDimensionSnap(box.width, widthTargets);
+        if (d <= threshold) {
+          if (activeSnapRef) {
+            if (!activeSnapRef.current) activeSnapRef.current = {};
+            activeSnapRef.current.width = value;
+          }
+          applyWidth(value);
+        }
+      }
+    } else {
+      const { value, dist } = findBestDimensionSnap(box.width, widthTargets);
+      if (dist <= threshold) {
+        if (activeSnapRef) {
+          if (!activeSnapRef.current) activeSnapRef.current = {};
+          activeSnapRef.current.width = value;
+        }
+        applyWidth(value);
+      }
+    }
+  }
+  if (matchDimensions && resizingTop !== resizingBottom && !snappedTop && !snappedBottom && heightTargets.length > 0) {
+    const stick = (_h = activeSnapRef == null ? void 0 : activeSnapRef.current) == null ? void 0 : _h.height;
+    const applyHeight = (targetHeight) => {
+      height = Math.max(MIN_SNAP_BOX, targetHeight);
+      if (resizingTop) {
+        top = bottom - height;
+        snappedTop = true;
+      } else {
+        snappedBottom = true;
+      }
+    };
+    if (stick !== void 0) {
+      const dist = Math.abs(box.height - stick);
+      if (dist <= releaseDist) {
+        applyHeight(stick);
+      } else if (dist > releaseDist) {
+        if (activeSnapRef == null ? void 0 : activeSnapRef.current) delete activeSnapRef.current.height;
+        const { value, dist: d } = findBestDimensionSnap(box.height, heightTargets);
+        if (d <= threshold) {
+          if (activeSnapRef) {
+            if (!activeSnapRef.current) activeSnapRef.current = {};
+            activeSnapRef.current.height = value;
+          }
+          applyHeight(value);
+        }
+      }
+    } else {
+      const { value, dist } = findBestDimensionSnap(box.height, heightTargets);
+      if (dist <= threshold) {
+        if (activeSnapRef) {
+          if (!activeSnapRef.current) activeSnapRef.current = {};
+          activeSnapRef.current.height = value;
+        }
+        applyHeight(value);
+      }
+    }
+  }
+  width = Math.max(MIN_SNAP_BOX, width);
+  height = Math.max(MIN_SNAP_BOX, height);
+  if (resizingLeft && !resizingRight) left = right - width;
+  if (resizingTop && !resizingBottom) top = bottom - height;
+  if (roundSnappedOnly) {
+    return {
+      left: snappedLeft ? Math.round(left) : left,
+      top: snappedTop ? Math.round(top) : top,
+      width: snappedLeft || snappedRight ? Math.round(width) : width,
+      height: snappedTop || snappedBottom ? Math.round(height) : height
+    };
+  }
+  return {
+    left: Math.round(left),
+    top: Math.round(top),
+    width: Math.round(width),
+    height: Math.round(height)
+  };
+}
 const clamp01$1 = (v) => Math.max(0, Math.min(1, Number.isFinite(v) ? v : 0));
 function arcPath(w, sag, up) {
   if (sag <= 0.5) return `M 0 0 L ${w} 0`;
@@ -6119,12 +6662,87 @@ if (Array.isArray(stateProps)) {
   if (!stateProps.includes("minBoxHeight")) stateProps.push("minBoxHeight");
   if (!stateProps.includes("verticalAlign")) stateProps.push("verticalAlign");
   if (!stateProps.includes("textPath")) stateProps.push("textPath");
+  if (!stateProps.includes("smartWrap")) stateProps.push("smartWrap");
 }
 const cacheProps = fabric.Textbox.prototype.cacheProperties;
 if (Array.isArray(cacheProps)) {
   if (!cacheProps.includes("minBoxHeight")) cacheProps.push("minBoxHeight");
   if (!cacheProps.includes("verticalAlign")) cacheProps.push("verticalAlign");
   if (!cacheProps.includes("textPath")) cacheProps.push("textPath");
+  if (!cacheProps.includes("smartWrap")) cacheProps.push("smartWrap");
+}
+fabric.Textbox.prototype.smartWrap = true;
+if (TextboxProto._wrapLine && !TextboxProto.__pixldocsOrigWrapLine) {
+  TextboxProto.__pixldocsOrigWrapLine = TextboxProto._wrapLine;
+  TextboxProto._wrapLine = function(lineIndex, desiredWidth, ref, reservedSpace = 0) {
+    var _a2;
+    const orig = TextboxProto.__pixldocsOrigWrapLine;
+    if (!this.smartWrap || this.splitByGrapheme) {
+      return orig.call(this, lineIndex, desiredWidth, ref, reservedSpace);
+    }
+    try {
+      const additionalSpace = TextboxProto._getWidthOfCharSpacing.call(this);
+      const data = ((_a2 = ref == null ? void 0 : ref.wordsData) == null ? void 0 : _a2[lineIndex]) ?? [];
+      const effective = Math.max(1, desiredWidth - reservedSpace);
+      const infix = " ";
+      const measureWord = TextboxProto._measureWord;
+      const infixWidth = measureWord.call(this, [infix], lineIndex, 0);
+      const graphemeLines = [];
+      let line = [];
+      let lineWidth = 0;
+      let lineJustStarted = true;
+      let largestWordWidth = 0;
+      let offset = 0;
+      const pushLine = () => {
+        graphemeLines.push(line);
+        line = [];
+        lineWidth = 0;
+        lineJustStarted = true;
+      };
+      for (let i = 0; i < data.length; i++) {
+        const { word, width: wordWidth } = data[i];
+        if (wordWidth <= effective) {
+          if (wordWidth > largestWordWidth) largestWordWidth = wordWidth;
+          const projected = lineJustStarted ? wordWidth : lineWidth + infixWidth + wordWidth - additionalSpace;
+          if (!lineJustStarted && projected > effective) {
+            pushLine();
+          }
+          if (!lineJustStarted) {
+            line.push(infix);
+            lineWidth += infixWidth;
+          }
+          line = line.concat(word);
+          lineWidth += wordWidth;
+          lineJustStarted = false;
+        } else {
+          if (!lineJustStarted) pushLine();
+          for (const g of word) {
+            const gw = measureWord.call(this, [g], lineIndex, offset);
+            if (gw > largestWordWidth) largestWordWidth = gw;
+            const projected = lineJustStarted ? gw : lineWidth + gw - additionalSpace;
+            if (!lineJustStarted && projected > effective) {
+              pushLine();
+            }
+            line.push(g);
+            lineWidth += gw;
+            lineJustStarted = false;
+            offset++;
+          }
+          offset -= word.length;
+        }
+        offset += word.length + 1;
+      }
+      if (line.length) graphemeLines.push(line);
+      const minNeeded = Math.max(0, Math.min(largestWordWidth, effective) - additionalSpace + reservedSpace);
+      if (minNeeded > this.dynamicMinWidth) {
+        this.dynamicMinWidth = minNeeded;
+      }
+      return graphemeLines;
+    } catch (e) {
+      console.warn("[smartWrap] fell back to default wrap:", e);
+      return orig.call(this, lineIndex, desiredWidth, ref, reservedSpace);
+    }
+  };
 }
 const hasActiveTextPath = (obj) => {
   const tp = obj.textPath;
@@ -6281,14 +6899,14 @@ function scaleLocalToScreen(target, p) {
   return new fabric.Point(p.x * sx * zx, p.y * sy * zy);
 }
 function applyTextPathControls(textbox) {
-  var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v;
+  var _a2, _b2, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v;
   const obj = textbox;
   if (!hasActiveTextPath(obj)) {
     obj.__pdTextPathHovered = false;
     if (obj.__pdTextPathControls) {
       try {
         const cu2 = fabric.controlsUtils;
-        const defaults = ((_a2 = cu2 == null ? void 0 : cu2.createTextboxDefaultControls) == null ? void 0 : _a2.call(cu2)) ?? ((_b = cu2 == null ? void 0 : cu2.createObjectDefaultControls) == null ? void 0 : _b.call(cu2));
+        const defaults = ((_a2 = cu2 == null ? void 0 : cu2.createTextboxDefaultControls) == null ? void 0 : _a2.call(cu2)) ?? ((_b2 = cu2 == null ? void 0 : cu2.createObjectDefaultControls) == null ? void 0 : _b2.call(cu2));
         if (defaults) obj.controls = defaults;
       } catch {
       }
@@ -6552,7 +7170,7 @@ function applyTextPathControls(textbox) {
       actionName: "tpPivot",
       positionHandler: (_d2, finalMatrix, fabricObject) => scaleLocalToScreen(fabricObject, getPivotLocalCentered(fabricObject)).transform(finalMatrix),
       actionHandler: (_e2, transform, x, y) => {
-        var _a3, _b2;
+        var _a3, _b3;
         const target = transform.target;
         const state = transform.__pdCirclePivotDrag || (transform.__pdCirclePivotDrag = {
           startMatrix: target.calcTransformMatrix(),
@@ -6569,7 +7187,7 @@ function applyTextPathControls(textbox) {
           y: (state.startOffset.y || 0) + dy
         };
         target.setCoords();
-        (_b2 = target.canvas) == null ? void 0 : _b2.requestRenderAll();
+        (_b3 = target.canvas) == null ? void 0 : _b3.requestRenderAll();
         return true;
       },
       render: renderPivot
@@ -6620,13 +7238,13 @@ function applyTextPathControls(textbox) {
     }
     if (!obj.__pdCirclePivotDblWired) {
       obj.on("mousedblclick", () => {
-        var _a3, _b2;
+        var _a3, _b3;
         if (((_a3 = obj.textPath) == null ? void 0 : _a3.preset) !== "circle") return;
         if (obj.__corner !== "tpPivot") return;
         if (!obj.textPath.pivot) return;
         obj.textPath.pivot = { x: 0, y: 0 };
         obj.setCoords();
-        (_b2 = obj.canvas) == null ? void 0 : _b2.requestRenderAll();
+        (_b3 = obj.canvas) == null ? void 0 : _b3.requestRenderAll();
       });
       obj.__pdCirclePivotDblWired = true;
     }
@@ -6994,10 +7612,10 @@ function textPathBoundsContainScenePoint(obj, point) {
   }
 }
 function drawTextPathBounds(ctx, obj, bounds, hostCanvas) {
-  var _a2, _b, _c;
+  var _a2, _b2, _c;
   const host = hostCanvas || obj.canvas || ((_a2 = obj.group) == null ? void 0 : _a2.canvas);
   if (!host) return;
-  const retina = ((_b = host.getRetinaScaling) == null ? void 0 : _b.call(host)) || ((_c = obj.getCanvasRetinaScaling) == null ? void 0 : _c.call(obj)) || 1;
+  const retina = ((_b2 = host.getRetinaScaling) == null ? void 0 : _b2.call(host)) || ((_c = obj.getCanvasRetinaScaling) == null ? void 0 : _c.call(obj)) || 1;
   const matrix = fabric.util.multiplyTransformMatrices(host.viewportTransform || [1, 0, 0, 1, 0, 0], obj.calcTransformMatrix());
   const corners = [
     new fabric.Point(bounds.minX, bounds.minY),
@@ -7019,8 +7637,8 @@ function drawTextPathBounds(ctx, obj, bounds, hostCanvas) {
 }
 if (typeof TextboxProto._renderControls === "function" && !TextboxProto.__pixldocsOrigRenderControls) {
   let drawWarpGuides = function(ctx) {
-    var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j;
-    const hostCanvas = this.canvas || ((_a2 = this.group) == null ? void 0 : _a2.canvas) || ((_c = (_b = this.group) == null ? void 0 : _b.group) == null ? void 0 : _c.canvas);
+    var _a2, _b2, _c, _d, _e, _f, _g, _h, _i, _j;
+    const hostCanvas = this.canvas || ((_a2 = this.group) == null ? void 0 : _a2.canvas) || ((_c = (_b2 = this.group) == null ? void 0 : _b2.group) == null ? void 0 : _c.canvas);
     if (!hostCanvas) return;
     const hoverBounds = getTextPathHitBounds(this);
     const active = (_d = hostCanvas.getActiveObject) == null ? void 0 : _d.call(hostCanvas);
@@ -7443,12 +8061,12 @@ function buildRoundedRectPath2D(ctx, x, y, w, h, rTL, rTR, rBR, rBL) {
   ctx.closePath();
 }
 function measureLineGlyphWidth(obj, lineIndex) {
-  var _a2, _b, _c, _d, _e, _f;
+  var _a2, _b2, _c, _d, _e, _f;
   try {
     const rawLine = (_a2 = obj == null ? void 0 : obj._textLines) == null ? void 0 : _a2[lineIndex];
     const lineText = Array.isArray(rawLine) ? rawLine.join("") : String(rawLine ?? "");
     if (!lineText) return 0;
-    const fontSize = Number(((_b = obj.getValueOfPropertyAt) == null ? void 0 : _b.call(obj, lineIndex, 0, "fontSize")) ?? obj.fontSize ?? 0);
+    const fontSize = Number(((_b2 = obj.getValueOfPropertyAt) == null ? void 0 : _b2.call(obj, lineIndex, 0, "fontSize")) ?? obj.fontSize ?? 0);
     if (!fontSize) return 0;
     const fontStyle = String(((_c = obj.getValueOfPropertyAt) == null ? void 0 : _c.call(obj, lineIndex, 0, "fontStyle")) ?? obj.fontStyle ?? "normal");
     const fontWeight = String(((_d = obj.getValueOfPropertyAt) == null ? void 0 : _d.call(obj, lineIndex, 0, "fontWeight")) ?? obj.fontWeight ?? "400");
@@ -7717,7 +8335,7 @@ function applyTextBackground(obj, cfg) {
   const originalToSVG = (_a2 = obj.toSVG) == null ? void 0 : _a2.bind(obj);
   if (typeof originalToSVG === "function") {
     obj.toSVG = function(reviver) {
-      var _a3, _b;
+      var _a3, _b2;
       let svg = originalToSVG(reviver);
       const bg = this[PD_BG_KEY];
       const shadow = this.shadow;
@@ -7766,7 +8384,7 @@ function applyTextBackground(obj, cfg) {
       const bgOpacityAttr = bgOpacity < 1 ? ` fill-opacity="${bgOpacity}"` : "";
       let bgGradDefs = "";
       let bgFillAttr = escapeXmlAttr(bgFill);
-      if (hasBg && (bg == null ? void 0 : bg.gradient) && ((_b = bg.gradient.stops) == null ? void 0 : _b.length) >= 2) {
+      if (hasBg && (bg == null ? void 0 : bg.gradient) && ((_b2 = bg.gradient.stops) == null ? void 0 : _b2.length) >= 2) {
         const bounds = ribbonD ? computeRibbonBoundsFor(this, pT, pR, pB, pL) : unionBounds(rects);
         const gid = `__pdBgGrad_${Math.random().toString(36).slice(2, 9)}`;
         const def = buildSvgGradientDef(bg.gradient, gid, bounds.x, bounds.y, bounds.w, bounds.h);
@@ -8795,9 +9413,9 @@ function createShape(element) {
       });
     }
     case "circle": {
-      const radius = Math.min(w, h) / 2;
-      return new fabric.Circle({
-        radius,
+      return new fabric.Ellipse({
+        rx: w / 2,
+        ry: h / 2,
         fill,
         stroke,
         strokeWidth,
@@ -8806,8 +9424,7 @@ function createShape(element) {
         objectCaching: true,
         strokeUniform: true,
         strokeLineJoin: "round",
-        strokeLineCap: "round",
-        lockUniScaling: true
+        strokeLineCap: "round"
       });
     }
     case "triangle": {
@@ -8842,7 +9459,7 @@ function createShape(element) {
   }
 }
 function createText(element) {
-  var _a2, _b, _c, _d, _e;
+  var _a2, _b2, _c, _d, _e;
   const overflowPolicy = element.overflowPolicy || "grow-and-push";
   let text = element.text || "Text";
   let fontSize = element.fontSize || 16;
@@ -9043,7 +9660,7 @@ function createText(element) {
   textbox.setCoords();
   const widthAfterSet = textbox.width ?? 0;
   try {
-    (_b = textbox.setControlsVisibility) == null ? void 0 : _b.call(textbox, {
+    (_b2 = textbox.setControlsVisibility) == null ? void 0 : _b2.call(textbox, {
       tl: true,
       tr: true,
       bl: true,
@@ -9842,34 +10459,595 @@ function bakeEdgeFade(source, fade) {
   return canvas;
 }
 const SELECTION_PRIMARY = "hsl(217, 91%, 60%)";
+const SELECTION_BORDER_SCALE = 2;
+let ensureCanvaControlRenders = () => {
+};
 try {
   const InteractiveBase = fabric.InteractiveFabricObject ?? fabric.Object;
+  if ((InteractiveBase == null ? void 0 : InteractiveBase.prototype) && !InteractiveBase.prototype.__pixldocsCenteredSelectionBorder) {
+    InteractiveBase.prototype.__pixldocsCenteredSelectionBorder = true;
+    InteractiveBase.prototype.strokeBorders = function(ctx, size) {
+      const border = Number(this.borderScaleFactor ?? SELECTION_BORDER_SCALE) || SELECTION_BORDER_SCALE;
+      const width = Math.max(0, ((size == null ? void 0 : size.x) ?? 0) - border);
+      const height = Math.max(0, ((size == null ? void 0 : size.y) ?? 0) - border);
+      ctx.strokeRect(-width / 2, -height / 2, width, height);
+    };
+  }
   if (InteractiveBase == null ? void 0 : InteractiveBase.ownDefaults) {
     Object.assign(InteractiveBase.ownDefaults, {
       borderColor: SELECTION_PRIMARY,
-      borderScaleFactor: 1.25,
+      borderScaleFactor: SELECTION_BORDER_SCALE,
       cornerColor: SELECTION_PRIMARY,
       cornerStrokeColor: "#ffffff",
-      cornerStyle: "rect",
+      cornerStyle: "circle",
       transparentCorners: false,
-      cornerSize: 8,
+      cornerSize: 10,
       borderOpacityWhenMoving: 0.9
     });
   } else if (InteractiveBase == null ? void 0 : InteractiveBase.prototype) {
     Object.assign(InteractiveBase.prototype, {
       borderColor: SELECTION_PRIMARY,
-      borderScaleFactor: 1.25,
+      borderScaleFactor: SELECTION_BORDER_SCALE,
       cornerColor: SELECTION_PRIMARY,
       cornerStrokeColor: "#ffffff",
-      cornerStyle: "rect",
+      cornerStyle: "circle",
       transparentCorners: false,
-      cornerSize: 8,
+      cornerSize: 10,
       borderOpacityWhenMoving: 0.9
     });
   }
 } catch (e) {
   console.warn("[PageCanvas] Failed to apply global selection defaults:", e);
 }
+try {
+  const cu = fabric.controlsUtils;
+  if (cu && typeof cu.createObjectDefaultControls === "function") {
+    const PILL_LEN = 20;
+    const PILL_THICK = 6;
+    const PILL_RADIUS = 3;
+    const CORNER_RADIUS = 6;
+    const EDGE_HIT_PERP = 22;
+    const EDGE_HIT_ALONG = 44;
+    const HOVER_FILL = SELECTION_PRIMARY;
+    const HOVER_STROKE = "#ffffff";
+    const IDLE_FILL = "#ffffff";
+    const IDLE_STROKE = "rgba(15, 23, 42, 0.18)";
+    const isHovered = (fabricObject, controlKey) => fabricObject && fabricObject.__corner === controlKey;
+    const getHoverProgress = (fabricObject, controlKey) => {
+      const map = fabricObject == null ? void 0 : fabricObject.__handleHoverProgress;
+      const p = map ? map[controlKey] : void 0;
+      if (typeof p === "number") return Math.max(0, Math.min(1, p));
+      return isHovered(fabricObject, controlKey) ? 1 : 0;
+    };
+    const HOVER_RGB = [59, 130, 246];
+    const IDLE_RGB = [255, 255, 255];
+    const lerpFill = (p) => {
+      const r = Math.round(IDLE_RGB[0] + (HOVER_RGB[0] - IDLE_RGB[0]) * p);
+      const g = Math.round(IDLE_RGB[1] + (HOVER_RGB[1] - IDLE_RGB[1]) * p);
+      const b = Math.round(IDLE_RGB[2] + (HOVER_RGB[2] - IDLE_RGB[2]) * p);
+      return `rgb(${r}, ${g}, ${b})`;
+    };
+    const getVisualScale = (_fabricObject) => {
+      return 1;
+    };
+    const COLLAPSE_THRESHOLD_PX = 32;
+    const shouldCollapseHandles = (fabricObject) => {
+      var _a2, _b2, _c;
+      try {
+        const canvas = fabricObject == null ? void 0 : fabricObject.canvas;
+        if (!canvas) return false;
+        const zoom = ((_a2 = canvas.getZoom) == null ? void 0 : _a2.call(canvas)) ?? 1;
+        const w = (((_b2 = fabricObject.getScaledWidth) == null ? void 0 : _b2.call(fabricObject)) ?? fabricObject.width ?? 0) * zoom;
+        const h = (((_c = fabricObject.getScaledHeight) == null ? void 0 : _c.call(fabricObject)) ?? fabricObject.height ?? 0) * zoom;
+        return Math.min(w, h) < COLLAPSE_THRESHOLD_PX;
+      } catch {
+        return false;
+      }
+    };
+    const isVisibleControlWhenCollapsed = (controlKey) => controlKey === "tl" || controlKey === "mr" || controlKey === "mtr" || controlKey === "mvh";
+    const wrapCollapseVisibility = (control, controlKey) => {
+      if (!control || control.__pixldocsCollapseVisibilityWrapped) return;
+      const originalGetVisibility = typeof control.getVisibility === "function" ? control.getVisibility.bind(control) : null;
+      control.getVisibility = (fabricObject, key) => {
+        const baseVisible = originalGetVisibility ? originalGetVisibility(fabricObject, key) : control.visible !== false;
+        if (!baseVisible) return false;
+        return !shouldCollapseHandles(fabricObject) || isVisibleControlWhenCollapsed(controlKey);
+      };
+      control.__pixldocsCollapseVisibilityWrapped = true;
+    };
+    const renderPill = (ctx, left, top, _styleOverride, fabricObject, orientation, controlKey) => {
+      var _a2, _b2, _c;
+      const action = (_b2 = (_a2 = fabricObject.canvas) == null ? void 0 : _a2._currentTransform) == null ? void 0 : _b2.action;
+      if (action === "drag" && fabricObject.__pixldocsDragMoved) return;
+      if (shouldCollapseHandles(fabricObject) && !isVisibleControlWhenCollapsed(controlKey)) return;
+      const angle = ((_c = fabricObject.getTotalAngle) == null ? void 0 : _c.call(fabricObject)) ?? (fabricObject.angle ?? 0);
+      const p = getHoverProgress(fabricObject, controlKey);
+      const scale = getVisualScale(fabricObject);
+      const pillLen = PILL_LEN * scale;
+      const pillThick = PILL_THICK * scale;
+      const w = orientation === "horizontal" ? pillLen : pillThick;
+      const h = orientation === "horizontal" ? pillThick : pillLen;
+      ctx.save();
+      ctx.translate(left, top);
+      ctx.rotate(angle * Math.PI / 180);
+      ctx.beginPath();
+      const x = -w / 2;
+      const y = -h / 2;
+      const r = Math.min(PILL_RADIUS * scale, Math.min(w, h) / 2);
+      ctx.moveTo(x + r, y);
+      ctx.lineTo(x + w - r, y);
+      ctx.quadraticCurveTo(x + w, y, x + w, y + r);
+      ctx.lineTo(x + w, y + h - r);
+      ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h);
+      ctx.lineTo(x + r, y + h);
+      ctx.quadraticCurveTo(x, y + h, x, y + h - r);
+      ctx.lineTo(x, y + r);
+      ctx.quadraticCurveTo(x, y, x + r, y);
+      ctx.closePath();
+      ctx.fillStyle = lerpFill(p);
+      ctx.strokeStyle = `rgba(15, 23, 42, ${0.18 * (1 - p)})`;
+      ctx.lineWidth = 0.75 * (1 - p);
+      ctx.shadowColor = "rgba(15, 23, 42, 0.38)";
+      ctx.shadowBlur = 8;
+      ctx.shadowOffsetY = 2;
+      ctx.fill();
+      if (p < 1) ctx.stroke();
+      ctx.restore();
+    };
+    const renderCornerDot = (ctx, left, top, _styleOverride, fabricObject, controlKey) => {
+      var _a2, _b2;
+      const action = (_b2 = (_a2 = fabricObject.canvas) == null ? void 0 : _a2._currentTransform) == null ? void 0 : _b2.action;
+      if (action === "drag" && fabricObject.__pixldocsDragMoved) return;
+      if (shouldCollapseHandles(fabricObject) && !isVisibleControlWhenCollapsed(controlKey)) return;
+      const p = getHoverProgress(fabricObject, controlKey);
+      const scale = getVisualScale(fabricObject);
+      const r = CORNER_RADIUS * scale;
+      ctx.save();
+      ctx.beginPath();
+      ctx.arc(left, top, r, 0, Math.PI * 2);
+      ctx.closePath();
+      ctx.fillStyle = lerpFill(p);
+      ctx.strokeStyle = `rgba(15, 23, 42, ${0.18 * (1 - p)})`;
+      ctx.lineWidth = 0.75 * (1 - p);
+      ctx.shadowColor = "rgba(15, 23, 42, 0.38)";
+      ctx.shadowBlur = 8;
+      ctx.shadowOffsetY = 2;
+      ctx.fill();
+      if (p < 1) ctx.stroke();
+      ctx.restore();
+    };
+    const installPillRenders = (controls) => {
+      var _a2;
+      const CUR_SIZE = 22;
+      const HOT = Math.round(CUR_SIZE / 2);
+      const makeCursor = (angleDeg) => {
+        const svg = `<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="${CUR_SIZE}" height="${CUR_SIZE}" viewBox="0 0 22 22">
+  <g transform="rotate(${angleDeg} 11 11)" fill="none" stroke="#000" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M2.5 11 L19.5 11" stroke="#fff" stroke-width="3.2"/>
+    <path d="M5 8.5 L2.5 11 L5 13.5" stroke="#fff" stroke-width="3.2"/>
+    <path d="M17 8.5 L19.5 11 L17 13.5" stroke="#fff" stroke-width="3.2"/>
+    <path d="M2.5 11 L19.5 11"/>
+    <path d="M5 8.5 L2.5 11 L5 13.5"/>
+    <path d="M17 8.5 L19.5 11 L17 13.5"/>
+  </g>
+</svg>`;
+        const encoded = encodeURIComponent(svg).replace(/'/g, "%27").replace(/"/g, "%22");
+        const fallback = angleDeg % 180 === 0 ? "ew-resize" : angleDeg % 180 === 90 ? "ns-resize" : angleDeg === 45 || angleDeg === 225 ? "nwse-resize" : "nesw-resize";
+        return `url("data:image/svg+xml;utf8,${encoded}") ${HOT} ${HOT}, ${fallback}`;
+      };
+      const cursorFor = {
+        ml: makeCursor(0),
+        mr: makeCursor(0),
+        mt: makeCursor(90),
+        mb: makeCursor(90),
+        tl: makeCursor(45),
+        br: makeCursor(45),
+        tr: makeCursor(135),
+        bl: makeCursor(135)
+      };
+      const ROTATE_ICON_PATH = "M505.4 122.5l-92.2-62.7c-6.7-4.5-15.6-3.1-20.7 3.1l-69.2 87.4c-5.2 6.6-4.1 16.1 2.5 21.3s16.1 4.1 21.3-2.5l50.4-63.8c2.9 14.6 4.3 29.4 4.3 44.3 0 125.2-101.9 227-227 227-45.8 0-90.5-13.8-128.2-39.6l79-27.8c8-2.5 12.4-11 9.9-18.9s-11-12.4-18.9-9.9c-.3.1-.7.2-1 .4l-105.2 37c-2 .7-3.9 1.8-5.4 3.3-4.2 3.8-6 9.7-4.5 15.2l29.3 107.5c1.8 6.6 7.8 11.1 14.6 11.1 1.4 0 2.7-.2 4-.5 8.1-2.2 12.8-10.5 10.6-18.6l-18-66.4c40.3 24.6 86.6 37.5 133.8 37.5 68.3.2 133.8-27 181.9-75.4 48.4-48.1 75.5-113.7 75.4-181.9 0-14.3-1.2-28.6-3.5-42.8l59.8 40.7c7.1 4.4 16.4 2.2 20.8-4.9 4.1-6.6 2.5-15.4-3.8-20.1z";
+      const CUR_R_SIZE = 18;
+      const HOT_R = Math.round(CUR_R_SIZE / 2);
+      const makeRotateCursor = (angleDeg) => {
+        const a = ((angleDeg + 215) % 360 + 360) % 360;
+        const halo = `<path d="${ROTATE_ICON_PATH}" fill="#fff" stroke="#fff" stroke-width="40" stroke-linejoin="round"/>`;
+        const fg = `<path d="${ROTATE_ICON_PATH}" fill="#0f172a" stroke="#0f172a" stroke-width="6" stroke-linejoin="round"/>`;
+        const svg = `<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="${CUR_R_SIZE}" height="${CUR_R_SIZE}" viewBox="0 0 512 512">
+  <g transform="rotate(${a} 256 256)">${halo}${fg}</g>
+</svg>`;
+        const encoded = encodeURIComponent(svg).replace(/'/g, "%27").replace(/"/g, "%22");
+        return `url("data:image/svg+xml;utf8,${encoded}") ${HOT_R} ${HOT_R}, crosshair`;
+      };
+      const rotateCursorCache = {};
+      const getRotateCursor = (fabricObject) => {
+        let objAngle = 0;
+        try {
+          objAngle = typeof (fabricObject == null ? void 0 : fabricObject.getTotalAngle) === "function" ? fabricObject.getTotalAngle() : (fabricObject == null ? void 0 : fabricObject.angle) ?? 0;
+        } catch {
+          objAngle = 0;
+        }
+        let a = (objAngle % 360 + 360) % 360;
+        a = Math.round(a / 15) * 15;
+        if (a === 360) a = 0;
+        if (!rotateCursorCache[a]) rotateCursorCache[a] = makeRotateCursor(a);
+        return rotateCursorCache[a];
+      };
+      const MOVE_PATHS_2D = [
+        new Path2D("M12 3L12.3648 2.65803L12 2.26894L11.6352 2.65803L12 3ZM11.5 9C11.5 9.27614 11.7239 9.5 12 9.5C12.2761 9.5 12.5 9.27614 12.5 9H11.5ZM15.3648 5.85803L12.3648 2.65803L11.6352 3.34197L14.6352 6.54197L15.3648 5.85803ZM11.6352 2.65803L8.63523 5.85803L9.36477 6.54197L12.3648 3.34197L11.6352 2.65803ZM11.5 3V9H12.5V3H11.5Z"),
+        new Path2D("M21 12L21.342 12.3648L21.7311 12L21.342 11.6352L21 12ZM15 11.5C14.7239 11.5 14.5 11.7239 14.5 12C14.5 12.2761 14.7239 12.5 15 12.5L15 11.5ZM18.142 15.3648L21.342 12.3648L20.658 11.6352L17.458 14.6352L18.142 15.3648ZM21.342 11.6352L18.142 8.63523L17.458 9.36477L20.658 12.3648L21.342 11.6352ZM21 11.5L15 11.5L15 12.5L21 12.5L21 11.5Z"),
+        new Path2D("M12 21L12.3648 21.342L12 21.7311L11.6352 21.342L12 21ZM11.5 15C11.5 14.7239 11.7239 14.5 12 14.5C12.2761 14.5 12.5 14.7239 12.5 15H11.5ZM15.3648 18.142L12.3648 21.342L11.6352 20.658L14.6352 17.458L15.3648 18.142ZM11.6352 21.342L8.63523 18.142L9.36477 17.458L12.3648 20.658L11.6352 21.342ZM11.5 21V15H12.5V21H11.5Z"),
+        new Path2D("M3 12L2.65803 12.3648L2.26894 12L2.65803 11.6352L3 12ZM9 11.5C9.27614 11.5 9.5 11.7239 9.5 12C9.5 12.2761 9.27614 12.5 9 12.5L9 11.5ZM5.85803 15.3648L2.65803 12.3648L3.34197 11.6352L6.54197 14.6352L5.85803 15.3648ZM2.65803 11.6352L5.85803 8.63523L6.54197 9.36477L3.34197 12.3648L2.65803 11.6352ZM3 11.5L9 11.5L9 12.5L3 12.5L3 11.5Z")
+      ];
+      const ROTATE_PATHS_2D = [
+        new Path2D("M22 12l-3 3-3-3"),
+        new Path2D("M2 12l3-3 3 3"),
+        new Path2D("M19.016 14v-1.95A7.05 7.05 0 0 0 8 6.22"),
+        new Path2D("M16.016 17.845A7.05 7.05 0 0 1 5 12.015V10"),
+        new Path2D("M5 10V9"),
+        new Path2D("M19 15v-1")
+      ];
+      const baseAngleFor = {
+        ml: 0,
+        mr: 0,
+        mt: 90,
+        mb: 90,
+        tl: 45,
+        br: 45,
+        tr: 135,
+        bl: 135
+      };
+      const cursorCache = {};
+      const getRotatedCursor = (key, fabricObject) => {
+        const base = baseAngleFor[key];
+        if (base === void 0) return cursorFor[key];
+        let objAngle = 0;
+        try {
+          objAngle = typeof (fabricObject == null ? void 0 : fabricObject.getTotalAngle) === "function" ? fabricObject.getTotalAngle() : (fabricObject == null ? void 0 : fabricObject.angle) ?? 0;
+        } catch {
+          objAngle = 0;
+        }
+        let a = ((base + objAngle) % 180 + 180) % 180;
+        a = Math.round(a / 15) * 15;
+        if (a === 180) a = 0;
+        if (!cursorCache[a]) cursorCache[a] = makeCursor(a);
+        return cursorCache[a];
+      };
+      const sides = [
+        ["ml", "vertical"],
+        ["mr", "vertical"],
+        ["mt", "horizontal"],
+        ["mb", "horizontal"]
+      ];
+      for (const [key, orient] of sides) {
+        const c = controls[key];
+        if (!c) continue;
+        c.sizeX = orient === "horizontal" ? EDGE_HIT_ALONG : EDGE_HIT_PERP;
+        c.sizeY = orient === "horizontal" ? EDGE_HIT_PERP : EDGE_HIT_ALONG;
+        c.touchSizeX = c.sizeX;
+        c.touchSizeY = c.sizeY;
+        wrapCollapseVisibility(c, key);
+        c.cursorStyle = cursorFor[key];
+        c.cursorStyleHandler = (_eventData, _control, fabricObject) => getRotatedCursor(key, fabricObject);
+        c.render = (ctx, left, top, styleOverride, fabricObject) => renderPill(ctx, left, top, styleOverride, fabricObject, orient, key);
+      }
+      const corners = ["tl", "tr", "bl", "br"];
+      for (const key of corners) {
+        const c = controls[key];
+        if (!c) continue;
+        c.sizeX = 16;
+        c.sizeY = 16;
+        c.touchSizeX = 24;
+        c.touchSizeY = 24;
+        wrapCollapseVisibility(c, key);
+        c.cursorStyle = cursorFor[key];
+        c.cursorStyleHandler = (_eventData, _control, fabricObject) => getRotatedCursor(key, fabricObject);
+        c.render = (ctx, left, top, styleOverride, fabricObject) => renderCornerDot(ctx, left, top, styleOverride, fabricObject, key);
+      }
+      const mtr = controls.mtr;
+      if (mtr) {
+        mtr.sizeX = 22;
+        mtr.sizeY = 22;
+        mtr.touchSizeX = 32;
+        mtr.touchSizeY = 32;
+        wrapCollapseVisibility(mtr, "mtr");
+        mtr.offsetY = -28;
+        mtr.withConnection = false;
+        mtr.x = 0;
+        mtr.y = -0.5;
+        mtr.cursorStyle = getRotateCursor(null);
+        mtr.cursorStyleHandler = (_e, _c, fabricObject) => {
+          const cursor = getRotateCursor(fabricObject);
+          try {
+            const canvas = fabricObject == null ? void 0 : fabricObject.canvas;
+            if (canvas) canvas.__pixldocsGetRotateCursor = getRotateCursor;
+            const upper = canvas == null ? void 0 : canvas.upperCanvasEl;
+            if (upper) upper.style.cursor = cursor;
+          } catch {
+          }
+          return cursor;
+        };
+        mtr.render = (ctx, left, top, _styleOverride, fabricObject) => {
+          var _a3, _b2;
+          const action = (_b2 = (_a3 = fabricObject.canvas) == null ? void 0 : _a3._currentTransform) == null ? void 0 : _b2.action;
+          if (action === "drag" && fabricObject.__pixldocsDragMoved) return;
+          const scale = getVisualScale(fabricObject);
+          const p = getHoverProgress(fabricObject, "mtr");
+          const r = 11 * scale;
+          ctx.save();
+          ctx.beginPath();
+          ctx.arc(left, top, r, 0, Math.PI * 2);
+          ctx.closePath();
+          ctx.fillStyle = lerpFill(p);
+          ctx.strokeStyle = `rgba(15, 23, 42, ${0.18 * (1 - p)})`;
+          ctx.lineWidth = 0.75 * (1 - p);
+          ctx.shadowColor = "rgba(15, 23, 42, 0.4)";
+          ctx.shadowBlur = 10;
+          ctx.shadowOffsetY = 2;
+          ctx.fill();
+          if (p < 1) ctx.stroke();
+          ctx.shadowColor = "transparent";
+          ctx.shadowBlur = 0;
+          ctx.shadowOffsetY = 0;
+          const iconColor = p > 0.5 ? "#ffffff" : "rgba(15, 23, 42, 0.85)";
+          ctx.strokeStyle = iconColor;
+          ctx.fillStyle = iconColor;
+          ctx.lineJoin = "miter";
+          ctx.miterLimit = 4;
+          {
+            const target = r * 1.55;
+            const s = target / 24;
+            ctx.translate(left, top);
+            ctx.scale(s, s);
+            ctx.translate(-12, -12);
+            ctx.strokeStyle = iconColor;
+            ctx.lineWidth = 1 / s;
+            ROTATE_PATHS_2D.forEach((p2d, index) => {
+              ctx.lineCap = index >= 4 ? "round" : "square";
+              ctx.stroke(p2d);
+            });
+          }
+          ctx.restore();
+        };
+      }
+      const moveActionHandler = (eventData, transform, x, y) => {
+        const target = transform.target;
+        if (!target) return false;
+        if (!transform.__pixldocsMoveStart) {
+          transform.__pixldocsMoveStart = {
+            x,
+            y,
+            left: target.left ?? 0,
+            top: target.top ?? 0
+          };
+        }
+        const s = transform.__pixldocsMoveStart;
+        target.set({ left: s.left + (x - s.x), top: s.top + (y - s.y) });
+        target.setCoords();
+        try {
+          const canvas = target.canvas;
+          if (canvas) {
+            canvas.fire("object:moving", { target, e: eventData == null ? void 0 : eventData.e, transform, pointer: { x, y } });
+            target.fire("moving", { e: eventData == null ? void 0 : eventData.e, transform, pointer: { x, y } });
+          }
+        } catch {
+        }
+        return true;
+      };
+      const renderMoveHandle = (ctx, left, top, _styleOverride, fabricObject) => {
+        var _a3, _b2;
+        if (!shouldCollapseHandles(fabricObject)) return;
+        const action = (_b2 = (_a3 = fabricObject.canvas) == null ? void 0 : _a3._currentTransform) == null ? void 0 : _b2.action;
+        if (action === "drag" && fabricObject.__pixldocsDragMoved) return;
+        const scale = getVisualScale(fabricObject);
+        const p = getHoverProgress(fabricObject, "mvh");
+        const r = 11 * scale;
+        ctx.save();
+        ctx.beginPath();
+        ctx.arc(left, top, r, 0, Math.PI * 2);
+        ctx.closePath();
+        ctx.fillStyle = lerpFill(p);
+        ctx.strokeStyle = `rgba(15, 23, 42, ${0.18 * (1 - p)})`;
+        ctx.lineWidth = 0.75 * (1 - p);
+        ctx.shadowColor = "rgba(15, 23, 42, 0.4)";
+        ctx.shadowBlur = 10;
+        ctx.shadowOffsetY = 2;
+        ctx.fill();
+        if (p < 1) ctx.stroke();
+        ctx.shadowColor = "transparent";
+        ctx.shadowBlur = 0;
+        ctx.shadowOffsetY = 0;
+        const iconColor = p > 0.5 ? "#ffffff" : "rgba(15, 23, 42, 0.85)";
+        ctx.fillStyle = iconColor;
+        const target = r * 1.5;
+        const s = target / 24;
+        ctx.translate(left, top);
+        ctx.scale(s, s);
+        ctx.translate(-12, -12);
+        for (const p2d of MOVE_PATHS_2D) ctx.fill(p2d);
+        ctx.restore();
+      };
+      if (!controls.mvh) {
+        const mvh = new fabric.Control({
+          x: 0,
+          y: 0.5,
+          offsetY: 28,
+          sizeX: 22,
+          sizeY: 22,
+          touchSizeX: 32,
+          touchSizeY: 32,
+          cursorStyle: "move",
+          actionName: "drag",
+          actionHandler: moveActionHandler,
+          render: renderMoveHandle
+        });
+        mvh.withConnection = false;
+        controls.mvh = mvh;
+      } else {
+        controls.mvh.render = renderMoveHandle;
+        controls.mvh.actionHandler = moveActionHandler;
+        controls.mvh.cursorStyle = "move";
+      }
+      wrapCollapseVisibility(controls.mvh, "mvh");
+      const baseGetVisibility = (_a2 = controls.mvh.getVisibility) == null ? void 0 : _a2.bind(controls.mvh);
+      if (baseGetVisibility && !controls.mvh.__pixldocsMvhVisibilityWrapped) {
+        controls.mvh.getVisibility = (fabricObject, key) => {
+          if (!shouldCollapseHandles(fabricObject)) return false;
+          return baseGetVisibility(fabricObject, key);
+        };
+        controls.mvh.__pixldocsMvhVisibilityWrapped = true;
+      }
+      return controls;
+    };
+    ensureCanvaControlRenders = (obj) => {
+      try {
+        if (obj && obj.controls) installPillRenders(obj.controls);
+        if (obj && Array.isArray(obj._objects)) {
+          for (const child of obj._objects) {
+            if (child && child.controls) installPillRenders(child.controls);
+          }
+        }
+      } catch (e) {
+      }
+    };
+    const origObj = cu.createObjectDefaultControls.bind(cu);
+    cu.createObjectDefaultControls = () => installPillRenders(origObj());
+    if (typeof cu.createTextboxDefaultControls === "function") {
+      const origTb = cu.createTextboxDefaultControls.bind(cu);
+      cu.createTextboxDefaultControls = () => installPillRenders(origTb());
+    }
+    const wrapClassCreateControls = (Klass) => {
+      if (!Klass || typeof Klass.createControls !== "function") return;
+      const orig = Klass.createControls.bind(Klass);
+      Klass.createControls = () => {
+        const res = orig();
+        if (res && res.controls) installPillRenders(res.controls);
+        return res;
+      };
+    };
+    wrapClassCreateControls(fabric.InteractiveFabricObject);
+    wrapClassCreateControls(fabric.FabricObject);
+    wrapClassCreateControls(fabric.Textbox);
+    wrapClassCreateControls(fabric.IText);
+    const CanvasProto = (_b = fabric.Canvas) == null ? void 0 : _b.prototype;
+    if (CanvasProto && typeof CanvasProto._setCursorFromEvent === "function") {
+      const origSet = CanvasProto._setCursorFromEvent;
+      CanvasProto._setCursorFromEvent = function(e, target) {
+        const prev = target && target.__corner;
+        const res = origSet.call(this, e, target);
+        const next = target && target.__corner;
+        if (prev !== next) {
+          try {
+            this.requestRenderAll();
+          } catch {
+          }
+        }
+        return res;
+      };
+    }
+  }
+} catch (e) {
+  console.warn("[PageCanvas] Failed to install Canva-style control handles:", e);
+}
+const scaleTextPathConfig = (textPath, sx, sy, uniform) => {
+  if (!textPath || typeof textPath !== "object") return textPath;
+  const next = JSON.parse(JSON.stringify(textPath));
+  if (typeof next.radius === "number") next.radius *= uniform;
+  if (next.bbox) {
+    if (typeof next.bbox.width === "number") next.bbox.width *= sx;
+    if (typeof next.bbox.height === "number") next.bbox.height *= sy;
+  }
+  if (next.endpoints) {
+    if (typeof next.endpoints.leftY === "number") next.endpoints.leftY *= sy;
+    if (typeof next.endpoints.rightY === "number") next.endpoints.rightY *= sy;
+    if (typeof next.endpoints.centerY === "number") next.endpoints.centerY *= sy;
+  }
+  if (next.pivot) {
+    if (typeof next.pivot.x === "number") next.pivot.x *= sx;
+    if (typeof next.pivot.y === "number") next.pivot.y *= sy;
+  }
+  if (next.bezier) {
+    ["p0", "c0", "c1", "p1"].forEach((key) => {
+      if (Array.isArray(next.bezier[key])) {
+        next.bezier[key][0] *= sx;
+        next.bezier[key][1] *= sy;
+      }
+    });
+  }
+  return next;
+};
+const scaleUpdateNumber = (updates, source, key, factor) => {
+  const value = Number(source == null ? void 0 : source[key]);
+  if (Number.isFinite(value)) updates[key] = value * factor;
+};
+const bakeTextboxScaleIntoTypography = (obj, sourceElement) => {
+  const sx = Math.abs(obj.scaleX ?? 1) || 1;
+  const sy = Math.abs(obj.scaleY ?? 1) || 1;
+  if (Math.abs(sx - 1) < 1e-3 && Math.abs(sy - 1) < 1e-3) return null;
+  const isUniform = Math.abs(sx - sy) < 0.01;
+  const fontScale = isUniform ? (sx + sy) / 2 : Math.abs(sy - 1) > 1e-3 ? sy : 1;
+  const effectScale = isUniform ? fontScale : Math.max(1e-3, Math.sqrt(sx * sy));
+  const updates = {
+    width: Math.max(20, (obj.width ?? (sourceElement == null ? void 0 : sourceElement.width) ?? 20) * sx),
+    scaleX: 1,
+    scaleY: 1
+  };
+  if (fontScale !== 1) {
+    updates.fontSize = Math.max(1, Number(obj.fontSize || (sourceElement == null ? void 0 : sourceElement.fontSize) || 16) * fontScale);
+    const minBoxHeight = Number(obj.minBoxHeight ?? (sourceElement == null ? void 0 : sourceElement.minBoxHeight));
+    if (Number.isFinite(minBoxHeight) && minBoxHeight > 0) updates.minBoxHeight = minBoxHeight * sy;
+  }
+  scaleUpdateNumber(updates, sourceElement ?? void 0, "strokeWidth", effectScale);
+  scaleUpdateNumber(updates, sourceElement ?? void 0, "textShadowBlur", effectScale);
+  scaleUpdateNumber(updates, sourceElement ?? void 0, "textShadowDistance", effectScale);
+  scaleUpdateNumber(updates, sourceElement ?? void 0, "textShadowOffsetX", sx);
+  scaleUpdateNumber(updates, sourceElement ?? void 0, "textShadowOffsetY", sy);
+  scaleUpdateNumber(updates, sourceElement ?? void 0, "textBgPaddingTop", sy);
+  scaleUpdateNumber(updates, sourceElement ?? void 0, "textBgPaddingBottom", sy);
+  scaleUpdateNumber(updates, sourceElement ?? void 0, "textBgPaddingLeft", sx);
+  scaleUpdateNumber(updates, sourceElement ?? void 0, "textBgPaddingRight", sx);
+  scaleUpdateNumber(updates, sourceElement ?? void 0, "textBgPadding", effectScale);
+  scaleUpdateNumber(updates, sourceElement ?? void 0, "textBgRxTL", effectScale);
+  scaleUpdateNumber(updates, sourceElement ?? void 0, "textBgRxTR", effectScale);
+  scaleUpdateNumber(updates, sourceElement ?? void 0, "textBgRxBR", effectScale);
+  scaleUpdateNumber(updates, sourceElement ?? void 0, "textBgRxBL", effectScale);
+  const textPath = obj.textPath ?? (sourceElement == null ? void 0 : sourceElement.textPath);
+  if (textPath) updates.textPath = scaleTextPathConfig(textPath, sx, sy, effectScale);
+  const center = obj.getCenterPoint();
+  obj.set({
+    width: updates.width,
+    scaleX: 1,
+    scaleY: 1,
+    ...updates.fontSize ? { fontSize: updates.fontSize } : {},
+    ...updates.strokeWidth !== void 0 ? { strokeWidth: updates.strokeWidth } : {}
+  });
+  if (updates.minBoxHeight !== void 0) obj.minBoxHeight = updates.minBoxHeight;
+  if (updates.textPath) obj.textPath = updates.textPath;
+  const shadow = obj.shadow;
+  if (shadow) {
+    shadow.blur = updates.textShadowBlur ?? shadow.blur;
+    shadow.offsetX = updates.textShadowOffsetX ?? shadow.offsetX;
+    shadow.offsetY = updates.textShadowOffsetY ?? shadow.offsetY;
+  }
+  if ((sourceElement == null ? void 0 : sourceElement.type) === "text") {
+    const bakedElement = { ...sourceElement, ...updates };
+    applyTextBackground(obj, extractTextBgConfig(bakedElement));
+    applyTextShadow(obj, bakedElement);
+  }
+  try {
+    obj.initDimensions();
+  } catch {
+  }
+  obj.setPositionByOrigin(center, "center", "center");
+  obj.setCoords();
+  obj.dirty = true;
+  obj.__pixldocsBakedTextScaleUpdates = {
+    ...obj.__pixldocsBakedTextScaleUpdates || {},
+    ...updates
+  };
+  return updates;
+};
 function applyWarpAwareSelectionBorders(selection) {
   if (selection.__pixldocsOrigASHasBorders !== void 0) {
     selection.hasBorders = selection.__pixldocsOrigASHasBorders;
@@ -9937,8 +11115,11 @@ const PageCanvas = forwardRef(
     const hasRunPostReadyReflowForPageRef = useRef(null);
     const hasNotifiedReadyForPageRef = useRef(null);
     const hasClearedCachesBeforeFirstSyncRef = useRef(false);
+    const projectSettingsRef = useRef(projectSettings);
+    projectSettingsRef.current = projectSettings;
     const [guides, setGuides] = useState([]);
     const [gridResizeLabel, setGridResizeLabel] = useState(null);
+    const [hoverBounds, setHoverBounds] = useState(null);
     const [rotationLabel, setRotationLabel] = useState(null);
     const [sizeLabel, setSizeLabel] = useState(null);
     const [ready, setReady] = useState(false);
@@ -10005,7 +11186,8 @@ const PageCanvas = forwardRef(
     useRef(null);
     useRef(null);
     useRef(/* @__PURE__ */ new Map());
-    useRef(null);
+    const groupResizeActiveSnapRef = useRef(null);
+    const objectResizeActiveSnapRef = useRef(null);
     useRef(null);
     useRef(null);
     useRef(null);
@@ -10147,33 +11329,358 @@ const PageCanvas = forwardRef(
       (movingObj) => {
         const fabricCanvas = fabricRef.current;
         if (!fabricCanvas) return { guides: [], snapDx: 0, snapDy: 0 };
+        const ps = projectSettingsRef.current;
         return calculateSnapGuides(
           movingObj,
           fabricCanvas,
           canvasWidth,
           canvasHeight,
-          projectSettings.snapToGuides,
-          projectSettings.snapThreshold
+          ps.snapToGuides,
+          ps.snapThreshold
         );
       },
-      [canvasWidth, canvasHeight, projectSettings.snapToGuides, projectSettings.snapThreshold]
+      [canvasWidth, canvasHeight]
     );
+    const getResizeExcludeIdsCallback = useCallback((obj) => {
+      const ids = /* @__PURE__ */ new Set();
+      const ownId = getObjectId(obj);
+      if (ownId) ids.add(ownId);
+      if (obj instanceof fabric.ActiveSelection) {
+        obj.getObjects().forEach((member) => {
+          const id = getObjectId(member);
+          if (id) ids.add(id);
+        });
+      } else if (obj instanceof fabric.Group && typeof obj.getObjects === "function") {
+        obj.getObjects().forEach((member) => {
+          const id = getObjectId(member);
+          if (id) ids.add(id);
+        });
+      }
+      return ids;
+    }, []);
+    const getLogicalGroupSnapBoundsCallback = useCallback((excludeIds = []) => {
+      const fabricCanvas = fabricRef.current;
+      if (!fabricCanvas) return [];
+      const excluded = new Set(excludeIds);
+      const page = useEditorStore.getState().canvas.pages.find((p) => p.id === pageId);
+      const children = (page == null ? void 0 : page.children) ?? pageChildren ?? [];
+      const objectBounds = /* @__PURE__ */ new Map();
+      for (const object of fabricCanvas.getObjects()) {
+        const id = getObjectId(object);
+        if (!id || id === "__background__") continue;
+        try {
+          object.setCoords();
+        } catch {
+        }
+        const bounds2 = object.getBoundingRect();
+        objectBounds.set(id, { left: bounds2.left, top: bounds2.top, width: bounds2.width, height: bounds2.height });
+      }
+      const bounds = [];
+      const visit = (nodes) => {
+        for (const node of nodes) {
+          if (!isGroup(node)) continue;
+          const memberIds = getAllElementIds(node.children ?? []);
+          if (memberIds.length === 0) continue;
+          if (memberIds.some((id) => excluded.has(id)) || excluded.has(node.id)) {
+            visit(node.children ?? []);
+            continue;
+          }
+          let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+          for (const memberId of memberIds) {
+            const b = objectBounds.get(memberId);
+            if (!b) continue;
+            minX = Math.min(minX, b.left);
+            minY = Math.min(minY, b.top);
+            maxX = Math.max(maxX, b.left + b.width);
+            maxY = Math.max(maxY, b.top + b.height);
+          }
+          if (Number.isFinite(minX) && Number.isFinite(minY) && maxX > minX && maxY > minY) {
+            bounds.push({ left: minX, top: minY, width: maxX - minX, height: maxY - minY });
+          }
+          visit(node.children ?? []);
+        }
+      };
+      visit(children);
+      const seen = /* @__PURE__ */ new Set();
+      return bounds.filter((b) => {
+        const key = `${Math.round(b.left)}:${Math.round(b.top)}:${Math.round(b.width)}:${Math.round(b.height)}`;
+        if (seen.has(key)) return false;
+        seen.add(key);
+        return true;
+      });
+    }, [pageId, pageChildren]);
     const calculateScaleSnapGuidesCallback = useCallback(
       (scalingObj, corner) => {
         const fabricCanvas = fabricRef.current;
         if (!fabricCanvas) return [];
+        const ps = projectSettingsRef.current;
+        const excludeIds = getResizeExcludeIdsCallback(scalingObj);
         return calculateScaleSnapGuides(
           scalingObj,
           corner,
-          fabricCanvas,
+          fabricCanvas,
+          canvasWidth,
+          canvasHeight,
+          ps.snapToGuides,
+          ps.snapThreshold || 4,
+          getLogicalGroupSnapBoundsCallback(excludeIds)
+        );
+      },
+      [canvasWidth, canvasHeight, getLogicalGroupSnapBoundsCallback, getResizeExcludeIdsCallback]
+    );
+    const snapDuringScaleCallback = useCallback(
+      (obj, corner) => {
+        const fc = fabricRef.current;
+        if (!fc || !obj || !corner) return;
+        const ps = projectSettingsRef.current;
+        if (!ps.snapToGuides) return;
+        if (obj instanceof fabric.Textbox && (corner === "ml" || corner === "mr")) {
+          const sourceEl = getObjectId(obj) ? elementsRef.current.find((el) => el.id === getObjectId(obj)) : void 0;
+          bakeTextboxScaleIntoTypography(obj, sourceEl);
+        }
+        try {
+          obj.setCoords();
+        } catch {
+        }
+        const br = obj.getBoundingRect();
+        const excludeIds = getResizeExcludeIdsCallback(obj);
+        const snapThreshold = ps.snapThreshold || 4;
+        const snapped = applyScaleSnapToBox(
+          { left: br.left, top: br.top, width: br.width, height: br.height },
+          corner,
+          fc,
           canvasWidth,
           canvasHeight,
-          projectSettings.snapToGuides,
-          projectSettings.snapThreshold
+          true,
+          snapThreshold,
+          getObjectId(obj),
+          {
+            hysteresis: 3,
+            activeSnapRef: objectResizeActiveSnapRef,
+            roundSnappedOnly: true,
+            additionalBounds: getLogicalGroupSnapBoundsCallback(excludeIds),
+            excludeObjectIds: excludeIds,
+            matchDimensions: true
+          }
         );
+        const maxSnapShift = Math.max(snapThreshold + 3, 10);
+        const brRight = br.left + br.width;
+        const brBottom = br.top + br.height;
+        const snappedRight = snapped.left + snapped.width;
+        const snappedBottom = snapped.top + snapped.height;
+        const xJump = Math.max(Math.abs(snapped.left - br.left), Math.abs(snappedRight - brRight));
+        const yJump = Math.max(Math.abs(snapped.top - br.top), Math.abs(snappedBottom - brBottom));
+        if (xJump > maxSnapShift) {
+          snapped.left = br.left;
+          snapped.width = br.width;
+          if (objectResizeActiveSnapRef.current) {
+            delete objectResizeActiveSnapRef.current.left;
+            delete objectResizeActiveSnapRef.current.right;
+            delete objectResizeActiveSnapRef.current.width;
+          }
+        }
+        if (yJump > maxSnapShift) {
+          snapped.top = br.top;
+          snapped.height = br.height;
+          if (objectResizeActiveSnapRef.current) {
+            delete objectResizeActiveSnapRef.current.top;
+            delete objectResizeActiveSnapRef.current.bottom;
+            delete objectResizeActiveSnapRef.current.height;
+          }
+        }
+        if (Math.abs(snapped.left - br.left) < 0.01 && Math.abs(snapped.top - br.top) < 0.01 && Math.abs(snapped.width - br.width) < 0.01 && Math.abs(snapped.height - br.height) < 0.01) return;
+        if (obj instanceof fabric.Textbox && (corner === "ml" || corner === "mr")) {
+          if (corner.includes("l") !== corner.includes("r")) {
+            obj.set({ width: Math.max(20, snapped.width) });
+            obj.initDimensions();
+            obj.setCoords();
+            const after2 = obj.getBoundingRect();
+            obj.set({ left: (obj.left ?? 0) + (snapped.left - after2.left), top: (obj.top ?? 0) + (snapped.top - after2.top) });
+            obj.setCoords();
+          }
+          return;
+        }
+        const baseW = obj.width ?? 1;
+        const baseH = obj.height ?? 1;
+        const signX = (obj.scaleX ?? 1) < 0 ? -1 : 1;
+        const signY = (obj.scaleY ?? 1) < 0 ? -1 : 1;
+        const newScaleX = snapped.width / Math.max(1, baseW) * signX;
+        const newScaleY = snapped.height / Math.max(1, baseH) * signY;
+        obj.set({ scaleX: newScaleX, scaleY: newScaleY });
+        obj.setCoords();
+        const after = obj.getBoundingRect();
+        obj.set({ left: (obj.left ?? 0) + (snapped.left - after.left), top: (obj.top ?? 0) + (snapped.top - after.top) });
+        obj.setCoords();
       },
-      [canvasWidth, canvasHeight, projectSettings.snapToGuides, projectSettings.snapThreshold]
+      [canvasWidth, canvasHeight, getLogicalGroupSnapBoundsCallback, getResizeExcludeIdsCallback]
     );
+    const installImageResizeControlsWithSnap = useCallback((group) => {
+      group.__resizeSnapHandler = (target, corner) => {
+        const fc = fabricRef.current ?? target.canvas;
+        if (!fc || !isActiveRef.current || !corner) return;
+        fc.__isUserTransforming = true;
+        didTransformRef.current = true;
+        lastResizeScaleTargetRef.current = target;
+        const targetId = getObjectId(target);
+        if (targetId && targetId !== "__background__") {
+          preserveSelectionAfterTransformIdRef.current = targetId;
+          transformingIdsRef.current.add(targetId);
+        }
+        target.getObjects().forEach((member) => {
+          const memberId = getObjectId(member);
+          if (memberId) transformingIdsRef.current.add(memberId);
+        });
+        const gridGuidesForResize = [];
+        try {
+          target.setCoords();
+          const br = target.getBoundingRect();
+          const excludeIds = getResizeExcludeIdsCallback(target);
+          const ps = projectSettingsRef.current;
+          const snapThreshold = ps.snapThreshold || 4;
+          const snapped = applyScaleSnapToBox(
+            { left: br.left, top: br.top, width: br.width, height: br.height },
+            corner,
+            fc,
+            canvasWidth,
+            canvasHeight,
+            ps.snapToGuides,
+            snapThreshold,
+            targetId ?? void 0,
+            {
+              hysteresis: 3,
+              activeSnapRef: objectResizeActiveSnapRef,
+              roundSnappedOnly: true,
+              additionalBounds: getLogicalGroupSnapBoundsCallback(excludeIds),
+              excludeObjectIds: excludeIds,
+              matchDimensions: true
+            }
+          );
+          const maxSnapShift = Math.max(snapThreshold + 3, 10);
+          const brRight = br.left + br.width;
+          const brBottom = br.top + br.height;
+          const snappedRight = snapped.left + snapped.width;
+          const snappedBottom = snapped.top + snapped.height;
+          const xJump = Math.max(Math.abs(snapped.left - br.left), Math.abs(snappedRight - brRight));
+          const yJump = Math.max(Math.abs(snapped.top - br.top), Math.abs(snappedBottom - brBottom));
+          if (xJump > maxSnapShift) {
+            snapped.left = br.left;
+            snapped.width = br.width;
+            if (objectResizeActiveSnapRef.current) {
+              delete objectResizeActiveSnapRef.current.left;
+              delete objectResizeActiveSnapRef.current.right;
+              delete objectResizeActiveSnapRef.current.width;
+            }
+          }
+          if (yJump > maxSnapShift) {
+            snapped.top = br.top;
+            snapped.height = br.height;
+            if (objectResizeActiveSnapRef.current) {
+              delete objectResizeActiveSnapRef.current.top;
+              delete objectResizeActiveSnapRef.current.bottom;
+              delete objectResizeActiveSnapRef.current.height;
+            }
+          }
+          const gridX = ps.gridSizeX ?? ps.gridSize ?? 0;
+          const gridY = ps.gridSizeY ?? ps.gridSize ?? 0;
+          if (ps.snapToGrid && gridX > 0 && gridY > 0) {
+            const hasL = corner.includes("l");
+            const hasR = corner.includes("r");
+            const hasT = corner.includes("t");
+            const hasB = corner.includes("b");
+            const anchorRight = snapped.left + snapped.width;
+            const anchorBottom = snapped.top + snapped.height;
+            if (hasL) {
+              const newLeft = Math.round(snapped.left / gridX) * gridX;
+              const newWidth = Math.max(20, anchorRight - newLeft);
+              snapped.left = anchorRight - newWidth;
+              snapped.width = newWidth;
+              gridGuidesForResize.push({ type: "vertical", position: snapped.left, kind: "grid" });
+            } else if (hasR) {
+              const newRight = Math.round(anchorRight / gridX) * gridX;
+              snapped.width = Math.max(20, newRight - snapped.left);
+              gridGuidesForResize.push({ type: "vertical", position: snapped.left + snapped.width, kind: "grid" });
+            }
+            if (hasT) {
+              const newTop = Math.round(snapped.top / gridY) * gridY;
+              const newHeight = Math.max(20, anchorBottom - newTop);
+              snapped.top = anchorBottom - newHeight;
+              snapped.height = newHeight;
+              gridGuidesForResize.push({ type: "horizontal", position: snapped.top, kind: "grid" });
+            } else if (hasB) {
+              const newBottom = Math.round(anchorBottom / gridY) * gridY;
+              snapped.height = Math.max(20, newBottom - snapped.top);
+              gridGuidesForResize.push({ type: "horizontal", position: snapped.top + snapped.height, kind: "grid" });
+            }
+          }
+          const changed = Math.abs(snapped.left - br.left) > 0.01 || Math.abs(snapped.top - br.top) > 0.01 || Math.abs(snapped.width - br.width) > 0.01 || Math.abs(snapped.height - br.height) > 0.01;
+          if (changed) {
+            const ct = target.__cropData;
+            if (ct) {
+              const next = { ...snapped };
+              const isCornerHandle = corner.includes("l") !== corner.includes("r") && corner.includes("t") !== corner.includes("b");
+              const widthChanged = Math.abs(snapped.width - br.width) > 0.01;
+              const heightChanged = Math.abs(snapped.height - br.height) > 0.01;
+              if (isCornerHandle && br.width > 0 && br.height > 0 && widthChanged !== heightChanged) {
+                const aspect = br.width / br.height;
+                if (widthChanged) {
+                  next.height = Math.max(20, next.width / aspect);
+                  if (corner.includes("t")) next.top = br.top + br.height - next.height;
+                } else {
+                  next.width = Math.max(20, next.height * aspect);
+                  if (corner.includes("l")) next.left = br.left + br.width - next.width;
+                }
+              } else if (isCornerHandle && br.width > 0 && br.height > 0) {
+                const aspect = br.width / br.height;
+                const nextAspect = next.width / Math.max(1, next.height);
+                if (Math.abs(nextAspect - aspect) > 0.01) {
+                  const widthDelta = Math.abs(next.width - br.width);
+                  const heightDelta = Math.abs(next.height - br.height);
+                  if (widthDelta <= heightDelta) {
+                    next.height = Math.max(20, next.width / aspect);
+                    if (corner.includes("t")) next.top = br.top + br.height - next.height;
+                  } else {
+                    next.width = Math.max(20, next.height * aspect);
+                    if (corner.includes("l")) next.left = br.left + br.width - next.width;
+                  }
+                }
+              }
+              ct.frameW = Math.max(20, next.width);
+              ct.frameH = Math.max(20, next.height);
+              target.set({
+                left: next.left + ct.frameW / 2,
+                top: next.top + ct.frameH / 2,
+                width: ct.frameW,
+                height: ct.frameH,
+                scaleX: 1,
+                scaleY: 1,
+                originX: "center",
+                originY: "center"
+              });
+              updateCoverLayout(target);
+            }
+          }
+        } catch {
+          snapDuringScaleCallback(target, corner);
+        }
+        try {
+          target.setCoords();
+          const br = target.getBoundingRect();
+          setSizeLabel({
+            width: Math.round(br.width),
+            height: Math.round(br.height),
+            x: br.left + br.width / 2,
+            y: br.top + br.height + 18
+          });
+        } catch {
+        }
+        const smartGuides = calculateScaleSnapGuidesCallback(target, corner);
+        setGuides(gridGuidesForResize.length ? [...smartGuides, ...gridGuidesForResize] : smartGuides);
+        setHoverBounds(null);
+      };
+      installCanvaMaskControls(group);
+      applyControlSizeForZoom(group.canvas ?? fabricRef.current, group);
+      ensureCanvaControlRenders(group);
+    }, [calculateScaleSnapGuidesCallback, canvasHeight, canvasWidth, getLogicalGroupSnapBoundsCallback, getResizeExcludeIdsCallback, snapDuringScaleCallback]);
     const isTransforming = useCallback((canvas2) => {
       if (!canvas2) return false;
       return !!canvas2._currentTransform || !!canvas2.__isUserTransforming;
@@ -10299,6 +11806,8 @@ const PageCanvas = forwardRef(
         // Transparent so underlay (page bg + group bgs) shows through
         backgroundColor: "transparent"
       });
+      fabricCanvas.hoverCursor = "default";
+      fabricCanvas.moveCursor = "move";
       if (!allowSelection) {
         fabricCanvas.selection = false;
         fabricCanvas.on("selection:created", () => {
@@ -10320,6 +11829,61 @@ const PageCanvas = forwardRef(
       fabricRef.current = fabricCanvas;
       const storeRegistryKey = registerFabricCanvas(pageId, fabricCanvas);
       fabricCanvas.__storeRegistryKey = storeRegistryKey;
+      {
+        const TWEEN_MS = 130;
+        const active = /* @__PURE__ */ new Map();
+        const ensureMap = (obj) => {
+          if (!obj.__handleHoverProgress) obj.__handleHoverProgress = {};
+          return obj.__handleHoverProgress;
+        };
+        const stateKey = (obj, key) => `${obj.__docuforgeId || ""}:${key}`;
+        const step = (sk) => {
+          const s = active.get(sk);
+          if (!s) return;
+          const t = Math.min(1, (performance.now() - s.start) / TWEEN_MS);
+          const eased = 1 - Math.pow(1 - t, 3);
+          const value = s.from + (s.to - s.from) * eased;
+          const map = ensureMap(s.obj);
+          map[s.key] = value;
+          try {
+            fabricCanvas.requestRenderAll();
+          } catch {
+          }
+          if (t < 1) {
+            s.raf = requestAnimationFrame(() => step(sk));
+          } else {
+            map[s.key] = s.to;
+            active.delete(sk);
+          }
+        };
+        const startTween = (obj, key, to) => {
+          const sk = stateKey(obj, key);
+          const map = ensureMap(obj);
+          const from = map[key] ?? (to === 1 ? 0 : 1);
+          if (from === to) return;
+          const existing = active.get(sk);
+          if (existing && existing.raf != null) cancelAnimationFrame(existing.raf);
+          const s = { obj, key, start: performance.now(), from, to, raf: null };
+          active.set(sk, s);
+          s.raf = requestAnimationFrame(() => step(sk));
+        };
+        let prevTarget = null;
+        let prevKey = null;
+        fabricCanvas.on("mouse:move", (opt) => {
+          const t = opt == null ? void 0 : opt.target;
+          const key = t && t.__corner ? String(t.__corner) : null;
+          if (t === prevTarget && key === prevKey) return;
+          if (prevTarget && prevKey) startTween(prevTarget, prevKey, 0);
+          if (t && key) startTween(t, key, 1);
+          prevTarget = t;
+          prevKey = key;
+        });
+        fabricCanvas.on("mouse:out", () => {
+          if (prevTarget && prevKey) startTween(prevTarget, prevKey, 0);
+          prevTarget = null;
+          prevKey = null;
+        });
+      }
       const initFonts = async () => {
         try {
           await preloadAllFonts();
@@ -10409,6 +11973,17 @@ const PageCanvas = forwardRef(
       });
       fabricCanvas.on("mouse:up", () => {
         fabricCanvas.__isUserTransforming = false;
+        objectResizeActiveSnapRef.current = null;
+        groupResizeActiveSnapRef.current = null;
+        try {
+          for (const o of fabricCanvas.getObjects()) {
+            if (o.__pixldocsDragMoved) o.__pixldocsDragMoved = false;
+          }
+          const active = fabricCanvas.getActiveObject();
+          if (active == null ? void 0 : active.__pixldocsDragMoved) active.__pixldocsDragMoved = false;
+          fabricCanvas.requestRenderAll();
+        } catch {
+        }
       });
       fabricCanvas.on("object:scaling", () => {
         fabricCanvas.__isUserTransforming = true;
@@ -10455,7 +12030,7 @@ const PageCanvas = forwardRef(
         didTransformRef.current = true;
       });
       const syncSelectionToStore = () => {
-        var _a2, _b, _c, _d;
+        var _a2, _b2, _c, _d;
         if (!isActiveRef.current || isRebuildingRef.current || isSyncingSelectionToFabricRef.current || !allowSelection) return;
         const walkToTopmostGroup = (childId, children, activeEditingGroupId) => {
           let topmost = null;
@@ -10494,7 +12069,7 @@ const PageCanvas = forwardRef(
           const activeEditingGroupId = fabricCanvas.__activeEditingGroupId ?? null;
           const clickedId = ids[0];
           const state = useEditorStore.getState();
-          const currentPage2 = (_b = state.canvas.pages) == null ? void 0 : _b.find((p) => p.id === pageId);
+          const currentPage2 = (_b2 = state.canvas.pages) == null ? void 0 : _b2.find((p) => p.id === pageId);
           const children = (currentPage2 == null ? void 0 : currentPage2.children) ?? [];
           const parent = walkToTopmostGroup(clickedId, children, activeEditingGroupId);
           const targetIsInCrop = !!(active instanceof fabric.Group && isCropGroupInCropMode(active) || (active == null ? void 0 : active.group) instanceof fabric.Group && isCropGroupInCropMode(active.group));
@@ -10641,8 +12216,10 @@ const PageCanvas = forwardRef(
         const activeObj = fabricCanvas.getActiveObject();
         if (activeObj instanceof fabric.ActiveSelection) applyWarpAwareSelectionBorders(activeObj);
         if (activeObj) applyControlSizeForZoom(fabricCanvas, activeObj);
+        if (activeObj) ensureCanvaControlRenders(activeObj);
         if (activeObj && !(activeObj instanceof fabric.ActiveSelection) && (((_a2 = activeObj._ct) == null ? void 0 : _a2.isCropGroup) || activeObj.__cropGroup)) {
-          installCanvaMaskControls(activeObj);
+          installImageResizeControlsWithSnap(activeObj);
+          ensureCanvaControlRenders(activeObj);
         }
       });
       fabricCanvas.on("selection:updated", () => {
@@ -10654,12 +12231,14 @@ const PageCanvas = forwardRef(
         const activeObj = fabricCanvas.getActiveObject();
         if (activeObj instanceof fabric.ActiveSelection) applyWarpAwareSelectionBorders(activeObj);
         if (activeObj) applyControlSizeForZoom(fabricCanvas, activeObj);
+        if (activeObj) ensureCanvaControlRenders(activeObj);
         if (activeObj && !(activeObj instanceof fabric.ActiveSelection) && (((_a2 = activeObj._ct) == null ? void 0 : _a2.isCropGroup) || activeObj.__cropGroup)) {
-          installCanvaMaskControls(activeObj);
+          installImageResizeControlsWithSnap(activeObj);
+          ensureCanvaControlRenders(activeObj);
         }
       });
       fabricCanvas.on("mouse:dblclick", (opt) => {
-        var _a2, _b;
+        var _a2, _b2;
         const target = opt == null ? void 0 : opt.target;
         if (!target) return;
         if (target.isEditing) return;
@@ -10683,7 +12262,7 @@ const PageCanvas = forwardRef(
         const childId = getObjectId(hitChild);
         if (!childId) return;
         const stateNow = useEditorStore.getState();
-        const pageNow = (_b = stateNow.canvas.pages) == null ? void 0 : _b.find((p) => p.id === pageId);
+        const pageNow = (_b2 = stateNow.canvas.pages) == null ? void 0 : _b2.find((p) => p.id === pageId);
         const childrenNow = (pageNow == null ? void 0 : pageNow.children) ?? [];
         const chain = [];
         {
@@ -10810,7 +12389,7 @@ const PageCanvas = forwardRef(
         transformingIdsRef.current.clear();
       };
       const prepareGroupSelectionTransformStart = (target) => {
-        var _a2, _b;
+        var _a2, _b2;
         const active = target instanceof fabric.ActiveSelection ? target : fabricCanvas.getActiveObject();
         if (!(active instanceof fabric.ActiveSelection)) return;
         if (!activeSelectionMoveStartRef.current || activeSelectionMoveStartRef.current.selection !== active) {
@@ -10824,7 +12403,7 @@ const PageCanvas = forwardRef(
         const groupId = active.__pixldocsGroupSelection;
         if (!groupId) return;
         if (((_a2 = groupSelectionTransformStartRef.current) == null ? void 0 : _a2.groupId) === groupId && groupSelectionTransformStartRef.current.selection === active) return;
-        const pageChildren2 = ((_b = useEditorStore.getState().canvas.pages.find((p) => p.id === pageId)) == null ? void 0 : _b.children) ?? [];
+        const pageChildren2 = ((_b2 = useEditorStore.getState().canvas.pages.find((p) => p.id === pageId)) == null ? void 0 : _b2.children) ?? [];
         const groupNode = findNodeById(pageChildren2, groupId);
         if (!groupNode) return;
         const groupAbs = getAbsoluteBounds(groupNode, pageChildren2);
@@ -10908,7 +12487,7 @@ const PageCanvas = forwardRef(
       };
       let pendingShiftMultiSelect = null;
       const applyShiftMultiSelect = (target, event, baselineActive = fabricCanvas.getActiveObject(), baselineObjects = fabricCanvas.getActiveObjects()) => {
-        var _a2, _b, _c;
+        var _a2, _b2, _c;
         if (!target || !target.selectable) return false;
         const active = baselineActive;
         if (!active || ((_a2 = active.getActiveControl) == null ? void 0 : _a2.call(active))) return false;
@@ -10942,7 +12521,7 @@ const PageCanvas = forwardRef(
             isSyncingSelectionToFabricRef.current = false;
           });
         }
-        (_b = event == null ? void 0 : event.preventDefault) == null ? void 0 : _b.call(event);
+        (_b2 = event == null ? void 0 : event.preventDefault) == null ? void 0 : _b2.call(event);
         (_c = event == null ? void 0 : event.stopPropagation) == null ? void 0 : _c.call(event);
         return true;
       };
@@ -10993,9 +12572,9 @@ const PageCanvas = 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, _d, _e, _f;
+        var _a2, _b2, _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 (((_a2 = opt.e) == null ? void 0 : _a2.type) !== "mousedown" && ((_b2 = opt.e) == null ? void 0 : _b2.type) !== "pointerdown" && ((_c = opt.e) == null ? void 0 : _c.type) !== "touchstart") {
           if (t && isCropGroup2(t)) {
             fabricCanvas._hoveredTarget = t;
           } else if ((t == null ? void 0 : t.group) && isCropGroup2(t.group)) {
@@ -11011,6 +12590,8 @@ const PageCanvas = forwardRef(
           const objects = fabricCanvas.getObjects();
           for (const obj of objects) {
             if (isCropGroup2(obj) && obj.containsPoint(pointer)) {
+              installImageResizeControlsWithSnap(obj);
+              ensureCanvaControlRenders(obj);
               fabricCanvas.setActiveObject(obj);
               opt.target = obj;
               fabricCanvas._hoveredTarget = obj;
@@ -11021,12 +12602,16 @@ const PageCanvas = forwardRef(
         }
         const g = t.group;
         if (g && isCropGroup2(g)) {
+          installImageResizeControlsWithSnap(g);
+          ensureCanvaControlRenders(g);
           fabricCanvas.setActiveObject(g);
           opt.target = g;
           fabricCanvas._hoveredTarget = g;
           return;
         }
         if (isCropGroup2(t)) {
+          installImageResizeControlsWithSnap(t);
+          ensureCanvaControlRenders(t);
           fabricCanvas.setActiveObject(t);
           t.set({
             selectable: true,
@@ -11079,7 +12664,7 @@ const PageCanvas = forwardRef(
         });
       }
       fabricCanvas.on("mouse:down", (opt) => {
-        var _a2, _b;
+        var _a2, _b2;
         if (pendingShiftMultiSelect) {
           const pending = pendingShiftMultiSelect;
           pendingShiftMultiSelect = null;
@@ -11087,17 +12672,19 @@ const PageCanvas = forwardRef(
           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;
+        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) && (((_b2 = target.group._ct) == null ? void 0 : _b2.isCropGroup) || target.group.__cropGroup) ? target.group : null;
         if (cropGroup) {
           lockEdits();
           didTransformRef.current = false;
+          installImageResizeControlsWithSnap(cropGroup);
+          ensureCanvaControlRenders(cropGroup);
           fabricCanvas.setActiveObject(cropGroup);
           cropGroup.setCoords();
           fabricCanvas.requestRenderAll();
         }
       });
       const groupFabricUnionBBox = (g) => {
-        var _a2, _b;
+        var _a2, _b2;
         const memberIds = new Set(getAllElementIds(g.children ?? []));
         if (memberIds.size === 0) return null;
         let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
@@ -11105,7 +12692,7 @@ const PageCanvas = forwardRef(
         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));
+          const br = ((_a2 = o.getBoundingRect) == null ? void 0 : _a2.call(o, true, true)) ?? ((_b2 = o.getBoundingRect) == null ? void 0 : _b2.call(o));
           if (!br) continue;
           minX = Math.min(minX, br.left);
           minY = Math.min(minY, br.top);
@@ -11131,13 +12718,13 @@ const PageCanvas = forwardRef(
         return pick;
       };
       fabricCanvas.on("mouse:down:before", (opt) => {
-        var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
+        var _a2, _b2, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
         if (editLockRef.current) {
           const active = fabricCanvas.getActiveObject();
           if (active && (((_a2 = active._ct) == null ? void 0 : _a2.isCropGroup) || active.__cropGroup)) {
             opt.target = active;
             if (opt.e) {
-              (_c = (_b = opt.e).preventDefault) == null ? void 0 : _c.call(_b);
+              (_c = (_b2 = opt.e).preventDefault) == null ? void 0 : _c.call(_b2);
               (_e = (_d = opt.e).stopPropagation) == null ? void 0 : _e.call(_d);
             }
           }
@@ -11152,6 +12739,10 @@ const PageCanvas = forwardRef(
         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 (target instanceof fabric.Textbox && target.__corner && (target.__corner === "ml" || target.__corner === "mr")) {
+          const sourceEl = targetId ? elementsRef.current.find((el) => el.id === targetId) : void 0;
+          bakeTextboxScaleIntoTypography(target, sourceEl);
+        }
         if (isMultiSelectModifier(opt.e)) {
           const manualTarget = target && !(target instanceof fabric.ActiveSelection) && targetId && targetId !== "__background__" ? target : pickSelectableObjectAtPointer(opt.e);
           if (manualTarget) {
@@ -11178,11 +12769,39 @@ const PageCanvas = forwardRef(
           return topmost;
         };
         if (target && targetId && targetId !== "__background__") {
-          const parent = findTopmostPromotableGroup(targetId);
-          const targetIsInCrop = !!(target instanceof fabric.Group && isCropGroupInCropMode(target) || (target == null ? void 0 : target.group) instanceof fabric.Group && isCropGroupInCropMode(target.group));
+          let effectiveTarget = target;
+          let effectiveTargetId = targetId;
+          const activeNowEarly = fabricCanvas.getActiveObject();
+          const asGroupId = target instanceof fabric.ActiveSelection ? target.__pixldocsGroupSelection : void 0;
+          if (target instanceof fabric.ActiveSelection && asGroupId && target === activeNowEarly) {
+            try {
+              const pointer = fabricCanvas.getViewportPoint(opt.e);
+              const members = target.getObjects();
+              for (let i = members.length - 1; i >= 0; i--) {
+                const m = members[i];
+                if (m.visible === false) continue;
+                if (typeof m.containsPoint === "function" && m.containsPoint(pointer)) {
+                  const mid = getObjectId(m);
+                  if (mid) {
+                    effectiveTarget = m;
+                    effectiveTargetId = mid;
+                  }
+                  break;
+                }
+              }
+            } catch {
+            }
+          }
+          const parent = findTopmostPromotableGroup(effectiveTargetId);
+          const targetIsInCrop = !!(effectiveTarget instanceof fabric.Group && isCropGroupInCropMode(effectiveTarget) || (effectiveTarget == null ? void 0 : effectiveTarget.group) instanceof fabric.Group && isCropGroupInCropMode(effectiveTarget.group));
           const activeNow = fabricCanvas.getActiveObject();
           const alreadyThisGroup = activeNow instanceof fabric.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));
+          const isDeepSelectKey = !!((_i = opt.e) == null ? void 0 : _i.altKey);
+          if (isDeepSelectKey) {
+            pendingGroupPromotionRef.current = null;
+            return;
+          }
           if (parent && !parent.backgroundColor && !targetIsInCrop && activeEditingGroupId !== parent.id && !alreadyThisGroup && !isMultiSelectKey) {
             const memberIds = new Set(getAllElementIds(parent.children ?? []));
             const memberObjs = fabricCanvas.getObjects().filter((o) => {
@@ -11206,10 +12825,33 @@ const PageCanvas = forwardRef(
               opt.target = only;
               pendingGroupPromotionRef.current = { groupId: parent.id, selection: only };
             }
+          } else if (parent && !parent.backgroundColor && !targetIsInCrop && alreadyThisGroup && !isMultiSelectKey && effectiveTarget !== activeNow) {
+            try {
+              skipSelectionClearOnDiscardRef.current = true;
+              preserveEditingScopeOnSelectionClearRef.current = true;
+              restoreSuppressedGroupBorders();
+              fabricCanvas.discardActiveObject();
+            } finally {
+              skipSelectionClearOnDiscardRef.current = false;
+              preserveEditingScopeOnSelectionClearRef.current = false;
+            }
+            fabricCanvas.__activeEditingGroupId = parent.id;
+            delete effectiveTarget.__pixldocsGroupSelection;
+            delete effectiveTarget.__pixldocsLogicalGroupIds;
+            try {
+              (_j = effectiveTarget.set) == null ? void 0 : _j.call(effectiveTarget, { selectable: true, evented: true, hasBorders: true, hasControls: true });
+            } catch {
+            }
+            fabricCanvas.setActiveObject(effectiveTarget);
+            effectiveTarget.setCoords();
+            fabricCanvas._target = effectiveTarget;
+            opt.target = effectiveTarget;
+            pendingGroupPromotionRef.current = null;
           }
         } 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));
+          const isMultiSelectKey = !!(((_k = opt.e) == null ? void 0 : _k.shiftKey) || ((_l = opt.e) == null ? void 0 : _l.metaKey) || ((_m = opt.e) == null ? void 0 : _m.ctrlKey));
           if (isMultiSelectKey) return;
+          if ((_n = opt.e) == null ? void 0 : _n.altKey) return;
           try {
             const pointer = fabricCanvas.getPointer(opt.e);
             const px = pointer.x;
@@ -11280,6 +12922,43 @@ const PageCanvas = forwardRef(
         if (editLockRef.current) return;
         const t = opt.target;
         const tid = t ? getObjectId(t) : null;
+        try {
+          const activeIds = new Set(selectedIdsRef.current);
+          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 groupPick = pickGroupAtPointer(pointer.x, pointer.y, childrenNow, activeEditingGroupId);
+          if (groupPick && !activeIds.has(groupPick.group.id)) {
+            const b = groupFabricUnionBBox(groupPick.group);
+            if (b) {
+              setHoverBounds({
+                left: b.left,
+                top: b.top,
+                width: b.right - b.left,
+                height: b.bottom - b.top,
+                angle: 0
+              });
+              return;
+            }
+          }
+          const isHoveringSelected = !!(tid && activeIds.has(tid));
+          if (t && tid && tid !== "__background__" && !isHoveringSelected) {
+            t.setCoords();
+            const br = t.getBoundingRect();
+            setHoverBounds({
+              left: br.left,
+              top: br.top,
+              width: br.width,
+              height: br.height,
+              angle: 0
+            });
+          } else {
+            setHoverBounds(null);
+          }
+        } catch {
+          setHoverBounds(null);
+        }
         if (t && tid && tid !== "__background__") return;
         try {
           const pointer = fabricCanvas.getPointer(opt.e);
@@ -11287,11 +12966,19 @@ const PageCanvas = forwardRef(
           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";
+          fabricCanvas.defaultCursor = "default";
         } catch {
           fabricCanvas.defaultCursor = "default";
         }
       });
+      fabricCanvas.on("mouse:out", () => {
+        setHoverBounds(null);
+      });
+      fabricCanvas.on("mouse:down", () => {
+        setHoverBounds(null);
+      });
+      fabricCanvas.on("selection:created", () => setHoverBounds(null));
+      fabricCanvas.on("selection:updated", () => setHoverBounds(null));
       fabricCanvas.on("mouse:down", (ev) => {
         if (fabricCanvas._currentTransform) {
           lockEdits();
@@ -11307,6 +12994,8 @@ const PageCanvas = forwardRef(
         setGuides([]);
         setRotationLabel(null);
         setSizeLabel(null);
+        objectResizeActiveSnapRef.current = null;
+        groupResizeActiveSnapRef.current = null;
         dragStarted = false;
         const pendingPromotion = pendingGroupPromotionRef.current;
         pendingGroupPromotionRef.current = null;
@@ -11461,7 +13150,9 @@ const PageCanvas = forwardRef(
             const intrH = obj.height ?? 1;
             let newW = Math.max(1, intrW * Math.abs(sx));
             let newH = Math.max(1, intrH * Math.abs(sy));
-            if (obj instanceof fabric.Circle) {
+            if (obj instanceof fabric.Ellipse) {
+              obj.set({ rx: newW / 2, ry: newH / 2 });
+            } else if (obj instanceof fabric.Circle) {
               const diameter = Math.max(1, Math.min(newW, newH));
               newW = diameter;
               newH = diameter;
@@ -11578,8 +13269,128 @@ const PageCanvas = forwardRef(
         }
         const transform = e.transform;
         const corner = (transform == null ? void 0 : transform.corner) || "";
+        if (obj instanceof fabric.ActiveSelection && (corner === "ml" || corner === "mr" || corner === "mt" || corner === "mb")) {
+          const isXSide = corner === "ml" || corner === "mr";
+          const sAxis = isXSide ? Math.abs(obj.scaleX ?? 1) : Math.abs(obj.scaleY ?? 1);
+          if (sAxis > 1e-3) {
+            for (const child of obj.getObjects()) {
+              if (!(child instanceof fabric.Textbox)) continue;
+              if (isXSide) {
+                if (child.__asLiveOrigW == null) {
+                  child.__asLiveOrigW = (child.width ?? 0) * (child.scaleX ?? 1);
+                }
+                const origW = child.__asLiveOrigW;
+                const newW = Math.max(20, origW * sAxis);
+                if (Math.abs((child.width ?? 0) - newW) > 0.5) {
+                  child.set({ width: newW, scaleX: 1 / sAxis });
+                  try {
+                    child.initDimensions();
+                  } catch {
+                  }
+                  child.dirty = true;
+                }
+              } else {
+                if (child.__asLiveOrigH == null) {
+                  child.__asLiveOrigH = (child.height ?? 0) * (child.scaleY ?? 1);
+                }
+                const origH = child.__asLiveOrigH;
+                const newH = Math.max(20, origH * sAxis);
+                child.minBoxHeight = newH;
+                child.set({ scaleY: 1 / sAxis });
+                try {
+                  child.initDimensions();
+                } catch {
+                }
+                child.dirty = true;
+              }
+            }
+          }
+        }
+        snapDuringScaleCallback(obj, corner);
         const scaleGuides = calculateScaleSnapGuidesCallback(obj, corner);
-        setGuides(scaleGuides);
+        const gridGuidesForScale = [];
+        try {
+          const psGrid = projectSettingsRef.current;
+          const canApplyGridSnap = psGrid.snapToGrid && corner && !obj.__cropGroup && !obj.__resizeSnapHandler;
+          if (canApplyGridSnap) {
+            const gridX = psGrid.gridSizeX ?? psGrid.gridSize ?? 0;
+            const gridY = psGrid.gridSizeY ?? psGrid.gridSize ?? 0;
+            if (gridX > 0 && gridY > 0) {
+              obj.setCoords();
+              const br = obj.getBoundingRect();
+              if (br.width > 1 && br.height > 1) {
+                const hasL = corner.includes("l");
+                const hasR = corner.includes("r");
+                const hasT = corner.includes("t");
+                const hasB = corner.includes("b");
+                const anchorRight = br.left + br.width;
+                const anchorBottom = br.top + br.height;
+                let newLeft = br.left;
+                let newTop = br.top;
+                let newWidth = br.width;
+                let newHeight = br.height;
+                const xAlreadySnapped = scaleGuides.some((g) => g.type === "vertical");
+                const yAlreadySnapped = scaleGuides.some((g) => g.type === "horizontal");
+                if (!xAlreadySnapped) {
+                  if (hasL) {
+                    const nL = Math.round(br.left / gridX) * gridX;
+                    newWidth = Math.max(20, anchorRight - nL);
+                    newLeft = anchorRight - newWidth;
+                  } else if (hasR) {
+                    const nR = Math.round(anchorRight / gridX) * gridX;
+                    newWidth = Math.max(20, nR - br.left);
+                  }
+                }
+                if (!yAlreadySnapped) {
+                  if (hasT) {
+                    const nT = Math.round(br.top / gridY) * gridY;
+                    newHeight = Math.max(20, anchorBottom - nT);
+                    newTop = anchorBottom - newHeight;
+                  } else if (hasB) {
+                    const nB = Math.round(anchorBottom / gridY) * gridY;
+                    newHeight = Math.max(20, nB - br.top);
+                  }
+                }
+                const widthChanged = Math.abs(newWidth - br.width) > 0.5;
+                const heightChanged = Math.abs(newHeight - br.height) > 0.5;
+                if (widthChanged || heightChanged) {
+                  const isTextWidth = obj instanceof fabric.Textbox && widthChanged && !heightChanged;
+                  if (isTextWidth) {
+                    obj.set({ width: Math.max(20, newWidth) });
+                    try {
+                      obj.initDimensions();
+                    } catch {
+                    }
+                  } else {
+                    const ratioX = widthChanged ? newWidth / br.width : 1;
+                    const ratioY = heightChanged ? newHeight / br.height : 1;
+                    const curSx = obj.scaleX ?? 1;
+                    const curSy = obj.scaleY ?? 1;
+                    obj.set({ scaleX: curSx * ratioX, scaleY: curSy * ratioY });
+                  }
+                  obj.setCoords();
+                  const after = obj.getBoundingRect();
+                  const dx = newLeft - after.left;
+                  const dy = newTop - after.top;
+                  if (Math.abs(dx) > 0.01 || Math.abs(dy) > 0.01) {
+                    obj.set({ left: (obj.left ?? 0) + dx, top: (obj.top ?? 0) + dy });
+                    obj.setCoords();
+                  }
+                  if (!xAlreadySnapped) {
+                    if (hasL) gridGuidesForScale.push({ type: "vertical", position: newLeft, kind: "grid" });
+                    else if (hasR) gridGuidesForScale.push({ type: "vertical", position: newLeft + newWidth, kind: "grid" });
+                  }
+                  if (!yAlreadySnapped) {
+                    if (hasT) gridGuidesForScale.push({ type: "horizontal", position: newTop, kind: "grid" });
+                    else if (hasB) gridGuidesForScale.push({ type: "horizontal", position: newTop + newHeight, kind: "grid" });
+                  }
+                }
+              }
+            }
+          }
+        } catch {
+        }
+        setGuides(gridGuidesForScale.length ? [...scaleGuides, ...gridGuidesForScale] : scaleGuides);
       });
       fabricCanvas.on("object:resizing", (e) => {
         if (!isActiveRef.current) return;
@@ -11605,13 +13416,70 @@ const PageCanvas = forwardRef(
         }
         const transform = e.transform;
         const corner = (transform == null ? void 0 : transform.corner) || "";
+        if (obj instanceof fabric.Textbox && (corner === "ml" || corner === "mr")) {
+          const objId = getObjectId(obj);
+          const sourceEl = objId ? elementsRef.current.find((el) => el.id === objId) : void 0;
+          bakeTextboxScaleIntoTypography(obj, sourceEl);
+        }
+        snapDuringScaleCallback(obj, corner);
         const scaleGuides = calculateScaleSnapGuidesCallback(obj, corner);
-        setGuides(scaleGuides);
+        const gridGuidesForTextResize = [];
+        try {
+          const psGrid = projectSettingsRef.current;
+          if (psGrid.snapToGrid && corner && obj instanceof fabric.Textbox && (corner === "ml" || corner === "mr")) {
+            const gridX = psGrid.gridSizeX ?? psGrid.gridSize ?? 0;
+            if (gridX > 0) {
+              obj.setCoords();
+              const br = obj.getBoundingRect();
+              const xAlreadySnapped = scaleGuides.some((g) => g.type === "vertical");
+              if (!xAlreadySnapped && br.width > 1) {
+                const anchorRight = br.left + br.width;
+                let newLeft = br.left;
+                let newWidth = br.width;
+                if (corner === "ml") {
+                  const nL = Math.round(br.left / gridX) * gridX;
+                  newWidth = Math.max(20, anchorRight - nL);
+                  newLeft = anchorRight - newWidth;
+                } else {
+                  const nR = Math.round(anchorRight / gridX) * gridX;
+                  newWidth = Math.max(20, nR - br.left);
+                }
+                if (Math.abs(newWidth - br.width) > 0.5) {
+                  obj.set({ width: Math.max(20, newWidth) });
+                  try {
+                    obj.initDimensions();
+                  } catch {
+                  }
+                  obj.setCoords();
+                  const after = obj.getBoundingRect();
+                  const dx = newLeft - after.left;
+                  if (Math.abs(dx) > 0.01) {
+                    obj.set({ left: (obj.left ?? 0) + dx });
+                    obj.setCoords();
+                  }
+                  gridGuidesForTextResize.push({
+                    type: "vertical",
+                    position: corner === "ml" ? newLeft : newLeft + newWidth,
+                    kind: "grid"
+                  });
+                }
+              }
+            }
+          }
+        } catch {
+        }
+        setGuides(gridGuidesForTextResize.length ? [...scaleGuides, ...gridGuidesForTextResize] : scaleGuides);
       });
       fabricCanvas.on("object:rotating", (e) => {
         markSimpleTransform(e);
         didTransformRef.current = true;
         const tr = e.target;
+        try {
+          const getCursor = fabricCanvas.__pixldocsGetRotateCursor;
+          const upper = fabricCanvas.upperCanvasEl;
+          if (typeof getCursor === "function" && upper && tr) upper.style.cursor = getCursor(tr);
+        } catch {
+        }
         const rotateTargetId = tr ? getObjectId(tr) : null;
         if (rotateTargetId && rotateTargetId !== "__background__") {
           preserveSelectionAfterTransformIdRef.current = rotateTargetId;
@@ -11638,6 +13506,7 @@ const PageCanvas = forwardRef(
         prepareGroupSelectionTransformStart(e.target);
         markTransforming(e.target);
         didTransformRef.current = true;
+        if (e.target) e.target.__pixldocsDragMoved = true;
         const moveTargetId = e.target ? getObjectId(e.target) : null;
         if (moveTargetId && moveTargetId !== "__background__") {
           preserveSelectionAfterTransformIdRef.current = moveTargetId;
@@ -11654,19 +13523,57 @@ const PageCanvas = forwardRef(
         if (!obj) return;
         const snapTarget = fabricCanvas.getActiveObject() ?? obj;
         const { guides: newGuides, snapDx, snapDy } = calculateSnapGuidesCallback(snapTarget);
-        setGuides(newGuides);
-        if (snapDx !== 0 || snapDy !== 0) {
-          snapTarget.set({ left: (snapTarget.left ?? 0) + snapDx, top: (snapTarget.top ?? 0) + snapDy });
+        let finalDx = snapDx;
+        let finalDy = snapDy;
+        let mergedGuides = newGuides;
+        const psLive = projectSettingsRef.current;
+        const gridX = psLive.gridSizeX ?? psLive.gridSize ?? 0;
+        const gridY = psLive.gridSizeY ?? psLive.gridSize ?? 0;
+        if (psLive.snapToGrid && gridX > 0 && gridY > 0) {
+          try {
+            snapTarget.setCoords();
+          } catch {
+          }
+          const br = snapTarget.getBoundingRect();
+          const gridGuides = [];
+          if (finalDx === 0) {
+            const newLeft = Math.round(br.left / gridX) * gridX;
+            finalDx = newLeft - br.left;
+            gridGuides.push({ type: "vertical", position: newLeft, kind: "grid" });
+          }
+          if (finalDy === 0) {
+            const newTop = Math.round(br.top / gridY) * gridY;
+            finalDy = newTop - br.top;
+            gridGuides.push({ type: "horizontal", position: newTop, kind: "grid" });
+          }
+          if (gridGuides.length) mergedGuides = [...newGuides, ...gridGuides];
+        }
+        setGuides(mergedGuides);
+        setHoverBounds(null);
+        if (finalDx !== 0 || finalDy !== 0) {
+          snapTarget.set({ left: (snapTarget.left ?? 0) + finalDx, top: (snapTarget.top ?? 0) + finalDy });
         }
       });
       let cropGroupSaveTimer = null;
       fabricCanvas.on("object:modified", (e) => {
-        var _a2, _b, _c, _d, _e, _f, _g;
+        var _a2, _b2, _c, _d, _e, _f, _g;
         try {
           dragStarted = false;
           setGuides([]);
           setGroupOverlayLiveBoundsRef.current(null);
+          objectResizeActiveSnapRef.current = null;
+          groupResizeActiveSnapRef.current = null;
           onDragEnd == null ? void 0 : onDragEnd();
+          try {
+            const t = e.target;
+            if (t instanceof fabric.ActiveSelection) {
+              for (const child of t.getObjects()) {
+                delete child.__asLiveOrigW;
+                delete child.__asLiveOrigH;
+              }
+            }
+          } catch {
+          }
           lockEdits();
           const modifiedTarget = e.target;
           const modifiedTargetId = modifiedTarget ? getObjectId(modifiedTarget) : null;
@@ -11775,7 +13682,7 @@ const PageCanvas = forwardRef(
                   useEditorStore.getState().reflowStackGroupInPage(pageId, groupId);
                 }
                 const stateAfter = useEditorStore.getState();
-                const pageAfter = ((_b = stateAfter.canvas.pages.find((p) => p.id === pageId)) == null ? void 0 : _b.children) ?? [];
+                const pageAfter = ((_b2 = stateAfter.canvas.pages.find((p) => p.id === pageId)) == null ? void 0 : _b2.children) ?? [];
                 const groupNodeAfter = findNodeById(pageAfter, groupId);
                 if (groupNodeAfter) {
                   const abs = getAbsoluteBounds(groupNodeAfter, pageAfter);
@@ -11802,11 +13709,11 @@ const PageCanvas = forwardRef(
                   clearTimeout(cropGroupSaveTimer);
                 }
                 cropGroupSaveTimer = setTimeout(() => {
-                  var _a3, _b2, _c2;
+                  var _a3, _b3, _c2;
                   const { updateElement: updateElement2 } = useEditorStore.getState();
                   const img = ct._img;
                   const zoom3 = ((_a3 = img == null ? void 0 : img._ct) == null ? void 0 : _a3.zoom) ?? 1;
-                  const panX = ((_b2 = img == null ? void 0 : img._ct) == null ? void 0 : _b2.panX) ?? 0.5;
+                  const panX = ((_b3 = img == null ? void 0 : img._ct) == null ? void 0 : _b3.panX) ?? 0.5;
                   const panY = ((_c2 = img == null ? void 0 : img._ct) == null ? void 0 : _c2.panY) ?? 0.5;
                   const stateCrop = useEditorStore.getState();
                   const pageCrop = stateCrop.canvas.pages.find((p) => p.id === pageId);
@@ -11825,6 +13732,8 @@ const PageCanvas = forwardRef(
                     cropZoom: zoom3
                   }, { recordHistory: false });
                   active.__isInternalCropUpdate = false;
+                  installImageResizeControlsWithSnap(active);
+                  ensureCanvaControlRenders(active);
                   fabricCanvas.setActiveObject(active);
                   setTimeout(() => justModifiedIdsRef.current.delete(objId), 150);
                 }, 0);
@@ -12078,6 +13987,10 @@ const PageCanvas = forwardRef(
           for (const obj of activeObjects) {
             const objId = getObjectId(obj);
             if (!objId || objId === "__background__") continue;
+            const sourceElement = elementsRef.current.find((el) => el.id === objId);
+            if (obj instanceof fabric.Textbox && !isActiveSelection) {
+              bakeTextboxScaleIntoTypography(obj, sourceElement);
+            }
             let intrinsicWidth;
             let intrinsicHeight;
             if (obj instanceof fabric.Circle) {
@@ -12144,7 +14057,6 @@ const PageCanvas = forwardRef(
               absoluteLeft = (absoluteLeft ?? 0) - w / 2;
               absoluteTop = (absoluteTop ?? 0) - h / 2;
             }
-            const sourceElement = elementsRef.current.find((el) => el.id === objId);
             const preserveCornerGeometry = (sourceElement == null ? void 0 : sourceElement.type) === "shape" && (sourceElement.shapeType === "circle" || sourceElement.shapeType === "rounded-rect" || sourceElement.shapeType === "triangle");
             let finalWidth = intrinsicWidth;
             let finalHeight = intrinsicHeight;
@@ -12230,17 +14142,35 @@ const PageCanvas = forwardRef(
               finalHeight = 0;
               finalScaleX = 1;
               finalScaleY = 1;
+            } else if (obj instanceof fabric.Textbox && isActiveSelection && (Math.abs((decomposed.scaleX ?? 1) - 1) > 1e-3 || Math.abs((decomposed.scaleY ?? 1) - 1) > 1e-3)) {
+              const sx = Math.abs(decomposed.scaleX || 1);
+              const sy = Math.abs(decomposed.scaleY || 1);
+              const bakedWidth = Math.max(20, intrinsicWidth * sx);
+              const bakedHeight = Math.max(1, intrinsicHeight * sy);
+              finalWidth = bakedWidth;
+              finalHeight = bakedHeight;
+              finalScaleX = 1;
+              finalScaleY = 1;
+              try {
+                obj.set({ width: bakedWidth, scaleX: 1, scaleY: 1 });
+                obj.initDimensions();
+                obj.setCoords();
+              } catch {
+              }
+              finalAbsoluteMatrix = fabric.util.composeMatrix({
+                translateX: decomposed.translateX,
+                translateY: decomposed.translateY,
+                angle: decomposed.angle ?? 0,
+                scaleX: 1,
+                scaleY: 1,
+                skewX: 0,
+                skewY: 0
+              });
             } else if (preserveCornerGeometry) {
               const scaledW = Math.max(1, intrinsicWidth * Math.abs(decomposed.scaleX || 1));
               const scaledH = Math.max(1, intrinsicHeight * Math.abs(decomposed.scaleY || 1));
-              if ((sourceElement == null ? void 0 : sourceElement.shapeType) === "circle") {
-                const diameter = Math.max(1, Math.min(scaledW, scaledH));
-                finalWidth = diameter;
-                finalHeight = diameter;
-              } else {
-                finalWidth = scaledW;
-                finalHeight = scaledH;
-              }
+              finalWidth = scaledW;
+              finalHeight = scaledH;
               finalScaleX = 1;
               finalScaleY = 1;
               obj.set({ scaleX: 1, scaleY: 1 });
@@ -12279,6 +14209,11 @@ const PageCanvas = forwardRef(
               transformMatrix: finalAbsoluteMatrix
             };
             if (obj instanceof fabric.Textbox) {
+              const bakedTextScaleUpdates = obj.__pixldocsBakedTextScaleUpdates;
+              if (bakedTextScaleUpdates && typeof bakedTextScaleUpdates === "object") {
+                Object.assign(elementUpdate, bakedTextScaleUpdates);
+                delete obj.__pixldocsBakedTextScaleUpdates;
+              }
               const baked = obj.minBoxHeight;
               if (typeof baked === "number" && baked > 0) {
                 elementUpdate.minBoxHeight = baked;
@@ -12387,7 +14322,7 @@ const PageCanvas = forwardRef(
         }
       });
       fabricCanvas.on("mouse:dblclick", (e) => {
-        var _a2, _b;
+        var _a2, _b2;
         if (!isActiveRef.current || !allowEditing) return;
         let target = e.target;
         if (!target) {
@@ -12397,7 +14332,7 @@ const PageCanvas = forwardRef(
         if (target && target instanceof fabric.Group && target.__cropGroup) {
           const ct = target.__cropData;
           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 innerSrc = ((_a2 = innerImg == null ? void 0 : innerImg.getSrc) == null ? void 0 : _a2.call(innerImg)) || ((_b2 = innerImg == null ? void 0 : innerImg._originalElement) == null ? void 0 : _b2.src) || (innerImg == null ? void 0 : innerImg.src) || "";
           const isPlaceholder = !innerSrc || innerSrc === EMPTY_IMAGE_PLACEHOLDER_DATA_URL;
           if (innerImg && !isPlaceholder && !isCropGroupInCropMode(target)) {
             enterCropMode(target);
@@ -12576,13 +14511,13 @@ const PageCanvas = forwardRef(
         visibilityUpdateInProgressRef.current = false;
       }
       doSyncRef.current = () => {
-        var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+        var _a2, _b2, _c, _d, _e, _f, _g, _h, _i, _j;
         const shouldSkipUpdates2 = syncLockedRef.current || editLockRef.current;
         const state = useEditorStore.getState();
         const elementsToSync = elements;
         elementsRef.current = elementsToSync;
         const pageTree = isPreviewMode && (pageChildren == null ? void 0 : pageChildren.length) ? pageChildren ?? [] : ((_a2 = state.canvas.pages.find((p) => p.id === pageId)) == null ? void 0 : _a2.children) ?? [];
-        const selectedIdsFromStore = new Set(((_b = state.canvas) == null ? void 0 : _b.selectedIds) ?? []);
+        const selectedIdsFromStore = new Set(((_b2 = state.canvas) == null ? void 0 : _b2.selectedIds) ?? []);
         isRebuildingRef.current = true;
         const allElementIds = new Set(elementsToSync.map((el) => el.id));
         const sectionGroups = pageTree.filter(
@@ -12609,7 +14544,8 @@ const PageCanvas = forwardRef(
           const activeObj = fc.getActiveObject();
           const activeObjId = activeObj ? getObjectId(activeObj) : null;
           const isTextBeingEdited = activeObjId && editingTextIdRef.current === activeObjId;
-          if (activeObj && !(((_c = activeObj._ct) == null ? void 0 : _c.isCropGroup) || activeObj.__cropGroup) && !isTextBeingEdited) {
+          const isMultiSelect = activeObj instanceof fabric.ActiveSelection;
+          if (activeObj && isMultiSelect && !(((_c = activeObj._ct) == null ? void 0 : _c.isCropGroup) || activeObj.__cropGroup) && !isTextBeingEdited) {
             fc.discardActiveObject();
           }
         }
@@ -12929,7 +14865,7 @@ const PageCanvas = forwardRef(
                     updateCoverLayout(existingObj);
                     applyEdgeFadeFrameClipPath(existingObj, element, ct.frameW, ct.frameH, ct.shape || "rect", ct.rx || 0);
                     if (allowEditing) {
-                      installCanvaMaskControls(existingObj);
+                      installImageResizeControlsWithSnap(existingObj);
                     } else {
                       existingObj.set({
                         hasControls: false,
@@ -13011,7 +14947,7 @@ const PageCanvas = forwardRef(
                     hoverCursor: isDynamicField && isPreviewMode ? "pointer" : void 0
                   });
                   if (allowEditing) {
-                    installCanvaMaskControls(existingObj);
+                    installImageResizeControlsWithSnap(existingObj);
                   }
                   existingObj.setCoords();
                   fc.requestRenderAll();
@@ -13737,7 +15673,7 @@ const PageCanvas = forwardRef(
       return unsub;
     }, []);
     const updateFabricObject = (obj, element, skipPositionUpdate = false) => {
-      var _a2, _b, _c;
+      var _a2, _b2, _c;
       const fc = fabricRef.current;
       if (fc && isTransforming(fc)) {
         return;
@@ -13805,11 +15741,12 @@ const PageCanvas = forwardRef(
             // Disable rotation for crop groups (simplifies resize math)
             hasRotatingPoint: false,
             // Hide rotation handle
-            // Scale with zoom so handles stay same visual size (controls drawn in canvas pixel space)
-            cornerSize: Math.max(6, Math.round(8 * (fc.getZoom() || 1))),
-            borderScaleFactor: Math.max(1.25, 1.25 * (fc.getZoom() || 1)),
+            // Handles are drawn in screen-space — keep them constant on-screen.
+            // Match the global Canva-style defaults (circular dots, pill sides).
+            cornerSize: 10,
+            borderScaleFactor: SELECTION_BORDER_SCALE,
             transparentCorners: false,
-            cornerStyle: "rect",
+            cornerStyle: "circle",
             cornerColor: SELECTION_PRIMARY,
             cornerStrokeColor: "#ffffff",
             borderColor: SELECTION_PRIMARY,
@@ -13919,7 +15856,8 @@ const PageCanvas = forwardRef(
             obj.clipPath.dirty = true;
             obj.clipPath.setCoords();
           }
-          installCanvaMaskControls(obj);
+          installImageResizeControlsWithSnap(obj);
+          ensureCanvaControlRenders(obj);
           obj.set({
             selectable: true,
             evented: true,
@@ -14014,7 +15952,7 @@ const PageCanvas = forwardRef(
         obj.setCoords();
       }
       if (!isLine) {
-        const angleTextPathActive = isTextbox && ((_b = element.textPath) == null ? void 0 : _b.preset) === "rise";
+        const angleTextPathActive = isTextbox && ((_b2 = element.textPath) == null ? void 0 : _b2.preset) === "rise";
         const appliedSkewY = angleTextPathActive ? 0 : element.skewY ?? 0;
         let posIfNotSkipped = skipPositionUpdate ? {} : { left: fabricPos.left, top: fabricPos.top };
         if (!skipPositionUpdate && (obj instanceof fabric.FabricImage && obj.originX === "center" || obj instanceof fabric.Group && obj.__cropGroup)) {
@@ -14091,7 +16029,17 @@ const PageCanvas = forwardRef(
           objectCaching: true
         });
       } else if (obj instanceof fabric.Ellipse) {
-        obj.set({ rx: rW / 2, ry: rH / 2 });
+        obj.set({
+          rx: cornerSafeW / 2,
+          ry: cornerSafeH / 2,
+          fill: element.fill || "transparent",
+          stroke: element.stroke || "transparent",
+          strokeWidth: element.strokeWidth || 0,
+          strokeUniform: true,
+          strokeLineJoin: "round",
+          strokeLineCap: "round",
+          objectCaching: true
+        });
       } else if (obj instanceof fabric.Textbox) {
         const overflowPolicy = element.overflowPolicy || "grow-and-push";
         let text = element.text || "Text";
@@ -14285,6 +16233,16 @@ const PageCanvas = forwardRef(
             strokeUniform: true,
             objectCaching: true
           });
+        } else if (obj instanceof fabric.Ellipse) {
+          obj.set({
+            rx: cornerSafeW / 2,
+            ry: cornerSafeH / 2,
+            fill: element.fill || "transparent",
+            stroke: element.stroke || "transparent",
+            strokeWidth: element.strokeWidth || 0,
+            strokeUniform: true,
+            objectCaching: true
+          });
         } else if (obj instanceof fabric.Rect && element.shapeType === "rounded-rect") {
           const toRadius = (value, fallback) => Number.isFinite(value) ? Math.max(0, Number(value)) : fallback;
           const baseRx = Math.max(0, Number(element.rx ?? 0));
@@ -14544,7 +16502,7 @@ const PageCanvas = forwardRef(
       return Math.max(min, Math.min(max, v));
     };
     const applyEdgeFadeFrameClipPath = (group, element, frameW, frameH, shape, rxRatio) => {
-      var _a2, _b, _c;
+      var _a2, _b2, _c;
       const fadeElement = element;
       const fadeGroup = group;
       const inputKey = edgeFadeKey(fadeElement);
@@ -14665,7 +16623,7 @@ const PageCanvas = forwardRef(
         delete fadeGroup.__edgeFadeRenderConfig;
         delete fadeGroup.__edgeFadeKey;
         delete fadeGroup.__edgeFadeInputKey;
-        if ((_b = group.clipPath) == null ? void 0 : _b.__edgeFadeMask) {
+        if ((_b2 = group.clipPath) == null ? void 0 : _b2.__edgeFadeMask) {
           group.clipPath = void 0;
           updateCoverLayout(group);
         }
@@ -14682,7 +16640,7 @@ const PageCanvas = forwardRef(
       (_c = group.canvas) == null ? void 0 : _c.requestRenderAll();
     };
     const loadImageAsync2 = async (element, placeholder, fc) => {
-      var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p;
+      var _a2, _b2, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p;
       const imageUrl = element.src || element.imageUrl;
       if (!imageUrl) return;
       const elementId = element.id;
@@ -14713,7 +16671,7 @@ const PageCanvas = forwardRef(
         await normalizeSvgImageDimensions(img, imageUrl, element.sourceFormat);
         if (!isLatestRequest()) return;
         const imageFitForFade = element.imageFit || ((_a2 = element.style) == null ? void 0 : _a2.imageFit) || "cover";
-        const clipShapeForFade = element.clipShape ?? ((_b = element.style) == null ? void 0 : _b.imageFrameShape) ?? (isPreviewMode ? "rectangle" : "none");
+        const clipShapeForFade = element.clipShape ?? ((_b2 = element.style) == null ? void 0 : _b2.imageFrameShape) ?? (isPreviewMode ? "rectangle" : "none");
         const willUseCropGroupForFade = imageFitForFade !== "fill" || clipShapeForFade && clipShapeForFade !== "none";
         try {
           if (hasEdgeFade(element) && !willUseCropGroupForFade) {
@@ -14931,7 +16889,7 @@ const PageCanvas = forwardRef(
               evented: canBeEvented && !isHidden
             });
           } else {
-            installCanvaMaskControls(cropGroup);
+            installImageResizeControlsWithSnap(cropGroup);
           }
           const cropImg = (_o = cropGroup.__cropData) == null ? void 0 : _o._img;
           if (cropImg) {
@@ -15142,65 +17100,191 @@ const PageCanvas = forwardRef(
           ),
           sectionsOverlay,
           groupBoundsOverlay,
-          guides.length > 0 && /* @__PURE__ */ jsx(
+          hoverBounds && !guides.length && !(selectedIdsRef.current && selectedIdsRef.current.length) && /* @__PURE__ */ jsx(
             "svg",
             {
               className: "absolute inset-0 pointer-events-none",
               style: { width: scaledWidth, height: scaledHeight },
               viewBox: `0 0 ${canvasWidth} ${canvasHeight}`,
-              children: (() => {
-                const seen = /* @__PURE__ */ new Set();
-                return guides.filter((guide) => {
-                  const key = `${guide.type}-${guide.position.toFixed(1)}`;
-                  if (seen.has(key)) return false;
-                  seen.add(key);
-                  return true;
-                }).map((guide, i) => {
-                  const isElementRelative = guide.start !== void 0 && guide.end !== void 0;
-                  const isActive2 = guide.active === true;
-                  const strokeColor = isActive2 ? "#22c55e" : isElementRelative ? "#f43f5e" : "#3b82f6";
-                  const strokeWidth = isActive2 ? 2.5 : 1;
-                  const strokeDasharray = isActive2 ? "none" : isElementRelative ? "3,3" : "4,4";
-                  const showDistance = typeof guide.distance === "number";
-                  const labelText = showDistance ? String(Math.round(guide.distance)) : "";
-                  const labelW = Math.max(24, labelText.length * 7);
-                  if (guide.type === "vertical") {
-                    const padding = isElementRelative || isActive2 ? 20 : 0;
-                    const y1 = guide.start != null && guide.end != null ? Math.max(0, guide.start - padding) : 0;
-                    const y2 = guide.start != null && guide.end != null ? Math.min(canvasHeight, guide.end + padding) : canvasHeight;
-                    const labelY = guide.start != null && guide.end != null ? (guide.start + guide.end) / 2 : canvasHeight / 2;
-                    return /* @__PURE__ */ jsxs("g", { children: [
-                      /* @__PURE__ */ jsx("line", { x1: guide.position, y1, x2: guide.position, y2, stroke: strokeColor, strokeWidth, strokeDasharray }),
-                      isActive2 && /* @__PURE__ */ jsx("circle", { cx: guide.position, cy: y2, r: 4, fill: "#22c55e", opacity: 0.9 }),
-                      isElementRelative && !isActive2 && /* @__PURE__ */ jsxs(Fragment, { children: [
-                        /* @__PURE__ */ jsx("circle", { cx: guide.position, cy: y1, r: 2, fill: "#f43f5e" }),
-                        /* @__PURE__ */ jsx("circle", { cx: guide.position, cy: y2, r: 2, fill: "#f43f5e" })
-                      ] }),
-                      showDistance && /* @__PURE__ */ jsxs("g", { transform: `translate(${guide.position + 6}, ${labelY})`, children: [
-                        /* @__PURE__ */ jsx("rect", { x: -2, y: -9, width: labelW, height: 16, rx: 4, fill: "rgba(0,0,0,0.75)" }),
-                        /* @__PURE__ */ jsx("text", { x: labelW / 2 - 2, y: 4, textAnchor: "middle", fill: "#fff", fontSize: 10, fontFamily: "system-ui, sans-serif", fontWeight: 500, children: labelText })
-                      ] })
-                    ] }, i);
-                  } else {
-                    const padding = isElementRelative || isActive2 ? 20 : 0;
-                    const x1 = guide.start != null && guide.end != null ? Math.max(0, guide.start - padding) : 0;
-                    const x2 = guide.start != null && guide.end != null ? Math.min(canvasWidth, guide.end + padding) : canvasWidth;
-                    const labelX = guide.start != null && guide.end != null ? (guide.start + guide.end) / 2 : canvasWidth / 2;
-                    return /* @__PURE__ */ jsxs("g", { children: [
-                      /* @__PURE__ */ jsx("line", { x1, y1: guide.position, x2, y2: guide.position, stroke: strokeColor, strokeWidth, strokeDasharray }),
-                      isActive2 && /* @__PURE__ */ jsx("circle", { cx: x2, cy: guide.position, r: 4, fill: "#22c55e", opacity: 0.9 }),
-                      isElementRelative && !isActive2 && /* @__PURE__ */ jsxs(Fragment, { children: [
-                        /* @__PURE__ */ jsx("circle", { cx: x1, cy: guide.position, r: 2, fill: "#f43f5e" }),
-                        /* @__PURE__ */ jsx("circle", { cx: x2, cy: guide.position, r: 2, fill: "#f43f5e" })
-                      ] }),
-                      showDistance && /* @__PURE__ */ jsxs("g", { transform: `translate(${labelX}, ${guide.position - 10})`, children: [
-                        /* @__PURE__ */ jsx("rect", { x: -2, y: -9, width: labelW, height: 16, rx: 4, fill: "rgba(0,0,0,0.75)" }),
-                        /* @__PURE__ */ jsx("text", { x: labelW / 2 - 2, y: 4, textAnchor: "middle", fill: "#fff", fontSize: 10, fontFamily: "system-ui, sans-serif", fontWeight: 500, children: labelText })
-                      ] })
-                    ] }, i);
+              children: /* @__PURE__ */ jsx(
+                "rect",
+                {
+                  x: hoverBounds.left,
+                  y: hoverBounds.top,
+                  width: hoverBounds.width,
+                  height: hoverBounds.height,
+                  fill: "none",
+                  stroke: SELECTION_PRIMARY,
+                  strokeWidth: 2,
+                  vectorEffect: "non-scaling-stroke",
+                  strokeDasharray: "0",
+                  opacity: 1
+                }
+              )
+            }
+          ),
+          canvas.projectSettings.showGrid && (() => {
+            const ps = canvas.projectSettings;
+            const gx = Math.max(1, ps.gridSizeX ?? ps.gridSize ?? 0);
+            const gy = Math.max(1, ps.gridSizeY ?? ps.gridSize ?? 0);
+            if (gx <= 0 || gy <= 0) return null;
+            return /* @__PURE__ */ jsxs(
+              "svg",
+              {
+                className: "absolute inset-0 pointer-events-none",
+                style: { width: scaledWidth, height: scaledHeight },
+                viewBox: `0 0 ${canvasWidth} ${canvasHeight}`,
+                children: [
+                  /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx(
+                    "pattern",
+                    {
+                      id: `pixldocs-grid-${pageId}`,
+                      width: gx,
+                      height: gy,
+                      patternUnits: "userSpaceOnUse",
+                      children: /* @__PURE__ */ jsx(
+                        "path",
+                        {
+                          d: `M ${gx} 0 L 0 0 0 ${gy}`,
+                          fill: "none",
+                          stroke: ps.gridColor || "#0f172a",
+                          strokeWidth: 0.5,
+                          opacity: 0.22
+                        }
+                      )
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx("rect", { width: canvasWidth, height: canvasHeight, fill: `url(#pixldocs-grid-${pageId})` })
+                ]
+              }
+            );
+          })(),
+          guides.length > 0 && /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              className: "absolute inset-0 pointer-events-none",
+              style: { width: scaledWidth, height: scaledHeight },
+              viewBox: `0 0 ${canvasWidth} ${canvasHeight}`,
+              children: [
+                (() => {
+                  const seenBoxes = /* @__PURE__ */ new Set();
+                  const boxes = [];
+                  for (const g of guides) {
+                    const list = g.targetBoundsList ?? (g.targetBounds ? [g.targetBounds] : []);
+                    for (const b of list) {
+                      const key = `${b.left.toFixed(1)}-${b.top.toFixed(1)}-${b.width.toFixed(1)}-${b.height.toFixed(1)}`;
+                      if (seenBoxes.has(key)) continue;
+                      seenBoxes.add(key);
+                      boxes.push(b);
+                    }
                   }
-                });
-              })()
+                  return boxes.map((b, i) => /* @__PURE__ */ jsx(
+                    "rect",
+                    {
+                      x: b.left,
+                      y: b.top,
+                      width: b.width,
+                      height: b.height,
+                      fill: "none",
+                      stroke: "#f43f5e",
+                      strokeWidth: 1.5,
+                      strokeDasharray: "4,3",
+                      opacity: 0.9,
+                      vectorEffect: "non-scaling-stroke"
+                    },
+                    `tb-${i}`
+                  ));
+                })(),
+                (() => {
+                  const seen = /* @__PURE__ */ new Set();
+                  return guides.filter((guide) => {
+                    if (guide.kind === "gap") return true;
+                    const key = `${guide.type}-${guide.position.toFixed(1)}`;
+                    if (seen.has(key)) return false;
+                    seen.add(key);
+                    return true;
+                  }).map((guide, i) => {
+                    if (guide.kind === "gap" && guide.gap != null && guide.start != null && guide.end != null) {
+                      const gapColor = "#ec4899";
+                      const label = `${guide.gap}`;
+                      const labelW2 = Math.max(22, label.length * 7 + 8);
+                      if (guide.type === "horizontal") {
+                        const y = guide.bracketAt ?? guide.position;
+                        const x1 = guide.start;
+                        const x2 = guide.end;
+                        const mid = (x1 + x2) / 2;
+                        return /* @__PURE__ */ jsxs("g", { children: [
+                          /* @__PURE__ */ jsx("line", { x1, y1: y, x2, y2: y, stroke: gapColor, strokeWidth: 1.75, vectorEffect: "non-scaling-stroke" }),
+                          /* @__PURE__ */ jsx("line", { x1, y1: y - 4, x2: x1, y2: y + 4, stroke: gapColor, strokeWidth: 1.75, vectorEffect: "non-scaling-stroke" }),
+                          /* @__PURE__ */ jsx("line", { x1: x2, y1: y - 4, x2, y2: y + 4, stroke: gapColor, strokeWidth: 1.75, vectorEffect: "non-scaling-stroke" }),
+                          /* @__PURE__ */ jsxs("g", { transform: `translate(${mid}, ${y - 12})`, children: [
+                            /* @__PURE__ */ jsx("rect", { x: -labelW2 / 2, y: -9, width: labelW2, height: 16, rx: 4, fill: gapColor }),
+                            /* @__PURE__ */ jsx("text", { x: 0, y: 3, textAnchor: "middle", fill: "#fff", fontSize: 10, fontFamily: "system-ui, sans-serif", fontWeight: 600, children: label })
+                          ] })
+                        ] }, i);
+                      } else {
+                        const x = guide.bracketAt ?? guide.position;
+                        const y1 = guide.start;
+                        const y2 = guide.end;
+                        const mid = (y1 + y2) / 2;
+                        return /* @__PURE__ */ jsxs("g", { children: [
+                          /* @__PURE__ */ jsx("line", { x1: x, y1, x2: x, y2, stroke: gapColor, strokeWidth: 1.75, vectorEffect: "non-scaling-stroke" }),
+                          /* @__PURE__ */ jsx("line", { x1: x - 4, y1, x2: x + 4, y2: y1, stroke: gapColor, strokeWidth: 1.75, vectorEffect: "non-scaling-stroke" }),
+                          /* @__PURE__ */ jsx("line", { x1: x - 4, y1: y2, x2: x + 4, y2, stroke: gapColor, strokeWidth: 1.75, vectorEffect: "non-scaling-stroke" }),
+                          /* @__PURE__ */ jsxs("g", { transform: `translate(${x + 12}, ${mid})`, children: [
+                            /* @__PURE__ */ jsx("rect", { x: -labelW2 / 2, y: -9, width: labelW2, height: 16, rx: 4, fill: gapColor }),
+                            /* @__PURE__ */ jsx("text", { x: 0, y: 3, textAnchor: "middle", fill: "#fff", fontSize: 10, fontFamily: "system-ui, sans-serif", fontWeight: 600, children: label })
+                          ] })
+                        ] }, i);
+                      }
+                    }
+                    const isElementRelative = guide.start !== void 0 && guide.end !== void 0;
+                    const isActive2 = guide.active === true;
+                    const isGrid = guide.kind === "grid";
+                    const strokeColor = isGrid ? "#f59e0b" : isActive2 ? "#22c55e" : isElementRelative ? "#f43f5e" : "#ec4899";
+                    const strokeWidth = isGrid ? 1.75 : 1.75;
+                    const strokeDasharray = isGrid ? "2,3" : isActive2 ? "none" : isElementRelative ? "3,3" : "4,4";
+                    const showDistance = typeof guide.distance === "number";
+                    const labelText = showDistance ? String(Math.round(guide.distance)) : "";
+                    const labelW = Math.max(24, labelText.length * 7);
+                    if (guide.type === "vertical") {
+                      const padding = isElementRelative || isActive2 ? 20 : 0;
+                      const y1 = guide.start != null && guide.end != null ? Math.max(0, guide.start - padding) : 0;
+                      const y2 = guide.start != null && guide.end != null ? Math.min(canvasHeight, guide.end + padding) : canvasHeight;
+                      const labelY = guide.start != null && guide.end != null ? (guide.start + guide.end) / 2 : canvasHeight / 2;
+                      return /* @__PURE__ */ jsxs("g", { children: [
+                        /* @__PURE__ */ jsx("line", { x1: guide.position, y1, x2: guide.position, y2, stroke: strokeColor, strokeWidth, strokeDasharray, vectorEffect: "non-scaling-stroke" }),
+                        isActive2 && /* @__PURE__ */ jsx("circle", { cx: guide.position, cy: y2, r: 4, fill: "#22c55e", opacity: 0.9 }),
+                        isElementRelative && !isActive2 && /* @__PURE__ */ jsxs(Fragment, { children: [
+                          /* @__PURE__ */ jsx("circle", { cx: guide.position, cy: y1, r: 2, fill: "#f43f5e" }),
+                          /* @__PURE__ */ jsx("circle", { cx: guide.position, cy: y2, r: 2, fill: "#f43f5e" })
+                        ] }),
+                        showDistance && /* @__PURE__ */ jsxs("g", { transform: `translate(${guide.position + 6}, ${labelY})`, children: [
+                          /* @__PURE__ */ jsx("rect", { x: -2, y: -9, width: labelW, height: 16, rx: 4, fill: "rgba(0,0,0,0.75)" }),
+                          /* @__PURE__ */ jsx("text", { x: labelW / 2 - 2, y: 4, textAnchor: "middle", fill: "#fff", fontSize: 10, fontFamily: "system-ui, sans-serif", fontWeight: 500, children: labelText })
+                        ] })
+                      ] }, i);
+                    } else {
+                      const padding = isElementRelative || isActive2 ? 20 : 0;
+                      const x1 = guide.start != null && guide.end != null ? Math.max(0, guide.start - padding) : 0;
+                      const x2 = guide.start != null && guide.end != null ? Math.min(canvasWidth, guide.end + padding) : canvasWidth;
+                      const labelX = guide.start != null && guide.end != null ? (guide.start + guide.end) / 2 : canvasWidth / 2;
+                      return /* @__PURE__ */ jsxs("g", { children: [
+                        /* @__PURE__ */ jsx("line", { x1, y1: guide.position, x2, y2: guide.position, stroke: strokeColor, strokeWidth, strokeDasharray, vectorEffect: "non-scaling-stroke" }),
+                        isActive2 && /* @__PURE__ */ jsx("circle", { cx: x2, cy: guide.position, r: 4, fill: "#22c55e", opacity: 0.9 }),
+                        isElementRelative && !isActive2 && /* @__PURE__ */ jsxs(Fragment, { children: [
+                          /* @__PURE__ */ jsx("circle", { cx: x1, cy: guide.position, r: 2, fill: "#f43f5e" }),
+                          /* @__PURE__ */ jsx("circle", { cx: x2, cy: guide.position, r: 2, fill: "#f43f5e" })
+                        ] }),
+                        showDistance && /* @__PURE__ */ jsxs("g", { transform: `translate(${labelX}, ${guide.position - 10})`, children: [
+                          /* @__PURE__ */ jsx("rect", { x: -2, y: -9, width: labelW, height: 16, rx: 4, fill: "rgba(0,0,0,0.75)" }),
+                          /* @__PURE__ */ jsx("text", { x: labelW / 2 - 2, y: 4, textAnchor: "middle", fill: "#fff", fontSize: 10, fontFamily: "system-ui, sans-serif", fontWeight: 500, children: labelText })
+                        ] })
+                      ] }, i);
+                    }
+                  });
+                })()
+              ]
             }
           ),
           gridResizeLabel && /* @__PURE__ */ jsx(
@@ -15336,13 +17420,13 @@ function PreviewCanvas({
   onDynamicFieldClick,
   onReady
 }) {
-  var _a2, _b, _c, _d, _e;
+  var _a2, _b2, _c, _d, _e;
   const canvasRef = useRef(null);
   const containerRef = useRef(null);
   const [containerWidth, setContainerWidth] = useState(0);
   const [hoveredFieldId, setHoveredFieldId] = useState(null);
   const page = (_a2 = config == null ? void 0 : config.pages) == null ? void 0 : _a2[pageIndex];
-  const canvasWidth = ((_b = config == null ? void 0 : config.canvas) == null ? void 0 : _b.width) || 612;
+  const canvasWidth = ((_b2 = config == null ? void 0 : config.canvas) == null ? void 0 : _b2.width) || 612;
   const canvasHeight = ((_c = config == null ? void 0 : config.canvas) == null ? void 0 : _c.height) || 792;
   const elementToFieldMap = useMemo(
     () => buildElementToFieldMap(config == null ? void 0 : config.dynamicFields),
@@ -15392,14 +17476,14 @@ function PreviewCanvas({
     }
   }, [elements]);
   const pageSettings = useMemo(() => {
-    var _a3, _b2;
+    var _a3, _b3;
     return {
       backgroundColor: ((_a3 = page == null ? void 0 : page.settings) == null ? void 0 : _a3.backgroundColor) || "#ffffff",
-      backgroundGradient: (_b2 = page == null ? void 0 : page.settings) == null ? void 0 : _b2.backgroundGradient
+      backgroundGradient: (_b3 = page == null ? void 0 : page.settings) == null ? void 0 : _b3.backgroundGradient
     };
   }, [(_d = page == null ? void 0 : page.settings) == null ? void 0 : _d.backgroundColor, (_e = page == null ? void 0 : page.settings) == null ? void 0 : _e.backgroundGradient]);
   const projectSettings = useMemo(() => {
-    var _a3, _b2, _c2;
+    var _a3, _b3, _c2;
     const vars = ((_a3 = config.themeConfig) == null ? void 0 : _a3.variables) || {};
     return {
       showGrid: false,
@@ -15407,7 +17491,7 @@ function PreviewCanvas({
       gridSize: 10,
       snapToGuides: false,
       snapThreshold: 5,
-      primaryColor: (_b2 = vars.primary) == null ? void 0 : _b2.value,
+      primaryColor: (_b3 = vars.primary) == null ? void 0 : _b3.value,
       secondaryColor: (_c2 = vars.secondary) == null ? void 0 : _c2.value
     };
   }, [config.themeConfig]);
@@ -15559,7 +17643,7 @@ const PreviewCanvas$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.def
   PreviewCanvas
 }, Symbol.toStringTag, { value: "Module" }));
 function applyThemeToConfig(config, themeOverrides) {
-  var _a2, _b, _c;
+  var _a2, _b2, _c;
   if (!themeOverrides || Object.keys(themeOverrides).length === 0) return config;
   const cloned = JSON.parse(JSON.stringify(config));
   if ((_a2 = cloned.themeConfig) == null ? void 0 : _a2.variables) {
@@ -15570,7 +17654,7 @@ function applyThemeToConfig(config, themeOverrides) {
     }
   }
   const varMap = /* @__PURE__ */ new Map();
-  if ((_b = cloned.themeConfig) == null ? void 0 : _b.variables) {
+  if ((_b2 = cloned.themeConfig) == null ? void 0 : _b2.variables) {
     for (const [key, def] of Object.entries(cloned.themeConfig.variables)) {
       varMap.set(key, themeOverrides[key] ?? def.value);
     }
@@ -15607,7 +17691,7 @@ function mapFormDefFieldType(t) {
 function formDefSectionsToInferred(schemaSections, repeatableNodeMap) {
   const sections = [];
   function convert(defs, parentId) {
-    var _a2, _b;
+    var _a2, _b2;
     for (const def of defs) {
       const isRepeatable = def.repeatable === true || def.type === "repeatable";
       const defFields = def.fields ?? def.entryFields ?? [];
@@ -15659,7 +17743,7 @@ function formDefSectionsToInferred(schemaSections, repeatableNodeMap) {
             placeholder: f.placeholder
           }))
         });
-        if ((_b = def.children) == null ? void 0 : _b.length) {
+        if ((_b2 = def.children) == null ? void 0 : _b2.length) {
           convert(def.children, def.id);
         }
       }
@@ -16288,7 +18372,7 @@ function findAllRepeatableElementsBySourceId(pages, baseNodeId, oneBasedIndex, s
   return out;
 }
 function findNestedRepeatableElementBySourceId(pages, parentBaseNodeId, parentPi, childBaseNodeId, childCi, sourceElementId) {
-  var _a2, _b;
+  var _a2, _b2;
   const parentGroups = collectGroupsByBaseId(pages, parentBaseNodeId);
   const parentGroup = parentGroups[parentPi - 1];
   if (!parentGroup || !isGroup(parentGroup) || !((_a2 = parentGroup.children) == null ? void 0 : _a2.length)) return void 0;
@@ -16303,7 +18387,7 @@ function findNestedRepeatableElementBySourceId(pages, parentBaseNodeId, parentPi
   }
   collectChild(parentGroup.children);
   const childGroup = childGroups[childCi - 1];
-  if (!childGroup || !isGroup(childGroup) || !((_b = childGroup.children) == null ? void 0 : _b.length)) return void 0;
+  if (!childGroup || !isGroup(childGroup) || !((_b2 = childGroup.children) == null ? void 0 : _b2.length)) return void 0;
   return findElementBySourceIdInSubtree(childGroup.children, sourceElementId) ?? (childGroup.__sourceId === sourceElementId ? childGroup.id : void 0);
 }
 function repeatableLabelKey(label) {
@@ -16353,7 +18437,7 @@ function getRepeatableFromConfig(pages) {
   var _a2;
   const result = [];
   function walk(children) {
-    var _a3, _b;
+    var _a3, _b2;
     if (!children) return;
     for (const node of children) {
       if (isGroup(node) && isVerticalStackLayoutMode(node.layoutMode) && ((_a3 = node.children) == null ? void 0 : _a3.length)) {
@@ -16362,7 +18446,7 @@ function getRepeatableFromConfig(pages) {
           if (rep == null ? void 0 : rep.label) result.push({ nodeId: child.id, label: rep.label });
         }
       }
-      if (isGroup(node) && ((_b = node.children) == null ? void 0 : _b.length)) walk(node.children);
+      if (isGroup(node) && ((_b2 = node.children) == null ? void 0 : _b2.length)) walk(node.children);
     }
   }
   for (const page of pages) if ((_a2 = page.children) == null ? void 0 : _a2.length) walk(page.children);
@@ -16378,7 +18462,7 @@ function findRepeatableByNodeIds(pages, nodeIds) {
     return !!((_a3 = n.repeatableSection) == null ? void 0 : _a3.label);
   };
   function walk(children, parentRepeatableBaseId, parentInfo, parentRepeatableEntryIndex) {
-    var _a3, _b;
+    var _a3, _b2;
     if (!Array.isArray(children)) return;
     for (let i = 0; i < children.length; i++) {
       const node = children[i];
@@ -16421,7 +18505,7 @@ function findRepeatableByNodeIds(pages, nodeIds) {
           if (isGroup(child) && Array.isArray(child.children)) walk(child.children, effectiveChildBase, void 0, childEntryIndex);
           j += count;
         }
-      } else if (isGroup(node) && ((_b = node.children) == null ? void 0 : _b.length)) {
+      } else if (isGroup(node) && ((_b2 = node.children) == null ? void 0 : _b2.length)) {
         const nodeBase = baseId(node.id);
         const selfMatch = schemaBaseIds.has(node.id) || schemaBaseIds.has(nodeBase) || node.__baseNodeId != null && schemaBaseIds.has(node.__baseNodeId);
         const isSelfRepeatable = selfMatch && hasRepeatableSection(node);
@@ -16510,7 +18594,7 @@ function getNestedRepeatableEntryCount(parentId, parentIndex, childId, formValue
   return Math.max(1, maxIndex);
 }
 function applyFormDataToConfig(config, mappings, formValues, repeatableSectionsFromSchema, repeatableEntryCounts, repeatableNestedEntryCounts, displayFormatMap, repeatablePagesFromSchema) {
-  var _a2, _b, _c;
+  var _a2, _b2, _c;
   const cloned = JSON.parse(JSON.stringify(config));
   if (!cloned.pages) return cloned;
   const dynamicFields = cloned.dynamicFields;
@@ -16691,7 +18775,7 @@ function applyFormDataToConfig(config, mappings, formValues, repeatableSectionsF
       const { node, baseNodeId, startIndex, count } = block;
       const occIdx = block.__occurrenceIndex ?? 1;
       const N = computeN(baseNodeId, node.id);
-      const entryFilter = ((_b = node.repeatableSection) == null ? void 0 : _b.entryFilter) ?? entryFilterFromList(baseNodeId);
+      const entryFilter = ((_b2 = node.repeatableSection) == null ? void 0 : _b2.entryFilter) ?? entryFilterFromList(baseNodeId);
       let entryIndices;
       if (entryFilter && entryFilter.mode === "range" && entryFilter.range) {
         const parsed = parseEntryRange(entryFilter.range, N, entryMetaFromList(baseNodeId));
@@ -17148,7 +19232,7 @@ function findAllFlowStacks(pageChildren) {
   return result;
 }
 function findNestedFlowStack(entry) {
-  var _a2, _b;
+  var _a2, _b2;
   const queue = [...entry.children ?? []];
   while (queue.length > 0) {
     const node = queue.shift();
@@ -17156,7 +19240,7 @@ function findNestedFlowStack(entry) {
     const g = node;
     const hasRepeatableChildren = ((_a2 = g.children) == null ? void 0 : _a2.length) && (g.children.some(hasBaseNodeId) || g.children.some((c) => isGroup(c)));
     if (isVerticalStackLayoutMode(g.layoutMode) && hasRepeatableChildren) return g;
-    if ((_b = g.children) == null ? void 0 : _b.length) queue.push(...g.children);
+    if ((_b2 = g.children) == null ? void 0 : _b2.length) queue.push(...g.children);
   }
   return null;
 }
@@ -17287,9 +19371,9 @@ function splitNestedForOverflow(flowStack, stayChildren, overflowChildren, overf
   return { stayChildren: newStay, overflowChildren: newOverflow };
 }
 function paginateSinglePage(sourcePage, pageOffsetIndex) {
-  var _a2, _b, _c, _d, _e, _f;
+  var _a2, _b2, _c, _d, _e, _f;
   const contentTop = (_a2 = sourcePage.settings) == null ? void 0 : _a2.contentTop;
-  const contentBottom = (_b = sourcePage.settings) == null ? void 0 : _b.contentBottom;
+  const contentBottom = (_b2 = sourcePage.settings) == null ? void 0 : _b2.contentBottom;
   if (contentTop == null || contentBottom == null || contentBottom <= contentTop) {
     return [sourcePage];
   }
@@ -18479,7 +20563,7 @@ function splitIntoRuns(text, mainSupportsChar) {
   return runs;
 }
 function rewriteSvgFontsForJsPDF(svgStr) {
-  var _a2, _b;
+  var _a2, _b2;
   const parser = new DOMParser();
   const doc = parser.parseFromString(svgStr, "image/svg+xml");
   const allTextEls = Array.from(doc.querySelectorAll("text, tspan, textPath"));
@@ -18584,7 +20668,7 @@ function rewriteSvgFontsForJsPDF(svgStr) {
       for (const node of childNodes) {
         if (node.nodeType !== 3 || !node.textContent) continue;
         const runs = splitIntoRuns(node.textContent, mainSupportsChar);
-        if (runs.length <= 1 && ((_b = runs[0]) == null ? void 0 : _b.runType) === "main") continue;
+        if (runs.length <= 1 && ((_b2 = runs[0]) == null ? void 0 : _b2.runType) === "main") continue;
         const fragment = doc.createDocumentFragment();
         for (const run of runs) {
           const tspan = doc.createElementNS("http://www.w3.org/2000/svg", "tspan");
@@ -18894,9 +20978,9 @@ function appendDataUriFontFaceRule(family, weight, style, dataUri) {
   styleEl.appendChild(document.createTextNode(cssText));
 }
 function resolveHarnessFontProxyUrl() {
-  var _a2, _b;
+  var _a2, _b2;
   try {
-    const runtimeBase = typeof window !== "undefined" && (window.__PIXLDOCS_SUPABASE_URL || ((_a2 = window.__CONFIG__) == null ? void 0 : _a2.supabaseUrl)) || typeof globalThis !== "undefined" && (globalThis.__PIXLDOCS_SUPABASE_URL || ((_b = globalThis.__CONFIG__) == null ? void 0 : _b.supabaseUrl)) || "";
+    const runtimeBase = typeof window !== "undefined" && (window.__PIXLDOCS_SUPABASE_URL || ((_a2 = window.__CONFIG__) == null ? void 0 : _a2.supabaseUrl)) || typeof globalThis !== "undefined" && (globalThis.__PIXLDOCS_SUPABASE_URL || ((_b2 = globalThis.__CONFIG__) == null ? void 0 : _b2.supabaseUrl)) || "";
     const base = String(runtimeBase || "").replace(/\/$/, "");
     return base ? `${base}/functions/v1/font-proxy` : "";
   } catch {
@@ -19558,7 +21642,7 @@ async function resolveTemplateData(options) {
   };
 }
 async function resolveFromForm(options) {
-  var _a2, _b, _c;
+  var _a2, _b2, _c;
   const { templateId, formSchemaId, sectionState, flatFormData: directFlatFormData, themeId, supabaseUrl, supabaseAnonKey, prefetched } = options;
   const hasSectionStateInput = !!sectionState && Object.keys(sectionState).length > 0;
   if (!formSchemaId && !hasSectionStateInput) {
@@ -19608,7 +21692,7 @@ async function resolveFromForm(options) {
     inferredSections = inferFormSchemaFromTemplate(
       templateConfig.dynamicFields,
       groups,
-      ((_b = templateConfig.pages) == null ? void 0 : _b.length) ? { pages: templateConfig.pages } : void 0
+      ((_b2 = templateConfig.pages) == null ? void 0 : _b2.length) ? { pages: templateConfig.pages } : void 0
     );
   } else {
     inferredSections = [];
@@ -19795,10 +21879,10 @@ function themeBaseId(id) {
   return out;
 }
 function applyThemeVariantToConfig(config, themeConfig, themeId) {
-  var _a2, _b, _c, _d;
+  var _a2, _b2, _c, _d;
   if (!themeConfig) return config;
   const variant = themeId && themeId !== "default" ? (_a2 = themeConfig.variants) == null ? void 0 : _a2.find((v) => v.id === themeId) : null;
-  const shouldApplyDefaults = !variant && ((_b = themeConfig.properties) == null ? void 0 : _b.length);
+  const shouldApplyDefaults = !variant && ((_b2 = themeConfig.properties) == null ? void 0 : _b2.length);
   if (!variant && !shouldApplyDefaults) return config;
   if (!((_c = themeConfig.properties) == null ? void 0 : _c.length)) return config;
   const result = JSON.parse(JSON.stringify(config));
@@ -19819,8 +21903,8 @@ function applyThemeVariantToConfig(config, themeConfig, themeId) {
       if (stopMatch) {
         const stopIndex = parseInt(stopMatch[1], 10);
         result.pages.forEach((p) => {
-          var _a3, _b2;
-          if ((_b2 = (_a3 = p.settings.backgroundGradient) == null ? void 0 : _a3.stops) == null ? void 0 : _b2[stopIndex]) {
+          var _a3, _b3;
+          if ((_b3 = (_a3 = p.settings.backgroundGradient) == null ? void 0 : _a3.stops) == null ? void 0 : _b3[stopIndex]) {
             p.settings.backgroundGradient = {
               ...p.settings.backgroundGradient,
               stops: p.settings.backgroundGradient.stops.map(
@@ -19897,7 +21981,7 @@ function normalizeLayoutModes(config) {
   }
 }
 function paintRepeatableSections(config, repeatableSections, formSchema) {
-  var _a2, _b;
+  var _a2, _b2;
   const pages = config.pages ?? [];
   const entryFilters = (formSchema == null ? void 0 : formSchema.entryFilters) ?? [];
   const entryFilterBases = new Set(entryFilters.map((f) => baseId(f.nodeId)));
@@ -19925,7 +22009,7 @@ function paintRepeatableSections(config, repeatableSections, formSchema) {
     return painted;
   }
   for (const section of repeatableSections) {
-    const inlineRange = ((_a2 = section.entryFilter) == null ? void 0 : _a2.mode) === "range" ? (_b = section.entryFilter.range) == null ? void 0 : _b.trim() : void 0;
+    const inlineRange = ((_a2 = section.entryFilter) == null ? void 0 : _a2.mode) === "range" ? (_b2 = section.entryFilter.range) == null ? void 0 : _b2.trim() : void 0;
     const shouldUseInlineFilter = !!inlineRange && !entryFilterBases.has(baseId(section.nodeId));
     const payload = { label: section.label };
     if (section.minEntries !== void 0) payload.minEntries = section.minEntries;
@@ -19961,7 +22045,7 @@ function paintRepeatableSections(config, repeatableSections, formSchema) {
   }
 }
 async function getTemplateForm(options) {
-  var _a2, _b;
+  var _a2, _b2;
   const { templateId, supabaseUrl, supabaseAnonKey } = options;
   if (!supabaseUrl || !supabaseAnonKey) {
     throw new Error("[getTemplateForm] supabaseUrl and supabaseAnonKey are required");
@@ -20005,7 +22089,7 @@ async function getTemplateForm(options) {
     sections = inferFormSchemaFromTemplate(
       templateConfig.dynamicFields,
       templateConfig.fieldGroups || [],
-      ((_b = templateConfig.pages) == null ? void 0 : _b.length) ? { pages: templateConfig.pages } : void 0
+      ((_b2 = templateConfig.pages) == null ? void 0 : _b2.length) ? { pages: templateConfig.pages } : void 0
     );
   } else {
     sections = [];
@@ -20389,7 +22473,7 @@ function computeFrostedBoundsForPage(config, pageIndex, extraBaseIds, extraExact
   return out;
 }
 function PixldocsPreview(props) {
-  var _a2, _b;
+  var _a2, _b2;
   const {
     pageIndex = 0,
     zoom = 1,
@@ -20457,10 +22541,10 @@ function PixldocsPreview(props) {
       supabaseUrl: p.supabaseUrl,
       supabaseAnonKey: p.supabaseAnonKey
     }).then((resolved) => {
-      var _a3, _b2;
+      var _a3, _b3;
       if (!cancelled) {
         console.log(PREVIEW_DEBUG_PREFIX, "resolve-done", {
-          pages: ((_b2 = (_a3 = resolved.config) == null ? void 0 : _a3.pages) == null ? void 0 : _b2.length) ?? 0,
+          pages: ((_b3 = (_a3 = resolved.config) == null ? void 0 : _a3.pages) == null ? void 0 : _b3.length) ?? 0,
           underlinedNodes: countUnderlinedNodes(resolved.config)
         });
         setResolvedConfig(resolved.config);
@@ -20570,7 +22654,7 @@ function PixldocsPreview(props) {
   const satPct = (frostedBlurOptions == null ? void 0 : frostedBlurOptions.saturatePct) ?? 130;
   const bgTint = (frostedBlurOptions == null ? void 0 : frostedBlurOptions.background) ?? "rgba(255,255,255,0.12)";
   const canvasW = getNum((_a2 = config == null ? void 0 : config.canvas) == null ? void 0 : _a2.width, 0);
-  const canvasH = getNum((_b = config == null ? void 0 : config.canvas) == null ? void 0 : _b.height, 0);
+  const canvasH = getNum((_b2 = config == null ? void 0 : config.canvas) == null ? void 0 : _b2.height, 0);
   const hasOverlays = frostedBounds.length > 0 && canvasW > 0 && canvasH > 0;
   if (isLoading) {
     return /* @__PURE__ */ jsx("div", { className, style: { ...style, position: "relative", minHeight: 200, display: "flex", alignItems: "center", justifyContent: "center" }, children: loadingFallback ?? /* @__PURE__ */ jsx("div", { style: { color: "#888", fontSize: 14 }, children: "Loading preview..." }) });
@@ -20711,7 +22795,7 @@ function ensureFabricGradientDef(doc, obj, width, height) {
   return `url(#${id})`;
 }
 function warpTextboxSvgAlongPath(svg, obj) {
-  var _a2, _b, _c, _d, _e;
+  var _a2, _b2, _c, _d, _e;
   const tp = obj == null ? void 0 : obj.textPath;
   if (!tp || !tp.preset || tp.preset === "none") return svg;
   if (tp.preset === "rise" || tp.preset === "angle") {
@@ -20775,7 +22859,7 @@ function warpTextboxSvgAlongPath(svg, obj) {
   }
   for (const clone of Array.from(doc.querySelectorAll("g.__pdTextShadowClone"))) {
     try {
-      (_b = clone.parentNode) == null ? void 0 : _b.removeChild(clone);
+      (_b2 = clone.parentNode) == null ? void 0 : _b2.removeChild(clone);
     } catch {
     }
   }
@@ -20795,9 +22879,9 @@ function warpTextboxSvgAlongPath(svg, obj) {
   const fw = obj.fontWeight ?? 400;
   const fst = obj.fontStyle || "normal";
   const readFill = (el) => {
-    var _a3, _b2;
+    var _a3, _b3;
     if (!el) return "";
-    return el.getAttribute("fill") || ((_b2 = (_a3 = (el.getAttribute("style") || "").match(/(?:^|;)\s*fill\s*:\s*([^;]+)/i)) == null ? void 0 : _a3[1]) == null ? void 0 : _b2.trim()) || "";
+    return el.getAttribute("fill") || ((_b3 = (_a3 = (el.getAttribute("style") || "").match(/(?:^|;)\s*fill\s*:\s*([^;]+)/i)) == null ? void 0 : _a3[1]) == null ? void 0 : _b3.trim()) || "";
   };
   const w = Number(obj.width) || 0;
   const h = Number(obj.height) || 0;
@@ -21150,9 +23234,9 @@ function captureFabricCanvasSvgForPdf(fabricInstance, canvasWidth, canvasHeight)
   }
   return svgString;
 }
-const resolvedPackageVersion = "0.5.240";
+const resolvedPackageVersion = "0.5.242";
 const PACKAGE_VERSION = resolvedPackageVersion;
-const DEPLOYMENT_VERSION_MARKER = "__PIXLDOCS_CANVAS_RENDERER_VERSION__:0.5.240";
+const DEPLOYMENT_VERSION_MARKER = "__PIXLDOCS_CANVAS_RENDERER_VERSION__:0.5.242";
 const roundParityValue = (value) => {
   if (typeof value !== "number") return value;
   return Number.isFinite(value) ? Number(value.toFixed(3)) : value;
@@ -21329,11 +23413,11 @@ function installUnderlineFix(fab) {
   if (!TextProto || typeof TextProto._renderTextDecoration !== "function") return;
   const original = TextProto._renderTextDecoration;
   const measureLineTextWidth = (obj, ctx, lineIndex) => {
-    var _a3, _b, _c, _d, _e, _f;
+    var _a3, _b2, _c, _d, _e, _f;
     const rawLine = (_a3 = obj._textLines) == null ? void 0 : _a3[lineIndex];
     const lineText = Array.isArray(rawLine) ? rawLine.join("") : String(rawLine ?? "");
     if (!lineText) return 0;
-    const fontSize = Number(((_b = obj.getValueOfPropertyAt) == null ? void 0 : _b.call(obj, lineIndex, 0, "fontSize")) ?? obj.fontSize ?? 0);
+    const fontSize = Number(((_b2 = obj.getValueOfPropertyAt) == null ? void 0 : _b2.call(obj, lineIndex, 0, "fontSize")) ?? obj.fontSize ?? 0);
     const fontStyle = String(((_c = obj.getValueOfPropertyAt) == null ? void 0 : _c.call(obj, lineIndex, 0, "fontStyle")) ?? obj.fontStyle ?? "normal");
     const fontWeight = String(((_d = obj.getValueOfPropertyAt) == null ? void 0 : _d.call(obj, lineIndex, 0, "fontWeight")) ?? obj.fontWeight ?? "400");
     const fontFamily = String(((_e = obj.getValueOfPropertyAt) == null ? void 0 : _e.call(obj, lineIndex, 0, "fontFamily")) ?? obj.fontFamily ?? "sans-serif");
@@ -21473,11 +23557,78 @@ function installTextboxBoxExtensions(fab) {
   if (Array.isArray(stateProps2)) {
     if (!stateProps2.includes("minBoxHeight")) stateProps2.push("minBoxHeight");
     if (!stateProps2.includes("verticalAlign")) stateProps2.push("verticalAlign");
+    if (!stateProps2.includes("smartWrap")) stateProps2.push("smartWrap");
   }
   const cacheProps2 = TextboxProto2.cacheProperties;
   if (Array.isArray(cacheProps2)) {
     if (!cacheProps2.includes("minBoxHeight")) cacheProps2.push("minBoxHeight");
     if (!cacheProps2.includes("verticalAlign")) cacheProps2.push("verticalAlign");
+    if (!cacheProps2.includes("smartWrap")) cacheProps2.push("smartWrap");
+  }
+  TextboxProto2.smartWrap = true;
+  if (typeof TextboxProto2._wrapLine === "function" && !TextboxProto2.__pixldocsOrigWrapLine) {
+    const origWrapLine = TextboxProto2._wrapLine;
+    TextboxProto2.__pixldocsOrigWrapLine = origWrapLine;
+    TextboxProto2._wrapLine = function(lineIndex, desiredWidth, ref, reservedSpace = 0) {
+      var _a3;
+      if (!this.smartWrap || this.splitByGrapheme) {
+        return origWrapLine.call(this, lineIndex, desiredWidth, ref, reservedSpace);
+      }
+      try {
+        const additionalSpace = this._getWidthOfCharSpacing();
+        const data = ((_a3 = ref == null ? void 0 : ref.wordsData) == null ? void 0 : _a3[lineIndex]) || [];
+        const effective = Math.max(1, desiredWidth - reservedSpace);
+        const infix = " ";
+        const infixWidth = this._measureWord([infix], lineIndex, 0);
+        const graphemeLines = [];
+        let line = [];
+        let lineWidth = 0;
+        let lineJustStarted = true;
+        let largestWordWidth = 0;
+        let offset = 0;
+        const pushLine = () => {
+          graphemeLines.push(line);
+          line = [];
+          lineWidth = 0;
+          lineJustStarted = true;
+        };
+        for (let i = 0; i < data.length; i++) {
+          const { word, width: wordWidth } = data[i];
+          if (wordWidth <= effective) {
+            if (wordWidth > largestWordWidth) largestWordWidth = wordWidth;
+            const projected = lineJustStarted ? wordWidth : lineWidth + infixWidth + wordWidth - additionalSpace;
+            if (!lineJustStarted && projected > effective) pushLine();
+            if (!lineJustStarted) {
+              line.push(infix);
+              lineWidth += infixWidth;
+            }
+            line = line.concat(word);
+            lineWidth += wordWidth;
+            lineJustStarted = false;
+          } else {
+            if (!lineJustStarted) pushLine();
+            for (const g of word) {
+              const gw = this._measureWord([g], lineIndex, offset);
+              if (gw > largestWordWidth) largestWordWidth = gw;
+              const gProj = lineJustStarted ? gw : lineWidth + gw - additionalSpace;
+              if (!lineJustStarted && gProj > effective) pushLine();
+              line.push(g);
+              lineWidth += gw;
+              lineJustStarted = false;
+              offset++;
+            }
+            offset -= word.length;
+          }
+          offset += word.length + 1;
+        }
+        if (line.length) graphemeLines.push(line);
+        const minNeeded = Math.max(0, Math.min(largestWordWidth, effective) - additionalSpace + reservedSpace);
+        if (minNeeded > this.dynamicMinWidth) this.dynamicMinWidth = minNeeded;
+        return graphemeLines;
+      } catch (e) {
+        return origWrapLine.call(this, lineIndex, desiredWidth, ref, reservedSpace);
+      }
+    };
   }
   TextboxProto2.__pixldocsTextboxExtended = true;
   __textboxBoxExtensionsInstalled = true;
@@ -21899,7 +24050,7 @@ class PixldocsRenderer {
         await this.waitForCanvasScene(container, cloned, i);
       }
       console.log(`[canvas-renderer][pdf-unified] mounted ${cloned.pages.length} page(s), handing off to client exportMultiPagePdf`);
-      const { exportMultiPagePdf, preparePagesForExport } = await import("./vectorPdfExport-CHVrwSi7.js");
+      const { exportMultiPagePdf, preparePagesForExport } = await import("./vectorPdfExport-CsrQStE8.js");
       const prepared = preparePagesForExport(
         cloned.pages,
         canvasWidth,
@@ -22116,9 +24267,9 @@ class PixldocsRenderer {
   }
   waitForCanvasScene(container, config, pageIndex, maxWaitMs = 8e3, pollMs = 50) {
     return new Promise((resolve) => {
-      var _a2, _b;
+      var _a2, _b2;
       const start = Date.now();
-      const pageHasContent = (((_b = (_a2 = config.pages[pageIndex]) == null ? void 0 : _a2.children) == null ? void 0 : _b.length) ?? 0) > 0;
+      const pageHasContent = (((_b2 = (_a2 = config.pages[pageIndex]) == null ? void 0 : _a2.children) == null ? void 0 : _b2.length) ?? 0) > 0;
       const settle = () => requestAnimationFrame(() => requestAnimationFrame(() => resolve()));
       const check = () => {
         const fabricCanvas = this.getFabricCanvasFromContainer(container);
@@ -22193,9 +24344,9 @@ class PixldocsRenderer {
     return normalized;
   }
   paintPageBackground(ctx, page, width, height) {
-    var _a2, _b;
+    var _a2, _b2;
     const backgroundColor = ((_a2 = page == null ? void 0 : page.settings) == null ? void 0 : _a2.backgroundColor) || "#ffffff";
-    const gradient = (_b = page == null ? void 0 : page.settings) == null ? void 0 : _b.backgroundGradient;
+    const gradient = (_b2 = page == null ? void 0 : page.settings) == null ? void 0 : _b2.backgroundGradient;
     ctx.clearRect(0, 0, width, height);
     ctx.fillStyle = backgroundColor;
     ctx.fillRect(0, 0, width, height);
@@ -22443,7 +24594,7 @@ class PixldocsRenderer {
       };
       const onReady = () => {
         this.waitForCanvasScene(container, renderConfig, pageIndex).then(async () => {
-          var _a2, _b;
+          var _a2, _b2;
           try {
             const expectedImageIds = this.getExpectedImageIds(renderConfig, pageIndex);
             await this.waitForCanvasImages(container, expectedImageIds);
@@ -22462,7 +24613,7 @@ class PixldocsRenderer {
             );
             const page = renderConfig.pages[pageIndex];
             const backgroundColor = ((_a2 = page == null ? void 0 : page.settings) == null ? void 0 : _a2.backgroundColor) || "#ffffff";
-            const backgroundGradient = (_b = page == null ? void 0 : page.settings) == null ? void 0 : _b.backgroundGradient;
+            const backgroundGradient = (_b2 = page == null ? void 0 : page.settings) == null ? void 0 : _b2.backgroundGradient;
             cleanup();
             resolve({
               svg: svgString,
@@ -22583,7 +24734,7 @@ class PixldocsRenderer {
     logJsonLine("[canvas-renderer][fabric-text-parity]", { stage, textboxes: sample.length, sample });
   }
   async waitForStableTextMetrics(container, config, options = {}) {
-    var _a2, _b, _c;
+    var _a2, _b2, _c;
     if (typeof document !== "undefined") {
       void ensureFontsForResolvedConfig(config);
       await this.waitForRelevantFonts(config);
@@ -22625,7 +24776,7 @@ class PixldocsRenderer {
     }
     fabricInstance.getObjects().forEach(primeCharBounds);
     (_a2 = fabricInstance.calcOffset) == null ? void 0 : _a2.call(fabricInstance);
-    (_b = fabricInstance.renderAll) == null ? void 0 : _b.call(fabricInstance);
+    (_b2 = fabricInstance.renderAll) == null ? void 0 : _b2.call(fabricInstance);
     await waitForPaint();
     (_c = fabricInstance.renderAll) == null ? void 0 : _c.call(fabricInstance);
     await waitForPaint();
@@ -22666,7 +24817,7 @@ function dumpSvgTextDiagnostics(svgStr, pageIndex, tag, stage, maxItems = 30) {
     };
     logParityJson(tag, stage, { kind: "summary", ...summary });
     const sample = texts.slice(0, maxItems).map((t, idx) => {
-      var _a2, _b;
+      var _a2, _b2;
       const tspans = Array.from(t.querySelectorAll("tspan"));
       const tspanInfo = tspans.slice(0, 8).map((s) => ({
         x: s.getAttribute("x"),
@@ -22683,7 +24834,7 @@ function dumpSvgTextDiagnostics(svgStr, pageIndex, tag, stage, maxItems = 30) {
       while (cursor && !containerWidth) {
         containerWidth = (_a2 = cursor.getAttribute) == null ? void 0 : _a2.call(cursor, "width");
         cursor = cursor.parentElement;
-        if (cursor && ((_b = cursor.tagName) == null ? void 0 : _b.toLowerCase()) === "svg") break;
+        if (cursor && ((_b2 = cursor.tagName) == null ? void 0 : _b2.toLowerCase()) === "svg") break;
       }
       return {
         idx,
@@ -23071,10 +25222,10 @@ function normalizeSvgExplicitColors(svg) {
     return normalizeGradientPaintRef(v);
   };
   const hasExplicitNonePaint = (el, attr) => {
-    var _a2, _b;
+    var _a2, _b2;
     const raw = (el.getAttribute(attr) ?? ((_a2 = el.style) == null ? void 0 : _a2.getPropertyValue(attr)) ?? "").trim().toLowerCase();
     if (raw === "none" || raw === "transparent") return true;
-    const rawOpacity = (el.getAttribute(`${attr}-opacity`) ?? ((_b = el.style) == null ? void 0 : _b.getPropertyValue(`${attr}-opacity`)) ?? "").trim().toLowerCase();
+    const rawOpacity = (el.getAttribute(`${attr}-opacity`) ?? ((_b2 = el.style) == null ? void 0 : _b2.getPropertyValue(`${attr}-opacity`)) ?? "").trim().toLowerCase();
     return rawOpacity === "0" || rawOpacity === "0%" || rawOpacity === "0.0";
   };
   function walk(el, parentFill, parentStroke, parentColor) {
@@ -23141,14 +25292,14 @@ function normalizeSvgExplicitColors(svg) {
 function bakeGroupOpacityIntoChildren(svg) {
   const DRAWABLE = /* @__PURE__ */ new Set(["path", "rect", "circle", "ellipse", "polygon", "polyline", "line", "text", "tspan"]);
   function walkAndBake(el, inheritedOpacity) {
-    var _a2, _b, _c, _d;
+    var _a2, _b2, _c, _d;
     if (isInSvgDefinitionSubtree(el)) {
       for (let i = 0; i < el.children.length; i++) walkAndBake(el.children[i], 1);
       return;
     }
     const tag = ((_a2 = el.tagName) == null ? void 0 : _a2.toLowerCase()) ?? "";
     const opacityAttr = parseSvgOpacity(el.getAttribute("opacity"));
-    const styleOpacity = parseSvgOpacity(((_b = el.style) == null ? void 0 : _b.getPropertyValue("opacity")) || null);
+    const styleOpacity = parseSvgOpacity(((_b2 = el.style) == null ? void 0 : _b2.getPropertyValue("opacity")) || null);
     const ownOpacity = opacityAttr ?? styleOpacity ?? 1;
     const combinedOpacity = inheritedOpacity * ownOpacity;
     if (ownOpacity < 0.999 && tag !== "image") {
@@ -23671,10 +25822,10 @@ function getFirstExplicitColorFromSvg(svg) {
     return getGradientStopColorAsHex(svg, gradientId);
   };
   function walk(el) {
-    var _a2, _b;
+    var _a2, _b2;
     if (fill && stroke) return;
     const f = el.getAttribute("fill") ?? ((_a2 = el.style) == null ? void 0 : _a2.getPropertyValue("fill"));
-    const s = el.getAttribute("stroke") ?? ((_b = el.style) == null ? void 0 : _b.getPropertyValue("stroke"));
+    const s = el.getAttribute("stroke") ?? ((_b2 = el.style) == null ? void 0 : _b2.getPropertyValue("stroke"));
     if (!fill) {
       if (isRealColor(f)) fill = f;
       else if (f) {
@@ -23702,8 +25853,8 @@ function isNearWhite(hex) {
   return r >= 250 && g >= 250 && b >= 250;
 }
 function getStopColorRaw(stop) {
-  var _a2, _b;
-  return stop.getAttribute("stop-color") ?? ((_b = (_a2 = stop.style) == null ? void 0 : _a2.getPropertyValue("stop-color")) == null ? void 0 : _b.trim()) ?? getInlineStyleValue(stop, "stop-color");
+  var _a2, _b2;
+  return stop.getAttribute("stop-color") ?? ((_b2 = (_a2 = stop.style) == null ? void 0 : _a2.getPropertyValue("stop-color")) == null ? void 0 : _b2.trim()) ?? getInlineStyleValue(stop, "stop-color");
 }
 function getGradientStopColorAsHex(svgRoot, gradientId, visited = /* @__PURE__ */ new Set()) {
   var _a2;
@@ -23767,12 +25918,12 @@ async function convertTextDecorationsToLines(svg) {
     else el.removeAttribute("style");
   };
   const resolveInheritedSvgValue = (el, attr, styleProp = attr) => {
-    var _a2, _b;
+    var _a2, _b2;
     let current = el;
     while (current) {
       const attrValue = (_a2 = current.getAttribute(attr)) == null ? void 0 : _a2.trim();
       if (attrValue) return attrValue;
-      const styleValue = (_b = getInlineStyleValue(current, styleProp)) == null ? void 0 : _b.trim();
+      const styleValue = (_b2 = getInlineStyleValue(current, styleProp)) == null ? void 0 : _b2.trim();
       if (styleValue) return styleValue;
       current = current.parentElement;
     }
@@ -23950,7 +26101,7 @@ async function convertSvgTextDecorationsToLinesString(svgStr) {
   }
 }
 async function rasterizeShadowMarkers(svg) {
-  var _a2, _b, _c, _d, _e, _f;
+  var _a2, _b2, _c, _d, _e, _f;
   if (typeof window === "undefined" || typeof document === "undefined") return;
   const markers = Array.from(svg.querySelectorAll("g.__pdShadowRaster"));
   if (markers.length === 0) return;
@@ -23974,7 +26125,7 @@ async function rasterizeShadowMarkers(svg) {
       const alphaRaw = parseFloat(marker.getAttribute("data-alpha") || "1");
       const shadowAlpha = Number.isFinite(alphaRaw) ? Math.max(0, Math.min(1, alphaRaw)) : 1;
       if (!Number.isFinite(bw) || !Number.isFinite(bh) || bw <= 0 || bh <= 0) {
-        (_b = marker.parentNode) == null ? void 0 : _b.removeChild(marker);
+        (_b2 = marker.parentNode) == null ? void 0 : _b2.removeChild(marker);
         continue;
       }
       const innerXml = restoreSourceFontsForShadowRaster(
@@ -24219,7 +26370,7 @@ async function prepareLiveCanvasSvgForPdf(rawSvg, pageWidth, pageHeight, pageKey
     if (options == null ? void 0 : options.stripPageBackground) stripRootPageBackgroundFromSvg(svgToDraw);
     sanitizeSvgTreeForPdf(svgToDraw);
     try {
-      const { bakeTextAnchorPositionsFromLiveSvg, logTextMeasurementDiagnostic } = await import("./vectorPdfExport-CHVrwSi7.js");
+      const { bakeTextAnchorPositionsFromLiveSvg, logTextMeasurementDiagnostic } = await import("./vectorPdfExport-CsrQStE8.js");
       try {
         await logTextMeasurementDiagnostic(svgToDraw);
       } catch {
@@ -24235,7 +26386,7 @@ async function prepareLiveCanvasSvgForPdf(rawSvg, pageWidth, pageHeight, pageKey
   }
 }
 function drawPageBackground(pdf, pageIndex, pageWidth, pageHeight, backgroundColor, backgroundGradient) {
-  var _a2, _b;
+  var _a2, _b2;
   if (backgroundGradient && ((_a2 = backgroundGradient.stops) == null ? void 0 : _a2.length) >= 2) {
     const grad = backgroundGradient;
     const colorStops = grad.stops.map((s) => {
@@ -24290,7 +26441,7 @@ function drawPageBackground(pdf, pageIndex, pageWidth, pageHeight, backgroundCol
         doc.fill({ key: patternKey, matrix: doc.Matrix(1, 0, 0, 1, 0, 0) });
       });
     } catch {
-      const fallback = ((_b = colorStops[0]) == null ? void 0 : _b.color) || [255, 255, 255];
+      const fallback = ((_b2 = colorStops[0]) == null ? void 0 : _b2.color) || [255, 255, 255];
       pdf.setFillColor(fallback[0], fallback[1], fallback[2]);
       pdf.rect(0, 0, pageWidth, pageHeight, "F");
     }
@@ -24303,7 +26454,7 @@ function drawPageBackground(pdf, pageIndex, pageWidth, pageHeight, backgroundCol
   }
 }
 async function assemblePdfFromSvgs(svgResults, options = {}) {
-  var _a2, _b;
+  var _a2, _b2;
   if (svgResults.length === 0) throw new Error("No pages to export");
   const { title, stripPageBackground } = options;
   const firstPage = svgResults[0];
@@ -24336,7 +26487,7 @@ async function assemblePdfFromSvgs(svgResults, options = {}) {
       const pageOrientation = page.width > page.height ? "landscape" : "portrait";
       pdf.addPage([page.width, page.height], pageOrientation);
     }
-    const hasGradient = !!((_b = (_a2 = page.backgroundGradient) == null ? void 0 : _a2.stops) == null ? void 0 : _b.length);
+    const hasGradient = !!((_b2 = (_a2 = page.backgroundGradient) == null ? void 0 : _a2.stops) == null ? void 0 : _b2.length);
     drawPageBackground(pdf, i, page.width, page.height, page.backgroundColor, page.backgroundGradient);
     const shouldStripBg = stripPageBackground ?? hasGradient;
     const textMode = options.textMode ?? (options.outlineText === true ? "pixel-perfect" : "selectable");
@@ -24619,4 +26770,4 @@ export {
   buildTeaserBlurFlatKeys as y,
   collectFontDescriptorsFromConfig as z
 };
-//# sourceMappingURL=index-B2H1tQ0S.js.map
+//# sourceMappingURL=index-BQ5V2uT8.js.map