@pixldocs/canvas-renderer 0.5.6 → 0.5.8

package/dist/index.cjs

@@ -2951,12 +2951,117 @@ async function normalizeSvgImageDimensions(fabricImage, imageUrl, sourceFormat)
     fabricImage.setCoords();
   }
 }
+const EMPTY_IMAGE_PLACEHOLDER_URL = "/image-placeholder.png";
+let placeholderTileImage = null;
+let placeholderTilePromise = null;
+function loadPlaceholderTile() {
+  if (placeholderTileImage) return Promise.resolve(placeholderTileImage);
+  if (placeholderTilePromise) return placeholderTilePromise;
+  placeholderTilePromise = new Promise((resolve, reject) => {
+    const img = new Image();
+    img.crossOrigin = "anonymous";
+    img.onload = () => {
+      placeholderTileImage = img;
+      resolve(img);
+    };
+    img.onerror = (e) => {
+      placeholderTilePromise = null;
+      reject(e);
+    };
+    img.src = EMPTY_IMAGE_PLACEHOLDER_URL;
+  });
+  return placeholderTilePromise;
+}
+function isEmptyImagePlaceholderGroup(obj) {
+  return obj instanceof fabric__namespace.Group && Boolean(obj.__emptyImagePlaceholder);
+}
+function stabilizePlaceholderGroup(group, width, height) {
+  group.set({ width, height, scaleX: 1, scaleY: 1 });
+  if (group.layoutManager) {
+    if (typeof fabric__namespace.FixedLayout === "function") {
+      group.layoutManager.strategy = new fabric__namespace.FixedLayout();
+    } else {
+      group.layoutManager.performLayout = () => {
+      };
+    }
+  }
+  group.setCoords();
+}
+function attachEmptyPlaceholderImage(group, width, height) {
+  loadPlaceholderTile().then((htmlImg) => {
+    var _a;
+    const objects = group._objects;
+    const bgRect = objects == null ? void 0 : objects.find((obj) => obj.__isPlaceholderFrame);
+    if (!bgRect) return;
+    const pattern = new fabric__namespace.Pattern({
+      source: htmlImg,
+      repeat: "repeat"
+    });
+    pattern.__isPlaceholderPattern = true;
+    bgRect.set({ fill: pattern });
+    bgRect.dirty = true;
+    if (!group.clipPath) {
+      const clip = new fabric__namespace.Rect({
+        width,
+        height,
+        left: 0,
+        top: 0,
+        originX: "center",
+        originY: "center",
+        selectable: false,
+        evented: false
+      });
+      clip.absolutePositioned = false;
+      clip.excludeFromExport = true;
+      group.clipPath = clip;
+    }
+    stabilizePlaceholderGroup(group, width, height);
+    group.dirty = true;
+    (_a = group.canvas) == null ? void 0 : _a.requestRenderAll();
+  }).catch(() => {
+  });
+}
+function updateEmptyPlaceholderLayout(group, width, height) {
+  const objects = group._objects;
+  const backgroundRect = objects == null ? void 0 : objects.find((obj) => obj.__isPlaceholderFrame);
+  const cropData = group.__cropData;
+  if (cropData) {
+    cropData.frameW = width;
+    cropData.frameH = height;
+  }
+  backgroundRect == null ? void 0 : backgroundRect.set({
+    width,
+    height,
+    left: 0,
+    top: 0,
+    originX: "center",
+    originY: "center"
+  });
+  if (backgroundRect) backgroundRect.dirty = true;
+  if (backgroundRect && !(backgroundRect.fill instanceof fabric__namespace.Pattern)) {
+    attachEmptyPlaceholderImage(group, width, height);
+  }
+  if (group.clipPath && (group.clipPath instanceof fabric__namespace.Rect || group.clipPath instanceof fabric__namespace.Ellipse)) {
+    group.clipPath.set({
+      left: 0,
+      top: 0,
+      originX: "center",
+      originY: "center",
+      ...group.clipPath instanceof fabric__namespace.Ellipse ? { rx: width / 2, ry: height / 2 } : { width, height }
+    });
+    group.clipPath.setCoords();
+    group.clipPath.dirty = true;
+  }
+  stabilizePlaceholderGroup(group, width, height);
+  group.dirty = true;
+}
 function createImagePlaceholder(element) {
   const visualWidth = Number(element.width) * (element.scaleX ?? 1);
   const visualHeight = Number(element.height) * (element.scaleY ?? 1);
+  const hasImage = !!(element.src || element.imageUrl);
   const bgRect = new fabric__namespace.Rect({
-    originX: "left",
-    originY: "top",
+    originX: "center",
+    originY: "center",
     left: 0,
     top: 0,
     width: visualWidth,
@@ -2967,56 +3072,65 @@ function createImagePlaceholder(element) {
     rx: element.clipShape === "rounded" ? element.rx || 8 : 0,
     ry: element.clipShape === "rounded" ? element.ry || 8 : 0
   });
+  bgRect.__isPlaceholderFrame = true;
   const group = new fabric__namespace.Group([bgRect], {
-    left: element.left,
-    top: element.top,
-    originX: "left",
-    originY: "top",
-    selectable: element.selectable,
-    evented: element.evented
-  });
-  return group;
-}
-function createImagePlaceholderForGroup(element) {
-  const frameWidth = Number(element.width) * (element.scaleX ?? 1);
-  const frameHeight = Number(element.height) * (element.scaleY ?? 1);
-  const bgRect = new fabric__namespace.Rect({
-    originX: "left",
-    originY: "top",
-    left: 0,
-    top: 0,
-    width: frameWidth,
-    height: frameHeight,
-    fill: "transparent",
-    stroke: "transparent",
-    strokeWidth: 0,
-    rx: element.clipShape === "rounded" ? element.rx || 8 : 0,
-    ry: element.clipShape === "rounded" ? element.ry || 8 : 0
-  });
-  const group = new fabric__namespace.Group([bgRect], {
-    left: element.left,
-    top: element.top,
+    left: (element.left ?? 0) + visualWidth / 2,
+    top: (element.top ?? 0) + visualHeight / 2,
     originX: "center",
     originY: "center",
-    width: frameWidth,
-    height: frameHeight,
+    width: visualWidth,
+    height: visualHeight,
     scaleX: 1,
     scaleY: 1,
     angle: element.angle ?? 0,
     opacity: element.opacity ?? 1,
     flipX: element.flipX ?? false,
-    flipY: element.flipY ?? false
+    flipY: element.flipY ?? false,
+    selectable: element.selectable,
+    evented: element.evented,
+    hasControls: true,
+    hasBorders: true,
+    interactive: true,
+    subTargetCheck: false,
+    objectCaching: false
   });
-  if (element.clipShape && element.clipShape !== "none") {
-    const clipPath = createImageClipPath(element, frameWidth, frameHeight);
-    if (clipPath) {
-      clipPath.absolutePositioned = false;
-      clipPath.excludeFromExport = true;
-      group.clipPath = clipPath;
-    }
+  group.__emptyImagePlaceholder = true;
+  group.__imageSrc = "";
+  group.__cropData = {
+    shape: element.clipShape === "circle" ? "circle" : element.clipShape === "rounded" ? "roundRect" : "rect",
+    rx: element.clipShape === "rounded" ? element.rx || 0.1 : 0,
+    frameW: visualWidth,
+    frameH: visualHeight,
+    fit: "cover",
+    _img: null,
+    _border: null,
+    _placeholderFrame: bgRect
+  };
+  group._ct = group._ct || {};
+  group._ct.isCropGroup = true;
+  group.__cropGroup = true;
+  const clipPath = createImageClipPath(
+    {
+      ...element,
+      clipShape: element.clipShape && element.clipShape !== "none" ? element.clipShape : "rectangle"
+    },
+    visualWidth,
+    visualHeight
+  );
+  if (clipPath) {
+    clipPath.absolutePositioned = false;
+    clipPath.excludeFromExport = true;
+    group.clipPath = clipPath;
+  }
+  stabilizePlaceholderGroup(group, visualWidth, visualHeight);
+  if (!hasImage) {
+    attachEmptyPlaceholderImage(group, visualWidth, visualHeight);
   }
   return group;
 }
+function createImagePlaceholderForGroup(element) {
+  return createImagePlaceholder(element);
+}
 function createImageClipPath(element, imgWidth, imgHeight) {
   const clipShape = element.clipShape || "none";
   if (clipShape === "none") return void 0;
@@ -3054,7 +3168,328 @@ function createImageClipPath(element, imgWidth, imgHeight) {
       return void 0;
   }
 }
-function clamp(v, min, max) {
+const isCropGroup = (obj) => {
+  var _a;
+  const g = obj;
+  return Boolean(g && (g.__cropGroup || ((_a = g._ct) == null ? void 0 : _a.isCropGroup)));
+};
+function parseLuminance(fill) {
+  if (typeof fill !== "string") return null;
+  const f = fill.trim().toLowerCase();
+  if (!f || f === "none" || f === "transparent") return null;
+  if (f === "white" || f === "#fff" || f === "#ffffff") return 1;
+  if (f === "black" || f === "#000" || f === "#000000") return 0;
+  const hex = f.match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/);
+  if (hex) {
+    const h = hex[1];
+    const full = h.length === 3 ? h.split("").map((c) => c + c).join("") : h;
+    const r = parseInt(full.slice(0, 2), 16) / 255;
+    const g = parseInt(full.slice(2, 4), 16) / 255;
+    const b = parseInt(full.slice(4, 6), 16) / 255;
+    return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+  }
+  const rgb = f.match(/^rgba?\(([^)]+)\)$/);
+  if (rgb) {
+    const parts = rgb[1].split(",").map((s) => parseFloat(s.trim()));
+    if (parts.length >= 3) {
+      const r = parts[0] / 255;
+      const g = parts[1] / 255;
+      const b = parts[2] / 255;
+      return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+    }
+  }
+  return null;
+}
+function getObjectRenderedSize(obj) {
+  const bbox = typeof obj.getBoundingRect === "function" ? obj.getBoundingRect() : null;
+  const width = Math.abs(Number(bbox == null ? void 0 : bbox.width) || (obj.width ?? 0) * Math.abs(obj.scaleX ?? 1));
+  const height = Math.abs(Number(bbox == null ? void 0 : bbox.height) || (obj.height ?? 0) * Math.abs(obj.scaleY ?? 1));
+  return { width, height };
+}
+function isLikelyFullFrameBackground(obj, luminance, viewBoxW, viewBoxH, totalObjects) {
+  if (totalObjects <= 1 || viewBoxW <= 0 || viewBoxH <= 0 || luminance === null) return false;
+  const { width, height } = getObjectRenderedSize(obj);
+  const widthRatio = width / viewBoxW;
+  const heightRatio = height / viewBoxH;
+  const areaRatio = width * height / (viewBoxW * viewBoxH);
+  return widthRatio >= 0.96 && heightRatio >= 0.96 && areaRatio >= 0.9;
+}
+async function loadSvgAsGroup(url) {
+  const result = await fabric__namespace.loadSVGFromURL(url);
+  const allObjects = (result.objects || []).filter(Boolean);
+  const options = result.options || {};
+  if (allObjects.length === 0) {
+    throw new Error("SVG contained no parseable shapes");
+  }
+  const hintedViewBoxW = Number(options.width) || 0;
+  const hintedViewBoxH = Number(options.height) || 0;
+  const sourceLuminances = allObjects.map((o) => parseLuminance(o.fill));
+  let objects = allObjects.filter((obj, i) => !isLikelyFullFrameBackground(
+    obj,
+    sourceLuminances[i],
+    hintedViewBoxW,
+    hintedViewBoxH,
+    allObjects.length
+  ));
+  if (objects.length === 0) objects = allObjects;
+  if (objects.length === 0) objects = allObjects;
+  for (const obj of objects) {
+    obj.fillRule = "evenodd";
+    obj.fill = "#000";
+    obj.stroke = null;
+    obj.strokeWidth = 0;
+  }
+  const group = new fabric__namespace.Group(objects, {
+    originX: "center",
+    originY: "center",
+    selectable: false,
+    evented: false,
+    hasControls: false,
+    hasBorders: false
+  });
+  const viewBoxW = Number(options.width) || group.width || 1;
+  const viewBoxH = Number(options.height) || group.height || 1;
+  return { group, viewBoxW, viewBoxH };
+}
+function fitMaskGroupToFrame(maskGroup, frameW, frameH) {
+  const viewBoxW = Number(maskGroup.__svgMaskViewBoxW) || maskGroup.width || 1;
+  const viewBoxH = Number(maskGroup.__svgMaskViewBoxH) || maskGroup.height || 1;
+  maskGroup.set({
+    left: 0,
+    top: 0,
+    originX: "center",
+    originY: "center",
+    scaleX: frameW / viewBoxW,
+    scaleY: frameH / viewBoxH,
+    selectable: false,
+    evented: false,
+    hasControls: false,
+    hasBorders: false
+  });
+  maskGroup.absolutePositioned = false;
+  maskGroup.excludeFromExport = true;
+  maskGroup.inverted = false;
+  maskGroup.dirty = true;
+  maskGroup.setCoords();
+}
+function isSvgMaskClipPath(clipPath) {
+  return Boolean(clipPath && clipPath.__svgMask && clipPath instanceof fabric__namespace.Group);
+}
+function isLuminanceMaskClipPath(clipPath) {
+  return Boolean(clipPath && clipPath.__svgMaskType === "luminance");
+}
+function syncSvgMaskClipPath(cropGroup) {
+  var _a, _b;
+  const clipPath = cropGroup.clipPath;
+  if (!isCropGroup(cropGroup)) return;
+  const frameW = ((_a = cropGroup._ct) == null ? void 0 : _a.frameW) ?? cropGroup.width ?? 0;
+  const frameH = ((_b = cropGroup._ct) == null ? void 0 : _b.frameH) ?? cropGroup.height ?? 0;
+  if (frameW <= 0 || frameH <= 0) return;
+  if (isSvgMaskClipPath(clipPath)) {
+    fitMaskGroupToFrame(clipPath, frameW, frameH);
+  }
+}
+async function detectMaskType(svgUrl) {
+  try {
+    const res = await fetch(svgUrl);
+    if (!res.ok) return "shape";
+    const text = await res.text();
+    const t = text.toLowerCase();
+    if (t.includes("<lineargradient") || t.includes("<radialgradient")) return "luminance";
+    if (t.includes("<image ") || t.includes("<image>")) return "luminance";
+    if (t.includes('mask-type="luminance"') || t.includes("mask-type='luminance'")) return "luminance";
+    if (t.includes("<filter")) return "luminance";
+    if (/fill-opacity\s*=\s*["'](0?\.\d+)/.test(t)) return "luminance";
+    if (/opacity\s*=\s*["'](0?\.\d+)/.test(t)) return "luminance";
+    return "shape";
+  } catch {
+    return "shape";
+  }
+}
+async function applySvgMaskToCropGroup(cropGroup, svgUrl) {
+  var _a, _b, _c;
+  if (!isCropGroup(cropGroup)) {
+    throw new Error("Selected object is not a crop group / image");
+  }
+  const frameW = ((_a = cropGroup._ct) == null ? void 0 : _a.frameW) ?? cropGroup.width ?? 0;
+  const frameH = ((_b = cropGroup._ct) == null ? void 0 : _b.frameH) ?? cropGroup.height ?? 0;
+  if (frameW <= 0 || frameH <= 0) {
+    throw new Error("Crop group has no frame dimensions");
+  }
+  const { group: maskGroup, viewBoxW, viewBoxH } = await loadSvgAsGroup(svgUrl);
+  const mw = maskGroup.width ?? 0;
+  const mh = maskGroup.height ?? 0;
+  if (mw <= 0 || mh <= 0 || viewBoxW <= 0 || viewBoxH <= 0) {
+    throw new Error("This mask has no usable shapes (try the 'Soft' mode instead)");
+  }
+  maskGroup.__svgMask = true;
+  maskGroup.__svgMaskUrl = svgUrl;
+  maskGroup.__svgMaskType = "shape";
+  maskGroup.__svgMaskViewBoxW = viewBoxW;
+  maskGroup.__svgMaskViewBoxH = viewBoxH;
+  fitMaskGroupToFrame(maskGroup, frameW, frameH);
+  cropGroup.clipPath = maskGroup;
+  cropGroup.__svgMaskUrl = svgUrl;
+  cropGroup.__svgMaskType = "shape";
+  cropGroup.dirty = true;
+  if (cropGroup._objects) {
+    for (const child of cropGroup._objects) {
+      child.dirty = true;
+    }
+  }
+  (_c = cropGroup.canvas) == null ? void 0 : _c.requestRenderAll();
+}
+function loadSvgAsImage(svgUrl) {
+  return new Promise((resolve, reject) => {
+    const tryFetch = async () => {
+      try {
+        const res = await fetch(svgUrl, { mode: "cors" });
+        if (!res.ok) throw new Error(`HTTP ${res.status}`);
+        const blob = await res.blob();
+        const objectUrl = URL.createObjectURL(blob);
+        const img2 = new Image();
+        img2.onload = () => resolve(img2);
+        img2.onerror = () => reject(new Error("Failed to load SVG (after fetch fallback)"));
+        img2.src = objectUrl;
+      } catch (e) {
+        reject(new Error(`Failed to load SVG: ${(e == null ? void 0 : e.message) || "network error"}`));
+      }
+    };
+    const img = new Image();
+    img.crossOrigin = "anonymous";
+    img.onload = () => resolve(img);
+    img.onerror = () => tryFetch();
+    img.src = svgUrl;
+  });
+}
+async function buildLuminanceAlphaCanvas(svgUrl, frameW, frameH) {
+  const w = Math.max(2, Math.round(frameW));
+  const h = Math.max(2, Math.round(frameH));
+  const img = await loadSvgAsImage(svgUrl);
+  const canvas = document.createElement("canvas");
+  canvas.width = w;
+  canvas.height = h;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) throw new Error("Failed to get 2D context for mask canvas");
+  ctx.clearRect(0, 0, w, h);
+  ctx.drawImage(img, 0, 0, w, h);
+  let data;
+  try {
+    data = ctx.getImageData(0, 0, w, h);
+  } catch (e) {
+    throw new Error(
+      "Could not read SVG pixels (CORS / tainted canvas). Try a different mask source."
+    );
+  }
+  const px = data.data;
+  for (let i = 0; i < px.length; i += 4) {
+    const r = px[i];
+    const g = px[i + 1];
+    const b = px[i + 2];
+    const a = px[i + 3];
+    const lum = 0.2126 * r + 0.7152 * g + 0.0722 * b;
+    const alpha = lum / 255 * a;
+    px[i] = 255;
+    px[i + 1] = 255;
+    px[i + 2] = 255;
+    px[i + 3] = Math.round(alpha);
+  }
+  ctx.putImageData(data, 0, 0);
+  return canvas;
+}
+async function applyLuminanceMaskToCropGroup(cropGroup, svgUrl) {
+  var _a, _b, _c;
+  if (!isCropGroup(cropGroup)) {
+    throw new Error("Selected object is not a crop group / image");
+  }
+  const frameW = ((_a = cropGroup._ct) == null ? void 0 : _a.frameW) ?? cropGroup.width ?? 0;
+  const frameH = ((_b = cropGroup._ct) == null ? void 0 : _b.frameH) ?? cropGroup.height ?? 0;
+  if (frameW <= 0 || frameH <= 0) {
+    throw new Error("Crop group has no frame dimensions");
+  }
+  const alphaCanvas = await buildLuminanceAlphaCanvas(svgUrl, frameW, frameH);
+  const maskImg = new fabric__namespace.FabricImage(alphaCanvas, {
+    originX: "center",
+    originY: "center",
+    left: 0,
+    top: 0,
+    selectable: false,
+    evented: false,
+    hasControls: false,
+    hasBorders: false
+  });
+  maskImg.absolutePositioned = false;
+  maskImg.excludeFromExport = true;
+  maskImg.inverted = false;
+  maskImg.__svgMask = true;
+  maskImg.__svgMaskUrl = svgUrl;
+  maskImg.__svgMaskType = "luminance";
+  cropGroup.clipPath = maskImg;
+  cropGroup.__svgMaskUrl = svgUrl;
+  cropGroup.__svgMaskType = "luminance";
+  cropGroup.dirty = true;
+  if (cropGroup._objects) {
+    for (const child of cropGroup._objects) {
+      child.dirty = true;
+    }
+  }
+  (_c = cropGroup.canvas) == null ? void 0 : _c.requestRenderAll();
+}
+async function applyMaskToCropGroup(cropGroup, svgUrl, maskType) {
+  if (maskType === "luminance") {
+    return applyLuminanceMaskToCropGroup(cropGroup, svgUrl);
+  }
+  return applySvgMaskToCropGroup(cropGroup, svgUrl);
+}
+function getAppliedSvgMaskUrl(obj) {
+  if (!obj) return null;
+  const url = obj.__svgMaskUrl;
+  return typeof url === "string" ? url : null;
+}
+function getAppliedSvgMaskType(obj) {
+  if (!obj) return null;
+  const t = obj.__svgMaskType;
+  return t === "luminance" || t === "shape" ? t : null;
+}
+function clearSvgMaskFromCropGroup(cropGroup) {
+  var _a, _b, _c;
+  if (!isCropGroup(cropGroup)) return;
+  const frameW = ((_a = cropGroup._ct) == null ? void 0 : _a.frameW) ?? cropGroup.width ?? 0;
+  const frameH = ((_b = cropGroup._ct) == null ? void 0 : _b.frameH) ?? cropGroup.height ?? 0;
+  const rect = new fabric__namespace.Rect({
+    width: frameW,
+    height: frameH,
+    left: 0,
+    top: 0,
+    originX: "center",
+    originY: "center",
+    selectable: false,
+    evented: false,
+    hasControls: false,
+    hasBorders: false
+  });
+  rect.absolutePositioned = false;
+  rect.excludeFromExport = true;
+  cropGroup.clipPath = rect;
+  delete cropGroup.__svgMaskUrl;
+  delete cropGroup.__svgMaskType;
+  cropGroup.dirty = true;
+  (_c = cropGroup.canvas) == null ? void 0 : _c.requestRenderAll();
+}
+const svgMaskApply = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  applyLuminanceMaskToCropGroup,
+  applyMaskToCropGroup,
+  applySvgMaskToCropGroup,
+  clearSvgMaskFromCropGroup,
+  detectMaskType,
+  getAppliedSvgMaskType,
+  getAppliedSvgMaskUrl,
+  isLuminanceMaskClipPath,
+  isSvgMaskClipPath,
+  syncSvgMaskClipPath
+}, Symbol.toStringTag, { value: "Module" }));
+function clamp$1(v, min, max) {
   return Math.max(min, Math.min(max, v));
 }
 function applyControlSizeForZoom(canvas, obj) {
@@ -3078,76 +3513,78 @@ function finalizeCropGroupCoords(g) {
   g.setCoords();
 }
 function updateCoverLayout(g) {
+  var _a;
   const ct = g.__cropData;
   if (!ct) return;
   const { frameW, frameH, shape, rx: rxRatio, _img: img, _border: border } = ct;
-  if (!img) return;
   const minDim = Math.min(frameW, frameH);
   let rx = rxRatio > 0.5 ? rxRatio : rxRatio * minDim;
   rx = Math.max(0, Math.min(rx, frameW / 2, frameH / 2));
-  const needsNewClipPath = !g.clipPath || shape === "circle" && !(g.clipPath instanceof fabric__namespace.Ellipse) || shape !== "circle" && !(g.clipPath instanceof fabric__namespace.Rect);
-  if (needsNewClipPath) {
-    const clip = shape === "circle" ? new fabric__namespace.Ellipse({
-      rx: frameW / 2,
-      ry: frameH / 2,
-      left: 0,
-      top: 0,
-      originX: "center",
-      originY: "center",
-      selectable: false,
-      evented: false,
-      hasControls: false,
-      hasBorders: false
-    }) : new fabric__namespace.Rect({
-      width: frameW,
-      height: frameH,
-      rx,
-      // rx is already calculated from ratio above
-      ry: rx,
-      // Ensure both are the same for uniform corners
-      left: 0,
-      top: 0,
-      originX: "center",
-      originY: "center",
-      selectable: false,
-      evented: false,
-      hasControls: false,
-      hasBorders: false
-    });
-    clip.absolutePositioned = false;
-    clip.excludeFromExport = true;
-    clip.setCoords();
-    clip.dirty = true;
-    g.clipPath = clip;
-  } else if (g.clipPath && typeof g.clipPath.set === "function") {
-    if (shape === "circle") {
-      g.clipPath.set({
+  const currentClipPath = g.clipPath;
+  const hasCustomSvgMask = Boolean(
+    currentClipPath && (isSvgMaskClipPath(currentClipPath) || isLuminanceMaskClipPath(currentClipPath) || currentClipPath.__svgMask)
+  );
+  if (hasCustomSvgMask) {
+    if (isSvgMaskClipPath(currentClipPath)) {
+      syncSvgMaskClipPath(g);
+    } else if (currentClipPath && typeof currentClipPath.set === "function") {
+      const baseW = Math.max(1, Number(currentClipPath.width) || frameW);
+      const baseH = Math.max(1, Number(currentClipPath.height) || frameH);
+      currentClipPath.set({
+        left: 0,
+        top: 0,
+        originX: "center",
+        originY: "center",
+        scaleX: frameW / baseW,
+        scaleY: frameH / baseH,
+        selectable: false,
+        evented: false,
+        hasControls: false,
+        hasBorders: false
+      });
+      currentClipPath.absolutePositioned = false;
+      currentClipPath.excludeFromExport = true;
+      currentClipPath.dirty = true;
+      currentClipPath.setCoords();
+    }
+  } else {
+    const needsNewClipPath = !g.clipPath || shape === "circle" && !(g.clipPath instanceof fabric__namespace.Ellipse) || shape !== "circle" && !(g.clipPath instanceof fabric__namespace.Rect);
+    if (needsNewClipPath) {
+      const clip = shape === "circle" ? new fabric__namespace.Ellipse({
         rx: frameW / 2,
         ry: frameH / 2,
         left: 0,
         top: 0,
         originX: "center",
         originY: "center",
-        // CRITICAL: Keep clipPath non-interactive
+        selectable: false,
+        evented: false,
+        hasControls: false,
+        hasBorders: false
+      }) : new fabric__namespace.Rect({
+        width: frameW,
+        height: frameH,
+        rx,
+        ry: rx,
+        left: 0,
+        top: 0,
+        originX: "center",
+        originY: "center",
         selectable: false,
         evented: false,
         hasControls: false,
         hasBorders: false
       });
-    } else {
-      const clipPathObj = g.clipPath;
-      const currentRx = clipPathObj.rx || 0;
-      const currentWidth = clipPathObj.width || 0;
-      const currentHeight = clipPathObj.height || 0;
-      const rxChanged = Math.abs(currentRx - rx) > 0.01;
-      const dimsChanged = Math.abs(currentWidth - frameW) > 0.1 || Math.abs(currentHeight - frameH) > 0.1;
-      if (rxChanged || dimsChanged) {
-        const newClip = new fabric__namespace.Rect({
-          width: frameW,
-          height: frameH,
-          rx,
-          ry: rx,
-          // Ensure both are identical for uniform corners
+      clip.absolutePositioned = false;
+      clip.excludeFromExport = true;
+      clip.setCoords();
+      clip.dirty = true;
+      g.clipPath = clip;
+    } else if (g.clipPath && typeof g.clipPath.set === "function") {
+      if (shape === "circle") {
+        g.clipPath.set({
+          rx: frameW / 2,
+          ry: frameH / 2,
           left: 0,
           top: 0,
           originX: "center",
@@ -3157,32 +3594,55 @@ function updateCoverLayout(g) {
           hasControls: false,
           hasBorders: false
         });
-        newClip.absolutePositioned = false;
-        newClip.excludeFromExport = true;
-        newClip.setCoords();
-        newClip.dirty = true;
-        g.clipPath = newClip;
       } else {
-        clipPathObj.set({
-          width: frameW,
-          height: frameH,
-          rx,
-          ry: rx,
-          left: 0,
-          top: 0,
-          originX: "center",
-          originY: "center",
-          selectable: false,
-          evented: false,
-          hasControls: false,
-          hasBorders: false
-        });
-        clipPathObj.setCoords();
-        clipPathObj.dirty = true;
+        const clipPathObj = g.clipPath;
+        const currentRx = clipPathObj.rx || 0;
+        const currentWidth = clipPathObj.width || 0;
+        const currentHeight = clipPathObj.height || 0;
+        const rxChanged = Math.abs(currentRx - rx) > 0.01;
+        const dimsChanged = Math.abs(currentWidth - frameW) > 0.1 || Math.abs(currentHeight - frameH) > 0.1;
+        if (rxChanged || dimsChanged) {
+          const newClip = new fabric__namespace.Rect({
+            width: frameW,
+            height: frameH,
+            rx,
+            ry: rx,
+            left: 0,
+            top: 0,
+            originX: "center",
+            originY: "center",
+            selectable: false,
+            evented: false,
+            hasControls: false,
+            hasBorders: false
+          });
+          newClip.absolutePositioned = false;
+          newClip.excludeFromExport = true;
+          newClip.setCoords();
+          newClip.dirty = true;
+          g.clipPath = newClip;
+        } else {
+          clipPathObj.set({
+            width: frameW,
+            height: frameH,
+            rx,
+            ry: rx,
+            left: 0,
+            top: 0,
+            originX: "center",
+            originY: "center",
+            selectable: false,
+            evented: false,
+            hasControls: false,
+            hasBorders: false
+          });
+          clipPathObj.setCoords();
+          clipPathObj.dirty = true;
+        }
       }
+      g.clipPath.absolutePositioned = false;
+      g.clipPath.excludeFromExport = true;
     }
-    g.clipPath.absolutePositioned = false;
-    g.clipPath.excludeFromExport = true;
   }
   if (border) {
     if (shape === "circle") {
@@ -3194,6 +3654,28 @@ function updateCoverLayout(g) {
       border.set({ width: frameW, height: frameH, rx: actualRx, ry: actualRx });
     }
   }
+  if (!img) {
+    const placeholderFrame = ct._placeholderFrame ?? ((_a = g._objects) == null ? void 0 : _a.find((obj) => obj.__isPlaceholderFrame));
+    if (placeholderFrame && typeof placeholderFrame.set === "function") {
+      placeholderFrame.set({
+        width: frameW,
+        height: frameH,
+        left: 0,
+        top: 0,
+        originX: "center",
+        originY: "center",
+        ...placeholderFrame instanceof fabric__namespace.Rect ? { rx, ry: rx } : {}
+      });
+      placeholderFrame.dirty = true;
+      ct._placeholderFrame = placeholderFrame;
+    }
+    finalizeCropGroupCoords(g);
+    if (g.canvas) {
+      g.setCoords();
+      g.canvas.requestRenderAll();
+    }
+    return;
+  }
   img._ct = img._ct || { panX: 0.5, panY: 0.5, zoom: 1 };
   if (img.__panX !== void 0 || img.__panY !== void 0) {
     img._ct.panX = img.__panX ?? 0.5;
@@ -3215,8 +3697,8 @@ function updateCoverLayout(g) {
   const dispH = ih * finalScale;
   const overflowX = Math.max(0, dispW - frameW);
   const overflowY = Math.max(0, dispH - frameH);
-  const panX = clamp(img._ct.panX ?? 0.5, 0, 1);
-  const panY = clamp(img._ct.panY ?? 0.5, 0, 1);
+  const panX = clamp$1(img._ct.panX ?? 0.5, 0, 1);
+  const panY = clamp$1(img._ct.panY ?? 0.5, 0, 1);
   const offsetX = fitContain ? 0 : overflowX > 0 ? -overflowX * (panX - 0.5) : 0;
   const offsetY = fitContain ? 0 : overflowY > 0 ? -overflowY * (panY - 0.5) : 0;
   img.set({ left: offsetX, top: offsetY });
@@ -3308,51 +3790,6 @@ function getRotatedControlCursor(controlKey, target) {
 const makeRotatedCursorStyleHandler = (controlKey) => {
   return (_eventData, _control, target) => getRotatedControlCursor(controlKey, target);
 };
-function resizeFrameFromCorner(eventData, transform, _x, _y) {
-  var _a;
-  const g = transform.target;
-  const ct = g.__cropData;
-  if (!ct || !((_a = g._ct) == null ? void 0 : _a.isCropGroup)) return false;
-  const canvas = g.canvas;
-  if (!canvas) return false;
-  const e = getDomEvent(eventData);
-  if (!e) return false;
-  const pointer = canvas.getPointer(e);
-  g.setCoords();
-  const a = g.aCoords;
-  if (!a) return false;
-  const corner = transform.corner;
-  const anchor = getOppositeAnchor(a, corner);
-  const MIN_W = 20;
-  const MIN_H = 20;
-  const angle = g.angle || 0;
-  const deltaWorldX = pointer.x - anchor.x;
-  const deltaWorldY = pointer.y - anchor.y;
-  const localDelta = worldDeltaToLocal(deltaWorldX, deltaWorldY, angle);
-  const defaultSigns = getCornerDefaultSigns(corner);
-  const signX = Math.abs(localDelta.x) < 1e-3 ? defaultSigns.x : localDelta.x >= 0 ? 1 : -1;
-  const signY = Math.abs(localDelta.y) < 1e-3 ? defaultSigns.y : localDelta.y >= 0 ? 1 : -1;
-  const newW = Math.max(MIN_W, Math.abs(localDelta.x));
-  const newH = Math.max(MIN_H, Math.abs(localDelta.y));
-  ct.frameW = newW;
-  ct.frameH = newH;
-  const centerLocal = {
-    x: signX * (newW / 2),
-    y: signY * (newH / 2)
-  };
-  const centerWorld = localDeltaToWorld(centerLocal.x, centerLocal.y, angle);
-  g.set({
-    left: anchor.x + centerWorld.x,
-    top: anchor.y + centerWorld.y,
-    originX: "center",
-    originY: "center",
-    width: newW,
-    height: newH
-  });
-  updateCoverLayout(g);
-  canvas.requestRenderAll();
-  return true;
-}
 function resizeFrameFromCornerUniform(eventData, transform, _x, _y) {
   var _a;
   const g = transform.target;
@@ -3432,7 +3869,7 @@ function resizeFrameFromSide(g, side, localDx, localDy) {
 }
 function installCanvaMaskControls(g) {
   const ct = g.__cropData;
-  if (ct) ct.fit = void 0;
+  if (ct) ct.fit = ct.fit ?? "cover";
   g.setControlsVisibility({
     mt: true,
     mb: true,
@@ -3486,7 +3923,7 @@ function installCanvaMaskControls(g) {
         if (canvas && canvas.__editLockRef) {
           canvas.__editLockRef.current = true;
         }
-        return resizeFrameFromCorner(eventData, transform);
+        return resizeFrameFromCornerUniform(eventData, transform);
       }
     });
   };
@@ -3496,47 +3933,6 @@ function installCanvaMaskControls(g) {
   g.controls.br = makeCornerControl("br", 0.5, 0.5, "nwse-resize");
   g.__hasCustomControls = true;
 }
-function setSimpleScaleControls(g) {
-  if (!g.__cropGroup) return;
-  const ct = g.__cropData;
-  if (ct) {
-    updateCoverLayout(g);
-  }
-  g.lockScalingX = true;
-  g.lockScalingY = true;
-  g.setControlsVisibility({
-    mt: false,
-    mb: false,
-    ml: false,
-    mr: false,
-    tl: true,
-    tr: true,
-    bl: true,
-    br: true,
-    mtr: true
-  });
-  g.padding = 0;
-  const makeCornerControl = (key, x, y, cursor) => new fabric__namespace.Control({
-    x,
-    y,
-    cursorStyle: cursor,
-    cursorStyleHandler: makeRotatedCursorStyleHandler(key),
-    actionName: "resize",
-    actionHandler: (eventData, transform) => {
-      const t = transform.target;
-      if (t.canvas && t.canvas.__editLockRef) {
-        t.canvas.__editLockRef.current = true;
-      }
-      return resizeFrameFromCornerUniform(eventData, transform);
-    }
-  });
-  g.controls.tl = makeCornerControl("tl", -0.5, -0.5, "nwse-resize");
-  g.controls.tr = makeCornerControl("tr", 0.5, -0.5, "nesw-resize");
-  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.setCoords();
-}
 async function createMaskedImageElement({
   url,
   image,
@@ -3719,9 +4115,405 @@ async function createMaskedImageElement({
   });
   g.setCoords();
   updateCoverLayout(g);
-  setSimpleScaleControls(g);
+  installCanvaMaskControls(g);
   return g;
 }
+const CROP_MODE_FLAG = "__inCropMode";
+const CROP_GHOST_FLAG = "__cropGhost";
+const CROP_OUTLINE_FLAG = "__cropOutline";
+const CROP_HANDLERS_FLAG = "__cropHandlers";
+function isCropGroupInCropMode(g) {
+  return Boolean(g[CROP_MODE_FLAG]);
+}
+function clamp(v, min, max) {
+  return Math.max(min, Math.min(max, v));
+}
+function syncGhostTransform(g) {
+  const ghost = g[CROP_GHOST_FLAG];
+  const ct = g.__cropData;
+  if (!ghost || !(ct == null ? void 0 : ct._img)) return;
+  const img = ct._img;
+  const finalScale = img.scaleX || 1;
+  const gLeft = g.left ?? 0;
+  const gTop = g.top ?? 0;
+  const angle = g.angle ?? 0;
+  const imgLocalLeft = img.left ?? 0;
+  const imgLocalTop = img.top ?? 0;
+  const rad = fabric__namespace.util.degreesToRadians(angle);
+  const cos = Math.cos(rad);
+  const sin = Math.sin(rad);
+  const worldDx = imgLocalLeft * cos - imgLocalTop * sin;
+  const worldDy = imgLocalLeft * sin + imgLocalTop * cos;
+  ghost.set({
+    left: gLeft + worldDx,
+    top: gTop + worldDy,
+    scaleX: finalScale,
+    scaleY: finalScale,
+    angle,
+    originX: "center",
+    originY: "center"
+  });
+  ghost.setCoords();
+}
+function syncOutlineTransform(g) {
+  const outline = g[CROP_OUTLINE_FLAG];
+  const ct = g.__cropData;
+  if (!outline || !ct) return;
+  outline.set({
+    left: g.left ?? 0,
+    top: g.top ?? 0,
+    width: ct.frameW,
+    height: ct.frameH,
+    angle: g.angle ?? 0,
+    originX: "center",
+    originY: "center"
+  });
+  if (outline instanceof fabric__namespace.Rect) {
+    const minDim = Math.min(ct.frameW, ct.frameH);
+    const rxRatio = ct.rx ?? 0;
+    let rx = rxRatio > 0.5 ? rxRatio : rxRatio * minDim;
+    rx = Math.max(0, Math.min(rx, ct.frameW / 2, ct.frameH / 2));
+    outline.set({ rx, ry: rx });
+  }
+  outline.setCoords();
+}
+function installCropModeVisuals(g) {
+  g.setControlsVisibility({
+    mt: false,
+    mb: false,
+    ml: false,
+    mr: false,
+    tl: false,
+    tr: false,
+    bl: false,
+    br: false,
+    mtr: false
+  });
+  g.hasControls = false;
+  g.lockScalingX = true;
+  g.lockScalingY = true;
+  g.lockRotation = true;
+  g.lockMovementX = false;
+  g.lockMovementY = false;
+  g.borderColor = "hsl(256, 80%, 58%)";
+  g.borderDashArray = [4, 4];
+  g.setCoords();
+}
+function enterCropMode(g) {
+  const ct = g.__cropData;
+  if (!(ct == null ? void 0 : ct._img)) return false;
+  if (g[CROP_MODE_FLAG]) return false;
+  const canvas = g.canvas;
+  if (!canvas) return false;
+  g[CROP_MODE_FLAG] = true;
+  const innerImg = ct._img;
+  const imgEl = innerImg._element;
+  if (!imgEl) {
+    g[CROP_MODE_FLAG] = false;
+    return false;
+  }
+  const ghost = new fabric__namespace.FabricImage(imgEl, {
+    selectable: false,
+    evented: false,
+    hasControls: false,
+    hasBorders: false,
+    opacity: 0.35,
+    originX: "center",
+    originY: "center",
+    objectCaching: false
+  });
+  ghost.excludeFromExport = true;
+  ghost[CROP_GHOST_FLAG] = true;
+  const outlineShape = ct.shape;
+  const outline = outlineShape === "circle" ? new fabric__namespace.Ellipse({
+    rx: ct.frameW / 2,
+    ry: ct.frameH / 2,
+    fill: "transparent",
+    stroke: "hsl(256, 80%, 58%)",
+    strokeWidth: 1.5,
+    strokeDashArray: [6, 4],
+    strokeUniform: true,
+    selectable: false,
+    evented: false,
+    hasControls: false,
+    hasBorders: false,
+    originX: "center",
+    originY: "center",
+    objectCaching: false
+  }) : new fabric__namespace.Rect({
+    width: ct.frameW,
+    height: ct.frameH,
+    fill: "transparent",
+    stroke: "hsl(256, 80%, 58%)",
+    strokeWidth: 1.5,
+    strokeDashArray: [6, 4],
+    strokeUniform: true,
+    selectable: false,
+    evented: false,
+    hasControls: false,
+    hasBorders: false,
+    originX: "center",
+    originY: "center",
+    objectCaching: false
+  });
+  outline.excludeFromExport = true;
+  outline[CROP_OUTLINE_FLAG] = true;
+  g[CROP_GHOST_FLAG] = ghost;
+  g[CROP_OUTLINE_FLAG] = outline;
+  const groupIndex = canvas._objects.indexOf(g);
+  if (groupIndex >= 0) {
+    canvas.insertAt(groupIndex, ghost);
+    canvas.add(outline);
+    canvas.bringObjectToFront(g);
+    canvas.bringObjectToFront(outline);
+  } else {
+    canvas.add(ghost);
+    canvas.add(g);
+    canvas.add(outline);
+  }
+  syncGhostTransform(g);
+  syncOutlineTransform(g);
+  const groupAnchor = { left: g.left ?? 0, top: g.top ?? 0 };
+  let panRafId = null;
+  let pendingDx = 0;
+  let pendingDy = 0;
+  let lastDragDx = 0;
+  let lastDragDy = 0;
+  const flushPan = () => {
+    panRafId = null;
+    if (pendingDx === 0 && pendingDy === 0) return;
+    const innerCt = g.__cropData;
+    const img = innerCt == null ? void 0 : innerCt._img;
+    if (!img) {
+      pendingDx = 0;
+      pendingDy = 0;
+      return;
+    }
+    const angle = g.angle ?? 0;
+    const rad = fabric__namespace.util.degreesToRadians(-angle);
+    const cos = Math.cos(rad);
+    const sin = Math.sin(rad);
+    const localDx = pendingDx * cos - pendingDy * sin;
+    const localDy = pendingDx * sin + pendingDy * cos;
+    pendingDx = 0;
+    pendingDy = 0;
+    const iw = img.width || 1;
+    const ih = img.height || 1;
+    const finalScale = img.scaleX || 1;
+    const dispW = iw * finalScale;
+    const dispH = ih * finalScale;
+    const overflowX = Math.max(0, dispW - innerCt.frameW);
+    const overflowY = Math.max(0, dispH - innerCt.frameH);
+    img._ct = img._ct || { panX: 0.5, panY: 0.5, zoom: 1 };
+    const ct2 = img._ct;
+    if (overflowX > 0) ct2.panX = clamp((ct2.panX ?? 0.5) - localDx / overflowX, 0, 1);
+    if (overflowY > 0) ct2.panY = clamp((ct2.panY ?? 0.5) - localDy / overflowY, 0, 1);
+    updateCoverLayout(g);
+    syncGhostTransform(g);
+    g.setCoords();
+    canvas.requestRenderAll();
+  };
+  const onMoving = (opt) => {
+    const target = opt == null ? void 0 : opt.target;
+    if (target !== g) return;
+    const rawDx = (g.left ?? 0) - groupAnchor.left;
+    const rawDy = (g.top ?? 0) - groupAnchor.top;
+    const dx = rawDx - lastDragDx;
+    const dy = rawDy - lastDragDy;
+    lastDragDx = rawDx;
+    lastDragDy = rawDy;
+    g.left = groupAnchor.left;
+    g.top = groupAnchor.top;
+    if (dx === 0 && dy === 0) return;
+    pendingDx += dx;
+    pendingDy += dy;
+    if (panRafId == null) panRafId = requestAnimationFrame(flushPan);
+  };
+  const onModified = (opt) => {
+    const target = opt == null ? void 0 : opt.target;
+    if (target !== g) return;
+    if (panRafId != null) {
+      cancelAnimationFrame(panRafId);
+      panRafId = null;
+      flushPan();
+    }
+    lastDragDx = 0;
+    lastDragDy = 0;
+    g.left = groupAnchor.left;
+    g.top = groupAnchor.top;
+    g.setCoords();
+  };
+  const onCanvasMouseDown = (opt) => {
+    const target = opt.target;
+    if (target === g || target === ghost || target === outline) return;
+    setTimeout(() => exitCropMode(g, true), 0);
+  };
+  const onDblClick = (opt) => {
+    const target = opt == null ? void 0 : opt.target;
+    if (target !== g && target !== ghost && target !== outline) return;
+    exitCropMode(g, true);
+  };
+  const onKeyDown = (e) => {
+    if (e.key === "Escape" || e.key === "Enter") {
+      e.preventDefault();
+      e.stopPropagation();
+      exitCropMode(g, true);
+    }
+  };
+  let wheelCommitTimer = null;
+  let zoomRafId = null;
+  let pendingZoomDelta = 0;
+  let pendingZoomCenter = null;
+  let lastWheelWasPinch = false;
+  const flushZoom = () => {
+    zoomRafId = null;
+    if (pendingZoomDelta === 0 || !pendingZoomCenter) return;
+    const innerCt = g.__cropData;
+    const img = innerCt == null ? void 0 : innerCt._img;
+    if (!img) {
+      pendingZoomDelta = 0;
+      pendingZoomCenter = null;
+      return;
+    }
+    const factor = lastWheelWasPinch ? 0.012 : 22e-4;
+    const ratio = Math.exp(-pendingZoomDelta * factor);
+    pendingZoomDelta = 0;
+    img._ct = img._ct || { panX: 0.5, panY: 0.5, zoom: 1 };
+    const ct2 = img._ct;
+    const prevZoom = ct2.zoom ?? 1;
+    const nextZoom = clamp(prevZoom * ratio, 1, 8);
+    if (nextZoom === prevZoom) {
+      pendingZoomCenter = null;
+      return;
+    }
+    const angle = g.angle ?? 0;
+    const rad = fabric__namespace.util.degreesToRadians(-angle);
+    const cos = Math.cos(rad);
+    const sin = Math.sin(rad);
+    const cx = g.left ?? 0;
+    const cy = g.top ?? 0;
+    const wx = pendingZoomCenter.x - cx;
+    const wy = pendingZoomCenter.y - cy;
+    const localCx = wx * cos - wy * sin;
+    const localCy = wx * sin + wy * cos;
+    const iw = img.width || 1;
+    const ih = img.height || 1;
+    const prevScale = img.scaleX || 1;
+    const prevOverflowX = Math.max(0, iw * prevScale - innerCt.frameW);
+    const prevOverflowY = Math.max(0, ih * prevScale - innerCt.frameH);
+    const prevPanX = ct2.panX ?? 0.5;
+    const prevPanY = ct2.panY ?? 0.5;
+    const prevOffsetX = prevOverflowX > 0 ? -prevOverflowX * (prevPanX - 0.5) : 0;
+    const prevOffsetY = prevOverflowY > 0 ? -prevOverflowY * (prevPanY - 0.5) : 0;
+    const imgPxX = (localCx - prevOffsetX) / prevScale + iw / 2;
+    const imgPxY = (localCy - prevOffsetY) / prevScale + ih / 2;
+    ct2.zoom = nextZoom;
+    updateCoverLayout(g);
+    const newScale = img.scaleX || 1;
+    const newOverflowX = Math.max(0, iw * newScale - innerCt.frameW);
+    const newOverflowY = Math.max(0, ih * newScale - innerCt.frameH);
+    if (newOverflowX > 0) {
+      const desiredOffsetX = localCx - (imgPxX - iw / 2) * newScale;
+      ct2.panX = clamp(0.5 - desiredOffsetX / newOverflowX, 0, 1);
+    } else {
+      ct2.panX = 0.5;
+    }
+    if (newOverflowY > 0) {
+      const desiredOffsetY = localCy - (imgPxY - ih / 2) * newScale;
+      ct2.panY = clamp(0.5 - desiredOffsetY / newOverflowY, 0, 1);
+    } else {
+      ct2.panY = 0.5;
+    }
+    updateCoverLayout(g);
+    syncGhostTransform(g);
+    g.setCoords();
+    canvas.requestRenderAll();
+    if (wheelCommitTimer) clearTimeout(wheelCommitTimer);
+    wheelCommitTimer = setTimeout(() => {
+      canvas.fire("object:modified", { target: g });
+      g.left = groupAnchor.left;
+      g.top = groupAnchor.top;
+      g.setCoords();
+    }, 200);
+    pendingZoomCenter = null;
+  };
+  const onWheel = (e) => {
+    if (!canvas) return;
+    const innerCt = g.__cropData;
+    if (!innerCt) return;
+    const pointer = canvas.getPointer(e, false);
+    const br = g.getBoundingRect();
+    if (pointer.x < br.left || pointer.x > br.left + br.width || pointer.y < br.top || pointer.y > br.top + br.height) return;
+    const img = innerCt._img;
+    if (!img) return;
+    e.preventDefault();
+    e.stopPropagation();
+    pendingZoomDelta += e.deltaY;
+    pendingZoomCenter = pointer;
+    lastWheelWasPinch = !!e.ctrlKey;
+    if (zoomRafId == null) zoomRafId = requestAnimationFrame(flushZoom);
+  };
+  canvas.on("object:moving", onMoving);
+  canvas.on("object:modified", onModified);
+  canvas.on("mouse:down:before", onCanvasMouseDown);
+  canvas.on("mouse:dblclick", onDblClick);
+  window.addEventListener("keydown", onKeyDown, true);
+  const upperCanvasEl = canvas.upperCanvasEl;
+  upperCanvasEl == null ? void 0 : upperCanvasEl.addEventListener("wheel", onWheel, { passive: false });
+  g[CROP_HANDLERS_FLAG] = {
+    onMoving,
+    onModified,
+    onCanvasMouseDown,
+    onDblClick,
+    onKeyDown,
+    onWheel,
+    upperCanvasEl
+  };
+  installCropModeVisuals(g);
+  canvas.setActiveObject(g);
+  canvas.requestRenderAll();
+  return true;
+}
+function exitCropMode(g, commit = true) {
+  var _a;
+  if (!g[CROP_MODE_FLAG]) return;
+  const canvas = g.canvas;
+  const handlers = g[CROP_HANDLERS_FLAG];
+  if (handlers && canvas) {
+    canvas.off("object:moving", handlers.onMoving);
+    canvas.off("object:modified", handlers.onModified);
+    canvas.off("mouse:down:before", handlers.onCanvasMouseDown);
+    if (handlers.onDblClick) canvas.off("mouse:dblclick", handlers.onDblClick);
+    window.removeEventListener("keydown", handlers.onKeyDown, true);
+    (_a = handlers.upperCanvasEl) == null ? void 0 : _a.removeEventListener("wheel", handlers.onWheel);
+  }
+  g[CROP_HANDLERS_FLAG] = void 0;
+  const ghost = g[CROP_GHOST_FLAG];
+  const outline = g[CROP_OUTLINE_FLAG];
+  if (canvas && ghost) canvas.remove(ghost);
+  if (canvas && outline) canvas.remove(outline);
+  g[CROP_GHOST_FLAG] = void 0;
+  g[CROP_OUTLINE_FLAG] = void 0;
+  g.lockMovementX = false;
+  g.lockMovementY = false;
+  g.lockRotation = false;
+  g.lockScalingX = false;
+  g.lockScalingY = false;
+  g.hasControls = true;
+  g.borderDashArray = void 0;
+  installCanvaMaskControls(g);
+  g.borderColor = void 0;
+  g.cornerColor = void 0;
+  g.cornerStrokeColor = void 0;
+  g.cornerStyle = "rect";
+  g[CROP_MODE_FLAG] = false;
+  g.__cropZoomLastPointer = void 0;
+  g.__lastPointerForCrop = void 0;
+  if (commit && canvas) {
+    canvas.fire("object:modified", { target: g });
+  }
+  canvas == null ? void 0 : canvas.requestRenderAll();
+}
 function getObjectSnapPoints(obj) {
   try {
     obj.setCoords();
@@ -5290,13 +6082,7 @@ const PageCanvas = react.forwardRef(
         const activeObj = fabricCanvas.getActiveObject();
         if (activeObj) applyControlSizeForZoom(fabricCanvas, activeObj);
         if (activeObj && !(activeObj instanceof fabric__namespace.ActiveSelection) && (((_a = activeObj._ct) == null ? void 0 : _a.isCropGroup) || activeObj.__cropGroup)) {
-          const objId = getObjectId(activeObj);
-          const element = elementsRef.current.find((el) => el.id === objId);
-          if (element == null ? void 0 : element.useCropHandles) {
-            installCanvaMaskControls(activeObj);
-          } else {
-            setSimpleScaleControls(activeObj);
-          }
+          installCanvaMaskControls(activeObj);
         }
       });
       fabricCanvas.on("selection:updated", () => {
@@ -5305,13 +6091,7 @@ const PageCanvas = react.forwardRef(
         const activeObj = fabricCanvas.getActiveObject();
         if (activeObj) applyControlSizeForZoom(fabricCanvas, activeObj);
         if (activeObj && !(activeObj instanceof fabric__namespace.ActiveSelection) && (((_a = activeObj._ct) == null ? void 0 : _a.isCropGroup) || activeObj.__cropGroup)) {
-          const objId = getObjectId(activeObj);
-          const element = elementsRef.current.find((el) => el.id === objId);
-          if (element == null ? void 0 : element.useCropHandles) {
-            installCanvaMaskControls(activeObj);
-          } else {
-            setSimpleScaleControls(activeObj);
-          }
+          installCanvaMaskControls(activeObj);
         }
       });
       fabricCanvas.on("selection:cleared", () => {
@@ -5329,6 +6109,8 @@ const PageCanvas = react.forwardRef(
       let dragStarted = false;
       const markTransforming = (target) => {
         if (!target) return;
+        const targetId = getObjectId(target);
+        if (targetId) transformingIdsRef.current.add(targetId);
         if (target instanceof fabric__namespace.Group) {
           target.getObjects().forEach((obj) => {
             const id2 = getObjectId(obj);
@@ -5349,7 +6131,7 @@ const PageCanvas = react.forwardRef(
       const clearTransforming = () => {
         transformingIdsRef.current.clear();
       };
-      const isCropGroup = (o) => {
+      const isCropGroup2 = (o) => {
         var _a;
         return !!(((_a = o == null ? void 0 : o._ct) == null ? void 0 : _a.isCropGroup) || (o == null ? void 0 : o.__cropGroup));
       };
@@ -5357,9 +6139,9 @@ const PageCanvas = react.forwardRef(
         var _a, _b, _c;
         const t = opt.target;
         if (((_a = opt.e) == null ? void 0 : _a.type) !== "mousedown" && ((_b = opt.e) == null ? void 0 : _b.type) !== "pointerdown" && ((_c = opt.e) == null ? void 0 : _c.type) !== "touchstart") {
-          if (t && isCropGroup(t)) {
+          if (t && isCropGroup2(t)) {
             fabricCanvas._hoveredTarget = t;
-          } else if ((t == null ? void 0 : t.group) && isCropGroup(t.group)) {
+          } else if ((t == null ? void 0 : t.group) && isCropGroup2(t.group)) {
             fabricCanvas._hoveredTarget = t.group;
           }
           return;
@@ -5368,7 +6150,7 @@ const PageCanvas = react.forwardRef(
           const pointer = fabricCanvas.getPointer(opt.e);
           const objects = fabricCanvas.getObjects();
           for (const obj of objects) {
-            if (isCropGroup(obj) && obj.containsPoint(pointer)) {
+            if (isCropGroup2(obj) && obj.containsPoint(pointer)) {
               fabricCanvas.setActiveObject(obj);
               opt.target = obj;
               fabricCanvas._hoveredTarget = obj;
@@ -5378,13 +6160,13 @@ const PageCanvas = react.forwardRef(
           return;
         }
         const g = t.group;
-        if (g && isCropGroup(g)) {
+        if (g && isCropGroup2(g)) {
           fabricCanvas.setActiveObject(g);
           opt.target = g;
           fabricCanvas._hoveredTarget = g;
           return;
         }
-        if (isCropGroup(t)) {
+        if (isCropGroup2(t)) {
           fabricCanvas.setActiveObject(t);
           t.set({
             selectable: true,
@@ -5927,8 +6709,8 @@ const PageCanvas = react.forwardRef(
             const h = (active.height ?? 0) * (active.scaleY ?? 1);
             const centerX = active.left ?? 0;
             const centerY = active.top ?? 0;
-            const groupLeft = centerX - w / 2;
-            const groupTop = centerY - h / 2;
+            const groupLeft = active.originX === "center" ? centerX - w / 2 : centerX;
+            const groupTop = active.originY === "center" ? centerY - h / 2 : centerY;
             const storePos = absoluteToStorePosition(groupLeft, groupTop, groupId, pageChildren2);
             useEditorStore.getState().updateNode(groupId, { left: storePos.left, top: storePos.top }, { recordHistory: false, skipLayoutRecalc: true });
             commitHistory();
@@ -5961,76 +6743,79 @@ const PageCanvas = react.forwardRef(
             const commonAncestor = findCommonAncestorGroup(selectedElementIds, pageChildren2);
             const candidateGroup = sameDirectParent ? parentGroups[0] : commonAncestor;
             const candidateIsStack = candidateGroup && isStackLayoutMode(candidateGroup.layoutMode);
-            const groupToMove = candidateIsStack ? candidateGroup : null;
-            if (groupToMove && firstId) {
-              const firstNode = findNodeById(pageChildren2, firstId);
-              if (firstNode) {
-                const origAbs = getAbsoluteBounds(firstNode, pageChildren2);
-                let absoluteLeft;
-                let absoluteTop;
-                if (isActiveSelection && activeObj) {
-                  const selectionMatrix = activeObj.calcTransformMatrix();
-                  const relativePoint = { x: firstObj.left ?? 0, y: firstObj.top ?? 0 };
-                  const absolutePoint = fabric__namespace.util.transformPoint(relativePoint, selectionMatrix);
-                  absoluteLeft = absolutePoint.x;
-                  absoluteTop = absolutePoint.y;
-                } else {
-                  absoluteLeft = firstObj.left ?? 0;
-                  absoluteTop = firstObj.top ?? 0;
+            const allMembersSelected = (() => {
+              if (!candidateGroup) return false;
+              const memberIds = getAllElementIds(candidateGroup.children ?? []);
+              if (memberIds.length === 0) return false;
+              const selectedSet = new Set(selectedElementIds);
+              return memberIds.every((mid) => selectedSet.has(mid));
+            })();
+            const groupToMove = candidateIsStack || allMembersSelected ? candidateGroup : null;
+            if (groupToMove) {
+              const groupAbs = getAbsoluteBounds(groupToMove, pageChildren2);
+              let movedGroupLeft = groupAbs.left;
+              let movedGroupTop = groupAbs.top;
+              if (activeObj) {
+                const selectionRect = activeObj.getBoundingRect();
+                movedGroupLeft = selectionRect.left;
+                movedGroupTop = selectionRect.top;
+              } else if (firstId) {
+                const firstNode = findNodeById(pageChildren2, firstId);
+                if (firstNode) {
+                  movedGroupLeft = getAbsoluteBounds(firstNode, pageChildren2).left;
+                  movedGroupTop = getAbsoluteBounds(firstNode, pageChildren2).top;
                 }
-                const deltaX = absoluteLeft - origAbs.left;
-                const deltaY = absoluteTop - origAbs.top;
-                const hadScale = isActiveSelection && activeObj && (Math.abs((activeObj.scaleX ?? 1) - 1) > 0.01 || Math.abs((activeObj.scaleY ?? 1) - 1) > 0.01);
-                if (!hadScale && (Math.abs(deltaX) > 0.1 || Math.abs(deltaY) > 0.1)) {
-                  if (typeof console !== "undefined" && console.log) {
-                    console.log("[object:modified] plain-groups: moving group id=", groupToMove.id, "newLeft=", (groupToMove.left ?? 0) + deltaX, "newTop=", (groupToMove.top ?? 0) + deltaY);
-                  }
-                  const { updateNode: updateNodeStore, commitHistory: commitHistoryStore, getCurrentElements } = useEditorStore.getState();
-                  const newLeft = (groupToMove.left ?? 0) + deltaX;
-                  const newTop = (groupToMove.top ?? 0) + deltaY;
-                  updateNodeStore(groupToMove.id, { left: newLeft, top: newTop }, { recordHistory: false, skipLayoutRecalc: true });
-                  commitHistoryStore();
-                  if (isActiveSelection && activeObj instanceof fabric__namespace.ActiveSelection) {
-                    skipSelectionClearOnDiscardRef.current = true;
-                    fabricCanvas.discardActiveObject();
-                  }
-                  const stateAfter = useEditorStore.getState();
-                  const pageAfter = stateAfter.canvas.pages.find((p) => p.id === pageId);
-                  const pageChildrenAfter = (pageAfter == null ? void 0 : pageAfter.children) ?? [];
-                  for (const obj of activeObjects) {
-                    const objId = getObjectId(obj);
-                    if (!objId || objId === "__background__") continue;
-                    const node = findNodeById(pageChildrenAfter, objId);
-                    if (node) {
-                      const abs = getAbsoluteBounds(node, pageChildrenAfter);
-                      if (obj instanceof fabric__namespace.Group && obj.__cropGroup) {
-                        const w = (obj.width ?? 0) * (obj.scaleX ?? 1);
-                        const h = (obj.height ?? 0) * (obj.scaleY ?? 1);
-                        obj.set({ left: abs.left + w / 2, top: abs.top + h / 2 });
-                      } else {
-                        obj.set({ left: abs.left, top: abs.top });
-                      }
-                      obj.setCoords();
-                    }
-                  }
-                  if (isActiveSelection && activeObjects.length > 0) {
-                    const selection = new fabric__namespace.ActiveSelection([...activeObjects], { canvas: fabricCanvas });
-                    fabricCanvas.setActiveObject(selection);
-                    skipSelectionClearOnDiscardRef.current = false;
+              }
+              const deltaX = movedGroupLeft - groupAbs.left;
+              const deltaY = movedGroupTop - groupAbs.top;
+              const hadScale = isActiveSelection && activeObj && (Math.abs((activeObj.scaleX ?? 1) - 1) > 0.01 || Math.abs((activeObj.scaleY ?? 1) - 1) > 0.01);
+              if (!hadScale && (Math.abs(deltaX) > 0.1 || Math.abs(deltaY) > 0.1)) {
+                if (typeof console !== "undefined" && console.log) {
+                  console.log("[object:modified] plain-groups: moving group id=", groupToMove.id, "newLeft=", (groupToMove.left ?? 0) + deltaX, "newTop=", (groupToMove.top ?? 0) + deltaY);
+                }
+                const { updateNode: updateNodeStore, commitHistory: commitHistoryStore, getCurrentElements } = useEditorStore.getState();
+                const newLeft = (groupToMove.left ?? 0) + deltaX;
+                const newTop = (groupToMove.top ?? 0) + deltaY;
+                updateNodeStore(groupToMove.id, { left: newLeft, top: newTop }, { recordHistory: false, skipLayoutRecalc: true });
+                commitHistoryStore();
+                if (isActiveSelection && activeObj instanceof fabric__namespace.ActiveSelection) {
+                  skipSelectionClearOnDiscardRef.current = true;
+                  fabricCanvas.discardActiveObject();
+                }
+                const stateAfter = useEditorStore.getState();
+                const pageAfter = stateAfter.canvas.pages.find((p) => p.id === pageId);
+                const pageChildrenAfter = (pageAfter == null ? void 0 : pageAfter.children) ?? [];
+                for (const obj of activeObjects) {
+                  const objId = getObjectId(obj);
+                  if (!objId || objId === "__background__") continue;
+                  const node = findNodeById(pageChildrenAfter, objId);
+                  if (node) {
+                    const abs = getAbsoluteBounds(node, pageChildrenAfter);
+                    const w = (obj.width ?? 0) * (obj.scaleX ?? 1);
+                    const h = (obj.height ?? 0) * (obj.scaleY ?? 1);
+                    const nextLeft = obj.originX === "center" ? abs.left + w / 2 : abs.left;
+                    const nextTop = obj.originY === "center" ? abs.top + h / 2 : abs.top;
+                    obj.set({ left: nextLeft, top: nextTop });
+                    obj.setCoords();
                   }
-                  fabricCanvas.requestRenderAll();
-                  elementsRef.current = getCurrentElements();
-                  for (const obj of activeObjects) {
-                    const objId = getObjectId(obj);
-                    if (objId && objId !== "__background__") {
-                      justModifiedIdsRef.current.add(objId);
-                      modifiedIdsThisRound.add(objId);
-                    }
+                }
+                if (isActiveSelection && activeObjects.length > 0) {
+                  const selection = new fabric__namespace.ActiveSelection([...activeObjects], { canvas: fabricCanvas });
+                  fabricCanvas.setActiveObject(selection);
+                  skipSelectionClearOnDiscardRef.current = false;
+                }
+                fabricCanvas.requestRenderAll();
+                elementsRef.current = getCurrentElements();
+                for (const obj of activeObjects) {
+                  const objId = getObjectId(obj);
+                  if (objId && objId !== "__background__") {
+                    justModifiedIdsRef.current.add(objId);
+                    modifiedIdsThisRound.add(objId);
                   }
-                  setTimeout(() => modifiedIdsThisRound.forEach((id) => justModifiedIdsRef.current.delete(id)), 150);
-                  unlockEditsSoon();
-                  return;
                 }
+                setTimeout(() => modifiedIdsThisRound.forEach((id) => justModifiedIdsRef.current.delete(id)), 150);
+                unlockEditsSoon();
+                return;
               }
             }
           }
@@ -6109,9 +6894,13 @@ const PageCanvas = react.forwardRef(
                 finalScaleX = 1;
                 finalScaleY = 1;
                 obj.set({ scaleX: 1, scaleY: 1 });
-                updateCoverLayout(obj);
-                obj.__lastResizeHandle = null;
-                fabricCanvas.setActiveObject(obj);
+                if (!isActiveSelection) {
+                  updateCoverLayout(obj);
+                  obj.__lastResizeHandle = null;
+                  fabricCanvas.setActiveObject(obj);
+                } else {
+                  obj.__lastResizeHandle = null;
+                }
               }
             } else if (obj instanceof fabric__namespace.FabricImage) {
               if ((sourceElement == null ? void 0 : sourceElement.smartElementType) && sourceElement.smartProps) {
@@ -6254,6 +7043,13 @@ const PageCanvas = react.forwardRef(
       fabricCanvas.on("mouse:dblclick", (e) => {
         if (!isActiveRef.current || !allowEditing) return;
         let target = e.target;
+        if (target && target instanceof fabric__namespace.Group && target.__cropGroup) {
+          const ct = target.__cropData;
+          if ((ct == null ? void 0 : ct._img) && !isCropGroupInCropMode(target)) {
+            enterCropMode(target);
+            return;
+          }
+        }
         if (!target || !(target instanceof fabric__namespace.Textbox)) {
           const active = fabricCanvas.getActiveObject();
           if (active instanceof fabric__namespace.Textbox) target = active;
@@ -6446,9 +7242,9 @@ const PageCanvas = react.forwardRef(
         const activeId = activeBeforeSync ? getObjectId(activeBeforeSync) : null;
         const isActiveTextBeingEdited = activeId && editingTextIdRef.current === activeId && activeBeforeSync instanceof fabric__namespace.Textbox;
         if (!skipRestoreSelection && activeBeforeSync && activeStillOnCanvas && !isActiveTextBeingEdited) {
-          const isCropGroup = ((_d = activeBeforeSync._ct) == null ? void 0 : _d.isCropGroup) || activeBeforeSync.__cropGroup;
+          const isCropGroup2 = ((_d = activeBeforeSync._ct) == null ? void 0 : _d.isCropGroup) || activeBeforeSync.__cropGroup;
           const isSectionGroup = activeId && sectionGroupIds.has(activeId);
-          if ((isCropGroup || !shouldSkipUpdates2) && !isSectionGroup) {
+          if ((isCropGroup2 || !shouldSkipUpdates2) && !isSectionGroup) {
             fc.setActiveObject(activeBeforeSync);
           }
         }
@@ -6569,11 +7365,12 @@ const PageCanvas = react.forwardRef(
               const sourceUrlChanged = currentUrlNormalized !== storedUrlNormalized;
               const needsReload = sourceUrlChanged || colorMapChanged;
               const hasUrl = currentUrlNormalized !== "";
-              const isCropGroup = existingObj instanceof fabric__namespace.Group && existingObj.__cropGroup;
-              const isPlaceholder = existingObj instanceof fabric__namespace.Group && !isCropGroup || !(existingObj instanceof fabric__namespace.FabricImage);
+              const isCropGroup2 = existingObj instanceof fabric__namespace.Group && existingObj.__cropGroup;
+              const isPlaceholderGroup = isEmptyImagePlaceholderGroup(existingObj);
+              const isPlaceholder = isPlaceholderGroup || !(existingObj instanceof fabric__namespace.FabricImage) || existingObj instanceof fabric__namespace.Group && !isCropGroup2;
               const hadUrlBefore = storedImageUrl && String(storedImageUrl).trim() !== "";
               if (!hasUrl && hadUrlBefore) {
-                const placeholder = isCropGroup ? createImagePlaceholderForGroup(element) : createImagePlaceholder(element);
+                const placeholder = isCropGroup2 ? createImagePlaceholderForGroup(element) : createImagePlaceholder(element);
                 setObjectData(placeholder, element.id);
                 placeholder.__imageSrc = "";
                 const idx = fc.getObjects().indexOf(existingObj);
@@ -6589,13 +7386,13 @@ const PageCanvas = react.forwardRef(
               const imageFitForReplace = element.imageFit || ((_e = element.style) == null ? void 0 : _e.imageFit) || "cover";
               const clipShapeForReplace = element.clipShape ?? ((_f = element.style) == null ? void 0 : _f.imageFrameShape) ?? (isPreviewMode ? "rectangle" : "none");
               const needCropGroupForElement = imageFitForReplace !== "fill" || clipShapeForReplace && clipShapeForReplace !== "none";
-              const plainImageNeedsCropGroup = hasUrl && !isCropGroup && existingObj instanceof fabric__namespace.FabricImage && needCropGroupForElement;
+              const plainImageNeedsCropGroup = hasUrl && !isCropGroup2 && existingObj instanceof fabric__namespace.FabricImage && needCropGroupForElement;
               if (hasUrl && (needsReload || isPlaceholder || plainImageNeedsCropGroup)) {
                 if (needsReload && !isBeingTransformed && (!wasJustModified || sourceUrlChanged)) {
                   loadImageAsync(element, existingObj, fc);
                 } else if (plainImageNeedsCropGroup) {
                   loadImageAsync(element, existingObj, fc);
-                } else if (!needsReload && isCropGroup) {
+                } else if (!needsReload && isCropGroup2) {
                   const ct = existingObj.__cropData;
                   if (ct) {
                     const resolvedCrop = pageTree.length > 0 ? getNodeBounds(element, pageTree) : { width: typeof element.width === "number" ? element.width : 200, height: typeof element.height === "number" ? element.height : 50 };
@@ -6641,6 +7438,22 @@ const PageCanvas = react.forwardRef(
                     existingObj.set({ opacity: clampedOpacity });
                     existingObj.set({ width: ct.frameW, height: ct.frameH });
                     existingObj.set({ backgroundColor: "transparent" });
+                    const liveMask = existingObj.clipPath;
+                    const liveMaskUrl = existingObj.__svgMaskUrl;
+                    const liveMaskType = existingObj.__svgMaskType;
+                    const schemaMaskUrl = element.maskSvgUrl;
+                    const schemaMaskType = element.maskType || "shape";
+                    if (liveMask && liveMask.__svgMask && !schemaMaskUrl) {
+                      existingObj.clipPath = void 0;
+                      delete existingObj.__svgMaskUrl;
+                      delete existingObj.__svgMaskType;
+                      existingObj.dirty = true;
+                    } else if (schemaMaskUrl && (schemaMaskUrl !== liveMaskUrl || schemaMaskType !== liveMaskType)) {
+                      Promise.resolve().then(() => svgMaskApply).then(({ applyMaskToCropGroup: applyMaskToCropGroup2 }) => {
+                        applyMaskToCropGroup2(existingObj, schemaMaskUrl, schemaMaskType).catch(() => {
+                        });
+                      });
+                    }
                     if (shapeChanged) {
                       const needsNewClipPath = !existingObj.clipPath || newShape === "circle" && !(existingObj.clipPath instanceof fabric__namespace.Ellipse) || newShape !== "circle" && !(existingObj.clipPath instanceof fabric__namespace.Rect);
                       if (needsNewClipPath) {
@@ -6677,11 +7490,7 @@ const PageCanvas = react.forwardRef(
                     }
                     updateCoverLayout(existingObj);
                     if (allowEditing) {
-                      if (element.useCropHandles) {
-                        installCanvaMaskControls(existingObj);
-                      } else {
-                        setSimpleScaleControls(existingObj);
-                      }
+                      installCanvaMaskControls(existingObj);
                     } else {
                       existingObj.set({
                         hasControls: false,
@@ -6730,6 +7539,45 @@ const PageCanvas = react.forwardRef(
                 }
                 placeholder.__imageSrc = void 0;
               } else if (!isBeingTransformed && !isBeingTextEdited && !shouldSkipUpdates2) {
+                if (isPlaceholderGroup) {
+                  const storePosImg = pageChildren ? (() => {
+                    const node = findNodeById(pageChildren, element.id);
+                    return node ? getAbsoluteBounds(node, pageChildren) : { left: element.left ?? 0, top: element.top ?? 0 };
+                  })() : { left: element.left ?? 0, top: element.top ?? 0 };
+                  const resolvedSizeImg = (pageChildren == null ? void 0 : pageChildren.length) ? getNodeBounds(element, pageChildren) : { width: typeof element.width === "number" ? element.width : 200, height: typeof element.height === "number" ? element.height : 50 };
+                  const hasExplicitSize = typeof element.width === "number" && Number.isFinite(element.width) && element.width > 0 && typeof element.height === "number" && Number.isFinite(element.height) && element.height > 0;
+                  const minVisiblePlaceholder = hasExplicitSize ? 1 : 20;
+                  const nextWidth = Math.max(minVisiblePlaceholder, Number(resolvedSizeImg.width) || 200);
+                  const nextHeight = Math.max(minVisiblePlaceholder, Number(resolvedSizeImg.height) || 50);
+                  const isDynamicField = dynamicFieldIds.includes(element.id);
+                  const canBeEvented = isEditorMode || isPreviewMode && isDynamicField;
+                  updateEmptyPlaceholderLayout(existingObj, nextWidth, nextHeight);
+                  existingObj.set({
+                    left: storePosImg.left + nextWidth / 2,
+                    top: storePosImg.top + nextHeight / 2,
+                    originX: "center",
+                    originY: "center",
+                    angle: element.angle ?? 0,
+                    opacity: isHidden ? 0 : element.opacity ?? 1,
+                    flipX: element.flipX ?? false,
+                    flipY: element.flipY ?? false,
+                    selectable: allowSelection && !isHidden,
+                    evented: canBeEvented && !isHidden,
+                    hasControls: allowEditing && !isHidden,
+                    hasBorders: allowEditing && !isHidden,
+                    interactive: allowEditing && !isHidden,
+                    subTargetCheck: false,
+                    lockMovementX: !allowSelection,
+                    lockMovementY: !allowSelection,
+                    hoverCursor: isDynamicField && isPreviewMode ? "pointer" : void 0
+                  });
+                  if (allowEditing) {
+                    installCanvaMaskControls(existingObj);
+                  }
+                  existingObj.setCoords();
+                  fc.requestRenderAll();
+                  continue;
+                }
                 if (existingObj instanceof fabric__namespace.Group && existingObj.__cropGroup) {
                   existingObj.set({
                     flipX: element.flipX ?? false,
@@ -6904,7 +7752,14 @@ const PageCanvas = react.forwardRef(
                 const node = findNodeById(pageTree, element.id);
                 return node ? getAbsoluteBounds(node, pageTree) : { left: element.left ?? 0, top: element.top ?? 0 };
               })() : { left: element.left ?? 0, top: element.top ?? 0 };
-              placeholder.set({ left: absPosImg.left, top: absPosImg.top });
+              const placeholderWidth = Number((placeholder.width ?? 0) * (placeholder.scaleX ?? 1));
+              const placeholderHeight = Number((placeholder.height ?? 0) * (placeholder.scaleY ?? 1));
+              placeholder.set({
+                left: absPosImg.left + placeholderWidth / 2,
+                top: absPosImg.top + placeholderHeight / 2,
+                originX: "center",
+                originY: "center"
+              });
               placeholder.setCoords();
               const imageUrl = element.src || element.imageUrl;
               placeholder.__imageSrc = imageUrl;
@@ -6997,8 +7852,8 @@ const PageCanvas = react.forwardRef(
         isRebuildingRef.current = false;
         fc.requestRenderAll();
         if (activeBeforeSync && fc.getObjects().includes(activeBeforeSync)) {
-          const isCropGroup = ((_i = activeBeforeSync._ct) == null ? void 0 : _i.isCropGroup) || activeBeforeSync.__cropGroup;
-          if (isCropGroup) {
+          const isCropGroup2 = ((_i = activeBeforeSync._ct) == null ? void 0 : _i.isCropGroup) || activeBeforeSync.__cropGroup;
+          if (isCropGroup2) {
             fc.setActiveObject(activeBeforeSync);
             fc.requestRenderAll();
           }
@@ -7425,11 +8280,7 @@ const PageCanvas = react.forwardRef(
             obj.clipPath.dirty = true;
             obj.clipPath.setCoords();
           }
-          if (element == null ? void 0 : element.useCropHandles) {
-            installCanvaMaskControls(obj);
-          } else {
-            setSimpleScaleControls(obj);
-          }
+          installCanvaMaskControls(obj);
           obj.set({
             selectable: true,
             evented: true,
@@ -8204,11 +9055,7 @@ const PageCanvas = react.forwardRef(
               evented: canBeEvented && !isHidden
             });
           } else {
-            if (element.useCropHandles) {
-              installCanvaMaskControls(cropGroup);
-            } else {
-              setSimpleScaleControls(cropGroup);
-            }
+            installCanvaMaskControls(cropGroup);
           }
           const cropImg = (_l = cropGroup.__cropData) == null ? void 0 : _l._img;
           if (cropImg) {
@@ -8228,6 +9075,16 @@ const PageCanvas = react.forwardRef(
               useEditorStore.getState().updateElement(element.id, { imageNaturalWidth: nw, imageNaturalHeight: nh }, { recordHistory: false });
             }
           }
+          const persistedMaskUrl = element.maskSvgUrl;
+          if (persistedMaskUrl && typeof persistedMaskUrl === "string") {
+            try {
+              const { applyMaskToCropGroup: applyMaskToCropGroup2 } = await Promise.resolve().then(() => svgMaskApply);
+              const persistedMaskType = element.maskType || "shape";
+              await applyMaskToCropGroup2(cropGroup, persistedMaskUrl, persistedMaskType);
+            } catch (err) {
+              console.warn("[mask] failed to re-apply persisted mask", err);
+            }
+          }
           finalObject = cropGroup;
         } else {
           const isHiddenFill = !element.visible;
@@ -10516,11 +11373,11 @@ async function resolveTemplateData(options) {
 }
 async function resolveFromForm(options) {
   var _a, _b, _c;
-  const { templateId, formSchemaId, sectionState, themeId, supabaseUrl, supabaseAnonKey } = options;
+  const { templateId, formSchemaId, sectionState, themeId, supabaseUrl, supabaseAnonKey, prefetched } = options;
   const [templateRow, formSchemaRow, defaultForm] = await Promise.all([
-    fetchRow(supabaseUrl, supabaseAnonKey, "templates", templateId),
-    fetchRow(supabaseUrl, supabaseAnonKey, "form_schemas", formSchemaId),
-    fetchDefaultForm(supabaseUrl, supabaseAnonKey, formSchemaId)
+    (prefetched == null ? void 0 : prefetched.templateRow) ? Promise.resolve(prefetched.templateRow) : fetchRow(supabaseUrl, supabaseAnonKey, "templates", templateId),
+    (prefetched == null ? void 0 : prefetched.formSchemaRow) !== void 0 ? Promise.resolve(prefetched.formSchemaRow) : fetchRow(supabaseUrl, supabaseAnonKey, "form_schemas", formSchemaId),
+    (prefetched == null ? void 0 : prefetched.defaultForm) !== void 0 ? Promise.resolve(prefetched.defaultForm) : fetchDefaultForm(supabaseUrl, supabaseAnonKey, formSchemaId)
   ]);
   const templateConfig = templateRow.config;
   const templateFormSchema = templateRow.form_schema;
@@ -11133,14 +11990,15 @@ class PixldocsRenderer {
    * This is the primary external API for the package.
    */
   async renderFromForm(options) {
-    const { templateId, formSchemaId, sectionState, themeId, watermark, ...renderOpts } = options;
+    const { templateId, formSchemaId, sectionState, themeId, watermark, prefetched, ...renderOpts } = options;
     const resolved = await resolveFromForm({
       templateId,
       formSchemaId,
       sectionState,
       themeId,
       supabaseUrl: this.config.supabaseUrl,
-      supabaseAnonKey: this.config.supabaseAnonKey
+      supabaseAnonKey: this.config.supabaseAnonKey,
+      prefetched
     });
     const shouldWatermark = watermark ?? resolved.price > 0;
     let configToRender = resolved.config;
@@ -11185,14 +12043,15 @@ class PixldocsRenderer {
    * Resolve from V2 sectionState and return SVGs for all pages (for server vector PDF).
    */
   async renderSvgsFromForm(options) {
-    const { templateId, formSchemaId, sectionState, themeId, watermark } = options;
+    const { templateId, formSchemaId, sectionState, themeId, watermark, prefetched } = options;
     const resolved = await resolveFromForm({
       templateId,
       formSchemaId,
       sectionState,
       themeId,
       supabaseUrl: this.config.supabaseUrl,
-      supabaseAnonKey: this.config.supabaseAnonKey
+      supabaseAnonKey: this.config.supabaseAnonKey,
+      prefetched
     });
     const shouldWatermark = watermark ?? resolved.price > 0;
     let configToRender = resolved.config;
@@ -11216,14 +12075,15 @@ class PixldocsRenderer {
    * This is the primary PDF export API — mirrors renderFromForm() but returns a PDF.
    */
   async renderPdfFromForm(options) {
-    const { templateId, formSchemaId, sectionState, themeId, watermark, title, fontBaseUrl } = options;
+    const { templateId, formSchemaId, sectionState, themeId, watermark, prefetched, title, fontBaseUrl } = options;
     const resolved = await resolveFromForm({
       templateId,
       formSchemaId,
       sectionState,
       themeId,
       supabaseUrl: this.config.supabaseUrl,
-      supabaseAnonKey: this.config.supabaseAnonKey
+      supabaseAnonKey: this.config.supabaseAnonKey,
+      prefetched
     });
     const shouldWatermark = watermark ?? resolved.price > 0;
     let configToRender = resolved.config;