@snowcone-app/canvas 0.38.0 → 0.39.0

package/dist/{CanvasRenderer-D-E5WWLm.js → CanvasRenderer-COO5UXtZ.js}

@@ -1,6 +1,6 @@
-import { k as ie, l as ae, Y as nt, m as Ot, Z as re, _ as le, $ as Yt, a0 as he, a1 as gt, a2 as ce, a3 as Gt, a4 as de, a5 as fe, c as Jt, a6 as ge, a7 as ue, a8 as pe, a9 as ye, aa as Qt, s as te, ab as pt, w as ee, ac as Lt, ad as Xt, ae as Pt, af as Nt, ag as be, ah as Se, ai as Kt, aj as me, ak as Te, al as we, I as ve, am as xe, an as Me, ao as tt } from "./FontAnalyzer-DWHS41ba.js";
-import { T as Wt, b as Re, u as Ce, K as ke, L as Dt, z as At, M as Pe, N as Ae, O as Ee, P as $t } from "./ExportManager-BbBfO22S.js";
-import { a as _t, i as He } from "./guards-DMmhw_Ow.js";
+import { k as re, l as le, Y as nt, m as Ot, Z as he, _ as ce, $ as Yt, a0 as de, a1 as gt, a2 as fe, a3 as Gt, a4 as ge, a5 as ue, c as Qt, a6 as pe, a7 as ye, a8 as be, a9 as Se, aa as te, s as ee, ab as pt, w as ne, ac as Lt, ad as Xt, ae as Pt, af as Nt, ag as me, ah as Te, ai as Kt, aj as we, ak as ve, al as Me, I as xe, am as Re, an as Ce, ao as tt } from "./FontAnalyzer-DWHS41ba.js";
+import { T as Wt, b as ke, u as Pe, K as Ae, L as Dt, z as At, M as Ee, N as He, O as Ie, P as $t } from "./ExportManager-BbBfO22S.js";
+import { a as _t, i as Be } from "./guards-DMmhw_Ow.js";
 const ct = {
   // Canvas-specific
   canvas: {
@@ -15,30 +15,30 @@ const ct = {
     spacingLabelFontSize: 11,
     spacingLabelFontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
   }
-}, Ie = 2, Ct = 6, Be = 16, Le = 5, We = 5, ne = 0.5;
-function jt(x) {
-  return Ie / x;
+}, Le = 2, Ct = 6, We = 16, De = 5, _e = 5, se = 0.5;
+function jt(v) {
+  return Le / v;
 }
-function Ue(x) {
-  return Ct / x;
+function Qe(v) {
+  return Ct / v;
 }
-function De(x) {
-  return Be / x;
+function ze(v) {
+  return We / v;
 }
-function Ze(x) {
-  return [Le / x, We / x];
+function tn(v) {
+  return [De / v, _e / v];
 }
-function _e(x, t, e, o) {
-  x.save();
-  const n = ne / o;
-  x.translate(t, e), x.scale(n, n), x.strokeStyle = "#000", x.lineWidth = 1.5, x.lineCap = "round", x.lineJoin = "round", x.translate(-12, -12), x.beginPath(), x.moveTo(21, 12), x.arc(12, 12, 9, 0, -Math.PI / 2, !0), x.bezierCurveTo(3.5, 4.5, 4, 6, 3, 8), x.stroke(), x.beginPath(), x.moveTo(3, 3), x.lineTo(3, 8), x.lineTo(8, 8), x.stroke(), x.beginPath(), x.moveTo(3, 12), x.arc(12, 12, 9, Math.PI, Math.PI / 2, !0), x.bezierCurveTo(20.5, 19.5, 20, 18, 21, 16), x.stroke(), x.beginPath(), x.moveTo(16, 16), x.lineTo(21, 16), x.lineTo(21, 21), x.stroke(), x.restore();
+function Ve(v, t, e, s) {
+  v.save();
+  const n = se / 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 Je(x, t, e, o = 1, n = "#3b82f6", s = !1) {
-  const i = De(o);
-  x.save(), x.fillStyle = "#fff", x.strokeStyle = n, x.lineWidth = s ? jt(o) * 1.25 : jt(o), x.beginPath(), x.arc(t, e, i, 0, Math.PI * 2), x.fill(), x.stroke(), _e(x, t, e, o), x.restore();
+function en(v, t, e, s = 1, n = "#3b82f6", o = !1) {
+  const i = ze(s);
+  v.save(), v.fillStyle = "#fff", v.strokeStyle = n, v.lineWidth = o ? jt(s) * 1.25 : jt(s), v.beginPath(), v.arc(t, e, i, 0, Math.PI * 2), v.fill(), v.stroke(), Ve(v, t, e, s), v.restore();
 }
 const qt = Ct * 2;
-class Qe {
+class nn {
   constructor() {
     this.resizeHandles = [], this.rotationHandle = null, this.elementRotation = 0, this.rotationAnchor = { x: 0, y: 0 };
   }
@@ -48,18 +48,18 @@ class Qe {
    * @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 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 = ct.canvas.selectionPadding, r = {
       x: n.x - a,
       y: n.y - a,
       width: n.width + a * 2,
       height: n.height + a * 2
-    }, l = ie(r, t.rotation, s), h = Math.abs(t.rotation % 360) > 0.1;
-    this.resizeHandles = l.filter((c) => !(!i.includes(c.anchor) || h && c.anchor.includes("middle"))), this.rotationHandle = ae(
+    }, l = re(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 = le(
       r,
       t.rotation,
-      s,
+      o,
       e
     );
   }
@@ -67,67 +67,67 @@ class Qe {
    * 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), 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, s, l), h && e && this.rotationHandle && n && this.renderRotationTooltip(t, this.rotationHandle, o, 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 = qt * 0.6, c = qt * 1.4, d = h / 2, f = i - h / 2, b = a - c / 2;
-      t.fillStyle = "#fff", t.strokeStyle = nt(t.canvas), t.lineWidth = o || n ? 2.5 : 2, t.beginPath(), t.roundRect(f, b, h, c, d), t.fill(), t.stroke();
+      t.fillStyle = "#fff", t.strokeStyle = nt(t.canvas), t.lineWidth = s || n ? 2.5 : 2, t.beginPath(), t.roundRect(f, b, h, c, d), t.fill(), t.stroke();
     } else
-      t.fillStyle = "#fff", t.strokeStyle = nt(t.canvas), t.lineWidth = o || n ? 2.5 : 2, t.beginPath(), t.arc(i, a, Ct, 0, Math.PI * 2), t.fill(), t.stroke();
+      t.fillStyle = "#fff", t.strokeStyle = nt(t.canvas), t.lineWidth = s || n ? 2.5 : 2, t.beginPath(), t.arc(i, a, Ct, 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 = Ct * 2.67;
-    t.fillStyle = "#fff", t.strokeStyle = nt(t.canvas), t.lineWidth = o ? 2.5 : 2, t.beginPath(), t.arc(s, i, a, 0, Math.PI * 2), t.fill(), t.stroke();
-    const r = ne;
-    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();
+    const o = e.x * n, i = e.y * n, a = Ct * 2.67;
+    t.fillStyle = "#fff", t.strokeStyle = nt(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 = se;
+    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 = le / o;
-    for (const s of this.resizeHandles)
-      if (Ot(t, e, s.x, s.y, n))
-        return s;
+  hitTestResize(t, e, s = 1) {
+    const n = ce / s;
+    for (const o of this.resizeHandles)
+      if (Ot(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 = (Ct * 2.67 + 2) / o;
+    const n = (Ct * 2.67 + 2) / s;
     return Ot(t, e, this.rotationHandle.x, this.rotationHandle.y, n);
   }
   /**
@@ -142,65 +142,65 @@ class Qe {
    * @param rotation - Element rotation in degrees
    */
   getCursor(t, e) {
-    const o = t.anchor.includes("middle") ? "edge" : "corner";
-    return re(
+    const s = t.anchor.includes("middle") ? "edge" : "corner";
+    return he(
       t.x,
       t.y,
       this.rotationAnchor.x,
       this.rotationAnchor.y,
-      o,
+      s,
       e,
       t.anchor
     );
   }
 }
-const ze = 15;
-function Ve(x, t) {
-  return Math.abs(x) >= Math.abs(t) ? "x" : "y";
+const Fe = 15;
+function Oe(v, t) {
+  return Math.abs(v) >= Math.abs(t) ? "x" : "y";
 }
-function Fe(x, t, e) {
-  return e != null && e.shift ? Ve(x, t) === "x" ? { dx: x, dy: 0, lockedAxis: "y" } : { dx: 0, dy: t, lockedAxis: "x" } : { dx: x, dy: t, lockedAxis: null };
+function Ye(v, t, e) {
+  return e != null && e.shift ? Oe(v, t) === "x" ? { dx: v, dy: 0, lockedAxis: "y" } : { dx: 0, dy: t, lockedAxis: "x" } : { dx: v, dy: t, lockedAxis: null };
 }
-function Oe(x, t = ze) {
-  let o = (Math.round(x / t) * t % 360 + 360) % 360;
-  return o > 180 && (o -= 360), o === 0 ? 0 : o;
+function Ge(v, t = Fe) {
+  let s = (Math.round(v / t) * t % 360 + 360) % 360;
+  return s > 180 && (s -= 360), s === 0 ? 0 : s;
 }
-function Ye({
-  anchor: x,
+function Xe({
+  anchor: v,
   startVisualWidth: t,
   startVisualHeight: e,
-  newVisualWidth: o,
+  newVisualWidth: s,
   newVisualHeight: n
 }) {
-  const s = t !== 0 ? t : 1, i = e !== 0 ? e : 1, a = o / s, r = n / i;
+  const o = t !== 0 ? t : 1, i = e !== 0 ? e : 1, a = s / o, r = n / i;
   let l;
-  return x === "middle-left" || x === "middle-right" ? l = a : x === "middle-top" || x === "middle-bottom" ? l = r : l = Math.abs(a - 1) >= Math.abs(r - 1) ? a : r, {
+  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 Ge {
+class Ne {
   /**
    * Calculate new dimensions and position for a resize operation
    */
   static calculateResize({
     element: t,
     handle: e,
-    dx: o,
+    dx: s,
     dy: n,
-    startData: s,
+    startData: o,
     snapSystem: i,
     modifiers: a
   }) {
     var F, D, N, j, H;
-    const l = new Yt(t).worldDeltaToLocal(o, n), h = l.dx, c = l.dy, d = s.visualWidth ?? s.width ?? 0, f = s.visualHeight ?? s.height ?? 0, b = s.width ?? 0, u = s.height ?? 0;
+    const l = new Yt(t).worldDeltaToLocal(s, n), h = l.dx, c = l.dy, d = o.visualWidth ?? o.width ?? 0, f = o.visualHeight ?? o.height ?? 0, b = o.width ?? 0, u = o.height ?? 0;
     let p = d, g = f;
     e.anchor.includes("right") ? p = d + h : e.anchor.includes("left") && (p = d - h), e.anchor !== "middle-left" && e.anchor !== "middle-right" && (e.anchor.includes("bottom") ? g = f + c : e.anchor.includes("top") && (g = f - c));
     const y = (a == null ? void 0 : a.shift) === !0;
     let S = null;
     if (y) {
-      const z = Ye({
+      const z = Xe({
         anchor: e.anchor,
         startVisualWidth: d,
         startVisualHeight: f,
@@ -233,7 +233,7 @@ class Ge {
             (E) => typeof E == "object" && E !== null && "frozenWidth" in E
           );
           if (G) {
-            const E = t, _ = s.transformData, U = G.frozenWidth ?? ((N = E.transformData) == null ? void 0 : N.width) ?? b, ot = E.imageAspectRatio || (_ != null && _.width && (_ != null && _.height) ? _.width / _.height : null);
+            const E = t, _ = o.transformData, U = G.frozenWidth ?? ((N = E.transformData) == null ? void 0 : N.width) ?? b, ot = E.imageAspectRatio || (_ != null && _.width && (_ != null && _.height) ? _.width / _.height : null);
             let et = G.frozenHeight;
             et == null && (ot && ot !== 0 ? et = U / ot : (j = E.transformData) != null && j.height ? et = E.transformData.height : et = u);
             const lt = b !== 0 ? U / b : 1, Y = u !== 0 ? et / u : 1;
@@ -243,23 +243,23 @@ class Ge {
       }
     }
     m = Math.max(50, m), w = Math.max(40, w);
-    const M = t.clone(), I = M.resize(e.anchor, m, w, s);
-    if (!e.anchor.includes("middle") && ((H = M.stroke) != null && H.enabled) && s.strokeWidth !== void 0 && s.strokeWidth > 0) {
-      const z = s.width ?? 1, K = s.height ?? 1, Q = Math.sqrt(m / z * (w / K)), L = Math.max(1, Math.round(s.strokeWidth * Q * 10) / 10);
-      M.stroke = { ...M.stroke, width: L };
+    const x = t.clone(), I = x.resize(e.anchor, m, w, o);
+    if (!e.anchor.includes("middle") && ((H = x.stroke) != null && H.enabled) && o.strokeWidth !== void 0 && o.strokeWidth > 0) {
+      const z = o.width ?? 1, K = o.height ?? 1, Q = Math.sqrt(m / z * (w / K)), L = Math.max(1, Math.round(o.strokeWidth * Q * 10) / 10);
+      x.stroke = { ...x.stroke, width: L };
     }
-    const P = C || I === !1, k = e.anchor.includes("top") || e.anchor.includes("bottom"), B = "isCropping" in M && M.isCropping, W = "isGroup" in M && M.isGroup;
+    const P = C || I === !1, k = e.anchor.includes("top") || e.anchor.includes("bottom"), B = "isCropping" in x && x.isCropping, W = "isGroup" in x && x.isGroup;
     if (k && !B && !W) {
       const z = t.getRotationAnchor(), K = this._calculateFixedCornerOffset({
         element: t,
-        updatedElement: M,
+        updatedElement: x,
         handle: e,
         rotationAnchor: z
       });
-      M.x += K.x, M.y += K.y;
+      x.x += K.x, x.y += K.y;
     }
     return {
-      element: M,
+      element: x,
       isFrozen: P,
       // For snap system to detect break-free: dimensions before freeze was applied
       unfrozenDimensions: C ? { width: T, height: R } : void 0
@@ -273,10 +273,10 @@ class Ge {
   static _calculateFixedCornerOffset({
     element: t,
     updatedElement: e,
-    handle: o,
+    handle: s,
     rotationAnchor: n
   }) {
-    const s = new Yt(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), f = d.x, b = d.y, u = r.x - h.x, p = r.y - h.y, g = u + f, y = p + b, S = g * i - y * a, m = g * a + y * i, w = h.x + S, T = h.y + m, R = this._getFixedLocalCoords(o.anchor, l.width, l.height), C = R.x, M = R.y, I = l.x - c.x, v = l.y - c.y, P = I + C, k = v + M, B = P * i - k * a, W = P * a + k * i, F = c.x + B, D = c.y + W;
+    const o = new Yt(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, b = d.y, u = r.x - h.x, p = r.y - h.y, g = u + f, y = p + b, S = g * i - y * a, m = g * a + y * i, w = h.x + S, T = h.y + m, R = this._getFixedLocalCoords(s.anchor, l.width, l.height), C = R.x, x = R.y, I = l.x - c.x, M = l.y - c.y, P = I + C, k = M + x, B = P * i - k * a, W = P * a + k * i, F = c.x + B, D = c.y + W;
     return {
       x: w - F,
       y: T - D
@@ -286,14 +286,14 @@ class Ge {
    * 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;
@@ -302,13 +302,13 @@ class Ge {
         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;
@@ -317,7 +317,7 @@ class Ge {
     return n;
   }
 }
-class Xe {
+class Ke {
   constructor() {
     this.hooks = {
       beforeResize: [],
@@ -341,8 +341,8 @@ class Xe {
    */
   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
@@ -362,9 +362,9 @@ class Xe {
    * 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;
   }
   /**
@@ -372,24 +372,24 @@ class Xe {
    */
   executeResize(t) {
     const e = this.runHooks("beforeResize", t);
-    let o = Ge.calculateResize({
+    let s = Ne.calculateResize({
       ...e,
       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 tn = new Xe();
-class en {
+const sn = new Ke();
+class on {
   constructor(t = null) {
     this.state = "IDLE", this.context = {
       mode: null,
@@ -433,14 +433,14 @@ class en {
   /**
    * 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,
@@ -452,7 +452,7 @@ class en {
       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
@@ -481,13 +481,13 @@ class en {
    * element off the locked axis. Read modifiers from the CURRENT
    * pointer event — users press/release Shift mid-gesture.
    */
-  updateDrag(t, e, o = null, n) {
+  updateDrag(t, e, s = null, n) {
     if (this.state !== "DRAGGING")
       throw new Error("Cannot update drag: not in DRAGGING state");
-    const s = t - this.context.startX, i = e - this.context.startY, { dx: a, dy: r, lockedAxis: l } = Fe(s, i, n), h = this.context.startData;
+    const o = t - this.context.startX, i = e - this.context.startY, { dx: a, dy: r, lockedAxis: l } = Ye(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 f = this.snapHandler.snapPosition({ x: c, y: d }, this.context.element, o);
+      const f = this.snapHandler.snapPosition({ x: c, y: d }, this.context.element, s);
       c = f.x, d = f.y;
     }
     return l === "x" ? c = h.x : l === "y" && (d = h.y), { x: c, y: d };
@@ -495,12 +495,12 @@ class en {
   /**
    * 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,
@@ -508,8 +508,8 @@ class en {
         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
@@ -523,8 +523,8 @@ class en {
   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
@@ -556,16 +556,16 @@ class en {
    * 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
     };
@@ -573,14 +573,14 @@ class en {
   /**
    * 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,
@@ -597,12 +597,12 @@ class en {
    * 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, s) {
+  updateRotate(t, e, s, n, o) {
     if (this.state !== "ROTATING")
       throw new Error("Cannot update rotate: not in ROTATING state");
-    const i = this.context.startData, r = (he(o, n, t, e) - i.startAngle) * 180 / Math.PI;
+    const i = this.context.startData, r = (de(s, n, t, e) - i.startAngle) * 180 / Math.PI;
     let l = i.currentRotation - r;
-    return l = (l % 360 + 360) % 360, l > 180 && (l -= 360), s != null && s.shift ? Oe(l) : this.snapHandler && this.snapHandler.snapRotation && this.context.element ? this.snapHandler.snapRotation(l, this.context.element) : l;
+    return l = (l % 360 + 360) % 360, l > 180 && (l -= 360), o != null && o.shift ? Ge(l) : this.snapHandler && this.snapHandler.snapRotation && this.context.element ? this.snapHandler.snapRotation(l, this.context.element) : l;
   }
   /**
    * Get rotation context
@@ -624,12 +624,12 @@ class en {
    * 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,
@@ -660,14 +660,14 @@ class en {
   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
     };
   }
@@ -736,7 +736,7 @@ class mt {
    * - 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 },
@@ -753,17 +753,17 @@ class mt {
       rotation: this.resolve(t)
     };
     if (t.rotation !== 0) {
-      const n = o.rotation, s = gt.toRadiansInverse(t.rotation);
-      Object.keys(o).forEach((i) => {
+      const n = s.rotation, o = gt.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)
@@ -817,11 +817,11 @@ class mt {
    * (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 Ut {
@@ -835,8 +835,8 @@ class Ut {
   /** 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);
   }
@@ -844,12 +844,12 @@ class Ut {
   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);
@@ -862,8 +862,8 @@ class Ut {
    * [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}`, f = this.cells.get(d);
@@ -871,10 +871,10 @@ class Ut {
           for (const b of f) {
             if (n !== void 0 && b.id === n) continue;
             const u = b.x - t, p = b.y - e;
-            u * u + p * p <= o * o && s.push(b);
+            u * u + p * p <= s * s && o.push(b);
           }
       }
-    return s;
+    return o;
   }
   /**
    * Query all items whose coordinate on `axis` is within `radius` of the
@@ -888,26 +888,26 @@ class Ut {
    *
    * 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) {
@@ -920,25 +920,25 @@ class Ut {
     return `${Math.floor(t / this.cellSize)},${Math.floor(e / this.cellSize)}`;
   }
 }
-function ft(x) {
-  const t = x.transformData;
+function ft(v) {
+  const t = v.transformData;
   if (t && "width" in t && typeof t.width == "number")
     return t.width;
 }
-function Tt(x) {
-  const t = x.transformData;
+function Tt(v) {
+  const t = v.transformData;
   if (t && "height" in t && typeof t.height == "number")
     return t.height;
 }
-function Mt(x, t) {
-  const e = x.transformData;
+function xt(v, t) {
+  const e = v.transformData;
   return e && "width" in e ? (e.width = t, !0) : !1;
 }
-function Et(x, t) {
-  const e = x.transformData;
+function Et(v, t) {
+  const e = v.transformData;
   return e && "height" in e ? (e.height = t, !0) : !1;
 }
-class nn {
+class an {
   constructor(t = {}) {
     this._extraSnapRects = [], this.snapThreshold = t.snapThreshold || ct.canvas.snapThreshold, this.enabled = t.enabled !== !1, this.showGuides = t.showGuides !== !1, this.guides = [], this.activeSnaps = {
       x: null,
@@ -996,31 +996,31 @@ class nn {
   _populateSpatialGrid(t) {
     this._spatialGrid.clear(), this._anchorMetadata.clear();
     for (const e of t) {
-      const o = mt.getSnapAnchors(e);
-      for (const [n, s] of Object.entries(o)) {
+      const s = mt.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)) {
@@ -1040,23 +1040,23 @@ class nn {
   /**
    * 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 = mt.getSnapAnchors(n), i = o.filter((y) => y.id !== e.id);
+    const o = mt.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 = [], f = [];
-    for (const [y, S] of Object.entries(s)) {
+    for (const [y, S] of Object.entries(o)) {
       const m = this._spatialGrid.queryNearAxis("x", S.x, this.snapThreshold);
       for (const T of m) {
         const R = this._anchorMetadata.get(T.id);
         if (!R) continue;
-        const C = R.point, M = R.anchorKey, I = Math.abs(S.x - C.x);
+        const C = R.point, x = R.anchorKey, I = Math.abs(S.x - C.x);
         if (I < this.snapThreshold) {
-          const v = {
+          const M = {
             snapTo: C.x,
             offset: S.x - t.x,
             // How far anchor is from element position
@@ -1067,19 +1067,19 @@ class nn {
               y1: Math.min(S.y, C.y) - 50,
               y2: Math.max(S.y, C.y) + 50,
               movingKey: y,
-              otherKey: M
+              otherKey: x
             }
           };
-          c.push(v), I < l && (l = I, a = v);
+          c.push(M), I < l && (l = I, a = M);
         }
       }
       const w = this._spatialGrid.queryNearAxis("y", S.y, this.snapThreshold);
       for (const T of w) {
         const R = this._anchorMetadata.get(T.id);
         if (!R) continue;
-        const C = R.point, M = R.anchorKey, I = Math.abs(S.y - C.y);
+        const C = R.point, x = R.anchorKey, I = Math.abs(S.y - C.y);
         if (I < this.snapThreshold) {
-          const v = {
+          const M = {
             snapTo: C.y,
             offset: S.y - t.y,
             distance: I,
@@ -1089,10 +1089,10 @@ class nn {
               x1: Math.min(S.x, C.x) - 50,
               x2: Math.max(S.x, C.x) + 50,
               movingKey: y,
-              otherKey: M
+              otherKey: x
             }
           };
-          d.push(v), I < h && (h = I, r = v);
+          d.push(M), I < h && (h = I, r = M);
         }
       }
     }
@@ -1117,16 +1117,16 @@ class nn {
    * 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 = ft(t) ?? t.width ?? s.width;
+      return o.fontSize ?? 0;
+    const r = ft(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)
@@ -1153,9 +1153,9 @@ class nn {
    * 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);
@@ -1163,7 +1163,7 @@ class nn {
         const c = this._anchorMetadata.get(h.id);
         if (!c || !i.has(c.anchorKey)) continue;
         const d = c.point, f = c.anchorKey, b = Math.abs(r.x - d.x);
-        b < this.snapThreshold && s.push({
+        b < this.snapThreshold && o.push({
           distance: b,
           snapTo: d.x,
           currentValue: r.x,
@@ -1178,16 +1178,16 @@ class nn {
         });
       }
     }
-    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);
@@ -1195,7 +1195,7 @@ class nn {
         const c = this._anchorMetadata.get(h.id);
         if (!c || !i.has(c.anchorKey)) continue;
         const d = c.point, f = c.anchorKey, b = Math.abs(r.y - d.y);
-        b < this.snapThreshold && s.push({
+        b < this.snapThreshold && o.push({
           distance: b,
           snapTo: d.y,
           currentValue: r.y,
@@ -1210,39 +1210,39 @@ class nn {
         });
       }
     }
-    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 = mt.getSnapAnchors(l);
@@ -1262,9 +1262,9 @@ class nn {
           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 = mt.getSnapAnchors(l);
@@ -1293,9 +1293,9 @@ class nn {
    * 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
@@ -1313,17 +1313,17 @@ class nn {
    * @param handle - The resize handle being dragged
    * @returns {Object} { frozenWidth, frozenHeight } - Dimensions at snap point
    */
-  _calculateFrozenDimensionsAtSnap(t, e, o, n, s) {
+  _calculateFrozenDimensionsAtSnap(t, e, s, n, o) {
     const i = ft(t) ?? t.width ?? 0, a = Tt(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) {
@@ -1336,7 +1336,7 @@ class nn {
               n,
               t === "x" ? l : 0,
               t === "y" ? l : 0,
-              s,
+              o,
               i
             );
             p !== r.frozenFontSize && (r.frozenFontSize = p);
@@ -1344,13 +1344,13 @@ class nn {
           h = this._createGuideForSnap(r, r.anchorKey, e, a, t);
         } else {
           const u = r;
-          if (this.activeSnaps[t] = null, o.length > 0 && o[0].distance < this.snapThreshold) {
-            h = o[0], l = h.snapTo - h.currentValue;
+          if (this.activeSnaps[t] = null, s.length > 0 && s[0].distance < this.snapThreshold) {
+            h = s[0], l = h.snapTo - h.currentValue;
             const p = u && u.anchorKey === h.guide.movingKey && Math.abs(u.snapTo - h.snapTo) < 1, g = p ? u.frozenFontSize : this._calculateFrozenFontSizeAtSnap(
               n,
               t === "x" ? l : 0,
               t === "y" ? l : 0,
-              s,
+              o,
               i
             ), y = this._isPositionBasedSnap(n, t);
             let S;
@@ -1363,7 +1363,7 @@ class nn {
               t,
               l,
               h.guide.movingKey,
-              s
+              o
             );
             this.activeSnaps[t] = {
               snapTo: h.snapTo,
@@ -1378,13 +1378,13 @@ class nn {
         }
       } else
         this.activeSnaps[t] = null;
-    } else if (o.length > 0 && o[0].distance < this.snapThreshold) {
-      h = o[0], l = h.snapTo - h.currentValue;
+    } 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
       ), b = this._isPositionBasedSnap(n, t);
       let u;
@@ -1397,7 +1397,7 @@ class nn {
         t,
         l,
         h.guide.movingKey,
-        s
+        o
       );
       this.activeSnaps[t] = {
         snapTo: h.snapTo,
@@ -1414,16 +1414,16 @@ class nn {
   /**
    * Adjust element for right edge resize
    */
-  _adjustElementForRightResize(t, e, o) {
-    const n = t.getVisualBoundingBox(), s = t.transformType === "image";
-    if (!s) {
+  _adjustElementForRightResize(t, e, s) {
+    const n = t.getVisualBoundingBox(), o = t.transformType === "image";
+    if (!o) {
       const i = ft(t);
-      i !== void 0 ? Mt(t, i + e) : t.width !== void 0 && (t.width += e);
+      i !== void 0 ? xt(t, i + e) : t.width !== void 0 && (t.width += e);
     }
-    if (o.anchor === "middle-right") {
+    if (s.anchor === "middle-right") {
       const i = gt.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);
     }
@@ -1431,16 +1431,16 @@ class nn {
   /**
    * Adjust element for left edge resize
    */
-  _adjustElementForLeftResize(t, e, o) {
-    const n = t.getVisualBoundingBox(), s = t.transformType === "image";
-    if (!s) {
+  _adjustElementForLeftResize(t, e, s) {
+    const n = t.getVisualBoundingBox(), o = t.transformType === "image";
+    if (!o) {
       const i = ft(t);
-      i !== void 0 ? Mt(t, i - e) : t.width !== void 0 && (t.width -= e);
+      i !== void 0 ? xt(t, i - e) : t.width !== void 0 && (t.width -= e);
     }
-    if (o.anchor === "middle-left") {
+    if (s.anchor === "middle-left") {
       const i = gt.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);
     }
@@ -1448,36 +1448,36 @@ class nn {
   /**
    * 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 = Tt(t);
       r !== void 0 ? Et(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") {
+    if (s.anchor === "middle-bottom") {
       const r = gt.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 = Tt(t);
       r !== void 0 ? Et(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") {
+    if (s.anchor === "middle-top") {
       const r = gt.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);
@@ -1492,63 +1492,63 @@ class nn {
    * @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 T, R, C, M, I;
+  snapDimensions(t, e, s = null) {
+    var T, R, C, x, I;
     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 v = n.clone();
-      if (v.transformData) {
-        const P = n.getVisualBoundingBox(), k = P.width, B = P.height, W = (o == null ? void 0 : o.width) ?? n.width ?? 0, F = (o == null ? void 0 : o.height) ?? n.height ?? 0, D = (o == null ? void 0 : o.visualWidth) ?? k, N = (o == null ? void 0 : o.visualHeight) ?? B, j = t.unfrozenDimensions.width / D, H = t.unfrozenDimensions.height / N;
-        Mt(v, W * j), Et(v, F * H);
+      const M = n.clone();
+      if (M.transformData) {
+        const P = n.getVisualBoundingBox(), k = P.width, B = P.height, W = (s == null ? void 0 : s.width) ?? n.width ?? 0, F = (s == null ? void 0 : s.height) ?? n.height ?? 0, D = (s == null ? void 0 : s.visualWidth) ?? k, N = (s == null ? void 0 : s.visualHeight) ?? B, j = t.unfrozenDimensions.width / D, H = t.unfrozenDimensions.height / N;
+        xt(M, W * j), Et(M, F * H);
       }
-      i = mt.getSnapAnchors(v);
+      i = mt.getSnapAnchors(M);
     } else
       i = mt.getSnapAnchors(n);
-    const l = e.filter((v) => v.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), f = this._findYSnaps(i, l, h, c);
-    this._prioritizeSnaps(d, s, "x"), this._prioritizeSnaps(f, s, "y");
-    const b = this._processStickySnap("x", i, d, n, s, o, l), u = this._processStickySnap("y", i, f, n, s, o, l), p = b.snapDelta, g = u.snapDelta, y = b.bestSnap, S = u.bestSnap, m = [];
+    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 b = this._processStickySnap("x", i, d, n, o, s, l), u = this._processStickySnap("y", i, f, n, o, s, l), p = b.snapDelta, g = u.snapDelta, y = b.bestSnap, S = u.bestSnap, m = [];
     y && m.push(y.guide), S && m.push(S.guide), this.guides = m, m.length > 0;
-    const w = s && (s.anchor === "top-left" || s.anchor === "top-right" || s.anchor === "bottom-left" || s.anchor === "bottom-right");
+    const w = o && (o.anchor === "top-left" || o.anchor === "top-right" || o.anchor === "bottom-left" || o.anchor === "bottom-right");
     if (a && w && (p !== 0 || g !== 0))
       return t;
     if (p !== 0 || g !== 0) {
-      const v = n.clone(), P = this.activeSnaps.x || this.activeSnaps.y, k = (P == null ? void 0 : P.frozenFontSize) ?? n.fontSize ?? 0, B = (P == null ? void 0 : P.frozenWidth) ?? ft(n) ?? n.width ?? 0, W = (P == null ? void 0 : P.frozenHeight) ?? Tt(n) ?? n.height ?? 0, F = (P == null ? void 0 : P.frozenPosition) ?? { x: n.x, y: n.y }, D = v.isCropping && !String(s.anchor).startsWith("crop-");
+      const M = n.clone(), P = this.activeSnaps.x || this.activeSnaps.y, k = (P == null ? void 0 : P.frozenFontSize) ?? n.fontSize ?? 0, B = (P == null ? void 0 : P.frozenWidth) ?? ft(n) ?? n.width ?? 0, W = (P == null ? void 0 : P.frozenHeight) ?? Tt(n) ?? n.height ?? 0, F = (P == null ? void 0 : P.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 (p !== 0) {
             const L = (T = this.activeSnaps.x) == null ? void 0 : T.anchorKey, A = L == null ? void 0 : L.toLowerCase();
-            A && A.includes("right") ? this._adjustElementForRightResize(v, p, s) : A && A.includes("left") ? this._adjustElementForLeftResize(v, p, s) : v.x += p;
+            A && A.includes("right") ? this._adjustElementForRightResize(M, p, o) : A && A.includes("left") ? this._adjustElementForLeftResize(M, p, o) : M.x += p;
           }
           if (g !== 0) {
             const L = (R = this.activeSnaps.y) == null ? void 0 : R.anchorKey, A = L == null ? void 0 : L.toLowerCase();
-            A && A.includes("bottom") ? this._adjustElementForBottomResize(v, g, s) : A && A.includes("top") ? this._adjustElementForTopResize(v, g, s) : v.y += g;
+            A && A.includes("bottom") ? this._adjustElementForBottomResize(M, g, o) : A && A.includes("top") ? this._adjustElementForTopResize(M, g, o) : M.y += g;
           }
         } else
-          v.x += p, v.y += g;
-      v.fontSize !== void 0 && (v.fontSize = k);
-      const N = v.transformType === "image", j = this.activeSnaps.x !== null || this.activeSnaps.y !== null;
+          M.x += p, M.y += g;
+      M.fontSize !== void 0 && (M.fontSize = k);
+      const N = M.transformType === "image", j = this.activeSnaps.x !== null || this.activeSnaps.y !== null;
       if (N && j) {
-        if (ft(v) !== void 0) {
+        if (ft(M) !== void 0) {
           const L = this.activeSnaps.x || this.activeSnaps.y;
           let A = B, O = W;
           L && (A = L.frozenWidth ?? A, O = L.frozenHeight ?? O);
-          const G = ft(n), E = Tt(n), _ = v.imageAspectRatio || (G && E ? G / E : null);
-          _ && _ !== 0 && (O = A / _), Mt(v, A), Et(v, O), L && (L.frozenWidth = A, L.frozenHeight = O);
+          const G = ft(n), E = Tt(n), _ = M.imageAspectRatio || (G && E ? G / E : null);
+          _ && _ !== 0 && (O = A / _), xt(M, A), Et(M, O), L && (L.frozenWidth = A, L.frozenHeight = O);
         }
       } else
-        (((C = this.activeSnaps.y) == null ? void 0 : C.isPositionBasedSnap) || !1) && (ft(v) !== void 0 ? Mt(v, B) : v.width !== void 0 && (v.width = B));
-      const H = s && (s.anchor === "middle-left" || s.anchor === "middle-right"), z = s && (s.anchor === "middle-top" || s.anchor === "middle-bottom"), K = ((M = this.activeSnaps.x) == null ? void 0 : M.isPositionBasedSnap) || !1, Q = ((I = this.activeSnaps.y) == null ? void 0 : I.isPositionBasedSnap) || !1;
-      return (p === 0 || K) && !H && !z && !D && (v.x = F.x), (g === 0 || Q) && !z && !H && !D && (v.y = F.y), {
+        (((C = this.activeSnaps.y) == null ? void 0 : C.isPositionBasedSnap) || !1) && (ft(M) !== void 0 ? xt(M, B) : M.width !== void 0 && (M.width = B));
+      const H = o && (o.anchor === "middle-left" || o.anchor === "middle-right"), z = o && (o.anchor === "middle-top" || o.anchor === "middle-bottom"), K = ((x = this.activeSnaps.x) == null ? void 0 : x.isPositionBasedSnap) || !1, Q = ((I = this.activeSnaps.y) == null ? void 0 : I.isPositionBasedSnap) || !1;
+      return (p === 0 || K) && !H && !z && !D && (M.x = F.x), (g === 0 || Q) && !z && !H && !D && (M.y = F.y), {
         ...t,
-        element: v,
+        element: M,
         snapAdjustment: { dx: p, dy: g },
         // Flag to indicate we're in sticky snap mode (used to freeze font size)
         isInStickySnap: !0
@@ -1559,16 +1559,16 @@ class nn {
   /**
    * 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 (ce(t, i, s))
+      if (fe(t, i, o))
         return i;
     return t;
   }
 }
-class sn {
+class rn {
   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 = [];
   }
@@ -1600,17 +1600,17 @@ class sn {
    * 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 = Gt, s = o.filter((p) => p.id !== e.id);
-    if (s.length === 0)
+    const n = Gt, o = s.filter((p) => p.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, f = !1;
-    const b = s.filter((p) => {
+    const b = o.filter((p) => {
       const g = p.getVisualBoundingBox();
       return !(a.x + a.width < g.x || a.x > g.x + g.width);
     });
@@ -1656,7 +1656,7 @@ class sn {
         }
       }
     }
-    const u = s.filter((p) => {
+    const u = o.filter((p) => {
       const g = p.getVisualBoundingBox();
       return !(a.y + a.height < g.y || a.y > g.y + g.height);
     });
@@ -1710,31 +1710,31 @@ class sn {
    * 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(), f = s.x - (d.x + d.width), b = d.x - (s.x + s.width), u = s.y - (d.y + d.height), p = d.y - (s.y + s.height), g = !(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);
+      const d = c.getVisualBoundingBox(), f = o.x - (d.x + d.width), b = d.x - (o.x + o.width), u = o.y - (d.y + d.height), p = d.y - (o.y + o.height), g = !(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 && g && i.push({ element: c, distance: f }), b >= this.minDistance && b < this.detectionThreshold && g && a.push({ element: c, distance: b }), u >= this.minDistance && u < this.detectionThreshold && y && r.push({ element: c, distance: u }), p >= this.minDistance && p < this.detectionThreshold && y && l.push({ element: c, distance: p });
     }
     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
@@ -1742,13 +1742,13 @@ class sn {
         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
@@ -1763,9 +1763,9 @@ class sn {
    * 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)),
@@ -1780,7 +1780,7 @@ class sn {
         continue;
       let d = 0, f = !1, b = 0, u = 0, p = 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 && (f = !0, b = n.x + n.width, u = h.x, p = (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, b = h.x + h.width, u = n.x, p = (n.y + n.height / 2 + h.y + h.height / 2) / 2 + y)), f && (o.push({
+      h.x >= n.x + n.width ? (d = h.x - (n.x + n.width), d >= this.minDistance && (f = !0, b = n.x + n.width, u = h.x, p = (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, b = h.x + h.width, u = n.x, p = (n.y + n.height / 2 + h.y + h.height / 2) / 2 + y)), f && (s.push({
         type: "horizontal",
         distance: Math.round(d),
         x1: b,
@@ -1791,8 +1791,8 @@ class sn {
         isAltHover: !0
       }), a++);
       let S = 0, m = !1, w = 0, T = 0, R = 0;
-      const M = 30 * (r % 2 === 0 ? 1 : -1);
-      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 + M, T = n.y + n.height, R = 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 + M, T = h.y + h.height, R = n.y)), m && (o.push({
+      const x = 30 * (r % 2 === 0 ? 1 : -1);
+      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, R = 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, R = n.y)), m && (s.push({
         type: "vertical",
         distance: Math.round(S),
         x: w,
@@ -1803,16 +1803,16 @@ class sn {
         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((f) => {
+      const d = o.filter((f) => {
         if (f.id === t.id) return !1;
         const b = f.getVisualBoundingBox();
         return !(e.y + e.height < b.y || e.y > b.y + b.height);
@@ -1853,7 +1853,7 @@ class sn {
           }
         }
     } else {
-      const d = s.filter((f) => {
+      const d = o.filter((f) => {
         if (f.id === t.id) return !1;
         const b = f.getVisualBoundingBox();
         return !(e.x + e.width < b.x || e.x > b.x + b.width);
@@ -1899,9 +1899,9 @@ class sn {
   /**
    * Check if spacing would snap to a pattern
    */
-  checkIfWouldSnap(t, e, o, n) {
-    const s = Gt;
-    if (o === "top" || o === "bottom") {
+  checkIfWouldSnap(t, e, s, n) {
+    const o = Gt;
+    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);
@@ -1918,7 +1918,7 @@ class sn {
         }
         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;
@@ -1939,7 +1939,7 @@ class sn {
         }
         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;
@@ -1948,59 +1948,59 @@ class sn {
   /**
    * 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 zt = Jt("ArtboardRenderer"), Ne = {
+const zt = Qt("ArtboardRenderer"), $e = {
   showLabel: !0,
   showBorder: !0,
   borderColor: "",
@@ -2018,15 +2018,15 @@ const zt = Jt("ArtboardRenderer"), Ne = {
   borderRadius: 0
   // Default to no border radius (sharp corners)
 };
-class se {
+class oe {
   constructor(t = {}) {
-    this.options = { ...Ne, ...t };
+    this.options = { ...$e, ...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
@@ -2042,69 +2042,69 @@ class se {
    * Renders preset color as base layer, then texture on top
    */
   renderTextureBackground(t, e) {
-    const o = Wt.getTexture(e.backgroundTexture), n = Wt.getTexturePresetColor(e.backgroundTexture);
-    if (t.fillStyle = n, t.fillRect(e.x, e.y, e.width, e.height), !o || !o.complete) {
-      Wt.loadTexture(e.backgroundTexture).catch((s) => {
-        zt.error("Failed to load texture:", s);
+    const s = Wt.getTexture(e.backgroundTexture), n = Wt.getTexturePresetColor(e.backgroundTexture);
+    if (t.fillStyle = n, t.fillRect(e.x, e.y, e.width, e.height), !s || !s.complete) {
+      Wt.loadTexture(e.backgroundTexture).catch((o) => {
+        zt.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 || de(), h = this.options.selectedBorderColor || nt();
-    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 || ge(), h = this.options.selectedBorderColor || nt();
+    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, f = Math.min(i, a) / 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) {
-        zt.warn("Invalid SVG path for border, falling back to rectangle:", c), t.rect(n, s, i, a);
+        zt.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 || nt(), h = this.options.labelColor || fe();
-    t.fillStyle = o ? l : h, t.textAlign = "left", t.textBaseline = "bottom", t.fillText(i, a, r);
+    const l = this.options.selectedBorderColor || nt(), h = this.options.labelColor || ue();
+    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);
     });
   }
   /**
@@ -2120,26 +2120,26 @@ class se {
    * 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) {
-        zt.warn("Invalid SVG path, falling back to rectangle:", r), t.rect(o, n, s, i);
+        zt.warn("Invalid SVG path, falling back to rectangle:", r), t.rect(s, n, o, i);
       }
     t.clip();
   }
@@ -2147,8 +2147,8 @@ class se {
    * 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
@@ -2159,21 +2159,21 @@ class se {
   /**
    * 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) => {
@@ -2198,7 +2198,7 @@ class se {
    * Use this when exporting to ensure preview background is never included
    */
   static createForExport(t = {}) {
-    return new se({
+    return new oe({
       ...t,
       showPreviewBackground: !1
       // CRITICAL: Never show preview in exports
@@ -2211,12 +2211,44 @@ class se {
     return !!(this.options.showPreviewBackground && t.previewBackgroundColor && t.previewBackgroundColor !== "transparent");
   }
 }
+function je(v) {
+  const t = (v % 360 + 360) % 360;
+  if (t === 0) return [1, 0];
+  if (t === 90) return [0, 1];
+  if (t === 180) return [-1, 0];
+  if (t === 270) return [0, -1];
+  const e = t * Math.PI / 180;
+  return [Math.cos(e), Math.sin(e)];
+}
+function Zt(v, t, e) {
+  const [s, n] = je(e);
+  return { width: Math.abs(v * s) + Math.abs(t * n), height: Math.abs(v * n) + Math.abs(t * s) };
+}
+function ie(v) {
+  if (v.naturalWidth && v.naturalHeight) return { width: v.naturalWidth, height: v.naturalHeight };
+  const t = ((v.rotation ?? 0) % 360 + 360) % 360;
+  if (t % 90 !== 0)
+    throw new Error(`E_PIECE_NATURAL_DIMS: piece "${v.id ?? "?"}" is turned ${t}° but carries no naturalWidth/naturalHeight — the displayed box of a non-right angle doesn't determine them. Send them with the piece (the /piece-guides endpoint does)`);
+  return t === 90 || t === 270 ? { width: v.height, height: v.width } : { width: v.width, height: v.height };
+}
+function ln(v) {
+  const t = ((v.rotation ?? 0) % 360 + 360) % 360;
+  if (!t) return "";
+  const e = ie(v);
+  return `translate(${v.width / 2} ${v.height / 2}) rotate(${t}) translate(${-e.width / 2} ${-e.height / 2})`;
+}
+function hn(v, t) {
+  const e = ((t.rotation ?? 0) % 360 + 360) % 360;
+  if (!e) return;
+  const s = ie(t);
+  v.translate(t.width / 2, t.height / 2), v.rotate(e * Math.PI / 180), v.translate(-s.width / 2, -s.height / 2);
+}
 class wt {
   /**
    * 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 = nt(t.canvas), t.lineWidth = 2, t.translate(a.x * n, a.y * n), t.rotate(gt.toRadians(e.rotation)), t.translate(-a.x * n, -a.y * n);
     const r = ct.canvas.selectionPadding;
@@ -2231,31 +2263,31 @@ class wt {
    * 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 b = t.measureText(l).width + 12, u = 18;
-    t.shadowColor = ge(t.canvas), t.shadowBlur = 4, t.shadowOffsetY = 1, t.fillStyle = ue(t.canvas), t.beginPath(), t.roundRect(
+    t.shadowColor = pe(t.canvas), t.shadowBlur = 4, t.shadowOffsetY = 1, t.fillStyle = ye(t.canvas), t.beginPath(), t.roundRect(
       c - b / 2,
       d - u / 2,
       b,
       u,
       3
       // Smaller border radius
-    ), t.fill(), t.shadowColor = "transparent", t.shadowBlur = 0, t.shadowOffsetY = 0, t.fillStyle = pe(t.canvas), t.textAlign = "center", t.textBaseline = "middle", t.fillText(l, c, d + 0.5), t.restore();
+    ), t.fill(), t.shadowColor = "transparent", t.shadowBlur = 0, t.shadowOffsetY = 0, t.fillStyle = be(t.canvas), t.textAlign = "center", t.textBaseline = "middle", t.fillText(l, c, d + 0.5), t.restore();
   }
   /**
    * 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, f = a.getMode() === "resize", b = f ? a.getActiveHandle() : null;
-    o.render(
+    s.render(
       t,
       l,
       n,
-      s,
+      o,
       c,
       d,
       f,
@@ -2271,8 +2303,8 @@ class Ft {
    * 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;
@@ -2281,24 +2313,24 @@ class Ft {
       const c = performance.now() - e.startTime;
       h = Math.min(c / r, 1) * l;
     }
-    t.strokeStyle = ye(t.canvas), t.globalAlpha = h, t.lineWidth = 3, this.renderElementOutline(t, a, s, i), t.restore();
+    t.strokeStyle = Se(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(gt.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(gt.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, f = s + l * 2, b = i + l * 2;
+        const h = n.borderRadius || 0, c = -(o + l * 2) / 2, d = -(i + l * 2) / 2, f = o + l * 2, b = i + l * 2;
         if (h > 0) {
           const u = Math.min(h / 100 * Math.min(f, b), f / 2, b / 2);
           t.roundRect(c, d, f, b, u);
@@ -2307,17 +2339,17 @@ class Ft {
         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 },
@@ -2338,7 +2370,7 @@ class Ft {
         break;
       }
       case "star": {
-        const h = n.points ?? 5, c = n.innerRadius ?? 0.4, d = Math.min(s, i) / 2 + l, f = d * c;
+        const h = n.points ?? 5, c = n.innerRadius ?? 0.4, d = Math.min(o, i) / 2 + l, f = d * c;
         for (let b = 0; b < h * 2; b++) {
           const u = b * Math.PI / h - Math.PI / 2, p = b % 2 === 0 ? d : f, g = p * Math.cos(u), y = p * Math.sin(u);
           b === 0 ? t.moveTo(g, y) : t.lineTo(g, y);
@@ -2347,7 +2379,7 @@ class Ft {
         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 f = d * 2 * Math.PI / h - Math.PI / 2, b = c * Math.cos(f), u = c * Math.sin(f);
           d === 0 ? t.moveTo(b, u) : t.lineTo(b, u);
@@ -2356,7 +2388,7 @@ class Ft {
         break;
       }
       case "line": {
-        const h = s / 2 + l;
+        const h = o / 2 + l;
         t.moveTo(-h, 0), t.lineTo(h, 0);
         break;
       }
@@ -2367,11 +2399,11 @@ class Ft {
    * 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 u;
-    const n = e.getVisualBoundingBox(), s = n.width * o, i = n.height * o, a = ((u = e.transformData) == null ? void 0 : u.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, f = s + h * 2, b = i + h * 2;
+    const n = e.getVisualBoundingBox(), o = n.width * s, i = n.height * s, a = ((u = e.transformData) == null ? void 0 : u.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, b = i + h * 2;
     if (t.beginPath(), a > 0) {
       const p = Math.min(a / 100 * Math.min(f, b), f / 2, b / 2);
       t.roundRect(c, d, f, b, p);
@@ -2383,8 +2415,8 @@ class Ft {
    * 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();
   }
   /**
@@ -2392,9 +2424,9 @@ class Ft {
    * 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
@@ -2407,9 +2439,9 @@ class Ft {
    * - 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 = Qt(n, s, i, a), h = n * (e.lineHeight ?? 1.2), c = e.letterSpacing ?? 0, d = 4 / o, f = 4 / o, b = document.createElement("canvas");
+  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 = te(n, o, i, a), h = n * (e.lineHeight ?? 1.2), c = e.letterSpacing ?? 0, d = 4 / s, f = 4 / s, b = document.createElement("canvas");
     b.width = t.canvas.width, b.height = t.canvas.height;
     const u = b.getContext("2d");
     if (!u) {
@@ -2419,18 +2451,18 @@ class Ft {
     u.setTransform(t.getTransform()), u.textBaseline = "alphabetic", u.lineJoin = "round";
     const p = e.getRichText ? e.getRichText() : null;
     if (p) {
-      const g = te(p), y = [], S = [];
+      const g = ee(p), y = [], S = [];
       g.forEach((T) => {
         if (e.transformType === "custom" && e.transformData) {
-          const R = e.transformData.width - pt * 2, C = ee(T, R, {
+          const R = e.transformData.width - pt * 2, C = ne(T, R, {
             fontSize: n,
-            fontFamily: s,
+            fontFamily: o,
             bold: i,
             italic: a,
             letterSpacing: e.letterSpacing
           });
-          C.forEach((M, I) => {
-            y.push(M), S.push({
+          C.forEach((x, I) => {
+            y.push(x), S.push({
               isParagraphStart: I === 0,
               isParagraphEnd: I === C.length - 1
             });
@@ -2446,20 +2478,20 @@ class Ft {
       const w = -m / 2;
       y.forEach((T, R) => {
         var N, j;
-        const C = S[R].isParagraphStart, M = S[R].isParagraphEnd;
+        const C = S[R].isParagraphStart, x = S[R].isParagraphEnd;
         let I = 0;
-        const v = T.map((H) => H.text).join(""), P = ((N = v.match(/^ +/)) == null ? void 0 : N[0].length) || 0, k = ((j = v.match(/ +$/)) == null ? void 0 : j[0].length) || 0;
+        const M = T.map((H) => H.text).join(""), P = ((N = M.match(/^ +/)) == null ? void 0 : N[0].length) || 0, k = ((j = M.match(/ +$/)) == null ? void 0 : j[0].length) || 0;
         let B = 0;
         T.forEach((H) => {
-          const z = H.style.fontSize !== void 0 ? H.style.fontSize : n, K = H.style.fontFamily !== void 0 ? H.style.fontFamily : s, Q = H.style.bold !== void 0 ? H.style.bold : i, L = H.style.italic !== void 0 ? H.style.italic : a;
+          const z = H.style.fontSize !== void 0 ? H.style.fontSize : n, K = H.style.fontFamily !== void 0 ? H.style.fontFamily : o, Q = H.style.bold !== void 0 ? H.style.bold : i, L = H.style.italic !== void 0 ? H.style.italic : a;
           let A = H.text;
           const O = B, G = B + H.text.length;
           if (!C && P > 0 && O < P) {
             const E = Math.min(P - O, H.text.length);
             A = A.substring(E);
           }
-          if (!M && k > 0) {
-            const E = v.length - k;
+          if (!x && k > 0) {
+            const E = M.length - k;
             if (G > E) {
               const _ = !C && O < P ? Math.min(P - O, H.text.length) : 0, U = Math.max(0, E - O - _);
               A = A.substring(0, U);
@@ -2476,7 +2508,7 @@ class Ft {
         r === "center" ? F = -I / 2 : r === "right" ? F = W !== void 0 ? W / 2 - I : -I : F = W !== void 0 ? -W / 2 : 0;
         const D = w + l.ascent + R * h;
         B = 0, T.forEach((H) => {
-          const z = H.style.fontSize !== void 0 ? H.style.fontSize : n, K = H.style.fontFamily !== void 0 ? H.style.fontFamily : s;
+          const z = H.style.fontSize !== void 0 ? H.style.fontSize : n, K = H.style.fontFamily !== void 0 ? H.style.fontFamily : o;
           H.style.color !== void 0 ? H.style.color : e.color;
           const Q = H.style.bold !== void 0 ? H.style.bold : i, L = H.style.italic !== void 0 ? H.style.italic : a;
           let A = H.text;
@@ -2485,8 +2517,8 @@ class Ft {
             const E = Math.min(P - O, H.text.length);
             A = A.substring(E);
           }
-          if (!M && k > 0) {
-            const E = v.length - k;
+          if (!x && k > 0) {
+            const E = M.length - k;
             if (G > E) {
               const _ = !C && O < P ? Math.min(P - O, H.text.length) : 0, U = Math.max(0, E - O - _);
               A = A.substring(0, U);
@@ -2499,36 +2531,36 @@ class Ft {
         });
       });
     } else {
-      t.font = Lt(n, s, i, a), u.font = t.font, u.textAlign = r;
+      t.font = Lt(n, o, i, a), u.font = t.font, u.textAlign = r;
       let g, y;
       if (e.transformType === "custom" && e.transformData) {
-        const C = e.transformData.width - pt * 2, { lines: M } = be(
+        const C = e.transformData.width - pt * 2, { lines: x } = me(
           e.text,
           C,
           n,
-          s,
+          o,
           i,
           a,
           void 0,
           !0,
           { letterSpacing: c, lineHeight: e.lineHeight }
         );
-        g = M;
+        g = x;
       } else {
         g = e.text.split(`
 `);
         const C = e.text.includes(`
 `);
-        g = Re(g, C);
+        g = ke(g, C);
       }
       g.length === 0 ? y = 0 : g.length === 1 ? y = l.height : y = (g.length - 1) * h + l.height;
       const S = -y / 2, m = e.text.includes(`
 `), w = e.transformType === "custom" && e.transformData ? e.transformData.width : 0, T = -w / 2;
       let R = T + pt;
-      r === "center" ? R = T + w / 2 : r === "right" && (R = T + w - pt), g.forEach((C, M) => {
-        const I = S + l.ascent + M * h, v = m || M === 0, P = m || M === g.length - 1;
+      r === "center" ? R = T + w / 2 : r === "right" && (R = T + w - pt), g.forEach((C, x) => {
+        const I = S + l.ascent + x * h, M = m || x === 0, P = m || x === g.length - 1;
         let k = C;
-        v || (k = k.replace(/^ +/, "")), P || (k = k.replace(/ +$/, "")), u.globalCompositeOperation = "source-over", u.strokeStyle = t.strokeStyle, u.globalAlpha = Math.min(t.globalAlpha * 1.6, 0.8), u.lineWidth = (f + d) * 2, u.lineJoin = "round", Pt(u, k, R, I, c), u.globalCompositeOperation = "destination-out", u.globalAlpha = 1, u.lineWidth = f * 2, Pt(u, k, R, I, c), Nt(u, k, R, I, c);
+        M || (k = k.replace(/^ +/, "")), P || (k = k.replace(/ +$/, "")), u.globalCompositeOperation = "source-over", u.strokeStyle = t.strokeStyle, u.globalAlpha = Math.min(t.globalAlpha * 1.6, 0.8), u.lineWidth = (f + d) * 2, u.lineJoin = "round", Pt(u, k, R, I, c), u.globalCompositeOperation = "destination-out", u.globalAlpha = 1, u.lineWidth = f * 2, Pt(u, k, R, I, c), Nt(u, k, R, I, c);
       });
     }
     t.setTransform(1, 0, 0, 1, 0, 0), t.drawImage(b, 0, 0), t.restore();
@@ -2544,31 +2576,31 @@ class Ft {
    * - 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 f = i.text.split(""), b = f.map((g) => t.measureText(g).width), u = this.calculateCharPositions(e, f, b), p = (g) => {
       t.translate(g.x, g.y), g.angle && t.rotate(g.angle), g.skewY && t.transform(1, g.skewY, 0, 1, 0, 0);
     };
-    t.globalCompositeOperation = "source-over", t.strokeStyle = s, t.globalAlpha = 0.8, t.lineWidth = (n + o) * 2, t.lineJoin = "round", u.forEach((g, y) => {
+    t.globalCompositeOperation = "source-over", t.strokeStyle = o, t.globalAlpha = 0.8, t.lineWidth = (n + s) * 2, t.lineJoin = "round", u.forEach((g, y) => {
       t.save(), p(g), t.strokeText(f[y], 0, 0), t.restore();
     }), t.globalCompositeOperation = "destination-out", t.globalAlpha = 1, t.lineWidth = n * 2, u.forEach((g, y) => {
       t.save(), p(g), t.strokeText(f[y], 0, 0), t.fillText(f[y], 0, 0), t.restore();
@@ -2579,25 +2611,25 @@ class Ft {
    *
    * 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, f = Math.sin(a - c / 2) * i, b = a - c / 2 - Math.PI / 2;
+        const c = s[l] / i, d = Math.cos(a - c / 2) * i, f = Math.sin(a - c / 2) * i, b = a - c / 2 - Math.PI / 2;
         n.push({ x: d, y: f, angle: b }), 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, f = Math.sin(a + c / 2) * i, b = a + c / 2 + Math.PI / 2;
+        const c = s[l] / i, d = Math.cos(a + c / 2) * i, f = Math.sin(a + c / 2) * i, b = a + c / 2 + Math.PI / 2;
         n.push({ x: d, y: f, angle: b }), a += c;
       });
     }
@@ -2606,57 +2638,57 @@ class Ft {
   /**
    * 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), f = n.amplitude * t.fontSize * Math.sin(n.frequency * Math.PI * d), b = n.amplitude * n.frequency * Math.PI * Math.cos(n.frequency * Math.PI * d);
-      s.push({ x: c, y: f, angle: 0, skewY: b * Se }), 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), b = n.amplitude * n.frequency * Math.PI * Math.cos(n.frequency * Math.PI * d);
+      o.push({ x: c, y: f, angle: 0, skewY: b * Te }), 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, f = d / a, b = (Math.pow(f, 2) - 1) * n.archHeight * t.fontSize, u = 2 * f * n.archHeight;
-      s.push({ x: d, y: b, angle: 0, skewY: u * 0.3 }), r += c;
-    }), s;
+      const c = s[h], d = r + c / 2, f = d / a, b = (Math.pow(f, 2) - 1) * n.archHeight * t.fontSize, u = 2 * f * n.archHeight;
+      o.push({ x: d, y: b, angle: 0, skewY: u * 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], f = l + d / 2, b = f * r;
-      s.push({ x: f, y: b, angle: 0, skewY: r * 1 }), l += d;
-    }), s;
+      const d = s[c], f = l + d / 2, b = f * r;
+      o.push({ x: f, y: b, 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), f = Math.abs(d), b = n.amplitude * f, u = b * t.fontSize * Math.sin(n.frequency * Math.PI * d), p = b * n.frequency * Math.PI * Math.cos(n.frequency * Math.PI * d), g = n.amplitude * Math.sign(d) * Math.sin(n.frequency * Math.PI * d), y = p + g;
-      s.push({ x: c, y: u, 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), b = n.amplitude * f, u = b * t.fontSize * Math.sin(n.frequency * Math.PI * d), p = b * n.frequency * Math.PI * Math.cos(n.frequency * Math.PI * d), g = n.amplitude * Math.sign(d) * Math.sin(n.frequency * Math.PI * d), y = p + g;
+      o.push({ x: c, y: u, angle: 0, skewY: y * 0.3 }), a += h;
+    }), o;
   }
 }
 class Rt {
@@ -2664,41 +2696,41 @@ class Rt {
    * Render snap guides layer
    */
   static renderSnapGuidesLayer(t, e = []) {
-    e.length !== 0 && (t.save(), t.strokeStyle = nt(t.canvas), t.lineWidth = ct.canvas.snapGuideWidth, t.setLineDash(ct.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 = nt(t.canvas), t.lineWidth = ct.canvas.snapGuideWidth, t.setLineDash(ct.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 = Kt(t.canvas);
-      if (t.strokeStyle = n, t.fillStyle = n, t.lineWidth = ct.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 = ct.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}`;
+  static renderDistanceLabel(t, e, s, n) {
+    const o = `${n}`;
     t.font = `600 ${ct.canvas.spacingLabelFontSize}px ${ct.canvas.spacingLabelFontFamily}`;
-    const a = t.measureText(s).width, r = ct.canvas.spacingLabelFontSize, l = 4, h = a + l * 2, c = r + l * 2;
-    t.fillStyle = Kt(t.canvas), t.beginPath(), t.roundRect(e - h / 2, o - c / 2, h, c, me), t.fill(), t.fillStyle = Te, t.textAlign = "center", t.textBaseline = "middle", t.fillText(s, e, o);
+    const a = t.measureText(o).width, r = ct.canvas.spacingLabelFontSize, l = 4, h = a + l * 2, c = r + l * 2;
+    t.fillStyle = Kt(t.canvas), t.beginPath(), t.roundRect(e - h / 2, s - c / 2, h, c, we), t.fill(), t.fillStyle = ve, t.textAlign = "center", t.textBaseline = "middle", t.fillText(o, e, s);
   }
 }
 class Vt {
@@ -2706,53 +2738,53 @@ class Vt {
    * 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: f } = o, b = n || 1, u = s.transformType;
+    const o = e, { cursorPosition: i, selectionStart: a, selectionEnd: r, editText: l, editRichText: h, cursorOpacity: c, isTouchDevice: d, selectionHandlePositionsRef: f } = s, b = n || 1, u = o.transformType;
     if (u === "circle" || u === "wave" || u === "arch" || u === "lean" || u === "ascend" || u === "flag") {
-      this.renderTransformEditModeLayer(t, s, o, b);
+      this.renderTransformEditModeLayer(t, o, s, b);
       return;
     }
-    const p = s.fontSize || 24, g = s.fontFamily || "Arial", y = s.bold || !1, S = s.italic || !1, m = s.underline || !1, w = s.strikethrough || !1, T = s.textAlign || "center", R = s.letterSpacing ?? 0;
-    t.save(), t.translate(s.x, s.y), t.rotate(-s.rotation * Math.PI / 180);
-    const C = Qt(p, g, y, S), M = C.height, I = p * (s.lineHeight ?? 1.2);
-    let v, P, k;
-    if (h && s.transformType === "custom" && s.transformData.width) {
-      const L = s.transformData.width - pt * 2;
+    const p = o.fontSize || 24, g = o.fontFamily || "Arial", y = o.bold || !1, S = o.italic || !1, m = o.underline || !1, w = o.strikethrough || !1, T = o.textAlign || "center", R = o.letterSpacing ?? 0;
+    t.save(), t.translate(o.x, o.y), t.rotate(-o.rotation * Math.PI / 180);
+    const C = te(p, g, y, S), x = C.height, I = p * (o.lineHeight ?? 1.2);
+    let M, P, k;
+    if (h && o.transformType === "custom" && o.transformData.width) {
+      const L = o.transformData.width - pt * 2;
       k = L;
-      const A = te(h);
-      v = [], P = [], A.forEach((O) => {
-        const G = ee(O, L, {
-          fontSize: s.fontSize,
-          fontFamily: s.fontFamily,
-          bold: s.bold,
-          italic: s.italic,
-          letterSpacing: s.letterSpacing
+      const A = ee(h);
+      M = [], P = [], A.forEach((O) => {
+        const G = ne(O, L, {
+          fontSize: o.fontSize,
+          fontFamily: o.fontFamily,
+          bold: o.bold,
+          italic: o.italic,
+          letterSpacing: o.letterSpacing
         });
         G.forEach((E, _) => {
-          v.push(E), P.push({
+          M.push(E), P.push({
             isParagraphStart: _ === 0,
             isParagraphEnd: _ === G.length - 1
           });
         });
       });
     } else
-      v = l.split(`
+      M = l.split(`
 `).map((A) => [
         {
           text: A,
           style: { fontSize: p, fontFamily: g, bold: y, italic: S }
         }
-      ]), P = v.map(() => ({
+      ]), P = M.map(() => ({
         isParagraphStart: !0,
         // Each line is its own paragraph
         isParagraphEnd: !0
       }));
-    const B = v.length > 1 ? C.height + (v.length - 1) * I : C.height;
-    let W = -B / 2, F = 0, D = W, N = M;
+    const B = M.length > 1 ? C.height + (M.length - 1) * I : C.height;
+    let W = -B / 2, F = 0, D = W, N = x;
     const j = [];
     let H = 0;
-    v.forEach((L, A) => {
+    M.forEach((L, A) => {
       var _, U;
       const O = P[A].isParagraphStart, G = P[A].isParagraphEnd, E = [];
       L.forEach((ot) => {
@@ -2770,7 +2802,7 @@ class Vt {
         });
       });
       {
-        const ot = A === 0, et = A === v.length - 1, lt = E.map((V) => V.char).join(""), Y = ((_ = lt.match(/^ +/)) == null ? void 0 : _[0].length) || 0, ht = ((U = lt.match(/ +$/)) == null ? void 0 : U[0].length) || 0;
+        const ot = A === 0, et = A === M.length - 1, lt = E.map((V) => V.char).join(""), Y = ((_ = lt.match(/^ +/)) == null ? void 0 : _[0].length) || 0, ht = ((U = lt.match(/ +$/)) == null ? void 0 : U[0].length) || 0;
         let it = 0;
         for (let V = 0; V < E.length; V++)
           !ot && V < Y || !et && V >= E.length - ht || (it += E[V].width);
@@ -2788,36 +2820,36 @@ class Vt {
           }, st += q.width;
         }
         if (E.length > 0) {
-          const V = E[0].index, q = E[E.length - 1].index, ut = A < v.length - 1 && q + 1 === H ? q : q + 1;
+          const V = E[0].index, q = E[E.length - 1].index, ut = A < M.length - 1 && q + 1 === H ? q : q + 1;
           if (i >= V && i <= ut)
             if (i === V)
-              F = Z, D = W, N = M;
+              F = Z, D = W, N = x;
             else {
               let yt = 0;
               for (let rt = 0; rt < E.length && E[rt].index < i; rt++) {
                 const dt = E[rt], bt = dt.char === " ";
                 let St = !0;
                 if (bt) {
-                  const kt = rt < Y, X = rt >= E.length - ht, vt = !O && Y > 0, xt = !G && ht > 0;
-                  St = !(kt && vt || X && xt);
+                  const kt = rt < Y, X = rt >= E.length - ht, vt = !O && Y > 0, Mt = !G && ht > 0;
+                  St = !(kt && vt || X && Mt);
                 }
                 St && (yt += dt.width);
               }
-              F = Z + yt, D = W, N = M;
+              F = Z + yt, D = W, N = x;
             }
         }
-        A < v.length - 1 && (W += I);
+        A < M.length - 1 && (W += I);
       }
     });
     const z = a !== r;
     let K = null, Q = null;
     if (z) {
       const L = Math.min(a, r), A = Math.max(a, r);
-      t.save(), t.fillStyle = we(t.canvas);
+      t.save(), t.fillStyle = Me(t.canvas);
       let O = 0, G = -B / 2;
-      if (v.forEach((E, _) => {
+      if (M.forEach((E, _) => {
         var ht, it;
-        const U = P[_].isParagraphStart, ot = P[_].isParagraphEnd, et = _ === 0, lt = _ === v.length - 1, Y = [];
+        const U = P[_].isParagraphStart, ot = P[_].isParagraphEnd, et = _ === 0, lt = _ === M.length - 1, Y = [];
         if (E.forEach((Z) => {
           Array.from(Z.text).forEach((st) => {
             const V = Z.style || {}, q = V.fontSize !== void 0 ? V.fontSize : p, at = V.fontFamily !== void 0 ? V.fontFamily : g, J = V.bold !== void 0 ? V.bold : y, ut = V.italic !== void 0 ? V.italic : S, yt = V.letterSpacing !== void 0 ? V.letterSpacing : R;
@@ -2840,33 +2872,33 @@ class Vt {
             const yt = Math.max(L, Z), rt = Math.min(A, st + 1);
             let dt = 0;
             for (let X = 0; X < Y.length && Y[X].index < yt; X++) {
-              const vt = Y[X], xt = X < q, Ht = X >= Y.length - at, It = !U && q > 0, Bt = !ot && at > 0;
-              !(xt && It || Ht && Bt) && (dt += vt.width);
+              const vt = Y[X], Mt = X < q, Ht = X >= Y.length - at, It = !U && q > 0, Bt = !ot && at > 0;
+              !(Mt && It || Ht && Bt) && (dt += vt.width);
             }
             let bt = 0;
             for (let X = 0; X < Y.length && Y[X].index < rt; X++) {
-              const vt = Y[X], xt = X < q, Ht = X >= Y.length - at, It = !U && q > 0, Bt = !ot && at > 0;
-              !(xt && It || Ht && Bt) && (bt += vt.width);
+              const vt = Y[X], Mt = X < q, Ht = X >= Y.length - at, It = !U && q > 0, Bt = !ot && at > 0;
+              !(Mt && It || Ht && Bt) && (bt += vt.width);
             }
             const St = ut + dt, kt = bt - dt;
-            t.fillRect(St, G, kt, M), K === null && (K = { x: St, y: G }), Q = { x: St + kt, y: G + M }, t.restore();
+            t.fillRect(St, G, kt, x), K === null && (K = { x: St, y: G }), Q = { x: St + kt, y: G + x }, t.restore();
           }
         }
-        _ < v.length - 1 && (G += I);
+        _ < M.length - 1 && (G += I);
       }), t.restore(), h) {
         t.save();
-        const E = s.transformType === "custom" ? s.transformData : null, _ = E != null && E.width ? E.width - pt * 2 : void 0;
-        Ce(t, h, {
+        const E = o.transformType === "custom" ? o.transformData : null, _ = E != null && E.width ? E.width - pt * 2 : void 0;
+        Pe(t, h, {
           fontSize: p,
           fontFamily: g,
-          color: s.color || "#000000",
+          color: o.color || "#000000",
           bold: y,
           italic: S,
           underline: m,
           strikethrough: w,
           textAlign: T,
-          letterSpacing: s.letterSpacing,
-          lineHeight: s.lineHeight
+          letterSpacing: o.letterSpacing,
+          lineHeight: o.lineHeight
         }, _), t.restore();
       }
     }
@@ -2876,7 +2908,7 @@ class Vt {
       const E = nt(t.canvas);
       t.fillStyle = E, t.strokeStyle = E, t.lineWidth = G, t.lineCap = "round";
       const _ = { x: L.x, y: L.y - O }, U = { x: A.x, y: A.y + O };
-      t.beginPath(), t.moveTo(L.x, L.y), t.lineTo(L.x, L.y + M), t.stroke(), t.beginPath(), t.arc(_.x, _.y, O, 0, Math.PI * 2), t.fill(), t.strokeStyle = "white", t.lineWidth = 2 / b, t.stroke(), t.strokeStyle = E, t.lineWidth = G, t.beginPath(), t.moveTo(A.x, A.y - M), t.lineTo(A.x, A.y), t.stroke(), t.beginPath(), t.arc(U.x, U.y, O, 0, Math.PI * 2), t.fill(), t.strokeStyle = "white", t.lineWidth = 2 / b, t.stroke(), t.restore(), f && (f.current = {
+      t.beginPath(), t.moveTo(L.x, L.y), t.lineTo(L.x, L.y + x), t.stroke(), t.beginPath(), t.arc(_.x, _.y, O, 0, Math.PI * 2), t.fill(), t.strokeStyle = "white", t.lineWidth = 2 / b, t.stroke(), t.strokeStyle = E, t.lineWidth = G, t.beginPath(), t.moveTo(A.x, A.y - x), t.lineTo(A.x, A.y), t.stroke(), t.beginPath(), t.arc(U.x, U.y, O, 0, Math.PI * 2), t.fill(), t.strokeStyle = "white", t.lineWidth = 2 / b, t.stroke(), t.restore(), f && (f.current = {
         start: {
           center: _,
           textEdge: L
@@ -2895,15 +2927,15 @@ class Vt {
    * 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 f = Array.from(e.text), b = f.map((p) => t.measureText(p).width), u = Ft.calculateCharPositions(e, f, b);
-    if (s >= 0 && s <= f.length && i > 0) {
+    if (o >= 0 && o <= f.length && i > 0) {
       let p;
-      if (s === 0)
+      if (o === 0)
         if (u.length > 0) {
           const y = u[0], S = b[0];
           p = {
@@ -2913,7 +2945,7 @@ class Vt {
           };
         } else
           p = { x: 0, y: 0, angle: 0 };
-      else if (s >= u.length) {
+      else if (o >= u.length) {
         const y = u[u.length - 1], S = b[b.length - 1];
         p = {
           x: y.x + Math.cos(y.angle) * (S / 2),
@@ -2921,7 +2953,7 @@ class Vt {
           angle: y.angle
         };
       } else {
-        const y = u[s], S = b[s];
+        const y = u[o], S = b[o];
         p = {
           x: y.x - Math.cos(y.angle) * (S / 2),
           y: y.y - Math.sin(y.angle) * (S / 2),
@@ -2938,27 +2970,27 @@ class Vt {
    * Render crop box layer (for images in crop mode)
    * Shows both image resize handles and crop handles
    */
-  static renderCropBoxLayer(t, e, o, n = 1) {
-    if (!(e instanceof ve) || !e.isCropping) return;
-    const s = e, i = s.getCropBoxBounds();
+  static renderCropBoxLayer(t, e, s, n = 1) {
+    if (!(e instanceof xe) || !e.isCropping) return;
+    const o = e, i = o.getCropBoxBounds();
     if (!i) return;
-    const a = 4 / n, r = 2 / n, l = xe / n, h = Me / n, c = 1 / n;
+    const a = 4 / n, r = 2 / n, l = Re / n, h = Ce / n, c = 1 / n;
     t.save(), t.translate(e.x * n, e.y * n), t.rotate(gt.toRadians(e.rotation));
-    const d = s.transformData.flipHorizontal ? -1 : 1, f = s.transformData.flipVertical ? -1 : 1;
+    const d = o.transformData.flipHorizontal ? -1 : 1, f = o.transformData.flipVertical ? -1 : 1;
     t.scale(d * n, f * n);
-    const b = s.transformData.width * s.transformData.cropWidth, u = s.transformData.height * s.transformData.cropHeight, p = s.transformData.width / 2 - (s.transformData.cropX * s.transformData.width + b / 2), g = s.transformData.height / 2 - (s.transformData.cropY * s.transformData.height + u / 2), y = s.transformData.width / 2, S = s.transformData.height / 2, m = {
+    const b = o.transformData.width * o.transformData.cropWidth, u = o.transformData.height * o.transformData.cropHeight, p = o.transformData.width / 2 - (o.transformData.cropX * o.transformData.width + b / 2), g = o.transformData.height / 2 - (o.transformData.cropY * o.transformData.height + u / 2), y = o.transformData.width / 2, S = o.transformData.height / 2, m = {
       x: p - y,
       y: g - S,
-      width: s.transformData.width,
-      height: s.transformData.height
+      width: o.transformData.width,
+      height: o.transformData.height
     };
     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 R = i.x + i.width, C = m.x + m.width;
     R < C && t.fillRect(R, i.y, C - R, i.height), t.strokeStyle = nt(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 M = i.width / 3;
-    t.beginPath(), t.moveTo(i.x + M, i.y), t.lineTo(i.x + M, i.y + i.height), t.moveTo(i.x + 2 * M, i.y), t.lineTo(i.x + 2 * M, i.y + i.height), t.stroke();
+    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 I = i.height / 3;
     if (t.beginPath(), t.moveTo(i.x, i.y + I), t.lineTo(i.x + i.width, i.y + I), t.moveTo(i.x, i.y + 2 * I), t.lineTo(i.x + i.width, i.y + 2 * I), t.stroke(), [
       { x: i.x, y: i.y },
@@ -2985,10 +3017,10 @@ class Vt {
       k.orientation === "horizontal" ? (B = h, W = a) : (B = a, W = h);
       const F = k.x - B / 2, D = k.y - W / 2;
       t.fillStyle = "#fff", t.fillRect(F, D, B, W), t.strokeStyle = "#bbb", t.lineWidth = c, t.strokeRect(F, D, B, W);
-    }), t.restore(), o && o.resizeHandles) {
-      const k = o.resizeHandles.filter(
+    }), t.restore(), s && s.resizeHandles) {
+      const k = s.resizeHandles.filter(
         (D) => D.anchor === "top-left" || D.anchor === "top-right" || D.anchor === "bottom-left" || D.anchor === "bottom-right"
-      ), B = s.getCropBoxWorldCorners(), W = 6, F = 20;
+      ), B = o.getCropBoxWorldCorners(), W = 6, F = 20;
       k.forEach((D) => {
         let N = !1;
         if (B)
@@ -3004,8 +3036,8 @@ class Vt {
     }
   }
 }
-Ee();
-const Ke = Jt("CanvasRenderer"), $ = class $ {
+Ie();
+const qe = Qt("CanvasRenderer"), $ = class $ {
   /**
    * Get a pooled offscreen canvas for clipping content, only recreating
    * when dimensions change. Eliminates per-frame canvas allocation.
@@ -3024,12 +3056,12 @@ const Ke = Jt("CanvasRenderer"), $ = class $ {
    * 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));
-      Ke.error(`Failed to render element ${e.id}:`, i), $.onRenderError && $.onRenderError({
+      e.render(t, s, n);
+    } catch (o) {
+      const i = o instanceof Error ? o : new Error(String(o));
+      qe.error(`Failed to render element ${e.id}:`, i), $.onRenderError && $.onRenderError({
         category: "render",
         message: `Failed to render element: ${i.message}`,
         originalError: i,
@@ -3045,8 +3077,8 @@ const Ke = Jt("CanvasRenderer"), $ = class $ {
    * 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 = tt), 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.
@@ -3054,22 +3086,22 @@ const Ke = Jt("CanvasRenderer"), $ = class $ {
    * 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 {
@@ -3077,15 +3109,15 @@ const Ke = Jt("CanvasRenderer"), $ = class $ {
         for (const h of a.pieces) {
           const c = new Path2D(h.d), d = h.rotation ?? 0, f = new DOMMatrix();
           if (f.translateSelf(h.x, h.y), d !== 0) {
-            const b = (h.baseWidth ?? 0) / 2, u = (h.baseHeight ?? 0) / 2, p = d === 90 || d === 270, g = p ? h.baseHeight ?? 0 : h.baseWidth ?? 0, y = p ? h.baseWidth ?? 0 : h.baseHeight ?? 0;
-            f.translateSelf(g / 2, y / 2), f.rotateSelf(d), f.translateSelf(-b, -u);
+            const b = (h.baseWidth ?? 0) / 2, u = (h.baseHeight ?? 0) / 2, { width: p, height: g } = Zt(h.baseWidth ?? 0, h.baseHeight ?? 0, d);
+            f.translateSelf(p / 2, g / 2), f.rotateSelf(d), f.translateSelf(-b, -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();
   }
@@ -3093,25 +3125,25 @@ const Ke = Jt("CanvasRenderer"), $ = class $ {
    * 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;
+  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), b = new DOMPoint(c, d).matrixTransform(h), u = Math.max(b.x - f.x, b.y - f.y), p = f.x - u, g = f.y - u, y = b.x + u, S = b.y + u, m = typeof o.clipShape == "object" && o.clipShape !== null && o.clipShape.type === "composite-path" ? o.clipShape : null;
+    const h = t.getTransform().inverse(), c = t.canvas.width, d = t.canvas.height, f = new DOMPoint(0, 0).matrixTransform(h), b = new DOMPoint(c, d).matrixTransform(h), u = Math.max(b.x - f.x, b.y - f.y), p = f.x - u, g = f.y - u, y = b.x + u, S = b.y + u, m = typeof s.clipShape == "object" && s.clipShape !== null && s.clipShape.type === "composite-path" ? s.clipShape : null;
     if (m) {
       const w = new Path2D();
       w.rect(p, g, y - p, S - g);
       for (const T of m.pieces) {
-        const R = new Path2D(T.d), C = T.rotation ?? 0, M = new DOMMatrix();
-        if (M.translateSelf(o.x + T.x, o.y + T.y), C !== 0) {
-          const I = (T.baseWidth ?? 0) / 2, v = (T.baseHeight ?? 0) / 2, P = C === 90 || C === 270, k = P ? T.baseHeight ?? 0 : T.baseWidth ?? 0, B = P ? T.baseWidth ?? 0 : T.baseHeight ?? 0;
-          M.translateSelf(k / 2, B / 2), M.rotateSelf(C), M.translateSelf(-I, -v);
+        const R = new Path2D(T.d), C = T.rotation ?? 0, x = new DOMMatrix();
+        if (x.translateSelf(s.x + T.x, s.y + T.y), C !== 0) {
+          const I = (T.baseWidth ?? 0) / 2, M = (T.baseHeight ?? 0) / 2, { width: P, height: k } = Zt(T.baseWidth ?? 0, T.baseHeight ?? 0, C);
+          x.translateSelf(P / 2, k / 2), x.rotateSelf(C), x.translateSelf(-I, -M);
         }
-        w.addPath(R, M);
+        w.addPath(R, x);
       }
       t.clip(w, "evenodd");
     } else
-      t.rect(p, g, y - p, S - g), 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 = tt), e.render(t, n, s), t.restore(), t.setTransform(a);
+      t.rect(p, g, y - p, S - g), 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
@@ -3122,15 +3154,15 @@ const Ke = Jt("CanvasRenderer"), $ = class $ {
    *   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;
+  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 !== $._cachedElementsRef && ($._cachedElementConfigs = e.map((g) => g.toJSON()), $._cachedElementMap = new Map(e.map((g) => [g.id, g])), $._cachedElementsRef = e);
     const f = $._cachedElementConfigs, b = $._cachedElementMap, u = $._knockoutRenderedIds;
     u.clear(), e.forEach((g, y) => {
       var S, m, w;
       if (g.blendMode === "knockout" || g.blendMode === "clip") {
-        const T = f[y], R = g.blendMode === "knockout" ? "destination-out" : "destination-in", C = ((S = T.knockoutParts) == null ? void 0 : S.scope) || "group", M = f.findIndex((k) => k.id === T.id), I = ((m = T.knockoutParts) == null ? void 0 : m.fill) || ((w = T.knockoutParts) == null ? void 0 : w.stroke), v = C === "artboard" && M !== -1 ? f.slice(0, M) : [];
-        I && (C === "artboard" || v.length > 0) && (v.forEach((k) => k.id && u.add(k.id)), ke(
+        const T = f[y], R = g.blendMode === "knockout" ? "destination-out" : "destination-in", C = ((S = T.knockoutParts) == null ? void 0 : S.scope) || "group", x = f.findIndex((k) => k.id === T.id), I = ((m = T.knockoutParts) == null ? void 0 : m.fill) || ((w = T.knockoutParts) == null ? void 0 : w.stroke), M = C === "artboard" && x !== -1 ? f.slice(0, x) : [];
+        I && (C === "artboard" || M.length > 0) && (M.forEach((k) => k.id && u.add(k.id)), Ae(
           t,
           T,
           f,
@@ -3147,18 +3179,18 @@ const Ke = Jt("CanvasRenderer"), $ = class $ {
       t,
       e,
       u,
-      o,
+      s,
       n,
       c,
       d,
       f,
       r
     ) : e.forEach((g) => {
-      var M, I;
+      var x, I;
       if (u.has(g.id) || g.visible === !1) return;
-      const y = g.id === o, S = (n == null ? void 0 : n.type) === "element" && ((M = n == null ? void 0 : n.data) == null ? void 0 : M.id) === g.id, m = c && d && _t(g) && g.id === o, w = y && !m, T = f[e.indexOf(g)], R = ((I = T == null ? void 0 : T.distressEffect) == null ? void 0 : I.enabled) && T.distressEffect.style === "custom" && T.distressEffect.textureUrl, C = (v) => {
+      const y = g.id === s, S = (n == null ? void 0 : n.type) === "element" && ((x = n == null ? void 0 : n.data) == null ? void 0 : x.id) === g.id, m = c && d && _t(g) && g.id === s, w = y && !m, T = f[e.indexOf(g)], R = ((I = T == null ? void 0 : T.distressEffect) == null ? void 0 : I.enabled) && T.distressEffect.style === "custom" && T.distressEffect.textureUrl, C = (M) => {
         if (T && T.masks && T.masks.length > 0)
-          At(v, T, (P) => {
+          At(M, T, (P) => {
             const k = (B) => {
               r && (B.save(), B.globalAlpha = tt), this.safeRender(B, g, w, S), r && B.restore();
             };
@@ -3170,15 +3202,15 @@ const Ke = Jt("CanvasRenderer"), $ = class $ {
           });
         else if (R) {
           const P = g.getVisualBoundingBox();
-          $t(v, T.distressEffect, P, (k) => {
+          $t(M, T.distressEffect, P, (k) => {
             r && (k.save(), k.globalAlpha = tt), this.safeRender(k, g, w, S), r && k.restore();
           });
-        } else l && !h && a && w ? this.renderElementWithOverflowDimming(v, g, a, w, S, r) : l && a ? (v.save(), this.applyArtboardClipPath(v, a), r && (v.globalAlpha = tt), this.safeRender(v, g, w, S), v.restore()) : (r && (v.save(), v.globalAlpha = tt), this.safeRender(v, g, w, S), r && v.restore());
+        } else l && !h && a && w ? this.renderElementWithOverflowDimming(M, g, a, w, S, r) : l && a ? (M.save(), this.applyArtboardClipPath(M, a), r && (M.globalAlpha = tt), this.safeRender(M, g, w, S), M.restore()) : (r && (M.save(), M.globalAlpha = tt), this.safeRender(M, g, w, S), r && M.restore());
       };
       Dt(
         t,
         T,
-        (v) => C(v)
+        (M) => C(M)
       );
     });
   }
@@ -3186,13 +3218,13 @@ const Ke = Jt("CanvasRenderer"), $ = class $ {
    * 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) {
+  static _renderWithClipping(t, e, s, n, o, i, a, r, l = !0) {
     var g;
     const h = t.canvas, c = h.width, d = h.height, f = t.getTransform(), b = [];
     let u = [], p = [];
     for (let y = 0; y < e.length; y++) {
       const S = e[y], m = r[y];
-      o.has(S.id) || S.visible !== !1 && (S.isClipping ? u.length > 0 ? (b.push({
+      s.has(S.id) || S.visible !== !1 && (S.isClipping ? u.length > 0 ? (b.push({
         content: u,
         mask: S,
         contentConfigs: p,
@@ -3210,10 +3242,10 @@ const Ke = Jt("CanvasRenderer"), $ = class $ {
       if (!y.mask)
         y.content.forEach((S, m) => {
           var I;
-          const w = S.id === n, T = (s == null ? void 0 : s.type) === "element" && ((I = s == null ? void 0 : s.data) == null ? void 0 : I.id) === S.id, R = i && a && _t(S) && S.id === n, C = w && !R, M = y.contentConfigs[m];
-          Dt(t, M, (v) => {
-            const P = v;
-            M && M.masks && M.masks.length > 0 ? At(P, M, (k) => {
+          const w = S.id === n, T = (o == null ? void 0 : o.type) === "element" && ((I = o == null ? void 0 : o.data) == null ? void 0 : I.id) === S.id, R = i && a && _t(S) && S.id === n, C = w && !R, x = y.contentConfigs[m];
+          Dt(t, x, (M) => {
+            const P = M;
+            x && x.masks && x.masks.length > 0 ? At(P, x, (k) => {
               l && (k.save(), k.globalAlpha = tt), S.render(k, C, T), l && k.restore();
             }) : (l && (P.save(), P.globalAlpha = tt), S.render(P, C, T), l && P.restore());
           });
@@ -3221,22 +3253,22 @@ const Ke = Jt("CanvasRenderer"), $ = class $ {
       else {
         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((M, I) => {
+        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, I) => {
           var F;
-          const v = M.id === n, P = (s == null ? void 0 : s.type) === "element" && ((F = s == null ? void 0 : s.data) == null ? void 0 : F.id) === M.id, k = i && a && _t(M) && M.id === n, B = v && !k, W = y.contentConfigs[I];
+          const M = x.id === n, P = (o == null ? void 0 : o.type) === "element" && ((F = o == null ? void 0 : o.data) == null ? void 0 : F.id) === x.id, k = i && a && _t(x) && x.id === n, B = M && !k, W = y.contentConfigs[I];
           Dt(m, W, (D) => {
             const N = D;
             W && W.masks && W.masks.length > 0 ? At(N, W, (j) => {
-              l && (j.save(), j.globalAlpha = tt), M.render(j, B, P), l && j.restore();
-            }) : (l && (N.save(), N.globalAlpha = tt), M.render(N, B, P), l && N.restore());
+              l && (j.save(), j.globalAlpha = tt), x.render(j, B, P), l && j.restore();
+            }) : (l && (N.save(), N.globalAlpha = tt), x.render(N, B, P), l && N.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 R = y.mask.id === n, C = (s == null ? void 0 : s.type) === "element" && ((g = s == null ? void 0 : s.data) == null ? void 0 : g.id) === y.mask.id;
-        y.maskConfig && y.maskConfig.masks && y.maskConfig.masks.length > 0 ? At(T, y.maskConfig, (M) => {
-          l && (M.save(), M.globalAlpha = tt), y.mask.render(M, R, C), l && M.restore();
+        const R = y.mask.id === n, C = (o == null ? void 0 : o.type) === "element" && ((g = o == null ? void 0 : o.data) == null ? void 0 : g.id) === y.mask.id;
+        y.maskConfig && y.maskConfig.masks && y.maskConfig.masks.length > 0 ? At(T, y.maskConfig, (x) => {
+          l && (x.save(), x.globalAlpha = tt), y.mask.render(x, R, C), l && x.restore();
         }) : (l && (T.save(), T.globalAlpha = tt), y.mask.render(T, R, C), 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();
       }
   }
@@ -3261,34 +3293,34 @@ const Ke = Jt("CanvasRenderer"), $ = class $ {
    * Render a distance label with background
    * @see InteractionFeedbackRenderer.renderDistanceLabel
    */
-  static renderDistanceLabel(t, e, o, n) {
-    Rt.renderDistanceLabel(t, e, o, n);
+  static renderDistanceLabel(t, e, s, n) {
+    Rt.renderDistanceLabel(t, e, s, n);
   }
   /**
    * Render selection box layer
    * @see SelectionRenderer.renderSelectionLayer
    */
-  static renderSelectionLayer(t, e, o, n = 1) {
-    wt.renderSelectionLayer(t, e, o, n);
+  static renderSelectionLayer(t, e, s, n = 1) {
+    wt.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) {
-    wt.renderPositionSizeInfo(t, e, o, n, s);
+  static renderPositionSizeInfo(t, e, s, n, o = 1) {
+    wt.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) {
     wt.renderHandlesLayer(
       t,
       e,
-      o,
-      n,
       s,
+      n,
+      o,
       i,
       a,
       r,
@@ -3299,15 +3331,15 @@ const Ke = Jt("CanvasRenderer"), $ = class $ {
    * Render hover highlights layer with fade-in animation
    * @see HoverRenderer.renderHoverLayer
    */
-  static renderHoverLayer(t, e, o, n = !1, s = 1, i) {
-    Ft.renderHoverLayer(t, e, o, n, s, i);
+  static renderHoverLayer(t, e, s, n = !1, o = 1, i) {
+    Ft.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) {
-    Vt.renderCropBoxLayer(t, e, o, n);
+  static renderCropBoxLayer(t, e, s, n = 1) {
+    Vt.renderCropBoxLayer(t, e, s, n);
   }
   // =========================================================================
   // Main Render Orchestration
@@ -3319,7 +3351,7 @@ const Ke = Jt("CanvasRenderer"), $ = class $ {
   static render({
     ctx: t,
     elements: e,
-    selectedId: o,
+    selectedId: s,
     selectedElement: n,
     // Chrome-related fields (transformHandles, currentRotation,
     // isRotating, hideHandles, isAltKeyPressed, showRotationHandle)
@@ -3328,7 +3360,7 @@ const Ke = Jt("CanvasRenderer"), $ = class $ {
     // 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 = [],
@@ -3347,18 +3379,18 @@ const Ke = Jt("CanvasRenderer"), $ = class $ {
     if (this.renderElementsLayer(
       t,
       e,
-      o,
       s,
+      o,
       a ?? void 0,
       h,
       c,
       d,
       u,
       p
-    ), g != null && g.enabled && c && Pe(t, g, c, h), y != null && y.enabled && c && Ae(t, y, c, h), i && S && n && Vt.renderEditModeLayer(t, n, S, f), f !== 1) {
+    ), g != null && g.enabled && c && Ee(t, g, c, h), y != null && y.enabled && c && He(t, y, c, h), i && S && n && Vt.renderEditModeLayer(t, n, S, f), f !== 1) {
       t.save();
-      const R = t.getTransform().a / f, C = b.x * f * R, M = b.y * f * R;
-      t.setTransform(R, 0, 0, R, C, M);
+      const R = t.getTransform().a / f, C = b.x * f * R, x = b.y * f * R;
+      t.setTransform(R, 0, 0, R, C, x);
     }
     const m = r.map((T) => ({
       ...T,
@@ -3396,9 +3428,9 @@ const Ke = Jt("CanvasRenderer"), $ = class $ {
   static renderInteractionChromeLayer({
     ctx: t,
     selectedElement: e,
-    transformHandles: o,
+    transformHandles: s,
     stateMachine: n,
-    currentRotation: s,
+    currentRotation: o,
     isRotating: i,
     hoverState: a,
     selectedId: r,
@@ -3416,13 +3448,13 @@ const Ke = Jt("CanvasRenderer"), $ = class $ {
       const S = t.getTransform().a / u, m = p.x * u * S, w = p.y * u * S;
       t.setTransform(S, 0, 0, S, m, w);
     }
-    if (e && He(e) && e.isCropping)
-      o && Vt.renderCropBoxLayer(t, e, o, u);
-    else if (!l && n && wt.renderSelectionLayer(t, e, n, u), o && n && wt.renderPositionSizeInfo(t, e, o, n, u), !l && o && n && wt.renderHandlesLayer(
+    if (e && Be(e) && e.isCropping)
+      s && Vt.renderCropBoxLayer(t, e, s, u);
+    else if (!l && n && wt.renderSelectionLayer(t, e, n, u), s && n && wt.renderPositionSizeInfo(t, e, s, n, u), !l && s && n && wt.renderHandlesLayer(
       t,
       e,
-      o,
       s,
+      o,
       i,
       a,
       n,
@@ -3440,20 +3472,23 @@ const Ke = Jt("CanvasRenderer"), $ = class $ {
   }
 };
 $._contentCanvas = null, $._contentCanvasSize = { width: 0, height: 0 }, $._maskCanvas = null, $._maskCanvasSize = { width: 0, height: 0 }, $._cachedElementsRef = null, $._cachedElementConfigs = null, $._cachedElementMap = null, $._knockoutRenderedIds = /* @__PURE__ */ new Set(), $.onRenderError = null;
-let Zt = $;
+let Jt = $;
 export {
-  nn as A,
-  Zt as C,
-  en as I,
-  Xe as R,
-  sn as S,
-  Qe as T,
-  se as a,
-  Ze as b,
-  Ue as c,
-  Fe as d,
-  tn as e,
+  an as A,
+  Jt as C,
+  on as I,
+  Ke as R,
+  rn as S,
+  nn as T,
+  oe as a,
+  hn as b,
+  tn as c,
+  Qe as d,
+  Ye as e,
+  sn as f,
   jt as g,
-  Je as r
+  ie as n,
+  ln as p,
+  en as r
 };
-//# sourceMappingURL=CanvasRenderer-D-E5WWLm.js.map
+//# sourceMappingURL=CanvasRenderer-COO5UXtZ.js.map