@snowcone-app/canvas 0.27.0 → 0.28.0

package/dist/{CanvasRenderer-yszzrDfo.js → CanvasRenderer-B_3GISlW.js}

@@ -1,7 +1,7 @@
-import { X as te, Y as ee, ar as tt, Z as zt, aE as ne, aC as se, av as Vt, aB as oe, au as ht, aF as ie, aG as Ft, aH as ae, aI as re, c as $t, aJ as le, aK as he, aL as ce, aM as de, a4 as jt, a0 as qt, a6 as ft, a1 as Ut, a2 as Ht, a5 as fe, a8 as ge, aN as Ot, aO as ue, aP as pe, aQ as ye, I as be, aR as Se, aS as me, aT as Q } from "./FontAnalyzer-EF3gLPr8.js";
-import { T as Bt, a as Te, u as ve, K as we, z as kt, L as Yt, M as Ce, N as Me, O as xe } from "./ExportManager-BTcyj4cf.js";
-import { i as Lt, a as Re } from "./guards-DIX8aXWM.js";
-const it = {
+import { X as te, Y as ee, ar as et, Z as zt, aE as ne, aC as se, av as Vt, aB as oe, au as dt, aF as ie, aG as Ft, aH as ae, aI as re, c as $t, aJ as le, aK as he, aL as ce, aM as de, a4 as jt, a0 as qt, a6 as gt, a1 as Ut, a2 as Ht, a5 as fe, a8 as ge, aN as Ot, aO as ue, aP as pe, aQ as ye, I as be, aR as Se, aS as me, aT as tt } from "./FontAnalyzer-PE6nysqE.js";
+import { T as Bt, a as Te, u as we, K as ve, z as kt, L as Yt, M as Me, N as xe, O as Ce } from "./ExportManager-J2xK86uq.js";
+import { i as Lt, a as Re } from "./guards-BlbhM5MX.js";
+const rt = {
   // Canvas-specific
   canvas: {
     snapThreshold: 8,
@@ -15,30 +15,30 @@ const it = {
     spacingLabelFontSize: 11,
     spacingLabelFontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
   }
-}, ke = 2, Mt = 6, Pe = 16, Ae = 5, Ee = 5, Zt = 0.5;
-function Gt(M) {
-  return ke / M;
+}, ke = 2, xt = 6, Pe = 16, Ae = 5, Ee = 5, Zt = 0.5;
+function Gt(v) {
+  return ke / v;
 }
-function Fe(M) {
-  return Mt / M;
+function Ne(v) {
+  return xt / v;
 }
-function Ie(M) {
-  return Pe / M;
+function Ie(v) {
+  return Pe / v;
 }
-function Oe(M) {
-  return [Ae / M, Ee / M];
+function Ke(v) {
+  return [Ae / v, Ee / v];
 }
-function He(M, t, e, o) {
-  M.save();
-  const n = Zt / o;
-  M.translate(t, e), M.scale(n, n), M.strokeStyle = "#000", M.lineWidth = 1.5, M.lineCap = "round", M.lineJoin = "round", M.translate(-12, -12), M.beginPath(), M.moveTo(21, 12), M.arc(12, 12, 9, 0, -Math.PI / 2, !0), M.bezierCurveTo(3.5, 4.5, 4, 6, 3, 8), M.stroke(), M.beginPath(), M.moveTo(3, 3), M.lineTo(3, 8), M.lineTo(8, 8), M.stroke(), M.beginPath(), M.moveTo(3, 12), M.arc(12, 12, 9, Math.PI, Math.PI / 2, !0), M.bezierCurveTo(20.5, 19.5, 20, 18, 21, 16), M.stroke(), M.beginPath(), M.moveTo(16, 16), M.lineTo(21, 16), M.lineTo(21, 21), M.stroke(), M.restore();
+function He(v, t, e, s) {
+  v.save();
+  const n = Zt / s;
+  v.translate(t, e), v.scale(n, n), v.strokeStyle = "#000", v.lineWidth = 1.5, v.lineCap = "round", v.lineJoin = "round", v.translate(-12, -12), v.beginPath(), v.moveTo(21, 12), v.arc(12, 12, 9, 0, -Math.PI / 2, !0), v.bezierCurveTo(3.5, 4.5, 4, 6, 3, 8), v.stroke(), v.beginPath(), v.moveTo(3, 3), v.lineTo(3, 8), v.lineTo(8, 8), v.stroke(), v.beginPath(), v.moveTo(3, 12), v.arc(12, 12, 9, Math.PI, Math.PI / 2, !0), v.bezierCurveTo(20.5, 19.5, 20, 18, 21, 16), v.stroke(), v.beginPath(), v.moveTo(16, 16), v.lineTo(21, 16), v.lineTo(21, 21), v.stroke(), v.restore();
 }
-function Ye(M, t, e, o = 1, n = "#3b82f6", s = !1) {
-  const i = Ie(o);
-  M.save(), M.fillStyle = "#fff", M.strokeStyle = n, M.lineWidth = s ? Gt(o) * 1.25 : Gt(o), M.beginPath(), M.arc(t, e, i, 0, Math.PI * 2), M.fill(), M.stroke(), He(M, t, e, o), M.restore();
+function $e(v, t, e, s = 1, n = "#3b82f6", o = !1) {
+  const i = Ie(s);
+  v.save(), v.fillStyle = "#fff", v.strokeStyle = n, v.lineWidth = o ? Gt(s) * 1.25 : Gt(s), v.beginPath(), v.arc(t, e, i, 0, Math.PI * 2), v.fill(), v.stroke(), He(v, t, e, s), v.restore();
 }
-const Xt = Mt * 2;
-class Ge {
+const Xt = xt * 2;
+class je {
   constructor() {
     this.resizeHandles = [], this.rotationHandle = null, this.elementRotation = 0, this.rotationAnchor = { x: 0, y: 0 };
   }
@@ -48,18 +48,18 @@ class Ge {
    * @param zoom - Current zoom level (used to maintain consistent rotation handle distance in screen space)
    */
   update(t, e = 1) {
-    const n = "isCropping" in t && t.isCropping ? t.getBoundingBox() : t.getVisualBoundingBox(), s = t.getRotationAnchor(), i = t.getEnabledAnchors();
-    this.elementRotation = t.rotation, this.rotationAnchor = s;
-    const a = it.canvas.selectionPadding, r = {
+    const n = "isCropping" in t && t.isCropping ? t.getBoundingBox() : t.getVisualBoundingBox(), o = t.getRotationAnchor(), i = t.getEnabledAnchors();
+    this.elementRotation = t.rotation, this.rotationAnchor = o;
+    const a = rt.canvas.selectionPadding, r = {
       x: n.x - a,
       y: n.y - a,
       width: n.width + a * 2,
       height: n.height + a * 2
-    }, l = te(r, t.rotation, s), h = Math.abs(t.rotation % 360) > 0.1;
+    }, l = te(r, t.rotation, o), h = Math.abs(t.rotation % 360) > 0.1;
     this.resizeHandles = l.filter((c) => !(!i.includes(c.anchor) || h && c.anchor.includes("middle"))), this.rotationHandle = ee(
       r,
       t.rotation,
-      s,
+      o,
       e
     );
   }
@@ -67,67 +67,67 @@ class Ge {
    * Render all handles
    * @param renderRotationInCanvas - If false, skip canvas rendering of rotation handle (for React-based rendering)
    */
-  render(t, e = !0, o = 0, n = !1, s = !1, i = null, a = !1, r = null, l = 1, h = !0) {
+  render(t, e = !0, s = 0, n = !1, o = !1, i = null, a = !1, r = null, l = 1, h = !0) {
     this.resizeHandles.forEach((c) => {
       if (a && r && c.anchor !== r.anchor)
         return;
-      const d = !!(i && i.anchor === c.anchor), u = !!(a && r && r.anchor === c.anchor);
-      this.renderResizeHandle(t, c, d, u, l);
-    }), h && e && this.rotationHandle && !n && !a && this.renderRotationHandle(t, this.rotationHandle, s, l), h && e && this.rotationHandle && n && this.renderRotationTooltip(t, this.rotationHandle, o, l);
+      const d = !!(i && i.anchor === c.anchor), f = !!(a && r && r.anchor === c.anchor);
+      this.renderResizeHandle(t, c, d, f, l);
+    }), h && e && this.rotationHandle && !n && !a && this.renderRotationHandle(t, this.rotationHandle, o, l), h && e && this.rotationHandle && n && this.renderRotationTooltip(t, this.rotationHandle, s, l);
   }
   /**
    * Render a single resize handle
    * Corner handles are circles, side handles are rounded rectangles
    */
-  renderResizeHandle(t, e, o = !1, n = !1, s = 1) {
+  renderResizeHandle(t, e, s = !1, n = !1, o = 1) {
     t.save();
-    const i = e.x * s, a = e.y * s;
+    const i = e.x * o, a = e.y * o;
     if (e.anchor.includes("middle")) {
       const l = e.anchor === "middle-top" || e.anchor === "middle-bottom";
       t.translate(i, a), t.rotate(-this.elementRotation * Math.PI / 180), l && t.rotate(Math.PI / 2), t.translate(-i, -a);
-      const h = Xt * 0.6, c = Xt * 1.4, d = h / 2, u = i - h / 2, p = a - c / 2;
-      t.fillStyle = "#fff", t.strokeStyle = tt(t.canvas), t.lineWidth = o || n ? 2.5 : 2, t.beginPath(), t.roundRect(u, p, h, c, d), t.fill(), t.stroke();
+      const h = Xt * 0.6, c = Xt * 1.4, d = h / 2, f = i - h / 2, p = a - c / 2;
+      t.fillStyle = "#fff", t.strokeStyle = et(t.canvas), t.lineWidth = s || n ? 2.5 : 2, t.beginPath(), t.roundRect(f, p, h, c, d), t.fill(), t.stroke();
     } else
-      t.fillStyle = "#fff", t.strokeStyle = tt(t.canvas), t.lineWidth = o || n ? 2.5 : 2, t.beginPath(), t.arc(i, a, Mt, 0, Math.PI * 2), t.fill(), t.stroke();
+      t.fillStyle = "#fff", t.strokeStyle = et(t.canvas), t.lineWidth = s || n ? 2.5 : 2, t.beginPath(), t.arc(i, a, xt, 0, Math.PI * 2), t.fill(), t.stroke();
     t.restore();
   }
   /**
    * Render the rotation handle (with refresh-ccw icon)
    * Works in screen space (positions multiplied by zoom, fixed pixel sizes)
    */
-  renderRotationHandle(t, e, o = !1, n = 1) {
+  renderRotationHandle(t, e, s = !1, n = 1) {
     t.save();
-    const s = e.x * n, i = e.y * n, a = Mt * 2.67;
-    t.fillStyle = "#fff", t.strokeStyle = tt(t.canvas), t.lineWidth = o ? 2.5 : 2, t.beginPath(), t.arc(s, i, a, 0, Math.PI * 2), t.fill(), t.stroke();
+    const o = e.x * n, i = e.y * n, a = xt * 2.67;
+    t.fillStyle = "#fff", t.strokeStyle = et(t.canvas), t.lineWidth = s ? 2.5 : 2, t.beginPath(), t.arc(o, i, a, 0, Math.PI * 2), t.fill(), t.stroke();
     const r = Zt;
-    t.translate(s, i), t.scale(r, r), t.strokeStyle = "#000", t.lineWidth = 1.5, t.lineCap = "round", t.lineJoin = "round", t.translate(-12, -12), t.beginPath(), t.moveTo(21, 12), t.arc(12, 12, 9, 0, -Math.PI / 2, !0), t.bezierCurveTo(3.5, 4.5, 4, 6, 3, 8), t.stroke(), t.beginPath(), t.moveTo(3, 3), t.lineTo(3, 8), t.lineTo(8, 8), t.stroke(), t.beginPath(), t.moveTo(3, 12), t.arc(12, 12, 9, Math.PI, Math.PI / 2, !0), t.bezierCurveTo(20.5, 19.5, 20, 18, 21, 16), t.stroke(), t.beginPath(), t.moveTo(16, 16), t.lineTo(21, 16), t.lineTo(21, 21), t.stroke(), t.restore();
+    t.translate(o, i), t.scale(r, r), t.strokeStyle = "#000", t.lineWidth = 1.5, t.lineCap = "round", t.lineJoin = "round", t.translate(-12, -12), t.beginPath(), t.moveTo(21, 12), t.arc(12, 12, 9, 0, -Math.PI / 2, !0), t.bezierCurveTo(3.5, 4.5, 4, 6, 3, 8), t.stroke(), t.beginPath(), t.moveTo(3, 3), t.lineTo(3, 8), t.lineTo(8, 8), t.stroke(), t.beginPath(), t.moveTo(3, 12), t.arc(12, 12, 9, Math.PI, Math.PI / 2, !0), t.bezierCurveTo(20.5, 19.5, 20, 18, 21, 16), t.stroke(), t.beginPath(), t.moveTo(16, 16), t.lineTo(21, 16), t.lineTo(21, 21), t.stroke(), t.restore();
   }
   /**
    * Render rotation tooltip (angle display while rotating)
    */
-  renderRotationTooltip(t, e, o, n = 1) {
+  renderRotationTooltip(t, e, s, n = 1) {
     t.save();
-    const s = `${Math.round(o)}°`, i = s.length * 8 + 12, a = 22, r = e.x * n, l = e.y * n - 35;
-    t.shadowColor = "rgba(0,0,0,0.3)", t.shadowBlur = 3, t.shadowOffsetY = 1, t.fillStyle = "#333", t.beginPath(), t.roundRect(r - i / 2, l, i, a, 3), t.fill(), t.shadowColor = "transparent", t.shadowBlur = 0, t.shadowOffsetY = 0, t.fillStyle = "#fff", t.font = "12px Arial", t.textAlign = "center", t.textBaseline = "middle", t.fillText(s, r, l + a / 2), t.restore();
+    const o = `${Math.round(s)}°`, i = o.length * 8 + 12, a = 22, r = e.x * n, l = e.y * n - 35;
+    t.shadowColor = "rgba(0,0,0,0.3)", t.shadowBlur = 3, t.shadowOffsetY = 1, t.fillStyle = "#333", t.beginPath(), t.roundRect(r - i / 2, l, i, a, 3), t.fill(), t.shadowColor = "transparent", t.shadowBlur = 0, t.shadowOffsetY = 0, t.fillStyle = "#fff", t.font = "12px Arial", t.textAlign = "center", t.textBaseline = "middle", t.fillText(o, r, l + a / 2), t.restore();
   }
   /**
    * Test if a point hits any resize handle
    * @param zoom - Current zoom level (radius scales inversely with zoom)
    */
-  hitTestResize(t, e, o = 1) {
-    const n = se / o;
-    for (const s of this.resizeHandles)
-      if (zt(t, e, s.x, s.y, n))
-        return s;
+  hitTestResize(t, e, s = 1) {
+    const n = se / s;
+    for (const o of this.resizeHandles)
+      if (zt(t, e, o.x, o.y, n))
+        return o;
     return null;
   }
   /**
    * Test if a point hits the rotation handle
    * @param zoom - Current zoom level (radius scales inversely with zoom)
    */
-  hitTestRotation(t, e, o = 1) {
+  hitTestRotation(t, e, s = 1) {
     if (!this.rotationHandle) return !1;
-    const n = (Mt * 2.67 + 2) / o;
+    const n = (xt * 2.67 + 2) / s;
     return zt(t, e, this.rotationHandle.x, this.rotationHandle.y, n);
   }
   /**
@@ -142,86 +142,127 @@ class Ge {
    * @param rotation - Element rotation in degrees
    */
   getCursor(t, e) {
-    const o = t.anchor.includes("middle") ? "edge" : "corner";
+    const s = t.anchor.includes("middle") ? "edge" : "corner";
     return ne(
       t.x,
       t.y,
       this.rotationAnchor.x,
       this.rotationAnchor.y,
-      o,
+      s,
       e,
       t.anchor
     );
   }
 }
-class Be {
+const Be = 15;
+function Le(v, t) {
+  return Math.abs(v) >= Math.abs(t) ? "x" : "y";
+}
+function We(v, t, e) {
+  return e != null && e.shift ? Le(v, t) === "x" ? { dx: v, dy: 0, lockedAxis: "y" } : { dx: 0, dy: t, lockedAxis: "x" } : { dx: v, dy: t, lockedAxis: null };
+}
+function De(v, t = Be) {
+  let s = (Math.round(v / t) * t % 360 + 360) % 360;
+  return s > 180 && (s -= 360), s === 0 ? 0 : s;
+}
+function _e({
+  anchor: v,
+  startVisualWidth: t,
+  startVisualHeight: e,
+  newVisualWidth: s,
+  newVisualHeight: n
+}) {
+  const o = t !== 0 ? t : 1, i = e !== 0 ? e : 1, a = s / o, r = n / i;
+  let l;
+  return v === "middle-left" || v === "middle-right" ? l = a : v === "middle-top" || v === "middle-bottom" ? l = r : l = Math.abs(a - 1) >= Math.abs(r - 1) ? a : r, {
+    scale: l,
+    newVisualWidth: t * l,
+    newVisualHeight: e * l
+  };
+}
+class ze {
   /**
    * Calculate new dimensions and position for a resize operation
    */
   static calculateResize({
     element: t,
     handle: e,
-    dx: o,
+    dx: s,
     dy: n,
-    startData: s,
-    snapSystem: i
+    startData: o,
+    snapSystem: i,
+    modifiers: a
   }) {
-    var B, L, W, O, D;
-    const r = new Vt(t).worldDeltaToLocal(o, n), l = r.dx, h = r.dy, c = s.visualWidth ?? s.width ?? 0, d = s.visualHeight ?? s.height ?? 0, u = s.width ?? 0, p = s.height ?? 0;
-    let b = c, g = d;
-    e.anchor.includes("right") ? b = c + l : e.anchor.includes("left") && (b = c - l), e.anchor !== "middle-left" && e.anchor !== "middle-right" && (e.anchor.includes("bottom") ? g = d + h : e.anchor.includes("top") && (g = d - h));
-    let f, y;
-    if (e.anchor === "middle-left" || e.anchor === "middle-right") {
-      const F = b - c;
-      f = u + F, y = p;
+    var O, D, Q, E, j;
+    const l = new Vt(t).worldDeltaToLocal(s, n), h = l.dx, c = l.dy, d = o.visualWidth ?? o.width ?? 0, f = o.visualHeight ?? o.height ?? 0, p = o.width ?? 0, b = o.height ?? 0;
+    let g = d, u = f;
+    e.anchor.includes("right") ? g = d + h : e.anchor.includes("left") && (g = d - h), e.anchor !== "middle-left" && e.anchor !== "middle-right" && (e.anchor.includes("bottom") ? u = f + c : e.anchor.includes("top") && (u = f - c));
+    const y = (a == null ? void 0 : a.shift) === !0;
+    let S = null;
+    if (y) {
+      const _ = _e({
+        anchor: e.anchor,
+        startVisualWidth: d,
+        startVisualHeight: f,
+        newVisualWidth: g,
+        newVisualHeight: u
+      });
+      S = _.scale, g = _.newVisualWidth, u = _.newVisualHeight;
+    }
+    let m, w;
+    if (S !== null)
+      m = p * S, w = b * S;
+    else if (e.anchor === "middle-left" || e.anchor === "middle-right") {
+      const _ = g - d;
+      m = p + _, w = b;
     } else if (e.anchor === "middle-top" || e.anchor === "middle-bottom") {
-      const F = g - d;
-      f = u, y = p + F;
+      const _ = u - f;
+      m = p, w = b + _;
     } else {
-      const F = b / c, E = g / d;
-      f = u * F, y = p * E;
+      const _ = g / d, $ = u / f;
+      m = p * _, w = b * $;
     }
-    const m = b, T = g;
-    let v = !1;
+    const T = g, C = u;
+    let R = !1;
     if (i && t.transformType === "image") {
-      const F = e.anchor ?? "", E = F === "top-left" || F === "top-right" || F === "bottom-left" || F === "bottom-right", $ = F.startsWith("crop-");
-      if (E && !$) {
-        const j = (B = i.activeSnaps) == null ? void 0 : B.x, J = (L = i.activeSnaps) == null ? void 0 : L.y;
-        if (!!j || !!J) {
-          const k = [j, J].find(
-            (I) => typeof I == "object" && I !== null && "frozenWidth" in I
+      const _ = e.anchor ?? "", $ = _ === "top-left" || _ === "top-right" || _ === "bottom-left" || _ === "bottom-right", Y = _.startsWith("crop-");
+      if ($ && !Y) {
+        const k = (O = i.activeSnaps) == null ? void 0 : O.x, H = (D = i.activeSnaps) == null ? void 0 : D.y;
+        if (!!k || !!H) {
+          const I = [k, H].find(
+            (z) => typeof z == "object" && z !== null && "frozenWidth" in z
           );
-          if (k) {
-            const I = t, _ = s.transformData, H = k.frozenWidth ?? ((W = I.transformData) == null ? void 0 : W.width) ?? u, V = I.imageAspectRatio || (_ != null && _.width && (_ != null && _.height) ? _.width / _.height : null);
-            let Y = k.frozenHeight;
-            Y == null && (V && V !== 0 ? Y = H / V : (O = I.transformData) != null && O.height ? Y = I.transformData.height : Y = p);
-            const at = u !== 0 ? H / u : 1, gt = p !== 0 ? Y / p : 1;
-            b = c * at, g = d * gt, f = H, y = Y, v = !0;
+          if (I) {
+            const z = t, G = o.transformData, st = I.frozenWidth ?? ((Q = z.transformData) == null ? void 0 : Q.width) ?? p, lt = z.imageAspectRatio || (G != null && G.width && (G != null && G.height) ? G.width / G.height : null);
+            let U = I.frozenHeight;
+            U == null && (lt && lt !== 0 ? U = st / lt : (E = z.transformData) != null && E.height ? U = z.transformData.height : U = b);
+            const F = p !== 0 ? st / p : 1, nt = b !== 0 ? U / b : 1;
+            g = d * F, u = f * nt, m = st, w = U, R = !0;
           }
         }
       }
     }
-    f = Math.max(50, f), y = Math.max(40, y);
-    const S = t.clone(), C = S.resize(e.anchor, f, y, s);
-    if (!e.anchor.includes("middle") && ((D = S.stroke) != null && D.enabled) && s.strokeWidth !== void 0 && s.strokeWidth > 0) {
-      const F = s.width ?? 1, E = s.height ?? 1, $ = Math.sqrt(f / F * (y / E)), j = Math.max(1, Math.round(s.strokeWidth * $ * 10) / 10);
-      S.stroke = { ...S.stroke, width: j };
+    m = Math.max(50, m), w = Math.max(40, w);
+    const x = t.clone(), P = x.resize(e.anchor, m, w, o);
+    if (!e.anchor.includes("middle") && ((j = x.stroke) != null && j.enabled) && o.strokeWidth !== void 0 && o.strokeWidth > 0) {
+      const _ = o.width ?? 1, $ = o.height ?? 1, Y = Math.sqrt(m / _ * (w / $)), k = Math.max(1, Math.round(o.strokeWidth * Y * 10) / 10);
+      x.stroke = { ...x.stroke, width: k };
     }
-    const x = v || C === !1, P = e.anchor.includes("top") || e.anchor.includes("bottom"), w = "isCropping" in S && S.isCropping, A = "isGroup" in S && S.isGroup;
-    if (P && !w && !A) {
-      const F = t.getRotationAnchor(), E = this._calculateFixedCornerOffset({
+    const A = R || P === !1, B = e.anchor.includes("top") || e.anchor.includes("bottom"), L = "isCropping" in x && x.isCropping, W = "isGroup" in x && x.isGroup;
+    if (B && !L && !W) {
+      const _ = t.getRotationAnchor(), $ = this._calculateFixedCornerOffset({
         element: t,
-        updatedElement: S,
+        updatedElement: x,
         handle: e,
-        rotationAnchor: F
+        rotationAnchor: _
       });
-      S.x += E.x, S.y += E.y;
+      x.x += $.x, x.y += $.y;
     }
     return {
-      element: S,
-      isFrozen: x,
+      element: x,
+      isFrozen: A,
       // For snap system to detect break-free: dimensions before freeze was applied
-      unfrozenDimensions: v ? { width: m, height: T } : void 0
+      unfrozenDimensions: R ? { width: T, height: C } : void 0
     };
   }
   /**
@@ -232,27 +273,27 @@ class Be {
   static _calculateFixedCornerOffset({
     element: t,
     updatedElement: e,
-    handle: o,
+    handle: s,
     rotationAnchor: n
   }) {
-    const s = new Vt(t), { cos: i, sin: a } = s.getRenderingCosSin(), r = t.getVisualBoundingBox(), l = e.getVisualBoundingBox(), h = n, c = e.getRotationAnchor(), d = this._getFixedLocalCoords(o.anchor, r.width, r.height), u = d.x, p = d.y, b = r.x - h.x, g = r.y - h.y, f = b + u, y = g + p, m = f * i - y * a, T = f * a + y * i, v = h.x + m, S = h.y + T, C = this._getFixedLocalCoords(o.anchor, l.width, l.height), R = C.x, x = C.y, P = l.x - c.x, w = l.y - c.y, A = P + R, B = w + x, L = A * i - B * a, W = A * a + B * i, O = c.x + L, D = c.y + W;
+    const o = new Vt(t), { cos: i, sin: a } = o.getRenderingCosSin(), r = t.getVisualBoundingBox(), l = e.getVisualBoundingBox(), h = n, c = e.getRotationAnchor(), d = this._getFixedLocalCoords(s.anchor, r.width, r.height), f = d.x, p = d.y, b = r.x - h.x, g = r.y - h.y, u = b + f, y = g + p, S = u * i - y * a, m = u * a + y * i, w = h.x + S, T = h.y + m, C = this._getFixedLocalCoords(s.anchor, l.width, l.height), R = C.x, x = C.y, P = l.x - c.x, M = l.y - c.y, A = P + R, B = M + x, L = A * i - B * a, W = A * a + B * i, O = c.x + L, D = c.y + W;
     return {
-      x: v - O,
-      y: S - D
+      x: w - O,
+      y: T - D
     };
   }
   /**
    * Get local coordinates of the fixed point for a given handle
    * @private
    */
-  static _getFixedLocalCoords(t, e, o) {
+  static _getFixedLocalCoords(t, e, s) {
     const n = { x: 0, y: 0 };
     switch (t) {
       case "top-left":
-        n.x = e, n.y = o;
+        n.x = e, n.y = s;
         break;
       case "top-right":
-        n.x = 0, n.y = o;
+        n.x = 0, n.y = s;
         break;
       case "bottom-left":
         n.x = e, n.y = 0;
@@ -261,13 +302,13 @@ class Be {
         n.x = 0, n.y = 0;
         break;
       case "middle-left":
-        n.x = e, n.y = o / 2;
+        n.x = e, n.y = s / 2;
         break;
       case "middle-right":
-        n.x = 0, n.y = o / 2;
+        n.x = 0, n.y = s / 2;
         break;
       case "middle-top":
-        n.x = e / 2, n.y = o;
+        n.x = e / 2, n.y = s;
         break;
       case "middle-bottom":
         n.x = e / 2, n.y = 0;
@@ -276,7 +317,7 @@ class Be {
     return n;
   }
 }
-class Le {
+class Ve {
   constructor() {
     this.hooks = {
       beforeResize: [],
@@ -300,8 +341,8 @@ class Le {
    */
   removeHook(t, e) {
     if (!this.hooks[t]) return;
-    const o = this.hooks[t].indexOf(e);
-    o !== -1 && this.hooks[t].splice(o, 1);
+    const s = this.hooks[t].indexOf(e);
+    s !== -1 && this.hooks[t].splice(s, 1);
   }
   /**
    * Clear all hooks at a stage
@@ -321,9 +362,9 @@ class Le {
    * Run hooks at a specific stage
    */
   runHooks(t, e) {
-    return this.hooks[t] ? this.hooks[t].reduce((o, n) => {
-      const s = n(o);
-      return s !== void 0 ? s : o;
+    return this.hooks[t] ? this.hooks[t].reduce((s, n) => {
+      const o = n(s);
+      return o !== void 0 ? o : s;
     }, e) : e;
   }
   /**
@@ -331,23 +372,24 @@ class Le {
    */
   executeResize(t) {
     const e = this.runHooks("beforeResize", t);
-    let o = Be.calculateResize({
+    let s = ze.calculateResize({
       ...e,
-      snapSystem: t.snapSystem
+      snapSystem: t.snapSystem,
+      modifiers: t.modifiers
     });
-    return o.handle = t.handle, o.startData = t.startData, o = this.runHooks("afterResize", o), o;
+    return s.handle = t.handle, s.startData = t.startData, s = this.runHooks("afterResize", s), s;
   }
   /**
    * Execute position update with hooks
    * Used for drag operations
    */
   executePositionUpdate(t, e) {
-    const o = this.runHooks("beforePositionUpdate", { position: t, element: e });
-    return this.runHooks("afterPositionUpdate", o).position;
+    const s = this.runHooks("beforePositionUpdate", { position: t, element: e });
+    return this.runHooks("afterPositionUpdate", s).position;
   }
 }
-const Xe = new Le();
-class Ne {
+const qe = new Ve();
+class Ue {
   constructor(t = null) {
     this.state = "IDLE", this.context = {
       mode: null,
@@ -391,14 +433,14 @@ class Ne {
   /**
    * Start drag operation
    */
-  startDrag(t, e, o, n = null) {
+  startDrag(t, e, s, n = null) {
     this.state = "DRAGGING";
-    const s = t.getTransformStartData();
-    let i = s;
+    const o = t.getTransformStartData();
+    let i = o;
     if (n === "crop-image-drag" && t.transformData) {
       const a = t.transformData;
       i = {
-        ...s,
+        ...o,
         cropX: a.cropX,
         cropY: a.cropY,
         cropWidth: a.cropWidth,
@@ -410,7 +452,7 @@ class Ne {
       dragMode: n,
       // 'crop-image-drag' for moving image within crop, null for normal drag
       startX: e,
-      startY: o,
+      startY: s,
       startData: i,
       activeHandle: null,
       element: t
@@ -431,27 +473,34 @@ class Ne {
   /**
    * Update drag operation
    * Returns updated position { x, y }
-   */
-  updateDrag(t, e, o = null) {
+   *
+   * `modifiers.shift` axis-locks the drag to the dominant axis
+   * (re-evaluated each move). Alignment snapping still runs on the
+   * free axis; on the locked axis the position is clamped back to the
+   * gesture-start value AFTER snapping, so a snap can never move the
+   * element off the locked axis. Read modifiers from the CURRENT
+   * pointer event — users press/release Shift mid-gesture.
+   */
+  updateDrag(t, e, s = null, n) {
     if (this.state !== "DRAGGING")
       throw new Error("Cannot update drag: not in DRAGGING state");
-    const n = t - this.context.startX, s = e - this.context.startY, i = this.context.startData;
-    let a = i.x + n, r = i.y + s;
+    const o = t - this.context.startX, i = e - this.context.startY, { dx: a, dy: r, lockedAxis: l } = We(o, i, n), h = this.context.startData;
+    let c = h.x + a, d = h.y + r;
     if (this.snapHandler && this.snapHandler.snapPosition && this.context.element) {
-      const l = this.snapHandler.snapPosition({ x: a, y: r }, this.context.element, o);
-      a = l.x, r = l.y;
+      const f = this.snapHandler.snapPosition({ x: c, y: d }, this.context.element, s);
+      c = f.x, d = f.y;
     }
-    return { x: a, y: r };
+    return l === "x" ? c = h.x : l === "y" && (d = h.y), { x: c, y: d };
   }
   /**
    * Start resize operation
    */
-  startResize(t, e, o, n, s, i) {
+  startResize(t, e, s, n, o, i) {
     this.state = "RESIZING";
     const a = t.getTransformStartData(), r = t.clone();
     (e.anchor === "top-left" || e.anchor === "top-right" || e.anchor === "bottom-left" || e.anchor === "bottom-right") && a.lineCount !== void 0 && r.transformType === "custom" && (r._lockedLineCount = a.lineCount), this.context = {
       mode: "resize",
-      startX: o,
+      startX: s,
       startY: n,
       startData: {
         ...a,
@@ -459,8 +508,8 @@ class Ne {
         visualY: i.y,
         visualWidth: i.width,
         visualHeight: i.height,
-        bboxX: s.x,
-        bboxY: s.y
+        bboxX: o.x,
+        bboxY: o.y
       },
       activeHandle: e,
       element: r
@@ -474,8 +523,8 @@ class Ne {
   updateResize(t, e) {
     if (this.state !== "RESIZING")
       throw new Error("Cannot update resize: not in RESIZING state");
-    const o = t - this.context.startX, n = e - this.context.startY;
-    return { dx: o, dy: n };
+    const s = t - this.context.startX, n = e - this.context.startY;
+    return { dx: s, dy: n };
   }
   /**
    * Adjust the resize start position to account for snap corrections
@@ -507,16 +556,16 @@ class Ne {
    * Reset resize start data to current element state (for unfreezing)
    * This updates startData to use the current element dimensions, preventing jumps
    */
-  resetResizeStartData(t, e, o) {
+  resetResizeStartData(t, e, s) {
     if (this.state !== "RESIZING")
       return;
-    const n = t.getBoundingBox(), s = t.getVisualBoundingBox(), i = t.getTransformStartData();
-    this.context.startX = e, this.context.startY = o, this.context.startData = {
+    const n = t.getBoundingBox(), o = t.getVisualBoundingBox(), i = t.getTransformStartData();
+    this.context.startX = e, this.context.startY = s, this.context.startData = {
       ...i,
-      visualX: s.x,
-      visualY: s.y,
-      visualWidth: s.width,
-      visualHeight: s.height,
+      visualX: o.x,
+      visualY: o.y,
+      visualWidth: o.width,
+      visualHeight: o.height,
       bboxX: n.x,
       bboxY: n.y
     };
@@ -524,14 +573,14 @@ class Ne {
   /**
    * Start rotation operation
    */
-  startRotate(t, e, o, n, s) {
+  startRotate(t, e, s, n, o) {
     this.state = "ROTATING", this.context = {
       mode: "rotate",
       startX: e,
-      startY: o,
+      startY: s,
       startData: {
         startAngle: n,
-        currentRotation: s,
+        currentRotation: o,
         elementData: t.getTransformStartData()
       },
       activeHandle: null,
@@ -541,13 +590,19 @@ class Ne {
   /**
    * Update rotation operation
    * Returns updated rotation angle in degrees
+   *
+   * `modifiers.shift` snaps the result to 15° increments in stored
+   * (user-facing, sign-flipped — gotcha #15) degrees. The shift snap
+   * REPLACES the snapHandler's rotation snap while held: the 15° grid
+   * is a superset of the usual 0/90/180 magnets and must win
+   * deterministically. Read modifiers from the CURRENT pointer event.
    */
-  updateRotate(t, e, o, n) {
+  updateRotate(t, e, s, n, o) {
     if (this.state !== "ROTATING")
       throw new Error("Cannot update rotate: not in ROTATING state");
-    const s = this.context.startData, a = (oe(o, n, t, e) - s.startAngle) * 180 / Math.PI;
-    let r = s.currentRotation - a;
-    return r = (r % 360 + 360) % 360, r > 180 && (r -= 360), this.snapHandler && this.snapHandler.snapRotation && this.context.element ? this.snapHandler.snapRotation(r, this.context.element) : r;
+    const i = this.context.startData, r = (oe(s, n, t, e) - i.startAngle) * 180 / Math.PI;
+    let l = i.currentRotation - r;
+    return l = (l % 360 + 360) % 360, l > 180 && (l -= 360), o != null && o.shift ? De(l) : this.snapHandler && this.snapHandler.snapRotation && this.context.element ? this.snapHandler.snapRotation(l, this.context.element) : l;
   }
   /**
    * Get rotation context
@@ -569,12 +624,12 @@ class Ne {
    * frame. PinchHandler consumes both via `getPinchContext()` to
    * produce the next element.
    */
-  startPinch(t, e, o) {
+  startPinch(t, e, s) {
     this.state = "PINCHING";
     const n = {
-      x: (e.x + o.x) / 2,
-      y: (e.y + o.y) / 2
-    }, s = o.x - e.x, i = o.y - e.y, a = Math.hypot(s, i), r = Math.atan2(i, s), l = {
+      x: (e.x + s.x) / 2,
+      y: (e.y + s.y) / 2
+    }, o = s.x - e.x, i = s.y - e.y, a = Math.hypot(o, i), r = Math.atan2(i, o), l = {
       elementData: t.getTransformStartData(),
       startCentroid: n,
       startDistance: a,
@@ -605,14 +660,14 @@ class Ne {
   updatePinch(t, e) {
     if (this.state !== "PINCHING")
       throw new Error("Cannot update pinch: not in PINCHING state");
-    const o = this.context.startData, n = {
+    const s = this.context.startData, n = {
       x: (t.x + e.x) / 2,
       y: (t.y + e.y) / 2
-    }, s = e.x - t.x, i = e.y - t.y, a = Math.hypot(s, i), r = Math.atan2(i, s), l = Math.max(o.startDistance, 1e-4), h = a / l, c = Math.max(h, 0.05), d = r - o.startAngle;
+    }, o = e.x - t.x, i = e.y - t.y, a = Math.hypot(o, i), r = Math.atan2(i, o), l = Math.max(s.startDistance, 1e-4), h = a / l, c = Math.max(h, 0.05), d = r - s.startAngle;
     return {
       scale: c,
       rotationDelta: d,
-      startCentroid: o.startCentroid,
+      startCentroid: s.startCentroid,
       currentCentroid: n
     };
   }
@@ -681,7 +736,7 @@ class bt {
    * - 1 rotation anchor (may be same as center)
    */
   static getSnapAnchors(t) {
-    const e = t.getVisualBoundingBox(), o = {
+    const e = t.getVisualBoundingBox(), s = {
       // Corners
       topLeft: { x: e.x, y: e.y },
       topRight: { x: e.x + e.width, y: e.y },
@@ -698,17 +753,17 @@ class bt {
       rotation: this.resolve(t)
     };
     if (t.rotation !== 0) {
-      const n = o.rotation, s = ht.toRadiansInverse(t.rotation);
-      Object.keys(o).forEach((i) => {
+      const n = s.rotation, o = dt.toRadiansInverse(t.rotation);
+      Object.keys(s).forEach((i) => {
         if (i === "rotation") return;
-        const a = o[i], r = a.x - n.x, l = a.y - n.y, h = r * Math.cos(s) - l * Math.sin(s), c = r * Math.sin(s) + l * Math.cos(s);
-        o[i] = {
+        const a = s[i], r = a.x - n.x, l = a.y - n.y, h = r * Math.cos(o) - l * Math.sin(o), c = r * Math.sin(o) + l * Math.cos(o);
+        s[i] = {
           x: n.x + h,
           y: n.y + c
         };
       });
     }
-    return o;
+    return s;
   }
   /**
    * Get edge lines for an element (for edge-to-edge snapping)
@@ -762,11 +817,11 @@ class bt {
    * (different from center of visual bbox)
    */
   static hasCustomRotationAnchor(t) {
-    const e = t.getVisualBoundingBox(), o = {
+    const e = t.getVisualBoundingBox(), s = {
       x: e.x + e.width / 2,
       y: e.y + e.height / 2
-    }, n = this.resolve(t), s = 1e-3;
-    return Math.abs(n.x - o.x) > s || Math.abs(n.y - o.y) > s;
+    }, n = this.resolve(t), o = 1e-3;
+    return Math.abs(n.x - s.x) > o || Math.abs(n.y - s.y) > o;
   }
 }
 class Nt {
@@ -780,8 +835,8 @@ class Nt {
   /** Insert a point into the grid */
   insert(t) {
     const e = this.getCellKey(t.x, t.y);
-    let o = this.cells.get(e);
-    o || (o = /* @__PURE__ */ new Set(), this.cells.set(e, o)), o.add(t);
+    let s = this.cells.get(e);
+    s || (s = /* @__PURE__ */ new Set(), this.cells.set(e, s)), s.add(t);
     let n = this.idIndex.get(t.id);
     n || (n = /* @__PURE__ */ new Set(), this.idIndex.set(t.id, n)), n.add(e);
   }
@@ -789,12 +844,12 @@ class Nt {
   removeById(t) {
     const e = this.idIndex.get(t);
     if (e) {
-      for (const o of e) {
-        const n = this.cells.get(o);
+      for (const s of e) {
+        const n = this.cells.get(s);
         if (n) {
-          for (const s of n)
-            s.id === t && n.delete(s);
-          n.size === 0 && this.cells.delete(o);
+          for (const o of n)
+            o.id === t && n.delete(o);
+          n.size === 0 && this.cells.delete(s);
         }
       }
       this.idIndex.delete(t);
@@ -807,19 +862,19 @@ class Nt {
    * [x - radius, x + radius] x [y - radius, y + radius].
    * Each candidate is then distance-checked against the radius.
    */
-  queryNear(t, e, o, n) {
-    const s = [], i = Math.floor((t - o) / this.cellSize), a = Math.floor((t + o) / this.cellSize), r = Math.floor((e - o) / this.cellSize), l = Math.floor((e + o) / this.cellSize);
+  queryNear(t, e, s, n) {
+    const o = [], i = Math.floor((t - s) / this.cellSize), a = Math.floor((t + s) / this.cellSize), r = Math.floor((e - s) / this.cellSize), l = Math.floor((e + s) / this.cellSize);
     for (let h = i; h <= a; h++)
       for (let c = r; c <= l; c++) {
-        const d = `${h},${c}`, u = this.cells.get(d);
-        if (u)
-          for (const p of u) {
+        const d = `${h},${c}`, f = this.cells.get(d);
+        if (f)
+          for (const p of f) {
             if (n !== void 0 && p.id === n) continue;
             const b = p.x - t, g = p.y - e;
-            b * b + g * g <= o * o && s.push(p);
+            b * b + g * g <= s * s && o.push(p);
           }
       }
-    return s;
+    return o;
   }
   /**
    * Query all items whose coordinate on `axis` is within `radius` of the
@@ -833,26 +888,26 @@ class Nt {
    *
    * Scans all cells in the band along the target axis.
    */
-  queryNearAxis(t, e, o, n) {
-    const s = [];
+  queryNearAxis(t, e, s, n) {
+    const o = [];
     if (t === "x") {
-      const i = Math.floor((e - o) / this.cellSize), a = Math.floor((e + o) / this.cellSize);
+      const i = Math.floor((e - s) / this.cellSize), a = Math.floor((e + s) / this.cellSize);
       for (const [r, l] of this.cells) {
         const h = r.indexOf(","), c = parseInt(r.substring(0, h), 10);
         if (!(c < i || c > a))
           for (const d of l)
-            n !== void 0 && d.id === n || Math.abs(d.x - e) <= o && s.push(d);
+            n !== void 0 && d.id === n || Math.abs(d.x - e) <= s && o.push(d);
       }
     } else {
-      const i = Math.floor((e - o) / this.cellSize), a = Math.floor((e + o) / this.cellSize);
+      const i = Math.floor((e - s) / this.cellSize), a = Math.floor((e + s) / this.cellSize);
       for (const [r, l] of this.cells) {
         const h = r.indexOf(","), c = parseInt(r.substring(h + 1), 10);
         if (!(c < i || c > a))
           for (const d of l)
-            n !== void 0 && d.id === n || Math.abs(d.y - e) <= o && s.push(d);
+            n !== void 0 && d.id === n || Math.abs(d.y - e) <= s && o.push(d);
       }
     }
-    return s;
+    return o;
   }
   /** Rebuild from a full list of items (clears existing data first) */
   rebuild(t) {
@@ -865,27 +920,27 @@ class Nt {
     return `${Math.floor(t / this.cellSize)},${Math.floor(e / this.cellSize)}`;
   }
 }
-function lt(M) {
-  const t = M.transformData;
+function ct(v) {
+  const t = v.transformData;
   if (t && "width" in t && typeof t.width == "number")
     return t.width;
 }
-function St(M) {
-  const t = M.transformData;
+function St(v) {
+  const t = v.transformData;
   if (t && "height" in t && typeof t.height == "number")
     return t.height;
 }
-function wt(M, t) {
-  const e = M.transformData;
+function vt(v, t) {
+  const e = v.transformData;
   return e && "width" in e ? (e.width = t, !0) : !1;
 }
-function Pt(M, t) {
-  const e = M.transformData;
+function Pt(v, t) {
+  const e = v.transformData;
   return e && "height" in e ? (e.height = t, !0) : !1;
 }
-class Ke {
+class Ze {
   constructor(t = {}) {
-    this._extraSnapRects = [], this.snapThreshold = t.snapThreshold || it.canvas.snapThreshold, this.enabled = t.enabled !== !1, this.showGuides = t.showGuides !== !1, this.guides = [], this.activeSnaps = {
+    this._extraSnapRects = [], this.snapThreshold = t.snapThreshold || rt.canvas.snapThreshold, this.enabled = t.enabled !== !1, this.showGuides = t.showGuides !== !1, this.guides = [], this.activeSnaps = {
       x: null,
       // { snapTo: number, anchorKey: string, frozenFontSize: number, frozenWidth: number, frozenPosition: {x, y}, isPositionBasedSnap: boolean }
       y: null
@@ -941,31 +996,31 @@ class Ke {
   _populateSpatialGrid(t) {
     this._spatialGrid.clear(), this._anchorMetadata.clear();
     for (const e of t) {
-      const o = bt.getSnapAnchors(e);
-      for (const [n, s] of Object.entries(o)) {
+      const s = bt.getSnapAnchors(e);
+      for (const [n, o] of Object.entries(s)) {
         const i = `${e.id}:${n}`, a = {
-          x: s.x,
-          y: s.y,
+          x: o.x,
+          y: o.y,
           id: i
         };
         this._spatialGrid.insert(a), this._anchorMetadata.set(i, {
           elementId: e.id,
           anchorKey: n,
-          point: s
+          point: o
         });
       }
     }
     for (const e of this._extraSnapRects) {
-      const o = e.x + e.width / 2, n = e.y + e.height / 2, s = e.x + e.width, i = e.y + e.height, a = {
+      const s = e.x + e.width / 2, n = e.y + e.height / 2, o = e.x + e.width, i = e.y + e.height, a = {
         topLeft: { x: e.x, y: e.y },
-        topRight: { x: s, y: e.y },
+        topRight: { x: o, y: e.y },
         bottomLeft: { x: e.x, y: i },
-        bottomRight: { x: s, y: i },
-        topCenter: { x: o, y: e.y },
-        rightCenter: { x: s, y: n },
-        bottomCenter: { x: o, y: i },
+        bottomRight: { x: o, y: i },
+        topCenter: { x: s, y: e.y },
+        rightCenter: { x: o, y: n },
+        bottomCenter: { x: s, y: i },
         leftCenter: { x: e.x, y: n },
-        center: { x: o, y: n }
+        center: { x: s, y: n }
         // No `rotation` anchor — extras are un-rotated by definition.
       }, r = `__snap-rect:${e.id}`;
       for (const [l, h] of Object.entries(a)) {
@@ -985,93 +1040,93 @@ class Ke {
   /**
    * Snap a position during drag operation
    */
-  snapPosition(t, e, o) {
-    if (!this.enabled || !o)
+  snapPosition(t, e, s) {
+    if (!this.enabled || !s)
       return this.clearGuides(), t;
     const n = e.clone();
     n.x = t.x, n.y = t.y;
-    const s = bt.getSnapAnchors(n), i = o.filter((y) => y.id !== e.id);
+    const o = bt.getSnapAnchors(n), i = s.filter((y) => y.id !== e.id);
     this._populateSpatialGrid(i);
     let a = null, r = null, l = 1 / 0, h = 1 / 0;
-    const c = [], d = [], u = [];
-    for (const [y, m] of Object.entries(s)) {
-      const T = this._spatialGrid.queryNearAxis("x", m.x, this.snapThreshold);
-      for (const S of T) {
-        const C = this._anchorMetadata.get(S.id);
+    const c = [], d = [], f = [];
+    for (const [y, S] of Object.entries(o)) {
+      const m = this._spatialGrid.queryNearAxis("x", S.x, this.snapThreshold);
+      for (const T of m) {
+        const C = this._anchorMetadata.get(T.id);
         if (!C) continue;
-        const R = C.point, x = C.anchorKey, P = Math.abs(m.x - R.x);
+        const R = C.point, x = C.anchorKey, P = Math.abs(S.x - R.x);
         if (P < this.snapThreshold) {
-          const w = {
+          const M = {
             snapTo: R.x,
-            offset: m.x - t.x,
+            offset: S.x - t.x,
             // How far anchor is from element position
             distance: P,
             guide: {
               type: "vertical",
               x: R.x,
-              y1: Math.min(m.y, R.y) - 50,
-              y2: Math.max(m.y, R.y) + 50,
+              y1: Math.min(S.y, R.y) - 50,
+              y2: Math.max(S.y, R.y) + 50,
               movingKey: y,
               otherKey: x
             }
           };
-          c.push(w), P < l && (l = P, a = w);
+          c.push(M), P < l && (l = P, a = M);
         }
       }
-      const v = this._spatialGrid.queryNearAxis("y", m.y, this.snapThreshold);
-      for (const S of v) {
-        const C = this._anchorMetadata.get(S.id);
+      const w = this._spatialGrid.queryNearAxis("y", S.y, this.snapThreshold);
+      for (const T of w) {
+        const C = this._anchorMetadata.get(T.id);
         if (!C) continue;
-        const R = C.point, x = C.anchorKey, P = Math.abs(m.y - R.y);
+        const R = C.point, x = C.anchorKey, P = Math.abs(S.y - R.y);
         if (P < this.snapThreshold) {
-          const w = {
+          const M = {
             snapTo: R.y,
-            offset: m.y - t.y,
+            offset: S.y - t.y,
             distance: P,
             guide: {
               type: "horizontal",
               y: R.y,
-              x1: Math.min(m.x, R.x) - 50,
-              x2: Math.max(m.x, R.x) + 50,
+              x1: Math.min(S.x, R.x) - 50,
+              x2: Math.max(S.x, R.x) + 50,
               movingKey: y,
               otherKey: x
             }
           };
-          d.push(w), P < h && (h = P, r = w);
+          d.push(M), P < h && (h = P, r = M);
         }
       }
     }
     let p = t.x, b = t.y;
     a && (p = a.snapTo - a.offset), r && (b = r.snapTo - r.offset);
-    const g = /* @__PURE__ */ new Map(), f = /* @__PURE__ */ new Map();
+    const g = /* @__PURE__ */ new Map(), u = /* @__PURE__ */ new Map();
     for (const y of c) {
-      const m = g.get(y.snapTo);
-      (!m || y.distance < m.distance) && g.set(y.snapTo, y);
+      const S = g.get(y.snapTo);
+      (!S || y.distance < S.distance) && g.set(y.snapTo, y);
     }
     for (const y of d) {
-      const m = f.get(y.snapTo);
-      (!m || y.distance < m.distance) && f.set(y.snapTo, y);
+      const S = u.get(y.snapTo);
+      (!S || y.distance < S.distance) && u.set(y.snapTo, y);
     }
     for (const y of g.values())
-      u.push(y.guide);
-    for (const y of f.values())
-      u.push(y.guide);
-    return this.guides = u, { x: p, y: b };
+      f.push(y.guide);
+    for (const y of u.values())
+      f.push(y.guide);
+    return this.guides = f, { x: p, y: b };
   }
   /**
    * Calculate what the frozen font size should be at the snap point
    * This ensures consistent font size regardless of which side of threshold you enter from
    */
-  _calculateFrozenFontSizeAtSnap(t, e, o, n, s) {
-    if (!s) return t.fontSize ?? 0;
+  _calculateFrozenFontSizeAtSnap(t, e, s, n, o) {
+    if (!o) return t.fontSize ?? 0;
     const i = n != null && n.anchor ? String(n.anchor) : "";
     if (!(n && (i.includes("top") || i.includes("bottom"))))
-      return s.fontSize ?? 0;
-    const r = lt(t) ?? t.width ?? s.width;
+      return o.fontSize ?? 0;
+    const r = ct(t) ?? t.width ?? o.width;
     let l = r;
     i.includes("right") && e !== 0 ? l = r + e : i.includes("left") && e !== 0 && (l = r - e);
-    const h = l / s.width;
-    return (s.fontSize ?? 0) * h;
+    const h = l / o.width;
+    return (o.fontSize ?? 0) * h;
   }
   /**
    * Check if this will be a position-based snap (vs dimension-based)
@@ -1098,17 +1153,17 @@ class Ke {
    * Uses the spatial grid (pre-populated via _populateSpatialGrid) for
    * O(1) amortized lookup instead of scanning all other elements.
    */
-  _findXSnaps(t, e, o, n) {
-    const s = [], i = new Set(n);
-    for (const a of o) {
+  _findXSnaps(t, e, s, n) {
+    const o = [], i = new Set(n);
+    for (const a of s) {
       const r = t[a];
       if (!r) continue;
       const l = this._spatialGrid.queryNearAxis("x", r.x, this.snapThreshold);
       for (const h of l) {
         const c = this._anchorMetadata.get(h.id);
         if (!c || !i.has(c.anchorKey)) continue;
-        const d = c.point, u = c.anchorKey, p = Math.abs(r.x - d.x);
-        p < this.snapThreshold && s.push({
+        const d = c.point, f = c.anchorKey, p = Math.abs(r.x - d.x);
+        p < this.snapThreshold && o.push({
           distance: p,
           snapTo: d.x,
           currentValue: r.x,
@@ -1118,29 +1173,29 @@ class Ke {
             y1: Math.min(r.y, d.y) - 50,
             y2: Math.max(r.y, d.y) + 50,
             movingKey: a,
-            otherKey: u
+            otherKey: f
           }
         });
       }
     }
-    return s;
+    return o;
   }
   /**
    * Find all Y-axis snaps within threshold.
    * Uses the spatial grid (pre-populated via _populateSpatialGrid) for
    * O(1) amortized lookup instead of scanning all other elements.
    */
-  _findYSnaps(t, e, o, n) {
-    const s = [], i = new Set(n);
-    for (const a of o) {
+  _findYSnaps(t, e, s, n) {
+    const o = [], i = new Set(n);
+    for (const a of s) {
       const r = t[a];
       if (!r) continue;
       const l = this._spatialGrid.queryNearAxis("y", r.y, this.snapThreshold);
       for (const h of l) {
         const c = this._anchorMetadata.get(h.id);
         if (!c || !i.has(c.anchorKey)) continue;
-        const d = c.point, u = c.anchorKey, p = Math.abs(r.y - d.y);
-        p < this.snapThreshold && s.push({
+        const d = c.point, f = c.anchorKey, p = Math.abs(r.y - d.y);
+        p < this.snapThreshold && o.push({
           distance: p,
           snapTo: d.y,
           currentValue: r.y,
@@ -1150,44 +1205,44 @@ class Ke {
             x1: Math.min(r.x, d.x) - 50,
             x2: Math.max(r.x, d.x) + 50,
             movingKey: a,
-            otherKey: u
+            otherKey: f
           }
         });
       }
     }
-    return s;
+    return o;
   }
   /**
    * Sort snaps by distance and prioritize based on handle anchor
    */
-  _prioritizeSnaps(t, e, o) {
+  _prioritizeSnaps(t, e, s) {
     if (!e || !e.anchor) {
-      t.sort((n, s) => n.distance - s.distance);
+      t.sort((n, o) => n.distance - o.distance);
       return;
     }
-    o === "x" ? e.anchor.includes("left") ? t.sort((n, s) => {
-      const i = n.guide.movingKey.includes("left") ? -1e3 : 0, a = s.guide.movingKey.includes("left") ? -1e3 : 0;
-      return n.distance + i - (s.distance + a);
-    }) : e.anchor.includes("right") ? t.sort((n, s) => {
-      const i = n.guide.movingKey.includes("right") ? -1e3 : 0, a = s.guide.movingKey.includes("right") ? -1e3 : 0;
-      return n.distance + i - (s.distance + a);
-    }) : t.sort((n, s) => n.distance - s.distance) : o === "y" && (e.anchor.includes("top") ? t.sort((n, s) => {
-      const i = n.guide.movingKey.includes("top") ? -1e3 : 0, a = s.guide.movingKey.includes("top") ? -1e3 : 0;
-      return n.distance + i - (s.distance + a);
-    }) : e.anchor.includes("bottom") ? t.sort((n, s) => {
-      const i = n.guide.movingKey.includes("bottom") ? -1e3 : 0, a = s.guide.movingKey.includes("bottom") ? -1e3 : 0;
-      return n.distance + i - (s.distance + a);
-    }) : t.sort((n, s) => n.distance - s.distance));
+    s === "x" ? e.anchor.includes("left") ? t.sort((n, o) => {
+      const i = n.guide.movingKey.includes("left") ? -1e3 : 0, a = o.guide.movingKey.includes("left") ? -1e3 : 0;
+      return n.distance + i - (o.distance + a);
+    }) : e.anchor.includes("right") ? t.sort((n, o) => {
+      const i = n.guide.movingKey.includes("right") ? -1e3 : 0, a = o.guide.movingKey.includes("right") ? -1e3 : 0;
+      return n.distance + i - (o.distance + a);
+    }) : t.sort((n, o) => n.distance - o.distance) : s === "y" && (e.anchor.includes("top") ? t.sort((n, o) => {
+      const i = n.guide.movingKey.includes("top") ? -1e3 : 0, a = o.guide.movingKey.includes("top") ? -1e3 : 0;
+      return n.distance + i - (o.distance + a);
+    }) : e.anchor.includes("bottom") ? t.sort((n, o) => {
+      const i = n.guide.movingKey.includes("bottom") ? -1e3 : 0, a = o.guide.movingKey.includes("bottom") ? -1e3 : 0;
+      return n.distance + i - (o.distance + a);
+    }) : t.sort((n, o) => n.distance - o.distance));
   }
   /**
    * Create a guide visualization for an active snap
    */
-  _createGuideForSnap(t, e, o, n, s) {
-    const i = o[e];
+  _createGuideForSnap(t, e, s, n, o) {
+    const i = s[e];
     if (!i) return null;
-    if (s === "x") {
+    if (o === "x") {
       let a = 1 / 0, r = -1 / 0;
-      for (const l of Object.values(o))
+      for (const l of Object.values(s))
         Math.abs(l.x - t.snapTo) < 5 && (a = Math.min(a, l.y), r = Math.max(r, l.y));
       for (const l of n) {
         const h = bt.getSnapAnchors(l);
@@ -1207,9 +1262,9 @@ class Ke {
           otherKey: "snap"
         }
       };
-    } else if (s === "y") {
+    } else if (o === "y") {
       let a = 1 / 0, r = -1 / 0;
-      for (const l of Object.values(o))
+      for (const l of Object.values(s))
         Math.abs(l.y - t.snapTo) < 5 && (a = Math.min(a, l.x), r = Math.max(r, l.x));
       for (const l of n) {
         const h = bt.getSnapAnchors(l);
@@ -1238,9 +1293,9 @@ class Ke {
    * Adjust threshold to compensate for this velocity difference
    */
   _getAdjustedStickyThreshold(t, e) {
-    const o = e.getVisualBoundingBox(), n = o.width / o.height;
-    let s = this.stickyThreshold;
-    return t === "x" ? n > 1 && (s = this.stickyThreshold / Math.sqrt(n)) : t === "y" && n < 1 && (s = this.stickyThreshold * Math.sqrt(n)), s;
+    const s = e.getVisualBoundingBox(), n = s.width / s.height;
+    let o = this.stickyThreshold;
+    return t === "x" ? n > 1 && (o = this.stickyThreshold / Math.sqrt(n)) : t === "y" && n < 1 && (o = this.stickyThreshold * Math.sqrt(n)), o;
   }
   /**
    * Calculate what dimensions should be when edge reaches snap point
@@ -1258,30 +1313,30 @@ class Ke {
    * @param handle - The resize handle being dragged
    * @returns {Object} { frozenWidth, frozenHeight } - Dimensions at snap point
    */
-  _calculateFrozenDimensionsAtSnap(t, e, o, n, s) {
-    const i = lt(t) ?? t.width ?? 0, a = St(t) ?? t.height ?? 0;
+  _calculateFrozenDimensionsAtSnap(t, e, s, n, o) {
+    const i = ct(t) ?? t.width ?? 0, a = St(t) ?? t.height ?? 0;
     let r = i, l = a;
     const h = t.transformType === "image", c = h ? t.imageAspectRatio || (i && a ? i / a : null) : null, d = n.toLowerCase();
-    return e === "x" ? d.includes("right") ? (r = i + o, h && c && (l = r / c)) : d.includes("left") && (r = i - o, h && c && (l = r / c)) : e === "y" && (d.includes("bottom") ? (l = a + o, h && c && (r = l * c)) : d.includes("top") && (l = a - o, h && c && (r = l * c))), { frozenWidth: r, frozenHeight: l };
+    return e === "x" ? d.includes("right") ? (r = i + s, h && c && (l = r / c)) : d.includes("left") && (r = i - s, h && c && (l = r / c)) : e === "y" && (d.includes("bottom") ? (l = a + s, h && c && (r = l * c)) : d.includes("top") && (l = a - s, h && c && (r = l * c))), { frozenWidth: r, frozenHeight: l };
   }
   /**
    * Process sticky snapping for a single axis
    * @returns {Object} { snapDelta, bestSnap }
    */
-  _processStickySnap(t, e, o, n, s, i, a) {
+  _processStickySnap(t, e, s, n, o, i, a) {
     const r = this.activeSnaps[t];
     let l = 0, h = null;
     if (r) {
       const c = e[r.anchorKey];
       if (c) {
-        const d = t === "x" ? c.x : c.y, u = Math.abs(d - r.snapTo), p = this._getAdjustedStickyThreshold(t, n);
-        if (u < p) {
+        const d = t === "x" ? c.x : c.y, f = Math.abs(d - r.snapTo), p = this._getAdjustedStickyThreshold(t, n);
+        if (f < p) {
           if (l = r.snapTo - d, !(t === "y" && r.isPositionBasedSnap)) {
             const g = this._calculateFrozenFontSizeAtSnap(
               n,
               t === "x" ? l : 0,
               t === "y" ? l : 0,
-              s,
+              o,
               i
             );
             g !== r.frozenFontSize && (r.frozenFontSize = g);
@@ -1289,47 +1344,47 @@ class Ke {
           h = this._createGuideForSnap(r, r.anchorKey, e, a, t);
         } else {
           const b = r;
-          if (this.activeSnaps[t] = null, o.length > 0 && o[0].distance < this.snapThreshold) {
-            h = o[0], l = h.snapTo - h.currentValue;
-            const g = b && b.anchorKey === h.guide.movingKey && Math.abs(b.snapTo - h.snapTo) < 1, f = g ? b.frozenFontSize : this._calculateFrozenFontSizeAtSnap(
+          if (this.activeSnaps[t] = null, s.length > 0 && s[0].distance < this.snapThreshold) {
+            h = s[0], l = h.snapTo - h.currentValue;
+            const g = b && b.anchorKey === h.guide.movingKey && Math.abs(b.snapTo - h.snapTo) < 1, u = g ? b.frozenFontSize : this._calculateFrozenFontSizeAtSnap(
               n,
               t === "x" ? l : 0,
               t === "y" ? l : 0,
-              s,
+              o,
               i
             ), y = this._isPositionBasedSnap(n, t);
-            let m;
-            g ? m = b.frozenPosition : y ? m = {
+            let S;
+            g ? S = b.frozenPosition : y ? S = {
               x: t === "x" ? n.x + l : n.x,
               y: t === "y" ? n.y + l : n.y
-            } : m = { x: n.x, y: n.y };
-            const T = this._calculateFrozenDimensionsAtSnap(
+            } : S = { x: n.x, y: n.y };
+            const m = this._calculateFrozenDimensionsAtSnap(
               n,
               t,
               l,
               h.guide.movingKey,
-              s
+              o
             );
             this.activeSnaps[t] = {
               snapTo: h.snapTo,
               anchorKey: h.guide.movingKey,
-              frozenFontSize: f,
-              frozenWidth: T.frozenWidth,
-              frozenHeight: T.frozenHeight,
-              frozenPosition: m,
+              frozenFontSize: u,
+              frozenWidth: m.frozenWidth,
+              frozenHeight: m.frozenHeight,
+              frozenPosition: S,
               isPositionBasedSnap: y
             };
           }
         }
       } else
         this.activeSnaps[t] = null;
-    } else if (o.length > 0 && o[0].distance < this.snapThreshold) {
-      h = o[0], l = h.snapTo - h.currentValue;
-      const c = this.activeSnaps[t], d = c && c.anchorKey === h.guide.movingKey && Math.abs(c.snapTo - h.snapTo) < 1, u = d ? c.frozenFontSize : this._calculateFrozenFontSizeAtSnap(
+    } else if (s.length > 0 && s[0].distance < this.snapThreshold) {
+      h = s[0], l = h.snapTo - h.currentValue;
+      const c = this.activeSnaps[t], d = c && c.anchorKey === h.guide.movingKey && Math.abs(c.snapTo - h.snapTo) < 1, f = d ? c.frozenFontSize : this._calculateFrozenFontSizeAtSnap(
         n,
         t === "x" ? l : 0,
         t === "y" ? l : 0,
-        s,
+        o,
         i
       ), p = this._isPositionBasedSnap(n, t);
       let b;
@@ -1342,12 +1397,12 @@ class Ke {
         t,
         l,
         h.guide.movingKey,
-        s
+        o
       );
       this.activeSnaps[t] = {
         snapTo: h.snapTo,
         anchorKey: h.guide.movingKey,
-        frozenFontSize: u,
+        frozenFontSize: f,
         frozenWidth: g.frozenWidth,
         frozenHeight: g.frozenHeight,
         frozenPosition: b,
@@ -1359,16 +1414,16 @@ class Ke {
   /**
    * Adjust element for right edge resize
    */
-  _adjustElementForRightResize(t, e, o) {
-    const n = t.getVisualBoundingBox(), s = t.transformType === "image";
-    if (!s) {
-      const i = lt(t);
-      i !== void 0 ? wt(t, i + e) : t.width !== void 0 && (t.width += e);
+  _adjustElementForRightResize(t, e, s) {
+    const n = t.getVisualBoundingBox(), o = t.transformType === "image";
+    if (!o) {
+      const i = ct(t);
+      i !== void 0 ? vt(t, i + e) : t.width !== void 0 && (t.width += e);
     }
-    if (o.anchor === "middle-right") {
-      const i = ht.toRadiansInverse(t.rotation), a = Math.cos(i), r = Math.sin(i);
+    if (s.anchor === "middle-right") {
+      const i = dt.toRadiansInverse(t.rotation), a = Math.cos(i), r = Math.sin(i);
       t.x += e / 2 * a, t.y += e / 2 * r;
-    } else if (!s) {
+    } else if (!o) {
       const a = t.getVisualBoundingBox().x - n.x;
       a !== 0 && (t.x -= a);
     }
@@ -1376,16 +1431,16 @@ class Ke {
   /**
    * Adjust element for left edge resize
    */
-  _adjustElementForLeftResize(t, e, o) {
-    const n = t.getVisualBoundingBox(), s = t.transformType === "image";
-    if (!s) {
-      const i = lt(t);
-      i !== void 0 ? wt(t, i - e) : t.width !== void 0 && (t.width -= e);
+  _adjustElementForLeftResize(t, e, s) {
+    const n = t.getVisualBoundingBox(), o = t.transformType === "image";
+    if (!o) {
+      const i = ct(t);
+      i !== void 0 ? vt(t, i - e) : t.width !== void 0 && (t.width -= e);
     }
-    if (o.anchor === "middle-left") {
-      const i = ht.toRadiansInverse(t.rotation), a = Math.cos(i), r = Math.sin(i);
+    if (s.anchor === "middle-left") {
+      const i = dt.toRadiansInverse(t.rotation), a = Math.cos(i), r = Math.sin(i);
       t.x += e / 2 * a, t.y += e / 2 * r;
-    } else if (t.x += e, !s) {
+    } else if (t.x += e, !o) {
       const i = t.getVisualBoundingBox(), a = i.x + i.width - (n.x + n.width);
       a !== 0 && (t.x -= a);
     }
@@ -1393,36 +1448,36 @@ class Ke {
   /**
    * Adjust element for bottom edge resize
    */
-  _adjustElementForBottomResize(t, e, o) {
-    const n = t.getVisualBoundingBox(), s = t.transformType === "image";
-    if (!s) {
+  _adjustElementForBottomResize(t, e, s) {
+    const n = t.getVisualBoundingBox(), o = t.transformType === "image";
+    if (!o) {
       const r = St(t);
       r !== void 0 ? Pt(t, r + e) : t.height !== void 0 && (t.height += e);
     }
     const i = t.getVisualBoundingBox(), a = Math.abs(i.height - n.height) > 0.01;
-    if (o.anchor === "middle-bottom") {
-      const r = ht.toRadiansInverse(t.rotation), l = Math.cos(r), h = Math.sin(r);
+    if (s.anchor === "middle-bottom") {
+      const r = dt.toRadiansInverse(t.rotation), l = Math.cos(r), h = Math.sin(r);
       t.x -= e / 2 * h, t.y += e / 2 * l;
-    } else if (!s && a) {
+    } else if (!o && a) {
       const r = i.y - n.y;
       r !== 0 && (t.y -= r);
-    } else s || (t.y += e);
+    } else o || (t.y += e);
   }
   /**
    * Adjust element for top edge resize
    */
-  _adjustElementForTopResize(t, e, o) {
-    const n = t.getVisualBoundingBox(), s = t.transformType === "image";
-    if (!s) {
+  _adjustElementForTopResize(t, e, s) {
+    const n = t.getVisualBoundingBox(), o = t.transformType === "image";
+    if (!o) {
       const r = St(t);
       r !== void 0 ? Pt(t, r - e) : t.height !== void 0 && (t.height -= e);
     }
     const i = t.getVisualBoundingBox(), a = Math.abs(i.height - n.height) > 0.01;
-    if (o.anchor === "middle-top") {
-      const r = ht.toRadiansInverse(t.rotation), l = Math.cos(r), h = Math.sin(r);
+    if (s.anchor === "middle-top") {
+      const r = dt.toRadiansInverse(t.rotation), l = Math.cos(r), h = Math.sin(r);
       t.x -= e / 2 * h, t.y += e / 2 * l;
     } else {
-      const r = !s && a;
+      const r = !o && a;
       if (t.y += e, r) {
         const l = t.getVisualBoundingBox(), h = l.y + l.height - (n.y + n.height);
         h !== 0 && (t.y -= h);
@@ -1437,64 +1492,64 @@ class Ke {
    * @param {object} startData - Original data from when resize started (for font size preservation)
    * @returns {object} Modified resize result with adjusted element
    */
-  snapDimensions(t, e, o = null) {
-    var S, C, R, x, P;
+  snapDimensions(t, e, s = null) {
+    var T, C, R, x, P;
     if (!this.enabled || !e)
       return this.clearGuides(), t;
-    const { element: n } = t, s = t.handle;
+    const { element: n } = t, o = t.handle;
     let i;
     const a = n.transformType === "image", r = this.activeSnaps.x !== null || this.activeSnaps.y !== null;
     if (a && r && t.isFrozen && t.unfrozenDimensions) {
-      const w = n.clone();
-      if (w.transformData) {
-        const A = n.getVisualBoundingBox(), B = A.width, L = A.height, W = (o == null ? void 0 : o.width) ?? n.width ?? 0, O = (o == null ? void 0 : o.height) ?? n.height ?? 0, D = (o == null ? void 0 : o.visualWidth) ?? B, F = (o == null ? void 0 : o.visualHeight) ?? L, E = t.unfrozenDimensions.width / D, $ = t.unfrozenDimensions.height / F;
-        wt(w, W * E), Pt(w, O * $);
+      const M = n.clone();
+      if (M.transformData) {
+        const A = n.getVisualBoundingBox(), B = A.width, L = A.height, W = (s == null ? void 0 : s.width) ?? n.width ?? 0, O = (s == null ? void 0 : s.height) ?? n.height ?? 0, D = (s == null ? void 0 : s.visualWidth) ?? B, Q = (s == null ? void 0 : s.visualHeight) ?? L, E = t.unfrozenDimensions.width / D, j = t.unfrozenDimensions.height / Q;
+        vt(M, W * E), Pt(M, O * j);
       }
-      i = bt.getSnapAnchors(w);
+      i = bt.getSnapAnchors(M);
     } else
       i = bt.getSnapAnchors(n);
-    const l = e.filter((w) => w.id !== n.id);
+    const l = e.filter((M) => M.id !== n.id);
     if (l.length === 0)
       return this.clearGuides(), t;
     this._populateSpatialGrid(l);
-    const h = this._getSnapKeysForHandle(s), c = this._getTargetSnapKeys(), d = this._findXSnaps(i, l, h, c), u = this._findYSnaps(i, l, h, c);
-    this._prioritizeSnaps(d, s, "x"), this._prioritizeSnaps(u, s, "y");
-    const p = this._processStickySnap("x", i, d, n, s, o, l), b = this._processStickySnap("y", i, u, n, s, o, l), g = p.snapDelta, f = b.snapDelta, y = p.bestSnap, m = b.bestSnap, T = [];
-    y && T.push(y.guide), m && T.push(m.guide), this.guides = T, T.length > 0;
-    const v = s && (s.anchor === "top-left" || s.anchor === "top-right" || s.anchor === "bottom-left" || s.anchor === "bottom-right");
-    if (a && v && (g !== 0 || f !== 0))
+    const h = this._getSnapKeysForHandle(o), c = this._getTargetSnapKeys(), d = this._findXSnaps(i, l, h, c), f = this._findYSnaps(i, l, h, c);
+    this._prioritizeSnaps(d, o, "x"), this._prioritizeSnaps(f, o, "y");
+    const p = this._processStickySnap("x", i, d, n, o, s, l), b = this._processStickySnap("y", i, f, n, o, s, l), g = p.snapDelta, u = b.snapDelta, y = p.bestSnap, S = b.bestSnap, m = [];
+    y && m.push(y.guide), S && m.push(S.guide), this.guides = m, m.length > 0;
+    const w = o && (o.anchor === "top-left" || o.anchor === "top-right" || o.anchor === "bottom-left" || o.anchor === "bottom-right");
+    if (a && w && (g !== 0 || u !== 0))
       return t;
-    if (g !== 0 || f !== 0) {
-      const w = n.clone(), A = this.activeSnaps.x || this.activeSnaps.y, B = (A == null ? void 0 : A.frozenFontSize) ?? n.fontSize ?? 0, L = (A == null ? void 0 : A.frozenWidth) ?? lt(n) ?? n.width ?? 0, W = (A == null ? void 0 : A.frozenHeight) ?? St(n) ?? n.height ?? 0, O = (A == null ? void 0 : A.frozenPosition) ?? { x: n.x, y: n.y }, D = w.isCropping && !String(s.anchor).startsWith("crop-");
+    if (g !== 0 || u !== 0) {
+      const M = n.clone(), A = this.activeSnaps.x || this.activeSnaps.y, B = (A == null ? void 0 : A.frozenFontSize) ?? n.fontSize ?? 0, L = (A == null ? void 0 : A.frozenWidth) ?? ct(n) ?? n.width ?? 0, W = (A == null ? void 0 : A.frozenHeight) ?? St(n) ?? n.height ?? 0, O = (A == null ? void 0 : A.frozenPosition) ?? { x: n.x, y: n.y }, D = M.isCropping && !String(o.anchor).startsWith("crop-");
       if (!D)
-        if (s && s.anchor) {
+        if (o && o.anchor) {
           if (g !== 0) {
-            const k = (S = this.activeSnaps.x) == null ? void 0 : S.anchorKey, I = k == null ? void 0 : k.toLowerCase();
-            I && I.includes("right") ? this._adjustElementForRightResize(w, g, s) : I && I.includes("left") ? this._adjustElementForLeftResize(w, g, s) : w.x += g;
+            const k = (T = this.activeSnaps.x) == null ? void 0 : T.anchorKey, H = k == null ? void 0 : k.toLowerCase();
+            H && H.includes("right") ? this._adjustElementForRightResize(M, g, o) : H && H.includes("left") ? this._adjustElementForLeftResize(M, g, o) : M.x += g;
           }
-          if (f !== 0) {
-            const k = (C = this.activeSnaps.y) == null ? void 0 : C.anchorKey, I = k == null ? void 0 : k.toLowerCase();
-            I && I.includes("bottom") ? this._adjustElementForBottomResize(w, f, s) : I && I.includes("top") ? this._adjustElementForTopResize(w, f, s) : w.y += f;
+          if (u !== 0) {
+            const k = (C = this.activeSnaps.y) == null ? void 0 : C.anchorKey, H = k == null ? void 0 : k.toLowerCase();
+            H && H.includes("bottom") ? this._adjustElementForBottomResize(M, u, o) : H && H.includes("top") ? this._adjustElementForTopResize(M, u, o) : M.y += u;
           }
         } else
-          w.x += g, w.y += f;
-      w.fontSize !== void 0 && (w.fontSize = B);
-      const F = w.transformType === "image", E = this.activeSnaps.x !== null || this.activeSnaps.y !== null;
-      if (F && E) {
-        if (lt(w) !== void 0) {
+          M.x += g, M.y += u;
+      M.fontSize !== void 0 && (M.fontSize = B);
+      const Q = M.transformType === "image", E = this.activeSnaps.x !== null || this.activeSnaps.y !== null;
+      if (Q && E) {
+        if (ct(M) !== void 0) {
           const k = this.activeSnaps.x || this.activeSnaps.y;
-          let I = L, _ = W;
-          k && (I = k.frozenWidth ?? I, _ = k.frozenHeight ?? _);
-          const H = lt(n), V = St(n), Y = w.imageAspectRatio || (H && V ? H / V : null);
-          Y && Y !== 0 && (_ = I / Y), wt(w, I), Pt(w, _), k && (k.frozenWidth = I, k.frozenHeight = _);
+          let H = L, X = W;
+          k && (H = k.frozenWidth ?? H, X = k.frozenHeight ?? X);
+          const I = ct(n), z = St(n), G = M.imageAspectRatio || (I && z ? I / z : null);
+          G && G !== 0 && (X = H / G), vt(M, H), Pt(M, X), k && (k.frozenWidth = H, k.frozenHeight = X);
         }
       } else
-        (((R = this.activeSnaps.y) == null ? void 0 : R.isPositionBasedSnap) || !1) && (lt(w) !== void 0 ? wt(w, L) : w.width !== void 0 && (w.width = L));
-      const $ = s && (s.anchor === "middle-left" || s.anchor === "middle-right"), j = s && (s.anchor === "middle-top" || s.anchor === "middle-bottom"), J = ((x = this.activeSnaps.x) == null ? void 0 : x.isPositionBasedSnap) || !1, X = ((P = this.activeSnaps.y) == null ? void 0 : P.isPositionBasedSnap) || !1;
-      return (g === 0 || J) && !$ && !j && !D && (w.x = O.x), (f === 0 || X) && !j && !$ && !D && (w.y = O.y), {
+        (((R = this.activeSnaps.y) == null ? void 0 : R.isPositionBasedSnap) || !1) && (ct(M) !== void 0 ? vt(M, L) : M.width !== void 0 && (M.width = L));
+      const j = o && (o.anchor === "middle-left" || o.anchor === "middle-right"), _ = o && (o.anchor === "middle-top" || o.anchor === "middle-bottom"), $ = ((x = this.activeSnaps.x) == null ? void 0 : x.isPositionBasedSnap) || !1, Y = ((P = this.activeSnaps.y) == null ? void 0 : P.isPositionBasedSnap) || !1;
+      return (g === 0 || $) && !j && !_ && !D && (M.x = O.x), (u === 0 || Y) && !_ && !j && !D && (M.y = O.y), {
         ...t,
-        element: w,
-        snapAdjustment: { dx: g, dy: f },
+        element: M,
+        snapAdjustment: { dx: g, dy: u },
         // Flag to indicate we're in sticky snap mode (used to freeze font size)
         isInStickySnap: !0
       };
@@ -1504,16 +1559,16 @@ class Ke {
   /**
    * Snap rotation (for future implementation)
    */
-  snapRotation(t, e, o) {
+  snapRotation(t, e, s) {
     if (!this.enabled) return t;
-    const n = [0, 45, 90, 135, 180, 225, 270, 315, 360], s = 5;
+    const n = [0, 45, 90, 135, 180, 225, 270, 315, 360], o = 5;
     for (const i of n)
-      if (ie(t, i, s))
+      if (ie(t, i, o))
         return i;
     return t;
   }
 }
-class $e {
+class Je {
   constructor(t = {}) {
     this.lastSnapTarget = null, this.detectionThreshold = t.detectionThreshold || 100, this.minDistance = t.minDistance || 10, this.enabled = t.enabled !== !1, this.showLabels = t.showLabels !== !1, this.indicators = [];
   }
@@ -1545,109 +1600,109 @@ class $e {
    * Snap position to match consistent spacing patterns
    * Returns adjusted position if spacing snap is detected, otherwise returns original position
    */
-  snapToSpacing(t, e, o) {
-    if (!this.enabled || !o)
+  snapToSpacing(t, e, s) {
+    if (!this.enabled || !s)
       return t;
-    const n = Ft, s = o.filter((g) => g.id !== e.id);
-    if (s.length === 0)
+    const n = Ft, o = s.filter((g) => g.id !== e.id);
+    if (o.length === 0)
       return t;
     const i = e.clone();
     i.x = t.x, i.y = t.y;
     const a = i.getVisualBoundingBox(), r = a.x - t.x, l = a.y - t.y;
-    let h = t.x, c = t.y, d = !1, u = !1;
-    const p = s.filter((g) => {
-      const f = g.getVisualBoundingBox();
-      return !(a.x + a.width < f.x || a.x > f.x + f.width);
+    let h = t.x, c = t.y, d = !1, f = !1;
+    const p = o.filter((g) => {
+      const u = g.getVisualBoundingBox();
+      return !(a.x + a.width < u.x || a.x > u.x + u.width);
     });
-    if (p.sort((g, f) => {
-      const y = g.getVisualBoundingBox(), m = f.getVisualBoundingBox();
-      return y.y - m.y;
+    if (p.sort((g, u) => {
+      const y = g.getVisualBoundingBox(), S = u.getVisualBoundingBox();
+      return y.y - S.y;
     }), p.length >= 1) {
-      let g = null, f = null;
-      for (const T of p) {
-        const v = T.getVisualBoundingBox();
-        v.y + v.height <= a.y ? (!g || v.y > g.getVisualBoundingBox().y) && (g = T) : v.y >= a.y + a.height && (!f || v.y < f.getVisualBoundingBox().y) && (f = T);
+      let g = null, u = null;
+      for (const m of p) {
+        const w = m.getVisualBoundingBox();
+        w.y + w.height <= a.y ? (!g || w.y > g.getVisualBoundingBox().y) && (g = m) : w.y >= a.y + a.height && (!u || w.y < u.getVisualBoundingBox().y) && (u = m);
       }
       const y = [];
-      for (let T = 0; T < p.length - 1; T++) {
-        const v = p[T].getVisualBoundingBox(), C = p[T + 1].getVisualBoundingBox().y - (v.y + v.height);
+      for (let m = 0; m < p.length - 1; m++) {
+        const w = p[m].getVisualBoundingBox(), C = p[m + 1].getVisualBoundingBox().y - (w.y + w.height);
         y.push(C);
       }
-      let m = null;
+      let S = null;
       if (g) {
-        const T = g.getVisualBoundingBox(), v = a.y - (T.y + T.height);
-        for (const S of y)
-          if (Math.abs(v - S) <= n) {
-            m = S;
+        const m = g.getVisualBoundingBox(), w = a.y - (m.y + m.height);
+        for (const T of y)
+          if (Math.abs(w - T) <= n) {
+            S = T;
             break;
           }
       }
-      if (!m && f) {
-        const v = f.getVisualBoundingBox().y - (a.y + a.height);
-        for (const S of y)
-          if (Math.abs(v - S) <= n) {
-            m = S;
+      if (!S && u) {
+        const w = u.getVisualBoundingBox().y - (a.y + a.height);
+        for (const T of y)
+          if (Math.abs(w - T) <= n) {
+            S = T;
             break;
           }
       }
-      if (m !== null && m > 0) {
+      if (S !== null && S > 0) {
         if (g) {
-          const T = g.getVisualBoundingBox(), v = a.y - (T.y + T.height);
-          Math.abs(v - m) <= n && (c = T.y + T.height + m - l, u = !0);
+          const m = g.getVisualBoundingBox(), w = a.y - (m.y + m.height);
+          Math.abs(w - S) <= n && (c = m.y + m.height + S - l, f = !0);
         }
-        if (!u && f) {
-          const T = f.getVisualBoundingBox(), v = T.y - (a.y + a.height);
-          Math.abs(v - m) <= n && (c = T.y - a.height - m - l, u = !0);
+        if (!f && u) {
+          const m = u.getVisualBoundingBox(), w = m.y - (a.y + a.height);
+          Math.abs(w - S) <= n && (c = m.y - a.height - S - l, f = !0);
         }
       }
     }
-    const b = s.filter((g) => {
-      const f = g.getVisualBoundingBox();
-      return !(a.y + a.height < f.y || a.y > f.y + f.height);
+    const b = o.filter((g) => {
+      const u = g.getVisualBoundingBox();
+      return !(a.y + a.height < u.y || a.y > u.y + u.height);
     });
-    if (b.sort((g, f) => {
-      const y = g.getVisualBoundingBox(), m = f.getVisualBoundingBox();
-      return y.x - m.x;
+    if (b.sort((g, u) => {
+      const y = g.getVisualBoundingBox(), S = u.getVisualBoundingBox();
+      return y.x - S.x;
     }), b.length >= 1) {
-      let g = null, f = null;
-      for (const T of b) {
-        const v = T.getVisualBoundingBox();
-        v.x + v.width <= a.x ? (!g || v.x > g.getVisualBoundingBox().x) && (g = T) : v.x >= a.x + a.width && (!f || v.x < f.getVisualBoundingBox().x) && (f = T);
+      let g = null, u = null;
+      for (const m of b) {
+        const w = m.getVisualBoundingBox();
+        w.x + w.width <= a.x ? (!g || w.x > g.getVisualBoundingBox().x) && (g = m) : w.x >= a.x + a.width && (!u || w.x < u.getVisualBoundingBox().x) && (u = m);
       }
       const y = [];
-      for (let T = 0; T < b.length - 1; T++) {
-        const v = b[T].getVisualBoundingBox(), C = b[T + 1].getVisualBoundingBox().x - (v.x + v.width);
+      for (let m = 0; m < b.length - 1; m++) {
+        const w = b[m].getVisualBoundingBox(), C = b[m + 1].getVisualBoundingBox().x - (w.x + w.width);
         y.push(C);
       }
-      let m = null;
+      let S = null;
       if (g) {
-        const T = g.getVisualBoundingBox(), v = a.x - (T.x + T.width);
-        for (const S of y)
-          if (Math.abs(v - S) <= n) {
-            m = S;
+        const m = g.getVisualBoundingBox(), w = a.x - (m.x + m.width);
+        for (const T of y)
+          if (Math.abs(w - T) <= n) {
+            S = T;
             break;
           }
       }
-      if (!m && f) {
-        const v = f.getVisualBoundingBox().x - (a.x + a.width);
-        for (const S of y)
-          if (Math.abs(v - S) <= n) {
-            m = S;
+      if (!S && u) {
+        const w = u.getVisualBoundingBox().x - (a.x + a.width);
+        for (const T of y)
+          if (Math.abs(w - T) <= n) {
+            S = T;
             break;
           }
       }
-      if (m !== null && m > 0) {
+      if (S !== null && S > 0) {
         if (g) {
-          const T = g.getVisualBoundingBox(), v = a.x - (T.x + T.width);
-          Math.abs(v - m) <= n && (h = T.x + T.width + m - r, d = !0);
+          const m = g.getVisualBoundingBox(), w = a.x - (m.x + m.width);
+          Math.abs(w - S) <= n && (h = m.x + m.width + S - r, d = !0);
         }
-        if (!d && f) {
-          const T = f.getVisualBoundingBox(), v = T.x - (a.x + a.width);
-          Math.abs(v - m) <= n && (h = T.x - a.width - m - r, d = !0);
+        if (!d && u) {
+          const m = u.getVisualBoundingBox(), w = m.x - (a.x + a.width);
+          Math.abs(w - S) <= n && (h = m.x - a.width - S - r, d = !0);
         }
       }
     }
-    return this.lastSnapTarget = d || u ? { x: h, y: c } : null, { x: h, y: c };
+    return this.lastSnapTarget = d || f ? { x: h, y: c } : null, { x: h, y: c };
   }
   /**
    * Detect spacing between a moving element and other elements
@@ -1655,31 +1710,31 @@ class $e {
    * Also detects consistent spacing patterns (e.g., evenly spaced rows/columns)
    * @param showAllMeasurements - When true (Alt key held), shows all spacing measurements, not just to moving element
    */
-  detectSpacing(t, e, o = !1) {
+  detectSpacing(t, e, s = !1) {
     if (!this.enabled || !e)
       return this.clearIndicators(), [];
     const n = e.filter((c) => c.id !== t.id);
     if (n.length === 0)
       return this.clearIndicators(), [];
-    const s = t.getVisualBoundingBox(), i = [], a = [], r = [], l = [];
+    const o = t.getVisualBoundingBox(), i = [], a = [], r = [], l = [];
     for (const c of n) {
-      const d = c.getVisualBoundingBox(), u = s.x - (d.x + d.width), p = d.x - (s.x + s.width), b = s.y - (d.y + d.height), g = d.y - (s.y + s.height), f = !(s.y + s.height < d.y || s.y > d.y + d.height), y = !(s.x + s.width < d.x || s.x > d.x + d.width);
-      u >= this.minDistance && u < this.detectionThreshold && f && i.push({ element: c, distance: u }), p >= this.minDistance && p < this.detectionThreshold && f && a.push({ element: c, distance: p }), b >= this.minDistance && b < this.detectionThreshold && y && r.push({ element: c, distance: b }), g >= this.minDistance && g < this.detectionThreshold && y && l.push({ element: c, distance: g });
+      const d = c.getVisualBoundingBox(), f = o.x - (d.x + d.width), p = d.x - (o.x + o.width), b = o.y - (d.y + d.height), g = d.y - (o.y + o.height), u = !(o.y + o.height < d.y || o.y > d.y + d.height), y = !(o.x + o.width < d.x || o.x > d.x + d.width);
+      f >= this.minDistance && f < this.detectionThreshold && u && i.push({ element: c, distance: f }), p >= this.minDistance && p < this.detectionThreshold && u && a.push({ element: c, distance: p }), b >= this.minDistance && b < this.detectionThreshold && y && r.push({ element: c, distance: b }), g >= this.minDistance && g < this.detectionThreshold && y && l.push({ element: c, distance: g });
     }
     i.sort((c, d) => c.distance - d.distance), a.sort((c, d) => c.distance - d.distance), r.sort((c, d) => c.distance - d.distance), l.sort((c, d) => c.distance - d.distance);
     const h = [];
-    if (o) {
+    if (s) {
       const c = this.detectAllMeasurements(t, e);
       h.push(...c);
     } else {
       if (i.length > 0) {
-        const c = this.detectConsistentSpacing(t, s, i, "left", n);
+        const c = this.detectConsistentSpacing(t, o, i, "left", n);
         h.push(...c);
       }
       if (a.length > 0) {
         const c = this.detectConsistentSpacing(
           t,
-          s,
+          o,
           a,
           "right",
           n
@@ -1687,13 +1742,13 @@ class $e {
         h.push(...c);
       }
       if (r.length > 0) {
-        const c = this.detectConsistentSpacing(t, s, r, "top", n);
+        const c = this.detectConsistentSpacing(t, o, r, "top", n);
         h.push(...c);
       }
       if (l.length > 0) {
         const c = this.detectConsistentSpacing(
           t,
-          s,
+          o,
           l,
           "bottom",
           n
@@ -1708,9 +1763,9 @@ class $e {
    * Shows measurements from the hovered element to other elements within detection threshold
    */
   detectAllMeasurements(t, e) {
-    const o = [], n = t.getVisualBoundingBox(), s = e.filter((l) => l.id !== t.id), i = this.detectionThreshold * 3;
+    const s = [], n = t.getVisualBoundingBox(), o = e.filter((l) => l.id !== t.id), i = this.detectionThreshold * 3;
     let a = 0, r = 0;
-    for (const l of s) {
+    for (const l of o) {
       const h = l.getVisualBoundingBox();
       if (Math.min(
         Math.abs(n.x - (h.x + h.width)),
@@ -1723,9 +1778,9 @@ class $e {
         // bottom
       ) > i)
         continue;
-      let d = 0, u = !1, p = 0, b = 0, g = 0;
+      let d = 0, f = !1, p = 0, b = 0, g = 0;
       const y = -30 * (a % 2 === 0 ? 1 : -1);
-      h.x >= n.x + n.width ? (d = h.x - (n.x + n.width), d >= this.minDistance && (u = !0, p = n.x + n.width, b = h.x, g = (n.y + n.height / 2 + h.y + h.height / 2) / 2 + y)) : n.x >= h.x + h.width && (d = n.x - (h.x + h.width), d >= this.minDistance && (u = !0, p = h.x + h.width, b = n.x, g = (n.y + n.height / 2 + h.y + h.height / 2) / 2 + y)), u && (o.push({
+      h.x >= n.x + n.width ? (d = h.x - (n.x + n.width), d >= this.minDistance && (f = !0, p = n.x + n.width, b = h.x, g = (n.y + n.height / 2 + h.y + h.height / 2) / 2 + y)) : n.x >= h.x + h.width && (d = n.x - (h.x + h.width), d >= this.minDistance && (f = !0, p = h.x + h.width, b = n.x, g = (n.y + n.height / 2 + h.y + h.height / 2) / 2 + y)), f && (s.push({
         type: "horizontal",
         distance: Math.round(d),
         x1: p,
@@ -1735,106 +1790,106 @@ class $e {
         labelY: g,
         isAltHover: !0
       }), a++);
-      let m = 0, T = !1, v = 0, S = 0, C = 0;
+      let S = 0, m = !1, w = 0, T = 0, C = 0;
       const x = 30 * (r % 2 === 0 ? 1 : -1);
-      h.y >= n.y + n.height ? (m = h.y - (n.y + n.height), m >= this.minDistance && (T = !0, v = (n.x + n.width / 2 + h.x + h.width / 2) / 2 + x, S = n.y + n.height, C = h.y)) : n.y >= h.y + h.height && (m = n.y - (h.y + h.height), m >= this.minDistance && (T = !0, v = (n.x + n.width / 2 + h.x + h.width / 2) / 2 + x, S = h.y + h.height, C = n.y)), T && (o.push({
+      h.y >= n.y + n.height ? (S = h.y - (n.y + n.height), S >= this.minDistance && (m = !0, w = (n.x + n.width / 2 + h.x + h.width / 2) / 2 + x, T = n.y + n.height, C = h.y)) : n.y >= h.y + h.height && (S = n.y - (h.y + h.height), S >= this.minDistance && (m = !0, w = (n.x + n.width / 2 + h.x + h.width / 2) / 2 + x, T = h.y + h.height, C = n.y)), m && (s.push({
         type: "vertical",
-        distance: Math.round(m),
-        x: v,
-        y1: S,
+        distance: Math.round(S),
+        x: w,
+        y1: T,
         y2: C,
-        labelX: v,
-        labelY: (S + C) / 2,
+        labelX: w,
+        labelY: (T + C) / 2,
         isAltHover: !0
       }), r++);
     }
-    return o;
+    return s;
   }
   /**
    * Detect consistent spacing patterns (e.g., evenly spaced rows/columns)
    * and create indicators for all matching spacings
    */
-  detectConsistentSpacing(t, e, o, n, s) {
-    const i = [], r = o[0], l = r.distance, h = r.element.getVisualBoundingBox(), c = this.checkIfWouldSnap(e, l, n, s);
+  detectConsistentSpacing(t, e, s, n, o) {
+    const i = [], r = s[0], l = r.distance, h = r.element.getVisualBoundingBox(), c = this.checkIfWouldSnap(e, l, n, o);
     if (this.addIndicatorForDirection(i, e, h, l, n, c), n === "left" || n === "right") {
-      const d = s.filter((u) => {
-        if (u.id === t.id) return !1;
-        const p = u.getVisualBoundingBox();
+      const d = o.filter((f) => {
+        if (f.id === t.id) return !1;
+        const p = f.getVisualBoundingBox();
         return !(e.y + e.height < p.y || e.y > p.y + p.height);
       });
-      if (d.sort((u, p) => {
-        const b = u.getVisualBoundingBox(), g = p.getVisualBoundingBox();
+      if (d.sort((f, p) => {
+        const b = f.getVisualBoundingBox(), g = p.getVisualBoundingBox();
         return b.x - g.x;
       }), n === "left")
-        for (let u = 0; u < d.length - 1; u++) {
-          const p = d[u], b = d[u + 1], g = p.getVisualBoundingBox(), f = b.getVisualBoundingBox(), y = f.x - (g.x + g.width);
+        for (let f = 0; f < d.length - 1; f++) {
+          const p = d[f], b = d[f + 1], g = p.getVisualBoundingBox(), u = b.getVisualBoundingBox(), y = u.x - (g.x + g.width);
           if (Math.abs(y - l) <= 16 && y >= this.minDistance) {
-            const m = Math.max(g.y, f.y), T = Math.min(g.y + g.height, f.y + f.height), v = (m + T) / 2;
+            const S = Math.max(g.y, u.y), m = Math.min(g.y + g.height, u.y + u.height), w = (S + m) / 2;
             i.push({
               type: "horizontal",
               distance: Math.round(y),
               x1: g.x + g.width,
-              x2: f.x,
-              y: v,
-              labelX: (g.x + g.width + f.x) / 2,
-              labelY: v
+              x2: u.x,
+              y: w,
+              labelX: (g.x + g.width + u.x) / 2,
+              labelY: w
             });
           }
         }
       else
-        for (let u = 0; u < d.length - 1; u++) {
-          const p = d[u], b = d[u + 1], g = p.getVisualBoundingBox(), f = b.getVisualBoundingBox(), y = f.x - (g.x + g.width);
+        for (let f = 0; f < d.length - 1; f++) {
+          const p = d[f], b = d[f + 1], g = p.getVisualBoundingBox(), u = b.getVisualBoundingBox(), y = u.x - (g.x + g.width);
           if (Math.abs(y - l) <= 16 && y >= this.minDistance) {
-            const m = Math.max(g.y, f.y), T = Math.min(g.y + g.height, f.y + f.height), v = (m + T) / 2;
+            const S = Math.max(g.y, u.y), m = Math.min(g.y + g.height, u.y + u.height), w = (S + m) / 2;
             i.push({
               type: "horizontal",
               distance: Math.round(y),
               x1: g.x + g.width,
-              x2: f.x,
-              y: v,
-              labelX: (g.x + g.width + f.x) / 2,
-              labelY: v
+              x2: u.x,
+              y: w,
+              labelX: (g.x + g.width + u.x) / 2,
+              labelY: w
             });
           }
         }
     } else {
-      const d = s.filter((u) => {
-        if (u.id === t.id) return !1;
-        const p = u.getVisualBoundingBox();
+      const d = o.filter((f) => {
+        if (f.id === t.id) return !1;
+        const p = f.getVisualBoundingBox();
         return !(e.x + e.width < p.x || e.x > p.x + p.width);
       });
-      if (d.sort((u, p) => {
-        const b = u.getVisualBoundingBox(), g = p.getVisualBoundingBox();
+      if (d.sort((f, p) => {
+        const b = f.getVisualBoundingBox(), g = p.getVisualBoundingBox();
         return b.y - g.y;
       }), n === "top")
-        for (let u = 0; u < d.length - 1; u++) {
-          const p = d[u], b = d[u + 1], g = p.getVisualBoundingBox(), f = b.getVisualBoundingBox(), y = f.y - (g.y + g.height);
+        for (let f = 0; f < d.length - 1; f++) {
+          const p = d[f], b = d[f + 1], g = p.getVisualBoundingBox(), u = b.getVisualBoundingBox(), y = u.y - (g.y + g.height);
           if (Math.abs(y - l) <= 16 && y >= this.minDistance) {
-            const m = Math.max(g.x, f.x), T = Math.min(g.x + g.width, f.x + f.width), v = (m + T) / 2;
+            const S = Math.max(g.x, u.x), m = Math.min(g.x + g.width, u.x + u.width), w = (S + m) / 2;
             i.push({
               type: "vertical",
               distance: Math.round(y),
-              x: v,
+              x: w,
               y1: g.y + g.height,
-              y2: f.y,
-              labelX: v,
-              labelY: (g.y + g.height + f.y) / 2
+              y2: u.y,
+              labelX: w,
+              labelY: (g.y + g.height + u.y) / 2
             });
           }
         }
       else
-        for (let u = 0; u < d.length - 1; u++) {
-          const p = d[u], b = d[u + 1], g = p.getVisualBoundingBox(), f = b.getVisualBoundingBox(), y = f.y - (g.y + g.height);
+        for (let f = 0; f < d.length - 1; f++) {
+          const p = d[f], b = d[f + 1], g = p.getVisualBoundingBox(), u = b.getVisualBoundingBox(), y = u.y - (g.y + g.height);
           if (Math.abs(y - l) <= 16 && y >= this.minDistance) {
-            const m = Math.max(g.x, f.x), T = Math.min(g.x + g.width, f.x + f.width), v = (m + T) / 2;
+            const S = Math.max(g.x, u.x), m = Math.min(g.x + g.width, u.x + u.width), w = (S + m) / 2;
             i.push({
               type: "vertical",
               distance: Math.round(y),
-              x: v,
+              x: w,
               y1: g.y + g.height,
-              y2: f.y,
-              labelX: v,
-              labelY: (g.y + g.height + f.y) / 2
+              y2: u.y,
+              labelX: w,
+              labelY: (g.y + g.height + u.y) / 2
             });
           }
         }
@@ -1844,9 +1899,9 @@ class $e {
   /**
    * Check if spacing would snap to a pattern
    */
-  checkIfWouldSnap(t, e, o, n) {
-    const s = Ft;
-    if (o === "top" || o === "bottom") {
+  checkIfWouldSnap(t, e, s, n) {
+    const o = Ft;
+    if (s === "top" || s === "bottom") {
       const i = n.filter((a) => {
         const r = a.getVisualBoundingBox();
         return !(t.x + t.width < r.x || t.x > r.x + r.width);
@@ -1863,7 +1918,7 @@ class $e {
         }
         if (a.length > 0) {
           const r = a.reduce((c, d) => c + d, 0) / a.length;
-          return Math.abs(e - r) <= s;
+          return Math.abs(e - r) <= o;
         }
       }
       return !1;
@@ -1884,7 +1939,7 @@ class $e {
         }
         if (a.length > 0) {
           const r = a.reduce((c, d) => c + d, 0) / a.length;
-          return Math.abs(e - r) <= s;
+          return Math.abs(e - r) <= o;
         }
       }
       return !1;
@@ -1893,59 +1948,59 @@ class $e {
   /**
    * Helper method to add a spacing indicator in a specific direction
    */
-  addIndicatorForDirection(t, e, o, n, s, i = !1) {
-    if (s === "left") {
-      const a = Math.max(e.y, o.y), r = Math.min(e.y + e.height, o.y + o.height), l = (a + r) / 2;
+  addIndicatorForDirection(t, e, s, n, o, i = !1) {
+    if (o === "left") {
+      const a = Math.max(e.y, s.y), r = Math.min(e.y + e.height, s.y + s.height), l = (a + r) / 2;
       t.push({
         type: "horizontal",
         distance: Math.round(n),
-        x1: o.x + o.width,
+        x1: s.x + s.width,
         x2: e.x,
         y: l,
-        labelX: (o.x + o.width + e.x) / 2,
+        labelX: (s.x + s.width + e.x) / 2,
         labelY: l,
         isSnapTarget: i
       });
-    } else if (s === "right") {
-      const a = Math.max(e.y, o.y), r = Math.min(e.y + e.height, o.y + o.height), l = (a + r) / 2;
+    } else if (o === "right") {
+      const a = Math.max(e.y, s.y), r = Math.min(e.y + e.height, s.y + s.height), l = (a + r) / 2;
       t.push({
         type: "horizontal",
         distance: Math.round(n),
         x1: e.x + e.width,
-        x2: o.x,
+        x2: s.x,
         y: l,
-        labelX: (e.x + e.width + o.x) / 2,
+        labelX: (e.x + e.width + s.x) / 2,
         labelY: l,
         isSnapTarget: i
       });
-    } else if (s === "top") {
-      const a = Math.max(e.x, o.x), r = Math.min(e.x + e.width, o.x + o.width), l = (a + r) / 2;
+    } else if (o === "top") {
+      const a = Math.max(e.x, s.x), r = Math.min(e.x + e.width, s.x + s.width), l = (a + r) / 2;
       t.push({
         type: "vertical",
         distance: Math.round(n),
         x: l,
-        y1: o.y + o.height,
+        y1: s.y + s.height,
         y2: e.y,
         labelX: l,
-        labelY: (o.y + o.height + e.y) / 2,
+        labelY: (s.y + s.height + e.y) / 2,
         isSnapTarget: i
       });
-    } else if (s === "bottom") {
-      const a = Math.max(e.x, o.x), r = Math.min(e.x + e.width, o.x + o.width), l = (a + r) / 2;
+    } else if (o === "bottom") {
+      const a = Math.max(e.x, s.x), r = Math.min(e.x + e.width, s.x + s.width), l = (a + r) / 2;
       t.push({
         type: "vertical",
         distance: Math.round(n),
         x: l,
         y1: e.y + e.height,
-        y2: o.y,
+        y2: s.y,
         labelX: l,
-        labelY: (e.y + e.height + o.y) / 2,
+        labelY: (e.y + e.height + s.y) / 2,
         isSnapTarget: i
       });
     }
   }
 }
-const Wt = $t("ArtboardRenderer"), We = {
+const Wt = $t("ArtboardRenderer"), Fe = {
   showLabel: !0,
   showBorder: !0,
   borderColor: "",
@@ -1965,13 +2020,13 @@ const Wt = $t("ArtboardRenderer"), We = {
 };
 class Jt {
   constructor(t = {}) {
-    this.options = { ...We, ...t };
+    this.options = { ...Fe, ...t };
   }
   /**
    * Render an artboard
    */
-  render(t, e, o = !1) {
-    t.save(), this.renderBackground(t, e), this.options.showBorder && this.renderBorder(t, e, o), this.options.showLabel && this.renderLabel(t, e, o), t.restore();
+  render(t, e, s = !1) {
+    t.save(), this.renderBackground(t, e), this.options.showBorder && this.renderBorder(t, e, s), this.options.showLabel && this.renderLabel(t, e, s), t.restore();
   }
   /**
    * Render artboard background
@@ -1987,69 +2042,69 @@ class Jt {
    * Renders preset color as base layer, then texture on top
    */
   renderTextureBackground(t, e) {
-    const o = Bt.getTexture(e.backgroundTexture), n = Bt.getTexturePresetColor(e.backgroundTexture);
-    if (t.fillStyle = n, t.fillRect(e.x, e.y, e.width, e.height), !o || !o.complete) {
-      Bt.loadTexture(e.backgroundTexture).catch((s) => {
-        Wt.error("Failed to load texture:", s);
+    const s = Bt.getTexture(e.backgroundTexture), n = Bt.getTexturePresetColor(e.backgroundTexture);
+    if (t.fillStyle = n, t.fillRect(e.x, e.y, e.width, e.height), !s || !s.complete) {
+      Bt.loadTexture(e.backgroundTexture).catch((o) => {
+        Wt.error("Failed to load texture:", o);
       });
       return;
     }
-    t.save(), t.beginPath(), t.rect(e.x, e.y, e.width, e.height), t.clip(), t.drawImage(o, e.x, e.y, e.width, e.height), t.restore();
+    t.save(), t.beginPath(), t.rect(e.x, e.y, e.width, e.height), t.clip(), t.drawImage(s, e.x, e.y, e.width, e.height), t.restore();
   }
   /**
    * Render a checkerboard pattern for transparent backgrounds
    */
-  renderCheckerboard(t, e, o, n, s) {
+  renderCheckerboard(t, e, s, n, o) {
     const a = "#ffffff", r = "#d0d0d0";
-    t.save(), t.beginPath(), t.rect(e, o, n, s), t.clip(), t.fillStyle = a, t.fillRect(e, o, n, s), t.fillStyle = r;
-    for (let l = 0; l < Math.ceil(s / 16); l++)
+    t.save(), t.beginPath(), t.rect(e, s, n, o), t.clip(), t.fillStyle = a, t.fillRect(e, s, n, o), t.fillStyle = r;
+    for (let l = 0; l < Math.ceil(o / 16); l++)
       for (let h = 0; h < Math.ceil(n / 16); h++)
-        (l + h) % 2 === 1 && t.fillRect(e + h * 16, o + l * 16, 16, 16);
+        (l + h) % 2 === 1 && t.fillRect(e + h * 16, s + l * 16, 16, 16);
     t.restore();
   }
   /**
    * Render artboard border (respects clipShape and borderRadius option)
    */
-  renderBorder(t, e, o) {
-    const { x: n, y: s, width: i, height: a, clipShape: r } = e, l = this.options.borderColor || ae(), h = this.options.selectedBorderColor || tt();
-    if (t.strokeStyle = o ? h : l, t.lineWidth = o ? this.options.selectedBorderWidth : this.options.borderWidth, t.beginPath(), !r || r === "rectangle")
+  renderBorder(t, e, s) {
+    const { x: n, y: o, width: i, height: a, clipShape: r } = e, l = this.options.borderColor || ae(), h = this.options.selectedBorderColor || et();
+    if (t.strokeStyle = s ? h : l, t.lineWidth = s ? this.options.selectedBorderWidth : this.options.borderWidth, t.beginPath(), !r || r === "rectangle")
       if (this.options.borderRadius > 0) {
         const c = Math.min(this.options.borderRadius, Math.min(i, a) / 2);
-        this.roundedRect(t, n, s, i, a, c);
+        this.roundedRect(t, n, o, i, a, c);
       } else
-        t.rect(n, s, i, a);
+        t.rect(n, o, i, a);
     else if (r === "circle") {
-      const c = n + i / 2, d = s + a / 2, u = Math.min(i, a) / 2;
-      t.arc(c, d, u, 0, Math.PI * 2);
+      const c = n + i / 2, d = o + a / 2, f = Math.min(i, a) / 2;
+      t.arc(c, d, f, 0, Math.PI * 2);
     } else if (typeof r == "object" && r.type === "rounded") {
       const c = Math.min(r.radius, Math.min(i, a) / 2);
-      this.roundedRect(t, n, s, i, a, c);
+      this.roundedRect(t, n, o, i, a, c);
     } else if (typeof r == "object" && r.type === "path")
       try {
         const c = new Path2D(r.d);
-        t.save(), t.translate(n, s), t.stroke(c), t.restore();
+        t.save(), t.translate(n, o), t.stroke(c), t.restore();
         return;
       } catch (c) {
-        Wt.warn("Invalid SVG path for border, falling back to rectangle:", c), t.rect(n, s, i, a);
+        Wt.warn("Invalid SVG path for border, falling back to rectangle:", c), t.rect(n, o, i, a);
       }
     t.stroke();
   }
   /**
    * Render artboard label (name + dimensions)
    */
-  renderLabel(t, e, o) {
-    const n = this.options.labelFontSize, s = this.options.labelPadding, i = `${e.name} (${Math.round(e.width)} × ${Math.round(e.height)})`, a = e.x, r = e.y - s;
+  renderLabel(t, e, s) {
+    const n = this.options.labelFontSize, o = this.options.labelPadding, i = `${e.name} (${Math.round(e.width)} × ${Math.round(e.height)})`, a = e.x, r = e.y - o;
     t.font = `${n}px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`;
-    const l = this.options.selectedBorderColor || tt(), h = this.options.labelColor || re();
-    t.fillStyle = o ? l : h, t.textAlign = "left", t.textBaseline = "bottom", t.fillText(i, a, r);
+    const l = this.options.selectedBorderColor || et(), h = this.options.labelColor || re();
+    t.fillStyle = s ? l : h, t.textAlign = "left", t.textBaseline = "bottom", t.fillText(i, a, r);
   }
   /**
    * Render multiple artboards
    */
-  renderMultiple(t, e, o) {
+  renderMultiple(t, e, s) {
     e.forEach((n) => {
-      const s = n.id === o;
-      this.render(t, n, s);
+      const o = n.id === s;
+      this.render(t, n, o);
     });
   }
   /**
@@ -2065,26 +2120,26 @@ class Jt {
    * If borderRadius option is set and no special clipShape, uses rounded rectangle
    */
   applyClipPath(t, e) {
-    const { x: o, y: n, width: s, height: i, clipShape: a } = e;
+    const { x: s, y: n, width: o, height: i, clipShape: a } = e;
     if (this.options.borderRadius > 0, t.beginPath(), !a || a === "rectangle")
       if (this.options.borderRadius > 0) {
-        const r = Math.min(this.options.borderRadius, Math.min(s, i) / 2);
-        this.roundedRect(t, o, n, s, i, r);
+        const r = Math.min(this.options.borderRadius, Math.min(o, i) / 2);
+        this.roundedRect(t, s, n, o, i, r);
       } else
-        t.rect(o, n, s, i);
+        t.rect(s, n, o, i);
     else if (a === "circle") {
-      const r = o + s / 2, l = n + i / 2, h = Math.min(s, i) / 2;
+      const r = s + o / 2, l = n + i / 2, h = Math.min(o, i) / 2;
       t.arc(r, l, h, 0, Math.PI * 2);
     } else if (typeof a == "object" && a.type === "rounded") {
-      const r = Math.min(a.radius, Math.min(s, i) / 2);
-      this.roundedRect(t, o, n, s, i, r);
+      const r = Math.min(a.radius, Math.min(o, i) / 2);
+      this.roundedRect(t, s, n, o, i, r);
     } else if (typeof a == "object" && a.type === "path")
       try {
         const r = new Path2D(a.d);
-        t.translate(o, n), t.clip(r), t.translate(-o, -n);
+        t.translate(s, n), t.clip(r), t.translate(-s, -n);
         return;
       } catch (r) {
-        Wt.warn("Invalid SVG path, falling back to rectangle:", r), t.rect(o, n, s, i);
+        Wt.warn("Invalid SVG path, falling back to rectangle:", r), t.rect(s, n, o, i);
       }
     t.clip();
   }
@@ -2092,8 +2147,8 @@ class Jt {
    * Draw a rounded rectangle path
    * Helper method for rounded clip shapes
    */
-  roundedRect(t, e, o, n, s, i) {
-    typeof t.roundRect == "function" ? t.roundRect(e, o, n, s, i) : (t.moveTo(e + i, o), t.lineTo(e + n - i, o), t.arcTo(e + n, o, e + n, o + i, i), t.lineTo(e + n, o + s - i), t.arcTo(e + n, o + s, e + n - i, o + s, i), t.lineTo(e + i, o + s), t.arcTo(e, o + s, e, o + s - i, i), t.lineTo(e, o + i), t.arcTo(e, o, e + i, o, i));
+  roundedRect(t, e, s, n, o, i) {
+    typeof t.roundRect == "function" ? t.roundRect(e, s, n, o, i) : (t.moveTo(e + i, s), t.lineTo(e + n - i, s), t.arcTo(e + n, s, e + n, s + i, i), t.lineTo(e + n, s + o - i), t.arcTo(e + n, s + o, e + n - i, s + o, i), t.lineTo(e + i, s + o), t.arcTo(e, s + o, e, s + o - i, i), t.lineTo(e, s + i), t.arcTo(e, s, e + i, s, i));
   }
   /**
    * Restore after clipping
@@ -2104,21 +2159,21 @@ class Jt {
   /**
    * Render artboard outline (for dragging/resizing preview)
    */
-  renderOutline(t, e, o, n, s, i = !1) {
-    t.save(), t.setLineDash([5, 5]), t.strokeStyle = i ? "#0066cc" : "#999", t.lineWidth = 1, t.strokeRect(e, o, n, s), t.restore();
+  renderOutline(t, e, s, n, o, i = !1) {
+    t.save(), t.setLineDash([5, 5]), t.strokeStyle = i ? "#0066cc" : "#999", t.lineWidth = 1, t.strokeRect(e, s, n, o), t.restore();
   }
   /**
    * Render resize handles for artboard
    */
   renderResizeHandles(t, e) {
-    const { x: n, y: s, width: i, height: a } = e, r = [
-      { x: n, y: s },
+    const { x: n, y: o, width: i, height: a } = e, r = [
+      { x: n, y: o },
       // top-left
-      { x: n + i, y: s },
+      { x: n + i, y: o },
       // top-right
-      { x: n, y: s + a },
+      { x: n, y: o + a },
       // bottom-left
-      { x: n + i, y: s + a }
+      { x: n + i, y: o + a }
       // bottom-right
     ];
     t.save(), r.forEach((l) => {
@@ -2160,11 +2215,11 @@ class mt {
   /**
    * Render selection box layer
    */
-  static renderSelectionLayer(t, e, o, n = 1) {
-    if (!e || e.visible === !1 || o && o.getMode() === "drag" || "isGroup" in e && e.isGroup) return;
+  static renderSelectionLayer(t, e, s, n = 1) {
+    if (!e || e.visible === !1 || s && s.getMode() === "drag" || "isGroup" in e && e.isGroup) return;
     const i = e.getVisualBoundingBox(), a = e.getRotationAnchor();
-    t.save(), t.strokeStyle = tt(t.canvas), t.lineWidth = 2, t.translate(a.x * n, a.y * n), t.rotate(ht.toRadians(e.rotation)), t.translate(-a.x * n, -a.y * n);
-    const r = it.canvas.selectionPadding;
+    t.save(), t.strokeStyle = et(t.canvas), t.lineWidth = 2, t.translate(a.x * n, a.y * n), t.rotate(dt.toRadians(e.rotation)), t.translate(-a.x * n, -a.y * n);
+    const r = rt.canvas.selectionPadding;
     t.strokeRect(
       (i.x - r) * n,
       (i.y - r) * n,
@@ -2176,9 +2231,9 @@ class mt {
    * Render position and size info below the selected element
    * Only shows dimensions (width x height) while resizing
    */
-  static renderPositionSizeInfo(t, e, o, n, s = 1) {
-    if (!e || !(o != null && o.rotationHandle) || (n == null ? void 0 : n.getMode()) !== "resize") return;
-    const i = e.getVisualBoundingBox(), a = Math.round(i.width), r = Math.round(i.height), l = `${a} × ${r}`, h = o.rotationHandle, c = h.x * s, d = h.y * s - 20;
+  static renderPositionSizeInfo(t, e, s, n, o = 1) {
+    if (!e || !(s != null && s.rotationHandle) || (n == null ? void 0 : n.getMode()) !== "resize") return;
+    const i = e.getVisualBoundingBox(), a = Math.round(i.width), r = Math.round(i.height), l = `${a} × ${r}`, h = s.rotationHandle, c = h.x * o, d = h.y * o - 20;
     t.save(), t.font = "10px system-ui, -apple-system, sans-serif";
     const p = t.measureText(l).width + 12, b = 18;
     t.shadowColor = le(t.canvas), t.shadowBlur = 4, t.shadowOffsetY = 1, t.fillStyle = he(t.canvas), t.beginPath(), t.roundRect(
@@ -2193,17 +2248,17 @@ class mt {
   /**
    * Render transform handles layer
    */
-  static renderHandlesLayer(t, e, o, n, s, i, a, r = 1, l = !0) {
+  static renderHandlesLayer(t, e, s, n, o, i, a, r = 1, l = !0) {
     if (!e || e.visible === !1 || a.getMode() === "drag") return;
-    const c = i.type === "rotation-handle", d = i.type === "resize-handle" ? i.data : null, u = a.getMode() === "resize", p = u ? a.getActiveHandle() : null;
-    o.render(
+    const c = i.type === "rotation-handle", d = i.type === "resize-handle" ? i.data : null, f = a.getMode() === "resize", p = f ? a.getActiveHandle() : null;
+    s.render(
       t,
       l,
       n,
-      s,
+      o,
       c,
       d,
-      u,
+      f,
       p,
       r,
       !0
@@ -2216,8 +2271,8 @@ class _t {
    * Render hover highlights layer with fade-in animation
    * Outlines the actual element shape instead of a rectangular border
    */
-  static renderHoverLayer(t, e, o, n = !1, s = 1, i) {
-    if (e.type !== "element" || !e.data || e.data.id === o) return;
+  static renderHoverLayer(t, e, s, n = !1, o = 1, i) {
+    if (e.type !== "element" || !e.data || e.data.id === s) return;
     const a = e.data;
     t.save();
     const r = 150, l = 0.5;
@@ -2226,82 +2281,82 @@ class _t {
       const c = performance.now() - e.startTime;
       h = Math.min(c / r, 1) * l;
     }
-    t.strokeStyle = de(t.canvas), t.globalAlpha = h, t.lineWidth = 3, this.renderElementOutline(t, a, s, i), t.restore();
+    t.strokeStyle = de(t.canvas), t.globalAlpha = h, t.lineWidth = 3, this.renderElementOutline(t, a, o, i), t.restore();
   }
   /**
    * Render outline for a specific element type
    */
-  static renderElementOutline(t, e, o = 1, n) {
-    const s = e.getRotationAnchor();
-    t.translate(s.x * o, s.y * o), t.rotate(ht.toRadians(e.rotation)), t.translate(-s.x * o, -s.y * o), e.transformType === "shape" ? this.renderShapeOutline(t, e, o) : e.transformType === "image" ? this.renderImageOutline(t, e, o) : e.transformType === "group" ? this.renderGroupOutline(t, e, o) : this.renderTextOutline(t, e, o, n);
+  static renderElementOutline(t, e, s = 1, n) {
+    const o = e.getRotationAnchor();
+    t.translate(o.x * s, o.y * s), t.rotate(dt.toRadians(e.rotation)), t.translate(-o.x * s, -o.y * s), e.transformType === "shape" ? this.renderShapeOutline(t, e, s) : e.transformType === "image" ? this.renderImageOutline(t, e, s) : e.transformType === "group" ? this.renderGroupOutline(t, e, s) : this.renderTextOutline(t, e, s, n);
   }
   /**
    * Render outline for shape elements (star, rectangle, circle, etc.)
    * Creates a ring effect with a gap between the element and the stroke
    */
-  static renderShapeOutline(t, e, o) {
-    const n = e.transformData, s = n.width * o, i = n.height * o, a = 2, l = a + a / 2;
-    switch (t.save(), t.translate(e.x * o, e.y * o), t.beginPath(), n.shapeType) {
+  static renderShapeOutline(t, e, s) {
+    const n = e.transformData, o = n.width * s, i = n.height * s, a = 2, l = a + a / 2;
+    switch (t.save(), t.translate(e.x * s, e.y * s), t.beginPath(), n.shapeType) {
       case "rectangle": {
-        const h = n.borderRadius || 0, c = -(s + l * 2) / 2, d = -(i + l * 2) / 2, u = s + l * 2, p = i + l * 2;
+        const h = n.borderRadius || 0, c = -(o + l * 2) / 2, d = -(i + l * 2) / 2, f = o + l * 2, p = i + l * 2;
         if (h > 0) {
-          const b = Math.min(h / 100 * Math.min(u, p), u / 2, p / 2);
-          t.roundRect(c, d, u, p, b);
+          const b = Math.min(h / 100 * Math.min(f, p), f / 2, p / 2);
+          t.roundRect(c, d, f, p, b);
         } else
-          t.rect(c, d, u, p);
+          t.rect(c, d, f, p);
         break;
       }
       case "circle": {
-        const h = Math.min(s, i) / 2 + l;
+        const h = Math.min(o, i) / 2 + l;
         t.arc(0, 0, h, 0, Math.PI * 2);
         break;
       }
       case "ellipse": {
-        const h = (n.radiusX ?? s / 2) + l, c = (n.radiusY ?? i / 2) + l;
+        const h = (n.radiusX ?? o / 2) + l, c = (n.radiusY ?? i / 2) + l;
         t.ellipse(0, 0, h, c, 0, 0, Math.PI * 2);
         break;
       }
       case "triangle": {
-        const h = s / 2, c = i / 2, d = [
+        const h = o / 2, c = i / 2, d = [
           { x: 0, y: -c },
           // top
           { x: h, y: c },
           // bottom-right
           { x: -h, y: c }
           // bottom-left
-        ], u = d.map((b, g) => {
-          const f = d[(g + 1) % 3], y = f.x - b.x, m = f.y - b.y, T = Math.sqrt(y * y + m * m);
-          return { x: m / T, y: -y / T };
+        ], f = d.map((b, g) => {
+          const u = d[(g + 1) % 3], y = u.x - b.x, S = u.y - b.y, m = Math.sqrt(y * y + S * S);
+          return { x: S / m, y: -y / m };
         }), p = d.map((b, g) => {
-          const f = u[(g + 2) % 3], y = u[g], m = f.x + y.x, T = f.y + y.y, v = Math.sqrt(m * m + T * T), S = (m * f.x + T * f.y) / v, C = l / S;
+          const u = f[(g + 2) % 3], y = f[g], S = u.x + y.x, m = u.y + y.y, w = Math.sqrt(S * S + m * m), T = (S * u.x + m * u.y) / w, C = l / T;
           return {
-            x: b.x + m / v * C,
-            y: b.y + T / v * C
+            x: b.x + S / w * C,
+            y: b.y + m / w * C
           };
         });
         t.moveTo(p[0].x, p[0].y), t.lineTo(p[1].x, p[1].y), t.lineTo(p[2].x, p[2].y), t.closePath();
         break;
       }
       case "star": {
-        const h = n.points ?? 5, c = n.innerRadius ?? 0.4, d = Math.min(s, i) / 2 + l, u = d * c;
+        const h = n.points ?? 5, c = n.innerRadius ?? 0.4, d = Math.min(o, i) / 2 + l, f = d * c;
         for (let p = 0; p < h * 2; p++) {
-          const b = p * Math.PI / h - Math.PI / 2, g = p % 2 === 0 ? d : u, f = g * Math.cos(b), y = g * Math.sin(b);
-          p === 0 ? t.moveTo(f, y) : t.lineTo(f, y);
+          const b = p * Math.PI / h - Math.PI / 2, g = p % 2 === 0 ? d : f, u = g * Math.cos(b), y = g * Math.sin(b);
+          p === 0 ? t.moveTo(u, y) : t.lineTo(u, y);
         }
         t.closePath();
         break;
       }
       case "polygon": {
-        const h = n.sides ?? 5, c = Math.min(s, i) / 2 + l;
+        const h = n.sides ?? 5, c = Math.min(o, i) / 2 + l;
         for (let d = 0; d < h; d++) {
-          const u = d * 2 * Math.PI / h - Math.PI / 2, p = c * Math.cos(u), b = c * Math.sin(u);
+          const f = d * 2 * Math.PI / h - Math.PI / 2, p = c * Math.cos(f), b = c * Math.sin(f);
           d === 0 ? t.moveTo(p, b) : t.lineTo(p, b);
         }
         t.closePath();
         break;
       }
       case "line": {
-        const h = s / 2 + l;
+        const h = o / 2 + l;
         t.moveTo(-h, 0), t.lineTo(h, 0);
         break;
       }
@@ -2312,24 +2367,24 @@ class _t {
    * Render outline for image elements
    * Creates a ring effect with a gap between the element and the stroke
    */
-  static renderImageOutline(t, e, o) {
+  static renderImageOutline(t, e, s) {
     var b;
-    const n = e.getVisualBoundingBox(), s = n.width * o, i = n.height * o, a = ((b = e.transformData) == null ? void 0 : b.borderRadius) || 0, r = 2, h = r + r / 2;
-    t.save(), t.translate(e.x * o, e.y * o);
-    const c = -(s + h * 2) / 2, d = -(i + h * 2) / 2, u = s + h * 2, p = i + h * 2;
+    const n = e.getVisualBoundingBox(), o = n.width * s, i = n.height * s, a = ((b = e.transformData) == null ? void 0 : b.borderRadius) || 0, r = 2, h = r + r / 2;
+    t.save(), t.translate(e.x * s, e.y * s);
+    const c = -(o + h * 2) / 2, d = -(i + h * 2) / 2, f = o + h * 2, p = i + h * 2;
     if (t.beginPath(), a > 0) {
-      const g = Math.min(a / 100 * Math.min(u, p), u / 2, p / 2);
-      t.roundRect(c, d, u, p, g);
+      const g = Math.min(a / 100 * Math.min(f, p), f / 2, p / 2);
+      t.roundRect(c, d, f, p, g);
     } else
-      t.rect(c, d, u, p);
+      t.rect(c, d, f, p);
     t.stroke(), t.restore();
   }
   /**
    * Render outline for group elements
    * Creates a ring effect with a gap between the element and the stroke
    */
-  static renderGroupOutline(t, e, o) {
-    const n = e.getVisualBoundingBox(), s = 2, a = s + s / 2, r = n.x * o - a, l = n.y * o - a, h = n.width * o + a * 2, c = n.height * o + a * 2;
+  static renderGroupOutline(t, e, s) {
+    const n = e.getVisualBoundingBox(), o = 2, a = o + o / 2, r = n.x * s - a, l = n.y * s - a, h = n.width * s + a * 2, c = n.height * s + a * 2;
     t.save(), t.setLineDash([5, 5]), t.beginPath(), t.roundRect(r, l, h, c, 8), t.stroke(), t.restore();
   }
   /**
@@ -2337,9 +2392,9 @@ class _t {
    * Creates a ring effect with a gap between text and stroke (ring behind text fill)
    * Supports all transform types: custom, circle, wave, arch, etc.
    */
-  static renderTextOutline(t, e, o, n) {
-    const s = e.transformType;
-    s === "circle" || s === "wave" || s === "arch" || s === "lean" || s === "ascend" || s === "flag" ? this.renderTransformHoverRingEffect(t, e, o) : this.renderHoverRingEffect(t, e, o);
+  static renderTextOutline(t, e, s, n) {
+    const o = e.transformType;
+    o === "circle" || o === "wave" || o === "arch" || o === "lean" || o === "ascend" || o === "flag" ? this.renderTransformHoverRingEffect(t, e, s) : this.renderHoverRingEffect(t, e, s);
   }
   /**
    * HOVER RING EFFECT for straight/custom text
@@ -2352,11 +2407,11 @@ class _t {
    * - Element stroke (StrokeRenderer.ts - only when stroke.enabled = true)
    * - Selection box (dashed rectangle in element.render())
    */
-  static renderHoverRingEffect(t, e, o) {
-    t.save(), t.translate(e.x * o, e.y * o), o !== 1 && t.scale(o, o);
-    const n = e.fontSize, s = e.fontFamily, i = e.bold || !1, a = e.italic || !1, r = e.textAlign || "center", l = jt(n, s, i, a), h = n * 1.2, c = 4 / o, d = 4 / o, u = document.createElement("canvas");
-    u.width = t.canvas.width, u.height = t.canvas.height;
-    const p = u.getContext("2d");
+  static renderHoverRingEffect(t, e, s) {
+    t.save(), t.translate(e.x * s, e.y * s), s !== 1 && t.scale(s, s);
+    const n = e.fontSize, o = e.fontFamily, i = e.bold || !1, a = e.italic || !1, r = e.textAlign || "center", l = jt(n, o, i, a), h = n * 1.2, c = 4 / s, d = 4 / s, f = document.createElement("canvas");
+    f.width = t.canvas.width, f.height = t.canvas.height;
+    const p = f.getContext("2d");
     if (!p) {
       t.restore();
       return;
@@ -2364,86 +2419,86 @@ class _t {
     p.setTransform(t.getTransform()), p.textBaseline = "alphabetic", p.lineJoin = "round";
     const b = e.getRichText ? e.getRichText() : null;
     if (b) {
-      const g = qt(b), f = [], y = [];
-      g.forEach((v) => {
+      const g = qt(b), u = [], y = [];
+      g.forEach((w) => {
         if (e.transformType === "custom" && e.transformData) {
-          const S = e.transformData.width - ft * 2, C = Ut(v, S, {
+          const T = e.transformData.width - gt * 2, C = Ut(w, T, {
             fontSize: n,
-            fontFamily: s,
+            fontFamily: o,
             bold: i,
             italic: a
           });
           C.forEach((R, x) => {
-            f.push(R), y.push({
+            u.push(R), y.push({
               isParagraphStart: x === 0,
               isParagraphEnd: x === C.length - 1
             });
           });
         } else
-          f.push(v), y.push({
+          u.push(w), y.push({
             isParagraphStart: !0,
             isParagraphEnd: !0
           });
       });
-      let m;
-      f.length === 0 ? m = 0 : f.length === 1 ? m = l.height : m = (f.length - 1) * h + l.height;
-      const T = -m / 2;
-      f.forEach((v, S) => {
-        var D, F;
-        const C = y[S].isParagraphStart, R = y[S].isParagraphEnd;
+      let S;
+      u.length === 0 ? S = 0 : u.length === 1 ? S = l.height : S = (u.length - 1) * h + l.height;
+      const m = -S / 2;
+      u.forEach((w, T) => {
+        var D, Q;
+        const C = y[T].isParagraphStart, R = y[T].isParagraphEnd;
         let x = 0;
-        const P = v.map((E) => E.text).join(""), w = ((D = P.match(/^ +/)) == null ? void 0 : D[0].length) || 0, A = ((F = P.match(/ +$/)) == null ? void 0 : F[0].length) || 0;
+        const P = w.map((E) => E.text).join(""), M = ((D = P.match(/^ +/)) == null ? void 0 : D[0].length) || 0, A = ((Q = P.match(/ +$/)) == null ? void 0 : Q[0].length) || 0;
         let B = 0;
-        v.forEach((E) => {
-          const $ = E.style.fontSize !== void 0 ? E.style.fontSize : n, j = E.style.fontFamily !== void 0 ? E.style.fontFamily : s, J = E.style.bold !== void 0 ? E.style.bold : i, X = E.style.italic !== void 0 ? E.style.italic : a;
+        w.forEach((E) => {
+          const j = E.style.fontSize !== void 0 ? E.style.fontSize : n, _ = E.style.fontFamily !== void 0 ? E.style.fontFamily : o, $ = E.style.bold !== void 0 ? E.style.bold : i, Y = E.style.italic !== void 0 ? E.style.italic : a;
           let k = E.text;
-          const I = B, _ = B + E.text.length;
-          if (!C && w > 0 && I < w) {
-            const H = Math.min(w - I, E.text.length);
-            k = k.substring(H);
+          const H = B, X = B + E.text.length;
+          if (!C && M > 0 && H < M) {
+            const I = Math.min(M - H, E.text.length);
+            k = k.substring(I);
           }
           if (!R && A > 0) {
-            const H = P.length - A;
-            if (_ > H) {
-              const V = !C && I < w ? Math.min(w - I, E.text.length) : 0, Y = Math.max(0, H - I - V);
-              k = k.substring(0, Y);
+            const I = P.length - A;
+            if (X > I) {
+              const z = !C && H < M ? Math.min(M - H, E.text.length) : 0, G = Math.max(0, I - H - z);
+              k = k.substring(0, G);
             }
           }
-          k.length > 0 && (t.save(), t.font = Ht($, j, J, X), x += t.measureText(k).width, t.restore()), B += E.text.length;
+          k.length > 0 && (t.save(), t.font = Ht(j, _, $, Y), x += t.measureText(k).width, t.restore()), B += E.text.length;
         });
-        const L = e.transformType === "custom" && e.transformData ? e.transformData.width - ft * 2 : void 0;
+        const L = e.transformType === "custom" && e.transformData ? e.transformData.width - gt * 2 : void 0;
         let W;
         r === "center" ? W = -x / 2 : r === "right" ? W = L !== void 0 ? L / 2 - x : -x : W = L !== void 0 ? -L / 2 : 0;
-        const O = T + l.ascent + S * h;
-        B = 0, v.forEach((E) => {
-          const $ = E.style.fontSize !== void 0 ? E.style.fontSize : n, j = E.style.fontFamily !== void 0 ? E.style.fontFamily : s;
+        const O = m + l.ascent + T * h;
+        B = 0, w.forEach((E) => {
+          const j = E.style.fontSize !== void 0 ? E.style.fontSize : n, _ = E.style.fontFamily !== void 0 ? E.style.fontFamily : o;
           E.style.color !== void 0 ? E.style.color : e.color;
-          const J = E.style.bold !== void 0 ? E.style.bold : i, X = E.style.italic !== void 0 ? E.style.italic : a;
+          const $ = E.style.bold !== void 0 ? E.style.bold : i, Y = E.style.italic !== void 0 ? E.style.italic : a;
           let k = E.text;
-          const I = B, _ = B + E.text.length;
-          if (!C && w > 0 && I < w) {
-            const H = Math.min(w - I, E.text.length);
-            k = k.substring(H);
+          const H = B, X = B + E.text.length;
+          if (!C && M > 0 && H < M) {
+            const I = Math.min(M - H, E.text.length);
+            k = k.substring(I);
           }
           if (!R && A > 0) {
-            const H = P.length - A;
-            if (_ > H) {
-              const V = !C && I < w ? Math.min(w - I, E.text.length) : 0, Y = Math.max(0, H - I - V);
-              k = k.substring(0, Y);
+            const I = P.length - A;
+            if (X > I) {
+              const z = !C && H < M ? Math.min(M - H, E.text.length) : 0, G = Math.max(0, I - H - z);
+              k = k.substring(0, G);
             }
           }
-          B += E.text.length, k.length > 0 && (p.font = Ht($, j, J, X), p.textAlign = "left", p.globalCompositeOperation = "source-over", p.strokeStyle = t.strokeStyle, p.globalAlpha = Math.min(t.globalAlpha * 1.6, 0.8), p.lineWidth = (d + c) * 2, p.strokeText(k, W, O), p.globalCompositeOperation = "destination-out", p.globalAlpha = 1, p.lineWidth = d * 2, p.strokeText(k, W, O), p.fillText(k, W, O), W += p.measureText(k).width);
+          B += E.text.length, k.length > 0 && (p.font = Ht(j, _, $, Y), p.textAlign = "left", p.globalCompositeOperation = "source-over", p.strokeStyle = t.strokeStyle, p.globalAlpha = Math.min(t.globalAlpha * 1.6, 0.8), p.lineWidth = (d + c) * 2, p.strokeText(k, W, O), p.globalCompositeOperation = "destination-out", p.globalAlpha = 1, p.lineWidth = d * 2, p.strokeText(k, W, O), p.fillText(k, W, O), W += p.measureText(k).width);
         });
       });
     } else {
-      t.font = Ht(n, s, i, a), p.font = t.font, p.textAlign = r;
-      let g, f;
+      t.font = Ht(n, o, i, a), p.font = t.font, p.textAlign = r;
+      let g, u;
       if (e.transformType === "custom" && e.transformData) {
-        const C = e.transformData.width - ft * 2, { lines: R } = fe(
+        const C = e.transformData.width - gt * 2, { lines: R } = fe(
           e.text,
           C,
           n,
-          s,
+          o,
           i,
           a,
           void 0,
@@ -2457,17 +2512,17 @@ class _t {
 `);
         g = Te(g, C);
       }
-      g.length === 0 ? f = 0 : g.length === 1 ? f = l.height : f = (g.length - 1) * h + l.height;
-      const y = -f / 2, m = e.text.includes(`
-`), T = e.transformType === "custom" && e.transformData ? e.transformData.width : 0, v = -T / 2;
-      let S = v + ft;
-      r === "center" ? S = v + T / 2 : r === "right" && (S = v + T - ft), g.forEach((C, R) => {
-        const x = y + l.ascent + R * h, P = m || R === 0, w = m || R === g.length - 1;
+      g.length === 0 ? u = 0 : g.length === 1 ? u = l.height : u = (g.length - 1) * h + l.height;
+      const y = -u / 2, S = e.text.includes(`
+`), m = e.transformType === "custom" && e.transformData ? e.transformData.width : 0, w = -m / 2;
+      let T = w + gt;
+      r === "center" ? T = w + m / 2 : r === "right" && (T = w + m - gt), g.forEach((C, R) => {
+        const x = y + l.ascent + R * h, P = S || R === 0, M = S || R === g.length - 1;
         let A = C;
-        P || (A = A.replace(/^ +/, "")), w || (A = A.replace(/ +$/, "")), p.globalCompositeOperation = "source-over", p.strokeStyle = t.strokeStyle, p.globalAlpha = Math.min(t.globalAlpha * 1.6, 0.8), p.lineWidth = (d + c) * 2, p.lineJoin = "round", p.strokeText(A, S, x), p.globalCompositeOperation = "destination-out", p.globalAlpha = 1, p.lineWidth = d * 2, p.strokeText(A, S, x), p.fillText(A, S, x);
+        P || (A = A.replace(/^ +/, "")), M || (A = A.replace(/ +$/, "")), p.globalCompositeOperation = "source-over", p.strokeStyle = t.strokeStyle, p.globalAlpha = Math.min(t.globalAlpha * 1.6, 0.8), p.lineWidth = (d + c) * 2, p.lineJoin = "round", p.strokeText(A, T, x), p.globalCompositeOperation = "destination-out", p.globalAlpha = 1, p.lineWidth = d * 2, p.strokeText(A, T, x), p.fillText(A, T, x);
       });
     }
-    t.setTransform(1, 0, 0, 1, 0, 0), t.drawImage(u, 0, 0), t.restore();
+    t.setTransform(1, 0, 0, 1, 0, 0), t.drawImage(f, 0, 0), t.restore();
   }
   /**
    * HOVER RING EFFECT for transformed text (circle, wave, arch, lean, ascend, flag)
@@ -2480,34 +2535,34 @@ class _t {
    * - Element stroke (StrokeRenderer.ts - only when stroke.enabled = true)
    * - Selection box (dashed outline shown by each transform's render() method)
    */
-  static renderTransformHoverRingEffect(t, e, o) {
-    t.save(), t.translate(e.x * o, e.y * o), o !== 1 && t.scale(o, o), t.rotate(-e.rotation * Math.PI / 180);
-    const n = 4 / o, s = 4 / o, i = document.createElement("canvas");
+  static renderTransformHoverRingEffect(t, e, s) {
+    t.save(), t.translate(e.x * s, e.y * s), s !== 1 && t.scale(s, s), t.rotate(-e.rotation * Math.PI / 180);
+    const n = 4 / s, o = 4 / s, i = document.createElement("canvas");
     i.width = t.canvas.width, i.height = t.canvas.height;
     const a = i.getContext("2d");
     if (!a) {
       t.restore();
       return;
     }
-    a.setTransform(t.getTransform()), this.renderTransformWithHoverEffect(a, e, n, s, t.strokeStyle), t.setTransform(1, 0, 0, 1, 0, 0), t.drawImage(i, 0, 0), t.restore();
+    a.setTransform(t.getTransform()), this.renderTransformWithHoverEffect(a, e, n, o, t.strokeStyle), t.setTransform(1, 0, 0, 1, 0, 0), t.drawImage(i, 0, 0), t.restore();
   }
   /**
    * Helper to render text along a transform path with hover effect
    */
-  static renderTransformWithHoverEffect(t, e, o, n, s) {
+  static renderTransformWithHoverEffect(t, e, s, n, o) {
     const i = e, a = i.fontSize, r = i.fontFamily, l = i.bold || !1, h = i.italic || !1, c = l ? "bold" : "normal", d = h ? "italic" : "normal";
     if (t.font = `${d} ${c} ${a}px ${r}`, t.textAlign = "center", t.textBaseline = "middle", i.transformType === "lean") {
       const y = -i.transformData.leanAmount * Math.PI / 4;
-      t.transform(1, 0, Math.tan(y), 1, 0, 0), t.globalCompositeOperation = "source-over", t.strokeStyle = s, t.globalAlpha = 0.8, t.lineWidth = (n + o) * 2, t.lineJoin = "round", t.strokeText(i.text, 0, 0), t.globalCompositeOperation = "destination-out", t.globalAlpha = 1, t.lineWidth = n * 2, t.strokeText(i.text, 0, 0), t.fillText(i.text, 0, 0);
+      t.transform(1, 0, Math.tan(y), 1, 0, 0), t.globalCompositeOperation = "source-over", t.strokeStyle = o, t.globalAlpha = 0.8, t.lineWidth = (n + s) * 2, t.lineJoin = "round", t.strokeText(i.text, 0, 0), t.globalCompositeOperation = "destination-out", t.globalAlpha = 1, t.lineWidth = n * 2, t.strokeText(i.text, 0, 0), t.fillText(i.text, 0, 0);
       return;
     }
-    const u = i.text.split(""), p = u.map((f) => t.measureText(f).width), b = this.calculateCharPositions(e, u, p), g = (f) => {
-      t.translate(f.x, f.y), f.angle && t.rotate(f.angle), f.skewY && t.transform(1, f.skewY, 0, 1, 0, 0);
+    const f = i.text.split(""), p = f.map((u) => t.measureText(u).width), b = this.calculateCharPositions(e, f, p), g = (u) => {
+      t.translate(u.x, u.y), u.angle && t.rotate(u.angle), u.skewY && t.transform(1, u.skewY, 0, 1, 0, 0);
     };
-    t.globalCompositeOperation = "source-over", t.strokeStyle = s, t.globalAlpha = 0.8, t.lineWidth = (n + o) * 2, t.lineJoin = "round", b.forEach((f, y) => {
-      t.save(), g(f), t.strokeText(u[y], 0, 0), t.restore();
-    }), t.globalCompositeOperation = "destination-out", t.globalAlpha = 1, t.lineWidth = n * 2, b.forEach((f, y) => {
-      t.save(), g(f), t.strokeText(u[y], 0, 0), t.fillText(u[y], 0, 0), t.restore();
+    t.globalCompositeOperation = "source-over", t.strokeStyle = o, t.globalAlpha = 0.8, t.lineWidth = (n + s) * 2, t.lineJoin = "round", b.forEach((u, y) => {
+      t.save(), g(u), t.strokeText(f[y], 0, 0), t.restore();
+    }), t.globalCompositeOperation = "destination-out", t.globalAlpha = 1, t.lineWidth = n * 2, b.forEach((u, y) => {
+      t.save(), g(u), t.strokeText(f[y], 0, 0), t.fillText(f[y], 0, 0), t.restore();
     });
   }
   /**
@@ -2515,26 +2570,26 @@ class _t {
    *
    * Also used by EditModeRenderer for cursor positioning on transformed text.
    */
-  static calculateCharPositions(t, e, o) {
-    const n = t.transformType, s = t.transformData;
-    return n === "circle" ? this.calculateCirclePositions(s, e, o) : n === "wave" ? this.calculateWavePositions(t, e, o, s) : n === "arch" ? this.calculateArchPositions(t, e, o, s) : n === "lean" ? this.calculateLeanPositions(e, o) : n === "ascend" ? this.calculateAscendPositions(t, e, o, s) : n === "flag" ? this.calculateFlagPositions(t, e, o, s) : e.map(() => ({ x: 0, y: 0, angle: 0 }));
+  static calculateCharPositions(t, e, s) {
+    const n = t.transformType, o = t.transformData;
+    return n === "circle" ? this.calculateCirclePositions(o, e, s) : n === "wave" ? this.calculateWavePositions(t, e, s, o) : n === "arch" ? this.calculateArchPositions(t, e, s, o) : n === "lean" ? this.calculateLeanPositions(e, s) : n === "ascend" ? this.calculateAscendPositions(t, e, s, o) : n === "flag" ? this.calculateFlagPositions(t, e, s, o) : e.map(() => ({ x: 0, y: 0, angle: 0 }));
   }
   /**
    * Calculate positions for circle transform
    */
-  static calculateCirclePositions(t, e, o) {
-    const n = [], s = o.reduce((a, r) => a + r, 0), i = t.radius * t.scale;
+  static calculateCirclePositions(t, e, s) {
+    const n = [], o = s.reduce((a, r) => a + r, 0), i = t.radius * t.scale;
     if (t.reverse) {
-      let a = Math.PI / 2 + s / (2 * i);
+      let a = Math.PI / 2 + o / (2 * i);
       e.forEach((r, l) => {
-        const c = o[l] / i, d = Math.cos(a - c / 2) * i, u = Math.sin(a - c / 2) * i, p = a - c / 2 - Math.PI / 2;
-        n.push({ x: d, y: u, angle: p }), a -= c;
+        const c = s[l] / i, d = Math.cos(a - c / 2) * i, f = Math.sin(a - c / 2) * i, p = a - c / 2 - Math.PI / 2;
+        n.push({ x: d, y: f, angle: p }), a -= c;
       });
     } else {
-      let a = -Math.PI / 2 - s / (2 * i);
+      let a = -Math.PI / 2 - o / (2 * i);
       e.forEach((r, l) => {
-        const c = o[l] / i, d = Math.cos(a + c / 2) * i, u = Math.sin(a + c / 2) * i, p = a + c / 2 + Math.PI / 2;
-        n.push({ x: d, y: u, angle: p }), a += c;
+        const c = s[l] / i, d = Math.cos(a + c / 2) * i, f = Math.sin(a + c / 2) * i, p = a + c / 2 + Math.PI / 2;
+        n.push({ x: d, y: f, angle: p }), a += c;
       });
     }
     return n;
@@ -2542,99 +2597,99 @@ class _t {
   /**
    * Calculate positions for wave transform
    */
-  static calculateWavePositions(t, e, o, n) {
-    const s = [];
-    let a = -o.reduce((r, l) => r + l, 0) / 2;
+  static calculateWavePositions(t, e, s, n) {
+    const o = [];
+    let a = -s.reduce((r, l) => r + l, 0) / 2;
     return e.forEach((r, l) => {
-      const h = o[l], c = a + h / 2, d = c / (n.width / 2), u = n.amplitude * t.fontSize * Math.sin(n.frequency * Math.PI * d), p = n.amplitude * n.frequency * Math.PI * Math.cos(n.frequency * Math.PI * d);
-      s.push({ x: c, y: u, angle: 0, skewY: p * ge }), a += h;
-    }), s;
+      const h = s[l], c = a + h / 2, d = c / (n.width / 2), f = n.amplitude * t.fontSize * Math.sin(n.frequency * Math.PI * d), p = n.amplitude * n.frequency * Math.PI * Math.cos(n.frequency * Math.PI * d);
+      o.push({ x: c, y: f, angle: 0, skewY: p * ge }), a += h;
+    }), o;
   }
   /**
    * Calculate positions for arch transform
    */
-  static calculateArchPositions(t, e, o, n) {
-    const s = [], i = o.reduce((l, h) => l + h, 0), a = n.width / 2;
+  static calculateArchPositions(t, e, s, n) {
+    const o = [], i = s.reduce((l, h) => l + h, 0), a = n.width / 2;
     let r = -i / 2;
     return e.forEach((l, h) => {
-      const c = o[h], d = r + c / 2, u = d / a, p = (Math.pow(u, 2) - 1) * n.archHeight * t.fontSize, b = 2 * u * n.archHeight;
-      s.push({ x: d, y: p, angle: 0, skewY: b * 0.3 }), r += c;
-    }), s;
+      const c = s[h], d = r + c / 2, f = d / a, p = (Math.pow(f, 2) - 1) * n.archHeight * t.fontSize, b = 2 * f * n.archHeight;
+      o.push({ x: d, y: p, angle: 0, skewY: b * 0.3 }), r += c;
+    }), o;
   }
   /**
    * Calculate positions for lean transform
    */
   static calculateLeanPositions(t, e) {
-    const o = [];
-    let s = -e.reduce((i, a) => i + a, 0) / 2;
+    const s = [];
+    let o = -e.reduce((i, a) => i + a, 0) / 2;
     return t.forEach((i, a) => {
-      const r = e[a], l = s + r / 2;
-      o.push({ x: l, y: 0, angle: 0 }), s += r;
-    }), o;
+      const r = e[a], l = o + r / 2;
+      s.push({ x: l, y: 0, angle: 0 }), o += r;
+    }), s;
   }
   /**
    * Calculate positions for ascend transform
    */
-  static calculateAscendPositions(t, e, o, n) {
-    const s = [], i = o.reduce((h, c) => h + c, 0), a = n.ascendAngle * Math.PI / 180, r = Math.tan(a);
+  static calculateAscendPositions(t, e, s, n) {
+    const o = [], i = s.reduce((h, c) => h + c, 0), a = n.ascendAngle * Math.PI / 180, r = Math.tan(a);
     let l = -i / 2;
     return e.forEach((h, c) => {
-      const d = o[c], u = l + d / 2, p = u * r;
-      s.push({ x: u, y: p, angle: 0, skewY: r * 1 }), l += d;
-    }), s;
+      const d = s[c], f = l + d / 2, p = f * r;
+      o.push({ x: f, y: p, angle: 0, skewY: r * 1 }), l += d;
+    }), o;
   }
   /**
    * Calculate positions for flag transform
    */
-  static calculateFlagPositions(t, e, o, n) {
-    const s = [];
-    let a = -o.reduce((r, l) => r + l, 0) / 2;
+  static calculateFlagPositions(t, e, s, n) {
+    const o = [];
+    let a = -s.reduce((r, l) => r + l, 0) / 2;
     return e.forEach((r, l) => {
-      const h = o[l], c = a + h / 2, d = c / (n.width / 2), u = Math.abs(d), p = n.amplitude * u, b = p * t.fontSize * Math.sin(n.frequency * Math.PI * d), g = p * n.frequency * Math.PI * Math.cos(n.frequency * Math.PI * d), f = n.amplitude * Math.sign(d) * Math.sin(n.frequency * Math.PI * d), y = g + f;
-      s.push({ x: c, y: b, angle: 0, skewY: y * 0.3 }), a += h;
-    }), s;
+      const h = s[l], c = a + h / 2, d = c / (n.width / 2), f = Math.abs(d), p = n.amplitude * f, b = p * t.fontSize * Math.sin(n.frequency * Math.PI * d), g = p * n.frequency * Math.PI * Math.cos(n.frequency * Math.PI * d), u = n.amplitude * Math.sign(d) * Math.sin(n.frequency * Math.PI * d), y = g + u;
+      o.push({ x: c, y: b, angle: 0, skewY: y * 0.3 }), a += h;
+    }), o;
   }
 }
-class Ct {
+class Mt {
   /**
    * Render snap guides layer
    */
   static renderSnapGuidesLayer(t, e = []) {
-    e.length !== 0 && (t.save(), t.strokeStyle = tt(t.canvas), t.lineWidth = it.canvas.snapGuideWidth, t.setLineDash(it.canvas.snapGuideDash), e.forEach((o) => {
-      t.beginPath(), o.type === "vertical" ? (t.moveTo(o.x ?? 0, o.y1 ?? 0), t.lineTo(o.x ?? 0, o.y2 ?? 0)) : o.type === "horizontal" ? (t.moveTo(o.x1 ?? 0, o.y ?? 0), t.lineTo(o.x2 ?? 0, o.y ?? 0)) : (t.moveTo(o.x1 ?? 0, o.y1 ?? 0), t.lineTo(o.x2 ?? 0, o.y2 ?? 0)), t.stroke();
+    e.length !== 0 && (t.save(), t.strokeStyle = et(t.canvas), t.lineWidth = rt.canvas.snapGuideWidth, t.setLineDash(rt.canvas.snapGuideDash), e.forEach((s) => {
+      t.beginPath(), s.type === "vertical" ? (t.moveTo(s.x ?? 0, s.y1 ?? 0), t.lineTo(s.x ?? 0, s.y2 ?? 0)) : s.type === "horizontal" ? (t.moveTo(s.x1 ?? 0, s.y ?? 0), t.lineTo(s.x2 ?? 0, s.y ?? 0)) : (t.moveTo(s.x1 ?? 0, s.y1 ?? 0), t.lineTo(s.x2 ?? 0, s.y2 ?? 0)), t.stroke();
     }), t.restore());
   }
   /**
    * Render spacing indicators layer
    */
   static renderSpacingIndicatorsLayer(t, e = []) {
-    e.length !== 0 && (t.save(), t.setLineDash([]), e.forEach((o) => {
+    e.length !== 0 && (t.save(), t.setLineDash([]), e.forEach((s) => {
       const n = Ot(t.canvas);
-      if (t.strokeStyle = n, t.fillStyle = n, t.lineWidth = it.canvas.spacingIndicatorWidth, t.beginPath(), o.type === "horizontal") {
-        const s = o.x1 ?? 0, i = o.x2 ?? 0, a = o.y ?? 0;
-        t.moveTo(s, a), t.lineTo(i, a), t.stroke();
+      if (t.strokeStyle = n, t.fillStyle = n, t.lineWidth = rt.canvas.spacingIndicatorWidth, t.beginPath(), s.type === "horizontal") {
+        const o = s.x1 ?? 0, i = s.x2 ?? 0, a = s.y ?? 0;
+        t.moveTo(o, a), t.lineTo(i, a), t.stroke();
         const r = 6;
-        t.beginPath(), t.moveTo(s, a - r), t.lineTo(s, a + r), t.stroke(), t.beginPath(), t.moveTo(i, a - r), t.lineTo(i, a + r), t.stroke();
-        const l = o.labelX, h = o.labelY;
-        this.renderDistanceLabel(t, l, h, o.distance);
-      } else if (o.type === "vertical") {
-        const s = o.x ?? 0, i = o.y1 ?? 0, a = o.y2 ?? 0;
-        t.moveTo(s, i), t.lineTo(s, a), t.stroke();
+        t.beginPath(), t.moveTo(o, a - r), t.lineTo(o, a + r), t.stroke(), t.beginPath(), t.moveTo(i, a - r), t.lineTo(i, a + r), t.stroke();
+        const l = s.labelX, h = s.labelY;
+        this.renderDistanceLabel(t, l, h, s.distance);
+      } else if (s.type === "vertical") {
+        const o = s.x ?? 0, i = s.y1 ?? 0, a = s.y2 ?? 0;
+        t.moveTo(o, i), t.lineTo(o, a), t.stroke();
         const r = 6;
-        t.beginPath(), t.moveTo(s - r, i), t.lineTo(s + r, i), t.stroke(), t.beginPath(), t.moveTo(s - r, a), t.lineTo(s + r, a), t.stroke();
-        const l = o.labelX, h = o.labelY;
-        this.renderDistanceLabel(t, l, h, o.distance);
+        t.beginPath(), t.moveTo(o - r, i), t.lineTo(o + r, i), t.stroke(), t.beginPath(), t.moveTo(o - r, a), t.lineTo(o + r, a), t.stroke();
+        const l = s.labelX, h = s.labelY;
+        this.renderDistanceLabel(t, l, h, s.distance);
       }
     }), t.restore());
   }
   /**
    * Render a distance label with background
    */
-  static renderDistanceLabel(t, e, o, n) {
-    const s = `${n}`;
-    t.font = `600 ${it.canvas.spacingLabelFontSize}px ${it.canvas.spacingLabelFontFamily}`;
-    const a = t.measureText(s).width, r = it.canvas.spacingLabelFontSize, l = 4, h = a + l * 2, c = r + l * 2;
-    t.fillStyle = Ot(t.canvas), t.beginPath(), t.roundRect(e - h / 2, o - c / 2, h, c, ue), t.fill(), t.fillStyle = pe, t.textAlign = "center", t.textBaseline = "middle", t.fillText(s, e, o);
+  static renderDistanceLabel(t, e, s, n) {
+    const o = `${n}`;
+    t.font = `600 ${rt.canvas.spacingLabelFontSize}px ${rt.canvas.spacingLabelFontFamily}`;
+    const a = t.measureText(o).width, r = rt.canvas.spacingLabelFontSize, l = 4, h = a + l * 2, c = r + l * 2;
+    t.fillStyle = Ot(t.canvas), t.beginPath(), t.roundRect(e - h / 2, s - c / 2, h, c, ue), t.fill(), t.fillStyle = pe, t.textAlign = "center", t.textBaseline = "middle", t.fillText(o, e, s);
   }
 }
 class Dt {
@@ -2642,32 +2697,32 @@ class Dt {
    * Render edit mode features: cursor and text selection highlight
    * This renders on the main canvas at world coordinates (same as the element)
    */
-  static renderEditModeLayer(t, e, o, n) {
+  static renderEditModeLayer(t, e, s, n) {
     if (!e || e.transformType === "image" || e.transformType === "group") return;
-    const s = e, { cursorPosition: i, selectionStart: a, selectionEnd: r, editText: l, editRichText: h, cursorOpacity: c, isTouchDevice: d, selectionHandlePositionsRef: u } = o, p = n || 1, b = s.transformType;
+    const o = e, { cursorPosition: i, selectionStart: a, selectionEnd: r, editText: l, editRichText: h, cursorOpacity: c, isTouchDevice: d, selectionHandlePositionsRef: f } = s, p = n || 1, b = o.transformType;
     if (b === "circle" || b === "wave" || b === "arch" || b === "lean" || b === "ascend" || b === "flag") {
-      this.renderTransformEditModeLayer(t, s, o, p);
+      this.renderTransformEditModeLayer(t, o, s, p);
       return;
     }
-    const g = s.fontSize || 24, f = s.fontFamily || "Arial", y = s.bold || !1, m = s.italic || !1, T = s.underline || !1, v = s.strikethrough || !1, S = s.textAlign || "center";
-    t.save(), t.translate(s.x, s.y), t.rotate(-s.rotation * Math.PI / 180);
-    const C = jt(g, f, y, m), R = C.height, x = g * 1.2;
-    let P, w, A;
-    if (h && s.transformType === "custom" && s.transformData.width) {
-      const X = s.transformData.width - ft * 2;
-      A = X;
+    const g = o.fontSize || 24, u = o.fontFamily || "Arial", y = o.bold || !1, S = o.italic || !1, m = o.underline || !1, w = o.strikethrough || !1, T = o.textAlign || "center";
+    t.save(), t.translate(o.x, o.y), t.rotate(-o.rotation * Math.PI / 180);
+    const C = jt(g, u, y, S), R = C.height, x = g * 1.2;
+    let P, M, A;
+    if (h && o.transformType === "custom" && o.transformData.width) {
+      const Y = o.transformData.width - gt * 2;
+      A = Y;
       const k = qt(h);
-      P = [], w = [], k.forEach((I) => {
-        const _ = Ut(I, X, {
-          fontSize: s.fontSize,
-          fontFamily: s.fontFamily,
-          bold: s.bold,
-          italic: s.italic
+      P = [], M = [], k.forEach((H) => {
+        const X = Ut(H, Y, {
+          fontSize: o.fontSize,
+          fontFamily: o.fontFamily,
+          bold: o.bold,
+          italic: o.italic
         });
-        _.forEach((H, V) => {
-          P.push(H), w.push({
-            isParagraphStart: V === 0,
-            isParagraphEnd: V === _.length - 1
+        X.forEach((I, z) => {
+          P.push(I), M.push({
+            isParagraphStart: z === 0,
+            isParagraphEnd: z === X.length - 1
           });
         });
       });
@@ -2676,194 +2731,194 @@ class Dt {
 `).map((k) => [
         {
           text: k,
-          style: { fontSize: g, fontFamily: f, bold: y, italic: m }
+          style: { fontSize: g, fontFamily: u, bold: y, italic: S }
         }
-      ]), w = P.map(() => ({
+      ]), M = P.map(() => ({
         isParagraphStart: !0,
         // Each line is its own paragraph
         isParagraphEnd: !0
       }));
     const B = P.length > 1 ? C.height + (P.length - 1) * x : C.height;
     let L = -B / 2, W = 0, O = L, D = R;
-    const F = [];
+    const Q = [];
     let E = 0;
-    P.forEach((X, k) => {
-      var V, Y;
-      const I = w[k].isParagraphStart, _ = w[k].isParagraphEnd, H = [];
-      X.forEach((at) => {
-        Array.from(at.text).forEach((ct) => {
-          let G = g, ot = f, et = y, U = m;
+    P.forEach((Y, k) => {
+      var z, G;
+      const H = M[k].isParagraphStart, X = M[k].isParagraphEnd, I = [];
+      Y.forEach((st) => {
+        Array.from(st.text).forEach((U) => {
+          let F = g, nt = u, ot = y, Z = S;
           if (h && E < l.length) {
-            const Z = h.getStyleAt(E);
-            G = Z.fontSize || g, ot = Z.fontFamily || f, et = Z.bold !== void 0 ? Z.bold : y, U = Z.italic !== void 0 ? Z.italic : m;
+            const J = h.getStyleAt(E);
+            F = J.fontSize || g, nt = J.fontFamily || u, ot = J.bold !== void 0 ? J.bold : y, Z = J.italic !== void 0 ? J.italic : S;
           }
           t.save();
-          const nt = et ? "bold" : "normal", z = U ? "italic" : "normal";
-          t.font = `${z} ${nt} ${G}px "${ot}", Arial, sans-serif`;
-          const q = t.measureText(ct).width;
-          t.restore(), H.push({ char: ct, width: q, fontSize: G, index: E }), E++;
+          const it = ot ? "bold" : "normal", V = Z ? "italic" : "normal";
+          t.font = `${V} ${it} ${F}px "${nt}", Arial, sans-serif`;
+          const q = t.measureText(U).width;
+          t.restore(), I.push({ char: U, width: q, fontSize: F, index: E }), E++;
         });
       });
       {
-        const at = k === 0, gt = k === P.length - 1, ct = H.map((z) => z.char).join(""), G = ((V = ct.match(/^ +/)) == null ? void 0 : V[0].length) || 0, ot = ((Y = ct.match(/ +$/)) == null ? void 0 : Y[0].length) || 0;
-        let et = 0;
-        for (let z = 0; z < H.length; z++)
-          !at && z < G || !gt && z >= H.length - ot || (et += H[z].width);
-        let U;
-        S === "center" ? U = -et / 2 : S === "right" ? U = A !== void 0 ? A / 2 - et : -et : U = A !== void 0 ? -A / 2 : 0;
-        let nt = U;
-        for (let z = 0; z < H.length; z++) {
-          const q = H[z];
-          F[q.index] = {
-            x: nt,
+        const st = k === 0, lt = k === P.length - 1, U = I.map((V) => V.char).join(""), F = ((z = U.match(/^ +/)) == null ? void 0 : z[0].length) || 0, nt = ((G = U.match(/ +$/)) == null ? void 0 : G[0].length) || 0;
+        let ot = 0;
+        for (let V = 0; V < I.length; V++)
+          !st && V < F || !lt && V >= I.length - nt || (ot += I[V].width);
+        let Z;
+        T === "center" ? Z = -ot / 2 : T === "right" ? Z = A !== void 0 ? A / 2 - ot : -ot : Z = A !== void 0 ? -A / 2 : 0;
+        let it = Z;
+        for (let V = 0; V < I.length; V++) {
+          const q = I[V];
+          Q[q.index] = {
+            x: it,
             y: L,
             width: q.width,
             // All characters keep their width for cursor navigation
             height: q.fontSize
-          }, nt += q.width;
+          }, it += q.width;
         }
-        if (H.length > 0) {
-          const z = H[0].index, q = H[H.length - 1].index, dt = k < P.length - 1 && q + 1 === E ? q : q + 1;
-          if (i >= z && i <= dt)
-            if (i === z)
-              W = U, O = L, D = R;
+        if (I.length > 0) {
+          const V = I[0].index, q = I[I.length - 1].index, ft = k < P.length - 1 && q + 1 === E ? q : q + 1;
+          if (i >= V && i <= ft)
+            if (i === V)
+              W = Z, O = L, D = R;
             else {
               let pt = 0;
-              for (let st = 0; st < H.length && H[st].index < i; st++) {
-                const rt = H[st], xt = rt.char === " ";
+              for (let at = 0; at < I.length && I[at].index < i; at++) {
+                const ht = I[at], Ct = ht.char === " ";
                 let yt = !0;
-                if (xt) {
-                  const Rt = st < G, N = st >= H.length - ot, Tt = !I && G > 0, vt = !_ && ot > 0;
-                  yt = !(Rt && Tt || N && vt);
+                if (Ct) {
+                  const Rt = at < F, N = at >= I.length - nt, Tt = !H && F > 0, wt = !X && nt > 0;
+                  yt = !(Rt && Tt || N && wt);
                 }
-                yt && (pt += rt.width);
+                yt && (pt += ht.width);
               }
-              W = U + pt, O = L, D = R;
+              W = Z + pt, O = L, D = R;
             }
         }
         k < P.length - 1 && (L += x);
       }
     });
-    const $ = a !== r;
-    let j = null, J = null;
-    if ($) {
-      const X = Math.min(a, r), k = Math.max(a, r);
+    const j = a !== r;
+    let _ = null, $ = null;
+    if (j) {
+      const Y = Math.min(a, r), k = Math.max(a, r);
       t.save(), t.fillStyle = ye(t.canvas);
-      let I = 0, _ = -B / 2;
-      if (P.forEach((H, V) => {
-        var ot, et;
-        const Y = w[V].isParagraphStart, at = w[V].isParagraphEnd, gt = V === 0, ct = V === P.length - 1, G = [];
-        if (H.forEach((U) => {
-          Array.from(U.text).forEach((nt) => {
-            const z = U.style || {}, q = z.fontSize !== void 0 ? z.fontSize : g, Z = z.fontFamily !== void 0 ? z.fontFamily : f, ut = z.bold !== void 0 ? z.bold : y, dt = z.italic !== void 0 ? z.italic : m;
+      let H = 0, X = -B / 2;
+      if (P.forEach((I, z) => {
+        var nt, ot;
+        const G = M[z].isParagraphStart, st = M[z].isParagraphEnd, lt = z === 0, U = z === P.length - 1, F = [];
+        if (I.forEach((Z) => {
+          Array.from(Z.text).forEach((it) => {
+            const V = Z.style || {}, q = V.fontSize !== void 0 ? V.fontSize : g, J = V.fontFamily !== void 0 ? V.fontFamily : u, ut = V.bold !== void 0 ? V.bold : y, ft = V.italic !== void 0 ? V.italic : S;
             t.save();
-            const pt = ut ? "bold" : "normal", st = dt ? "italic" : "normal";
-            t.font = `${st} ${pt} ${q}px "${Z}", Arial, sans-serif`;
-            const rt = t.measureText(nt).width;
-            t.restore(), G.push({ char: nt, index: I, width: rt, style: z }), I++;
+            const pt = ut ? "bold" : "normal", at = ft ? "italic" : "normal";
+            t.font = `${at} ${pt} ${q}px "${J}", Arial, sans-serif`;
+            const ht = t.measureText(it).width;
+            t.restore(), F.push({ char: it, index: H, width: ht, style: V }), H++;
           });
-        }), G.length > 0) {
-          const U = G[0].index, nt = G[G.length - 1].index;
-          if (k > U && X <= nt) {
+        }), F.length > 0) {
+          const Z = F[0].index, it = F[F.length - 1].index;
+          if (k > Z && Y <= it) {
             t.save();
-            const z = G.map((N) => N.char).join(""), q = ((ot = z.match(/^ +/)) == null ? void 0 : ot[0].length) || 0, Z = ((et = z.match(/ +$/)) == null ? void 0 : et[0].length) || 0;
+            const V = F.map((N) => N.char).join(""), q = ((nt = V.match(/^ +/)) == null ? void 0 : nt[0].length) || 0, J = ((ot = V.match(/ +$/)) == null ? void 0 : ot[0].length) || 0;
             let ut = 0;
-            for (let N = 0; N < G.length; N++)
-              !gt && N < q || !ct && N >= G.length - Z || (ut += G[N].width);
-            let dt = 0;
-            S === "center" ? dt = -ut / 2 : S === "right" && (dt = -ut);
-            const pt = Math.max(X, U), st = Math.min(k, nt + 1);
-            let rt = 0;
-            for (let N = 0; N < G.length && G[N].index < pt; N++) {
-              const Tt = G[N], vt = N < q, At = N >= G.length - Z, Et = !Y && q > 0, It = !at && Z > 0;
-              !(vt && Et || At && It) && (rt += Tt.width);
+            for (let N = 0; N < F.length; N++)
+              !lt && N < q || !U && N >= F.length - J || (ut += F[N].width);
+            let ft = 0;
+            T === "center" ? ft = -ut / 2 : T === "right" && (ft = -ut);
+            const pt = Math.max(Y, Z), at = Math.min(k, it + 1);
+            let ht = 0;
+            for (let N = 0; N < F.length && F[N].index < pt; N++) {
+              const Tt = F[N], wt = N < q, At = N >= F.length - J, Et = !G && q > 0, It = !st && J > 0;
+              !(wt && Et || At && It) && (ht += Tt.width);
             }
-            let xt = 0;
-            for (let N = 0; N < G.length && G[N].index < st; N++) {
-              const Tt = G[N], vt = N < q, At = N >= G.length - Z, Et = !Y && q > 0, It = !at && Z > 0;
-              !(vt && Et || At && It) && (xt += Tt.width);
+            let Ct = 0;
+            for (let N = 0; N < F.length && F[N].index < at; N++) {
+              const Tt = F[N], wt = N < q, At = N >= F.length - J, Et = !G && q > 0, It = !st && J > 0;
+              !(wt && Et || At && It) && (Ct += Tt.width);
             }
-            const yt = dt + rt, Rt = xt - rt;
-            t.fillRect(yt, _, Rt, R), j === null && (j = { x: yt, y: _ }), J = { x: yt + Rt, y: _ + R }, t.restore();
+            const yt = ft + ht, Rt = Ct - ht;
+            t.fillRect(yt, X, Rt, R), _ === null && (_ = { x: yt, y: X }), $ = { x: yt + Rt, y: X + R }, t.restore();
           }
         }
-        V < P.length - 1 && (_ += x);
+        z < P.length - 1 && (X += x);
       }), t.restore(), h) {
         t.save();
-        const H = s.transformType === "custom" ? s.transformData : null, V = H != null && H.width ? H.width - ft * 2 : void 0;
-        ve(t, h, {
+        const I = o.transformType === "custom" ? o.transformData : null, z = I != null && I.width ? I.width - gt * 2 : void 0;
+        we(t, h, {
           fontSize: g,
-          fontFamily: f,
-          color: s.color || "#000000",
+          fontFamily: u,
+          color: o.color || "#000000",
           bold: y,
-          italic: m,
-          underline: T,
-          strikethrough: v,
-          textAlign: S
-        }, V), t.restore();
+          italic: S,
+          underline: m,
+          strikethrough: w,
+          textAlign: T
+        }, z), t.restore();
       }
     }
-    if ($ && d && j && J) {
-      const X = j, k = J, I = 6 / p, _ = 2 / p;
+    if (j && d && _ && $) {
+      const Y = _, k = $, H = 6 / p, X = 2 / p;
       t.save();
-      const H = tt(t.canvas);
-      t.fillStyle = H, t.strokeStyle = H, t.lineWidth = _, t.lineCap = "round";
-      const V = { x: X.x, y: X.y - I }, Y = { x: k.x, y: k.y + I };
-      t.beginPath(), t.moveTo(X.x, X.y), t.lineTo(X.x, X.y + R), t.stroke(), t.beginPath(), t.arc(V.x, V.y, I, 0, Math.PI * 2), t.fill(), t.strokeStyle = "white", t.lineWidth = 2 / p, t.stroke(), t.strokeStyle = H, t.lineWidth = _, t.beginPath(), t.moveTo(k.x, k.y - R), t.lineTo(k.x, k.y), t.stroke(), t.beginPath(), t.arc(Y.x, Y.y, I, 0, Math.PI * 2), t.fill(), t.strokeStyle = "white", t.lineWidth = 2 / p, t.stroke(), t.restore(), u && (u.current = {
+      const I = et(t.canvas);
+      t.fillStyle = I, t.strokeStyle = I, t.lineWidth = X, t.lineCap = "round";
+      const z = { x: Y.x, y: Y.y - H }, G = { x: k.x, y: k.y + H };
+      t.beginPath(), t.moveTo(Y.x, Y.y), t.lineTo(Y.x, Y.y + R), t.stroke(), t.beginPath(), t.arc(z.x, z.y, H, 0, Math.PI * 2), t.fill(), t.strokeStyle = "white", t.lineWidth = 2 / p, t.stroke(), t.strokeStyle = I, t.lineWidth = X, t.beginPath(), t.moveTo(k.x, k.y - R), t.lineTo(k.x, k.y), t.stroke(), t.beginPath(), t.arc(G.x, G.y, H, 0, Math.PI * 2), t.fill(), t.strokeStyle = "white", t.lineWidth = 2 / p, t.stroke(), t.restore(), f && (f.current = {
         start: {
-          center: V,
-          textEdge: X
+          center: z,
+          textEdge: Y
           // Original selection edge (top-left of selection on first line)
         },
         end: {
-          center: Y,
+          center: G,
           textEdge: k
           // Original selection edge (bottom-right of selection on last line)
         }
       });
-    } else u && (u.current = { start: null, end: null });
-    !$ && c > 0 && (t.save(), t.globalAlpha = c, t.strokeStyle = tt(t.canvas), t.lineWidth = 3 / p, t.lineCap = "round", t.beginPath(), t.moveTo(W, O), t.lineTo(W, O + D), t.stroke(), t.restore()), t.restore();
+    } else f && (f.current = { start: null, end: null });
+    !j && c > 0 && (t.save(), t.globalAlpha = c, t.strokeStyle = et(t.canvas), t.lineWidth = 3 / p, t.lineCap = "round", t.beginPath(), t.moveTo(W, O), t.lineTo(W, O + D), t.stroke(), t.restore()), t.restore();
   }
   /**
    * Render edit mode features for transformed text (circle, wave, arch, etc.)
    * Renders cursor along the transform path
    */
-  static renderTransformEditModeLayer(t, e, o, n = 1) {
-    const { cursorPosition: s, cursorOpacity: i } = o, a = e.fontSize || 24, r = e.fontFamily || "Arial", l = e.bold || !1, h = e.italic || !1;
+  static renderTransformEditModeLayer(t, e, s, n = 1) {
+    const { cursorPosition: o, cursorOpacity: i } = s, a = e.fontSize || 24, r = e.fontFamily || "Arial", l = e.bold || !1, h = e.italic || !1;
     t.save(), t.translate(e.x, e.y), t.rotate(-e.rotation * Math.PI / 180);
     const c = l ? "bold" : "normal", d = h ? "italic" : "normal";
     t.font = `${d} ${c} ${a}px ${r}`;
-    const u = Array.from(e.text), p = u.map((g) => t.measureText(g).width), b = _t.calculateCharPositions(e, u, p);
-    if (s >= 0 && s <= u.length && i > 0) {
+    const f = Array.from(e.text), p = f.map((g) => t.measureText(g).width), b = _t.calculateCharPositions(e, f, p);
+    if (o >= 0 && o <= f.length && i > 0) {
       let g;
-      if (s === 0)
+      if (o === 0)
         if (b.length > 0) {
-          const y = b[0], m = p[0];
+          const y = b[0], S = p[0];
           g = {
-            x: y.x - Math.cos(y.angle) * (m / 2),
-            y: y.y - Math.sin(y.angle) * (m / 2),
+            x: y.x - Math.cos(y.angle) * (S / 2),
+            y: y.y - Math.sin(y.angle) * (S / 2),
             angle: y.angle
           };
         } else
           g = { x: 0, y: 0, angle: 0 };
-      else if (s >= b.length) {
-        const y = b[b.length - 1], m = p[p.length - 1];
+      else if (o >= b.length) {
+        const y = b[b.length - 1], S = p[p.length - 1];
         g = {
-          x: y.x + Math.cos(y.angle) * (m / 2),
-          y: y.y + Math.sin(y.angle) * (m / 2),
+          x: y.x + Math.cos(y.angle) * (S / 2),
+          y: y.y + Math.sin(y.angle) * (S / 2),
           angle: y.angle
         };
       } else {
-        const y = b[s], m = p[s];
+        const y = b[o], S = p[o];
         g = {
-          x: y.x - Math.cos(y.angle) * (m / 2),
-          y: y.y - Math.sin(y.angle) * (m / 2),
+          x: y.x - Math.cos(y.angle) * (S / 2),
+          y: y.y - Math.sin(y.angle) * (S / 2),
           angle: y.angle
         };
       }
-      t.save(), t.translate(g.x, g.y), t.rotate(g.angle), t.globalAlpha = i, t.strokeStyle = tt(t.canvas), t.lineWidth = 2 / n;
-      const f = a * 1.2;
-      t.beginPath(), t.moveTo(0, -f / 2), t.lineTo(0, f / 2), t.stroke(), t.restore();
+      t.save(), t.translate(g.x, g.y), t.rotate(g.angle), t.globalAlpha = i, t.strokeStyle = et(t.canvas), t.lineWidth = 2 / n;
+      const u = a * 1.2;
+      t.beginPath(), t.moveTo(0, -u / 2), t.lineTo(0, u / 2), t.stroke(), t.restore();
     }
     t.restore();
   }
@@ -2871,25 +2926,25 @@ class Dt {
    * Render crop box layer (for images in crop mode)
    * Shows both image resize handles and crop handles
    */
-  static renderCropBoxLayer(t, e, o, n = 1) {
+  static renderCropBoxLayer(t, e, s, n = 1) {
     if (!(e instanceof be) || !e.isCropping) return;
-    const s = e, i = s.getCropBoxBounds();
+    const o = e, i = o.getCropBoxBounds();
     if (!i) return;
     const a = 4 / n, r = 2 / n, l = Se / n, h = me / n, c = 1 / n;
-    t.save(), t.translate(e.x * n, e.y * n), t.rotate(ht.toRadians(e.rotation));
-    const d = s.transformData.flipHorizontal ? -1 : 1, u = s.transformData.flipVertical ? -1 : 1;
-    t.scale(d * n, u * n);
-    const p = s.transformData.width * s.transformData.cropWidth, b = s.transformData.height * s.transformData.cropHeight, g = s.transformData.width / 2 - (s.transformData.cropX * s.transformData.width + p / 2), f = s.transformData.height / 2 - (s.transformData.cropY * s.transformData.height + b / 2), y = s.transformData.width / 2, m = s.transformData.height / 2, T = {
+    t.save(), t.translate(e.x * n, e.y * n), t.rotate(dt.toRadians(e.rotation));
+    const d = o.transformData.flipHorizontal ? -1 : 1, f = o.transformData.flipVertical ? -1 : 1;
+    t.scale(d * n, f * n);
+    const p = o.transformData.width * o.transformData.cropWidth, b = o.transformData.height * o.transformData.cropHeight, g = o.transformData.width / 2 - (o.transformData.cropX * o.transformData.width + p / 2), u = o.transformData.height / 2 - (o.transformData.cropY * o.transformData.height + b / 2), y = o.transformData.width / 2, S = o.transformData.height / 2, m = {
       x: g - y,
-      y: f - m,
-      width: s.transformData.width,
-      height: s.transformData.height
+      y: u - S,
+      width: o.transformData.width,
+      height: o.transformData.height
     };
-    t.fillStyle = "rgba(0, 0, 0, 0.5)", i.y > T.y && t.fillRect(T.x, T.y, T.width, i.y - T.y);
-    const v = i.y + i.height, S = T.y + T.height;
-    v < S && t.fillRect(T.x, v, T.width, S - v), i.x > T.x && t.fillRect(T.x, i.y, i.x - T.x, i.height);
-    const C = i.x + i.width, R = T.x + T.width;
-    C < R && t.fillRect(C, i.y, R - C, i.height), t.strokeStyle = tt(t.canvas), t.lineWidth = r, t.strokeRect(i.x, i.y, i.width, i.height), t.strokeStyle = "rgba(255, 255, 255, 0.5)", t.lineWidth = c;
+    t.fillStyle = "rgba(0, 0, 0, 0.5)", i.y > m.y && t.fillRect(m.x, m.y, m.width, i.y - m.y);
+    const w = i.y + i.height, T = m.y + m.height;
+    w < T && t.fillRect(m.x, w, m.width, T - w), i.x > m.x && t.fillRect(m.x, i.y, i.x - m.x, i.height);
+    const C = i.x + i.width, R = m.x + m.width;
+    C < R && t.fillRect(C, i.y, R - C, i.height), t.strokeStyle = et(t.canvas), t.lineWidth = r, t.strokeRect(i.x, i.y, i.width, i.height), t.strokeStyle = "rgba(255, 255, 255, 0.5)", t.lineWidth = c;
     const x = i.width / 3;
     t.beginPath(), t.moveTo(i.x + x, i.y), t.lineTo(i.x + x, i.y + i.height), t.moveTo(i.x + 2 * x, i.y), t.lineTo(i.x + 2 * x, i.y + i.height), t.stroke();
     const P = i.height / 3;
@@ -2918,27 +2973,27 @@ class Dt {
       B.orientation === "horizontal" ? (L = h, W = a) : (L = a, W = h);
       const O = B.x - L / 2, D = B.y - W / 2;
       t.fillStyle = "#fff", t.fillRect(O, D, L, W), t.strokeStyle = "#bbb", t.lineWidth = c, t.strokeRect(O, D, L, W);
-    }), t.restore(), o && o.resizeHandles) {
-      const B = o.resizeHandles.filter(
+    }), t.restore(), s && s.resizeHandles) {
+      const B = s.resizeHandles.filter(
         (D) => D.anchor === "top-left" || D.anchor === "top-right" || D.anchor === "bottom-left" || D.anchor === "bottom-right"
-      ), L = s.getCropBoxWorldCorners(), W = 6, O = 20;
+      ), L = o.getCropBoxWorldCorners(), W = 6, O = 20;
       B.forEach((D) => {
-        let F = !1;
+        let Q = !1;
         if (L)
           for (const E of L) {
-            const $ = D.x - E.x, j = D.y - E.y;
-            if (Math.sqrt($ * $ + j * j) < O) {
-              F = !0;
+            const j = D.x - E.x, _ = D.y - E.y;
+            if (Math.sqrt(j * j + _ * _) < O) {
+              Q = !0;
               break;
             }
           }
-        F || (t.save(), t.globalAlpha = 1, t.beginPath(), t.arc(D.x * n, D.y * n, W, 0, 2 * Math.PI), t.fillStyle = "#fff", t.fill(), t.strokeStyle = tt(t.canvas), t.lineWidth = 2, t.stroke(), t.restore());
+        Q || (t.save(), t.globalAlpha = 1, t.beginPath(), t.arc(D.x * n, D.y * n, W, 0, 2 * Math.PI), t.fillStyle = "#fff", t.fill(), t.strokeStyle = et(t.canvas), t.lineWidth = 2, t.stroke(), t.restore());
       });
     }
   }
 }
-xe();
-const De = $t("CanvasRenderer"), K = class K {
+Ce();
+const Oe = $t("CanvasRenderer"), K = class K {
   /**
    * Get a pooled offscreen canvas for clipping content, only recreating
    * when dimensions change. Eliminates per-frame canvas allocation.
@@ -2957,12 +3012,12 @@ const De = $t("CanvasRenderer"), K = class K {
    * Safely render an element, catching errors so one element's failure
    * doesn't crash the entire canvas render loop.
    */
-  static safeRender(t, e, o, n) {
+  static safeRender(t, e, s, n) {
     try {
-      e.render(t, o, n);
-    } catch (s) {
-      const i = s instanceof Error ? s : new Error(String(s));
-      De.error(`Failed to render element ${e.id}:`, i), K.onRenderError && K.onRenderError({
+      e.render(t, s, n);
+    } catch (o) {
+      const i = o instanceof Error ? o : new Error(String(o));
+      Oe.error(`Failed to render element ${e.id}:`, i), K.onRenderError && K.onRenderError({
         category: "render",
         message: `Failed to render element: ${i.message}`,
         originalError: i,
@@ -2978,8 +3033,8 @@ const De = $t("CanvasRenderer"), K = class K {
    * Helper function to render an element (using actual element instance, not config)
    * Used by knockout rendering system
    */
-  static renderElement(t, e, o = !0) {
-    o && (t.save(), t.globalAlpha = Q), e.render(t, !1, !1), o && t.restore();
+  static renderElement(t, e, s = !0) {
+    s && (t.save(), t.globalAlpha = tt), e.render(t, !1, !1), s && t.restore();
   }
   /**
    * Apply artboard clip path to the context, respecting clipShape.
@@ -2987,38 +3042,38 @@ const De = $t("CanvasRenderer"), K = class K {
    * Caller must call ctx.beginPath() before this if needed.
    */
   static applyArtboardClipPath(t, e) {
-    const { x: o, y: n, width: s, height: i, clipShape: a } = e, r = e.borderRadius || 0;
+    const { x: s, y: n, width: o, height: i, clipShape: a } = e, r = e.borderRadius || 0;
     if (t.beginPath(), !a || a === "rectangle")
-      r > 0 ? t.roundRect(o, n, s, i, r) : t.rect(o, n, s, i);
+      r > 0 ? t.roundRect(s, n, o, i, r) : t.rect(s, n, o, i);
     else if (a === "circle") {
-      const l = o + s / 2, h = n + i / 2, c = Math.min(s, i) / 2;
+      const l = s + o / 2, h = n + i / 2, c = Math.min(o, i) / 2;
       t.arc(l, h, c, 0, Math.PI * 2);
     } else if (typeof a == "object" && a.type === "rounded") {
-      const l = Math.min(a.radius, Math.min(s, i) / 2);
-      t.roundRect(o, n, s, i, l);
+      const l = Math.min(a.radius, Math.min(o, i) / 2);
+      t.roundRect(s, n, o, i, l);
     } else if (typeof a == "object" && a.type === "path")
       try {
         const l = new Path2D(a.d);
-        t.translate(o, n), t.clip(l), t.translate(-o, -n);
+        t.translate(s, n), t.clip(l), t.translate(-s, -n);
         return;
       } catch {
-        t.rect(o, n, s, i);
+        t.rect(s, n, o, i);
       }
     else if (typeof a == "object" && a.type === "composite-path")
       try {
         const l = new Path2D();
         for (const h of a.pieces) {
-          const c = new Path2D(h.d), d = h.rotation ?? 0, u = new DOMMatrix();
-          if (u.translateSelf(h.x, h.y), d !== 0) {
-            const p = (h.baseWidth ?? 0) / 2, b = (h.baseHeight ?? 0) / 2, g = d === 90 || d === 270, f = g ? h.baseHeight ?? 0 : h.baseWidth ?? 0, y = g ? h.baseWidth ?? 0 : h.baseHeight ?? 0;
-            u.translateSelf(f / 2, y / 2), u.rotateSelf(d), u.translateSelf(-p, -b);
+          const c = new Path2D(h.d), d = h.rotation ?? 0, f = new DOMMatrix();
+          if (f.translateSelf(h.x, h.y), d !== 0) {
+            const p = (h.baseWidth ?? 0) / 2, b = (h.baseHeight ?? 0) / 2, g = d === 90 || d === 270, u = g ? h.baseHeight ?? 0 : h.baseWidth ?? 0, y = g ? h.baseWidth ?? 0 : h.baseHeight ?? 0;
+            f.translateSelf(u / 2, y / 2), f.rotateSelf(d), f.translateSelf(-p, -b);
           }
-          l.addPath(c, u);
+          l.addPath(c, f);
         }
-        t.translate(o, n), t.clip(l), t.translate(-o, -n);
+        t.translate(s, n), t.clip(l), t.translate(-s, -n);
         return;
       } catch {
-        t.rect(o, n, s, i);
+        t.rect(s, n, o, i);
       }
     t.clip();
   }
@@ -3026,25 +3081,25 @@ const De = $t("CanvasRenderer"), K = class K {
    * Render an element with overflow dimming - parts outside the artboard render at 30% opacity
    * Uses two-pass rendering: first at 30% opacity (overflow), then clipped to artboard at 100% (inside)
    */
-  static renderElementWithOverflowDimming(t, e, o, n, s, i) {
-    const a = t.getTransform(), r = o.borderRadius || 0;
-    t.save(), t.globalAlpha = 0.3 * (i ? Q : 1), t.filter = "blur(4px)", t.beginPath();
-    const h = t.getTransform().inverse(), c = t.canvas.width, d = t.canvas.height, u = new DOMPoint(0, 0).matrixTransform(h), p = new DOMPoint(c, d).matrixTransform(h), b = Math.max(p.x - u.x, p.y - u.y), g = u.x - b, f = u.y - b, y = p.x + b, m = p.y + b, T = typeof o.clipShape == "object" && o.clipShape !== null && o.clipShape.type === "composite-path" ? o.clipShape : null;
-    if (T) {
-      const v = new Path2D();
-      v.rect(g, f, y - g, m - f);
-      for (const S of T.pieces) {
-        const C = new Path2D(S.d), R = S.rotation ?? 0, x = new DOMMatrix();
-        if (x.translateSelf(o.x + S.x, o.y + S.y), R !== 0) {
-          const P = (S.baseWidth ?? 0) / 2, w = (S.baseHeight ?? 0) / 2, A = R === 90 || R === 270, B = A ? S.baseHeight ?? 0 : S.baseWidth ?? 0, L = A ? S.baseWidth ?? 0 : S.baseHeight ?? 0;
-          x.translateSelf(B / 2, L / 2), x.rotateSelf(R), x.translateSelf(-P, -w);
+  static renderElementWithOverflowDimming(t, e, s, n, o, i) {
+    const a = t.getTransform(), r = s.borderRadius || 0;
+    t.save(), t.globalAlpha = 0.3 * (i ? tt : 1), t.filter = "blur(4px)", t.beginPath();
+    const h = t.getTransform().inverse(), c = t.canvas.width, d = t.canvas.height, f = new DOMPoint(0, 0).matrixTransform(h), p = new DOMPoint(c, d).matrixTransform(h), b = Math.max(p.x - f.x, p.y - f.y), g = f.x - b, u = f.y - b, y = p.x + b, S = p.y + b, m = typeof s.clipShape == "object" && s.clipShape !== null && s.clipShape.type === "composite-path" ? s.clipShape : null;
+    if (m) {
+      const w = new Path2D();
+      w.rect(g, u, y - g, S - u);
+      for (const T of m.pieces) {
+        const C = new Path2D(T.d), R = T.rotation ?? 0, x = new DOMMatrix();
+        if (x.translateSelf(s.x + T.x, s.y + T.y), R !== 0) {
+          const P = (T.baseWidth ?? 0) / 2, M = (T.baseHeight ?? 0) / 2, A = R === 90 || R === 270, B = A ? T.baseHeight ?? 0 : T.baseWidth ?? 0, L = A ? T.baseWidth ?? 0 : T.baseHeight ?? 0;
+          x.translateSelf(B / 2, L / 2), x.rotateSelf(R), x.translateSelf(-P, -M);
         }
-        v.addPath(C, x);
+        w.addPath(C, x);
       }
-      t.clip(v, "evenodd");
+      t.clip(w, "evenodd");
     } else
-      t.rect(g, f, y - g, m - f), r > 0 ? t.roundRect(o.x, o.y, o.width, o.height, r) : t.rect(o.x, o.y, o.width, o.height), t.clip("evenodd");
-    e.render(t, !1, !1), t.restore(), t.save(), this.applyArtboardClipPath(t, o), i && (t.globalAlpha = Q), e.render(t, n, s), t.restore(), t.setTransform(a);
+      t.rect(g, u, y - g, S - u), r > 0 ? t.roundRect(s.x, s.y, s.width, s.height, r) : t.rect(s.x, s.y, s.width, s.height), t.clip("evenodd");
+    e.render(t, !1, !1), t.restore(), t.save(), this.applyArtboardClipPath(t, s), i && (t.globalAlpha = tt), e.render(t, n, o), t.restore(), t.setTransform(a);
   }
   /**
    * Render all elements layer
@@ -3055,18 +3110,18 @@ const De = $t("CanvasRenderer"), K = class K {
    *   a coloured halo rather than useful UX. Selected/hovered elements fall through to the
    *   clipped-only branch which respects `clipShape` correctly.
    */
-  static renderElementsLayer(t, e, o, n, s, i, a, r = !0, l = !1, h = !1) {
-    const c = s != null && s.getMode() === "drag", d = s == null ? void 0 : s._activeChildContext;
-    e !== K._cachedElementsRef && (K._cachedElementConfigs = e.map((f) => f.toJSON()), K._cachedElementMap = new Map(e.map((f) => [f.id, f])), K._cachedElementsRef = e);
-    const u = K._cachedElementConfigs, p = K._cachedElementMap, b = K._knockoutRenderedIds;
-    b.clear(), e.forEach((f, y) => {
-      var m, T, v;
-      if (f.blendMode === "knockout" || f.blendMode === "clip") {
-        const S = u[y], C = f.blendMode === "knockout" ? "destination-out" : "destination-in", R = ((m = S.knockoutParts) == null ? void 0 : m.scope) || "group", x = u.findIndex((B) => B.id === S.id), P = ((T = S.knockoutParts) == null ? void 0 : T.fill) || ((v = S.knockoutParts) == null ? void 0 : v.stroke), w = R === "artboard" && x !== -1 ? u.slice(0, x) : [];
-        P && (R === "artboard" || w.length > 0) && (w.forEach((B) => B.id && b.add(B.id)), we(
+  static renderElementsLayer(t, e, s, n, o, i, a, r = !0, l = !1, h = !1) {
+    const c = o != null && o.getMode() === "drag", d = o == null ? void 0 : o._activeChildContext;
+    e !== K._cachedElementsRef && (K._cachedElementConfigs = e.map((u) => u.toJSON()), K._cachedElementMap = new Map(e.map((u) => [u.id, u])), K._cachedElementsRef = e);
+    const f = K._cachedElementConfigs, p = K._cachedElementMap, b = K._knockoutRenderedIds;
+    b.clear(), e.forEach((u, y) => {
+      var S, m, w;
+      if (u.blendMode === "knockout" || u.blendMode === "clip") {
+        const T = f[y], C = u.blendMode === "knockout" ? "destination-out" : "destination-in", R = ((S = T.knockoutParts) == null ? void 0 : S.scope) || "group", x = f.findIndex((B) => B.id === T.id), P = ((m = T.knockoutParts) == null ? void 0 : m.fill) || ((w = T.knockoutParts) == null ? void 0 : w.stroke), M = R === "artboard" && x !== -1 ? f.slice(0, x) : [];
+        P && (R === "artboard" || M.length > 0) && (M.forEach((B) => B.id && b.add(B.id)), ve(
           t,
-          S,
-          u,
+          T,
+          f,
           (B, L) => {
             const W = L.id && p.get(L.id);
             W && this.renderElement(B, W, r);
@@ -3074,60 +3129,60 @@ const De = $t("CanvasRenderer"), K = class K {
           i,
           a,
           C
-        ), b.add(f.id));
+        ), b.add(u.id));
       }
-    }), e.some((f) => !b.has(f.id) && f.isClipping) ? this._renderWithClipping(
+    }), e.some((u) => !b.has(u.id) && u.isClipping) ? this._renderWithClipping(
       t,
       e,
       b,
-      o,
+      s,
       n,
       c,
       d,
-      u,
+      f,
       r
-    ) : e.forEach((f) => {
+    ) : e.forEach((u) => {
       var R, x;
-      if (b.has(f.id) || f.visible === !1) return;
-      const y = f.id === o, m = (n == null ? void 0 : n.type) === "element" && ((R = n == null ? void 0 : n.data) == null ? void 0 : R.id) === f.id, T = c && d && Lt(f) && f.id === o, v = y && !T, S = u[e.indexOf(f)], C = ((x = S == null ? void 0 : S.distressEffect) == null ? void 0 : x.enabled) && S.distressEffect.style === "custom" && S.distressEffect.textureUrl;
-      if (S && S.masks && S.masks.length > 0)
-        kt(t, S, (P) => {
-          const w = (A) => {
-            r && (A.save(), A.globalAlpha = Q), this.safeRender(A, f, v, m), r && A.restore();
+      if (b.has(u.id) || u.visible === !1) return;
+      const y = u.id === s, S = (n == null ? void 0 : n.type) === "element" && ((R = n == null ? void 0 : n.data) == null ? void 0 : R.id) === u.id, m = c && d && Lt(u) && u.id === s, w = y && !m, T = f[e.indexOf(u)], C = ((x = T == null ? void 0 : T.distressEffect) == null ? void 0 : x.enabled) && T.distressEffect.style === "custom" && T.distressEffect.textureUrl;
+      if (T && T.masks && T.masks.length > 0)
+        kt(t, T, (P) => {
+          const M = (A) => {
+            r && (A.save(), A.globalAlpha = tt), this.safeRender(A, u, w, S), r && A.restore();
           };
           if (C) {
-            const A = f.getVisualBoundingBox();
-            Yt(P, S.distressEffect, A, w);
+            const A = u.getVisualBoundingBox();
+            Yt(P, T.distressEffect, A, M);
           } else
-            w(P);
+            M(P);
         });
       else if (C) {
-        const P = f.getVisualBoundingBox();
-        Yt(t, S.distressEffect, P, (w) => {
-          r && (w.save(), w.globalAlpha = Q), this.safeRender(w, f, v, m), r && w.restore();
+        const P = u.getVisualBoundingBox();
+        Yt(t, T.distressEffect, P, (M) => {
+          r && (M.save(), M.globalAlpha = tt), this.safeRender(M, u, w, S), r && M.restore();
         });
-      } else l && !h && a && v ? this.renderElementWithOverflowDimming(t, f, a, v, m, r) : l && a ? (t.save(), this.applyArtboardClipPath(t, a), r && (t.globalAlpha = Q), this.safeRender(t, f, v, m), t.restore()) : (r && (t.save(), t.globalAlpha = Q), this.safeRender(t, f, v, m), r && t.restore());
+      } else l && !h && a && w ? this.renderElementWithOverflowDimming(t, u, a, w, S, r) : l && a ? (t.save(), this.applyArtboardClipPath(t, a), r && (t.globalAlpha = tt), this.safeRender(t, u, w, S), t.restore()) : (r && (t.save(), t.globalAlpha = tt), this.safeRender(t, u, w, S), r && t.restore());
     });
   }
   /**
    * Render elements with clipping mask support at artboard level
    * Elements with isClipping=true clip all elements below them
    */
-  static _renderWithClipping(t, e, o, n, s, i, a, r, l = !0) {
-    var f;
-    const h = t.canvas, c = h.width, d = h.height, u = t.getTransform(), p = [];
+  static _renderWithClipping(t, e, s, n, o, i, a, r, l = !0) {
+    var u;
+    const h = t.canvas, c = h.width, d = h.height, f = t.getTransform(), p = [];
     let b = [], g = [];
     for (let y = 0; y < e.length; y++) {
-      const m = e[y], T = r[y];
-      o.has(m.id) || m.visible !== !1 && (m.isClipping ? b.length > 0 ? (p.push({
+      const S = e[y], m = r[y];
+      s.has(S.id) || S.visible !== !1 && (S.isClipping ? b.length > 0 ? (p.push({
         content: b,
-        mask: m,
+        mask: S,
         contentConfigs: g,
-        maskConfig: T
+        maskConfig: m
       }), b = [], g = []) : p.push({
-        content: [m],
-        contentConfigs: [T]
-      }) : (b.push(m), g.push(T)));
+        content: [S],
+        contentConfigs: [m]
+      }) : (b.push(S), g.push(m)));
     }
     b.length > 0 && p.push({
       content: b,
@@ -3135,30 +3190,30 @@ const De = $t("CanvasRenderer"), K = class K {
     });
     for (const y of p)
       if (!y.mask)
-        y.content.forEach((m, T) => {
+        y.content.forEach((S, m) => {
           var P;
-          const v = m.id === n, S = (s == null ? void 0 : s.type) === "element" && ((P = s == null ? void 0 : s.data) == null ? void 0 : P.id) === m.id, C = i && a && Lt(m) && m.id === n, R = v && !C, x = y.contentConfigs[T];
-          x && x.masks && x.masks.length > 0 ? kt(t, x, (w) => {
-            l && (w.save(), w.globalAlpha = Q), m.render(w, R, S), l && w.restore();
-          }) : (l && (t.save(), t.globalAlpha = Q), m.render(t, R, S), l && t.restore());
+          const w = S.id === n, T = (o == null ? void 0 : o.type) === "element" && ((P = o == null ? void 0 : o.data) == null ? void 0 : P.id) === S.id, C = i && a && Lt(S) && S.id === n, R = w && !C, x = y.contentConfigs[m];
+          x && x.masks && x.masks.length > 0 ? kt(t, x, (M) => {
+            l && (M.save(), M.globalAlpha = tt), S.render(M, R, T), l && M.restore();
+          }) : (l && (t.save(), t.globalAlpha = tt), S.render(t, R, T), l && t.restore());
         });
       else {
-        const m = this._getContentCanvas(c, d), T = m.getContext("2d");
-        if (!T) continue;
-        T.setTransform(1, 0, 0, 1, 0, 0), T.clearRect(0, 0, c, d), T.globalCompositeOperation = "source-over", T.setTransform(u), y.content.forEach((x, P) => {
+        const S = this._getContentCanvas(c, d), m = S.getContext("2d");
+        if (!m) continue;
+        m.setTransform(1, 0, 0, 1, 0, 0), m.clearRect(0, 0, c, d), m.globalCompositeOperation = "source-over", m.setTransform(f), y.content.forEach((x, P) => {
           var O;
-          const w = x.id === n, A = (s == null ? void 0 : s.type) === "element" && ((O = s == null ? void 0 : s.data) == null ? void 0 : O.id) === x.id, B = i && a && Lt(x) && x.id === n, L = w && !B, W = y.contentConfigs[P];
-          W && W.masks && W.masks.length > 0 ? kt(T, W, (D) => {
-            l && (D.save(), D.globalAlpha = Q), x.render(D, L, A), l && D.restore();
-          }) : (l && (T.save(), T.globalAlpha = Q), x.render(T, L, A), l && T.restore());
+          const M = x.id === n, A = (o == null ? void 0 : o.type) === "element" && ((O = o == null ? void 0 : o.data) == null ? void 0 : O.id) === x.id, B = i && a && Lt(x) && x.id === n, L = M && !B, W = y.contentConfigs[P];
+          W && W.masks && W.masks.length > 0 ? kt(m, W, (D) => {
+            l && (D.save(), D.globalAlpha = tt), x.render(D, L, A), l && D.restore();
+          }) : (l && (m.save(), m.globalAlpha = tt), x.render(m, L, A), l && m.restore());
         });
-        const v = this._getMaskCanvas(c, d), S = v.getContext("2d");
-        if (!S) continue;
-        S.setTransform(1, 0, 0, 1, 0, 0), S.clearRect(0, 0, c, d), S.globalCompositeOperation = "source-over", S.setTransform(u);
-        const C = y.mask.id === n, R = (s == null ? void 0 : s.type) === "element" && ((f = s == null ? void 0 : s.data) == null ? void 0 : f.id) === y.mask.id;
-        y.maskConfig && y.maskConfig.masks && y.maskConfig.masks.length > 0 ? kt(S, y.maskConfig, (x) => {
-          l && (x.save(), x.globalAlpha = Q), y.mask.render(x, C, R), l && x.restore();
-        }) : (l && (S.save(), S.globalAlpha = Q), y.mask.render(S, C, R), l && S.restore()), T.globalCompositeOperation = "destination-in", T.setTransform(1, 0, 0, 1, 0, 0), T.drawImage(v, 0, 0), t.save(), t.setTransform(1, 0, 0, 1, 0, 0), t.drawImage(m, 0, 0), t.restore();
+        const w = this._getMaskCanvas(c, d), T = w.getContext("2d");
+        if (!T) continue;
+        T.setTransform(1, 0, 0, 1, 0, 0), T.clearRect(0, 0, c, d), T.globalCompositeOperation = "source-over", T.setTransform(f);
+        const C = y.mask.id === n, R = (o == null ? void 0 : o.type) === "element" && ((u = o == null ? void 0 : o.data) == null ? void 0 : u.id) === y.mask.id;
+        y.maskConfig && y.maskConfig.masks && y.maskConfig.masks.length > 0 ? kt(T, y.maskConfig, (x) => {
+          l && (x.save(), x.globalAlpha = tt), y.mask.render(x, C, R), l && x.restore();
+        }) : (l && (T.save(), T.globalAlpha = tt), y.mask.render(T, C, R), l && T.restore()), m.globalCompositeOperation = "destination-in", m.setTransform(1, 0, 0, 1, 0, 0), m.drawImage(w, 0, 0), t.save(), t.setTransform(1, 0, 0, 1, 0, 0), t.drawImage(S, 0, 0), t.restore();
       }
   }
   // =========================================================================
@@ -3169,47 +3224,47 @@ const De = $t("CanvasRenderer"), K = class K {
    * @see InteractionFeedbackRenderer.renderSnapGuidesLayer
    */
   static renderSnapGuidesLayer(t, e = []) {
-    Ct.renderSnapGuidesLayer(t, e);
+    Mt.renderSnapGuidesLayer(t, e);
   }
   /**
    * Render spacing indicators layer
    * @see InteractionFeedbackRenderer.renderSpacingIndicatorsLayer
    */
   static renderSpacingIndicatorsLayer(t, e = []) {
-    Ct.renderSpacingIndicatorsLayer(t, e);
+    Mt.renderSpacingIndicatorsLayer(t, e);
   }
   /**
    * Render a distance label with background
    * @see InteractionFeedbackRenderer.renderDistanceLabel
    */
-  static renderDistanceLabel(t, e, o, n) {
-    Ct.renderDistanceLabel(t, e, o, n);
+  static renderDistanceLabel(t, e, s, n) {
+    Mt.renderDistanceLabel(t, e, s, n);
   }
   /**
    * Render selection box layer
    * @see SelectionRenderer.renderSelectionLayer
    */
-  static renderSelectionLayer(t, e, o, n = 1) {
-    mt.renderSelectionLayer(t, e, o, n);
+  static renderSelectionLayer(t, e, s, n = 1) {
+    mt.renderSelectionLayer(t, e, s, n);
   }
   /**
    * Render position and size info below the selected element
    * @see SelectionRenderer.renderPositionSizeInfo
    */
-  static renderPositionSizeInfo(t, e, o, n, s = 1) {
-    mt.renderPositionSizeInfo(t, e, o, n, s);
+  static renderPositionSizeInfo(t, e, s, n, o = 1) {
+    mt.renderPositionSizeInfo(t, e, s, n, o);
   }
   /**
    * Render transform handles layer
    * @see SelectionRenderer.renderHandlesLayer
    */
-  static renderHandlesLayer(t, e, o, n, s, i, a, r = 1, l = !0) {
+  static renderHandlesLayer(t, e, s, n, o, i, a, r = 1, l = !0) {
     mt.renderHandlesLayer(
       t,
       e,
-      o,
-      n,
       s,
+      n,
+      o,
       i,
       a,
       r,
@@ -3220,15 +3275,15 @@ const De = $t("CanvasRenderer"), K = class K {
    * Render hover highlights layer with fade-in animation
    * @see HoverRenderer.renderHoverLayer
    */
-  static renderHoverLayer(t, e, o, n = !1, s = 1, i) {
-    _t.renderHoverLayer(t, e, o, n, s, i);
+  static renderHoverLayer(t, e, s, n = !1, o = 1, i) {
+    _t.renderHoverLayer(t, e, s, n, o, i);
   }
   /**
    * Render crop box layer (for images in crop mode)
    * @see EditModeRenderer.renderCropBoxLayer
    */
-  static renderCropBoxLayer(t, e, o, n = 1) {
-    Dt.renderCropBoxLayer(t, e, o, n);
+  static renderCropBoxLayer(t, e, s, n = 1) {
+    Dt.renderCropBoxLayer(t, e, s, n);
   }
   // =========================================================================
   // Main Render Orchestration
@@ -3240,7 +3295,7 @@ const De = $t("CanvasRenderer"), K = class K {
   static render({
     ctx: t,
     elements: e,
-    selectedId: o,
+    selectedId: s,
     selectedElement: n,
     // Chrome-related fields (transformHandles, currentRotation,
     // isRotating, hideHandles, isAltKeyPressed, showRotationHandle)
@@ -3249,7 +3304,7 @@ const De = $t("CanvasRenderer"), K = class K {
     // consumed here — single-selection chrome is now drawn by
     // `renderInteractionChromeLayer` after piece guides. See that
     // method for the actual chrome rendering.
-    hoverState: s,
+    hoverState: o,
     isEditing: i,
     stateMachine: a,
     snapGuides: r = [],
@@ -3257,50 +3312,50 @@ const De = $t("CanvasRenderer"), K = class K {
     artboardBackgroundColor: h,
     artboard: c,
     isPreview: d = !0,
-    zoom: u = 1,
+    zoom: f = 1,
     paddingOffset: p = { x: 0, y: 0 },
     showOverflowDimmed: b = !1,
     suppressOverflowDim: g = !1,
-    distressTexture: f,
+    distressTexture: u,
     imageMask: y,
-    editModeData: m
+    editModeData: S
   }) {
     if (this.renderElementsLayer(
       t,
       e,
-      o,
       s,
+      o,
       a ?? void 0,
       h,
       c,
       d,
       b,
       g
-    ), f != null && f.enabled && c && Ce(t, f, c, h), y != null && y.enabled && c && Me(t, y, c, h), i && m && n && Dt.renderEditModeLayer(t, n, m, u), u !== 1) {
+    ), u != null && u.enabled && c && Me(t, u, c, h), y != null && y.enabled && c && xe(t, y, c, h), i && S && n && Dt.renderEditModeLayer(t, n, S, f), f !== 1) {
       t.save();
-      const C = t.getTransform().a / u, R = p.x * u * C, x = p.y * u * C;
+      const C = t.getTransform().a / f, R = p.x * f * C, x = p.y * f * C;
       t.setTransform(C, 0, 0, C, R, x);
     }
-    const T = r.map((S) => ({
-      ...S,
-      x: S.x !== void 0 ? S.x * u : void 0,
-      y: S.y !== void 0 ? S.y * u : void 0,
-      x1: S.x1 !== void 0 ? S.x1 * u : void 0,
-      y1: S.y1 !== void 0 ? S.y1 * u : void 0,
-      x2: S.x2 !== void 0 ? S.x2 * u : void 0,
-      y2: S.y2 !== void 0 ? S.y2 * u : void 0
-    })), v = l.map((S) => ({
-      ...S,
-      x: S.x !== void 0 ? S.x * u : void 0,
-      y: S.y !== void 0 ? S.y * u : void 0,
-      x1: S.x1 !== void 0 ? S.x1 * u : void 0,
-      y1: S.y1 !== void 0 ? S.y1 * u : void 0,
-      x2: S.x2 !== void 0 ? S.x2 * u : void 0,
-      y2: S.y2 !== void 0 ? S.y2 * u : void 0,
-      labelX: S.labelX * u,
-      labelY: S.labelY * u
+    const m = r.map((T) => ({
+      ...T,
+      x: T.x !== void 0 ? T.x * f : void 0,
+      y: T.y !== void 0 ? T.y * f : void 0,
+      x1: T.x1 !== void 0 ? T.x1 * f : void 0,
+      y1: T.y1 !== void 0 ? T.y1 * f : void 0,
+      x2: T.x2 !== void 0 ? T.x2 * f : void 0,
+      y2: T.y2 !== void 0 ? T.y2 * f : void 0
+    })), w = l.map((T) => ({
+      ...T,
+      x: T.x !== void 0 ? T.x * f : void 0,
+      y: T.y !== void 0 ? T.y * f : void 0,
+      x1: T.x1 !== void 0 ? T.x1 * f : void 0,
+      y1: T.y1 !== void 0 ? T.y1 * f : void 0,
+      x2: T.x2 !== void 0 ? T.x2 * f : void 0,
+      y2: T.y2 !== void 0 ? T.y2 * f : void 0,
+      labelX: T.labelX * f,
+      labelY: T.labelY * f
     }));
-    Ct.renderSnapGuidesLayer(t, T), Ct.renderSpacingIndicatorsLayer(t, v), u !== 1 && t.restore();
+    Mt.renderSnapGuidesLayer(t, m), Mt.renderSpacingIndicatorsLayer(t, w), f !== 1 && t.restore();
   }
   /**
    * Single-selection interaction chrome: bbox, handles, position/size
@@ -3317,9 +3372,9 @@ const De = $t("CanvasRenderer"), K = class K {
   static renderInteractionChromeLayer({
     ctx: t,
     selectedElement: e,
-    transformHandles: o,
+    transformHandles: s,
     stateMachine: n,
-    currentRotation: s,
+    currentRotation: o,
     isRotating: i,
     hoverState: a,
     selectedId: r,
@@ -3327,35 +3382,35 @@ const De = $t("CanvasRenderer"), K = class K {
     isEditing: h,
     isAltKeyPressed: c = !1,
     artboardBackgroundColor: d,
-    hoverClipArtboard: u,
+    hoverClipArtboard: f,
     showRotationHandle: p = !0,
     zoom: b = 1,
     paddingOffset: g = { x: 0, y: 0 }
   }) {
     if (b !== 1) {
       t.save();
-      const m = t.getTransform().a / b, T = g.x * b * m, v = g.y * b * m;
-      t.setTransform(m, 0, 0, m, T, v);
+      const S = t.getTransform().a / b, m = g.x * b * S, w = g.y * b * S;
+      t.setTransform(S, 0, 0, S, m, w);
     }
     if (e && Re(e) && e.isCropping)
-      o && Dt.renderCropBoxLayer(t, e, o, b);
-    else if (!l && n && mt.renderSelectionLayer(t, e, n, b), o && n && mt.renderPositionSizeInfo(t, e, o, n, b), !l && o && n && mt.renderHandlesLayer(
+      s && Dt.renderCropBoxLayer(t, e, s, b);
+    else if (!l && n && mt.renderSelectionLayer(t, e, n, b), s && n && mt.renderPositionSizeInfo(t, e, s, n, b), !l && s && n && mt.renderHandlesLayer(
       t,
       e,
-      o,
       s,
+      o,
       i,
       a,
       n,
       b,
       p
     ), !h) {
-      if (u) {
+      if (f) {
         t.save();
-        const y = u, m = y.x * b, T = y.y * b, v = y.width * b, S = y.height * b, C = (y.borderRadius ?? 0) * b;
-        t.beginPath(), C > 0 ? t.roundRect(m, T, v, S, C) : t.rect(m, T, v, S), t.clip();
+        const y = f, S = y.x * b, m = y.y * b, w = y.width * b, T = y.height * b, C = (y.borderRadius ?? 0) * b;
+        t.beginPath(), C > 0 ? t.roundRect(S, m, w, T, C) : t.rect(S, m, w, T), t.clip();
       }
-      _t.renderHoverLayer(t, a, r, c, b, d), u && t.restore();
+      _t.renderHoverLayer(t, a, r, c, b, d), f && t.restore();
     }
     b !== 1 && t.restore();
   }
@@ -3363,17 +3418,18 @@ const De = $t("CanvasRenderer"), K = class K {
 K._contentCanvas = null, K._contentCanvasSize = { width: 0, height: 0 }, K._maskCanvas = null, K._maskCanvasSize = { width: 0, height: 0 }, K._cachedElementsRef = null, K._cachedElementConfigs = null, K._cachedElementMap = null, K._knockoutRenderedIds = /* @__PURE__ */ new Set(), K.onRenderError = null;
 let Kt = K;
 export {
-  Ke as A,
+  Ze as A,
   Kt as C,
-  Ne as I,
-  Le as R,
-  $e as S,
-  Ge as T,
+  Ue as I,
+  Ve as R,
+  Je as S,
+  je as T,
   Jt as a,
-  Oe as b,
-  Fe as c,
-  Xe as d,
+  Ke as b,
+  Ne as c,
+  We as d,
+  qe as e,
   Gt as g,
-  Ye as r
+  $e as r
 };
-//# sourceMappingURL=CanvasRenderer-yszzrDfo.js.map
+//# sourceMappingURL=CanvasRenderer-B_3GISlW.js.map