@snowcone-app/canvas 0.28.0 → 0.29.0

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

@@ -1,7 +1,7 @@
-import { X as te, Y as ee, ar as et, Z as zt, aE as ne, aC as se, av as Vt, aB as oe, au as dt, aF as ie, aG as Ft, aH as ae, aI as re, c as $t, aJ as le, aK as he, aL as ce, aM as de, a4 as jt, a0 as qt, a6 as gt, a1 as Ut, a2 as Ht, a5 as fe, a8 as ge, aN as Ot, aO as ue, aP as pe, aQ as ye, I as be, aR as Se, aS as me, aT as tt } from "./FontAnalyzer-PE6nysqE.js";
-import { T as Bt, a as Te, u as we, K as ve, z as kt, L as Yt, M as Me, N as xe, O as Ce } from "./ExportManager-J2xK86uq.js";
-import { i as Lt, a as Re } from "./guards-BlbhM5MX.js";
-const rt = {
+import { X as oe, Y as ie, au as nt, Z as Ft, aH as ae, aF as re, ay as Ot, aE as le, ax as gt, aI as he, aJ as Yt, aK as ce, aL as de, c as Zt, aM as fe, aN as ge, aO as ue, aP as pe, a4 as Jt, a0 as Qt, a8 as pt, a1 as te, a2 as Lt, a9 as Gt, a7 as Pt, aa as Xt, a5 as ye, ab as be, aQ as Nt, aR as Se, aS as me, aT as Te, I as we, aU as ve, aV as Me, aW as tt } from "./FontAnalyzer-D4Sg-P6_.js";
+import { T as Wt, a as xe, u as Ce, K as Re, z as At, L as Kt, M as ke, N as Pe, O as Ae } from "./ExportManager-B8Td7uR5.js";
+import { i as Dt, a as Ee } from "./guards-uQtEQJbs.js";
+const ct = {
   // Canvas-specific
   canvas: {
     snapThreshold: 8,
@@ -15,30 +15,30 @@ const rt = {
     spacingLabelFontSize: 11,
     spacingLabelFontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
   }
-}, ke = 2, xt = 6, Pe = 16, Ae = 5, Ee = 5, Zt = 0.5;
-function Gt(v) {
-  return ke / v;
+}, He = 2, Rt = 6, Ie = 16, Be = 5, Le = 5, ee = 0.5;
+function $t(v) {
+  return He / v;
 }
-function Ne(v) {
-  return xt / v;
+function qe(v) {
+  return Rt / v;
 }
-function Ie(v) {
-  return Pe / v;
+function We(v) {
+  return Ie / v;
 }
-function Ke(v) {
-  return [Ae / v, Ee / v];
+function Ue(v) {
+  return [Be / v, Le / v];
 }
-function He(v, t, e, s) {
+function De(v, t, e, o) {
   v.save();
-  const n = Zt / s;
+  const n = ee / o;
   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 $e(v, t, e, s = 1, n = "#3b82f6", o = !1) {
-  const i = Ie(s);
-  v.save(), v.fillStyle = "#fff", v.strokeStyle = n, v.lineWidth = o ? Gt(s) * 1.25 : Gt(s), v.beginPath(), v.arc(t, e, i, 0, Math.PI * 2), v.fill(), v.stroke(), He(v, t, e, s), v.restore();
+function Ze(v, t, e, o = 1, n = "#3b82f6", s = !1) {
+  const i = We(o);
+  v.save(), v.fillStyle = "#fff", v.strokeStyle = n, v.lineWidth = s ? $t(o) * 1.25 : $t(o), v.beginPath(), v.arc(t, e, i, 0, Math.PI * 2), v.fill(), v.stroke(), De(v, t, e, o), v.restore();
 }
-const Xt = xt * 2;
-class je {
+const jt = Rt * 2;
+class Je {
   constructor() {
     this.resizeHandles = [], this.rotationHandle = null, this.elementRotation = 0, this.rotationAnchor = { x: 0, y: 0 };
   }
@@ -48,18 +48,18 @@ class je {
    * @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(), o = t.getRotationAnchor(), i = t.getEnabledAnchors();
-    this.elementRotation = t.rotation, this.rotationAnchor = o;
-    const a = rt.canvas.selectionPadding, r = {
+    const n = "isCropping" in t && t.isCropping ? t.getBoundingBox() : t.getVisualBoundingBox(), s = t.getRotationAnchor(), i = t.getEnabledAnchors();
+    this.elementRotation = t.rotation, this.rotationAnchor = s;
+    const a = ct.canvas.selectionPadding, r = {
       x: n.x - a,
       y: n.y - a,
       width: n.width + a * 2,
       height: n.height + a * 2
-    }, l = te(r, t.rotation, o), h = Math.abs(t.rotation % 360) > 0.1;
-    this.resizeHandles = l.filter((c) => !(!i.includes(c.anchor) || h && c.anchor.includes("middle"))), this.rotationHandle = ee(
+    }, l = oe(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 = ie(
       r,
       t.rotation,
-      o,
+      s,
       e
     );
   }
@@ -67,68 +67,68 @@ class je {
    * Render all handles
    * @param renderRotationInCanvas - If false, skip canvas rendering of rotation handle (for React-based rendering)
    */
-  render(t, e = !0, s = 0, n = !1, o = !1, i = null, a = !1, r = null, l = 1, h = !0) {
+  render(t, e = !0, o = 0, n = !1, s = !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, o, l), h && e && this.rotationHandle && n && this.renderRotationTooltip(t, this.rotationHandle, s, 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);
   }
   /**
    * Render a single resize handle
    * Corner handles are circles, side handles are rounded rectangles
    */
-  renderResizeHandle(t, e, s = !1, n = !1, o = 1) {
+  renderResizeHandle(t, e, o = !1, n = !1, s = 1) {
     t.save();
-    const i = e.x * o, a = e.y * o;
+    const i = e.x * s, a = e.y * s;
     if (e.anchor.includes("middle")) {
       const l = e.anchor === "middle-top" || e.anchor === "middle-bottom";
       t.translate(i, a), t.rotate(-this.elementRotation * Math.PI / 180), l && t.rotate(Math.PI / 2), t.translate(-i, -a);
-      const h = Xt * 0.6, c = Xt * 1.4, d = h / 2, f = i - h / 2, p = a - c / 2;
-      t.fillStyle = "#fff", t.strokeStyle = et(t.canvas), t.lineWidth = s || n ? 2.5 : 2, t.beginPath(), t.roundRect(f, p, h, c, d), t.fill(), t.stroke();
+      const h = jt * 0.6, c = jt * 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();
     } else
-      t.fillStyle = "#fff", t.strokeStyle = et(t.canvas), t.lineWidth = s || n ? 2.5 : 2, t.beginPath(), t.arc(i, a, xt, 0, Math.PI * 2), t.fill(), t.stroke();
+      t.fillStyle = "#fff", t.strokeStyle = nt(t.canvas), t.lineWidth = o || n ? 2.5 : 2, t.beginPath(), t.arc(i, a, Rt, 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, s = !1, n = 1) {
+  renderRotationHandle(t, e, o = !1, n = 1) {
     t.save();
-    const o = e.x * n, i = e.y * n, a = xt * 2.67;
-    t.fillStyle = "#fff", t.strokeStyle = et(t.canvas), t.lineWidth = s ? 2.5 : 2, t.beginPath(), t.arc(o, i, a, 0, Math.PI * 2), t.fill(), t.stroke();
-    const r = Zt;
-    t.translate(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();
+    const s = e.x * n, i = e.y * n, a = Rt * 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 = ee;
+    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();
   }
   /**
    * Render rotation tooltip (angle display while rotating)
    */
-  renderRotationTooltip(t, e, s, n = 1) {
+  renderRotationTooltip(t, e, o, n = 1) {
     t.save();
-    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();
+    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();
   }
   /**
    * Test if a point hits any resize handle
    * @param zoom - Current zoom level (radius scales inversely with zoom)
    */
-  hitTestResize(t, e, s = 1) {
-    const n = se / s;
-    for (const o of this.resizeHandles)
-      if (zt(t, e, o.x, o.y, n))
-        return o;
+  hitTestResize(t, e, o = 1) {
+    const n = re / o;
+    for (const s of this.resizeHandles)
+      if (Ft(t, e, s.x, s.y, n))
+        return s;
     return null;
   }
   /**
    * Test if a point hits the rotation handle
    * @param zoom - Current zoom level (radius scales inversely with zoom)
    */
-  hitTestRotation(t, e, s = 1) {
+  hitTestRotation(t, e, o = 1) {
     if (!this.rotationHandle) return !1;
-    const n = (xt * 2.67 + 2) / s;
-    return zt(t, e, this.rotationHandle.x, this.rotationHandle.y, n);
+    const n = (Rt * 2.67 + 2) / o;
+    return Ft(t, e, this.rotationHandle.x, this.rotationHandle.y, n);
   }
   /**
    * Get rotation handle position (for React-based rendering)
@@ -142,37 +142,37 @@ class je {
    * @param rotation - Element rotation in degrees
    */
   getCursor(t, e) {
-    const s = t.anchor.includes("middle") ? "edge" : "corner";
-    return ne(
+    const o = t.anchor.includes("middle") ? "edge" : "corner";
+    return ae(
       t.x,
       t.y,
       this.rotationAnchor.x,
       this.rotationAnchor.y,
-      s,
+      o,
       e,
       t.anchor
     );
   }
 }
-const Be = 15;
-function Le(v, t) {
+const _e = 15;
+function ze(v, t) {
   return Math.abs(v) >= Math.abs(t) ? "x" : "y";
 }
-function We(v, t, e) {
-  return e != null && e.shift ? Le(v, t) === "x" ? { dx: v, dy: 0, lockedAxis: "y" } : { dx: 0, dy: t, lockedAxis: "x" } : { dx: v, dy: t, lockedAxis: null };
+function Ve(v, t, e) {
+  return e != null && e.shift ? ze(v, t) === "x" ? { dx: v, dy: 0, lockedAxis: "y" } : { dx: 0, dy: t, lockedAxis: "x" } : { dx: v, dy: t, lockedAxis: null };
 }
-function De(v, t = Be) {
-  let s = (Math.round(v / t) * t % 360 + 360) % 360;
-  return s > 180 && (s -= 360), s === 0 ? 0 : s;
+function Fe(v, t = _e) {
+  let o = (Math.round(v / t) * t % 360 + 360) % 360;
+  return o > 180 && (o -= 360), o === 0 ? 0 : o;
 }
-function _e({
+function Oe({
   anchor: v,
   startVisualWidth: t,
   startVisualHeight: e,
-  newVisualWidth: s,
+  newVisualWidth: o,
   newVisualHeight: n
 }) {
-  const o = t !== 0 ? t : 1, i = e !== 0 ? e : 1, a = s / o, r = n / i;
+  const s = t !== 0 ? t : 1, i = e !== 0 ? e : 1, a = o / s, r = n / i;
   let l;
   return v === "middle-left" || v === "middle-right" ? l = a : v === "middle-top" || v === "middle-bottom" ? l = r : l = Math.abs(a - 1) >= Math.abs(r - 1) ? a : r, {
     scale: l,
@@ -180,83 +180,83 @@ function _e({
     newVisualHeight: e * l
   };
 }
-class ze {
+class Ye {
   /**
    * Calculate new dimensions and position for a resize operation
    */
   static calculateResize({
     element: t,
     handle: e,
-    dx: s,
+    dx: o,
     dy: n,
-    startData: o,
+    startData: s,
     snapSystem: i,
     modifiers: a
   }) {
-    var O, D, Q, E, j;
-    const l = new Vt(t).worldDeltaToLocal(s, n), h = l.dx, c = l.dy, d = o.visualWidth ?? o.width ?? 0, f = o.visualHeight ?? o.height ?? 0, p = o.width ?? 0, b = o.height ?? 0;
-    let g = d, u = f;
-    e.anchor.includes("right") ? g = d + h : e.anchor.includes("left") && (g = d - h), e.anchor !== "middle-left" && e.anchor !== "middle-right" && (e.anchor.includes("bottom") ? u = f + c : e.anchor.includes("top") && (u = f - c));
+    var F, W, q, J, E;
+    const l = new Ot(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;
+    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 _ = _e({
+      const z = Oe({
         anchor: e.anchor,
         startVisualWidth: d,
         startVisualHeight: f,
-        newVisualWidth: g,
-        newVisualHeight: u
+        newVisualWidth: p,
+        newVisualHeight: g
       });
-      S = _.scale, g = _.newVisualWidth, u = _.newVisualHeight;
+      S = z.scale, p = z.newVisualWidth, g = z.newVisualHeight;
     }
     let m, w;
     if (S !== null)
-      m = p * S, w = b * S;
+      m = b * S, w = u * S;
     else if (e.anchor === "middle-left" || e.anchor === "middle-right") {
-      const _ = g - d;
-      m = p + _, w = b;
+      const z = p - d;
+      m = b + z, w = u;
     } else if (e.anchor === "middle-top" || e.anchor === "middle-bottom") {
-      const _ = u - f;
-      m = p, w = b + _;
+      const z = g - f;
+      m = b, w = u + z;
     } else {
-      const _ = g / d, $ = u / f;
-      m = p * _, w = b * $;
+      const z = p / d, N = g / f;
+      m = b * z, w = u * N;
     }
-    const T = g, C = u;
+    const T = p, C = g;
     let R = !1;
     if (i && t.transformType === "image") {
-      const _ = e.anchor ?? "", $ = _ === "top-left" || _ === "top-right" || _ === "bottom-left" || _ === "bottom-right", Y = _.startsWith("crop-");
-      if ($ && !Y) {
-        const k = (O = i.activeSnaps) == null ? void 0 : O.x, H = (D = i.activeSnaps) == null ? void 0 : D.y;
-        if (!!k || !!H) {
-          const I = [k, H].find(
-            (z) => typeof z == "object" && z !== null && "frozenWidth" in z
+      const z = e.anchor ?? "", N = z === "top-left" || z === "top-right" || z === "bottom-left" || z === "bottom-right", Q = z.startsWith("crop-");
+      if (N && !Q) {
+        const B = (F = i.activeSnaps) == null ? void 0 : F.x, k = (W = i.activeSnaps) == null ? void 0 : W.y;
+        if (!!B || !!k) {
+          const G = [B, k].find(
+            (P) => typeof P == "object" && P !== null && "frozenWidth" in P
           );
-          if (I) {
-            const z = t, G = o.transformData, st = I.frozenWidth ?? ((Q = z.transformData) == null ? void 0 : Q.width) ?? p, lt = z.imageAspectRatio || (G != null && G.width && (G != null && G.height) ? G.width / G.height : null);
-            let U = I.frozenHeight;
-            U == null && (lt && lt !== 0 ? U = st / lt : (E = z.transformData) != null && E.height ? U = z.transformData.height : U = b);
-            const F = p !== 0 ? st / p : 1, nt = b !== 0 ? U / b : 1;
-            g = d * F, u = f * nt, m = st, w = U, R = !0;
+          if (G) {
+            const P = t, _ = s.transformData, j = G.frozenWidth ?? ((q = P.transformData) == null ? void 0 : q.width) ?? b, ot = P.imageAspectRatio || (_ != null && _.width && (_ != null && _.height) ? _.width / _.height : null);
+            let et = G.frozenHeight;
+            et == null && (ot && ot !== 0 ? et = j / ot : (J = P.transformData) != null && J.height ? et = P.transformData.height : et = u);
+            const lt = b !== 0 ? j / b : 1, Y = u !== 0 ? et / u : 1;
+            p = d * lt, g = f * Y, m = j, w = et, R = !0;
           }
         }
       }
     }
     m = Math.max(50, m), w = Math.max(40, w);
-    const x = t.clone(), P = x.resize(e.anchor, m, w, o);
-    if (!e.anchor.includes("middle") && ((j = x.stroke) != null && j.enabled) && o.strokeWidth !== void 0 && o.strokeWidth > 0) {
-      const _ = o.width ?? 1, $ = o.height ?? 1, Y = Math.sqrt(m / _ * (w / $)), k = Math.max(1, Math.round(o.strokeWidth * Y * 10) / 10);
-      x.stroke = { ...x.stroke, width: k };
+    const x = t.clone(), H = x.resize(e.anchor, m, w, s);
+    if (!e.anchor.includes("middle") && ((E = x.stroke) != null && E.enabled) && s.strokeWidth !== void 0 && s.strokeWidth > 0) {
+      const z = s.width ?? 1, N = s.height ?? 1, Q = Math.sqrt(m / z * (w / N)), B = Math.max(1, Math.round(s.strokeWidth * Q * 10) / 10);
+      x.stroke = { ...x.stroke, width: B };
     }
-    const A = R || P === !1, B = e.anchor.includes("top") || e.anchor.includes("bottom"), L = "isCropping" in x && x.isCropping, W = "isGroup" in x && x.isGroup;
-    if (B && !L && !W) {
-      const _ = t.getRotationAnchor(), $ = this._calculateFixedCornerOffset({
+    const A = R || H === !1, I = e.anchor.includes("top") || e.anchor.includes("bottom"), L = "isCropping" in x && x.isCropping, D = "isGroup" in x && x.isGroup;
+    if (I && !L && !D) {
+      const z = t.getRotationAnchor(), N = this._calculateFixedCornerOffset({
         element: t,
         updatedElement: x,
         handle: e,
-        rotationAnchor: _
+        rotationAnchor: z
       });
-      x.x += $.x, x.y += $.y;
+      x.x += N.x, x.y += N.y;
     }
     return {
       element: x,
@@ -273,27 +273,27 @@ class ze {
   static _calculateFixedCornerOffset({
     element: t,
     updatedElement: e,
-    handle: s,
+    handle: o,
     rotationAnchor: n
   }) {
-    const o = new Vt(t), { cos: i, sin: a } = o.getRenderingCosSin(), r = t.getVisualBoundingBox(), l = e.getVisualBoundingBox(), h = n, c = e.getRotationAnchor(), d = this._getFixedLocalCoords(s.anchor, r.width, r.height), f = d.x, p = d.y, b = r.x - h.x, g = r.y - h.y, u = b + f, y = g + p, S = u * i - y * a, m = u * a + y * i, w = h.x + S, T = h.y + m, C = this._getFixedLocalCoords(s.anchor, l.width, l.height), R = C.x, x = C.y, P = l.x - c.x, M = l.y - c.y, A = P + R, B = M + x, L = A * i - B * a, W = A * a + B * i, O = c.x + L, D = c.y + W;
+    const s = new Ot(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, C = this._getFixedLocalCoords(o.anchor, l.width, l.height), R = C.x, x = C.y, H = l.x - c.x, M = l.y - c.y, A = H + R, I = M + x, L = A * i - I * a, D = A * a + I * i, F = c.x + L, W = c.y + D;
     return {
-      x: w - O,
-      y: T - D
+      x: w - F,
+      y: T - W
     };
   }
   /**
    * Get local coordinates of the fixed point for a given handle
    * @private
    */
-  static _getFixedLocalCoords(t, e, s) {
+  static _getFixedLocalCoords(t, e, o) {
     const n = { x: 0, y: 0 };
     switch (t) {
       case "top-left":
-        n.x = e, n.y = s;
+        n.x = e, n.y = o;
         break;
       case "top-right":
-        n.x = 0, n.y = s;
+        n.x = 0, n.y = o;
         break;
       case "bottom-left":
         n.x = e, n.y = 0;
@@ -302,13 +302,13 @@ class ze {
         n.x = 0, n.y = 0;
         break;
       case "middle-left":
-        n.x = e, n.y = s / 2;
+        n.x = e, n.y = o / 2;
         break;
       case "middle-right":
-        n.x = 0, n.y = s / 2;
+        n.x = 0, n.y = o / 2;
         break;
       case "middle-top":
-        n.x = e / 2, n.y = s;
+        n.x = e / 2, n.y = o;
         break;
       case "middle-bottom":
         n.x = e / 2, n.y = 0;
@@ -317,7 +317,7 @@ class ze {
     return n;
   }
 }
-class Ve {
+class Ge {
   constructor() {
     this.hooks = {
       beforeResize: [],
@@ -341,8 +341,8 @@ class Ve {
    */
   removeHook(t, e) {
     if (!this.hooks[t]) return;
-    const s = this.hooks[t].indexOf(e);
-    s !== -1 && this.hooks[t].splice(s, 1);
+    const o = this.hooks[t].indexOf(e);
+    o !== -1 && this.hooks[t].splice(o, 1);
   }
   /**
    * Clear all hooks at a stage
@@ -362,9 +362,9 @@ class Ve {
    * Run hooks at a specific stage
    */
   runHooks(t, e) {
-    return this.hooks[t] ? this.hooks[t].reduce((s, n) => {
-      const o = n(s);
-      return o !== void 0 ? o : s;
+    return this.hooks[t] ? this.hooks[t].reduce((o, n) => {
+      const s = n(o);
+      return s !== void 0 ? s : o;
     }, e) : e;
   }
   /**
@@ -372,24 +372,24 @@ class Ve {
    */
   executeResize(t) {
     const e = this.runHooks("beforeResize", t);
-    let s = ze.calculateResize({
+    let o = Ye.calculateResize({
       ...e,
       snapSystem: t.snapSystem,
       modifiers: t.modifiers
     });
-    return s.handle = t.handle, s.startData = t.startData, s = this.runHooks("afterResize", s), s;
+    return o.handle = t.handle, o.startData = t.startData, o = this.runHooks("afterResize", o), o;
   }
   /**
    * Execute position update with hooks
    * Used for drag operations
    */
   executePositionUpdate(t, e) {
-    const s = this.runHooks("beforePositionUpdate", { position: t, element: e });
-    return this.runHooks("afterPositionUpdate", s).position;
+    const o = this.runHooks("beforePositionUpdate", { position: t, element: e });
+    return this.runHooks("afterPositionUpdate", o).position;
   }
 }
-const qe = new Ve();
-class Ue {
+const Qe = new Ge();
+class tn {
   constructor(t = null) {
     this.state = "IDLE", this.context = {
       mode: null,
@@ -433,14 +433,14 @@ class Ue {
   /**
    * Start drag operation
    */
-  startDrag(t, e, s, n = null) {
+  startDrag(t, e, o, n = null) {
     this.state = "DRAGGING";
-    const o = t.getTransformStartData();
-    let i = o;
+    const s = t.getTransformStartData();
+    let i = s;
     if (n === "crop-image-drag" && t.transformData) {
       const a = t.transformData;
       i = {
-        ...o,
+        ...s,
         cropX: a.cropX,
         cropY: a.cropY,
         cropWidth: a.cropWidth,
@@ -452,7 +452,7 @@ class Ue {
       dragMode: n,
       // 'crop-image-drag' for moving image within crop, null for normal drag
       startX: e,
-      startY: s,
+      startY: o,
       startData: i,
       activeHandle: null,
       element: t
@@ -481,13 +481,13 @@ class Ue {
    * element off the locked axis. Read modifiers from the CURRENT
    * pointer event — users press/release Shift mid-gesture.
    */
-  updateDrag(t, e, s = null, n) {
+  updateDrag(t, e, o = null, n) {
     if (this.state !== "DRAGGING")
       throw new Error("Cannot update drag: not in DRAGGING state");
-    const o = t - this.context.startX, i = e - this.context.startY, { dx: a, dy: r, lockedAxis: l } = We(o, i, n), h = this.context.startData;
+    const s = t - this.context.startX, i = e - this.context.startY, { dx: a, dy: r, lockedAxis: l } = Ve(s, 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, s);
+      const f = this.snapHandler.snapPosition({ x: c, y: d }, this.context.element, o);
       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 Ue {
   /**
    * Start resize operation
    */
-  startResize(t, e, s, n, o, i) {
+  startResize(t, e, o, n, s, 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: s,
+      startX: o,
       startY: n,
       startData: {
         ...a,
@@ -508,8 +508,8 @@ class Ue {
         visualY: i.y,
         visualWidth: i.width,
         visualHeight: i.height,
-        bboxX: o.x,
-        bboxY: o.y
+        bboxX: s.x,
+        bboxY: s.y
       },
       activeHandle: e,
       element: r
@@ -523,8 +523,8 @@ class Ue {
   updateResize(t, e) {
     if (this.state !== "RESIZING")
       throw new Error("Cannot update resize: not in RESIZING state");
-    const s = t - this.context.startX, n = e - this.context.startY;
-    return { dx: s, dy: n };
+    const o = t - this.context.startX, n = e - this.context.startY;
+    return { dx: o, dy: n };
   }
   /**
    * Adjust the resize start position to account for snap corrections
@@ -556,16 +556,16 @@ class Ue {
    * Reset resize start data to current element state (for unfreezing)
    * This updates startData to use the current element dimensions, preventing jumps
    */
-  resetResizeStartData(t, e, s) {
+  resetResizeStartData(t, e, o) {
     if (this.state !== "RESIZING")
       return;
-    const n = t.getBoundingBox(), o = t.getVisualBoundingBox(), i = t.getTransformStartData();
-    this.context.startX = e, this.context.startY = s, this.context.startData = {
+    const n = t.getBoundingBox(), s = t.getVisualBoundingBox(), i = t.getTransformStartData();
+    this.context.startX = e, this.context.startY = o, this.context.startData = {
       ...i,
-      visualX: o.x,
-      visualY: o.y,
-      visualWidth: o.width,
-      visualHeight: o.height,
+      visualX: s.x,
+      visualY: s.y,
+      visualWidth: s.width,
+      visualHeight: s.height,
       bboxX: n.x,
       bboxY: n.y
     };
@@ -573,14 +573,14 @@ class Ue {
   /**
    * Start rotation operation
    */
-  startRotate(t, e, s, n, o) {
+  startRotate(t, e, o, n, s) {
     this.state = "ROTATING", this.context = {
       mode: "rotate",
       startX: e,
-      startY: s,
+      startY: o,
       startData: {
         startAngle: n,
-        currentRotation: o,
+        currentRotation: s,
         elementData: t.getTransformStartData()
       },
       activeHandle: null,
@@ -597,12 +597,12 @@ class Ue {
    * is a superset of the usual 0/90/180 magnets and must win
    * deterministically. Read modifiers from the CURRENT pointer event.
    */
-  updateRotate(t, e, s, n, o) {
+  updateRotate(t, e, o, n, s) {
     if (this.state !== "ROTATING")
       throw new Error("Cannot update rotate: not in ROTATING state");
-    const i = this.context.startData, r = (oe(s, n, t, e) - i.startAngle) * 180 / Math.PI;
+    const i = this.context.startData, r = (le(o, n, t, e) - i.startAngle) * 180 / Math.PI;
     let l = i.currentRotation - r;
-    return l = (l % 360 + 360) % 360, l > 180 && (l -= 360), o != null && o.shift ? De(l) : this.snapHandler && this.snapHandler.snapRotation && this.context.element ? this.snapHandler.snapRotation(l, this.context.element) : l;
+    return l = (l % 360 + 360) % 360, l > 180 && (l -= 360), s != null && s.shift ? Fe(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 Ue {
    * frame. PinchHandler consumes both via `getPinchContext()` to
    * produce the next element.
    */
-  startPinch(t, e, s) {
+  startPinch(t, e, o) {
     this.state = "PINCHING";
     const n = {
-      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 = {
+      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 = {
       elementData: t.getTransformStartData(),
       startCentroid: n,
       startDistance: a,
@@ -660,14 +660,14 @@ class Ue {
   updatePinch(t, e) {
     if (this.state !== "PINCHING")
       throw new Error("Cannot update pinch: not in PINCHING state");
-    const s = this.context.startData, n = {
+    const o = this.context.startData, n = {
       x: (t.x + e.x) / 2,
       y: (t.y + e.y) / 2
-    }, 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;
+    }, 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;
     return {
       scale: c,
       rotationDelta: d,
-      startCentroid: s.startCentroid,
+      startCentroid: o.startCentroid,
       currentCentroid: n
     };
   }
@@ -716,7 +716,7 @@ class Ue {
     return this.context.mode;
   }
 }
-class bt {
+class mt {
   /**
    * Resolve rotation anchor with clear precedence:
    * 1. Transform's getRotationAnchor() if overridden
@@ -736,7 +736,7 @@ class bt {
    * - 1 rotation anchor (may be same as center)
    */
   static getSnapAnchors(t) {
-    const e = t.getVisualBoundingBox(), s = {
+    const e = t.getVisualBoundingBox(), o = {
       // Corners
       topLeft: { x: e.x, y: e.y },
       topRight: { x: e.x + e.width, y: e.y },
@@ -753,17 +753,17 @@ class bt {
       rotation: this.resolve(t)
     };
     if (t.rotation !== 0) {
-      const n = s.rotation, o = dt.toRadiansInverse(t.rotation);
-      Object.keys(s).forEach((i) => {
+      const n = o.rotation, s = gt.toRadiansInverse(t.rotation);
+      Object.keys(o).forEach((i) => {
         if (i === "rotation") return;
-        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] = {
+        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] = {
           x: n.x + h,
           y: n.y + c
         };
       });
     }
-    return s;
+    return o;
   }
   /**
    * Get edge lines for an element (for edge-to-edge snapping)
@@ -817,14 +817,14 @@ class bt {
    * (different from center of visual bbox)
    */
   static hasCustomRotationAnchor(t) {
-    const e = t.getVisualBoundingBox(), s = {
+    const e = t.getVisualBoundingBox(), o = {
       x: e.x + e.width / 2,
       y: e.y + e.height / 2
-    }, n = this.resolve(t), o = 1e-3;
-    return Math.abs(n.x - s.x) > o || Math.abs(n.y - s.y) > o;
+    }, n = this.resolve(t), s = 1e-3;
+    return Math.abs(n.x - o.x) > s || Math.abs(n.y - o.y) > s;
   }
 }
-class Nt {
+class qt {
   constructor(t) {
     this.cellSize = t, this.cells = /* @__PURE__ */ new Map(), this.idIndex = /* @__PURE__ */ new Map();
   }
@@ -835,8 +835,8 @@ class Nt {
   /** Insert a point into the grid */
   insert(t) {
     const e = this.getCellKey(t.x, t.y);
-    let s = this.cells.get(e);
-    s || (s = /* @__PURE__ */ new Set(), this.cells.set(e, s)), s.add(t);
+    let o = this.cells.get(e);
+    o || (o = /* @__PURE__ */ new Set(), this.cells.set(e, o)), o.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 Nt {
   removeById(t) {
     const e = this.idIndex.get(t);
     if (e) {
-      for (const s of e) {
-        const n = this.cells.get(s);
+      for (const o of e) {
+        const n = this.cells.get(o);
         if (n) {
-          for (const o of n)
-            o.id === t && n.delete(o);
-          n.size === 0 && this.cells.delete(s);
+          for (const s of n)
+            s.id === t && n.delete(s);
+          n.size === 0 && this.cells.delete(o);
         }
       }
       this.idIndex.delete(t);
@@ -862,19 +862,19 @@ class Nt {
    * [x - radius, x + radius] x [y - radius, y + radius].
    * Each candidate is then distance-checked against the radius.
    */
-  queryNear(t, e, 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);
+  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);
     for (let h = i; h <= a; h++)
       for (let c = r; c <= l; c++) {
         const d = `${h},${c}`, f = this.cells.get(d);
         if (f)
-          for (const p of f) {
-            if (n !== void 0 && p.id === n) continue;
-            const b = p.x - t, g = p.y - e;
-            b * b + g * g <= s * s && o.push(p);
+          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);
           }
       }
-    return o;
+    return s;
   }
   /**
    * Query all items whose coordinate on `axis` is within `radius` of the
@@ -888,26 +888,26 @@ class Nt {
    *
    * Scans all cells in the band along the target axis.
    */
-  queryNearAxis(t, e, s, n) {
-    const o = [];
+  queryNearAxis(t, e, o, n) {
+    const s = [];
     if (t === "x") {
-      const i = Math.floor((e - s) / this.cellSize), a = Math.floor((e + s) / this.cellSize);
+      const i = Math.floor((e - o) / this.cellSize), a = Math.floor((e + o) / 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) <= s && o.push(d);
+            n !== void 0 && d.id === n || Math.abs(d.x - e) <= o && s.push(d);
       }
     } else {
-      const i = Math.floor((e - s) / this.cellSize), a = Math.floor((e + s) / this.cellSize);
+      const i = Math.floor((e - o) / this.cellSize), a = Math.floor((e + o) / 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) <= s && o.push(d);
+            n !== void 0 && d.id === n || Math.abs(d.y - e) <= o && s.push(d);
       }
     }
-    return o;
+    return s;
   }
   /** Rebuild from a full list of items (clears existing data first) */
   rebuild(t) {
@@ -920,32 +920,32 @@ class Nt {
     return `${Math.floor(t / this.cellSize)},${Math.floor(e / this.cellSize)}`;
   }
 }
-function ct(v) {
+function ft(v) {
   const t = v.transformData;
   if (t && "width" in t && typeof t.width == "number")
     return t.width;
 }
-function St(v) {
+function Tt(v) {
   const t = v.transformData;
   if (t && "height" in t && typeof t.height == "number")
     return t.height;
 }
-function vt(v, t) {
+function xt(v, t) {
   const e = v.transformData;
   return e && "width" in e ? (e.width = t, !0) : !1;
 }
-function Pt(v, t) {
+function Et(v, t) {
   const e = v.transformData;
   return e && "height" in e ? (e.height = t, !0) : !1;
 }
-class Ze {
+class en {
   constructor(t = {}) {
-    this._extraSnapRects = [], this.snapThreshold = t.snapThreshold || rt.canvas.snapThreshold, this.enabled = t.enabled !== !1, this.showGuides = t.showGuides !== !1, this.guides = [], this.activeSnaps = {
+    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,
       // { snapTo: number, anchorKey: string, frozenFontSize: number, frozenWidth: number, frozenPosition: {x, y}, isPositionBasedSnap: boolean }
       y: null
       // { snapTo: number, anchorKey: string, frozenFontSize: number, frozenWidth: number, frozenPosition: {x, y}, isPositionBasedSnap: boolean }
-    }, this.stickyThreshold = t.stickyThreshold || 15, this._spatialGrid = new Nt(Math.max(this.snapThreshold * 2, 16)), this._anchorMetadata = /* @__PURE__ */ new Map();
+    }, this.stickyThreshold = t.stickyThreshold || 15, this._spatialGrid = new qt(Math.max(this.snapThreshold * 2, 16)), this._anchorMetadata = /* @__PURE__ */ new Map();
   }
   /**
    * Enable or disable snapping
@@ -957,7 +957,7 @@ class Ze {
    * Set snap threshold in pixels
    */
   setSnapThreshold(t) {
-    this.snapThreshold = t, this._spatialGrid = new Nt(Math.max(t * 2, 16));
+    this.snapThreshold = t, this._spatialGrid = new qt(Math.max(t * 2, 16));
   }
   /**
    * Get current snap guides for rendering
@@ -996,31 +996,31 @@ class Ze {
   _populateSpatialGrid(t) {
     this._spatialGrid.clear(), this._anchorMetadata.clear();
     for (const e of t) {
-      const s = bt.getSnapAnchors(e);
-      for (const [n, o] of Object.entries(s)) {
+      const o = mt.getSnapAnchors(e);
+      for (const [n, s] of Object.entries(o)) {
         const i = `${e.id}:${n}`, a = {
-          x: o.x,
-          y: o.y,
+          x: s.x,
+          y: s.y,
           id: i
         };
         this._spatialGrid.insert(a), this._anchorMetadata.set(i, {
           elementId: e.id,
           anchorKey: n,
-          point: o
+          point: s
         });
       }
     }
     for (const e of this._extraSnapRects) {
-      const s = e.x + e.width / 2, n = e.y + e.height / 2, o = e.x + e.width, i = e.y + e.height, a = {
+      const o = e.x + e.width / 2, n = e.y + e.height / 2, s = e.x + e.width, i = e.y + e.height, a = {
         topLeft: { x: e.x, y: e.y },
-        topRight: { x: o, y: e.y },
+        topRight: { x: s, y: e.y },
         bottomLeft: { x: e.x, y: i },
-        bottomRight: { x: o, y: i },
-        topCenter: { x: s, y: e.y },
-        rightCenter: { x: o, y: n },
-        bottomCenter: { x: s, y: i },
+        bottomRight: { x: s, y: i },
+        topCenter: { x: o, y: e.y },
+        rightCenter: { x: s, y: n },
+        bottomCenter: { x: o, y: i },
         leftCenter: { x: e.x, y: n },
-        center: { x: s, y: n }
+        center: { x: o, 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,27 +1040,27 @@ class Ze {
   /**
    * Snap a position during drag operation
    */
-  snapPosition(t, e, s) {
-    if (!this.enabled || !s)
+  snapPosition(t, e, o) {
+    if (!this.enabled || !o)
       return this.clearGuides(), t;
     const n = e.clone();
     n.x = t.x, n.y = t.y;
-    const o = bt.getSnapAnchors(n), i = s.filter((y) => y.id !== e.id);
+    const s = mt.getSnapAnchors(n), i = o.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(o)) {
+    for (const [y, S] of Object.entries(s)) {
       const m = this._spatialGrid.queryNearAxis("x", S.x, this.snapThreshold);
       for (const T of m) {
         const C = this._anchorMetadata.get(T.id);
         if (!C) continue;
-        const R = C.point, x = C.anchorKey, P = Math.abs(S.x - R.x);
-        if (P < this.snapThreshold) {
+        const R = C.point, x = C.anchorKey, H = Math.abs(S.x - R.x);
+        if (H < this.snapThreshold) {
           const M = {
             snapTo: R.x,
             offset: S.x - t.x,
             // How far anchor is from element position
-            distance: P,
+            distance: H,
             guide: {
               type: "vertical",
               x: R.x,
@@ -1070,19 +1070,19 @@ class Ze {
               otherKey: x
             }
           };
-          c.push(M), P < l && (l = P, a = M);
+          c.push(M), H < l && (l = H, a = M);
         }
       }
       const w = this._spatialGrid.queryNearAxis("y", S.y, this.snapThreshold);
       for (const T of w) {
         const C = this._anchorMetadata.get(T.id);
         if (!C) continue;
-        const R = C.point, x = C.anchorKey, P = Math.abs(S.y - R.y);
-        if (P < this.snapThreshold) {
+        const R = C.point, x = C.anchorKey, H = Math.abs(S.y - R.y);
+        if (H < this.snapThreshold) {
           const M = {
             snapTo: R.y,
             offset: S.y - t.y,
-            distance: P,
+            distance: H,
             guide: {
               type: "horizontal",
               y: R.y,
@@ -1092,41 +1092,41 @@ class Ze {
               otherKey: x
             }
           };
-          d.push(M), P < h && (h = P, r = M);
+          d.push(M), H < h && (h = H, r = M);
         }
       }
     }
-    let p = t.x, b = t.y;
-    a && (p = a.snapTo - a.offset), r && (b = r.snapTo - r.offset);
-    const g = /* @__PURE__ */ new Map(), u = /* @__PURE__ */ new Map();
+    let b = t.x, u = t.y;
+    a && (b = a.snapTo - a.offset), r && (u = r.snapTo - r.offset);
+    const p = /* @__PURE__ */ new Map(), g = /* @__PURE__ */ new Map();
     for (const y of c) {
-      const S = g.get(y.snapTo);
-      (!S || y.distance < S.distance) && g.set(y.snapTo, y);
+      const S = p.get(y.snapTo);
+      (!S || y.distance < S.distance) && p.set(y.snapTo, y);
     }
     for (const y of d) {
-      const S = u.get(y.snapTo);
-      (!S || y.distance < S.distance) && u.set(y.snapTo, y);
+      const S = g.get(y.snapTo);
+      (!S || y.distance < S.distance) && g.set(y.snapTo, y);
     }
-    for (const y of g.values())
+    for (const y of p.values())
       f.push(y.guide);
-    for (const y of u.values())
+    for (const y of g.values())
       f.push(y.guide);
-    return this.guides = f, { x: p, y: b };
+    return this.guides = f, { x: b, y: u };
   }
   /**
    * 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, s, n, o) {
-    if (!o) return t.fontSize ?? 0;
+  _calculateFrozenFontSizeAtSnap(t, e, o, n, s) {
+    if (!s) return t.fontSize ?? 0;
     const i = n != null && n.anchor ? String(n.anchor) : "";
     if (!(n && (i.includes("top") || i.includes("bottom"))))
-      return o.fontSize ?? 0;
-    const r = ct(t) ?? t.width ?? o.width;
+      return s.fontSize ?? 0;
+    const r = ft(t) ?? t.width ?? s.width;
     let l = r;
     i.includes("right") && e !== 0 ? l = r + e : i.includes("left") && e !== 0 && (l = r - e);
-    const h = l / o.width;
-    return (o.fontSize ?? 0) * h;
+    const h = l / s.width;
+    return (s.fontSize ?? 0) * h;
   }
   /**
    * Check if this will be a position-based snap (vs dimension-based)
@@ -1134,7 +1134,7 @@ class Ze {
    * Used for text elements where height is derived, not settable
    */
   _isPositionBasedSnap(t, e) {
-    return e === "x" ? !1 : e === "y" ? !(St(t) !== void 0 || t.height !== void 0 && typeof t.height == "number") : !1;
+    return e === "x" ? !1 : e === "y" ? !(Tt(t) !== void 0 || t.height !== void 0 && typeof t.height == "number") : !1;
   }
   /**
    * Determine which snap keys to use based on the resize handle
@@ -1153,18 +1153,18 @@ class Ze {
    * Uses the spatial grid (pre-populated via _populateSpatialGrid) for
    * O(1) amortized lookup instead of scanning all other elements.
    */
-  _findXSnaps(t, e, s, n) {
-    const o = [], i = new Set(n);
-    for (const a of s) {
+  _findXSnaps(t, e, o, n) {
+    const s = [], i = new Set(n);
+    for (const a of o) {
       const r = t[a];
       if (!r) continue;
       const l = this._spatialGrid.queryNearAxis("x", r.x, this.snapThreshold);
       for (const h of l) {
         const c = this._anchorMetadata.get(h.id);
         if (!c || !i.has(c.anchorKey)) continue;
-        const d = c.point, f = c.anchorKey, p = Math.abs(r.x - d.x);
-        p < this.snapThreshold && o.push({
-          distance: p,
+        const d = c.point, f = c.anchorKey, b = Math.abs(r.x - d.x);
+        b < this.snapThreshold && s.push({
+          distance: b,
           snapTo: d.x,
           currentValue: r.x,
           guide: {
@@ -1178,25 +1178,25 @@ class Ze {
         });
       }
     }
-    return o;
+    return s;
   }
   /**
    * 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, s, n) {
-    const o = [], i = new Set(n);
-    for (const a of s) {
+  _findYSnaps(t, e, o, n) {
+    const s = [], i = new Set(n);
+    for (const a of o) {
       const r = t[a];
       if (!r) continue;
       const l = this._spatialGrid.queryNearAxis("y", r.y, this.snapThreshold);
       for (const h of l) {
         const c = this._anchorMetadata.get(h.id);
         if (!c || !i.has(c.anchorKey)) continue;
-        const d = c.point, f = c.anchorKey, p = Math.abs(r.y - d.y);
-        p < this.snapThreshold && o.push({
-          distance: p,
+        const d = c.point, f = c.anchorKey, b = Math.abs(r.y - d.y);
+        b < this.snapThreshold && s.push({
+          distance: b,
           snapTo: d.y,
           currentValue: r.y,
           guide: {
@@ -1210,42 +1210,42 @@ class Ze {
         });
       }
     }
-    return o;
+    return s;
   }
   /**
    * Sort snaps by distance and prioritize based on handle anchor
    */
-  _prioritizeSnaps(t, e, s) {
+  _prioritizeSnaps(t, e, o) {
     if (!e || !e.anchor) {
-      t.sort((n, o) => n.distance - o.distance);
+      t.sort((n, s) => n.distance - s.distance);
       return;
     }
-    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));
+    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));
   }
   /**
    * Create a guide visualization for an active snap
    */
-  _createGuideForSnap(t, e, s, n, o) {
-    const i = s[e];
+  _createGuideForSnap(t, e, o, n, s) {
+    const i = o[e];
     if (!i) return null;
-    if (o === "x") {
+    if (s === "x") {
       let a = 1 / 0, r = -1 / 0;
-      for (const l of Object.values(s))
+      for (const l of Object.values(o))
         Math.abs(l.x - t.snapTo) < 5 && (a = Math.min(a, l.y), r = Math.max(r, l.y));
       for (const l of n) {
-        const h = bt.getSnapAnchors(l);
+        const h = mt.getSnapAnchors(l);
         for (const c of Object.values(h))
           Math.abs(c.x - t.snapTo) < 5 && (a = Math.min(a, c.y), r = Math.max(r, c.y));
       }
@@ -1262,12 +1262,12 @@ class Ze {
           otherKey: "snap"
         }
       };
-    } else if (o === "y") {
+    } else if (s === "y") {
       let a = 1 / 0, r = -1 / 0;
-      for (const l of Object.values(s))
+      for (const l of Object.values(o))
         Math.abs(l.y - t.snapTo) < 5 && (a = Math.min(a, l.x), r = Math.max(r, l.x));
       for (const l of n) {
-        const h = bt.getSnapAnchors(l);
+        const h = mt.getSnapAnchors(l);
         for (const c of Object.values(h))
           Math.abs(c.y - t.snapTo) < 5 && (a = Math.min(a, c.x), r = Math.max(r, c.x));
       }
@@ -1293,9 +1293,9 @@ class Ze {
    * Adjust threshold to compensate for this velocity difference
    */
   _getAdjustedStickyThreshold(t, e) {
-    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;
+    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;
   }
   /**
    * Calculate what dimensions should be when edge reaches snap point
@@ -1313,48 +1313,48 @@ class Ze {
    * @param handle - The resize handle being dragged
    * @returns {Object} { frozenWidth, frozenHeight } - Dimensions at snap point
    */
-  _calculateFrozenDimensionsAtSnap(t, e, s, n, o) {
-    const i = ct(t) ?? t.width ?? 0, a = St(t) ?? t.height ?? 0;
+  _calculateFrozenDimensionsAtSnap(t, e, o, n, s) {
+    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 + 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 };
+    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 };
   }
   /**
    * Process sticky snapping for a single axis
    * @returns {Object} { snapDelta, bestSnap }
    */
-  _processStickySnap(t, e, s, n, o, i, a) {
+  _processStickySnap(t, e, o, n, s, i, a) {
     const r = this.activeSnaps[t];
     let l = 0, h = null;
     if (r) {
       const c = e[r.anchorKey];
       if (c) {
-        const d = t === "x" ? c.x : c.y, f = Math.abs(d - r.snapTo), p = this._getAdjustedStickyThreshold(t, n);
-        if (f < p) {
+        const d = t === "x" ? c.x : c.y, f = Math.abs(d - r.snapTo), b = this._getAdjustedStickyThreshold(t, n);
+        if (f < b) {
           if (l = r.snapTo - d, !(t === "y" && r.isPositionBasedSnap)) {
-            const g = this._calculateFrozenFontSizeAtSnap(
+            const p = this._calculateFrozenFontSizeAtSnap(
               n,
               t === "x" ? l : 0,
               t === "y" ? l : 0,
-              o,
+              s,
               i
             );
-            g !== r.frozenFontSize && (r.frozenFontSize = g);
+            p !== r.frozenFontSize && (r.frozenFontSize = p);
           }
           h = this._createGuideForSnap(r, r.anchorKey, e, a, t);
         } else {
-          const b = r;
-          if (this.activeSnaps[t] = null, s.length > 0 && s[0].distance < this.snapThreshold) {
-            h = s[0], l = h.snapTo - h.currentValue;
-            const g = b && b.anchorKey === h.guide.movingKey && Math.abs(b.snapTo - h.snapTo) < 1, u = g ? b.frozenFontSize : this._calculateFrozenFontSizeAtSnap(
+          const u = r;
+          if (this.activeSnaps[t] = null, o.length > 0 && o[0].distance < this.snapThreshold) {
+            h = o[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,
-              o,
+              s,
               i
             ), y = this._isPositionBasedSnap(n, t);
             let S;
-            g ? S = b.frozenPosition : y ? S = {
+            p ? S = u.frozenPosition : y ? S = {
               x: t === "x" ? n.x + l : n.x,
               y: t === "y" ? n.y + l : n.y
             } : S = { x: n.x, y: n.y };
@@ -1363,12 +1363,12 @@ class Ze {
               t,
               l,
               h.guide.movingKey,
-              o
+              s
             );
             this.activeSnaps[t] = {
               snapTo: h.snapTo,
               anchorKey: h.guide.movingKey,
-              frozenFontSize: u,
+              frozenFontSize: g,
               frozenWidth: m.frozenWidth,
               frozenHeight: m.frozenHeight,
               frozenPosition: S,
@@ -1378,35 +1378,35 @@ class Ze {
         }
       } else
         this.activeSnaps[t] = null;
-    } else if (s.length > 0 && s[0].distance < this.snapThreshold) {
-      h = s[0], l = h.snapTo - h.currentValue;
+    } else if (o.length > 0 && o[0].distance < this.snapThreshold) {
+      h = o[0], l = h.snapTo - h.currentValue;
       const c = this.activeSnaps[t], d = c && c.anchorKey === h.guide.movingKey && Math.abs(c.snapTo - h.snapTo) < 1, f = d ? c.frozenFontSize : this._calculateFrozenFontSizeAtSnap(
         n,
         t === "x" ? l : 0,
         t === "y" ? l : 0,
-        o,
+        s,
         i
-      ), p = this._isPositionBasedSnap(n, t);
-      let b;
-      d ? b = c.frozenPosition : p ? b = {
+      ), b = this._isPositionBasedSnap(n, t);
+      let u;
+      d ? u = c.frozenPosition : b ? u = {
         x: t === "x" ? n.x + l : n.x,
         y: t === "y" ? n.y + l : n.y
-      } : b = { x: n.x, y: n.y };
-      const g = this._calculateFrozenDimensionsAtSnap(
+      } : u = { x: n.x, y: n.y };
+      const p = this._calculateFrozenDimensionsAtSnap(
         n,
         t,
         l,
         h.guide.movingKey,
-        o
+        s
       );
       this.activeSnaps[t] = {
         snapTo: h.snapTo,
         anchorKey: h.guide.movingKey,
         frozenFontSize: f,
-        frozenWidth: g.frozenWidth,
-        frozenHeight: g.frozenHeight,
-        frozenPosition: b,
-        isPositionBasedSnap: p
+        frozenWidth: p.frozenWidth,
+        frozenHeight: p.frozenHeight,
+        frozenPosition: u,
+        isPositionBasedSnap: b
       };
     }
     return { snapDelta: l, bestSnap: h };
@@ -1414,16 +1414,16 @@ class Ze {
   /**
    * Adjust element for right edge resize
    */
-  _adjustElementForRightResize(t, e, s) {
-    const n = t.getVisualBoundingBox(), o = t.transformType === "image";
-    if (!o) {
-      const i = ct(t);
-      i !== void 0 ? vt(t, i + e) : t.width !== void 0 && (t.width += e);
+  _adjustElementForRightResize(t, e, o) {
+    const n = t.getVisualBoundingBox(), s = t.transformType === "image";
+    if (!s) {
+      const i = ft(t);
+      i !== void 0 ? xt(t, i + e) : t.width !== void 0 && (t.width += e);
     }
-    if (s.anchor === "middle-right") {
-      const i = dt.toRadiansInverse(t.rotation), a = Math.cos(i), r = Math.sin(i);
+    if (o.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 (!o) {
+    } else if (!s) {
       const a = t.getVisualBoundingBox().x - n.x;
       a !== 0 && (t.x -= a);
     }
@@ -1431,16 +1431,16 @@ class Ze {
   /**
    * Adjust element for left edge resize
    */
-  _adjustElementForLeftResize(t, e, s) {
-    const n = t.getVisualBoundingBox(), o = t.transformType === "image";
-    if (!o) {
-      const i = ct(t);
-      i !== void 0 ? vt(t, i - e) : t.width !== void 0 && (t.width -= e);
+  _adjustElementForLeftResize(t, e, o) {
+    const n = t.getVisualBoundingBox(), s = t.transformType === "image";
+    if (!s) {
+      const i = ft(t);
+      i !== void 0 ? xt(t, i - e) : t.width !== void 0 && (t.width -= e);
     }
-    if (s.anchor === "middle-left") {
-      const i = dt.toRadiansInverse(t.rotation), a = Math.cos(i), r = Math.sin(i);
+    if (o.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, !o) {
+    } else if (t.x += e, !s) {
       const i = t.getVisualBoundingBox(), a = i.x + i.width - (n.x + n.width);
       a !== 0 && (t.x -= a);
     }
@@ -1448,36 +1448,36 @@ class Ze {
   /**
    * Adjust element for bottom edge resize
    */
-  _adjustElementForBottomResize(t, e, s) {
-    const n = t.getVisualBoundingBox(), o = t.transformType === "image";
-    if (!o) {
-      const r = St(t);
-      r !== void 0 ? Pt(t, r + e) : t.height !== void 0 && (t.height += e);
+  _adjustElementForBottomResize(t, e, o) {
+    const n = t.getVisualBoundingBox(), s = t.transformType === "image";
+    if (!s) {
+      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 (s.anchor === "middle-bottom") {
-      const r = dt.toRadiansInverse(t.rotation), l = Math.cos(r), h = Math.sin(r);
+    if (o.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 (!o && a) {
+    } else if (!s && a) {
       const r = i.y - n.y;
       r !== 0 && (t.y -= r);
-    } else o || (t.y += e);
+    } else s || (t.y += e);
   }
   /**
    * Adjust element for top edge resize
    */
-  _adjustElementForTopResize(t, e, s) {
-    const n = t.getVisualBoundingBox(), o = t.transformType === "image";
-    if (!o) {
-      const r = St(t);
-      r !== void 0 ? Pt(t, r - e) : t.height !== void 0 && (t.height -= e);
+  _adjustElementForTopResize(t, e, o) {
+    const n = t.getVisualBoundingBox(), s = t.transformType === "image";
+    if (!s) {
+      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 (s.anchor === "middle-top") {
-      const r = dt.toRadiansInverse(t.rotation), l = Math.cos(r), h = Math.sin(r);
+    if (o.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 = !o && a;
+      const r = !s && 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,64 +1492,64 @@ class Ze {
    * @param {object} startData - Original data from when resize started (for font size preservation)
    * @returns {object} Modified resize result with adjusted element
    */
-  snapDimensions(t, e, s = null) {
-    var T, C, R, x, P;
+  snapDimensions(t, e, o = null) {
+    var T, C, R, x, H;
     if (!this.enabled || !e)
       return this.clearGuides(), t;
-    const { element: n } = t, o = t.handle;
+    const { element: n } = t, s = 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 M = n.clone();
       if (M.transformData) {
-        const A = n.getVisualBoundingBox(), B = A.width, L = A.height, W = (s == null ? void 0 : s.width) ?? n.width ?? 0, O = (s == null ? void 0 : s.height) ?? n.height ?? 0, D = (s == null ? void 0 : s.visualWidth) ?? B, Q = (s == null ? void 0 : s.visualHeight) ?? L, E = t.unfrozenDimensions.width / D, j = t.unfrozenDimensions.height / Q;
-        vt(M, W * E), Pt(M, O * j);
+        const A = n.getVisualBoundingBox(), I = A.width, L = A.height, D = (o == null ? void 0 : o.width) ?? n.width ?? 0, F = (o == null ? void 0 : o.height) ?? n.height ?? 0, W = (o == null ? void 0 : o.visualWidth) ?? I, q = (o == null ? void 0 : o.visualHeight) ?? L, J = t.unfrozenDimensions.width / W, E = t.unfrozenDimensions.height / q;
+        xt(M, D * J), Et(M, F * E);
       }
-      i = bt.getSnapAnchors(M);
+      i = mt.getSnapAnchors(M);
     } else
-      i = bt.getSnapAnchors(n);
+      i = mt.getSnapAnchors(n);
     const l = e.filter((M) => M.id !== n.id);
     if (l.length === 0)
       return this.clearGuides(), t;
     this._populateSpatialGrid(l);
-    const h = this._getSnapKeysForHandle(o), c = this._getTargetSnapKeys(), d = this._findXSnaps(i, l, h, c), f = this._findYSnaps(i, l, h, c);
-    this._prioritizeSnaps(d, o, "x"), this._prioritizeSnaps(f, o, "y");
-    const p = this._processStickySnap("x", i, d, n, o, s, l), b = this._processStickySnap("y", i, f, n, o, s, l), g = p.snapDelta, u = b.snapDelta, y = p.bestSnap, S = b.bestSnap, m = [];
+    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 = [];
     y && m.push(y.guide), S && m.push(S.guide), this.guides = m, m.length > 0;
-    const w = o && (o.anchor === "top-left" || o.anchor === "top-right" || o.anchor === "bottom-left" || o.anchor === "bottom-right");
-    if (a && w && (g !== 0 || u !== 0))
+    const w = s && (s.anchor === "top-left" || s.anchor === "top-right" || s.anchor === "bottom-left" || s.anchor === "bottom-right");
+    if (a && w && (p !== 0 || g !== 0))
       return t;
-    if (g !== 0 || u !== 0) {
-      const M = n.clone(), A = this.activeSnaps.x || this.activeSnaps.y, B = (A == null ? void 0 : A.frozenFontSize) ?? n.fontSize ?? 0, L = (A == null ? void 0 : A.frozenWidth) ?? ct(n) ?? n.width ?? 0, W = (A == null ? void 0 : A.frozenHeight) ?? St(n) ?? n.height ?? 0, O = (A == null ? void 0 : A.frozenPosition) ?? { x: n.x, y: n.y }, D = M.isCropping && !String(o.anchor).startsWith("crop-");
-      if (!D)
-        if (o && o.anchor) {
-          if (g !== 0) {
-            const k = (T = this.activeSnaps.x) == null ? void 0 : T.anchorKey, H = k == null ? void 0 : k.toLowerCase();
-            H && H.includes("right") ? this._adjustElementForRightResize(M, g, o) : H && H.includes("left") ? this._adjustElementForLeftResize(M, g, o) : M.x += g;
+    if (p !== 0 || g !== 0) {
+      const M = n.clone(), A = this.activeSnaps.x || this.activeSnaps.y, I = (A == null ? void 0 : A.frozenFontSize) ?? n.fontSize ?? 0, L = (A == null ? void 0 : A.frozenWidth) ?? ft(n) ?? n.width ?? 0, D = (A == null ? void 0 : A.frozenHeight) ?? Tt(n) ?? n.height ?? 0, F = (A == null ? void 0 : A.frozenPosition) ?? { x: n.x, y: n.y }, W = M.isCropping && !String(s.anchor).startsWith("crop-");
+      if (!W)
+        if (s && s.anchor) {
+          if (p !== 0) {
+            const B = (T = this.activeSnaps.x) == null ? void 0 : T.anchorKey, k = B == null ? void 0 : B.toLowerCase();
+            k && k.includes("right") ? this._adjustElementForRightResize(M, p, s) : k && k.includes("left") ? this._adjustElementForLeftResize(M, p, s) : M.x += p;
           }
-          if (u !== 0) {
-            const k = (C = this.activeSnaps.y) == null ? void 0 : C.anchorKey, H = k == null ? void 0 : k.toLowerCase();
-            H && H.includes("bottom") ? this._adjustElementForBottomResize(M, u, o) : H && H.includes("top") ? this._adjustElementForTopResize(M, u, o) : M.y += u;
+          if (g !== 0) {
+            const B = (C = this.activeSnaps.y) == null ? void 0 : C.anchorKey, k = B == null ? void 0 : B.toLowerCase();
+            k && k.includes("bottom") ? this._adjustElementForBottomResize(M, g, s) : k && k.includes("top") ? this._adjustElementForTopResize(M, g, s) : M.y += g;
           }
         } else
-          M.x += g, M.y += u;
-      M.fontSize !== void 0 && (M.fontSize = B);
-      const Q = M.transformType === "image", E = this.activeSnaps.x !== null || this.activeSnaps.y !== null;
-      if (Q && E) {
-        if (ct(M) !== void 0) {
-          const k = this.activeSnaps.x || this.activeSnaps.y;
-          let H = L, X = W;
-          k && (H = k.frozenWidth ?? H, X = k.frozenHeight ?? X);
-          const I = ct(n), z = St(n), G = M.imageAspectRatio || (I && z ? I / z : null);
-          G && G !== 0 && (X = H / G), vt(M, H), Pt(M, X), k && (k.frozenWidth = H, k.frozenHeight = X);
+          M.x += p, M.y += g;
+      M.fontSize !== void 0 && (M.fontSize = I);
+      const q = M.transformType === "image", J = this.activeSnaps.x !== null || this.activeSnaps.y !== null;
+      if (q && J) {
+        if (ft(M) !== void 0) {
+          const B = this.activeSnaps.x || this.activeSnaps.y;
+          let k = L, O = D;
+          B && (k = B.frozenWidth ?? k, O = B.frozenHeight ?? O);
+          const G = ft(n), P = Tt(n), _ = M.imageAspectRatio || (G && P ? G / P : null);
+          _ && _ !== 0 && (O = k / _), xt(M, k), Et(M, O), B && (B.frozenWidth = k, B.frozenHeight = O);
         }
       } else
-        (((R = this.activeSnaps.y) == null ? void 0 : R.isPositionBasedSnap) || !1) && (ct(M) !== void 0 ? vt(M, L) : M.width !== void 0 && (M.width = L));
-      const j = o && (o.anchor === "middle-left" || o.anchor === "middle-right"), _ = o && (o.anchor === "middle-top" || o.anchor === "middle-bottom"), $ = ((x = this.activeSnaps.x) == null ? void 0 : x.isPositionBasedSnap) || !1, Y = ((P = this.activeSnaps.y) == null ? void 0 : P.isPositionBasedSnap) || !1;
-      return (g === 0 || $) && !j && !_ && !D && (M.x = O.x), (u === 0 || Y) && !_ && !j && !D && (M.y = O.y), {
+        (((R = this.activeSnaps.y) == null ? void 0 : R.isPositionBasedSnap) || !1) && (ft(M) !== void 0 ? xt(M, L) : M.width !== void 0 && (M.width = L));
+      const E = s && (s.anchor === "middle-left" || s.anchor === "middle-right"), z = s && (s.anchor === "middle-top" || s.anchor === "middle-bottom"), N = ((x = this.activeSnaps.x) == null ? void 0 : x.isPositionBasedSnap) || !1, Q = ((H = this.activeSnaps.y) == null ? void 0 : H.isPositionBasedSnap) || !1;
+      return (p === 0 || N) && !E && !z && !W && (M.x = F.x), (g === 0 || Q) && !z && !E && !W && (M.y = F.y), {
         ...t,
         element: M,
-        snapAdjustment: { dx: g, dy: u },
+        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 Ze {
   /**
    * Snap rotation (for future implementation)
    */
-  snapRotation(t, e, s) {
+  snapRotation(t, e, o) {
     if (!this.enabled) return t;
-    const n = [0, 45, 90, 135, 180, 225, 270, 315, 360], o = 5;
+    const n = [0, 45, 90, 135, 180, 225, 270, 315, 360], s = 5;
     for (const i of n)
-      if (ie(t, i, o))
+      if (he(t, i, s))
         return i;
     return t;
   }
 }
-class Je {
+class nn {
   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,45 +1600,45 @@ class Je {
    * Snap position to match consistent spacing patterns
    * Returns adjusted position if spacing snap is detected, otherwise returns original position
    */
-  snapToSpacing(t, e, s) {
-    if (!this.enabled || !s)
+  snapToSpacing(t, e, o) {
+    if (!this.enabled || !o)
       return t;
-    const n = Ft, o = s.filter((g) => g.id !== e.id);
-    if (o.length === 0)
+    const n = Yt, s = o.filter((p) => p.id !== e.id);
+    if (s.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 p = o.filter((g) => {
-      const u = g.getVisualBoundingBox();
-      return !(a.x + a.width < u.x || a.x > u.x + u.width);
+    const b = s.filter((p) => {
+      const g = p.getVisualBoundingBox();
+      return !(a.x + a.width < g.x || a.x > g.x + g.width);
     });
-    if (p.sort((g, u) => {
-      const y = g.getVisualBoundingBox(), S = u.getVisualBoundingBox();
+    if (b.sort((p, g) => {
+      const y = p.getVisualBoundingBox(), S = g.getVisualBoundingBox();
       return y.y - S.y;
-    }), p.length >= 1) {
-      let g = null, u = null;
-      for (const m of p) {
+    }), b.length >= 1) {
+      let p = null, g = null;
+      for (const m of b) {
         const w = m.getVisualBoundingBox();
-        w.y + w.height <= a.y ? (!g || w.y > g.getVisualBoundingBox().y) && (g = m) : w.y >= a.y + a.height && (!u || w.y < u.getVisualBoundingBox().y) && (u = m);
+        w.y + w.height <= a.y ? (!p || w.y > p.getVisualBoundingBox().y) && (p = m) : w.y >= a.y + a.height && (!g || w.y < g.getVisualBoundingBox().y) && (g = m);
       }
       const y = [];
-      for (let m = 0; m < p.length - 1; m++) {
-        const w = p[m].getVisualBoundingBox(), C = p[m + 1].getVisualBoundingBox().y - (w.y + w.height);
+      for (let m = 0; m < b.length - 1; m++) {
+        const w = b[m].getVisualBoundingBox(), C = b[m + 1].getVisualBoundingBox().y - (w.y + w.height);
         y.push(C);
       }
       let S = null;
-      if (g) {
-        const m = g.getVisualBoundingBox(), w = a.y - (m.y + m.height);
+      if (p) {
+        const m = p.getVisualBoundingBox(), w = a.y - (m.y + m.height);
         for (const T of y)
           if (Math.abs(w - T) <= n) {
             S = T;
             break;
           }
       }
-      if (!S && u) {
-        const w = u.getVisualBoundingBox().y - (a.y + a.height);
+      if (!S && g) {
+        const w = g.getVisualBoundingBox().y - (a.y + a.height);
         for (const T of y)
           if (Math.abs(w - T) <= n) {
             S = T;
@@ -1646,45 +1646,45 @@ class Je {
           }
       }
       if (S !== null && S > 0) {
-        if (g) {
-          const m = g.getVisualBoundingBox(), w = a.y - (m.y + m.height);
+        if (p) {
+          const m = p.getVisualBoundingBox(), w = a.y - (m.y + m.height);
           Math.abs(w - S) <= n && (c = m.y + m.height + S - l, f = !0);
         }
-        if (!f && u) {
-          const m = u.getVisualBoundingBox(), w = m.y - (a.y + a.height);
+        if (!f && g) {
+          const m = g.getVisualBoundingBox(), w = m.y - (a.y + a.height);
           Math.abs(w - S) <= n && (c = m.y - a.height - S - l, f = !0);
         }
       }
     }
-    const b = o.filter((g) => {
-      const u = g.getVisualBoundingBox();
-      return !(a.y + a.height < u.y || a.y > u.y + u.height);
+    const u = s.filter((p) => {
+      const g = p.getVisualBoundingBox();
+      return !(a.y + a.height < g.y || a.y > g.y + g.height);
     });
-    if (b.sort((g, u) => {
-      const y = g.getVisualBoundingBox(), S = u.getVisualBoundingBox();
+    if (u.sort((p, g) => {
+      const y = p.getVisualBoundingBox(), S = g.getVisualBoundingBox();
       return y.x - S.x;
-    }), b.length >= 1) {
-      let g = null, u = null;
-      for (const m of b) {
+    }), u.length >= 1) {
+      let p = null, g = null;
+      for (const m of u) {
         const w = m.getVisualBoundingBox();
-        w.x + w.width <= a.x ? (!g || w.x > g.getVisualBoundingBox().x) && (g = m) : w.x >= a.x + a.width && (!u || w.x < u.getVisualBoundingBox().x) && (u = m);
+        w.x + w.width <= a.x ? (!p || w.x > p.getVisualBoundingBox().x) && (p = m) : w.x >= a.x + a.width && (!g || w.x < g.getVisualBoundingBox().x) && (g = m);
       }
       const y = [];
-      for (let m = 0; m < b.length - 1; m++) {
-        const w = b[m].getVisualBoundingBox(), C = b[m + 1].getVisualBoundingBox().x - (w.x + w.width);
+      for (let m = 0; m < u.length - 1; m++) {
+        const w = u[m].getVisualBoundingBox(), C = u[m + 1].getVisualBoundingBox().x - (w.x + w.width);
         y.push(C);
       }
       let S = null;
-      if (g) {
-        const m = g.getVisualBoundingBox(), w = a.x - (m.x + m.width);
+      if (p) {
+        const m = p.getVisualBoundingBox(), w = a.x - (m.x + m.width);
         for (const T of y)
           if (Math.abs(w - T) <= n) {
             S = T;
             break;
           }
       }
-      if (!S && u) {
-        const w = u.getVisualBoundingBox().x - (a.x + a.width);
+      if (!S && g) {
+        const w = g.getVisualBoundingBox().x - (a.x + a.width);
         for (const T of y)
           if (Math.abs(w - T) <= n) {
             S = T;
@@ -1692,12 +1692,12 @@ class Je {
           }
       }
       if (S !== null && S > 0) {
-        if (g) {
-          const m = g.getVisualBoundingBox(), w = a.x - (m.x + m.width);
+        if (p) {
+          const m = p.getVisualBoundingBox(), w = a.x - (m.x + m.width);
           Math.abs(w - S) <= n && (h = m.x + m.width + S - r, d = !0);
         }
-        if (!d && u) {
-          const m = u.getVisualBoundingBox(), w = m.x - (a.x + a.width);
+        if (!d && g) {
+          const m = g.getVisualBoundingBox(), w = m.x - (a.x + a.width);
           Math.abs(w - S) <= n && (h = m.x - a.width - S - r, d = !0);
         }
       }
@@ -1710,31 +1710,31 @@ class Je {
    * 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, s = !1) {
+  detectSpacing(t, e, o = !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 o = t.getVisualBoundingBox(), i = [], a = [], r = [], l = [];
+    const s = t.getVisualBoundingBox(), i = [], a = [], r = [], l = [];
     for (const c of n) {
-      const d = c.getVisualBoundingBox(), f = o.x - (d.x + d.width), p = d.x - (o.x + o.width), b = o.y - (d.y + d.height), g = d.y - (o.y + o.height), u = !(o.y + o.height < d.y || o.y > d.y + d.height), y = !(o.x + o.width < d.x || o.x > d.x + d.width);
-      f >= this.minDistance && f < this.detectionThreshold && u && i.push({ element: c, distance: f }), p >= this.minDistance && p < this.detectionThreshold && u && a.push({ element: c, distance: p }), b >= this.minDistance && b < this.detectionThreshold && y && r.push({ element: c, distance: b }), g >= this.minDistance && g < this.detectionThreshold && y && l.push({ element: c, distance: g });
+      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);
+      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 (s) {
+    if (o) {
       const c = this.detectAllMeasurements(t, e);
       h.push(...c);
     } else {
       if (i.length > 0) {
-        const c = this.detectConsistentSpacing(t, o, i, "left", n);
+        const c = this.detectConsistentSpacing(t, s, i, "left", n);
         h.push(...c);
       }
       if (a.length > 0) {
         const c = this.detectConsistentSpacing(
           t,
-          o,
+          s,
           a,
           "right",
           n
@@ -1742,13 +1742,13 @@ class Je {
         h.push(...c);
       }
       if (r.length > 0) {
-        const c = this.detectConsistentSpacing(t, o, r, "top", n);
+        const c = this.detectConsistentSpacing(t, s, r, "top", n);
         h.push(...c);
       }
       if (l.length > 0) {
         const c = this.detectConsistentSpacing(
           t,
-          o,
+          s,
           l,
           "bottom",
           n
@@ -1763,9 +1763,9 @@ class Je {
    * Shows measurements from the hovered element to other elements within detection threshold
    */
   detectAllMeasurements(t, e) {
-    const s = [], n = t.getVisualBoundingBox(), o = e.filter((l) => l.id !== t.id), i = this.detectionThreshold * 3;
+    const o = [], n = t.getVisualBoundingBox(), s = e.filter((l) => l.id !== t.id), i = this.detectionThreshold * 3;
     let a = 0, r = 0;
-    for (const l of o) {
+    for (const l of s) {
       const h = l.getVisualBoundingBox();
       if (Math.min(
         Math.abs(n.x - (h.x + h.width)),
@@ -1778,21 +1778,21 @@ class Je {
         // bottom
       ) > i)
         continue;
-      let d = 0, f = !1, p = 0, b = 0, g = 0;
+      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, p = n.x + n.width, b = h.x, g = (n.y + n.height / 2 + h.y + h.height / 2) / 2 + y)) : n.x >= h.x + h.width && (d = n.x - (h.x + h.width), d >= this.minDistance && (f = !0, p = h.x + h.width, b = n.x, g = (n.y + n.height / 2 + h.y + h.height / 2) / 2 + y)), f && (s.push({
+      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({
         type: "horizontal",
         distance: Math.round(d),
-        x1: p,
-        x2: b,
-        y: g,
-        labelX: (p + b) / 2,
-        labelY: g,
+        x1: b,
+        x2: u,
+        y: p,
+        labelX: (b + u) / 2,
+        labelY: p,
         isAltHover: !0
       }), a++);
       let S = 0, m = !1, w = 0, T = 0, C = 0;
       const x = 30 * (r % 2 === 0 ? 1 : -1);
-      h.y >= n.y + n.height ? (S = h.y - (n.y + n.height), S >= this.minDistance && (m = !0, w = (n.x + n.width / 2 + h.x + h.width / 2) / 2 + x, T = n.y + n.height, C = h.y)) : n.y >= h.y + h.height && (S = n.y - (h.y + h.height), S >= this.minDistance && (m = !0, w = (n.x + n.width / 2 + h.x + h.width / 2) / 2 + x, T = h.y + h.height, C = n.y)), m && (s.push({
+      h.y >= n.y + n.height ? (S = h.y - (n.y + n.height), S >= this.minDistance && (m = !0, w = (n.x + n.width / 2 + h.x + h.width / 2) / 2 + x, T = n.y + n.height, C = h.y)) : n.y >= h.y + h.height && (S = n.y - (h.y + h.height), S >= this.minDistance && (m = !0, w = (n.x + n.width / 2 + h.x + h.width / 2) / 2 + x, T = h.y + h.height, C = n.y)), m && (o.push({
         type: "vertical",
         distance: Math.round(S),
         x: w,
@@ -1803,93 +1803,93 @@ class Je {
         isAltHover: !0
       }), r++);
     }
-    return s;
+    return o;
   }
   /**
    * Detect consistent spacing patterns (e.g., evenly spaced rows/columns)
    * and create indicators for all matching spacings
    */
-  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);
+  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);
     if (this.addIndicatorForDirection(i, e, h, l, n, c), n === "left" || n === "right") {
-      const d = o.filter((f) => {
+      const d = s.filter((f) => {
         if (f.id === t.id) return !1;
-        const p = f.getVisualBoundingBox();
-        return !(e.y + e.height < p.y || e.y > p.y + p.height);
+        const b = f.getVisualBoundingBox();
+        return !(e.y + e.height < b.y || e.y > b.y + b.height);
       });
-      if (d.sort((f, p) => {
-        const b = f.getVisualBoundingBox(), g = p.getVisualBoundingBox();
-        return b.x - g.x;
+      if (d.sort((f, b) => {
+        const u = f.getVisualBoundingBox(), p = b.getVisualBoundingBox();
+        return u.x - p.x;
       }), n === "left")
         for (let f = 0; f < d.length - 1; f++) {
-          const p = d[f], b = d[f + 1], g = p.getVisualBoundingBox(), u = b.getVisualBoundingBox(), y = u.x - (g.x + g.width);
+          const b = d[f], u = d[f + 1], p = b.getVisualBoundingBox(), g = u.getVisualBoundingBox(), y = g.x - (p.x + p.width);
           if (Math.abs(y - l) <= 16 && y >= this.minDistance) {
-            const S = Math.max(g.y, u.y), m = Math.min(g.y + g.height, u.y + u.height), w = (S + m) / 2;
+            const S = Math.max(p.y, g.y), m = Math.min(p.y + p.height, g.y + g.height), w = (S + m) / 2;
             i.push({
               type: "horizontal",
               distance: Math.round(y),
-              x1: g.x + g.width,
-              x2: u.x,
+              x1: p.x + p.width,
+              x2: g.x,
               y: w,
-              labelX: (g.x + g.width + u.x) / 2,
+              labelX: (p.x + p.width + g.x) / 2,
               labelY: w
             });
           }
         }
       else
         for (let f = 0; f < d.length - 1; f++) {
-          const p = d[f], b = d[f + 1], g = p.getVisualBoundingBox(), u = b.getVisualBoundingBox(), y = u.x - (g.x + g.width);
+          const b = d[f], u = d[f + 1], p = b.getVisualBoundingBox(), g = u.getVisualBoundingBox(), y = g.x - (p.x + p.width);
           if (Math.abs(y - l) <= 16 && y >= this.minDistance) {
-            const S = Math.max(g.y, u.y), m = Math.min(g.y + g.height, u.y + u.height), w = (S + m) / 2;
+            const S = Math.max(p.y, g.y), m = Math.min(p.y + p.height, g.y + g.height), w = (S + m) / 2;
             i.push({
               type: "horizontal",
               distance: Math.round(y),
-              x1: g.x + g.width,
-              x2: u.x,
+              x1: p.x + p.width,
+              x2: g.x,
               y: w,
-              labelX: (g.x + g.width + u.x) / 2,
+              labelX: (p.x + p.width + g.x) / 2,
               labelY: w
             });
           }
         }
     } else {
-      const d = o.filter((f) => {
+      const d = s.filter((f) => {
         if (f.id === t.id) return !1;
-        const p = f.getVisualBoundingBox();
-        return !(e.x + e.width < p.x || e.x > p.x + p.width);
+        const b = f.getVisualBoundingBox();
+        return !(e.x + e.width < b.x || e.x > b.x + b.width);
       });
-      if (d.sort((f, p) => {
-        const b = f.getVisualBoundingBox(), g = p.getVisualBoundingBox();
-        return b.y - g.y;
+      if (d.sort((f, b) => {
+        const u = f.getVisualBoundingBox(), p = b.getVisualBoundingBox();
+        return u.y - p.y;
       }), n === "top")
         for (let f = 0; f < d.length - 1; f++) {
-          const p = d[f], b = d[f + 1], g = p.getVisualBoundingBox(), u = b.getVisualBoundingBox(), y = u.y - (g.y + g.height);
+          const b = d[f], u = d[f + 1], p = b.getVisualBoundingBox(), g = u.getVisualBoundingBox(), y = g.y - (p.y + p.height);
           if (Math.abs(y - l) <= 16 && y >= this.minDistance) {
-            const S = Math.max(g.x, u.x), m = Math.min(g.x + g.width, u.x + u.width), w = (S + m) / 2;
+            const S = Math.max(p.x, g.x), m = Math.min(p.x + p.width, g.x + g.width), w = (S + m) / 2;
             i.push({
               type: "vertical",
               distance: Math.round(y),
               x: w,
-              y1: g.y + g.height,
-              y2: u.y,
+              y1: p.y + p.height,
+              y2: g.y,
               labelX: w,
-              labelY: (g.y + g.height + u.y) / 2
+              labelY: (p.y + p.height + g.y) / 2
             });
           }
         }
       else
         for (let f = 0; f < d.length - 1; f++) {
-          const p = d[f], b = d[f + 1], g = p.getVisualBoundingBox(), u = b.getVisualBoundingBox(), y = u.y - (g.y + g.height);
+          const b = d[f], u = d[f + 1], p = b.getVisualBoundingBox(), g = u.getVisualBoundingBox(), y = g.y - (p.y + p.height);
           if (Math.abs(y - l) <= 16 && y >= this.minDistance) {
-            const S = Math.max(g.x, u.x), m = Math.min(g.x + g.width, u.x + u.width), w = (S + m) / 2;
+            const S = Math.max(p.x, g.x), m = Math.min(p.x + p.width, g.x + g.width), w = (S + m) / 2;
             i.push({
               type: "vertical",
               distance: Math.round(y),
               x: w,
-              y1: g.y + g.height,
-              y2: u.y,
+              y1: p.y + p.height,
+              y2: g.y,
               labelX: w,
-              labelY: (g.y + g.height + u.y) / 2
+              labelY: (p.y + p.height + g.y) / 2
             });
           }
         }
@@ -1899,9 +1899,9 @@ class Je {
   /**
    * Check if spacing would snap to a pattern
    */
-  checkIfWouldSnap(t, e, s, n) {
-    const o = Ft;
-    if (s === "top" || s === "bottom") {
+  checkIfWouldSnap(t, e, o, n) {
+    const s = Yt;
+    if (o === "top" || o === "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 Je {
         }
         if (a.length > 0) {
           const r = a.reduce((c, d) => c + d, 0) / a.length;
-          return Math.abs(e - r) <= o;
+          return Math.abs(e - r) <= s;
         }
       }
       return !1;
@@ -1939,7 +1939,7 @@ class Je {
         }
         if (a.length > 0) {
           const r = a.reduce((c, d) => c + d, 0) / a.length;
-          return Math.abs(e - r) <= o;
+          return Math.abs(e - r) <= s;
         }
       }
       return !1;
@@ -1948,59 +1948,59 @@ class Je {
   /**
    * Helper method to add a spacing indicator in a specific direction
    */
-  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;
+  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;
       t.push({
         type: "horizontal",
         distance: Math.round(n),
-        x1: s.x + s.width,
+        x1: o.x + o.width,
         x2: e.x,
         y: l,
-        labelX: (s.x + s.width + e.x) / 2,
+        labelX: (o.x + o.width + e.x) / 2,
         labelY: l,
         isSnapTarget: i
       });
-    } 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;
+    } 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;
       t.push({
         type: "horizontal",
         distance: Math.round(n),
         x1: e.x + e.width,
-        x2: s.x,
+        x2: o.x,
         y: l,
-        labelX: (e.x + e.width + s.x) / 2,
+        labelX: (e.x + e.width + o.x) / 2,
         labelY: l,
         isSnapTarget: i
       });
-    } 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;
+    } 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;
       t.push({
         type: "vertical",
         distance: Math.round(n),
         x: l,
-        y1: s.y + s.height,
+        y1: o.y + o.height,
         y2: e.y,
         labelX: l,
-        labelY: (s.y + s.height + e.y) / 2,
+        labelY: (o.y + o.height + e.y) / 2,
         isSnapTarget: i
       });
-    } 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;
+    } 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;
       t.push({
         type: "vertical",
         distance: Math.round(n),
         x: l,
         y1: e.y + e.height,
-        y2: s.y,
+        y2: o.y,
         labelX: l,
-        labelY: (e.y + e.height + s.y) / 2,
+        labelY: (e.y + e.height + o.y) / 2,
         isSnapTarget: i
       });
     }
   }
 }
-const Wt = $t("ArtboardRenderer"), Fe = {
+const _t = Zt("ArtboardRenderer"), Xe = {
   showLabel: !0,
   showBorder: !0,
   borderColor: "",
@@ -2018,15 +2018,15 @@ const Wt = $t("ArtboardRenderer"), Fe = {
   borderRadius: 0
   // Default to no border radius (sharp corners)
 };
-class Jt {
+class ne {
   constructor(t = {}) {
-    this.options = { ...Fe, ...t };
+    this.options = { ...Xe, ...t };
   }
   /**
    * Render an artboard
    */
-  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(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 artboard background
@@ -2042,69 +2042,69 @@ class Jt {
    * Renders preset color as base layer, then texture on top
    */
   renderTextureBackground(t, e) {
-    const s = Bt.getTexture(e.backgroundTexture), n = Bt.getTexturePresetColor(e.backgroundTexture);
-    if (t.fillStyle = n, t.fillRect(e.x, e.y, e.width, e.height), !s || !s.complete) {
-      Bt.loadTexture(e.backgroundTexture).catch((o) => {
-        Wt.error("Failed to load texture:", o);
+    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) => {
+        _t.error("Failed to load texture:", s);
       });
       return;
     }
-    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();
+    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();
   }
   /**
    * Render a checkerboard pattern for transparent backgrounds
    */
-  renderCheckerboard(t, e, s, n, o) {
+  renderCheckerboard(t, e, o, n, s) {
     const a = "#ffffff", r = "#d0d0d0";
-    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++)
+    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++)
       for (let h = 0; h < Math.ceil(n / 16); h++)
-        (l + h) % 2 === 1 && t.fillRect(e + h * 16, s + l * 16, 16, 16);
+        (l + h) % 2 === 1 && t.fillRect(e + h * 16, o + l * 16, 16, 16);
     t.restore();
   }
   /**
    * Render artboard border (respects clipShape and borderRadius option)
    */
-  renderBorder(t, e, s) {
-    const { x: n, y: o, width: i, height: a, clipShape: r } = e, l = this.options.borderColor || ae(), h = this.options.selectedBorderColor || et();
-    if (t.strokeStyle = s ? h : l, t.lineWidth = s ? this.options.selectedBorderWidth : this.options.borderWidth, t.beginPath(), !r || r === "rectangle")
+  renderBorder(t, e, o) {
+    const { x: n, y: s, width: i, height: a, clipShape: r } = e, l = this.options.borderColor || ce(), 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")
       if (this.options.borderRadius > 0) {
         const c = Math.min(this.options.borderRadius, Math.min(i, a) / 2);
-        this.roundedRect(t, n, o, i, a, c);
+        this.roundedRect(t, n, s, i, a, c);
       } else
-        t.rect(n, o, i, a);
+        t.rect(n, s, i, a);
     else if (r === "circle") {
-      const c = n + i / 2, d = o + a / 2, f = Math.min(i, a) / 2;
+      const c = n + i / 2, d = s + 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, o, i, a, c);
+      this.roundedRect(t, n, s, i, a, c);
     } else if (typeof r == "object" && r.type === "path")
       try {
         const c = new Path2D(r.d);
-        t.save(), t.translate(n, o), t.stroke(c), t.restore();
+        t.save(), t.translate(n, s), t.stroke(c), t.restore();
         return;
       } catch (c) {
-        Wt.warn("Invalid SVG path for border, falling back to rectangle:", c), t.rect(n, o, i, a);
+        _t.warn("Invalid SVG path for border, falling back to rectangle:", c), t.rect(n, s, i, a);
       }
     t.stroke();
   }
   /**
    * Render artboard label (name + dimensions)
    */
-  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;
+  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;
     t.font = `${n}px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`;
-    const l = this.options.selectedBorderColor || et(), h = this.options.labelColor || re();
-    t.fillStyle = s ? l : h, t.textAlign = "left", t.textBaseline = "bottom", t.fillText(i, a, r);
+    const l = this.options.selectedBorderColor || nt(), h = this.options.labelColor || de();
+    t.fillStyle = o ? l : h, t.textAlign = "left", t.textBaseline = "bottom", t.fillText(i, a, r);
   }
   /**
    * Render multiple artboards
    */
-  renderMultiple(t, e, s) {
+  renderMultiple(t, e, o) {
     e.forEach((n) => {
-      const o = n.id === s;
-      this.render(t, n, o);
+      const s = n.id === o;
+      this.render(t, n, s);
     });
   }
   /**
@@ -2120,26 +2120,26 @@ class Jt {
    * If borderRadius option is set and no special clipShape, uses rounded rectangle
    */
   applyClipPath(t, e) {
-    const { x: s, y: n, width: o, height: i, clipShape: a } = e;
+    const { x: o, y: n, width: s, 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(o, i) / 2);
-        this.roundedRect(t, s, n, o, i, r);
+        const r = Math.min(this.options.borderRadius, Math.min(s, i) / 2);
+        this.roundedRect(t, o, n, s, i, r);
       } else
-        t.rect(s, n, o, i);
+        t.rect(o, n, s, i);
     else if (a === "circle") {
-      const r = s + o / 2, l = n + i / 2, h = Math.min(o, i) / 2;
+      const r = o + s / 2, l = n + i / 2, h = Math.min(s, 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(o, i) / 2);
-      this.roundedRect(t, s, n, o, i, r);
+      const r = Math.min(a.radius, Math.min(s, i) / 2);
+      this.roundedRect(t, o, n, s, i, r);
     } else if (typeof a == "object" && a.type === "path")
       try {
         const r = new Path2D(a.d);
-        t.translate(s, n), t.clip(r), t.translate(-s, -n);
+        t.translate(o, n), t.clip(r), t.translate(-o, -n);
         return;
       } catch (r) {
-        Wt.warn("Invalid SVG path, falling back to rectangle:", r), t.rect(s, n, o, i);
+        _t.warn("Invalid SVG path, falling back to rectangle:", r), t.rect(o, n, s, i);
       }
     t.clip();
   }
@@ -2147,8 +2147,8 @@ class Jt {
    * Draw a rounded rectangle path
    * Helper method for rounded clip shapes
    */
-  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));
+  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));
   }
   /**
    * Restore after clipping
@@ -2159,21 +2159,21 @@ class Jt {
   /**
    * Render artboard outline (for dragging/resizing preview)
    */
-  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();
+  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();
   }
   /**
    * Render resize handles for artboard
    */
   renderResizeHandles(t, e) {
-    const { x: n, y: o, width: i, height: a } = e, r = [
-      { x: n, y: o },
+    const { x: n, y: s, width: i, height: a } = e, r = [
+      { x: n, y: s },
       // top-left
-      { x: n + i, y: o },
+      { x: n + i, y: s },
       // top-right
-      { x: n, y: o + a },
+      { x: n, y: s + a },
       // bottom-left
-      { x: n + i, y: o + a }
+      { x: n + i, y: s + a }
       // bottom-right
     ];
     t.save(), r.forEach((l) => {
@@ -2198,7 +2198,7 @@ class Jt {
    * Use this when exporting to ensure preview background is never included
    */
   static createForExport(t = {}) {
-    return new Jt({
+    return new ne({
       ...t,
       showPreviewBackground: !1
       // CRITICAL: Never show preview in exports
@@ -2211,15 +2211,15 @@ class Jt {
     return !!(this.options.showPreviewBackground && t.previewBackgroundColor && t.previewBackgroundColor !== "transparent");
   }
 }
-class mt {
+class wt {
   /**
    * Render selection box layer
    */
-  static renderSelectionLayer(t, e, s, n = 1) {
-    if (!e || e.visible === !1 || s && s.getMode() === "drag" || "isGroup" in e && e.isGroup) return;
+  static renderSelectionLayer(t, e, o, n = 1) {
+    if (!e || e.visible === !1 || o && o.getMode() === "drag" || "isGroup" in e && e.isGroup) return;
     const i = e.getVisualBoundingBox(), a = e.getRotationAnchor();
-    t.save(), t.strokeStyle = et(t.canvas), t.lineWidth = 2, t.translate(a.x * n, a.y * n), t.rotate(dt.toRadians(e.rotation)), t.translate(-a.x * n, -a.y * n);
-    const r = rt.canvas.selectionPadding;
+    t.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;
     t.strokeRect(
       (i.x - r) * n,
       (i.y - r) * n,
@@ -2231,48 +2231,48 @@ class mt {
    * Render position and size info below the selected element
    * Only shows dimensions (width x height) while resizing
    */
-  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;
+  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;
     t.save(), t.font = "10px system-ui, -apple-system, sans-serif";
-    const p = t.measureText(l).width + 12, b = 18;
-    t.shadowColor = le(t.canvas), t.shadowBlur = 4, t.shadowOffsetY = 1, t.fillStyle = he(t.canvas), t.beginPath(), t.roundRect(
-      c - p / 2,
-      d - b / 2,
-      p,
+    const b = t.measureText(l).width + 12, u = 18;
+    t.shadowColor = fe(t.canvas), t.shadowBlur = 4, t.shadowOffsetY = 1, t.fillStyle = ge(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 = ce(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 = ue(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, s, n, o, i, a, r = 1, l = !0) {
+  static renderHandlesLayer(t, e, o, n, s, 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", p = f ? a.getActiveHandle() : null;
-    s.render(
+    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(
       t,
       l,
       n,
-      o,
+      s,
       c,
       d,
       f,
-      p,
+      b,
       r,
       !0
       // Render rotation handle on canvas (not React)
     );
   }
 }
-class _t {
+class Vt {
   /**
    * Render hover highlights layer with fade-in animation
    * Outlines the actual element shape instead of a rectangular border
    */
-  static renderHoverLayer(t, e, s, n = !1, o = 1, i) {
-    if (e.type !== "element" || !e.data || e.data.id === s) return;
+  static renderHoverLayer(t, e, o, n = !1, s = 1, i) {
+    if (e.type !== "element" || !e.data || e.data.id === o) return;
     const a = e.data;
     t.save();
     const r = 150, l = 0.5;
@@ -2281,82 +2281,82 @@ class _t {
       const c = performance.now() - e.startTime;
       h = Math.min(c / r, 1) * l;
     }
-    t.strokeStyle = de(t.canvas), t.globalAlpha = h, t.lineWidth = 3, this.renderElementOutline(t, a, o, i), t.restore();
+    t.strokeStyle = pe(t.canvas), t.globalAlpha = h, t.lineWidth = 3, this.renderElementOutline(t, a, s, i), t.restore();
   }
   /**
    * Render outline for a specific element type
    */
-  static renderElementOutline(t, e, s = 1, n) {
-    const o = e.getRotationAnchor();
-    t.translate(o.x * s, o.y * s), t.rotate(dt.toRadians(e.rotation)), t.translate(-o.x * s, -o.y * s), e.transformType === "shape" ? this.renderShapeOutline(t, e, s) : e.transformType === "image" ? this.renderImageOutline(t, e, s) : e.transformType === "group" ? this.renderGroupOutline(t, e, s) : this.renderTextOutline(t, e, s, n);
+  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);
   }
   /**
    * 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, 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) {
+  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) {
       case "rectangle": {
-        const h = n.borderRadius || 0, c = -(o + l * 2) / 2, d = -(i + l * 2) / 2, f = o + l * 2, p = i + l * 2;
+        const h = n.borderRadius || 0, c = -(s + l * 2) / 2, d = -(i + l * 2) / 2, f = s + l * 2, b = i + l * 2;
         if (h > 0) {
-          const b = Math.min(h / 100 * Math.min(f, p), f / 2, p / 2);
-          t.roundRect(c, d, f, p, b);
+          const u = Math.min(h / 100 * Math.min(f, b), f / 2, b / 2);
+          t.roundRect(c, d, f, b, u);
         } else
-          t.rect(c, d, f, p);
+          t.rect(c, d, f, b);
         break;
       }
       case "circle": {
-        const h = Math.min(o, i) / 2 + l;
+        const h = Math.min(s, i) / 2 + l;
         t.arc(0, 0, h, 0, Math.PI * 2);
         break;
       }
       case "ellipse": {
-        const h = (n.radiusX ?? o / 2) + l, c = (n.radiusY ?? i / 2) + l;
+        const h = (n.radiusX ?? s / 2) + l, c = (n.radiusY ?? i / 2) + l;
         t.ellipse(0, 0, h, c, 0, 0, Math.PI * 2);
         break;
       }
       case "triangle": {
-        const h = o / 2, c = i / 2, d = [
+        const h = s / 2, c = i / 2, d = [
           { x: 0, y: -c },
           // top
           { x: h, y: c },
           // bottom-right
           { x: -h, y: c }
           // bottom-left
-        ], f = d.map((b, g) => {
-          const u = d[(g + 1) % 3], y = u.x - b.x, S = u.y - b.y, m = Math.sqrt(y * y + S * S);
+        ], f = d.map((u, p) => {
+          const g = d[(p + 1) % 3], y = g.x - u.x, S = g.y - u.y, m = Math.sqrt(y * y + S * S);
           return { x: S / m, y: -y / m };
-        }), p = d.map((b, g) => {
-          const u = f[(g + 2) % 3], y = f[g], S = u.x + y.x, m = u.y + y.y, w = Math.sqrt(S * S + m * m), T = (S * u.x + m * u.y) / w, C = l / T;
+        }), b = d.map((u, p) => {
+          const g = f[(p + 2) % 3], y = f[p], S = g.x + y.x, m = g.y + y.y, w = Math.sqrt(S * S + m * m), T = (S * g.x + m * g.y) / w, C = l / T;
           return {
-            x: b.x + S / w * C,
-            y: b.y + m / w * C
+            x: u.x + S / w * C,
+            y: u.y + m / w * C
           };
         });
-        t.moveTo(p[0].x, p[0].y), t.lineTo(p[1].x, p[1].y), t.lineTo(p[2].x, p[2].y), t.closePath();
+        t.moveTo(b[0].x, b[0].y), t.lineTo(b[1].x, b[1].y), t.lineTo(b[2].x, b[2].y), t.closePath();
         break;
       }
       case "star": {
-        const h = n.points ?? 5, c = n.innerRadius ?? 0.4, d = Math.min(o, i) / 2 + l, f = d * c;
-        for (let p = 0; p < h * 2; p++) {
-          const b = p * Math.PI / h - Math.PI / 2, g = p % 2 === 0 ? d : f, u = g * Math.cos(b), y = g * Math.sin(b);
-          p === 0 ? t.moveTo(u, y) : t.lineTo(u, y);
+        const h = n.points ?? 5, c = n.innerRadius ?? 0.4, d = Math.min(s, 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);
         }
         t.closePath();
         break;
       }
       case "polygon": {
-        const h = n.sides ?? 5, c = Math.min(o, i) / 2 + l;
+        const h = n.sides ?? 5, c = Math.min(s, i) / 2 + l;
         for (let d = 0; d < h; d++) {
-          const f = d * 2 * Math.PI / h - Math.PI / 2, p = c * Math.cos(f), b = c * Math.sin(f);
-          d === 0 ? t.moveTo(p, b) : t.lineTo(p, b);
+          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);
         }
         t.closePath();
         break;
       }
       case "line": {
-        const h = o / 2 + l;
+        const h = s / 2 + l;
         t.moveTo(-h, 0), t.lineTo(h, 0);
         break;
       }
@@ -2367,24 +2367,24 @@ class _t {
    * Render outline for image elements
    * Creates a ring effect with a gap between the element and the stroke
    */
-  static renderImageOutline(t, e, s) {
-    var b;
-    const n = e.getVisualBoundingBox(), o = n.width * s, i = n.height * s, a = ((b = e.transformData) == null ? void 0 : b.borderRadius) || 0, r = 2, h = r + r / 2;
-    t.save(), t.translate(e.x * s, e.y * s);
-    const c = -(o + h * 2) / 2, d = -(i + h * 2) / 2, f = o + h * 2, p = i + h * 2;
+  static renderImageOutline(t, e, o) {
+    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;
     if (t.beginPath(), a > 0) {
-      const g = Math.min(a / 100 * Math.min(f, p), f / 2, p / 2);
-      t.roundRect(c, d, f, p, g);
+      const p = Math.min(a / 100 * Math.min(f, b), f / 2, b / 2);
+      t.roundRect(c, d, f, b, p);
     } else
-      t.rect(c, d, f, p);
+      t.rect(c, d, f, b);
     t.stroke(), t.restore();
   }
   /**
    * Render outline for group elements
    * Creates a ring effect with a gap between the element and the stroke
    */
-  static renderGroupOutline(t, e, 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;
+  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;
     t.save(), t.setLineDash([5, 5]), t.beginPath(), t.roundRect(r, l, h, c, 8), t.stroke(), t.restore();
   }
   /**
@@ -2392,9 +2392,9 @@ class _t {
    * Creates a ring effect with a gap between text and stroke (ring behind text fill)
    * Supports all transform types: custom, circle, wave, arch, etc.
    */
-  static renderTextOutline(t, e, 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);
+  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);
   }
   /**
    * HOVER RING EFFECT for straight/custom text
@@ -2407,122 +2407,131 @@ class _t {
    * - Element stroke (StrokeRenderer.ts - only when stroke.enabled = true)
    * - Selection box (dashed rectangle in element.render())
    */
-  static renderHoverRingEffect(t, e, s) {
-    t.save(), t.translate(e.x * s, e.y * s), s !== 1 && t.scale(s, s);
-    const n = e.fontSize, o = e.fontFamily, i = e.bold || !1, a = e.italic || !1, r = e.textAlign || "center", l = jt(n, o, i, a), h = n * 1.2, c = 4 / s, d = 4 / s, f = document.createElement("canvas");
-    f.width = t.canvas.width, f.height = t.canvas.height;
-    const p = f.getContext("2d");
-    if (!p) {
+  static renderHoverRingEffect(t, e, o) {
+    t.save(), t.translate(e.x * o, e.y * o), o !== 1 && t.scale(o, o);
+    const n = e.fontSize, s = e.fontFamily, i = e.bold || !1, a = e.italic || !1, r = e.textAlign || "center", l = Jt(n, s, i, a), h = n * (e.lineHeight ?? 1.2), c = e.letterSpacing ?? 0, d = 4 / o, f = 4 / o, b = document.createElement("canvas");
+    b.width = t.canvas.width, b.height = t.canvas.height;
+    const u = b.getContext("2d");
+    if (!u) {
       t.restore();
       return;
     }
-    p.setTransform(t.getTransform()), p.textBaseline = "alphabetic", p.lineJoin = "round";
-    const b = e.getRichText ? e.getRichText() : null;
-    if (b) {
-      const g = qt(b), u = [], y = [];
-      g.forEach((w) => {
+    u.setTransform(t.getTransform()), u.textBaseline = "alphabetic", u.lineJoin = "round";
+    const p = e.getRichText ? e.getRichText() : null;
+    if (p) {
+      const g = Qt(p), y = [], S = [];
+      g.forEach((T) => {
         if (e.transformType === "custom" && e.transformData) {
-          const T = e.transformData.width - gt * 2, C = Ut(w, T, {
+          const C = e.transformData.width - pt * 2, R = te(T, C, {
             fontSize: n,
-            fontFamily: o,
+            fontFamily: s,
             bold: i,
-            italic: a
+            italic: a,
+            letterSpacing: e.letterSpacing
           });
-          C.forEach((R, x) => {
-            u.push(R), y.push({
-              isParagraphStart: x === 0,
-              isParagraphEnd: x === C.length - 1
+          R.forEach((x, H) => {
+            y.push(x), S.push({
+              isParagraphStart: H === 0,
+              isParagraphEnd: H === R.length - 1
             });
           });
         } else
-          u.push(w), y.push({
+          y.push(T), S.push({
             isParagraphStart: !0,
             isParagraphEnd: !0
           });
       });
-      let S;
-      u.length === 0 ? S = 0 : u.length === 1 ? S = l.height : S = (u.length - 1) * h + l.height;
-      const m = -S / 2;
-      u.forEach((w, T) => {
-        var D, Q;
-        const C = y[T].isParagraphStart, R = y[T].isParagraphEnd;
-        let x = 0;
-        const P = w.map((E) => E.text).join(""), M = ((D = P.match(/^ +/)) == null ? void 0 : D[0].length) || 0, A = ((Q = P.match(/ +$/)) == null ? void 0 : Q[0].length) || 0;
-        let B = 0;
-        w.forEach((E) => {
-          const j = E.style.fontSize !== void 0 ? E.style.fontSize : n, _ = E.style.fontFamily !== void 0 ? E.style.fontFamily : o, $ = E.style.bold !== void 0 ? E.style.bold : i, Y = E.style.italic !== void 0 ? E.style.italic : a;
+      let m;
+      y.length === 0 ? m = 0 : y.length === 1 ? m = l.height : m = (y.length - 1) * h + l.height;
+      const w = -m / 2;
+      y.forEach((T, C) => {
+        var q, J;
+        const R = S[C].isParagraphStart, x = S[C].isParagraphEnd;
+        let H = 0;
+        const M = T.map((E) => E.text).join(""), A = ((q = M.match(/^ +/)) == null ? void 0 : q[0].length) || 0, I = ((J = M.match(/ +$/)) == null ? void 0 : J[0].length) || 0;
+        let L = 0;
+        T.forEach((E) => {
+          const z = E.style.fontSize !== void 0 ? E.style.fontSize : n, N = E.style.fontFamily !== void 0 ? E.style.fontFamily : s, Q = E.style.bold !== void 0 ? E.style.bold : i, B = E.style.italic !== void 0 ? E.style.italic : a;
           let k = E.text;
-          const H = B, X = B + E.text.length;
-          if (!C && M > 0 && H < M) {
-            const I = Math.min(M - H, E.text.length);
-            k = k.substring(I);
+          const O = L, G = L + E.text.length;
+          if (!R && A > 0 && O < A) {
+            const P = Math.min(A - O, E.text.length);
+            k = k.substring(P);
           }
-          if (!R && A > 0) {
-            const I = P.length - A;
-            if (X > I) {
-              const z = !C && H < M ? Math.min(M - H, E.text.length) : 0, G = Math.max(0, I - H - z);
-              k = k.substring(0, G);
+          if (!x && I > 0) {
+            const P = M.length - I;
+            if (G > P) {
+              const _ = !R && O < A ? Math.min(A - O, E.text.length) : 0, j = Math.max(0, P - O - _);
+              k = k.substring(0, j);
             }
           }
-          k.length > 0 && (t.save(), t.font = Ht(j, _, $, Y), x += t.measureText(k).width, t.restore()), B += E.text.length;
+          if (k.length > 0) {
+            const P = E.style.letterSpacing !== void 0 ? E.style.letterSpacing : c;
+            t.save(), t.font = Lt(z, N, Q, B), H += Gt(t.measureText(k).width, k, P), t.restore();
+          }
+          L += E.text.length;
         });
-        const L = e.transformType === "custom" && e.transformData ? e.transformData.width - gt * 2 : void 0;
-        let W;
-        r === "center" ? W = -x / 2 : r === "right" ? W = L !== void 0 ? L / 2 - x : -x : W = L !== void 0 ? -L / 2 : 0;
-        const O = m + l.ascent + T * h;
-        B = 0, w.forEach((E) => {
-          const j = E.style.fontSize !== void 0 ? E.style.fontSize : n, _ = E.style.fontFamily !== void 0 ? E.style.fontFamily : o;
+        const D = e.transformType === "custom" && e.transformData ? e.transformData.width - pt * 2 : void 0;
+        let F;
+        r === "center" ? F = -H / 2 : r === "right" ? F = D !== void 0 ? D / 2 - H : -H : F = D !== void 0 ? -D / 2 : 0;
+        const W = w + l.ascent + C * h;
+        L = 0, T.forEach((E) => {
+          const z = E.style.fontSize !== void 0 ? E.style.fontSize : n, N = E.style.fontFamily !== void 0 ? E.style.fontFamily : s;
           E.style.color !== void 0 ? E.style.color : e.color;
-          const $ = E.style.bold !== void 0 ? E.style.bold : i, Y = E.style.italic !== void 0 ? E.style.italic : a;
+          const Q = E.style.bold !== void 0 ? E.style.bold : i, B = E.style.italic !== void 0 ? E.style.italic : a;
           let k = E.text;
-          const H = B, X = B + E.text.length;
-          if (!C && M > 0 && H < M) {
-            const I = Math.min(M - H, E.text.length);
-            k = k.substring(I);
+          const O = L, G = L + E.text.length;
+          if (!R && A > 0 && O < A) {
+            const P = Math.min(A - O, E.text.length);
+            k = k.substring(P);
           }
-          if (!R && A > 0) {
-            const I = P.length - A;
-            if (X > I) {
-              const z = !C && H < M ? Math.min(M - H, E.text.length) : 0, G = Math.max(0, I - H - z);
-              k = k.substring(0, G);
+          if (!x && I > 0) {
+            const P = M.length - I;
+            if (G > P) {
+              const _ = !R && O < A ? Math.min(A - O, E.text.length) : 0, j = Math.max(0, P - O - _);
+              k = k.substring(0, j);
             }
           }
-          B += E.text.length, k.length > 0 && (p.font = Ht(j, _, $, Y), p.textAlign = "left", p.globalCompositeOperation = "source-over", p.strokeStyle = t.strokeStyle, p.globalAlpha = Math.min(t.globalAlpha * 1.6, 0.8), p.lineWidth = (d + c) * 2, p.strokeText(k, W, O), p.globalCompositeOperation = "destination-out", p.globalAlpha = 1, p.lineWidth = d * 2, p.strokeText(k, W, O), p.fillText(k, W, O), W += p.measureText(k).width);
+          if (L += E.text.length, k.length > 0) {
+            const P = E.style.letterSpacing !== void 0 ? E.style.letterSpacing : c;
+            u.font = Lt(z, N, Q, B), u.textAlign = "left", u.globalCompositeOperation = "source-over", u.strokeStyle = t.strokeStyle, u.globalAlpha = Math.min(t.globalAlpha * 1.6, 0.8), u.lineWidth = (f + d) * 2, Pt(u, k, F, W, P), u.globalCompositeOperation = "destination-out", u.globalAlpha = 1, u.lineWidth = f * 2, Pt(u, k, F, W, P), Xt(u, k, F, W, P), F += Gt(u.measureText(k).width, k, P);
+          }
         });
       });
     } else {
-      t.font = Ht(n, o, i, a), p.font = t.font, p.textAlign = r;
-      let g, u;
+      t.font = Lt(n, s, i, a), u.font = t.font, u.textAlign = r;
+      let g, y;
       if (e.transformType === "custom" && e.transformData) {
-        const C = e.transformData.width - gt * 2, { lines: R } = fe(
+        const R = e.transformData.width - pt * 2, { lines: x } = ye(
           e.text,
-          C,
+          R,
           n,
-          o,
+          s,
           i,
           a,
           void 0,
-          !0
+          !0,
+          { letterSpacing: c, lineHeight: e.lineHeight }
         );
-        g = R;
+        g = x;
       } else {
         g = e.text.split(`
 `);
-        const C = e.text.includes(`
+        const R = e.text.includes(`
 `);
-        g = Te(g, C);
+        g = xe(g, R);
       }
-      g.length === 0 ? u = 0 : g.length === 1 ? u = l.height : u = (g.length - 1) * h + l.height;
-      const y = -u / 2, S = e.text.includes(`
-`), m = e.transformType === "custom" && e.transformData ? e.transformData.width : 0, w = -m / 2;
-      let T = w + gt;
-      r === "center" ? T = w + m / 2 : r === "right" && (T = w + m - gt), g.forEach((C, R) => {
-        const x = y + l.ascent + R * h, P = S || R === 0, M = S || R === g.length - 1;
-        let A = C;
-        P || (A = A.replace(/^ +/, "")), M || (A = A.replace(/ +$/, "")), p.globalCompositeOperation = "source-over", p.strokeStyle = t.strokeStyle, p.globalAlpha = Math.min(t.globalAlpha * 1.6, 0.8), p.lineWidth = (d + c) * 2, p.lineJoin = "round", p.strokeText(A, T, x), p.globalCompositeOperation = "destination-out", p.globalAlpha = 1, p.lineWidth = d * 2, p.strokeText(A, T, x), p.fillText(A, T, x);
+      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 C = T + pt;
+      r === "center" ? C = T + w / 2 : r === "right" && (C = T + w - pt), g.forEach((R, x) => {
+        const H = S + l.ascent + x * h, M = m || x === 0, A = m || x === g.length - 1;
+        let I = R;
+        M || (I = I.replace(/^ +/, "")), A || (I = I.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, I, C, H, c), u.globalCompositeOperation = "destination-out", u.globalAlpha = 1, u.lineWidth = f * 2, Pt(u, I, C, H, c), Xt(u, I, C, H, c);
       });
     }
-    t.setTransform(1, 0, 0, 1, 0, 0), t.drawImage(f, 0, 0), t.restore();
+    t.setTransform(1, 0, 0, 1, 0, 0), t.drawImage(b, 0, 0), t.restore();
   }
   /**
    * HOVER RING EFFECT for transformed text (circle, wave, arch, lean, ascend, flag)
@@ -2535,34 +2544,34 @@ class _t {
    * - Element stroke (StrokeRenderer.ts - only when stroke.enabled = true)
    * - Selection box (dashed outline shown by each transform's render() method)
    */
-  static renderTransformHoverRingEffect(t, e, 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");
+  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");
     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, o, 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, s, 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, s, n, o) {
+  static renderTransformWithHoverEffect(t, e, o, n, s) {
     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 = 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);
+      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);
       return;
     }
-    const f = i.text.split(""), p = f.map((u) => t.measureText(u).width), b = this.calculateCharPositions(e, f, p), g = (u) => {
-      t.translate(u.x, u.y), u.angle && t.rotate(u.angle), u.skewY && t.transform(1, u.skewY, 0, 1, 0, 0);
+    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 = o, t.globalAlpha = 0.8, t.lineWidth = (n + s) * 2, t.lineJoin = "round", b.forEach((u, y) => {
-      t.save(), g(u), t.strokeText(f[y], 0, 0), t.restore();
-    }), t.globalCompositeOperation = "destination-out", t.globalAlpha = 1, t.lineWidth = n * 2, b.forEach((u, y) => {
-      t.save(), g(u), t.strokeText(f[y], 0, 0), t.fillText(f[y], 0, 0), t.restore();
+    t.globalCompositeOperation = "source-over", t.strokeStyle = s, t.globalAlpha = 0.8, t.lineWidth = (n + o) * 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();
     });
   }
   /**
@@ -2570,26 +2579,26 @@ class _t {
    *
    * Also used by EditModeRenderer for cursor positioning on transformed text.
    */
-  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 }));
+  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 }));
   }
   /**
    * Calculate positions for circle transform
    */
-  static calculateCirclePositions(t, e, s) {
-    const n = [], o = s.reduce((a, r) => a + r, 0), i = t.radius * t.scale;
+  static calculateCirclePositions(t, e, o) {
+    const n = [], s = o.reduce((a, r) => a + r, 0), i = t.radius * t.scale;
     if (t.reverse) {
-      let a = Math.PI / 2 + o / (2 * i);
+      let a = Math.PI / 2 + s / (2 * i);
       e.forEach((r, l) => {
-        const c = s[l] / i, d = Math.cos(a - c / 2) * i, f = Math.sin(a - c / 2) * i, p = a - c / 2 - Math.PI / 2;
-        n.push({ x: d, y: f, angle: p }), a -= c;
+        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;
+        n.push({ x: d, y: f, angle: b }), a -= c;
       });
     } else {
-      let a = -Math.PI / 2 - o / (2 * i);
+      let a = -Math.PI / 2 - s / (2 * i);
       e.forEach((r, l) => {
-        const c = s[l] / i, d = Math.cos(a + c / 2) * i, f = Math.sin(a + c / 2) * i, p = a + c / 2 + Math.PI / 2;
-        n.push({ x: d, y: f, angle: p }), a += c;
+        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;
+        n.push({ x: d, y: f, angle: b }), a += c;
       });
     }
     return n;
@@ -2597,328 +2606,331 @@ class _t {
   /**
    * Calculate positions for wave transform
    */
-  static calculateWavePositions(t, e, s, n) {
-    const o = [];
-    let a = -s.reduce((r, l) => r + l, 0) / 2;
+  static calculateWavePositions(t, e, o, n) {
+    const s = [];
+    let a = -o.reduce((r, l) => r + l, 0) / 2;
     return e.forEach((r, l) => {
-      const h = s[l], c = a + h / 2, d = c / (n.width / 2), f = n.amplitude * t.fontSize * Math.sin(n.frequency * Math.PI * d), p = n.amplitude * n.frequency * Math.PI * Math.cos(n.frequency * Math.PI * d);
-      o.push({ x: c, y: f, angle: 0, skewY: p * ge }), a += h;
-    }), o;
+      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 * be }), a += h;
+    }), s;
   }
   /**
    * Calculate positions for arch transform
    */
-  static calculateArchPositions(t, e, s, n) {
-    const o = [], i = s.reduce((l, h) => l + h, 0), a = n.width / 2;
+  static calculateArchPositions(t, e, o, n) {
+    const s = [], i = o.reduce((l, h) => l + h, 0), a = n.width / 2;
     let r = -i / 2;
     return e.forEach((l, h) => {
-      const c = s[h], d = r + c / 2, f = d / a, p = (Math.pow(f, 2) - 1) * n.archHeight * t.fontSize, b = 2 * f * n.archHeight;
-      o.push({ x: d, y: p, angle: 0, skewY: b * 0.3 }), r += c;
-    }), o;
+      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;
   }
   /**
    * Calculate positions for lean transform
    */
   static calculateLeanPositions(t, e) {
-    const s = [];
-    let o = -e.reduce((i, a) => i + a, 0) / 2;
+    const o = [];
+    let s = -e.reduce((i, a) => i + a, 0) / 2;
     return t.forEach((i, a) => {
-      const r = e[a], l = o + r / 2;
-      s.push({ x: l, y: 0, angle: 0 }), o += r;
-    }), s;
+      const r = e[a], l = s + r / 2;
+      o.push({ x: l, y: 0, angle: 0 }), s += r;
+    }), o;
   }
   /**
    * Calculate positions for ascend transform
    */
-  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);
+  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);
     let l = -i / 2;
     return e.forEach((h, c) => {
-      const d = s[c], f = l + d / 2, p = f * r;
-      o.push({ x: f, y: p, angle: 0, skewY: r * 1 }), l += d;
-    }), o;
+      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;
   }
   /**
    * Calculate positions for flag transform
    */
-  static calculateFlagPositions(t, e, s, n) {
-    const o = [];
-    let a = -s.reduce((r, l) => r + l, 0) / 2;
+  static calculateFlagPositions(t, e, o, n) {
+    const s = [];
+    let a = -o.reduce((r, l) => r + l, 0) / 2;
     return e.forEach((r, l) => {
-      const h = s[l], c = a + h / 2, d = c / (n.width / 2), f = Math.abs(d), p = n.amplitude * f, b = p * t.fontSize * Math.sin(n.frequency * Math.PI * d), g = p * n.frequency * Math.PI * Math.cos(n.frequency * Math.PI * d), u = n.amplitude * Math.sign(d) * Math.sin(n.frequency * Math.PI * d), y = g + u;
-      o.push({ x: c, y: b, angle: 0, skewY: y * 0.3 }), a += h;
-    }), o;
+      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;
   }
 }
-class Mt {
+class Ct {
   /**
    * Render snap guides layer
    */
   static renderSnapGuidesLayer(t, e = []) {
-    e.length !== 0 && (t.save(), t.strokeStyle = et(t.canvas), t.lineWidth = rt.canvas.snapGuideWidth, t.setLineDash(rt.canvas.snapGuideDash), e.forEach((s) => {
-      t.beginPath(), s.type === "vertical" ? (t.moveTo(s.x ?? 0, s.y1 ?? 0), t.lineTo(s.x ?? 0, s.y2 ?? 0)) : s.type === "horizontal" ? (t.moveTo(s.x1 ?? 0, s.y ?? 0), t.lineTo(s.x2 ?? 0, s.y ?? 0)) : (t.moveTo(s.x1 ?? 0, s.y1 ?? 0), t.lineTo(s.x2 ?? 0, s.y2 ?? 0)), t.stroke();
+    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();
     }), t.restore());
   }
   /**
    * Render spacing indicators layer
    */
   static renderSpacingIndicatorsLayer(t, e = []) {
-    e.length !== 0 && (t.save(), t.setLineDash([]), e.forEach((s) => {
-      const n = Ot(t.canvas);
-      if (t.strokeStyle = n, t.fillStyle = n, t.lineWidth = rt.canvas.spacingIndicatorWidth, t.beginPath(), s.type === "horizontal") {
-        const o = s.x1 ?? 0, i = s.x2 ?? 0, a = s.y ?? 0;
-        t.moveTo(o, a), t.lineTo(i, a), t.stroke();
+    e.length !== 0 && (t.save(), t.setLineDash([]), e.forEach((o) => {
+      const n = Nt(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();
         const r = 6;
-        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();
+        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();
         const r = 6;
-        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.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.restore());
   }
   /**
    * Render a distance label with background
    */
-  static renderDistanceLabel(t, e, s, n) {
-    const o = `${n}`;
-    t.font = `600 ${rt.canvas.spacingLabelFontSize}px ${rt.canvas.spacingLabelFontFamily}`;
-    const a = t.measureText(o).width, r = rt.canvas.spacingLabelFontSize, l = 4, h = a + l * 2, c = r + l * 2;
-    t.fillStyle = Ot(t.canvas), t.beginPath(), t.roundRect(e - h / 2, s - c / 2, h, c, ue), t.fill(), t.fillStyle = pe, t.textAlign = "center", t.textBaseline = "middle", t.fillText(o, e, s);
+  static renderDistanceLabel(t, e, o, n) {
+    const s = `${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 = Nt(t.canvas), t.beginPath(), t.roundRect(e - h / 2, o - c / 2, h, c, Se), t.fill(), t.fillStyle = me, t.textAlign = "center", t.textBaseline = "middle", t.fillText(s, e, o);
   }
 }
-class Dt {
+class zt {
   /**
    * 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, s, n) {
+  static renderEditModeLayer(t, e, o, n) {
     if (!e || e.transformType === "image" || e.transformType === "group") return;
-    const o = e, { cursorPosition: i, selectionStart: a, selectionEnd: r, editText: l, editRichText: h, cursorOpacity: c, isTouchDevice: d, selectionHandlePositionsRef: f } = s, p = n || 1, b = o.transformType;
-    if (b === "circle" || b === "wave" || b === "arch" || b === "lean" || b === "ascend" || b === "flag") {
-      this.renderTransformEditModeLayer(t, o, s, p);
+    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;
+    if (u === "circle" || u === "wave" || u === "arch" || u === "lean" || u === "ascend" || u === "flag") {
+      this.renderTransformEditModeLayer(t, s, o, b);
       return;
     }
-    const g = o.fontSize || 24, u = o.fontFamily || "Arial", y = o.bold || !1, S = o.italic || !1, m = o.underline || !1, w = o.strikethrough || !1, T = o.textAlign || "center";
-    t.save(), t.translate(o.x, o.y), t.rotate(-o.rotation * Math.PI / 180);
-    const C = jt(g, u, y, S), R = C.height, x = g * 1.2;
-    let P, M, A;
-    if (h && o.transformType === "custom" && o.transformData.width) {
-      const Y = o.transformData.width - gt * 2;
-      A = Y;
-      const k = qt(h);
-      P = [], M = [], k.forEach((H) => {
-        const X = Ut(H, Y, {
-          fontSize: o.fontSize,
-          fontFamily: o.fontFamily,
-          bold: o.bold,
-          italic: o.italic
+    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", C = s.letterSpacing ?? 0;
+    t.save(), t.translate(s.x, s.y), t.rotate(-s.rotation * Math.PI / 180);
+    const R = Jt(p, g, y, S), x = R.height, H = p * (s.lineHeight ?? 1.2);
+    let M, A, I;
+    if (h && s.transformType === "custom" && s.transformData.width) {
+      const B = s.transformData.width - pt * 2;
+      I = B;
+      const k = Qt(h);
+      M = [], A = [], k.forEach((O) => {
+        const G = te(O, B, {
+          fontSize: s.fontSize,
+          fontFamily: s.fontFamily,
+          bold: s.bold,
+          italic: s.italic,
+          letterSpacing: s.letterSpacing
         });
-        X.forEach((I, z) => {
-          P.push(I), M.push({
-            isParagraphStart: z === 0,
-            isParagraphEnd: z === X.length - 1
+        G.forEach((P, _) => {
+          M.push(P), A.push({
+            isParagraphStart: _ === 0,
+            isParagraphEnd: _ === G.length - 1
           });
         });
       });
     } else
-      P = l.split(`
+      M = l.split(`
 `).map((k) => [
         {
           text: k,
-          style: { fontSize: g, fontFamily: u, bold: y, italic: S }
+          style: { fontSize: p, fontFamily: g, bold: y, italic: S }
         }
-      ]), M = P.map(() => ({
+      ]), A = M.map(() => ({
         isParagraphStart: !0,
         // Each line is its own paragraph
         isParagraphEnd: !0
       }));
-    const B = P.length > 1 ? C.height + (P.length - 1) * x : C.height;
-    let L = -B / 2, W = 0, O = L, D = R;
-    const Q = [];
+    const L = M.length > 1 ? R.height + (M.length - 1) * H : R.height;
+    let D = -L / 2, F = 0, W = D, q = x;
+    const J = [];
     let E = 0;
-    P.forEach((Y, k) => {
-      var z, G;
-      const H = M[k].isParagraphStart, X = M[k].isParagraphEnd, I = [];
-      Y.forEach((st) => {
-        Array.from(st.text).forEach((U) => {
-          let F = g, nt = u, ot = y, Z = S;
+    M.forEach((B, k) => {
+      var _, j;
+      const O = A[k].isParagraphStart, G = A[k].isParagraphEnd, P = [];
+      B.forEach((ot) => {
+        Array.from(ot.text).forEach((lt) => {
+          let Y = p, ht = g, it = y, U = S, st = C;
           if (h && E < l.length) {
-            const J = h.getStyleAt(E);
-            F = J.fontSize || g, nt = J.fontFamily || u, ot = J.bold !== void 0 ? J.bold : y, Z = J.italic !== void 0 ? J.italic : S;
+            const Z = h.getStyleAt(E);
+            Y = Z.fontSize || p, ht = Z.fontFamily || g, it = Z.bold !== void 0 ? Z.bold : y, U = Z.italic !== void 0 ? Z.italic : S, st = Z.letterSpacing !== void 0 ? Z.letterSpacing : C;
           }
           t.save();
-          const it = ot ? "bold" : "normal", V = Z ? "italic" : "normal";
-          t.font = `${V} ${it} ${F}px "${nt}", Arial, sans-serif`;
-          const q = t.measureText(U).width;
-          t.restore(), I.push({ char: U, width: q, fontSize: F, index: E }), E++;
+          const V = it ? "bold" : "normal", $ = U ? "italic" : "normal";
+          t.font = `${$} ${V} ${Y}px "${ht}", Arial, sans-serif`;
+          const at = t.measureText(lt).width + st;
+          t.restore(), P.push({ char: lt, width: at, fontSize: Y, index: E }), E++;
         });
       });
       {
-        const st = k === 0, lt = k === P.length - 1, U = I.map((V) => V.char).join(""), F = ((z = U.match(/^ +/)) == null ? void 0 : z[0].length) || 0, nt = ((G = U.match(/ +$/)) == null ? void 0 : G[0].length) || 0;
-        let ot = 0;
-        for (let V = 0; V < I.length; V++)
-          !st && V < F || !lt && V >= I.length - nt || (ot += I[V].width);
-        let Z;
-        T === "center" ? Z = -ot / 2 : T === "right" ? Z = A !== void 0 ? A / 2 - ot : -ot : Z = A !== void 0 ? -A / 2 : 0;
-        let it = Z;
-        for (let V = 0; V < I.length; V++) {
-          const q = I[V];
-          Q[q.index] = {
-            x: it,
-            y: L,
-            width: q.width,
+        const ot = k === 0, et = k === M.length - 1, lt = P.map((V) => V.char).join(""), Y = ((_ = lt.match(/^ +/)) == null ? void 0 : _[0].length) || 0, ht = ((j = lt.match(/ +$/)) == null ? void 0 : j[0].length) || 0;
+        let it = 0;
+        for (let V = 0; V < P.length; V++)
+          !ot && V < Y || !et && V >= P.length - ht || (it += P[V].width);
+        let U;
+        T === "center" ? U = -it / 2 : T === "right" ? U = I !== void 0 ? I / 2 - it : -it : U = I !== void 0 ? -I / 2 : 0;
+        let st = U;
+        for (let V = 0; V < P.length; V++) {
+          const $ = P[V];
+          J[$.index] = {
+            x: st,
+            y: D,
+            width: $.width,
             // All characters keep their width for cursor navigation
-            height: q.fontSize
-          }, it += q.width;
+            height: $.fontSize
+          }, st += $.width;
         }
-        if (I.length > 0) {
-          const V = I[0].index, q = I[I.length - 1].index, ft = k < P.length - 1 && q + 1 === E ? q : q + 1;
-          if (i >= V && i <= ft)
+        if (P.length > 0) {
+          const V = P[0].index, $ = P[P.length - 1].index, ut = k < M.length - 1 && $ + 1 === E ? $ : $ + 1;
+          if (i >= V && i <= ut)
             if (i === V)
-              W = Z, O = L, D = R;
+              F = U, W = D, q = x;
             else {
-              let pt = 0;
-              for (let at = 0; at < I.length && I[at].index < i; at++) {
-                const ht = I[at], Ct = ht.char === " ";
-                let yt = !0;
-                if (Ct) {
-                  const Rt = at < F, N = at >= I.length - nt, Tt = !H && F > 0, wt = !X && nt > 0;
-                  yt = !(Rt && Tt || N && wt);
+              let yt = 0;
+              for (let rt = 0; rt < P.length && P[rt].index < i; rt++) {
+                const dt = P[rt], bt = dt.char === " ";
+                let St = !0;
+                if (bt) {
+                  const kt = rt < Y, X = rt >= P.length - ht, vt = !O && Y > 0, Mt = !G && ht > 0;
+                  St = !(kt && vt || X && Mt);
                 }
-                yt && (pt += ht.width);
+                St && (yt += dt.width);
               }
-              W = Z + pt, O = L, D = R;
+              F = U + yt, W = D, q = x;
             }
         }
-        k < P.length - 1 && (L += x);
+        k < M.length - 1 && (D += H);
       }
     });
-    const j = a !== r;
-    let _ = null, $ = null;
-    if (j) {
-      const Y = Math.min(a, r), k = Math.max(a, r);
-      t.save(), t.fillStyle = ye(t.canvas);
-      let H = 0, X = -B / 2;
-      if (P.forEach((I, z) => {
-        var nt, ot;
-        const G = M[z].isParagraphStart, st = M[z].isParagraphEnd, lt = z === 0, U = z === P.length - 1, F = [];
-        if (I.forEach((Z) => {
-          Array.from(Z.text).forEach((it) => {
-            const V = Z.style || {}, q = V.fontSize !== void 0 ? V.fontSize : g, J = V.fontFamily !== void 0 ? V.fontFamily : u, ut = V.bold !== void 0 ? V.bold : y, ft = V.italic !== void 0 ? V.italic : S;
+    const z = a !== r;
+    let N = null, Q = null;
+    if (z) {
+      const B = Math.min(a, r), k = Math.max(a, r);
+      t.save(), t.fillStyle = Te(t.canvas);
+      let O = 0, G = -L / 2;
+      if (M.forEach((P, _) => {
+        var ht, it;
+        const j = A[_].isParagraphStart, ot = A[_].isParagraphEnd, et = _ === 0, lt = _ === M.length - 1, Y = [];
+        if (P.forEach((U) => {
+          Array.from(U.text).forEach((st) => {
+            const V = U.style || {}, $ = V.fontSize !== void 0 ? V.fontSize : p, at = V.fontFamily !== void 0 ? V.fontFamily : g, Z = V.bold !== void 0 ? V.bold : y, ut = V.italic !== void 0 ? V.italic : S, yt = V.letterSpacing !== void 0 ? V.letterSpacing : C;
             t.save();
-            const pt = ut ? "bold" : "normal", at = ft ? "italic" : "normal";
-            t.font = `${at} ${pt} ${q}px "${J}", Arial, sans-serif`;
-            const ht = t.measureText(it).width;
-            t.restore(), F.push({ char: it, index: H, width: ht, style: V }), H++;
+            const rt = Z ? "bold" : "normal", dt = ut ? "italic" : "normal";
+            t.font = `${dt} ${rt} ${$}px "${at}", Arial, sans-serif`;
+            const bt = t.measureText(st).width + yt;
+            t.restore(), Y.push({ char: st, index: O, width: bt, style: V }), O++;
           });
-        }), F.length > 0) {
-          const Z = F[0].index, it = F[F.length - 1].index;
-          if (k > Z && Y <= it) {
+        }), Y.length > 0) {
+          const U = Y[0].index, st = Y[Y.length - 1].index;
+          if (k > U && B <= st) {
             t.save();
-            const V = F.map((N) => N.char).join(""), q = ((nt = V.match(/^ +/)) == null ? void 0 : nt[0].length) || 0, J = ((ot = V.match(/ +$/)) == null ? void 0 : ot[0].length) || 0;
+            const V = Y.map((X) => X.char).join(""), $ = ((ht = V.match(/^ +/)) == null ? void 0 : ht[0].length) || 0, at = ((it = V.match(/ +$/)) == null ? void 0 : it[0].length) || 0;
+            let Z = 0;
+            for (let X = 0; X < Y.length; X++)
+              !et && X < $ || !lt && X >= Y.length - at || (Z += Y[X].width);
             let ut = 0;
-            for (let N = 0; N < F.length; N++)
-              !lt && N < q || !U && N >= F.length - J || (ut += F[N].width);
-            let ft = 0;
-            T === "center" ? ft = -ut / 2 : T === "right" && (ft = -ut);
-            const pt = Math.max(Y, Z), at = Math.min(k, it + 1);
-            let ht = 0;
-            for (let N = 0; N < F.length && F[N].index < pt; N++) {
-              const Tt = F[N], wt = N < q, At = N >= F.length - J, Et = !G && q > 0, It = !st && J > 0;
-              !(wt && Et || At && It) && (ht += Tt.width);
+            T === "center" ? ut = -Z / 2 : T === "right" && (ut = -Z);
+            const yt = Math.max(B, U), rt = Math.min(k, st + 1);
+            let dt = 0;
+            for (let X = 0; X < Y.length && Y[X].index < yt; X++) {
+              const vt = Y[X], Mt = X < $, Ht = X >= Y.length - at, It = !j && $ > 0, Bt = !ot && at > 0;
+              !(Mt && It || Ht && Bt) && (dt += vt.width);
             }
-            let Ct = 0;
-            for (let N = 0; N < F.length && F[N].index < at; N++) {
-              const Tt = F[N], wt = N < q, At = N >= F.length - J, Et = !G && q > 0, It = !st && J > 0;
-              !(wt && Et || At && It) && (Ct += Tt.width);
+            let bt = 0;
+            for (let X = 0; X < Y.length && Y[X].index < rt; X++) {
+              const vt = Y[X], Mt = X < $, Ht = X >= Y.length - at, It = !j && $ > 0, Bt = !ot && at > 0;
+              !(Mt && It || Ht && Bt) && (bt += vt.width);
             }
-            const yt = ft + ht, Rt = Ct - ht;
-            t.fillRect(yt, X, Rt, R), _ === null && (_ = { x: yt, y: X }), $ = { x: yt + Rt, y: X + R }, t.restore();
+            const St = ut + dt, kt = bt - dt;
+            t.fillRect(St, G, kt, x), N === null && (N = { x: St, y: G }), Q = { x: St + kt, y: G + x }, t.restore();
           }
         }
-        z < P.length - 1 && (X += x);
+        _ < M.length - 1 && (G += H);
       }), t.restore(), h) {
         t.save();
-        const I = o.transformType === "custom" ? o.transformData : null, z = I != null && I.width ? I.width - gt * 2 : void 0;
-        we(t, h, {
-          fontSize: g,
-          fontFamily: u,
-          color: o.color || "#000000",
+        const P = s.transformType === "custom" ? s.transformData : null, _ = P != null && P.width ? P.width - pt * 2 : void 0;
+        Ce(t, h, {
+          fontSize: p,
+          fontFamily: g,
+          color: s.color || "#000000",
           bold: y,
           italic: S,
           underline: m,
           strikethrough: w,
-          textAlign: T
-        }, z), t.restore();
+          textAlign: T,
+          letterSpacing: s.letterSpacing,
+          lineHeight: s.lineHeight
+        }, _), t.restore();
       }
     }
-    if (j && d && _ && $) {
-      const Y = _, k = $, H = 6 / p, X = 2 / p;
+    if (z && d && N && Q) {
+      const B = N, k = Q, O = 6 / b, G = 2 / b;
       t.save();
-      const I = et(t.canvas);
-      t.fillStyle = I, t.strokeStyle = I, t.lineWidth = X, t.lineCap = "round";
-      const z = { x: Y.x, y: Y.y - H }, G = { x: k.x, y: k.y + H };
-      t.beginPath(), t.moveTo(Y.x, Y.y), t.lineTo(Y.x, Y.y + R), t.stroke(), t.beginPath(), t.arc(z.x, z.y, H, 0, Math.PI * 2), t.fill(), t.strokeStyle = "white", t.lineWidth = 2 / p, t.stroke(), t.strokeStyle = I, t.lineWidth = X, t.beginPath(), t.moveTo(k.x, k.y - R), t.lineTo(k.x, k.y), t.stroke(), t.beginPath(), t.arc(G.x, G.y, H, 0, Math.PI * 2), t.fill(), t.strokeStyle = "white", t.lineWidth = 2 / p, t.stroke(), t.restore(), f && (f.current = {
+      const P = nt(t.canvas);
+      t.fillStyle = P, t.strokeStyle = P, t.lineWidth = G, t.lineCap = "round";
+      const _ = { x: B.x, y: B.y - O }, j = { x: k.x, y: k.y + O };
+      t.beginPath(), t.moveTo(B.x, B.y), t.lineTo(B.x, B.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 = P, t.lineWidth = G, t.beginPath(), t.moveTo(k.x, k.y - x), t.lineTo(k.x, k.y), t.stroke(), t.beginPath(), t.arc(j.x, j.y, O, 0, Math.PI * 2), t.fill(), t.strokeStyle = "white", t.lineWidth = 2 / b, t.stroke(), t.restore(), f && (f.current = {
         start: {
-          center: z,
-          textEdge: Y
+          center: _,
+          textEdge: B
           // Original selection edge (top-left of selection on first line)
         },
         end: {
-          center: G,
+          center: j,
           textEdge: k
           // Original selection edge (bottom-right of selection on last line)
         }
       });
     } else f && (f.current = { start: null, end: null });
-    !j && c > 0 && (t.save(), t.globalAlpha = c, t.strokeStyle = et(t.canvas), t.lineWidth = 3 / p, t.lineCap = "round", t.beginPath(), t.moveTo(W, O), t.lineTo(W, O + D), t.stroke(), t.restore()), t.restore();
+    !z && c > 0 && (t.save(), t.globalAlpha = c, t.strokeStyle = nt(t.canvas), t.lineWidth = 3 / b, t.lineCap = "round", t.beginPath(), t.moveTo(F, W), t.lineTo(F, W + q), t.stroke(), t.restore()), t.restore();
   }
   /**
    * Render edit mode features for transformed text (circle, wave, arch, etc.)
    * Renders cursor along the transform path
    */
-  static renderTransformEditModeLayer(t, e, 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;
+  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;
     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), p = f.map((g) => t.measureText(g).width), b = _t.calculateCharPositions(e, f, p);
-    if (o >= 0 && o <= f.length && i > 0) {
-      let g;
-      if (o === 0)
-        if (b.length > 0) {
-          const y = b[0], S = p[0];
-          g = {
+    const f = Array.from(e.text), b = f.map((p) => t.measureText(p).width), u = Vt.calculateCharPositions(e, f, b);
+    if (s >= 0 && s <= f.length && i > 0) {
+      let p;
+      if (s === 0)
+        if (u.length > 0) {
+          const y = u[0], S = b[0];
+          p = {
             x: y.x - Math.cos(y.angle) * (S / 2),
             y: y.y - Math.sin(y.angle) * (S / 2),
             angle: y.angle
           };
         } else
-          g = { x: 0, y: 0, angle: 0 };
-      else if (o >= b.length) {
-        const y = b[b.length - 1], S = p[p.length - 1];
-        g = {
+          p = { x: 0, y: 0, angle: 0 };
+      else if (s >= u.length) {
+        const y = u[u.length - 1], S = b[b.length - 1];
+        p = {
           x: y.x + Math.cos(y.angle) * (S / 2),
           y: y.y + Math.sin(y.angle) * (S / 2),
           angle: y.angle
         };
       } else {
-        const y = b[o], S = p[o];
-        g = {
+        const y = u[s], S = b[s];
+        p = {
           x: y.x - Math.cos(y.angle) * (S / 2),
           y: y.y - Math.sin(y.angle) * (S / 2),
           angle: y.angle
         };
       }
-      t.save(), t.translate(g.x, g.y), t.rotate(g.angle), t.globalAlpha = i, t.strokeStyle = et(t.canvas), t.lineWidth = 2 / n;
-      const u = a * 1.2;
-      t.beginPath(), t.moveTo(0, -u / 2), t.lineTo(0, u / 2), t.stroke(), t.restore();
+      t.save(), t.translate(p.x, p.y), t.rotate(p.angle), t.globalAlpha = i, t.strokeStyle = nt(t.canvas), t.lineWidth = 2 / n;
+      const g = a * 1.2;
+      t.beginPath(), t.moveTo(0, -g / 2), t.lineTo(0, g / 2), t.stroke(), t.restore();
     }
     t.restore();
   }
@@ -2926,29 +2938,29 @@ class Dt {
    * Render crop box layer (for images in crop mode)
    * Shows both image resize handles and crop handles
    */
-  static renderCropBoxLayer(t, e, s, n = 1) {
-    if (!(e instanceof be) || !e.isCropping) return;
-    const o = e, i = o.getCropBoxBounds();
+  static renderCropBoxLayer(t, e, o, n = 1) {
+    if (!(e instanceof we) || !e.isCropping) return;
+    const s = e, i = s.getCropBoxBounds();
     if (!i) return;
-    const a = 4 / n, r = 2 / n, l = Se / n, h = me / n, c = 1 / n;
-    t.save(), t.translate(e.x * n, e.y * n), t.rotate(dt.toRadians(e.rotation));
-    const d = o.transformData.flipHorizontal ? -1 : 1, f = o.transformData.flipVertical ? -1 : 1;
+    const a = 4 / n, r = 2 / n, l = ve / n, h = Me / 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;
     t.scale(d * n, f * n);
-    const p = o.transformData.width * o.transformData.cropWidth, b = o.transformData.height * o.transformData.cropHeight, g = o.transformData.width / 2 - (o.transformData.cropX * o.transformData.width + p / 2), u = o.transformData.height / 2 - (o.transformData.cropY * o.transformData.height + b / 2), y = o.transformData.width / 2, S = o.transformData.height / 2, m = {
-      x: g - y,
-      y: u - S,
-      width: o.transformData.width,
-      height: o.transformData.height
+    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 = {
+      x: p - y,
+      y: g - S,
+      width: s.transformData.width,
+      height: s.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 C = i.x + i.width, R = m.x + m.width;
-    C < R && t.fillRect(C, i.y, R - C, i.height), t.strokeStyle = et(t.canvas), t.lineWidth = r, t.strokeRect(i.x, i.y, i.width, i.height), t.strokeStyle = "rgba(255, 255, 255, 0.5)", t.lineWidth = c;
+    C < R && t.fillRect(C, i.y, R - C, 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 x = i.width / 3;
     t.beginPath(), t.moveTo(i.x + x, i.y), t.lineTo(i.x + x, i.y + i.height), t.moveTo(i.x + 2 * x, i.y), t.lineTo(i.x + 2 * x, i.y + i.height), t.stroke();
-    const P = i.height / 3;
-    if (t.beginPath(), t.moveTo(i.x, i.y + P), t.lineTo(i.x + i.width, i.y + P), t.moveTo(i.x, i.y + 2 * P), t.lineTo(i.x + i.width, i.y + 2 * P), t.stroke(), [
+    const H = i.height / 3;
+    if (t.beginPath(), t.moveTo(i.x, i.y + H), t.lineTo(i.x + i.width, i.y + H), t.moveTo(i.x, i.y + 2 * H), t.lineTo(i.x + i.width, i.y + 2 * H), t.stroke(), [
       { x: i.x, y: i.y },
       // top-left
       { x: i.x + i.width, y: i.y },
@@ -2957,8 +2969,8 @@ class Dt {
       // bottom-right
       { x: i.x, y: i.y + i.height }
       // bottom-left
-    ].forEach((B) => {
-      t.beginPath(), t.arc(B.x, B.y, l + 1 / n, 0, Math.PI * 2), t.fillStyle = "#bbb", t.fill(), t.beginPath(), t.arc(B.x, B.y, l, 0, Math.PI * 2), t.fillStyle = "#fff", t.fill();
+    ].forEach((I) => {
+      t.beginPath(), t.arc(I.x, I.y, l + 1 / n, 0, Math.PI * 2), t.fillStyle = "#bbb", t.fill(), t.beginPath(), t.arc(I.x, I.y, l, 0, Math.PI * 2), t.fillStyle = "#fff", t.fill();
     }), [
       { x: i.x + i.width / 2, y: i.y, orientation: "horizontal" },
       // top
@@ -2968,32 +2980,32 @@ class Dt {
       // left
       { x: i.x + i.width, y: i.y + i.height / 2, orientation: "vertical" }
       // right
-    ].forEach((B) => {
-      let L, W;
-      B.orientation === "horizontal" ? (L = h, W = a) : (L = a, W = h);
-      const O = B.x - L / 2, D = B.y - W / 2;
-      t.fillStyle = "#fff", t.fillRect(O, D, L, W), t.strokeStyle = "#bbb", t.lineWidth = c, t.strokeRect(O, D, L, W);
-    }), t.restore(), s && s.resizeHandles) {
-      const B = s.resizeHandles.filter(
-        (D) => D.anchor === "top-left" || D.anchor === "top-right" || D.anchor === "bottom-left" || D.anchor === "bottom-right"
-      ), L = o.getCropBoxWorldCorners(), W = 6, O = 20;
-      B.forEach((D) => {
-        let Q = !1;
+    ].forEach((I) => {
+      let L, D;
+      I.orientation === "horizontal" ? (L = h, D = a) : (L = a, D = h);
+      const F = I.x - L / 2, W = I.y - D / 2;
+      t.fillStyle = "#fff", t.fillRect(F, W, L, D), t.strokeStyle = "#bbb", t.lineWidth = c, t.strokeRect(F, W, L, D);
+    }), t.restore(), o && o.resizeHandles) {
+      const I = o.resizeHandles.filter(
+        (W) => W.anchor === "top-left" || W.anchor === "top-right" || W.anchor === "bottom-left" || W.anchor === "bottom-right"
+      ), L = s.getCropBoxWorldCorners(), D = 6, F = 20;
+      I.forEach((W) => {
+        let q = !1;
         if (L)
-          for (const E of L) {
-            const j = D.x - E.x, _ = D.y - E.y;
-            if (Math.sqrt(j * j + _ * _) < O) {
-              Q = !0;
+          for (const J of L) {
+            const E = W.x - J.x, z = W.y - J.y;
+            if (Math.sqrt(E * E + z * z) < F) {
+              q = !0;
               break;
             }
           }
-        Q || (t.save(), t.globalAlpha = 1, t.beginPath(), t.arc(D.x * n, D.y * n, W, 0, 2 * Math.PI), t.fillStyle = "#fff", t.fill(), t.strokeStyle = et(t.canvas), t.lineWidth = 2, t.stroke(), t.restore());
+        q || (t.save(), t.globalAlpha = 1, t.beginPath(), t.arc(W.x * n, W.y * n, D, 0, 2 * Math.PI), t.fillStyle = "#fff", t.fill(), t.strokeStyle = nt(t.canvas), t.lineWidth = 2, t.stroke(), t.restore());
       });
     }
   }
 }
-Ce();
-const Oe = $t("CanvasRenderer"), K = class K {
+Ae();
+const Ne = Zt("CanvasRenderer"), K = class K {
   /**
    * Get a pooled offscreen canvas for clipping content, only recreating
    * when dimensions change. Eliminates per-frame canvas allocation.
@@ -3012,12 +3024,12 @@ const Oe = $t("CanvasRenderer"), K = class K {
    * Safely render an element, catching errors so one element's failure
    * doesn't crash the entire canvas render loop.
    */
-  static safeRender(t, e, s, n) {
+  static safeRender(t, e, o, n) {
     try {
-      e.render(t, s, n);
-    } catch (o) {
-      const i = o instanceof Error ? o : new Error(String(o));
-      Oe.error(`Failed to render element ${e.id}:`, i), K.onRenderError && K.onRenderError({
+      e.render(t, o, n);
+    } catch (s) {
+      const i = s instanceof Error ? s : new Error(String(s));
+      Ne.error(`Failed to render element ${e.id}:`, i), K.onRenderError && K.onRenderError({
         category: "render",
         message: `Failed to render element: ${i.message}`,
         originalError: i,
@@ -3033,8 +3045,8 @@ const Oe = $t("CanvasRenderer"), K = class K {
    * Helper function to render an element (using actual element instance, not config)
    * Used by knockout rendering system
    */
-  static renderElement(t, e, s = !0) {
-    s && (t.save(), t.globalAlpha = tt), e.render(t, !1, !1), s && t.restore();
+  static renderElement(t, e, o = !0) {
+    o && (t.save(), t.globalAlpha = tt), e.render(t, !1, !1), o && t.restore();
   }
   /**
    * Apply artboard clip path to the context, respecting clipShape.
@@ -3042,22 +3054,22 @@ const Oe = $t("CanvasRenderer"), K = class K {
    * Caller must call ctx.beginPath() before this if needed.
    */
   static applyArtboardClipPath(t, e) {
-    const { x: s, y: n, width: o, height: i, clipShape: a } = e, r = e.borderRadius || 0;
+    const { x: o, y: n, width: s, height: i, clipShape: a } = e, r = e.borderRadius || 0;
     if (t.beginPath(), !a || a === "rectangle")
-      r > 0 ? t.roundRect(s, n, o, i, r) : t.rect(s, n, o, i);
+      r > 0 ? t.roundRect(o, n, s, i, r) : t.rect(o, n, s, i);
     else if (a === "circle") {
-      const l = s + o / 2, h = n + i / 2, c = Math.min(o, i) / 2;
+      const l = o + s / 2, h = n + i / 2, c = Math.min(s, 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(o, i) / 2);
-      t.roundRect(s, n, o, i, l);
+      const l = Math.min(a.radius, Math.min(s, i) / 2);
+      t.roundRect(o, n, s, i, l);
     } else if (typeof a == "object" && a.type === "path")
       try {
         const l = new Path2D(a.d);
-        t.translate(s, n), t.clip(l), t.translate(-s, -n);
+        t.translate(o, n), t.clip(l), t.translate(-o, -n);
         return;
       } catch {
-        t.rect(s, n, o, i);
+        t.rect(o, n, s, i);
       }
     else if (typeof a == "object" && a.type === "composite-path")
       try {
@@ -3065,15 +3077,15 @@ const Oe = $t("CanvasRenderer"), K = class K {
         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 p = (h.baseWidth ?? 0) / 2, b = (h.baseHeight ?? 0) / 2, g = d === 90 || d === 270, u = g ? h.baseHeight ?? 0 : h.baseWidth ?? 0, y = g ? h.baseWidth ?? 0 : h.baseHeight ?? 0;
-            f.translateSelf(u / 2, y / 2), f.rotateSelf(d), f.translateSelf(-p, -b);
+            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);
           }
           l.addPath(c, f);
         }
-        t.translate(s, n), t.clip(l), t.translate(-s, -n);
+        t.translate(o, n), t.clip(l), t.translate(-o, -n);
         return;
       } catch {
-        t.rect(s, n, o, i);
+        t.rect(o, n, s, i);
       }
     t.clip();
   }
@@ -3081,25 +3093,25 @@ const Oe = $t("CanvasRenderer"), K = class K {
    * Render an element with overflow dimming - parts outside the artboard render at 30% opacity
    * Uses two-pass rendering: first at 30% opacity (overflow), then clipped to artboard at 100% (inside)
    */
-  static renderElementWithOverflowDimming(t, e, s, n, o, i) {
-    const a = t.getTransform(), r = s.borderRadius || 0;
+  static renderElementWithOverflowDimming(t, e, o, n, s, i) {
+    const a = t.getTransform(), r = o.borderRadius || 0;
     t.save(), t.globalAlpha = 0.3 * (i ? tt : 1), t.filter = "blur(4px)", t.beginPath();
-    const h = t.getTransform().inverse(), c = t.canvas.width, d = t.canvas.height, f = new DOMPoint(0, 0).matrixTransform(h), p = new DOMPoint(c, d).matrixTransform(h), b = Math.max(p.x - f.x, p.y - f.y), g = f.x - b, u = f.y - b, y = p.x + b, S = p.y + b, m = typeof s.clipShape == "object" && s.clipShape !== null && s.clipShape.type === "composite-path" ? s.clipShape : null;
+    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;
     if (m) {
       const w = new Path2D();
-      w.rect(g, u, y - g, S - u);
+      w.rect(p, g, y - p, S - g);
       for (const T of m.pieces) {
         const C = new Path2D(T.d), R = T.rotation ?? 0, x = new DOMMatrix();
-        if (x.translateSelf(s.x + T.x, s.y + T.y), R !== 0) {
-          const P = (T.baseWidth ?? 0) / 2, M = (T.baseHeight ?? 0) / 2, A = R === 90 || R === 270, B = A ? T.baseHeight ?? 0 : T.baseWidth ?? 0, L = A ? T.baseWidth ?? 0 : T.baseHeight ?? 0;
-          x.translateSelf(B / 2, L / 2), x.rotateSelf(R), x.translateSelf(-P, -M);
+        if (x.translateSelf(o.x + T.x, o.y + T.y), R !== 0) {
+          const H = (T.baseWidth ?? 0) / 2, M = (T.baseHeight ?? 0) / 2, A = R === 90 || R === 270, I = A ? T.baseHeight ?? 0 : T.baseWidth ?? 0, L = A ? T.baseWidth ?? 0 : T.baseHeight ?? 0;
+          x.translateSelf(I / 2, L / 2), x.rotateSelf(R), x.translateSelf(-H, -M);
         }
         w.addPath(C, x);
       }
       t.clip(w, "evenodd");
     } else
-      t.rect(g, u, y - g, S - u), r > 0 ? t.roundRect(s.x, s.y, s.width, s.height, r) : t.rect(s.x, s.y, s.width, s.height), t.clip("evenodd");
-    e.render(t, !1, !1), t.restore(), t.save(), this.applyArtboardClipPath(t, s), i && (t.globalAlpha = tt), e.render(t, n, o), t.restore(), t.setTransform(a);
+      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);
   }
   /**
    * Render all elements layer
@@ -3110,108 +3122,108 @@ const Oe = $t("CanvasRenderer"), K = class K {
    *   a coloured halo rather than useful UX. Selected/hovered elements fall through to the
    *   clipped-only branch which respects `clipShape` correctly.
    */
-  static renderElementsLayer(t, e, s, n, o, i, a, r = !0, l = !1, h = !1) {
-    const c = o != null && o.getMode() === "drag", d = o == null ? void 0 : o._activeChildContext;
-    e !== K._cachedElementsRef && (K._cachedElementConfigs = e.map((u) => u.toJSON()), K._cachedElementMap = new Map(e.map((u) => [u.id, u])), K._cachedElementsRef = e);
-    const f = K._cachedElementConfigs, p = K._cachedElementMap, b = K._knockoutRenderedIds;
-    b.clear(), e.forEach((u, y) => {
+  static renderElementsLayer(t, e, o, n, s, i, a, r = !0, l = !1, h = !1) {
+    const c = s != null && s.getMode() === "drag", d = s == null ? void 0 : s._activeChildContext;
+    e !== K._cachedElementsRef && (K._cachedElementConfigs = e.map((g) => g.toJSON()), K._cachedElementMap = new Map(e.map((g) => [g.id, g])), K._cachedElementsRef = e);
+    const f = K._cachedElementConfigs, b = K._cachedElementMap, u = K._knockoutRenderedIds;
+    u.clear(), e.forEach((g, y) => {
       var S, m, w;
-      if (u.blendMode === "knockout" || u.blendMode === "clip") {
-        const T = f[y], C = u.blendMode === "knockout" ? "destination-out" : "destination-in", R = ((S = T.knockoutParts) == null ? void 0 : S.scope) || "group", x = f.findIndex((B) => B.id === T.id), P = ((m = T.knockoutParts) == null ? void 0 : m.fill) || ((w = T.knockoutParts) == null ? void 0 : w.stroke), M = R === "artboard" && x !== -1 ? f.slice(0, x) : [];
-        P && (R === "artboard" || M.length > 0) && (M.forEach((B) => B.id && b.add(B.id)), ve(
+      if (g.blendMode === "knockout" || g.blendMode === "clip") {
+        const T = f[y], C = g.blendMode === "knockout" ? "destination-out" : "destination-in", R = ((S = T.knockoutParts) == null ? void 0 : S.scope) || "group", x = f.findIndex((I) => I.id === T.id), H = ((m = T.knockoutParts) == null ? void 0 : m.fill) || ((w = T.knockoutParts) == null ? void 0 : w.stroke), M = R === "artboard" && x !== -1 ? f.slice(0, x) : [];
+        H && (R === "artboard" || M.length > 0) && (M.forEach((I) => I.id && u.add(I.id)), Re(
           t,
           T,
           f,
-          (B, L) => {
-            const W = L.id && p.get(L.id);
-            W && this.renderElement(B, W, r);
+          (I, L) => {
+            const D = L.id && b.get(L.id);
+            D && this.renderElement(I, D, r);
           },
           i,
           a,
           C
-        ), b.add(u.id));
+        ), u.add(g.id));
       }
-    }), e.some((u) => !b.has(u.id) && u.isClipping) ? this._renderWithClipping(
+    }), e.some((g) => !u.has(g.id) && g.isClipping) ? this._renderWithClipping(
       t,
       e,
-      b,
-      s,
+      u,
+      o,
       n,
       c,
       d,
       f,
       r
-    ) : e.forEach((u) => {
+    ) : e.forEach((g) => {
       var R, x;
-      if (b.has(u.id) || u.visible === !1) return;
-      const y = u.id === s, S = (n == null ? void 0 : n.type) === "element" && ((R = n == null ? void 0 : n.data) == null ? void 0 : R.id) === u.id, m = c && d && Lt(u) && u.id === s, w = y && !m, T = f[e.indexOf(u)], C = ((x = T == null ? void 0 : T.distressEffect) == null ? void 0 : x.enabled) && T.distressEffect.style === "custom" && T.distressEffect.textureUrl;
+      if (u.has(g.id) || g.visible === !1) return;
+      const y = g.id === o, S = (n == null ? void 0 : n.type) === "element" && ((R = n == null ? void 0 : n.data) == null ? void 0 : R.id) === g.id, m = c && d && Dt(g) && g.id === o, w = y && !m, T = f[e.indexOf(g)], C = ((x = T == null ? void 0 : T.distressEffect) == null ? void 0 : x.enabled) && T.distressEffect.style === "custom" && T.distressEffect.textureUrl;
       if (T && T.masks && T.masks.length > 0)
-        kt(t, T, (P) => {
+        At(t, T, (H) => {
           const M = (A) => {
-            r && (A.save(), A.globalAlpha = tt), this.safeRender(A, u, w, S), r && A.restore();
+            r && (A.save(), A.globalAlpha = tt), this.safeRender(A, g, w, S), r && A.restore();
           };
           if (C) {
-            const A = u.getVisualBoundingBox();
-            Yt(P, T.distressEffect, A, M);
+            const A = g.getVisualBoundingBox();
+            Kt(H, T.distressEffect, A, M);
           } else
-            M(P);
+            M(H);
         });
       else if (C) {
-        const P = u.getVisualBoundingBox();
-        Yt(t, T.distressEffect, P, (M) => {
-          r && (M.save(), M.globalAlpha = tt), this.safeRender(M, u, w, S), r && M.restore();
+        const H = g.getVisualBoundingBox();
+        Kt(t, T.distressEffect, H, (M) => {
+          r && (M.save(), M.globalAlpha = tt), this.safeRender(M, g, w, S), r && M.restore();
         });
-      } else l && !h && a && w ? this.renderElementWithOverflowDimming(t, u, a, w, S, r) : l && a ? (t.save(), this.applyArtboardClipPath(t, a), r && (t.globalAlpha = tt), this.safeRender(t, u, w, S), t.restore()) : (r && (t.save(), t.globalAlpha = tt), this.safeRender(t, u, w, S), r && t.restore());
+      } else l && !h && a && w ? this.renderElementWithOverflowDimming(t, g, a, w, S, r) : l && a ? (t.save(), this.applyArtboardClipPath(t, a), r && (t.globalAlpha = tt), this.safeRender(t, g, w, S), t.restore()) : (r && (t.save(), t.globalAlpha = tt), this.safeRender(t, g, w, S), r && t.restore());
     });
   }
   /**
    * Render elements with clipping mask support at artboard level
    * Elements with isClipping=true clip all elements below them
    */
-  static _renderWithClipping(t, e, s, n, o, i, a, r, l = !0) {
-    var u;
-    const h = t.canvas, c = h.width, d = h.height, f = t.getTransform(), p = [];
-    let b = [], g = [];
+  static _renderWithClipping(t, e, o, n, s, 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];
-      s.has(S.id) || S.visible !== !1 && (S.isClipping ? b.length > 0 ? (p.push({
-        content: b,
+      o.has(S.id) || S.visible !== !1 && (S.isClipping ? u.length > 0 ? (b.push({
+        content: u,
         mask: S,
-        contentConfigs: g,
+        contentConfigs: p,
         maskConfig: m
-      }), b = [], g = []) : p.push({
+      }), u = [], p = []) : b.push({
         content: [S],
         contentConfigs: [m]
-      }) : (b.push(S), g.push(m)));
+      }) : (u.push(S), p.push(m)));
     }
-    b.length > 0 && p.push({
-      content: b,
-      contentConfigs: g
+    u.length > 0 && b.push({
+      content: u,
+      contentConfigs: p
     });
-    for (const y of p)
+    for (const y of b)
       if (!y.mask)
         y.content.forEach((S, m) => {
-          var P;
-          const w = S.id === n, T = (o == null ? void 0 : o.type) === "element" && ((P = o == null ? void 0 : o.data) == null ? void 0 : P.id) === S.id, C = i && a && Lt(S) && S.id === n, R = w && !C, x = y.contentConfigs[m];
-          x && x.masks && x.masks.length > 0 ? kt(t, x, (M) => {
+          var H;
+          const w = S.id === n, T = (s == null ? void 0 : s.type) === "element" && ((H = s == null ? void 0 : s.data) == null ? void 0 : H.id) === S.id, C = i && a && Dt(S) && S.id === n, R = w && !C, x = y.contentConfigs[m];
+          x && x.masks && x.masks.length > 0 ? At(t, x, (M) => {
             l && (M.save(), M.globalAlpha = tt), S.render(M, R, T), l && M.restore();
           }) : (l && (t.save(), t.globalAlpha = tt), S.render(t, R, T), l && t.restore());
         });
       else {
         const S = this._getContentCanvas(c, d), m = S.getContext("2d");
         if (!m) continue;
-        m.setTransform(1, 0, 0, 1, 0, 0), m.clearRect(0, 0, c, d), m.globalCompositeOperation = "source-over", m.setTransform(f), y.content.forEach((x, P) => {
-          var O;
-          const M = x.id === n, A = (o == null ? void 0 : o.type) === "element" && ((O = o == null ? void 0 : o.data) == null ? void 0 : O.id) === x.id, B = i && a && Lt(x) && x.id === n, L = M && !B, W = y.contentConfigs[P];
-          W && W.masks && W.masks.length > 0 ? kt(m, W, (D) => {
-            l && (D.save(), D.globalAlpha = tt), x.render(D, L, A), l && D.restore();
+        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, H) => {
+          var F;
+          const M = x.id === n, A = (s == null ? void 0 : s.type) === "element" && ((F = s == null ? void 0 : s.data) == null ? void 0 : F.id) === x.id, I = i && a && Dt(x) && x.id === n, L = M && !I, D = y.contentConfigs[H];
+          D && D.masks && D.masks.length > 0 ? At(m, D, (W) => {
+            l && (W.save(), W.globalAlpha = tt), x.render(W, L, A), l && W.restore();
           }) : (l && (m.save(), m.globalAlpha = tt), x.render(m, L, A), l && m.restore());
         });
         const w = this._getMaskCanvas(c, d), T = w.getContext("2d");
         if (!T) continue;
         T.setTransform(1, 0, 0, 1, 0, 0), T.clearRect(0, 0, c, d), T.globalCompositeOperation = "source-over", T.setTransform(f);
-        const C = y.mask.id === n, R = (o == null ? void 0 : o.type) === "element" && ((u = o == null ? void 0 : o.data) == null ? void 0 : u.id) === y.mask.id;
-        y.maskConfig && y.maskConfig.masks && y.maskConfig.masks.length > 0 ? kt(T, y.maskConfig, (x) => {
+        const C = y.mask.id === n, R = (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, (x) => {
           l && (x.save(), x.globalAlpha = tt), y.mask.render(x, C, R), l && x.restore();
         }) : (l && (T.save(), T.globalAlpha = tt), y.mask.render(T, C, R), l && T.restore()), m.globalCompositeOperation = "destination-in", m.setTransform(1, 0, 0, 1, 0, 0), m.drawImage(w, 0, 0), t.save(), t.setTransform(1, 0, 0, 1, 0, 0), t.drawImage(S, 0, 0), t.restore();
       }
@@ -3224,47 +3236,47 @@ const Oe = $t("CanvasRenderer"), K = class K {
    * @see InteractionFeedbackRenderer.renderSnapGuidesLayer
    */
   static renderSnapGuidesLayer(t, e = []) {
-    Mt.renderSnapGuidesLayer(t, e);
+    Ct.renderSnapGuidesLayer(t, e);
   }
   /**
    * Render spacing indicators layer
    * @see InteractionFeedbackRenderer.renderSpacingIndicatorsLayer
    */
   static renderSpacingIndicatorsLayer(t, e = []) {
-    Mt.renderSpacingIndicatorsLayer(t, e);
+    Ct.renderSpacingIndicatorsLayer(t, e);
   }
   /**
    * Render a distance label with background
    * @see InteractionFeedbackRenderer.renderDistanceLabel
    */
-  static renderDistanceLabel(t, e, s, n) {
-    Mt.renderDistanceLabel(t, e, s, n);
+  static renderDistanceLabel(t, e, o, n) {
+    Ct.renderDistanceLabel(t, e, o, n);
   }
   /**
    * Render selection box layer
    * @see SelectionRenderer.renderSelectionLayer
    */
-  static renderSelectionLayer(t, e, s, n = 1) {
-    mt.renderSelectionLayer(t, e, s, n);
+  static renderSelectionLayer(t, e, o, n = 1) {
+    wt.renderSelectionLayer(t, e, o, n);
   }
   /**
    * Render position and size info below the selected element
    * @see SelectionRenderer.renderPositionSizeInfo
    */
-  static renderPositionSizeInfo(t, e, s, n, o = 1) {
-    mt.renderPositionSizeInfo(t, e, s, n, o);
+  static renderPositionSizeInfo(t, e, o, n, s = 1) {
+    wt.renderPositionSizeInfo(t, e, o, n, s);
   }
   /**
    * Render transform handles layer
    * @see SelectionRenderer.renderHandlesLayer
    */
-  static renderHandlesLayer(t, e, s, n, o, i, a, r = 1, l = !0) {
-    mt.renderHandlesLayer(
+  static renderHandlesLayer(t, e, o, n, s, i, a, r = 1, l = !0) {
+    wt.renderHandlesLayer(
       t,
       e,
-      s,
-      n,
       o,
+      n,
+      s,
       i,
       a,
       r,
@@ -3275,15 +3287,15 @@ const Oe = $t("CanvasRenderer"), K = class K {
    * Render hover highlights layer with fade-in animation
    * @see HoverRenderer.renderHoverLayer
    */
-  static renderHoverLayer(t, e, s, n = !1, o = 1, i) {
-    _t.renderHoverLayer(t, e, s, n, o, i);
+  static renderHoverLayer(t, e, o, n = !1, s = 1, i) {
+    Vt.renderHoverLayer(t, e, o, n, s, i);
   }
   /**
    * Render crop box layer (for images in crop mode)
    * @see EditModeRenderer.renderCropBoxLayer
    */
-  static renderCropBoxLayer(t, e, s, n = 1) {
-    Dt.renderCropBoxLayer(t, e, s, n);
+  static renderCropBoxLayer(t, e, o, n = 1) {
+    zt.renderCropBoxLayer(t, e, o, n);
   }
   // =========================================================================
   // Main Render Orchestration
@@ -3295,7 +3307,7 @@ const Oe = $t("CanvasRenderer"), K = class K {
   static render({
     ctx: t,
     elements: e,
-    selectedId: s,
+    selectedId: o,
     selectedElement: n,
     // Chrome-related fields (transformHandles, currentRotation,
     // isRotating, hideHandles, isAltKeyPressed, showRotationHandle)
@@ -3304,7 +3316,7 @@ const Oe = $t("CanvasRenderer"), K = class K {
     // consumed here — single-selection chrome is now drawn by
     // `renderInteractionChromeLayer` after piece guides. See that
     // method for the actual chrome rendering.
-    hoverState: o,
+    hoverState: s,
     isEditing: i,
     stateMachine: a,
     snapGuides: r = [],
@@ -3313,27 +3325,27 @@ const Oe = $t("CanvasRenderer"), K = class K {
     artboard: c,
     isPreview: d = !0,
     zoom: f = 1,
-    paddingOffset: p = { x: 0, y: 0 },
-    showOverflowDimmed: b = !1,
-    suppressOverflowDim: g = !1,
-    distressTexture: u,
+    paddingOffset: b = { x: 0, y: 0 },
+    showOverflowDimmed: u = !1,
+    suppressOverflowDim: p = !1,
+    distressTexture: g,
     imageMask: y,
     editModeData: S
   }) {
     if (this.renderElementsLayer(
       t,
       e,
-      s,
       o,
+      s,
       a ?? void 0,
       h,
       c,
       d,
-      b,
-      g
-    ), u != null && u.enabled && c && Me(t, u, c, h), y != null && y.enabled && c && xe(t, y, c, h), i && S && n && Dt.renderEditModeLayer(t, n, S, f), f !== 1) {
+      u,
+      p
+    ), g != null && g.enabled && c && ke(t, g, c, h), y != null && y.enabled && c && Pe(t, y, c, h), i && S && n && zt.renderEditModeLayer(t, n, S, f), f !== 1) {
       t.save();
-      const C = t.getTransform().a / f, R = p.x * f * C, x = p.y * f * C;
+      const C = t.getTransform().a / f, R = b.x * f * C, x = b.y * f * C;
       t.setTransform(C, 0, 0, C, R, x);
     }
     const m = r.map((T) => ({
@@ -3355,7 +3367,7 @@ const Oe = $t("CanvasRenderer"), K = class K {
       labelX: T.labelX * f,
       labelY: T.labelY * f
     }));
-    Mt.renderSnapGuidesLayer(t, m), Mt.renderSpacingIndicatorsLayer(t, w), f !== 1 && t.restore();
+    Ct.renderSnapGuidesLayer(t, m), Ct.renderSpacingIndicatorsLayer(t, w), f !== 1 && t.restore();
   }
   /**
    * Single-selection interaction chrome: bbox, handles, position/size
@@ -3372,9 +3384,9 @@ const Oe = $t("CanvasRenderer"), K = class K {
   static renderInteractionChromeLayer({
     ctx: t,
     selectedElement: e,
-    transformHandles: s,
+    transformHandles: o,
     stateMachine: n,
-    currentRotation: o,
+    currentRotation: s,
     isRotating: i,
     hoverState: a,
     selectedId: r,
@@ -3383,53 +3395,53 @@ const Oe = $t("CanvasRenderer"), K = class K {
     isAltKeyPressed: c = !1,
     artboardBackgroundColor: d,
     hoverClipArtboard: f,
-    showRotationHandle: p = !0,
-    zoom: b = 1,
-    paddingOffset: g = { x: 0, y: 0 }
+    showRotationHandle: b = !0,
+    zoom: u = 1,
+    paddingOffset: p = { x: 0, y: 0 }
   }) {
-    if (b !== 1) {
+    if (u !== 1) {
       t.save();
-      const S = t.getTransform().a / b, m = g.x * b * S, w = g.y * b * S;
+      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 && Re(e) && e.isCropping)
-      s && Dt.renderCropBoxLayer(t, e, s, b);
-    else if (!l && n && mt.renderSelectionLayer(t, e, n, b), s && n && mt.renderPositionSizeInfo(t, e, s, n, b), !l && s && n && mt.renderHandlesLayer(
+    if (e && Ee(e) && e.isCropping)
+      o && zt.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(
       t,
       e,
-      s,
       o,
+      s,
       i,
       a,
       n,
-      b,
-      p
+      u,
+      b
     ), !h) {
       if (f) {
         t.save();
-        const y = f, S = y.x * b, m = y.y * b, w = y.width * b, T = y.height * b, C = (y.borderRadius ?? 0) * b;
+        const y = f, S = y.x * u, m = y.y * u, w = y.width * u, T = y.height * u, C = (y.borderRadius ?? 0) * u;
         t.beginPath(), C > 0 ? t.roundRect(S, m, w, T, C) : t.rect(S, m, w, T), t.clip();
       }
-      _t.renderHoverLayer(t, a, r, c, b, d), f && t.restore();
+      Vt.renderHoverLayer(t, a, r, c, u, d), f && t.restore();
     }
-    b !== 1 && t.restore();
+    u !== 1 && t.restore();
   }
 };
 K._contentCanvas = null, K._contentCanvasSize = { width: 0, height: 0 }, K._maskCanvas = null, K._maskCanvasSize = { width: 0, height: 0 }, K._cachedElementsRef = null, K._cachedElementConfigs = null, K._cachedElementMap = null, K._knockoutRenderedIds = /* @__PURE__ */ new Set(), K.onRenderError = null;
-let Kt = K;
+let Ut = K;
 export {
-  Ze as A,
-  Kt as C,
-  Ue as I,
-  Ve as R,
-  Je as S,
-  je as T,
-  Jt as a,
-  Ke as b,
-  Ne as c,
-  We as d,
-  qe as e,
-  Gt as g,
-  $e as r
+  en as A,
+  Ut as C,
+  tn as I,
+  Ge as R,
+  nn as S,
+  Je as T,
+  ne as a,
+  Ue as b,
+  qe as c,
+  Ve as d,
+  Qe as e,
+  $t as g,
+  Ze as r
 };
-//# sourceMappingURL=CanvasRenderer-B_3GISlW.js.map
+//# sourceMappingURL=CanvasRenderer-_lFoIoz5.js.map