@snowcone-app/canvas 0.16.0 → 0.17.0

package/dist/ImportManager-kRYfIX-D.js

@@ -0,0 +1,3617 @@
+import { aC as tt, _ as ae, $ as re, a5 as Vt, aP as le, aN as he, aG as Ot, aM as ce, aF as ht, aW as de, aX as Gt, aY as fe, aZ as ge, c as zt, G as ue, I as Qt, P as pe, S as ye, T as be, a_ as me, a$ as Se, b0 as Te, b1 as we, b2 as te, ag as ee, az as ft, ah as ne, b3 as Bt, b4 as ve, V as xe, b5 as Ce, b6 as Yt, b7 as Me, b8 as Re, b9 as Ee, ac as ke, ba as Pe, bb as Ae, bc as Q, A as Xt } from "./HybridHistoryManager-Bht98XRv.js";
+import { T as Ht, l as Ie, e as Et, m as Nt, n as Be, o as He, f as Kt } from "./ElementFactory-C05JJkRp.js";
+const ot = {
+  // Canvas-specific
+  canvas: {
+    get selectionColor() {
+      return tt();
+    },
+    snapThreshold: 8,
+    // pixels
+    snapGuideDash: [5, 5],
+    snapGuideWidth: 1,
+    selectionPadding: 1,
+    // Red for spacing measurement lines
+    spacingIndicatorWidth: 1.5,
+    // Show spacing within 50px
+    spacingLabelFontSize: 11,
+    spacingLabelFontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
+  }
+}, Le = 2, Ct = 6, De = 16, We = 5, _e = 5, se = 0.5;
+function $t(x) {
+  return Le / x;
+}
+function $e(x) {
+  return Ct / x;
+}
+function ze(x) {
+  return De / x;
+}
+function je(x) {
+  return [We / x, _e / x];
+}
+function Fe(x, t, e, o) {
+  x.save();
+  const n = se / o;
+  x.translate(t, e), x.scale(n, n), x.strokeStyle = "#000", x.lineWidth = 1.5, x.lineCap = "round", x.lineJoin = "round", x.translate(-12, -12), x.beginPath(), x.moveTo(21, 12), x.arc(12, 12, 9, 0, -Math.PI / 2, !0), x.bezierCurveTo(3.5, 4.5, 4, 6, 3, 8), x.stroke(), x.beginPath(), x.moveTo(3, 3), x.lineTo(3, 8), x.lineTo(8, 8), x.stroke(), x.beginPath(), x.moveTo(3, 12), x.arc(12, 12, 9, Math.PI, Math.PI / 2, !0), x.bezierCurveTo(20.5, 19.5, 20, 18, 21, 16), x.stroke(), x.beginPath(), x.moveTo(16, 16), x.lineTo(21, 16), x.lineTo(21, 21), x.stroke(), x.restore();
+}
+function Ue(x, t, e, o = 1, n = "#3b82f6", s = !1) {
+  const i = ze(o);
+  x.save(), x.fillStyle = "#fff", x.strokeStyle = n, x.lineWidth = s ? $t(o) * 1.25 : $t(o), x.beginPath(), x.arc(t, e, i, 0, Math.PI * 2), x.fill(), x.stroke(), Fe(x, t, e, o), x.restore();
+}
+const jt = Ct * 2;
+class qe {
+  constructor() {
+    this.resizeHandles = [], this.rotationHandle = null, this.elementRotation = 0, this.rotationAnchor = { x: 0, y: 0 };
+  }
+  /**
+   * Update handle positions for an element
+   * @param element - The element to update handles for
+   * @param zoom - Current zoom level (used to maintain consistent rotation handle distance in screen space)
+   */
+  update(t, e = 1) {
+    const n = "isCropping" in t && t.isCropping ? t.getBoundingBox() : t.getVisualBoundingBox(), s = t.getRotationAnchor(), i = t.getEnabledAnchors();
+    this.elementRotation = t.rotation, this.rotationAnchor = s;
+    const a = ot.canvas.selectionPadding, r = {
+      x: n.x - a,
+      y: n.y - a,
+      width: n.width + a * 2,
+      height: n.height + a * 2
+    }, l = ae(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 = re(
+      r,
+      t.rotation,
+      s,
+      e
+    );
+  }
+  /**
+   * Render all handles
+   * @param renderRotationInCanvas - If false, skip canvas rendering of rotation handle (for React-based rendering)
+   */
+  render(t, e = !0, o = 0, n = !1, s = !1, i = null, a = !1, r = null, l = 1, h = !0) {
+    this.resizeHandles.forEach((c) => {
+      if (a && r && c.anchor !== r.anchor)
+        return;
+      const d = !!(i && i.anchor === c.anchor), u = !!(a && r && r.anchor === c.anchor);
+      this.renderResizeHandle(t, c, d, u, l);
+    }), h && e && this.rotationHandle && !n && !a && this.renderRotationHandle(t, this.rotationHandle, s, l), h && e && this.rotationHandle && n && this.renderRotationTooltip(t, this.rotationHandle, o, l);
+  }
+  /**
+   * Render a single resize handle
+   * Corner handles are circles, side handles are rounded rectangles
+   */
+  renderResizeHandle(t, e, o = !1, n = !1, s = 1) {
+    t.save();
+    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 = jt * 0.6, c = jt * 1.4, d = h / 2, u = i - h / 2, p = a - c / 2;
+      t.fillStyle = "#fff", t.strokeStyle = tt(t.canvas), t.lineWidth = o || n ? 2.5 : 2, t.beginPath(), t.roundRect(u, p, h, c, d), t.fill(), t.stroke();
+    } else
+      t.fillStyle = "#fff", t.strokeStyle = tt(t.canvas), t.lineWidth = o || n ? 2.5 : 2, t.beginPath(), t.arc(i, a, Ct, 0, Math.PI * 2), t.fill(), t.stroke();
+    t.restore();
+  }
+  /**
+   * Render the rotation handle (with refresh-ccw icon)
+   * Works in screen space (positions multiplied by zoom, fixed pixel sizes)
+   */
+  renderRotationHandle(t, e, o = !1, n = 1) {
+    t.save();
+    const s = e.x * n, i = e.y * n, a = Ct * 2.67;
+    t.fillStyle = "#fff", t.strokeStyle = tt(t.canvas), t.lineWidth = o ? 2.5 : 2, t.beginPath(), t.arc(s, i, a, 0, Math.PI * 2), t.fill(), t.stroke();
+    const r = se;
+    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, o, n = 1) {
+    t.save();
+    const s = `${Math.round(o)}°`, i = s.length * 8 + 12, a = 22, r = e.x * n, l = e.y * n - 35;
+    t.shadowColor = "rgba(0,0,0,0.3)", t.shadowBlur = 3, t.shadowOffsetY = 1, t.fillStyle = "#333", t.beginPath(), t.roundRect(r - i / 2, l, i, a, 3), t.fill(), t.shadowColor = "transparent", t.shadowBlur = 0, t.shadowOffsetY = 0, t.fillStyle = "#fff", t.font = "12px Arial", t.textAlign = "center", t.textBaseline = "middle", t.fillText(s, r, l + a / 2), t.restore();
+  }
+  /**
+   * Test if a point hits any resize handle
+   * @param zoom - Current zoom level (radius scales inversely with zoom)
+   */
+  hitTestResize(t, e, o = 1) {
+    const n = he / o;
+    for (const s of this.resizeHandles)
+      if (Vt(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, o = 1) {
+    if (!this.rotationHandle) return !1;
+    const n = (Ct * 2.67 + 2) / o;
+    return Vt(t, e, this.rotationHandle.x, this.rotationHandle.y, n);
+  }
+  /**
+   * Get rotation handle position (for React-based rendering)
+   */
+  getRotationHandlePosition() {
+    return this.rotationHandle;
+  }
+  /**
+   * Get cursor style for a resize handle, adjusted for the element's current rotation.
+   * @param handle - The resize handle to get cursor for
+   * @param rotation - Element rotation in degrees
+   */
+  getCursor(t, e) {
+    const o = t.anchor.includes("middle") ? "edge" : "corner";
+    return le(
+      t.x,
+      t.y,
+      this.rotationAnchor.x,
+      this.rotationAnchor.y,
+      o,
+      e,
+      t.anchor
+    );
+  }
+}
+class Ve {
+  /**
+   * Calculate new dimensions and position for a resize operation
+   */
+  static calculateResize({
+    element: t,
+    handle: e,
+    dx: o,
+    dy: n,
+    startData: s,
+    snapSystem: i
+  }) {
+    var H, L, D, O, W;
+    const r = new Ot(t).worldDeltaToLocal(o, n), l = r.dx, h = r.dy, c = s.visualWidth ?? s.width ?? 0, d = s.visualHeight ?? s.height ?? 0, u = s.width ?? 0, p = s.height ?? 0;
+    let b = c, g = d;
+    e.anchor.includes("right") ? b = c + l : e.anchor.includes("left") && (b = c - l), e.anchor !== "middle-left" && e.anchor !== "middle-right" && (e.anchor.includes("bottom") ? g = d + h : e.anchor.includes("top") && (g = d - h));
+    let f, y;
+    if (e.anchor === "middle-left" || e.anchor === "middle-right") {
+      const V = b - c;
+      f = u + V, y = p;
+    } else if (e.anchor === "middle-top" || e.anchor === "middle-bottom") {
+      const V = g - d;
+      f = u, y = p + V;
+    } else {
+      const V = b / c, A = g / d;
+      f = u * V, y = p * A;
+    }
+    const S = b, T = g;
+    let w = !1;
+    if (i && t.transformType === "image") {
+      const V = e.anchor ?? "", A = V === "top-left" || V === "top-right" || V === "bottom-left" || V === "bottom-right", $ = V.startsWith("crop-");
+      if (A && !$) {
+        const j = (H = i.activeSnaps) == null ? void 0 : H.x, J = (L = i.activeSnaps) == null ? void 0 : L.y;
+        if (!!j || !!J) {
+          const E = [j, J].find(
+            (I) => typeof I == "object" && I !== null && "frozenWidth" in I
+          );
+          if (E) {
+            const I = t, _ = s.transformData, B = E.frozenWidth ?? ((D = I.transformData) == null ? void 0 : D.width) ?? u, F = I.imageAspectRatio || (_ != null && _.width && (_ != null && _.height) ? _.width / _.height : null);
+            let G = E.frozenHeight;
+            G == null && (F && F !== 0 ? G = B / F : (O = I.transformData) != null && O.height ? G = I.transformData.height : G = p);
+            const at = u !== 0 ? B / u : 1, gt = p !== 0 ? G / p : 1;
+            b = c * at, g = d * gt, f = B, y = G, w = !0;
+          }
+        }
+      }
+    }
+    f = Math.max(50, f), y = Math.max(40, y);
+    const m = t.clone(), C = m.resize(e.anchor, f, y, s);
+    if (!e.anchor.includes("middle") && ((W = m.stroke) != null && W.enabled) && s.strokeWidth !== void 0 && s.strokeWidth > 0) {
+      const V = s.width ?? 1, A = s.height ?? 1, $ = Math.sqrt(f / V * (y / A)), j = Math.max(1, Math.round(s.strokeWidth * $ * 10) / 10);
+      m.stroke = { ...m.stroke, width: j };
+    }
+    const M = w || C === !1, k = e.anchor.includes("top") || e.anchor.includes("bottom"), v = "isCropping" in m && m.isCropping, P = "isGroup" in m && m.isGroup;
+    if (k && !v && !P) {
+      const V = t.getRotationAnchor(), A = this._calculateFixedCornerOffset({
+        element: t,
+        updatedElement: m,
+        handle: e,
+        rotationAnchor: V
+      });
+      m.x += A.x, m.y += A.y;
+    }
+    return {
+      element: m,
+      isFrozen: M,
+      // For snap system to detect break-free: dimensions before freeze was applied
+      unfrozenDimensions: w ? { width: S, height: T } : void 0
+    };
+  }
+  /**
+   * Calculate position offset to keep opposite corner fixed
+   * Uses visual bounding box and rotation anchor for proper rotated resize
+   * @private
+   */
+  static _calculateFixedCornerOffset({
+    element: t,
+    updatedElement: e,
+    handle: o,
+    rotationAnchor: n
+  }) {
+    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), u = d.x, p = d.y, b = r.x - h.x, g = r.y - h.y, f = b + u, y = g + p, S = f * i - y * a, T = f * a + y * i, w = h.x + S, m = h.y + T, C = this._getFixedLocalCoords(o.anchor, l.width, l.height), R = C.x, M = C.y, k = l.x - c.x, v = l.y - c.y, P = k + R, H = v + M, L = P * i - H * a, D = P * a + H * i, O = c.x + L, W = c.y + D;
+    return {
+      x: w - O,
+      y: m - W
+    };
+  }
+  /**
+   * Get local coordinates of the fixed point for a given handle
+   * @private
+   */
+  static _getFixedLocalCoords(t, e, o) {
+    const n = { x: 0, y: 0 };
+    switch (t) {
+      case "top-left":
+        n.x = e, n.y = o;
+        break;
+      case "top-right":
+        n.x = 0, n.y = o;
+        break;
+      case "bottom-left":
+        n.x = e, n.y = 0;
+        break;
+      case "bottom-right":
+        n.x = 0, n.y = 0;
+        break;
+      case "middle-left":
+        n.x = e, n.y = o / 2;
+        break;
+      case "middle-right":
+        n.x = 0, n.y = o / 2;
+        break;
+      case "middle-top":
+        n.x = e / 2, n.y = o;
+        break;
+      case "middle-bottom":
+        n.x = e / 2, n.y = 0;
+        break;
+    }
+    return n;
+  }
+}
+class Oe {
+  constructor() {
+    this.hooks = {
+      beforeResize: [],
+      afterResize: [],
+      beforePositionUpdate: [],
+      afterPositionUpdate: []
+    };
+  }
+  /**
+   * Add a hook at a specific stage
+   * @param stage - 'beforeResize', 'afterResize', 'beforePositionUpdate', 'afterPositionUpdate'
+   * @param fn - Hook function
+   */
+  addHook(t, e) {
+    if (!this.hooks[t])
+      throw new Error(`Invalid hook stage: ${t}`);
+    this.hooks[t].push(e);
+  }
+  /**
+   * Remove a hook
+   */
+  removeHook(t, e) {
+    if (!this.hooks[t]) return;
+    const o = this.hooks[t].indexOf(e);
+    o !== -1 && this.hooks[t].splice(o, 1);
+  }
+  /**
+   * Clear all hooks at a stage
+   */
+  clearHooks(t) {
+    this.hooks[t] && (this.hooks[t] = []);
+  }
+  /**
+   * Clear all hooks
+   */
+  clearAllHooks() {
+    Object.keys(this.hooks).forEach((t) => {
+      this.hooks[t] = [];
+    });
+  }
+  /**
+   * Run hooks at a specific stage
+   */
+  runHooks(t, e) {
+    return this.hooks[t] ? this.hooks[t].reduce((o, n) => {
+      const s = n(o);
+      return s !== void 0 ? s : o;
+    }, e) : e;
+  }
+  /**
+   * Execute resize with hooks
+   */
+  executeResize(t) {
+    const e = this.runHooks("beforeResize", t);
+    let o = Ve.calculateResize({
+      ...e,
+      snapSystem: t.snapSystem
+    });
+    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 o = this.runHooks("beforePositionUpdate", { position: t, element: e });
+    return this.runHooks("afterPositionUpdate", o).position;
+  }
+}
+const Ze = new Oe();
+class Je {
+  constructor(t = null) {
+    this.state = "IDLE", this.context = {
+      mode: null,
+      startX: 0,
+      startY: 0,
+      startData: null,
+      activeHandle: null,
+      element: null
+    }, this.snapHandler = null, this.resizePipeline = t;
+  }
+  /**
+   * Set snap handler for position/dimension snapping
+   */
+  setSnapHandler(t) {
+    this.snapHandler = t;
+  }
+  /**
+   * Set resize pipeline for hooking into resize operations
+   */
+  setResizePipeline(t) {
+    this.resizePipeline = t;
+  }
+  /**
+   * Get current state
+   */
+  getState() {
+    return this.state;
+  }
+  /**
+   * Get current context
+   */
+  getContext() {
+    return this.context;
+  }
+  /**
+   * Check if currently interacting
+   */
+  isInteracting() {
+    return this.state !== "IDLE";
+  }
+  /**
+   * Start drag operation
+   */
+  startDrag(t, e, o, n = null) {
+    this.state = "DRAGGING";
+    const s = t.getTransformStartData();
+    let i = s;
+    if (n === "crop-image-drag" && t.transformData) {
+      const a = t.transformData;
+      i = {
+        ...s,
+        cropX: a.cropX,
+        cropY: a.cropY,
+        cropWidth: a.cropWidth,
+        cropHeight: a.cropHeight
+      };
+    }
+    this.context = {
+      mode: "drag",
+      dragMode: n,
+      // 'crop-image-drag' for moving image within crop, null for normal drag
+      startX: e,
+      startY: o,
+      startData: i,
+      activeHandle: null,
+      element: t
+    };
+  }
+  /**
+   * Get drag mode
+   */
+  getDragMode() {
+    return this.context.dragMode;
+  }
+  /**
+   * Reset drag start position (for incremental dragging)
+   */
+  resetDragStart(t, e) {
+    this.state === "DRAGGING" && (this.context.startX = t, this.context.startY = e);
+  }
+  /**
+   * Update drag operation
+   * Returns updated position { x, y }
+   */
+  updateDrag(t, e, o = null) {
+    if (this.state !== "DRAGGING")
+      throw new Error("Cannot update drag: not in DRAGGING state");
+    const n = t - this.context.startX, s = e - this.context.startY, i = this.context.startData;
+    let a = i.x + n, r = i.y + s;
+    if (this.snapHandler && this.snapHandler.snapPosition && this.context.element) {
+      const l = this.snapHandler.snapPosition({ x: a, y: r }, this.context.element, o);
+      a = l.x, r = l.y;
+    }
+    return { x: a, y: r };
+  }
+  /**
+   * Start resize operation
+   */
+  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: o,
+      startY: n,
+      startData: {
+        ...a,
+        visualX: i.x,
+        visualY: i.y,
+        visualWidth: i.width,
+        visualHeight: i.height,
+        bboxX: s.x,
+        bboxY: s.y
+      },
+      activeHandle: e,
+      element: r
+      // Use the cloned element with lock already set
+    };
+  }
+  /**
+   * Update resize operation
+   * Returns { dx, dy } deltas
+   */
+  updateResize(t, e) {
+    if (this.state !== "RESIZING")
+      throw new Error("Cannot update resize: not in RESIZING state");
+    const o = t - this.context.startX, n = e - this.context.startY;
+    return { dx: o, dy: n };
+  }
+  /**
+   * Adjust the resize start position to account for snap corrections
+   * This prevents dx/dy from accumulating when a snap is locked
+   */
+  adjustResizeStart(t, e) {
+    this.state === "RESIZING" && (this.context.startX += t, this.context.startY += e);
+  }
+  /**
+   * Get resize context for ResizeHandler
+   */
+  getResizeContext() {
+    if (this.state !== "RESIZING")
+      throw new Error("Cannot get resize context: not in RESIZING state");
+    return {
+      element: this.context.element,
+      handle: this.context.activeHandle,
+      startData: this.context.startData
+    };
+  }
+  /**
+   * Update the element in resize context (to preserve state between frames)
+   * This is critical for ImageElement crop mode where _lastValidCropState needs to persist
+   */
+  updateResizeElement(t) {
+    this.state === "RESIZING" && (this.context.element = t);
+  }
+  /**
+   * Reset resize start data to current element state (for unfreezing)
+   * This updates startData to use the current element dimensions, preventing jumps
+   */
+  resetResizeStartData(t, e, o) {
+    if (this.state !== "RESIZING")
+      return;
+    const n = t.getBoundingBox(), s = t.getVisualBoundingBox(), i = t.getTransformStartData();
+    this.context.startX = e, this.context.startY = o, this.context.startData = {
+      ...i,
+      visualX: s.x,
+      visualY: s.y,
+      visualWidth: s.width,
+      visualHeight: s.height,
+      bboxX: n.x,
+      bboxY: n.y
+    };
+  }
+  /**
+   * Start rotation operation
+   */
+  startRotate(t, e, o, n, s) {
+    this.state = "ROTATING", this.context = {
+      mode: "rotate",
+      startX: e,
+      startY: o,
+      startData: {
+        startAngle: n,
+        currentRotation: s,
+        elementData: t.getTransformStartData()
+      },
+      activeHandle: null,
+      element: t
+    };
+  }
+  /**
+   * Update rotation operation
+   * Returns updated rotation angle in degrees
+   */
+  updateRotate(t, e, o, n) {
+    if (this.state !== "ROTATING")
+      throw new Error("Cannot update rotate: not in ROTATING state");
+    const s = this.context.startData, a = (ce(o, n, t, e) - s.startAngle) * 180 / Math.PI;
+    let r = s.currentRotation - a;
+    return r = (r % 360 + 360) % 360, r > 180 && (r -= 360), this.snapHandler && this.snapHandler.snapRotation && this.context.element ? this.snapHandler.snapRotation(r, this.context.element) : r;
+  }
+  /**
+   * Get rotation context
+   */
+  getRotationContext() {
+    if (this.state !== "ROTATING")
+      throw new Error("Cannot get rotation context: not in ROTATING state");
+    const t = this.context.startData;
+    return {
+      startAngle: t.startAngle,
+      currentRotation: t.currentRotation
+    };
+  }
+  /**
+   * Start a two-finger pinch gesture on `element`. Captures the
+   * gesture's start centroid / distance / angle and the element's
+   * full transform snapshot — `updatePinch` then derives the
+   * gesture's scale + rotation delta against this snapshot every
+   * frame. PinchHandler consumes both via `getPinchContext()` to
+   * produce the next element.
+   */
+  startPinch(t, e, o) {
+    this.state = "PINCHING";
+    const n = {
+      x: (e.x + o.x) / 2,
+      y: (e.y + o.y) / 2
+    }, s = o.x - e.x, i = o.y - e.y, a = Math.hypot(s, i), r = Math.atan2(i, s), l = {
+      elementData: t.getTransformStartData(),
+      startCentroid: n,
+      startDistance: a,
+      startAngle: r
+    };
+    this.context = {
+      mode: "pinch",
+      startX: n.x,
+      startY: n.y,
+      startData: l,
+      // see InteractionContextData typing
+      activeHandle: null,
+      element: t.clone()
+    };
+  }
+  /**
+   * Update pinch gesture for the latest two-pointer positions.
+   * Returns the raw gesture state (scale ratio, rotation delta,
+   * centroid positions). The caller (PinchHandler) is responsible
+   * for applying this to the element — keeping the math out of the
+   * state machine mirrors how `updateResize` returns `{dx, dy}` and
+   * lets `ResizeHandler` do the geometry.
+   *
+   * Scale is clamped to a small floor so degenerate single-finger
+   * coalesces (e.g. fingers landing on the same pixel for one
+   * frame) don't produce zero / NaN dimensions.
+   */
+  updatePinch(t, e) {
+    if (this.state !== "PINCHING")
+      throw new Error("Cannot update pinch: not in PINCHING state");
+    const o = this.context.startData, n = {
+      x: (t.x + e.x) / 2,
+      y: (t.y + e.y) / 2
+    }, s = e.x - t.x, i = e.y - t.y, a = Math.hypot(s, i), r = Math.atan2(i, s), l = Math.max(o.startDistance, 1e-4), h = a / l, c = Math.max(h, 0.05), d = r - o.startAngle;
+    return {
+      scale: c,
+      rotationDelta: d,
+      startCentroid: o.startCentroid,
+      currentCentroid: n
+    };
+  }
+  /**
+   * Get the element snapshot + pinch start data (used by
+   * PinchHandler.calculatePinch). Mirrors `getResizeContext`.
+   */
+  getPinchContext() {
+    if (this.state !== "PINCHING")
+      throw new Error("Cannot get pinch context: not in PINCHING state");
+    const t = this.context.startData;
+    return {
+      element: this.context.element,
+      startData: t.elementData
+    };
+  }
+  /**
+   * End current interaction
+   */
+  end() {
+    this.state = "IDLE", this.context = {
+      mode: null,
+      startX: 0,
+      startY: 0,
+      startData: null,
+      activeHandle: null,
+      element: null
+    };
+  }
+  /**
+   * Cancel current interaction (no commit)
+   */
+  cancel() {
+    this.end();
+  }
+  /**
+   * Get active handle (for resize mode)
+   */
+  getActiveHandle() {
+    return this.context.activeHandle;
+  }
+  /**
+   * Get mode ('drag', 'resize', 'rotate', or null)
+   */
+  getMode() {
+    return this.context.mode;
+  }
+}
+class bt {
+  /**
+   * Resolve rotation anchor with clear precedence:
+   * 1. Transform's getRotationAnchor() if overridden
+   * 2. Center of visual bounding box (default)
+   */
+  static resolve(t) {
+    return t.getRotationAnchor();
+  }
+  /**
+   * Get all snap-able anchor points for an element
+   * Used for alignment snapping feature
+   *
+   * Returns 9 standard anchor points plus the rotation anchor:
+   * - 4 corners (top-left, top-right, bottom-left, bottom-right)
+   * - 4 edge midpoints (top, right, bottom, left)
+   * - 1 center
+   * - 1 rotation anchor (may be same as center)
+   */
+  static getSnapAnchors(t) {
+    const e = t.getVisualBoundingBox(), o = {
+      // Corners
+      topLeft: { x: e.x, y: e.y },
+      topRight: { x: e.x + e.width, y: e.y },
+      bottomLeft: { x: e.x, y: e.y + e.height },
+      bottomRight: { x: e.x + e.width, y: e.y + e.height },
+      // Edge midpoints
+      topCenter: { x: e.x + e.width / 2, y: e.y },
+      rightCenter: { x: e.x + e.width, y: e.y + e.height / 2 },
+      bottomCenter: { x: e.x + e.width / 2, y: e.y + e.height },
+      leftCenter: { x: e.x, y: e.y + e.height / 2 },
+      // Center
+      center: { x: e.x + e.width / 2, y: e.y + e.height / 2 },
+      // Rotation anchor (may differ from center for some transforms)
+      rotation: this.resolve(t)
+    };
+    if (t.rotation !== 0) {
+      const n = o.rotation, s = ht.toRadiansInverse(t.rotation);
+      Object.keys(o).forEach((i) => {
+        if (i === "rotation") return;
+        const a = o[i], r = a.x - n.x, l = a.y - n.y, h = r * Math.cos(s) - l * Math.sin(s), c = r * Math.sin(s) + l * Math.cos(s);
+        o[i] = {
+          x: n.x + h,
+          y: n.y + c
+        };
+      });
+    }
+    return o;
+  }
+  /**
+   * Get edge lines for an element (for edge-to-edge snapping)
+   *
+   * Returns 4 lines representing the element's edges:
+   * - top: left to right
+   * - right: top to bottom
+   * - bottom: right to left
+   * - left: bottom to top
+   */
+  static getEdgeLines(t) {
+    const e = this.getSnapAnchors(t);
+    return {
+      top: {
+        start: e.topLeft,
+        end: e.topRight
+      },
+      right: {
+        start: e.topRight,
+        end: e.bottomRight
+      },
+      bottom: {
+        start: e.bottomRight,
+        end: e.bottomLeft
+      },
+      left: {
+        start: e.bottomLeft,
+        end: e.topLeft
+      }
+    };
+  }
+  /**
+   * Get all anchor types as array (for iteration)
+   */
+  static getAnchorTypes() {
+    return [
+      "topLeft",
+      "topCenter",
+      "topRight",
+      "rightCenter",
+      "bottomRight",
+      "bottomCenter",
+      "bottomLeft",
+      "leftCenter",
+      "center",
+      "rotation"
+    ];
+  }
+  /**
+   * Check if an element has a custom rotation anchor
+   * (different from center of visual bbox)
+   */
+  static hasCustomRotationAnchor(t) {
+    const e = t.getVisualBoundingBox(), o = {
+      x: e.x + e.width / 2,
+      y: e.y + e.height / 2
+    }, n = this.resolve(t), s = 1e-3;
+    return Math.abs(n.x - o.x) > s || Math.abs(n.y - o.y) > s;
+  }
+}
+class Ut {
+  constructor(t) {
+    this.cellSize = t, this.cells = /* @__PURE__ */ new Map(), this.idIndex = /* @__PURE__ */ new Map();
+  }
+  /** Clear all entries */
+  clear() {
+    this.cells.clear(), this.idIndex.clear();
+  }
+  /** Insert a point into the grid */
+  insert(t) {
+    const e = this.getCellKey(t.x, t.y);
+    let o = this.cells.get(e);
+    o || (o = /* @__PURE__ */ new Set(), this.cells.set(e, o)), o.add(t);
+    let n = this.idIndex.get(t.id);
+    n || (n = /* @__PURE__ */ new Set(), this.idIndex.set(t.id, n)), n.add(e);
+  }
+  /** Remove all items with matching id */
+  removeById(t) {
+    const e = this.idIndex.get(t);
+    if (e) {
+      for (const o of e) {
+        const n = this.cells.get(o);
+        if (n) {
+          for (const s of n)
+            s.id === t && n.delete(s);
+          n.size === 0 && this.cells.delete(o);
+        }
+      }
+      this.idIndex.delete(t);
+    }
+  }
+  /**
+   * Query all items within `radius` of point (x, y), excluding given id.
+   *
+   * Checks all cells that overlap the axis-aligned bounding box
+   * [x - radius, x + radius] x [y - radius, y + radius].
+   * Each candidate is then distance-checked against the radius.
+   */
+  queryNear(t, e, o, n) {
+    const s = [], i = Math.floor((t - o) / this.cellSize), a = Math.floor((t + o) / this.cellSize), r = Math.floor((e - o) / this.cellSize), l = Math.floor((e + o) / this.cellSize);
+    for (let h = i; h <= a; h++)
+      for (let c = r; c <= l; c++) {
+        const d = `${h},${c}`, u = this.cells.get(d);
+        if (u)
+          for (const p of u) {
+            if (n !== void 0 && p.id === n) continue;
+            const b = p.x - t, g = p.y - e;
+            b * b + g * g <= o * o && s.push(p);
+          }
+      }
+    return s;
+  }
+  /**
+   * Query all items whose coordinate on `axis` is within `radius` of the
+   * given value, excluding a given id. Unlike `queryNear` (Euclidean),
+   * this checks only one axis -- essential for alignment snapping where
+   * two anchors may be far apart on one axis but perfectly aligned on
+   * the other.
+   *
+   * For axis='x': finds items where |item.x - value| <= radius
+   * For axis='y': finds items where |item.y - value| <= radius
+   *
+   * Scans all cells in the band along the target axis.
+   */
+  queryNearAxis(t, e, o, n) {
+    const s = [];
+    if (t === "x") {
+      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) <= o && s.push(d);
+      }
+    } else {
+      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) <= o && s.push(d);
+      }
+    }
+    return s;
+  }
+  /** Rebuild from a full list of items (clears existing data first) */
+  rebuild(t) {
+    this.clear();
+    for (const e of t)
+      this.insert(e);
+  }
+  /** Get the cell key for a given world-space coordinate */
+  getCellKey(t, e) {
+    return `${Math.floor(t / this.cellSize)},${Math.floor(e / this.cellSize)}`;
+  }
+}
+function lt(x) {
+  const t = x.transformData;
+  if (t && "width" in t && typeof t.width == "number")
+    return t.width;
+}
+function mt(x) {
+  const t = x.transformData;
+  if (t && "height" in t && typeof t.height == "number")
+    return t.height;
+}
+function vt(x, t) {
+  const e = x.transformData;
+  return e && "width" in e ? (e.width = t, !0) : !1;
+}
+function kt(x, t) {
+  const e = x.transformData;
+  return e && "height" in e ? (e.height = t, !0) : !1;
+}
+class Qe {
+  constructor(t = {}) {
+    this._extraSnapRects = [], this.snapThreshold = t.snapThreshold || ot.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 Ut(Math.max(this.snapThreshold * 2, 16)), this._anchorMetadata = /* @__PURE__ */ new Map();
+  }
+  /**
+   * Enable or disable snapping
+   */
+  setEnabled(t) {
+    this.enabled = t;
+  }
+  /**
+   * Set snap threshold in pixels
+   */
+  setSnapThreshold(t) {
+    this.snapThreshold = t, this._spatialGrid = new Ut(Math.max(t * 2, 16));
+  }
+  /**
+   * Get current snap guides for rendering
+   */
+  getGuides() {
+    return this.guides;
+  }
+  /**
+   * Clear all snap guides
+   */
+  clearGuides() {
+    this.guides = [];
+  }
+  /**
+   * Clear sticky snap state
+   */
+  clearSnapState() {
+    this.activeSnaps.x = null, this.activeSnaps.y = null;
+  }
+  /**
+   * ADR-0060: replace the set of extra snap rects (focused-piece bounds
+   * etc.). Pass `[]` to clear. Effective on the next snap operation.
+   */
+  setExtraSnapRects(t) {
+    this._extraSnapRects = t;
+  }
+  /**
+   * Populate the spatial grid with anchor points from the given elements.
+   * Each element produces ~9 anchor points (corners, edge midpoints, center).
+   * The grid enables O(1) amortized lookup of nearby anchors by axis.
+   *
+   * Also folds in `_extraSnapRects` (set via `setExtraSnapRects`) so
+   * a focused piece in spread mode contributes its corners / edges /
+   * center as snap targets even though there's no real BaseElement.
+   */
+  _populateSpatialGrid(t) {
+    this._spatialGrid.clear(), this._anchorMetadata.clear();
+    for (const e of t) {
+      const o = bt.getSnapAnchors(e);
+      for (const [n, s] of Object.entries(o)) {
+        const i = `${e.id}:${n}`, a = {
+          x: s.x,
+          y: s.y,
+          id: i
+        };
+        this._spatialGrid.insert(a), this._anchorMetadata.set(i, {
+          elementId: e.id,
+          anchorKey: n,
+          point: s
+        });
+      }
+    }
+    for (const e of this._extraSnapRects) {
+      const o = e.x + e.width / 2, n = e.y + e.height / 2, s = e.x + e.width, i = e.y + e.height, a = {
+        topLeft: { x: e.x, y: e.y },
+        topRight: { x: s, y: e.y },
+        bottomLeft: { x: e.x, y: i },
+        bottomRight: { x: s, y: i },
+        topCenter: { x: o, y: e.y },
+        rightCenter: { x: s, y: n },
+        bottomCenter: { x: o, y: i },
+        leftCenter: { x: e.x, 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)) {
+        const c = `${r}:${l}`;
+        this._spatialGrid.insert({
+          x: h.x,
+          y: h.y,
+          id: c
+        }), this._anchorMetadata.set(c, {
+          elementId: r,
+          anchorKey: l,
+          point: h
+        });
+      }
+    }
+  }
+  /**
+   * Snap a position during drag operation
+   */
+  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 s = bt.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 = [], u = [];
+    for (const [y, S] of Object.entries(s)) {
+      const T = this._spatialGrid.queryNearAxis("x", S.x, this.snapThreshold);
+      for (const m of T) {
+        const C = this._anchorMetadata.get(m.id);
+        if (!C) continue;
+        const R = C.point, M = C.anchorKey, k = Math.abs(S.x - R.x);
+        if (k < this.snapThreshold) {
+          const v = {
+            snapTo: R.x,
+            offset: S.x - t.x,
+            // How far anchor is from element position
+            distance: k,
+            guide: {
+              type: "vertical",
+              x: R.x,
+              y1: Math.min(S.y, R.y) - 50,
+              y2: Math.max(S.y, R.y) + 50,
+              movingKey: y,
+              otherKey: M
+            }
+          };
+          c.push(v), k < l && (l = k, a = v);
+        }
+      }
+      const w = this._spatialGrid.queryNearAxis("y", S.y, this.snapThreshold);
+      for (const m of w) {
+        const C = this._anchorMetadata.get(m.id);
+        if (!C) continue;
+        const R = C.point, M = C.anchorKey, k = Math.abs(S.y - R.y);
+        if (k < this.snapThreshold) {
+          const v = {
+            snapTo: R.y,
+            offset: S.y - t.y,
+            distance: k,
+            guide: {
+              type: "horizontal",
+              y: R.y,
+              x1: Math.min(S.x, R.x) - 50,
+              x2: Math.max(S.x, R.x) + 50,
+              movingKey: y,
+              otherKey: M
+            }
+          };
+          d.push(v), k < h && (h = k, r = v);
+        }
+      }
+    }
+    let p = t.x, b = t.y;
+    a && (p = a.snapTo - a.offset), r && (b = r.snapTo - r.offset);
+    const g = /* @__PURE__ */ new Map(), f = /* @__PURE__ */ new Map();
+    for (const y of c) {
+      const S = g.get(y.snapTo);
+      (!S || y.distance < S.distance) && g.set(y.snapTo, y);
+    }
+    for (const y of d) {
+      const S = f.get(y.snapTo);
+      (!S || y.distance < S.distance) && f.set(y.snapTo, y);
+    }
+    for (const y of g.values())
+      u.push(y.guide);
+    for (const y of f.values())
+      u.push(y.guide);
+    return this.guides = u, { x: p, y: b };
+  }
+  /**
+   * Calculate what the frozen font size should be at the snap point
+   * This ensures consistent font size regardless of which side of threshold you enter from
+   */
+  _calculateFrozenFontSizeAtSnap(t, e, o, n, s) {
+    if (!s) return t.fontSize ?? 0;
+    const i = n != null && n.anchor ? String(n.anchor) : "";
+    if (!(n && (i.includes("top") || i.includes("bottom"))))
+      return s.fontSize ?? 0;
+    const r = lt(t) ?? t.width ?? s.width;
+    let l = r;
+    i.includes("right") && e !== 0 ? l = r + e : i.includes("left") && e !== 0 && (l = r - e);
+    const h = l / s.width;
+    return (s.fontSize ?? 0) * h;
+  }
+  /**
+   * Check if this will be a position-based snap (vs dimension-based)
+   * Position-based snaps adjust position to align edges when dimensions can't be modified
+   * Used for text elements where height is derived, not settable
+   */
+  _isPositionBasedSnap(t, e) {
+    return e === "x" ? !1 : e === "y" ? !(mt(t) !== void 0 || t.height !== void 0 && typeof t.height == "number") : !1;
+  }
+  /**
+   * Determine which snap keys to use based on the resize handle
+   */
+  _getSnapKeysForHandle(t) {
+    return !t || !t.anchor ? ["topLeft", "topRight", "bottomLeft", "bottomRight"] : t.anchor === "top-left" || t.anchor === "topLeft" ? ["topLeft"] : t.anchor === "top-right" || t.anchor === "topRight" ? ["topRight"] : t.anchor === "bottom-left" || t.anchor === "bottomLeft" ? ["bottomLeft"] : t.anchor === "bottom-right" || t.anchor === "bottomRight" ? ["bottomRight"] : t.anchor.includes("left") ? ["topLeft", "bottomLeft"] : t.anchor.includes("right") ? ["topRight", "bottomRight"] : t.anchor.includes("top") ? ["topLeft", "topRight"] : t.anchor.includes("bottom") ? ["bottomLeft", "bottomRight"] : [];
+  }
+  /**
+   * Get all possible target snap keys (corners only, no center points)
+   */
+  _getTargetSnapKeys() {
+    return ["topLeft", "topRight", "bottomLeft", "bottomRight"];
+  }
+  /**
+   * Find all X-axis snaps within threshold.
+   * Uses the spatial grid (pre-populated via _populateSpatialGrid) for
+   * O(1) amortized lookup instead of scanning all other elements.
+   */
+  _findXSnaps(t, e, o, n) {
+    const s = [], i = new Set(n);
+    for (const a of o) {
+      const r = t[a];
+      if (!r) continue;
+      const l = this._spatialGrid.queryNearAxis("x", r.x, this.snapThreshold);
+      for (const h of l) {
+        const c = this._anchorMetadata.get(h.id);
+        if (!c || !i.has(c.anchorKey)) continue;
+        const d = c.point, u = c.anchorKey, p = Math.abs(r.x - d.x);
+        p < this.snapThreshold && s.push({
+          distance: p,
+          snapTo: d.x,
+          currentValue: r.x,
+          guide: {
+            type: "vertical",
+            x: d.x,
+            y1: Math.min(r.y, d.y) - 50,
+            y2: Math.max(r.y, d.y) + 50,
+            movingKey: a,
+            otherKey: u
+          }
+        });
+      }
+    }
+    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, 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, u = c.anchorKey, p = Math.abs(r.y - d.y);
+        p < this.snapThreshold && s.push({
+          distance: p,
+          snapTo: d.y,
+          currentValue: r.y,
+          guide: {
+            type: "horizontal",
+            y: d.y,
+            x1: Math.min(r.x, d.x) - 50,
+            x2: Math.max(r.x, d.x) + 50,
+            movingKey: a,
+            otherKey: u
+          }
+        });
+      }
+    }
+    return s;
+  }
+  /**
+   * Sort snaps by distance and prioritize based on handle anchor
+   */
+  _prioritizeSnaps(t, e, o) {
+    if (!e || !e.anchor) {
+      t.sort((n, s) => n.distance - s.distance);
+      return;
+    }
+    o === "x" ? e.anchor.includes("left") ? t.sort((n, s) => {
+      const i = n.guide.movingKey.includes("left") ? -1e3 : 0, a = s.guide.movingKey.includes("left") ? -1e3 : 0;
+      return n.distance + i - (s.distance + a);
+    }) : e.anchor.includes("right") ? t.sort((n, s) => {
+      const i = n.guide.movingKey.includes("right") ? -1e3 : 0, a = s.guide.movingKey.includes("right") ? -1e3 : 0;
+      return n.distance + i - (s.distance + a);
+    }) : t.sort((n, s) => n.distance - s.distance) : o === "y" && (e.anchor.includes("top") ? t.sort((n, s) => {
+      const i = n.guide.movingKey.includes("top") ? -1e3 : 0, a = s.guide.movingKey.includes("top") ? -1e3 : 0;
+      return n.distance + i - (s.distance + a);
+    }) : e.anchor.includes("bottom") ? t.sort((n, s) => {
+      const i = n.guide.movingKey.includes("bottom") ? -1e3 : 0, a = s.guide.movingKey.includes("bottom") ? -1e3 : 0;
+      return n.distance + i - (s.distance + a);
+    }) : t.sort((n, s) => n.distance - s.distance));
+  }
+  /**
+   * Create a guide visualization for an active snap
+   */
+  _createGuideForSnap(t, e, o, n, s) {
+    const i = o[e];
+    if (!i) return null;
+    if (s === "x") {
+      let a = 1 / 0, r = -1 / 0;
+      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);
+        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));
+      }
+      return (!isFinite(a) || !isFinite(r)) && (a = i.y, r = i.y), {
+        snapTo: t.snapTo,
+        currentValue: i.x,
+        distance: 0,
+        guide: {
+          type: "vertical",
+          x: t.snapTo,
+          y1: a - 50,
+          y2: r + 50,
+          movingKey: e,
+          otherKey: "snap"
+        }
+      };
+    } else if (s === "y") {
+      let a = 1 / 0, r = -1 / 0;
+      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);
+        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));
+      }
+      return (!isFinite(a) || !isFinite(r)) && (a = i.x, r = i.x), {
+        snapTo: t.snapTo,
+        currentValue: i.y,
+        distance: 0,
+        guide: {
+          type: "horizontal",
+          y: t.snapTo,
+          x1: a - 50,
+          x2: r + 50,
+          movingKey: e,
+          otherKey: "snap"
+        }
+      };
+    }
+    return null;
+  }
+  /**
+   * Calculate aspect-ratio-aware sticky threshold for a given axis
+   * Wide elements move faster horizontally, tall elements move faster vertically
+   * Adjust threshold to compensate for this velocity difference
+   */
+  _getAdjustedStickyThreshold(t, e) {
+    const o = e.getVisualBoundingBox(), n = o.width / o.height;
+    let s = this.stickyThreshold;
+    return t === "x" ? n > 1 && (s = this.stickyThreshold / Math.sqrt(n)) : t === "y" && n < 1 && (s = this.stickyThreshold * Math.sqrt(n)), s;
+  }
+  /**
+   * Calculate what dimensions should be when edge reaches snap point
+   * This ensures frozen dimensions match the geometry at the snap position
+   *
+   * The key insight: When a snap is first detected (edge within 5px of guideline),
+   * we need to freeze dimensions at what they WILL BE when the edge reaches the snap point,
+   * not what they ARE at the moment of detection. This prevents visual "jumps" during
+   * corner resize because position compensation expects dimensions to match the snap point.
+   *
+   * @param element - The element being resized
+   * @param axis - 'x' or 'y' axis of the snap
+   * @param snapDelta - Distance to move to reach snap point (can be positive or negative)
+   * @param anchorKey - Which anchor is snapping (e.g., 'topRight', 'bottomLeft', etc.)
+   * @param handle - The resize handle being dragged
+   * @returns {Object} { frozenWidth, frozenHeight } - Dimensions at snap point
+   */
+  _calculateFrozenDimensionsAtSnap(t, e, o, n, s) {
+    const i = lt(t) ?? t.width ?? 0, a = mt(t) ?? t.height ?? 0;
+    let r = i, l = a;
+    const h = t.transformType === "image", c = h ? t.imageAspectRatio || (i && a ? i / a : null) : null, d = n.toLowerCase();
+    return e === "x" ? d.includes("right") ? (r = i + o, h && c && (l = r / c)) : d.includes("left") && (r = i - o, h && c && (l = r / c)) : e === "y" && (d.includes("bottom") ? (l = a + o, h && c && (r = l * c)) : d.includes("top") && (l = a - o, h && c && (r = l * c))), { frozenWidth: r, frozenHeight: l };
+  }
+  /**
+   * Process sticky snapping for a single axis
+   * @returns {Object} { snapDelta, bestSnap }
+   */
+  _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, u = Math.abs(d - r.snapTo), p = this._getAdjustedStickyThreshold(t, n);
+        if (u < p) {
+          if (l = r.snapTo - d, !(t === "y" && r.isPositionBasedSnap)) {
+            const g = this._calculateFrozenFontSizeAtSnap(
+              n,
+              t === "x" ? l : 0,
+              t === "y" ? l : 0,
+              s,
+              i
+            );
+            g !== r.frozenFontSize && (r.frozenFontSize = g);
+          }
+          h = this._createGuideForSnap(r, r.anchorKey, e, a, t);
+        } else {
+          const b = r;
+          if (this.activeSnaps[t] = null, o.length > 0 && o[0].distance < this.snapThreshold) {
+            h = o[0], l = h.snapTo - h.currentValue;
+            const g = b && b.anchorKey === h.guide.movingKey && Math.abs(b.snapTo - h.snapTo) < 1, f = g ? b.frozenFontSize : this._calculateFrozenFontSizeAtSnap(
+              n,
+              t === "x" ? l : 0,
+              t === "y" ? l : 0,
+              s,
+              i
+            ), y = this._isPositionBasedSnap(n, t);
+            let S;
+            g ? S = b.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 };
+            const T = this._calculateFrozenDimensionsAtSnap(
+              n,
+              t,
+              l,
+              h.guide.movingKey,
+              s
+            );
+            this.activeSnaps[t] = {
+              snapTo: h.snapTo,
+              anchorKey: h.guide.movingKey,
+              frozenFontSize: f,
+              frozenWidth: T.frozenWidth,
+              frozenHeight: T.frozenHeight,
+              frozenPosition: S,
+              isPositionBasedSnap: y
+            };
+          }
+        }
+      } else
+        this.activeSnaps[t] = null;
+    } else if (o.length > 0 && o[0].distance < this.snapThreshold) {
+      h = o[0], l = h.snapTo - h.currentValue;
+      const c = this.activeSnaps[t], d = c && c.anchorKey === h.guide.movingKey && Math.abs(c.snapTo - h.snapTo) < 1, u = d ? c.frozenFontSize : this._calculateFrozenFontSizeAtSnap(
+        n,
+        t === "x" ? l : 0,
+        t === "y" ? l : 0,
+        s,
+        i
+      ), p = this._isPositionBasedSnap(n, t);
+      let b;
+      d ? b = c.frozenPosition : p ? b = {
+        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(
+        n,
+        t,
+        l,
+        h.guide.movingKey,
+        s
+      );
+      this.activeSnaps[t] = {
+        snapTo: h.snapTo,
+        anchorKey: h.guide.movingKey,
+        frozenFontSize: u,
+        frozenWidth: g.frozenWidth,
+        frozenHeight: g.frozenHeight,
+        frozenPosition: b,
+        isPositionBasedSnap: p
+      };
+    }
+    return { snapDelta: l, bestSnap: h };
+  }
+  /**
+   * Adjust element for right edge resize
+   */
+  _adjustElementForRightResize(t, e, o) {
+    const n = t.getVisualBoundingBox(), s = t.transformType === "image";
+    if (!s) {
+      const i = lt(t);
+      i !== void 0 ? vt(t, i + e) : t.width !== void 0 && (t.width += e);
+    }
+    if (o.anchor === "middle-right") {
+      const i = ht.toRadiansInverse(t.rotation), a = Math.cos(i), r = Math.sin(i);
+      t.x += e / 2 * a, t.y += e / 2 * r;
+    } else if (!s) {
+      const a = t.getVisualBoundingBox().x - n.x;
+      a !== 0 && (t.x -= a);
+    }
+  }
+  /**
+   * Adjust element for left edge resize
+   */
+  _adjustElementForLeftResize(t, e, o) {
+    const n = t.getVisualBoundingBox(), s = t.transformType === "image";
+    if (!s) {
+      const i = lt(t);
+      i !== void 0 ? vt(t, i - e) : t.width !== void 0 && (t.width -= e);
+    }
+    if (o.anchor === "middle-left") {
+      const i = ht.toRadiansInverse(t.rotation), a = Math.cos(i), r = Math.sin(i);
+      t.x += e / 2 * a, t.y += e / 2 * r;
+    } else if (t.x += e, !s) {
+      const i = t.getVisualBoundingBox(), a = i.x + i.width - (n.x + n.width);
+      a !== 0 && (t.x -= a);
+    }
+  }
+  /**
+   * Adjust element for bottom edge resize
+   */
+  _adjustElementForBottomResize(t, e, o) {
+    const n = t.getVisualBoundingBox(), s = t.transformType === "image";
+    if (!s) {
+      const r = mt(t);
+      r !== void 0 ? kt(t, r + e) : t.height !== void 0 && (t.height += e);
+    }
+    const i = t.getVisualBoundingBox(), a = Math.abs(i.height - n.height) > 0.01;
+    if (o.anchor === "middle-bottom") {
+      const r = ht.toRadiansInverse(t.rotation), l = Math.cos(r), h = Math.sin(r);
+      t.x -= e / 2 * h, t.y += e / 2 * l;
+    } else if (!s && a) {
+      const r = i.y - n.y;
+      r !== 0 && (t.y -= r);
+    } else s || (t.y += e);
+  }
+  /**
+   * Adjust element for top edge resize
+   */
+  _adjustElementForTopResize(t, e, o) {
+    const n = t.getVisualBoundingBox(), s = t.transformType === "image";
+    if (!s) {
+      const r = mt(t);
+      r !== void 0 ? kt(t, r - e) : t.height !== void 0 && (t.height -= e);
+    }
+    const i = t.getVisualBoundingBox(), a = Math.abs(i.height - n.height) > 0.01;
+    if (o.anchor === "middle-top") {
+      const r = ht.toRadiansInverse(t.rotation), l = Math.cos(r), h = Math.sin(r);
+      t.x -= e / 2 * h, t.y += e / 2 * l;
+    } else {
+      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);
+      }
+    }
+  }
+  /**
+   * Snap dimensions during resize operation
+   *
+   * @param {object} result - Resize result AFTER ResizeHandler processes it
+   * @param {array} allElements - All elements in the scene
+   * @param {object} startData - Original data from when resize started (for font size preservation)
+   * @returns {object} Modified resize result with adjusted element
+   */
+  snapDimensions(t, e, o = null) {
+    var m, C, R, M, k;
+    if (!this.enabled || !e)
+      return this.clearGuides(), t;
+    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 v = n.clone();
+      if (v.transformData) {
+        const P = n.getVisualBoundingBox(), H = P.width, L = P.height, D = (o == null ? void 0 : o.width) ?? n.width ?? 0, O = (o == null ? void 0 : o.height) ?? n.height ?? 0, W = (o == null ? void 0 : o.visualWidth) ?? H, V = (o == null ? void 0 : o.visualHeight) ?? L, A = t.unfrozenDimensions.width / W, $ = t.unfrozenDimensions.height / V;
+        vt(v, D * A), kt(v, O * $);
+      }
+      i = bt.getSnapAnchors(v);
+    } else
+      i = bt.getSnapAnchors(n);
+    const l = e.filter((v) => v.id !== n.id);
+    if (l.length === 0)
+      return this.clearGuides(), t;
+    this._populateSpatialGrid(l);
+    const h = this._getSnapKeysForHandle(s), c = this._getTargetSnapKeys(), d = this._findXSnaps(i, l, h, c), u = this._findYSnaps(i, l, h, c);
+    this._prioritizeSnaps(d, s, "x"), this._prioritizeSnaps(u, s, "y");
+    const p = this._processStickySnap("x", i, d, n, s, o, l), b = this._processStickySnap("y", i, u, n, s, o, l), g = p.snapDelta, f = b.snapDelta, y = p.bestSnap, S = b.bestSnap, T = [];
+    y && T.push(y.guide), S && T.push(S.guide), this.guides = T, T.length > 0;
+    const w = s && (s.anchor === "top-left" || s.anchor === "top-right" || s.anchor === "bottom-left" || s.anchor === "bottom-right");
+    if (a && w && (g !== 0 || f !== 0))
+      return t;
+    if (g !== 0 || f !== 0) {
+      const v = n.clone(), P = this.activeSnaps.x || this.activeSnaps.y, H = (P == null ? void 0 : P.frozenFontSize) ?? n.fontSize ?? 0, L = (P == null ? void 0 : P.frozenWidth) ?? lt(n) ?? n.width ?? 0, D = (P == null ? void 0 : P.frozenHeight) ?? mt(n) ?? n.height ?? 0, O = (P == null ? void 0 : P.frozenPosition) ?? { x: n.x, y: n.y }, W = v.isCropping && !String(s.anchor).startsWith("crop-");
+      if (!W)
+        if (s && s.anchor) {
+          if (g !== 0) {
+            const E = (m = this.activeSnaps.x) == null ? void 0 : m.anchorKey, I = E == null ? void 0 : E.toLowerCase();
+            I && I.includes("right") ? this._adjustElementForRightResize(v, g, s) : I && I.includes("left") ? this._adjustElementForLeftResize(v, g, s) : v.x += g;
+          }
+          if (f !== 0) {
+            const E = (C = this.activeSnaps.y) == null ? void 0 : C.anchorKey, I = E == null ? void 0 : E.toLowerCase();
+            I && I.includes("bottom") ? this._adjustElementForBottomResize(v, f, s) : I && I.includes("top") ? this._adjustElementForTopResize(v, f, s) : v.y += f;
+          }
+        } else
+          v.x += g, v.y += f;
+      v.fontSize !== void 0 && (v.fontSize = H);
+      const V = v.transformType === "image", A = this.activeSnaps.x !== null || this.activeSnaps.y !== null;
+      if (V && A) {
+        if (lt(v) !== void 0) {
+          const E = this.activeSnaps.x || this.activeSnaps.y;
+          let I = L, _ = D;
+          E && (I = E.frozenWidth ?? I, _ = E.frozenHeight ?? _);
+          const B = lt(n), F = mt(n), G = v.imageAspectRatio || (B && F ? B / F : null);
+          G && G !== 0 && (_ = I / G), vt(v, I), kt(v, _), E && (E.frozenWidth = I, E.frozenHeight = _);
+        }
+      } else
+        (((R = this.activeSnaps.y) == null ? void 0 : R.isPositionBasedSnap) || !1) && (lt(v) !== void 0 ? vt(v, L) : v.width !== void 0 && (v.width = L));
+      const $ = s && (s.anchor === "middle-left" || s.anchor === "middle-right"), j = s && (s.anchor === "middle-top" || s.anchor === "middle-bottom"), J = ((M = this.activeSnaps.x) == null ? void 0 : M.isPositionBasedSnap) || !1, X = ((k = this.activeSnaps.y) == null ? void 0 : k.isPositionBasedSnap) || !1;
+      return (g === 0 || J) && !$ && !j && !W && (v.x = O.x), (f === 0 || X) && !j && !$ && !W && (v.y = O.y), {
+        ...t,
+        element: v,
+        snapAdjustment: { dx: g, dy: f },
+        // Flag to indicate we're in sticky snap mode (used to freeze font size)
+        isInStickySnap: !0
+      };
+    }
+    return t;
+  }
+  /**
+   * Snap rotation (for future implementation)
+   */
+  snapRotation(t, e, o) {
+    if (!this.enabled) return t;
+    const n = [0, 45, 90, 135, 180, 225, 270, 315, 360], s = 5;
+    for (const i of n)
+      if (de(t, i, s))
+        return i;
+    return t;
+  }
+}
+class tn {
+  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 = [];
+  }
+  /**
+   * Enable or disable spacing detection
+   */
+  setEnabled(t) {
+    this.enabled = t;
+  }
+  /**
+   * Set detection threshold in pixels
+   */
+  setDetectionThreshold(t) {
+    this.detectionThreshold = t;
+  }
+  /**
+   * Get current spacing indicators for rendering
+   */
+  getIndicators() {
+    return this.indicators;
+  }
+  /**
+   * Clear all spacing indicators
+   */
+  clearIndicators() {
+    this.indicators = [], this.lastSnapTarget = null;
+  }
+  /**
+   * Snap position to match consistent spacing patterns
+   * Returns adjusted position if spacing snap is detected, otherwise returns original position
+   */
+  snapToSpacing(t, e, o) {
+    if (!this.enabled || !o)
+      return t;
+    const n = Gt, s = o.filter((g) => g.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, u = !1;
+    const p = s.filter((g) => {
+      const f = g.getVisualBoundingBox();
+      return !(a.x + a.width < f.x || a.x > f.x + f.width);
+    });
+    if (p.sort((g, f) => {
+      const y = g.getVisualBoundingBox(), S = f.getVisualBoundingBox();
+      return y.y - S.y;
+    }), p.length >= 1) {
+      let g = null, f = null;
+      for (const T of p) {
+        const w = T.getVisualBoundingBox();
+        w.y + w.height <= a.y ? (!g || w.y > g.getVisualBoundingBox().y) && (g = T) : w.y >= a.y + a.height && (!f || w.y < f.getVisualBoundingBox().y) && (f = T);
+      }
+      const y = [];
+      for (let T = 0; T < p.length - 1; T++) {
+        const w = p[T].getVisualBoundingBox(), C = p[T + 1].getVisualBoundingBox().y - (w.y + w.height);
+        y.push(C);
+      }
+      let S = null;
+      if (g) {
+        const T = g.getVisualBoundingBox(), w = a.y - (T.y + T.height);
+        for (const m of y)
+          if (Math.abs(w - m) <= n) {
+            S = m;
+            break;
+          }
+      }
+      if (!S && f) {
+        const w = f.getVisualBoundingBox().y - (a.y + a.height);
+        for (const m of y)
+          if (Math.abs(w - m) <= n) {
+            S = m;
+            break;
+          }
+      }
+      if (S !== null && S > 0) {
+        if (g) {
+          const T = g.getVisualBoundingBox(), w = a.y - (T.y + T.height);
+          Math.abs(w - S) <= n && (c = T.y + T.height + S - l, u = !0);
+        }
+        if (!u && f) {
+          const T = f.getVisualBoundingBox(), w = T.y - (a.y + a.height);
+          Math.abs(w - S) <= n && (c = T.y - a.height - S - l, u = !0);
+        }
+      }
+    }
+    const b = s.filter((g) => {
+      const f = g.getVisualBoundingBox();
+      return !(a.y + a.height < f.y || a.y > f.y + f.height);
+    });
+    if (b.sort((g, f) => {
+      const y = g.getVisualBoundingBox(), S = f.getVisualBoundingBox();
+      return y.x - S.x;
+    }), b.length >= 1) {
+      let g = null, f = null;
+      for (const T of b) {
+        const w = T.getVisualBoundingBox();
+        w.x + w.width <= a.x ? (!g || w.x > g.getVisualBoundingBox().x) && (g = T) : w.x >= a.x + a.width && (!f || w.x < f.getVisualBoundingBox().x) && (f = T);
+      }
+      const y = [];
+      for (let T = 0; T < b.length - 1; T++) {
+        const w = b[T].getVisualBoundingBox(), C = b[T + 1].getVisualBoundingBox().x - (w.x + w.width);
+        y.push(C);
+      }
+      let S = null;
+      if (g) {
+        const T = g.getVisualBoundingBox(), w = a.x - (T.x + T.width);
+        for (const m of y)
+          if (Math.abs(w - m) <= n) {
+            S = m;
+            break;
+          }
+      }
+      if (!S && f) {
+        const w = f.getVisualBoundingBox().x - (a.x + a.width);
+        for (const m of y)
+          if (Math.abs(w - m) <= n) {
+            S = m;
+            break;
+          }
+      }
+      if (S !== null && S > 0) {
+        if (g) {
+          const T = g.getVisualBoundingBox(), w = a.x - (T.x + T.width);
+          Math.abs(w - S) <= n && (h = T.x + T.width + S - r, d = !0);
+        }
+        if (!d && f) {
+          const T = f.getVisualBoundingBox(), w = T.x - (a.x + a.width);
+          Math.abs(w - S) <= n && (h = T.x - a.width - S - r, d = !0);
+        }
+      }
+    }
+    return this.lastSnapTarget = d || u ? { x: h, y: c } : null, { x: h, y: c };
+  }
+  /**
+   * Detect spacing between a moving element and other elements
+   * Returns spacing indicators for the closest elements in each direction
+   * Also detects consistent spacing patterns (e.g., evenly spaced rows/columns)
+   * @param showAllMeasurements - When true (Alt key held), shows all spacing measurements, not just to moving element
+   */
+  detectSpacing(t, e, o = !1) {
+    if (!this.enabled || !e)
+      return this.clearIndicators(), [];
+    const n = e.filter((c) => c.id !== t.id);
+    if (n.length === 0)
+      return this.clearIndicators(), [];
+    const s = t.getVisualBoundingBox(), i = [], a = [], r = [], l = [];
+    for (const c of n) {
+      const d = c.getVisualBoundingBox(), u = s.x - (d.x + d.width), p = d.x - (s.x + s.width), b = s.y - (d.y + d.height), g = d.y - (s.y + s.height), f = !(s.y + s.height < d.y || s.y > d.y + d.height), y = !(s.x + s.width < d.x || s.x > d.x + d.width);
+      u >= this.minDistance && u < this.detectionThreshold && f && i.push({ element: c, distance: u }), p >= this.minDistance && p < this.detectionThreshold && f && a.push({ element: c, distance: p }), b >= this.minDistance && b < this.detectionThreshold && y && r.push({ element: c, distance: b }), g >= this.minDistance && g < this.detectionThreshold && y && l.push({ element: c, distance: g });
+    }
+    i.sort((c, d) => c.distance - d.distance), a.sort((c, d) => c.distance - d.distance), r.sort((c, d) => c.distance - d.distance), l.sort((c, d) => c.distance - d.distance);
+    const h = [];
+    if (o) {
+      const c = this.detectAllMeasurements(t, e);
+      h.push(...c);
+    } else {
+      if (i.length > 0) {
+        const c = this.detectConsistentSpacing(t, s, i, "left", n);
+        h.push(...c);
+      }
+      if (a.length > 0) {
+        const c = this.detectConsistentSpacing(
+          t,
+          s,
+          a,
+          "right",
+          n
+        );
+        h.push(...c);
+      }
+      if (r.length > 0) {
+        const c = this.detectConsistentSpacing(t, s, r, "top", n);
+        h.push(...c);
+      }
+      if (l.length > 0) {
+        const c = this.detectConsistentSpacing(
+          t,
+          s,
+          l,
+          "bottom",
+          n
+        );
+        h.push(...c);
+      }
+    }
+    return this.indicators = h, h;
+  }
+  /**
+   * Detect spacing from hovered element to ALL nearby elements (when Alt key is held)
+   * Shows measurements from the hovered element to other elements within detection threshold
+   */
+  detectAllMeasurements(t, e) {
+    const o = [], n = t.getVisualBoundingBox(), s = e.filter((l) => l.id !== t.id), i = this.detectionThreshold * 3;
+    let a = 0, r = 0;
+    for (const l of s) {
+      const h = l.getVisualBoundingBox();
+      if (Math.min(
+        Math.abs(n.x - (h.x + h.width)),
+        // left
+        Math.abs(h.x - (n.x + n.width)),
+        // right
+        Math.abs(n.y - (h.y + h.height)),
+        // top
+        Math.abs(h.y - (n.y + n.height))
+        // bottom
+      ) > i)
+        continue;
+      let d = 0, u = !1, p = 0, b = 0, g = 0;
+      const y = -30 * (a % 2 === 0 ? 1 : -1);
+      h.x >= n.x + n.width ? (d = h.x - (n.x + n.width), d >= this.minDistance && (u = !0, p = n.x + n.width, b = h.x, g = (n.y + n.height / 2 + h.y + h.height / 2) / 2 + y)) : n.x >= h.x + h.width && (d = n.x - (h.x + h.width), d >= this.minDistance && (u = !0, p = h.x + h.width, b = n.x, g = (n.y + n.height / 2 + h.y + h.height / 2) / 2 + y)), u && (o.push({
+        type: "horizontal",
+        distance: Math.round(d),
+        x1: p,
+        x2: b,
+        y: g,
+        labelX: (p + b) / 2,
+        labelY: g,
+        isAltHover: !0
+      }), a++);
+      let S = 0, T = !1, w = 0, m = 0, C = 0;
+      const M = 30 * (r % 2 === 0 ? 1 : -1);
+      h.y >= n.y + n.height ? (S = h.y - (n.y + n.height), S >= this.minDistance && (T = !0, w = (n.x + n.width / 2 + h.x + h.width / 2) / 2 + M, m = n.y + n.height, C = h.y)) : n.y >= h.y + h.height && (S = n.y - (h.y + h.height), S >= this.minDistance && (T = !0, w = (n.x + n.width / 2 + h.x + h.width / 2) / 2 + M, m = h.y + h.height, C = n.y)), T && (o.push({
+        type: "vertical",
+        distance: Math.round(S),
+        x: w,
+        y1: m,
+        y2: C,
+        labelX: w,
+        labelY: (m + C) / 2,
+        isAltHover: !0
+      }), r++);
+    }
+    return o;
+  }
+  /**
+   * Detect consistent spacing patterns (e.g., evenly spaced rows/columns)
+   * and create indicators for all matching spacings
+   */
+  detectConsistentSpacing(t, e, o, n, s) {
+    const i = [], r = o[0], l = r.distance, h = r.element.getVisualBoundingBox(), c = this.checkIfWouldSnap(e, l, n, s);
+    if (this.addIndicatorForDirection(i, e, h, l, n, c), n === "left" || n === "right") {
+      const d = s.filter((u) => {
+        if (u.id === t.id) return !1;
+        const p = u.getVisualBoundingBox();
+        return !(e.y + e.height < p.y || e.y > p.y + p.height);
+      });
+      if (d.sort((u, p) => {
+        const b = u.getVisualBoundingBox(), g = p.getVisualBoundingBox();
+        return b.x - g.x;
+      }), n === "left")
+        for (let u = 0; u < d.length - 1; u++) {
+          const p = d[u], b = d[u + 1], g = p.getVisualBoundingBox(), f = b.getVisualBoundingBox(), y = f.x - (g.x + g.width);
+          if (Math.abs(y - l) <= 16 && y >= this.minDistance) {
+            const S = Math.max(g.y, f.y), T = Math.min(g.y + g.height, f.y + f.height), w = (S + T) / 2;
+            i.push({
+              type: "horizontal",
+              distance: Math.round(y),
+              x1: g.x + g.width,
+              x2: f.x,
+              y: w,
+              labelX: (g.x + g.width + f.x) / 2,
+              labelY: w
+            });
+          }
+        }
+      else
+        for (let u = 0; u < d.length - 1; u++) {
+          const p = d[u], b = d[u + 1], g = p.getVisualBoundingBox(), f = b.getVisualBoundingBox(), y = f.x - (g.x + g.width);
+          if (Math.abs(y - l) <= 16 && y >= this.minDistance) {
+            const S = Math.max(g.y, f.y), T = Math.min(g.y + g.height, f.y + f.height), w = (S + T) / 2;
+            i.push({
+              type: "horizontal",
+              distance: Math.round(y),
+              x1: g.x + g.width,
+              x2: f.x,
+              y: w,
+              labelX: (g.x + g.width + f.x) / 2,
+              labelY: w
+            });
+          }
+        }
+    } else {
+      const d = s.filter((u) => {
+        if (u.id === t.id) return !1;
+        const p = u.getVisualBoundingBox();
+        return !(e.x + e.width < p.x || e.x > p.x + p.width);
+      });
+      if (d.sort((u, p) => {
+        const b = u.getVisualBoundingBox(), g = p.getVisualBoundingBox();
+        return b.y - g.y;
+      }), n === "top")
+        for (let u = 0; u < d.length - 1; u++) {
+          const p = d[u], b = d[u + 1], g = p.getVisualBoundingBox(), f = b.getVisualBoundingBox(), y = f.y - (g.y + g.height);
+          if (Math.abs(y - l) <= 16 && y >= this.minDistance) {
+            const S = Math.max(g.x, f.x), T = Math.min(g.x + g.width, f.x + f.width), w = (S + T) / 2;
+            i.push({
+              type: "vertical",
+              distance: Math.round(y),
+              x: w,
+              y1: g.y + g.height,
+              y2: f.y,
+              labelX: w,
+              labelY: (g.y + g.height + f.y) / 2
+            });
+          }
+        }
+      else
+        for (let u = 0; u < d.length - 1; u++) {
+          const p = d[u], b = d[u + 1], g = p.getVisualBoundingBox(), f = b.getVisualBoundingBox(), y = f.y - (g.y + g.height);
+          if (Math.abs(y - l) <= 16 && y >= this.minDistance) {
+            const S = Math.max(g.x, f.x), T = Math.min(g.x + g.width, f.x + f.width), w = (S + T) / 2;
+            i.push({
+              type: "vertical",
+              distance: Math.round(y),
+              x: w,
+              y1: g.y + g.height,
+              y2: f.y,
+              labelX: w,
+              labelY: (g.y + g.height + f.y) / 2
+            });
+          }
+        }
+    }
+    return i;
+  }
+  /**
+   * Check if spacing would snap to a pattern
+   */
+  checkIfWouldSnap(t, e, o, n) {
+    const s = Gt;
+    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);
+      });
+      if (i.length >= 1) {
+        i.sort((r, l) => {
+          const h = r.getVisualBoundingBox(), c = l.getVisualBoundingBox();
+          return h.y - c.y;
+        });
+        const a = [];
+        for (let r = 0; r < i.length - 1; r++) {
+          const l = i[r].getVisualBoundingBox(), c = i[r + 1].getVisualBoundingBox().y - (l.y + l.height);
+          a.push(c);
+        }
+        if (a.length > 0) {
+          const r = a.reduce((c, d) => c + d, 0) / a.length;
+          return Math.abs(e - r) <= s;
+        }
+      }
+      return !1;
+    } else {
+      const i = n.filter((a) => {
+        const r = a.getVisualBoundingBox();
+        return !(t.y + t.height < r.y || t.y > r.y + r.height);
+      });
+      if (i.length >= 1) {
+        i.sort((r, l) => {
+          const h = r.getVisualBoundingBox(), c = l.getVisualBoundingBox();
+          return h.x - c.x;
+        });
+        const a = [];
+        for (let r = 0; r < i.length - 1; r++) {
+          const l = i[r].getVisualBoundingBox(), c = i[r + 1].getVisualBoundingBox().x - (l.x + l.width);
+          a.push(c);
+        }
+        if (a.length > 0) {
+          const r = a.reduce((c, d) => c + d, 0) / a.length;
+          return Math.abs(e - r) <= s;
+        }
+      }
+      return !1;
+    }
+  }
+  /**
+   * Helper method to add a spacing indicator in a specific direction
+   */
+  addIndicatorForDirection(t, e, o, n, s, i = !1) {
+    if (s === "left") {
+      const a = Math.max(e.y, o.y), r = Math.min(e.y + e.height, o.y + o.height), l = (a + r) / 2;
+      t.push({
+        type: "horizontal",
+        distance: Math.round(n),
+        x1: o.x + o.width,
+        x2: e.x,
+        y: l,
+        labelX: (o.x + o.width + e.x) / 2,
+        labelY: l,
+        isSnapTarget: i
+      });
+    } else if (s === "right") {
+      const a = Math.max(e.y, o.y), r = Math.min(e.y + e.height, o.y + o.height), l = (a + r) / 2;
+      t.push({
+        type: "horizontal",
+        distance: Math.round(n),
+        x1: e.x + e.width,
+        x2: o.x,
+        y: l,
+        labelX: (e.x + e.width + o.x) / 2,
+        labelY: l,
+        isSnapTarget: i
+      });
+    } else if (s === "top") {
+      const a = Math.max(e.x, o.x), r = Math.min(e.x + e.width, o.x + o.width), l = (a + r) / 2;
+      t.push({
+        type: "vertical",
+        distance: Math.round(n),
+        x: l,
+        y1: o.y + o.height,
+        y2: e.y,
+        labelX: l,
+        labelY: (o.y + o.height + e.y) / 2,
+        isSnapTarget: i
+      });
+    } else if (s === "bottom") {
+      const a = Math.max(e.x, o.x), r = Math.min(e.x + e.width, o.x + o.width), l = (a + r) / 2;
+      t.push({
+        type: "vertical",
+        distance: Math.round(n),
+        x: l,
+        y1: e.y + e.height,
+        y2: o.y,
+        labelX: l,
+        labelY: (e.y + e.height + o.y) / 2,
+        isSnapTarget: i
+      });
+    }
+  }
+}
+const Lt = zt("ArtboardRenderer"), Ge = {
+  showLabel: !0,
+  showBorder: !0,
+  borderColor: "",
+  // '' = use getThemeArtboardBorderColor() at render time
+  borderWidth: 1,
+  labelFontSize: 14,
+  labelColor: "",
+  // '' = use getThemeArtboardLabelColor() at render time
+  labelPadding: 8,
+  selectedBorderColor: "",
+  // '' = use getThemeAccentColor() at render time
+  selectedBorderWidth: 2,
+  showPreviewBackground: !0,
+  // Show preview by default in editor
+  borderRadius: 0
+  // Default to no border radius (sharp corners)
+};
+class oe {
+  constructor(t = {}) {
+    this.options = { ...Ge, ...t };
+  }
+  /**
+   * Render an artboard
+   */
+  render(t, e, o = !1) {
+    t.save(), this.renderBackground(t, e), this.options.showBorder && this.renderBorder(t, e, o), this.options.showLabel && this.renderLabel(t, e, o), t.restore();
+  }
+  /**
+   * Render artboard background
+   * Optionally renders preview background color for t-shirt design preview
+   * Preview background is NEVER exported - only shown in editor
+   * Background is clipped to the artboard's clipShape
+   */
+  renderBackground(t, e) {
+    t.save(), this.applyClipPath(t, e), this.options.showPreviewBackground && e.previewBackgroundColor && e.previewBackgroundColor !== "transparent" && (t.fillStyle = e.previewBackgroundColor, t.fillRect(e.x, e.y, e.width, e.height)), e.backgroundType === "texture" && e.backgroundTexture ? this.renderTextureBackground(t, e) : e.backgroundType === "transparent" || e.backgroundColor === "transparent" ? this.renderCheckerboard(t, e.x, e.y, e.width, e.height) : (t.fillStyle = e.backgroundColor, t.fillRect(e.x, e.y, e.width, e.height)), t.restore();
+  }
+  /**
+   * Render texture background
+   * Renders preset color as base layer, then texture on top
+   */
+  renderTextureBackground(t, e) {
+    const o = Ht.getTexture(e.backgroundTexture), n = Ht.getTexturePresetColor(e.backgroundTexture);
+    if (t.fillStyle = n, t.fillRect(e.x, e.y, e.width, e.height), !o || !o.complete) {
+      Ht.loadTexture(e.backgroundTexture).catch((s) => {
+        Lt.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(o, e.x, e.y, e.width, e.height), t.restore();
+  }
+  /**
+   * Render a checkerboard pattern for transparent backgrounds
+   */
+  renderCheckerboard(t, e, o, n, s) {
+    const a = "#ffffff", r = "#d0d0d0";
+    t.save(), t.beginPath(), t.rect(e, o, n, s), t.clip(), t.fillStyle = a, t.fillRect(e, o, n, s), t.fillStyle = r;
+    for (let l = 0; l < Math.ceil(s / 16); l++)
+      for (let h = 0; h < Math.ceil(n / 16); h++)
+        (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, o) {
+    const { x: n, y: s, width: i, height: a, clipShape: r } = e, l = this.options.borderColor || fe(), h = this.options.selectedBorderColor || tt();
+    if (t.strokeStyle = o ? h : l, t.lineWidth = o ? this.options.selectedBorderWidth : this.options.borderWidth, t.beginPath(), !r || r === "rectangle")
+      if (this.options.borderRadius > 0) {
+        const c = Math.min(this.options.borderRadius, Math.min(i, a) / 2);
+        this.roundedRect(t, n, s, i, a, c);
+      } else
+        t.rect(n, s, i, a);
+    else if (r === "circle") {
+      const c = n + i / 2, d = s + a / 2, u = Math.min(i, a) / 2;
+      t.arc(c, d, u, 0, Math.PI * 2);
+    } else if (typeof r == "object" && r.type === "rounded") {
+      const c = Math.min(r.radius, Math.min(i, a) / 2);
+      this.roundedRect(t, n, s, i, a, c);
+    } else if (typeof r == "object" && r.type === "path")
+      try {
+        const c = new Path2D(r.d);
+        t.save(), t.translate(n, s), t.stroke(c), t.restore();
+        return;
+      } catch (c) {
+        Lt.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, 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 || tt(), h = this.options.labelColor || ge();
+    t.fillStyle = o ? l : h, t.textAlign = "left", t.textBaseline = "bottom", t.fillText(i, a, r);
+  }
+  /**
+   * Render multiple artboards
+   */
+  renderMultiple(t, e, o) {
+    e.forEach((n) => {
+      const s = n.id === o;
+      this.render(t, n, s);
+    });
+  }
+  /**
+   * Clip rendering to artboard bounds (respects clipShape)
+   * Use this to clip element rendering to stay within artboard
+   */
+  clipToArtboard(t, e) {
+    t.save(), this.applyClipPath(t, e);
+  }
+  /**
+   * Apply clip path based on artboard's clipShape
+   * This creates the clip region for the given artboard
+   * If borderRadius option is set and no special clipShape, uses rounded rectangle
+   */
+  applyClipPath(t, e) {
+    const { x: o, y: n, width: s, height: i, clipShape: a } = e;
+    if (this.options.borderRadius > 0, t.beginPath(), !a || a === "rectangle")
+      if (this.options.borderRadius > 0) {
+        const r = Math.min(this.options.borderRadius, Math.min(s, i) / 2);
+        this.roundedRect(t, o, n, s, i, r);
+      } else
+        t.rect(o, n, s, i);
+    else if (a === "circle") {
+      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(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(o, n), t.clip(r), t.translate(-o, -n);
+        return;
+      } catch (r) {
+        Lt.warn("Invalid SVG path, falling back to rectangle:", r), t.rect(o, n, s, i);
+      }
+    t.clip();
+  }
+  /**
+   * Draw a rounded rectangle path
+   * Helper method for rounded clip shapes
+   */
+  roundedRect(t, e, o, n, s, i) {
+    typeof t.roundRect == "function" ? t.roundRect(e, o, n, s, i) : (t.moveTo(e + i, o), t.lineTo(e + n - i, o), t.arcTo(e + n, o, e + n, o + i, i), t.lineTo(e + n, o + s - i), t.arcTo(e + n, o + s, e + n - i, o + s, i), t.lineTo(e + i, o + s), t.arcTo(e, o + s, e, o + s - i, i), t.lineTo(e, o + i), t.arcTo(e, o, e + i, o, i));
+  }
+  /**
+   * Restore after clipping
+   */
+  restoreClip(t) {
+    t.restore();
+  }
+  /**
+   * Render artboard outline (for dragging/resizing preview)
+   */
+  renderOutline(t, e, o, n, s, i = !1) {
+    t.save(), t.setLineDash([5, 5]), t.strokeStyle = i ? "#0066cc" : "#999", t.lineWidth = 1, t.strokeRect(e, o, n, s), t.restore();
+  }
+  /**
+   * Render resize handles for artboard
+   */
+  renderResizeHandles(t, e) {
+    const { x: n, y: s, width: i, height: a } = e, r = [
+      { x: n, y: s },
+      // top-left
+      { x: n + i, y: s },
+      // top-right
+      { x: n, y: s + a },
+      // bottom-left
+      { x: n + i, y: s + a }
+      // bottom-right
+    ];
+    t.save(), r.forEach((l) => {
+      t.fillStyle = "#fff", t.strokeStyle = "#0066cc", t.lineWidth = 2, t.fillRect(l.x - 8 / 2, l.y - 8 / 2, 8, 8), t.strokeRect(l.x - 8 / 2, l.y - 8 / 2, 8, 8);
+    }), t.restore();
+  }
+  /**
+   * Update options
+   */
+  setOptions(t) {
+    this.options = { ...this.options, ...t };
+  }
+  /**
+   * Get current options
+   */
+  getOptions() {
+    return { ...this.options };
+  }
+  /**
+   * Create export-safe renderer
+   * Returns a new renderer instance with preview background disabled
+   * Use this when exporting to ensure preview background is never included
+   */
+  static createForExport(t = {}) {
+    return new oe({
+      ...t,
+      showPreviewBackground: !1
+      // CRITICAL: Never show preview in exports
+    });
+  }
+  /**
+   * Check if preview background would be rendered for given artboard
+   */
+  willRenderPreviewBackground(t) {
+    return !!(this.options.showPreviewBackground && t.previewBackgroundColor && t.previewBackgroundColor !== "transparent");
+  }
+}
+function en(x) {
+  return x instanceof be;
+}
+function Ye(x) {
+  return x instanceof Qt;
+}
+function Dt(x) {
+  return x instanceof ue;
+}
+function nn(x) {
+  return x instanceof ye;
+}
+function sn(x) {
+  return x instanceof pe;
+}
+class St {
+  /**
+   * Render selection box layer
+   */
+  static renderSelectionLayer(t, e, o, n = 1) {
+    if (!e || e.visible === !1 || o && o.getMode() === "drag" || "isGroup" in e && e.isGroup) return;
+    const i = e.getVisualBoundingBox(), a = e.getRotationAnchor();
+    t.save(), t.strokeStyle = tt(t.canvas), t.lineWidth = 2, t.translate(a.x * n, a.y * n), t.rotate(ht.toRadians(e.rotation)), t.translate(-a.x * n, -a.y * n);
+    const r = ot.canvas.selectionPadding;
+    t.strokeRect(
+      (i.x - r) * n,
+      (i.y - r) * n,
+      (i.width + r * 2) * n,
+      (i.height + r * 2) * n
+    ), t.restore();
+  }
+  /**
+   * Render position and size info below the selected element
+   * Only shows dimensions (width x height) while resizing
+   */
+  static renderPositionSizeInfo(t, e, o, n, s = 1) {
+    if (!e || !(o != null && o.rotationHandle) || (n == null ? void 0 : n.getMode()) !== "resize") return;
+    const i = e.getVisualBoundingBox(), a = Math.round(i.width), r = Math.round(i.height), l = `${a} × ${r}`, h = o.rotationHandle, c = h.x * s, d = h.y * s - 20;
+    t.save(), t.font = "10px system-ui, -apple-system, sans-serif";
+    const p = t.measureText(l).width + 12, b = 18;
+    t.shadowColor = me(t.canvas), t.shadowBlur = 4, t.shadowOffsetY = 1, t.fillStyle = Se(t.canvas), t.beginPath(), t.roundRect(
+      c - p / 2,
+      d - b / 2,
+      p,
+      b,
+      3
+      // Smaller border radius
+    ), t.fill(), t.shadowColor = "transparent", t.shadowBlur = 0, t.shadowOffsetY = 0, t.fillStyle = Te(t.canvas), t.textAlign = "center", t.textBaseline = "middle", t.fillText(l, c, d + 0.5), t.restore();
+  }
+  /**
+   * Render transform handles layer
+   */
+  static renderHandlesLayer(t, e, o, n, s, i, a, r = 1, l = !0) {
+    if (!e || e.visible === !1 || a.getMode() === "drag") return;
+    const c = i.type === "rotation-handle", d = i.type === "resize-handle" ? i.data : null, u = a.getMode() === "resize", p = u ? a.getActiveHandle() : null;
+    o.render(
+      t,
+      l,
+      n,
+      s,
+      c,
+      d,
+      u,
+      p,
+      r,
+      !0
+      // Render rotation handle on canvas (not React)
+    );
+  }
+}
+class _t {
+  /**
+   * Render hover highlights layer with fade-in animation
+   * Outlines the actual element shape instead of a rectangular border
+   */
+  static renderHoverLayer(t, e, o, n = !1, s = 1, i) {
+    if (e.type !== "element" || !e.data || e.data.id === o) return;
+    const a = e.data;
+    t.save();
+    const r = 150, l = 0.5;
+    let h = l;
+    if (e.startTime) {
+      const c = performance.now() - e.startTime;
+      h = Math.min(c / r, 1) * l;
+    }
+    t.strokeStyle = we(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, o = 1, n) {
+    const s = e.getRotationAnchor();
+    t.translate(s.x * o, s.y * o), t.rotate(ht.toRadians(e.rotation)), t.translate(-s.x * o, -s.y * o), e.transformType === "shape" ? this.renderShapeOutline(t, e, o) : e.transformType === "image" ? this.renderImageOutline(t, e, o) : e.transformType === "group" ? this.renderGroupOutline(t, e, o) : this.renderTextOutline(t, e, o, n);
+  }
+  /**
+   * Render outline for shape elements (star, rectangle, circle, etc.)
+   * Creates a ring effect with a gap between the element and the stroke
+   */
+  static renderShapeOutline(t, e, o) {
+    const n = e.transformData, s = n.width * o, i = n.height * o, a = 2, l = a + a / 2;
+    switch (t.save(), t.translate(e.x * o, e.y * o), t.beginPath(), n.shapeType) {
+      case "rectangle": {
+        const h = n.borderRadius || 0, c = -(s + l * 2) / 2, d = -(i + l * 2) / 2, u = s + l * 2, p = i + l * 2;
+        if (h > 0) {
+          const b = Math.min(h / 100 * Math.min(u, p), u / 2, p / 2);
+          t.roundRect(c, d, u, p, b);
+        } else
+          t.rect(c, d, u, p);
+        break;
+      }
+      case "circle": {
+        const h = Math.min(s, i) / 2 + l;
+        t.arc(0, 0, h, 0, Math.PI * 2);
+        break;
+      }
+      case "ellipse": {
+        const h = (n.radiusX ?? s / 2) + l, c = (n.radiusY ?? i / 2) + l;
+        t.ellipse(0, 0, h, c, 0, 0, Math.PI * 2);
+        break;
+      }
+      case "triangle": {
+        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
+        ], u = d.map((b, g) => {
+          const f = d[(g + 1) % 3], y = f.x - b.x, S = f.y - b.y, T = Math.sqrt(y * y + S * S);
+          return { x: S / T, y: -y / T };
+        }), p = d.map((b, g) => {
+          const f = u[(g + 2) % 3], y = u[g], S = f.x + y.x, T = f.y + y.y, w = Math.sqrt(S * S + T * T), m = (S * f.x + T * f.y) / w, C = l / m;
+          return {
+            x: b.x + S / w * C,
+            y: b.y + T / w * C
+          };
+        });
+        t.moveTo(p[0].x, p[0].y), t.lineTo(p[1].x, p[1].y), t.lineTo(p[2].x, p[2].y), t.closePath();
+        break;
+      }
+      case "star": {
+        const h = n.points ?? 5, c = n.innerRadius ?? 0.4, d = Math.min(s, i) / 2 + l, u = d * c;
+        for (let p = 0; p < h * 2; p++) {
+          const b = p * Math.PI / h - Math.PI / 2, g = p % 2 === 0 ? d : u, f = g * Math.cos(b), y = g * Math.sin(b);
+          p === 0 ? t.moveTo(f, y) : t.lineTo(f, y);
+        }
+        t.closePath();
+        break;
+      }
+      case "polygon": {
+        const h = n.sides ?? 5, c = Math.min(s, i) / 2 + l;
+        for (let d = 0; d < h; d++) {
+          const u = d * 2 * Math.PI / h - Math.PI / 2, p = c * Math.cos(u), b = c * Math.sin(u);
+          d === 0 ? t.moveTo(p, b) : t.lineTo(p, b);
+        }
+        t.closePath();
+        break;
+      }
+      case "line": {
+        const h = s / 2 + l;
+        t.moveTo(-h, 0), t.lineTo(h, 0);
+        break;
+      }
+    }
+    t.stroke(), t.restore();
+  }
+  /**
+   * Render outline for image elements
+   * Creates a ring effect with a gap between the element and the stroke
+   */
+  static renderImageOutline(t, e, o) {
+    var b;
+    const n = e.getVisualBoundingBox(), s = n.width * o, i = n.height * o, a = ((b = e.transformData) == null ? void 0 : b.borderRadius) || 0, r = 2, h = r + r / 2;
+    t.save(), t.translate(e.x * o, e.y * o);
+    const c = -(s + h * 2) / 2, d = -(i + h * 2) / 2, u = s + h * 2, p = i + h * 2;
+    if (t.beginPath(), a > 0) {
+      const g = Math.min(a / 100 * Math.min(u, p), u / 2, p / 2);
+      t.roundRect(c, d, u, p, g);
+    } else
+      t.rect(c, d, u, p);
+    t.stroke(), t.restore();
+  }
+  /**
+   * Render outline for group elements
+   * Creates a ring effect with a gap between the element and the stroke
+   */
+  static renderGroupOutline(t, e, o) {
+    const n = e.getVisualBoundingBox(), s = 2, a = s + s / 2, r = n.x * o - a, l = n.y * o - a, h = n.width * o + a * 2, c = n.height * o + a * 2;
+    t.save(), t.setLineDash([5, 5]), t.beginPath(), t.roundRect(r, l, h, c, 8), t.stroke(), t.restore();
+  }
+  /**
+   * Render outline for text elements
+   * Creates a ring effect with a gap between text and stroke (ring behind text fill)
+   * Supports all transform types: custom, circle, wave, arch, etc.
+   */
+  static renderTextOutline(t, e, o, n) {
+    const s = e.transformType;
+    s === "circle" || s === "wave" || s === "arch" || s === "lean" || s === "ascend" || s === "flag" ? this.renderTransformHoverRingEffect(t, e, o) : this.renderHoverRingEffect(t, e, o);
+  }
+  /**
+   * HOVER RING EFFECT for straight/custom text
+   *
+   * This is the colored ring that appears when hovering over text elements.
+   * Uses offscreen canvas compositing to create a ring with a transparent gap.
+   * Supports per-character fonts via rich text spans.
+   *
+   * NOTE: This is NOT the same as:
+   * - Element stroke (StrokeRenderer.ts - only when stroke.enabled = true)
+   * - Selection box (dashed rectangle in element.render())
+   */
+  static renderHoverRingEffect(t, e, o) {
+    t.save(), t.translate(e.x * o, e.y * o), o !== 1 && t.scale(o, o);
+    const n = e.fontSize, s = e.fontFamily, i = e.bold || !1, a = e.italic || !1, r = e.textAlign || "center", l = te(n, s, i, a), h = n * 1.2, c = 4 / o, d = 4 / o, u = document.createElement("canvas");
+    u.width = t.canvas.width, u.height = t.canvas.height;
+    const p = u.getContext("2d");
+    if (!p) {
+      t.restore();
+      return;
+    }
+    p.setTransform(t.getTransform()), p.textBaseline = "alphabetic", p.lineJoin = "round";
+    const b = e.getRichText ? e.getRichText() : null;
+    if (b) {
+      const g = ee(b), f = [], y = [];
+      g.forEach((w) => {
+        if (e.transformType === "custom" && e.transformData) {
+          const m = e.transformData.width - ft * 2, C = ne(w, m, {
+            fontSize: n,
+            fontFamily: s,
+            bold: i,
+            italic: a
+          });
+          C.forEach((R, M) => {
+            f.push(R), y.push({
+              isParagraphStart: M === 0,
+              isParagraphEnd: M === C.length - 1
+            });
+          });
+        } else
+          f.push(w), y.push({
+            isParagraphStart: !0,
+            isParagraphEnd: !0
+          });
+      });
+      let S;
+      f.length === 0 ? S = 0 : f.length === 1 ? S = l.height : S = (f.length - 1) * h + l.height;
+      const T = -S / 2;
+      f.forEach((w, m) => {
+        var W, V;
+        const C = y[m].isParagraphStart, R = y[m].isParagraphEnd;
+        let M = 0;
+        const k = w.map((A) => A.text).join(""), v = ((W = k.match(/^ +/)) == null ? void 0 : W[0].length) || 0, P = ((V = k.match(/ +$/)) == null ? void 0 : V[0].length) || 0;
+        let H = 0;
+        w.forEach((A) => {
+          const $ = A.style.fontSize !== void 0 ? A.style.fontSize : n, j = A.style.fontFamily !== void 0 ? A.style.fontFamily : s, J = A.style.bold !== void 0 ? A.style.bold : i, X = A.style.italic !== void 0 ? A.style.italic : a;
+          let E = A.text;
+          const I = H, _ = H + A.text.length;
+          if (!C && v > 0 && I < v) {
+            const B = Math.min(v - I, A.text.length);
+            E = E.substring(B);
+          }
+          if (!R && P > 0) {
+            const B = k.length - P;
+            if (_ > B) {
+              const F = !C && I < v ? Math.min(v - I, A.text.length) : 0, G = Math.max(0, B - I - F);
+              E = E.substring(0, G);
+            }
+          }
+          E.length > 0 && (t.save(), t.font = Bt($, j, J, X), M += t.measureText(E).width, t.restore()), H += A.text.length;
+        });
+        const L = e.transformType === "custom" && e.transformData ? e.transformData.width - ft * 2 : void 0;
+        let D;
+        r === "center" ? D = -M / 2 : r === "right" ? D = L !== void 0 ? L / 2 - M : -M : D = L !== void 0 ? -L / 2 : 0;
+        const O = T + l.ascent + m * h;
+        H = 0, w.forEach((A) => {
+          const $ = A.style.fontSize !== void 0 ? A.style.fontSize : n, j = A.style.fontFamily !== void 0 ? A.style.fontFamily : s;
+          A.style.color !== void 0 ? A.style.color : e.color;
+          const J = A.style.bold !== void 0 ? A.style.bold : i, X = A.style.italic !== void 0 ? A.style.italic : a;
+          let E = A.text;
+          const I = H, _ = H + A.text.length;
+          if (!C && v > 0 && I < v) {
+            const B = Math.min(v - I, A.text.length);
+            E = E.substring(B);
+          }
+          if (!R && P > 0) {
+            const B = k.length - P;
+            if (_ > B) {
+              const F = !C && I < v ? Math.min(v - I, A.text.length) : 0, G = Math.max(0, B - I - F);
+              E = E.substring(0, G);
+            }
+          }
+          H += A.text.length, E.length > 0 && (p.font = Bt($, j, J, X), p.textAlign = "left", p.globalCompositeOperation = "source-over", p.strokeStyle = t.strokeStyle, p.globalAlpha = Math.min(t.globalAlpha * 1.6, 0.8), p.lineWidth = (d + c) * 2, p.strokeText(E, D, O), p.globalCompositeOperation = "destination-out", p.globalAlpha = 1, p.lineWidth = d * 2, p.strokeText(E, D, O), p.fillText(E, D, O), D += p.measureText(E).width);
+        });
+      });
+    } else {
+      t.font = Bt(n, s, i, a), p.font = t.font, p.textAlign = r;
+      let g, f;
+      if (e.transformType === "custom" && e.transformData) {
+        const C = e.transformData.width - ft * 2, { lines: R } = ve(
+          e.text,
+          C,
+          n,
+          s,
+          i,
+          a,
+          void 0,
+          !0
+        );
+        g = R;
+      } else {
+        g = e.text.split(`
+`);
+        const C = e.text.includes(`
+`);
+        g = xe(g, C);
+      }
+      g.length === 0 ? f = 0 : g.length === 1 ? f = l.height : f = (g.length - 1) * h + l.height;
+      const y = -f / 2, S = e.text.includes(`
+`), T = e.transformType === "custom" && e.transformData ? e.transformData.width : 0, w = -T / 2;
+      let m = w + ft;
+      r === "center" ? m = w + T / 2 : r === "right" && (m = w + T - ft), g.forEach((C, R) => {
+        const M = y + l.ascent + R * h, k = S || R === 0, v = S || R === g.length - 1;
+        let P = C;
+        k || (P = P.replace(/^ +/, "")), v || (P = P.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(P, m, M), p.globalCompositeOperation = "destination-out", p.globalAlpha = 1, p.lineWidth = d * 2, p.strokeText(P, m, M), p.fillText(P, m, M);
+      });
+    }
+    t.setTransform(1, 0, 0, 1, 0, 0), t.drawImage(u, 0, 0), t.restore();
+  }
+  /**
+   * HOVER RING EFFECT for transformed text (circle, wave, arch, lean, ascend, flag)
+   *
+   * This is the colored ring that appears when hovering over curved/transformed text.
+   * Renders text character-by-character along the transform path with ring effect.
+   * Uses offscreen canvas compositing to create a ring with a transparent gap.
+   *
+   * NOTE: This is NOT the same as:
+   * - Element stroke (StrokeRenderer.ts - only when stroke.enabled = true)
+   * - Selection box (dashed outline shown by each transform's render() method)
+   */
+  static renderTransformHoverRingEffect(t, e, o) {
+    t.save(), t.translate(e.x * o, e.y * o), o !== 1 && t.scale(o, o), t.rotate(-e.rotation * Math.PI / 180);
+    const n = 4 / o, s = 4 / o, i = document.createElement("canvas");
+    i.width = t.canvas.width, i.height = t.canvas.height;
+    const a = i.getContext("2d");
+    if (!a) {
+      t.restore();
+      return;
+    }
+    a.setTransform(t.getTransform()), this.renderTransformWithHoverEffect(a, e, n, s, t.strokeStyle), t.setTransform(1, 0, 0, 1, 0, 0), t.drawImage(i, 0, 0), t.restore();
+  }
+  /**
+   * Helper to render text along a transform path with hover effect
+   */
+  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 = 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 u = i.text.split(""), p = u.map((f) => t.measureText(f).width), b = this.calculateCharPositions(e, u, p), g = (f) => {
+      t.translate(f.x, f.y), f.angle && t.rotate(f.angle), f.skewY && t.transform(1, f.skewY, 0, 1, 0, 0);
+    };
+    t.globalCompositeOperation = "source-over", t.strokeStyle = s, t.globalAlpha = 0.8, t.lineWidth = (n + o) * 2, t.lineJoin = "round", b.forEach((f, y) => {
+      t.save(), g(f), t.strokeText(u[y], 0, 0), t.restore();
+    }), t.globalCompositeOperation = "destination-out", t.globalAlpha = 1, t.lineWidth = n * 2, b.forEach((f, y) => {
+      t.save(), g(f), t.strokeText(u[y], 0, 0), t.fillText(u[y], 0, 0), t.restore();
+    });
+  }
+  /**
+   * Calculate character positions for different transform types
+   *
+   * Also used by EditModeRenderer for cursor positioning on transformed text.
+   */
+  static calculateCharPositions(t, e, o) {
+    const n = t.transformType, s = t.transformData;
+    return n === "circle" ? this.calculateCirclePositions(s, e, o) : n === "wave" ? this.calculateWavePositions(t, e, o, s) : n === "arch" ? this.calculateArchPositions(t, e, o, s) : n === "lean" ? this.calculateLeanPositions(e, o) : n === "ascend" ? this.calculateAscendPositions(t, e, o, s) : n === "flag" ? this.calculateFlagPositions(t, e, o, s) : e.map(() => ({ x: 0, y: 0, angle: 0 }));
+  }
+  /**
+   * Calculate positions for circle transform
+   */
+  static calculateCirclePositions(t, e, o) {
+    const n = [], s = o.reduce((a, r) => a + r, 0), i = t.radius * t.scale;
+    if (t.reverse) {
+      let a = Math.PI / 2 + s / (2 * i);
+      e.forEach((r, l) => {
+        const c = o[l] / i, d = Math.cos(a - c / 2) * i, u = Math.sin(a - c / 2) * i, p = a - c / 2 - Math.PI / 2;
+        n.push({ x: d, y: u, angle: p }), a -= c;
+      });
+    } else {
+      let a = -Math.PI / 2 - s / (2 * i);
+      e.forEach((r, l) => {
+        const c = o[l] / i, d = Math.cos(a + c / 2) * i, u = Math.sin(a + c / 2) * i, p = a + c / 2 + Math.PI / 2;
+        n.push({ x: d, y: u, angle: p }), a += c;
+      });
+    }
+    return n;
+  }
+  /**
+   * Calculate positions for wave transform
+   */
+  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 = o[l], c = a + h / 2, d = c / (n.width / 2), u = n.amplitude * t.fontSize * Math.sin(n.frequency * Math.PI * d), p = n.amplitude * n.frequency * Math.PI * Math.cos(n.frequency * Math.PI * d);
+      s.push({ x: c, y: u, angle: 0, skewY: p * Ce }), a += h;
+    }), s;
+  }
+  /**
+   * Calculate positions for arch transform
+   */
+  static calculateArchPositions(t, e, o, n) {
+    const s = [], i = o.reduce((l, h) => l + h, 0), a = n.width / 2;
+    let r = -i / 2;
+    return e.forEach((l, h) => {
+      const c = o[h], d = r + c / 2, u = d / a, p = (Math.pow(u, 2) - 1) * n.archHeight * t.fontSize, b = 2 * u * n.archHeight;
+      s.push({ x: d, y: p, angle: 0, skewY: b * 0.3 }), r += c;
+    }), s;
+  }
+  /**
+   * Calculate positions for lean transform
+   */
+  static calculateLeanPositions(t, e) {
+    const o = [];
+    let s = -e.reduce((i, a) => i + a, 0) / 2;
+    return t.forEach((i, a) => {
+      const r = e[a], l = s + r / 2;
+      o.push({ x: l, y: 0, angle: 0 }), s += r;
+    }), o;
+  }
+  /**
+   * Calculate positions for ascend transform
+   */
+  static calculateAscendPositions(t, e, o, n) {
+    const s = [], i = o.reduce((h, c) => h + c, 0), a = n.ascendAngle * Math.PI / 180, r = Math.tan(a);
+    let l = -i / 2;
+    return e.forEach((h, c) => {
+      const d = o[c], u = l + d / 2, p = u * r;
+      s.push({ x: u, y: p, angle: 0, skewY: r * 1 }), l += d;
+    }), s;
+  }
+  /**
+   * Calculate positions for flag transform
+   */
+  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 = o[l], c = a + h / 2, d = c / (n.width / 2), u = Math.abs(d), p = n.amplitude * u, b = p * t.fontSize * Math.sin(n.frequency * Math.PI * d), g = p * n.frequency * Math.PI * Math.cos(n.frequency * Math.PI * d), f = n.amplitude * Math.sign(d) * Math.sin(n.frequency * Math.PI * d), y = g + f;
+      s.push({ x: c, y: b, angle: 0, skewY: y * 0.3 }), a += h;
+    }), s;
+  }
+}
+class xt {
+  /**
+   * Render snap guides layer
+   */
+  static renderSnapGuidesLayer(t, e = []) {
+    e.length !== 0 && (t.save(), t.strokeStyle = tt(t.canvas), t.lineWidth = ot.canvas.snapGuideWidth, t.setLineDash(ot.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((o) => {
+      const n = Yt(t.canvas);
+      if (t.strokeStyle = n, t.fillStyle = n, t.lineWidth = ot.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(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(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, o, n) {
+    const s = `${n}`;
+    t.font = `600 ${ot.canvas.spacingLabelFontSize}px ${ot.canvas.spacingLabelFontFamily}`;
+    const a = t.measureText(s).width, r = ot.canvas.spacingLabelFontSize, l = 4, h = a + l * 2, c = r + l * 2;
+    t.fillStyle = Yt(t.canvas), t.beginPath(), t.roundRect(e - h / 2, o - c / 2, h, c, Me), t.fill(), t.fillStyle = Re, t.textAlign = "center", t.textBaseline = "middle", t.fillText(s, e, o);
+  }
+}
+class Wt {
+  /**
+   * Render edit mode features: cursor and text selection highlight
+   * This renders on the main canvas at world coordinates (same as the element)
+   */
+  static renderEditModeLayer(t, e, o, n) {
+    if (!e || e.transformType === "image" || e.transformType === "group") return;
+    const s = e, { cursorPosition: i, selectionStart: a, selectionEnd: r, editText: l, editRichText: h, cursorOpacity: c, isTouchDevice: d, selectionHandlePositionsRef: u } = o, p = n || 1, b = s.transformType;
+    if (b === "circle" || b === "wave" || b === "arch" || b === "lean" || b === "ascend" || b === "flag") {
+      this.renderTransformEditModeLayer(t, s, o, p);
+      return;
+    }
+    const g = s.fontSize || 24, f = s.fontFamily || "Arial", y = s.bold || !1, S = s.italic || !1, T = s.underline || !1, w = s.strikethrough || !1, m = s.textAlign || "center";
+    t.save(), t.translate(s.x, s.y), t.rotate(-s.rotation * Math.PI / 180);
+    const C = te(g, f, y, S), R = C.height, M = g * 1.2;
+    let k, v, P;
+    if (h && s.transformType === "custom" && s.transformData.width) {
+      const X = s.transformData.width - ft * 2;
+      P = X;
+      const E = ee(h);
+      k = [], v = [], E.forEach((I) => {
+        const _ = ne(I, X, {
+          fontSize: s.fontSize,
+          fontFamily: s.fontFamily,
+          bold: s.bold,
+          italic: s.italic
+        });
+        _.forEach((B, F) => {
+          k.push(B), v.push({
+            isParagraphStart: F === 0,
+            isParagraphEnd: F === _.length - 1
+          });
+        });
+      });
+    } else
+      k = l.split(`
+`).map((E) => [
+        {
+          text: E,
+          style: { fontSize: g, fontFamily: f, bold: y, italic: S }
+        }
+      ]), v = k.map(() => ({
+        isParagraphStart: !0,
+        // Each line is its own paragraph
+        isParagraphEnd: !0
+      }));
+    const H = k.length > 1 ? C.height + (k.length - 1) * M : C.height;
+    let L = -H / 2, D = 0, O = L, W = R;
+    const V = [];
+    let A = 0;
+    k.forEach((X, E) => {
+      var F, G;
+      const I = v[E].isParagraphStart, _ = v[E].isParagraphEnd, B = [];
+      X.forEach((at) => {
+        Array.from(at.text).forEach((ct) => {
+          let Y = g, it = f, et = y, q = S;
+          if (h && A < l.length) {
+            const Z = h.getStyleAt(A);
+            Y = Z.fontSize || g, it = Z.fontFamily || f, et = Z.bold !== void 0 ? Z.bold : y, q = Z.italic !== void 0 ? Z.italic : S;
+          }
+          t.save();
+          const nt = et ? "bold" : "normal", z = q ? "italic" : "normal";
+          t.font = `${z} ${nt} ${Y}px "${it}", Arial, sans-serif`;
+          const U = t.measureText(ct).width;
+          t.restore(), B.push({ char: ct, width: U, fontSize: Y, index: A }), A++;
+        });
+      });
+      {
+        const at = E === 0, gt = E === k.length - 1, ct = B.map((z) => z.char).join(""), Y = ((F = ct.match(/^ +/)) == null ? void 0 : F[0].length) || 0, it = ((G = ct.match(/ +$/)) == null ? void 0 : G[0].length) || 0;
+        let et = 0;
+        for (let z = 0; z < B.length; z++)
+          !at && z < Y || !gt && z >= B.length - it || (et += B[z].width);
+        let q;
+        m === "center" ? q = -et / 2 : m === "right" ? q = P !== void 0 ? P / 2 - et : -et : q = P !== void 0 ? -P / 2 : 0;
+        let nt = q;
+        for (let z = 0; z < B.length; z++) {
+          const U = B[z];
+          V[U.index] = {
+            x: nt,
+            y: L,
+            width: U.width,
+            // All characters keep their width for cursor navigation
+            height: U.fontSize
+          }, nt += U.width;
+        }
+        if (B.length > 0) {
+          const z = B[0].index, U = B[B.length - 1].index, dt = E < k.length - 1 && U + 1 === A ? U : U + 1;
+          if (i >= z && i <= dt)
+            if (i === z)
+              D = q, O = L, W = R;
+            else {
+              let pt = 0;
+              for (let st = 0; st < B.length && B[st].index < i; st++) {
+                const rt = B[st], Mt = rt.char === " ";
+                let yt = !0;
+                if (Mt) {
+                  const Rt = st < Y, N = st >= B.length - it, Tt = !I && Y > 0, wt = !_ && it > 0;
+                  yt = !(Rt && Tt || N && wt);
+                }
+                yt && (pt += rt.width);
+              }
+              D = q + pt, O = L, W = R;
+            }
+        }
+        E < k.length - 1 && (L += M);
+      }
+    });
+    const $ = a !== r;
+    let j = null, J = null;
+    if ($) {
+      const X = Math.min(a, r), E = Math.max(a, r);
+      t.save(), t.fillStyle = Ee(t.canvas);
+      let I = 0, _ = -H / 2;
+      if (k.forEach((B, F) => {
+        var it, et;
+        const G = v[F].isParagraphStart, at = v[F].isParagraphEnd, gt = F === 0, ct = F === k.length - 1, Y = [];
+        if (B.forEach((q) => {
+          Array.from(q.text).forEach((nt) => {
+            const z = q.style || {}, U = z.fontSize !== void 0 ? z.fontSize : g, Z = z.fontFamily !== void 0 ? z.fontFamily : f, ut = z.bold !== void 0 ? z.bold : y, dt = z.italic !== void 0 ? z.italic : S;
+            t.save();
+            const pt = ut ? "bold" : "normal", st = dt ? "italic" : "normal";
+            t.font = `${st} ${pt} ${U}px "${Z}", Arial, sans-serif`;
+            const rt = t.measureText(nt).width;
+            t.restore(), Y.push({ char: nt, index: I, width: rt, style: z }), I++;
+          });
+        }), Y.length > 0) {
+          const q = Y[0].index, nt = Y[Y.length - 1].index;
+          if (E > q && X <= nt) {
+            t.save();
+            const z = Y.map((N) => N.char).join(""), U = ((it = z.match(/^ +/)) == null ? void 0 : it[0].length) || 0, Z = ((et = z.match(/ +$/)) == null ? void 0 : et[0].length) || 0;
+            let ut = 0;
+            for (let N = 0; N < Y.length; N++)
+              !gt && N < U || !ct && N >= Y.length - Z || (ut += Y[N].width);
+            let dt = 0;
+            m === "center" ? dt = -ut / 2 : m === "right" && (dt = -ut);
+            const pt = Math.max(X, q), st = Math.min(E, nt + 1);
+            let rt = 0;
+            for (let N = 0; N < Y.length && Y[N].index < pt; N++) {
+              const Tt = Y[N], wt = N < U, Pt = N >= Y.length - Z, At = !G && U > 0, It = !at && Z > 0;
+              !(wt && At || Pt && It) && (rt += Tt.width);
+            }
+            let Mt = 0;
+            for (let N = 0; N < Y.length && Y[N].index < st; N++) {
+              const Tt = Y[N], wt = N < U, Pt = N >= Y.length - Z, At = !G && U > 0, It = !at && Z > 0;
+              !(wt && At || Pt && It) && (Mt += Tt.width);
+            }
+            const yt = dt + rt, Rt = Mt - rt;
+            t.fillRect(yt, _, Rt, R), j === null && (j = { x: yt, y: _ }), J = { x: yt + Rt, y: _ + R }, t.restore();
+          }
+        }
+        F < k.length - 1 && (_ += M);
+      }), t.restore(), h) {
+        t.save();
+        const B = s.transformType === "custom" ? s.transformData : null, F = B != null && B.width ? B.width - ft * 2 : void 0;
+        ke(t, h, {
+          fontSize: g,
+          fontFamily: f,
+          color: s.color || "#000000",
+          bold: y,
+          italic: S,
+          underline: T,
+          strikethrough: w,
+          textAlign: m
+        }, F), t.restore();
+      }
+    }
+    if ($ && d && j && J) {
+      const X = j, E = J, I = 6 / p, _ = 2 / p;
+      t.save();
+      const B = tt();
+      t.fillStyle = B, t.strokeStyle = B, t.lineWidth = _, t.lineCap = "round";
+      const F = { x: X.x, y: X.y - I }, G = { x: E.x, y: E.y + I };
+      t.beginPath(), t.moveTo(X.x, X.y), t.lineTo(X.x, X.y + R), t.stroke(), t.beginPath(), t.arc(F.x, F.y, I, 0, Math.PI * 2), t.fill(), t.strokeStyle = "white", t.lineWidth = 2 / p, t.stroke(), t.strokeStyle = B, t.lineWidth = _, t.beginPath(), t.moveTo(E.x, E.y - R), t.lineTo(E.x, E.y), t.stroke(), t.beginPath(), t.arc(G.x, G.y, I, 0, Math.PI * 2), t.fill(), t.strokeStyle = "white", t.lineWidth = 2 / p, t.stroke(), t.restore(), u && (u.current = {
+        start: {
+          center: F,
+          textEdge: X
+          // Original selection edge (top-left of selection on first line)
+        },
+        end: {
+          center: G,
+          textEdge: E
+          // Original selection edge (bottom-right of selection on last line)
+        }
+      });
+    } else u && (u.current = { start: null, end: null });
+    !$ && c > 0 && (t.save(), t.globalAlpha = c, t.strokeStyle = tt(), t.lineWidth = 3 / p, t.lineCap = "round", t.beginPath(), t.moveTo(D, O), t.lineTo(D, O + W), t.stroke(), t.restore()), t.restore();
+  }
+  /**
+   * Render edit mode features for transformed text (circle, wave, arch, etc.)
+   * Renders cursor along the transform path
+   */
+  static renderTransformEditModeLayer(t, e, o, n = 1) {
+    const { cursorPosition: s, cursorOpacity: i } = o, a = e.fontSize || 24, r = e.fontFamily || "Arial", l = e.bold || !1, h = e.italic || !1;
+    t.save(), t.translate(e.x, e.y), t.rotate(-e.rotation * Math.PI / 180);
+    const c = l ? "bold" : "normal", d = h ? "italic" : "normal";
+    t.font = `${d} ${c} ${a}px ${r}`;
+    const u = Array.from(e.text), p = u.map((g) => t.measureText(g).width), b = _t.calculateCharPositions(e, u, p);
+    if (s >= 0 && s <= u.length && i > 0) {
+      let g;
+      if (s === 0)
+        if (b.length > 0) {
+          const y = b[0], S = p[0];
+          g = {
+            x: y.x - Math.cos(y.angle) * (S / 2),
+            y: y.y - Math.sin(y.angle) * (S / 2),
+            angle: y.angle
+          };
+        } else
+          g = { x: 0, y: 0, angle: 0 };
+      else if (s >= b.length) {
+        const y = b[b.length - 1], S = p[p.length - 1];
+        g = {
+          x: y.x + Math.cos(y.angle) * (S / 2),
+          y: y.y + Math.sin(y.angle) * (S / 2),
+          angle: y.angle
+        };
+      } else {
+        const y = b[s], S = p[s];
+        g = {
+          x: y.x - Math.cos(y.angle) * (S / 2),
+          y: y.y - Math.sin(y.angle) * (S / 2),
+          angle: y.angle
+        };
+      }
+      t.save(), t.translate(g.x, g.y), t.rotate(g.angle), t.globalAlpha = i, t.strokeStyle = tt(), t.lineWidth = 2 / n;
+      const f = a * 1.2;
+      t.beginPath(), t.moveTo(0, -f / 2), t.lineTo(0, f / 2), t.stroke(), t.restore();
+    }
+    t.restore();
+  }
+  /**
+   * Render crop box layer (for images in crop mode)
+   * Shows both image resize handles and crop handles
+   */
+  static renderCropBoxLayer(t, e, o, n = 1) {
+    if (!(e instanceof Qt) || !e.isCropping) return;
+    const s = e, i = s.getCropBoxBounds();
+    if (!i) return;
+    const a = 4 / n, r = 2 / n, l = Pe / n, h = Ae / n, c = 1 / n;
+    t.save(), t.translate(e.x * n, e.y * n), t.rotate(ht.toRadians(e.rotation));
+    const d = s.transformData.flipHorizontal ? -1 : 1, u = s.transformData.flipVertical ? -1 : 1;
+    t.scale(d * n, u * n);
+    const p = s.transformData.width * s.transformData.cropWidth, b = s.transformData.height * s.transformData.cropHeight, g = s.transformData.width / 2 - (s.transformData.cropX * s.transformData.width + p / 2), f = s.transformData.height / 2 - (s.transformData.cropY * s.transformData.height + b / 2), y = s.transformData.width / 2, S = s.transformData.height / 2, T = {
+      x: g - y,
+      y: f - S,
+      width: s.transformData.width,
+      height: s.transformData.height
+    };
+    t.fillStyle = "rgba(0, 0, 0, 0.5)", i.y > T.y && t.fillRect(T.x, T.y, T.width, i.y - T.y);
+    const w = i.y + i.height, m = T.y + T.height;
+    w < m && t.fillRect(T.x, w, T.width, m - w), i.x > T.x && t.fillRect(T.x, i.y, i.x - T.x, i.height);
+    const C = i.x + i.width, R = T.x + T.width;
+    C < R && t.fillRect(C, i.y, R - C, i.height), t.strokeStyle = ot.canvas.selectionColor, t.lineWidth = r, t.strokeRect(i.x, i.y, i.width, i.height), t.strokeStyle = "rgba(255, 255, 255, 0.5)", t.lineWidth = c;
+    const M = i.width / 3;
+    t.beginPath(), t.moveTo(i.x + M, i.y), t.lineTo(i.x + M, i.y + i.height), t.moveTo(i.x + 2 * M, i.y), t.lineTo(i.x + 2 * M, i.y + i.height), t.stroke();
+    const k = i.height / 3;
+    if (t.beginPath(), t.moveTo(i.x, i.y + k), t.lineTo(i.x + i.width, i.y + k), t.moveTo(i.x, i.y + 2 * k), t.lineTo(i.x + i.width, i.y + 2 * k), t.stroke(), [
+      { x: i.x, y: i.y },
+      // top-left
+      { x: i.x + i.width, y: i.y },
+      // top-right
+      { x: i.x + i.width, y: i.y + i.height },
+      // bottom-right
+      { x: i.x, y: i.y + i.height }
+      // bottom-left
+    ].forEach((H) => {
+      t.beginPath(), t.arc(H.x, H.y, l + 1 / n, 0, Math.PI * 2), t.fillStyle = "#bbb", t.fill(), t.beginPath(), t.arc(H.x, H.y, l, 0, Math.PI * 2), t.fillStyle = "#fff", t.fill();
+    }), [
+      { x: i.x + i.width / 2, y: i.y, orientation: "horizontal" },
+      // top
+      { x: i.x + i.width / 2, y: i.y + i.height, orientation: "horizontal" },
+      // bottom
+      { x: i.x, y: i.y + i.height / 2, orientation: "vertical" },
+      // left
+      { x: i.x + i.width, y: i.y + i.height / 2, orientation: "vertical" }
+      // right
+    ].forEach((H) => {
+      let L, D;
+      H.orientation === "horizontal" ? (L = h, D = a) : (L = a, D = h);
+      const O = H.x - L / 2, W = H.y - D / 2;
+      t.fillStyle = "#fff", t.fillRect(O, W, L, D), t.strokeStyle = "#bbb", t.lineWidth = c, t.strokeRect(O, W, L, D);
+    }), t.restore(), o && o.resizeHandles) {
+      const H = 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, O = 20;
+      H.forEach((W) => {
+        let V = !1;
+        if (L)
+          for (const A of L) {
+            const $ = W.x - A.x, j = W.y - A.y;
+            if (Math.sqrt($ * $ + j * j) < O) {
+              V = !0;
+              break;
+            }
+          }
+        V || (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 = tt(t.canvas), t.lineWidth = 2, t.stroke(), t.restore());
+      });
+    }
+  }
+}
+const Xe = zt("CanvasRenderer"), K = class K {
+  /**
+   * Get a pooled offscreen canvas for clipping content, only recreating
+   * when dimensions change. Eliminates per-frame canvas allocation.
+   */
+  static _getContentCanvas(t, e) {
+    return (!this._contentCanvas || this._contentCanvasSize.width !== t || this._contentCanvasSize.height !== e) && (this._contentCanvas = document.createElement("canvas"), this._contentCanvas.width = t, this._contentCanvas.height = e, this._contentCanvasSize = { width: t, height: e }), this._contentCanvas;
+  }
+  /**
+   * Get a pooled offscreen canvas for clipping masks, only recreating
+   * when dimensions change. Eliminates per-frame canvas allocation.
+   */
+  static _getMaskCanvas(t, e) {
+    return (!this._maskCanvas || this._maskCanvasSize.width !== t || this._maskCanvasSize.height !== e) && (this._maskCanvas = document.createElement("canvas"), this._maskCanvas.width = t, this._maskCanvas.height = e, this._maskCanvasSize = { width: t, height: e }), this._maskCanvas;
+  }
+  /**
+   * Safely render an element, catching errors so one element's failure
+   * doesn't crash the entire canvas render loop.
+   */
+  static safeRender(t, e, o, n) {
+    try {
+      e.render(t, o, n);
+    } catch (s) {
+      const i = s instanceof Error ? s : new Error(String(s));
+      Xe.error(`Failed to render element ${e.id}:`, i), K.onRenderError && K.onRenderError({
+        category: "render",
+        message: `Failed to render element: ${i.message}`,
+        originalError: i,
+        elementId: e.id,
+        recoverable: !0
+      });
+    }
+  }
+  // =========================================================================
+  // Element Layer Rendering (kept here - tightly coupled knockout/clipping)
+  // =========================================================================
+  /**
+   * Helper function to render an element (using actual element instance, not config)
+   * Used by knockout rendering system
+   */
+  static renderElement(t, e, o = !0) {
+    o && (t.save(), t.globalAlpha = Q), e.render(t, !1, !1), o && t.restore();
+  }
+  /**
+   * Apply artboard clip path to the context, respecting clipShape.
+   * After calling this, subsequent drawing will be clipped to the artboard shape.
+   * Caller must call ctx.beginPath() before this if needed.
+   */
+  static applyArtboardClipPath(t, e) {
+    const { x: o, y: n, width: s, height: i, clipShape: a } = e, r = e.borderRadius || 0;
+    if (t.beginPath(), !a || a === "rectangle")
+      r > 0 ? t.roundRect(o, n, s, i, r) : t.rect(o, n, s, i);
+    else if (a === "circle") {
+      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(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(o, n), t.clip(l), t.translate(-o, -n);
+        return;
+      } catch {
+        t.rect(o, n, s, i);
+      }
+    else if (typeof a == "object" && a.type === "composite-path")
+      try {
+        const l = new Path2D();
+        for (const h of a.pieces) {
+          const c = new Path2D(h.d), d = h.rotation ?? 0, u = new DOMMatrix();
+          if (u.translateSelf(h.x, h.y), d !== 0) {
+            const p = (h.baseWidth ?? 0) / 2, b = (h.baseHeight ?? 0) / 2, g = d === 90 || d === 270, f = g ? h.baseHeight ?? 0 : h.baseWidth ?? 0, y = g ? h.baseWidth ?? 0 : h.baseHeight ?? 0;
+            u.translateSelf(f / 2, y / 2), u.rotateSelf(d), u.translateSelf(-p, -b);
+          }
+          l.addPath(c, u);
+        }
+        t.translate(o, n), t.clip(l), t.translate(-o, -n);
+        return;
+      } catch {
+        t.rect(o, n, s, i);
+      }
+    t.clip();
+  }
+  /**
+   * Render an element with overflow dimming - parts outside the artboard render at 30% opacity
+   * Uses two-pass rendering: first at 30% opacity (overflow), then clipped to artboard at 100% (inside)
+   */
+  static renderElementWithOverflowDimming(t, e, o, n, s, i) {
+    const a = t.getTransform(), r = o.borderRadius || 0;
+    t.save(), t.globalAlpha = 0.3 * (i ? Q : 1), t.filter = "blur(4px)", t.beginPath();
+    const h = t.getTransform().inverse(), c = t.canvas.width, d = t.canvas.height, u = new DOMPoint(0, 0).matrixTransform(h), p = new DOMPoint(c, d).matrixTransform(h), b = Math.max(p.x - u.x, p.y - u.y), g = u.x - b, f = u.y - b, y = p.x + b, S = p.y + b, T = typeof o.clipShape == "object" && o.clipShape !== null && o.clipShape.type === "composite-path" ? o.clipShape : null;
+    if (T) {
+      const w = new Path2D();
+      w.rect(g, f, y - g, S - f);
+      for (const m of T.pieces) {
+        const C = new Path2D(m.d), R = m.rotation ?? 0, M = new DOMMatrix();
+        if (M.translateSelf(o.x + m.x, o.y + m.y), R !== 0) {
+          const k = (m.baseWidth ?? 0) / 2, v = (m.baseHeight ?? 0) / 2, P = R === 90 || R === 270, H = P ? m.baseHeight ?? 0 : m.baseWidth ?? 0, L = P ? m.baseWidth ?? 0 : m.baseHeight ?? 0;
+          M.translateSelf(H / 2, L / 2), M.rotateSelf(R), M.translateSelf(-k, -v);
+        }
+        w.addPath(C, M);
+      }
+      t.clip(w, "evenodd");
+    } else
+      t.rect(g, f, y - g, S - f), r > 0 ? t.roundRect(o.x, o.y, o.width, o.height, r) : t.rect(o.x, o.y, o.width, o.height), t.clip("evenodd");
+    e.render(t, !1, !1), t.restore(), t.save(), this.applyArtboardClipPath(t, o), i && (t.globalAlpha = Q), e.render(t, n, s), t.restore(), t.setTransform(a);
+  }
+  /**
+   * Render all elements layer
+   * @param showOverflowDimmed When true, element parts outside the artboard render at 30% opacity
+   * @param suppressOverflowDim When true, skip the 30% overflow pass even if `showOverflowDimmed`
+   *   is enabled. Used for piece-guide rendering (ADR-0054) where the boundary's custom path
+   *   clipShape is the visible design edge — overflow beyond the rectangular artboard reads as
+   *   a coloured halo rather than useful UX. Selected/hovered elements fall through to the
+   *   clipped-only branch which respects `clipShape` correctly.
+   */
+  static renderElementsLayer(t, e, o, n, s, i, a, r = !0, l = !1, h = !1) {
+    const c = s != null && s.getMode() === "drag", d = s == null ? void 0 : s._activeChildContext;
+    e !== K._cachedElementsRef && (K._cachedElementConfigs = e.map((f) => f.toJSON()), K._cachedElementMap = new Map(e.map((f) => [f.id, f])), K._cachedElementsRef = e);
+    const u = K._cachedElementConfigs, p = K._cachedElementMap, b = K._knockoutRenderedIds;
+    b.clear(), e.forEach((f, y) => {
+      var S, T, w;
+      if (f.blendMode === "knockout" || f.blendMode === "clip") {
+        const m = u[y], C = f.blendMode === "knockout" ? "destination-out" : "destination-in", R = ((S = m.knockoutParts) == null ? void 0 : S.scope) || "group", M = u.findIndex((H) => H.id === m.id), k = ((T = m.knockoutParts) == null ? void 0 : T.fill) || ((w = m.knockoutParts) == null ? void 0 : w.stroke), v = R === "artboard" && M !== -1 ? u.slice(0, M) : [];
+        k && (R === "artboard" || v.length > 0) && (v.forEach((H) => H.id && b.add(H.id)), Ie(
+          t,
+          m,
+          u,
+          (H, L) => {
+            const D = L.id && p.get(L.id);
+            D && this.renderElement(H, D, r);
+          },
+          i,
+          a,
+          C
+        ), b.add(f.id));
+      }
+    }), e.some((f) => !b.has(f.id) && f.isClipping) ? this._renderWithClipping(
+      t,
+      e,
+      b,
+      o,
+      n,
+      c,
+      d,
+      u,
+      r
+    ) : e.forEach((f) => {
+      var R, M;
+      if (b.has(f.id) || f.visible === !1) return;
+      const y = f.id === o, S = (n == null ? void 0 : n.type) === "element" && ((R = n == null ? void 0 : n.data) == null ? void 0 : R.id) === f.id, T = c && d && Dt(f) && f.id === o, w = y && !T, m = u[e.indexOf(f)], C = ((M = m == null ? void 0 : m.distressEffect) == null ? void 0 : M.enabled) && m.distressEffect.style === "custom" && m.distressEffect.textureUrl;
+      if (m && m.masks && m.masks.length > 0)
+        Et(t, m, (k) => {
+          const v = (P) => {
+            r && (P.save(), P.globalAlpha = Q), this.safeRender(P, f, w, S), r && P.restore();
+          };
+          if (C) {
+            const P = f.getVisualBoundingBox();
+            Nt(k, m.distressEffect, P, v);
+          } else
+            v(k);
+        });
+      else if (C) {
+        const k = f.getVisualBoundingBox();
+        Nt(t, m.distressEffect, k, (v) => {
+          r && (v.save(), v.globalAlpha = Q), this.safeRender(v, f, w, S), r && v.restore();
+        });
+      } else l && !h && a && w ? this.renderElementWithOverflowDimming(t, f, a, w, S, r) : l && a ? (t.save(), this.applyArtboardClipPath(t, a), r && (t.globalAlpha = Q), this.safeRender(t, f, w, S), t.restore()) : (r && (t.save(), t.globalAlpha = Q), this.safeRender(t, f, w, S), r && t.restore());
+    });
+  }
+  /**
+   * Render elements with clipping mask support at artboard level
+   * Elements with isClipping=true clip all elements below them
+   */
+  static _renderWithClipping(t, e, o, n, s, i, a, r, l = !0) {
+    var f;
+    const h = t.canvas, c = h.width, d = h.height, u = t.getTransform(), p = [];
+    let b = [], g = [];
+    for (let y = 0; y < e.length; y++) {
+      const S = e[y], T = r[y];
+      o.has(S.id) || S.visible !== !1 && (S.isClipping ? b.length > 0 ? (p.push({
+        content: b,
+        mask: S,
+        contentConfigs: g,
+        maskConfig: T
+      }), b = [], g = []) : p.push({
+        content: [S],
+        contentConfigs: [T]
+      }) : (b.push(S), g.push(T)));
+    }
+    b.length > 0 && p.push({
+      content: b,
+      contentConfigs: g
+    });
+    for (const y of p)
+      if (!y.mask)
+        y.content.forEach((S, T) => {
+          var k;
+          const w = S.id === n, m = (s == null ? void 0 : s.type) === "element" && ((k = s == null ? void 0 : s.data) == null ? void 0 : k.id) === S.id, C = i && a && Dt(S) && S.id === n, R = w && !C, M = y.contentConfigs[T];
+          M && M.masks && M.masks.length > 0 ? Et(t, M, (v) => {
+            l && (v.save(), v.globalAlpha = Q), S.render(v, R, m), l && v.restore();
+          }) : (l && (t.save(), t.globalAlpha = Q), S.render(t, R, m), l && t.restore());
+        });
+      else {
+        const S = this._getContentCanvas(c, d), T = S.getContext("2d");
+        if (!T) continue;
+        T.setTransform(1, 0, 0, 1, 0, 0), T.clearRect(0, 0, c, d), T.globalCompositeOperation = "source-over", T.setTransform(u), y.content.forEach((M, k) => {
+          var O;
+          const v = M.id === n, P = (s == null ? void 0 : s.type) === "element" && ((O = s == null ? void 0 : s.data) == null ? void 0 : O.id) === M.id, H = i && a && Dt(M) && M.id === n, L = v && !H, D = y.contentConfigs[k];
+          D && D.masks && D.masks.length > 0 ? Et(T, D, (W) => {
+            l && (W.save(), W.globalAlpha = Q), M.render(W, L, P), l && W.restore();
+          }) : (l && (T.save(), T.globalAlpha = Q), M.render(T, L, P), l && T.restore());
+        });
+        const w = this._getMaskCanvas(c, d), m = w.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(u);
+        const C = y.mask.id === n, R = (s == null ? void 0 : s.type) === "element" && ((f = s == null ? void 0 : s.data) == null ? void 0 : f.id) === y.mask.id;
+        y.maskConfig && y.maskConfig.masks && y.maskConfig.masks.length > 0 ? Et(m, y.maskConfig, (M) => {
+          l && (M.save(), M.globalAlpha = Q), y.mask.render(M, C, R), l && M.restore();
+        }) : (l && (m.save(), m.globalAlpha = Q), y.mask.render(m, C, R), l && m.restore()), T.globalCompositeOperation = "destination-in", T.setTransform(1, 0, 0, 1, 0, 0), T.drawImage(w, 0, 0), t.save(), t.setTransform(1, 0, 0, 1, 0, 0), t.drawImage(S, 0, 0), t.restore();
+      }
+  }
+  // =========================================================================
+  // Delegated Methods (preserve public API, delegate to focused renderers)
+  // =========================================================================
+  /**
+   * Render snap guides layer
+   * @see InteractionFeedbackRenderer.renderSnapGuidesLayer
+   */
+  static renderSnapGuidesLayer(t, e = []) {
+    xt.renderSnapGuidesLayer(t, e);
+  }
+  /**
+   * Render spacing indicators layer
+   * @see InteractionFeedbackRenderer.renderSpacingIndicatorsLayer
+   */
+  static renderSpacingIndicatorsLayer(t, e = []) {
+    xt.renderSpacingIndicatorsLayer(t, e);
+  }
+  /**
+   * Render a distance label with background
+   * @see InteractionFeedbackRenderer.renderDistanceLabel
+   */
+  static renderDistanceLabel(t, e, o, n) {
+    xt.renderDistanceLabel(t, e, o, n);
+  }
+  /**
+   * Render selection box layer
+   * @see SelectionRenderer.renderSelectionLayer
+   */
+  static renderSelectionLayer(t, e, o, n = 1) {
+    St.renderSelectionLayer(t, e, o, n);
+  }
+  /**
+   * Render position and size info below the selected element
+   * @see SelectionRenderer.renderPositionSizeInfo
+   */
+  static renderPositionSizeInfo(t, e, o, n, s = 1) {
+    St.renderPositionSizeInfo(t, e, o, n, s);
+  }
+  /**
+   * Render transform handles layer
+   * @see SelectionRenderer.renderHandlesLayer
+   */
+  static renderHandlesLayer(t, e, o, n, s, i, a, r = 1, l = !0) {
+    St.renderHandlesLayer(
+      t,
+      e,
+      o,
+      n,
+      s,
+      i,
+      a,
+      r,
+      l
+    );
+  }
+  /**
+   * Render hover highlights layer with fade-in animation
+   * @see HoverRenderer.renderHoverLayer
+   */
+  static renderHoverLayer(t, e, o, n = !1, s = 1, i) {
+    _t.renderHoverLayer(t, e, o, n, s, i);
+  }
+  /**
+   * Render crop box layer (for images in crop mode)
+   * @see EditModeRenderer.renderCropBoxLayer
+   */
+  static renderCropBoxLayer(t, e, o, n = 1) {
+    Wt.renderCropBoxLayer(t, e, o, n);
+  }
+  // =========================================================================
+  // Main Render Orchestration
+  // =========================================================================
+  /**
+   * Complete rendering pipeline
+   * Renders all layers in correct z-order
+   */
+  static render({
+    ctx: t,
+    elements: e,
+    selectedId: o,
+    selectedElement: n,
+    // Chrome-related fields (transformHandles, currentRotation,
+    // isRotating, hideHandles, isAltKeyPressed, showRotationHandle)
+    // are accepted for backwards compatibility with the public type
+    // signature exposed via `api/internals.ts`, but are no longer
+    // consumed here — single-selection chrome is now drawn by
+    // `renderInteractionChromeLayer` after piece guides. See that
+    // method for the actual chrome rendering.
+    hoverState: s,
+    isEditing: i,
+    stateMachine: a,
+    snapGuides: r = [],
+    spacingIndicators: l = [],
+    artboardBackgroundColor: h,
+    artboard: c,
+    isPreview: d = !0,
+    zoom: u = 1,
+    paddingOffset: p = { x: 0, y: 0 },
+    showOverflowDimmed: b = !1,
+    suppressOverflowDim: g = !1,
+    distressTexture: f,
+    imageMask: y,
+    editModeData: S
+  }) {
+    if (this.renderElementsLayer(
+      t,
+      e,
+      o,
+      s,
+      a ?? void 0,
+      h,
+      c,
+      d,
+      b,
+      g
+    ), f != null && f.enabled && c && Be(t, f, c, h), y != null && y.enabled && c && He(t, y, c, h), i && S && n && Wt.renderEditModeLayer(t, n, S, u), u !== 1) {
+      t.save();
+      const C = t.getTransform().a / u, R = p.x * u * C, M = p.y * u * C;
+      t.setTransform(C, 0, 0, C, R, M);
+    }
+    const T = r.map((m) => ({
+      ...m,
+      x: m.x !== void 0 ? m.x * u : void 0,
+      y: m.y !== void 0 ? m.y * u : void 0,
+      x1: m.x1 !== void 0 ? m.x1 * u : void 0,
+      y1: m.y1 !== void 0 ? m.y1 * u : void 0,
+      x2: m.x2 !== void 0 ? m.x2 * u : void 0,
+      y2: m.y2 !== void 0 ? m.y2 * u : void 0
+    })), w = l.map((m) => ({
+      ...m,
+      x: m.x !== void 0 ? m.x * u : void 0,
+      y: m.y !== void 0 ? m.y * u : void 0,
+      x1: m.x1 !== void 0 ? m.x1 * u : void 0,
+      y1: m.y1 !== void 0 ? m.y1 * u : void 0,
+      x2: m.x2 !== void 0 ? m.x2 * u : void 0,
+      y2: m.y2 !== void 0 ? m.y2 * u : void 0,
+      labelX: m.labelX * u,
+      labelY: m.labelY * u
+    }));
+    xt.renderSnapGuidesLayer(t, T), xt.renderSpacingIndicatorsLayer(t, w), u !== 1 && t.restore();
+  }
+  /**
+   * Single-selection interaction chrome: bbox, handles, position/size
+   * info, hover outline, and the crop-mode alt branch. Hoisted out of
+   * `render()` so the master render loop can call it *after*
+   * `renderPieceGuides`. Otherwise the piece-guide partial die-cut
+   * knockout (`destination-out` at alpha 0.7) erases 70% of the
+   * chrome's alpha along with the artwork it's intentionally dimming.
+   *
+   * Renders at native screen scale: identical transform manipulation
+   * to the original Layer 2 / 3–6 block in `render()` so chrome stays
+   * crisp regardless of canvas zoom.
+   */
+  static renderInteractionChromeLayer({
+    ctx: t,
+    selectedElement: e,
+    transformHandles: o,
+    stateMachine: n,
+    currentRotation: s,
+    isRotating: i,
+    hoverState: a,
+    selectedId: r,
+    hideHandles: l = !1,
+    isEditing: h,
+    isAltKeyPressed: c = !1,
+    artboardBackgroundColor: d,
+    hoverClipArtboard: u,
+    showRotationHandle: p = !0,
+    zoom: b = 1,
+    paddingOffset: g = { x: 0, y: 0 }
+  }) {
+    if (b !== 1) {
+      t.save();
+      const S = t.getTransform().a / b, T = g.x * b * S, w = g.y * b * S;
+      t.setTransform(S, 0, 0, S, T, w);
+    }
+    if (e && Ye(e) && e.isCropping)
+      o && Wt.renderCropBoxLayer(t, e, o, b);
+    else if (!l && n && St.renderSelectionLayer(t, e, n, b), o && n && St.renderPositionSizeInfo(t, e, o, n, b), !l && o && n && St.renderHandlesLayer(
+      t,
+      e,
+      o,
+      s,
+      i,
+      a,
+      n,
+      b,
+      p
+    ), !h) {
+      if (u) {
+        t.save();
+        const y = u, S = y.x * b, T = y.y * b, w = y.width * b, m = y.height * b, C = (y.borderRadius ?? 0) * b;
+        t.beginPath(), C > 0 ? t.roundRect(S, T, w, m, C) : t.rect(S, T, w, m), t.clip();
+      }
+      _t.renderHoverLayer(t, a, r, c, b, d), u && t.restore();
+    }
+    b !== 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 qt = K;
+const Zt = zt("ImportManager"), Ft = class Ft {
+  /**
+   * Import workspace from JSON file
+   */
+  static async importFromJSON(t) {
+    try {
+      const e = await this.readFileAsText(t), o = JSON.parse(e);
+      if (this.validateDocument(o), !this.SUPPORTED_VERSIONS.includes(o.metadata.version))
+        throw new Error(
+          `Unsupported version: ${o.metadata.version}. Supported versions: ${this.SUPPORTED_VERSIONS.join(", ")}`
+        );
+      if (o.metadata.version === "1.0.0")
+        return this.migrateV1Document(o);
+      const n = [], s = [];
+      return o.artboards.forEach((i) => {
+        const a = Xt.fromJSON({
+          id: i.id,
+          name: i.name,
+          x: i.x,
+          y: i.y,
+          width: i.width,
+          height: i.height,
+          backgroundColor: i.backgroundColor,
+          elementIds: i.elements.map((l) => l.id || "")
+        }), r = i.elements.map((l) => {
+          try {
+            return Kt.createFromJSON(l);
+          } catch (h) {
+            return Zt.error("Failed to create element:", l, h), null;
+          }
+        }).filter((l) => l !== null);
+        n.push(a), s.push(...r);
+      }), await this.preloadAllImages(s), {
+        success: !0,
+        artboards: n,
+        elements: s,
+        activeArtboardId: o.activeArtboardId
+      };
+    } catch (e) {
+      return {
+        success: !1,
+        error: e instanceof Error ? e.message : "Unknown error"
+      };
+    }
+  }
+  /**
+   * Migrate v1 document (no artboards) to v2 (with artboards)
+   */
+  static async migrateV1Document(t) {
+    var e, o, n;
+    try {
+      const s = t.elements || [], i = new Xt({
+        id: "artboard-migrated",
+        name: "Artboard 1",
+        x: 0,
+        y: 0,
+        width: ((e = t.canvas) == null ? void 0 : e.width) || 1920,
+        height: ((o = t.canvas) == null ? void 0 : o.height) || 1080,
+        backgroundColor: ((n = t.canvas) == null ? void 0 : n.backgroundColor) || "#ffffff"
+      }), a = s.map((r) => {
+        try {
+          return Kt.createFromJSON(r);
+        } catch (l) {
+          return Zt.error("Failed to create element:", r, l), null;
+        }
+      }).filter((r) => r !== null);
+      return a.forEach((r) => {
+        i.addElementId(r.id);
+      }), await this.preloadAllImages(a), {
+        success: !0,
+        artboards: [i],
+        elements: a,
+        activeArtboardId: i.id
+      };
+    } catch (s) {
+      return {
+        success: !1,
+        error: s instanceof Error ? s.message : "Migration failed"
+      };
+    }
+  }
+  /**
+   * Import image file
+   */
+  static async importImage(t) {
+    try {
+      if (!t.type.startsWith("image/"))
+        throw new Error("File is not an image");
+      const e = 10 * 1024 * 1024;
+      if (t.size > e)
+        throw new Error("Image file is too large (max 10MB)");
+      const o = await this.readFileAsDataURL(t), { width: n, height: s } = await this.getImageDimensions(o);
+      return {
+        success: !0,
+        dataUrl: o,
+        filename: t.name,
+        width: n,
+        height: s
+      };
+    } catch (e) {
+      return {
+        success: !1,
+        error: e instanceof Error ? e.message : "Unknown error"
+      };
+    }
+  }
+  /**
+   * Validate document structure
+   */
+  static validateDocument(t) {
+    if (!t || typeof t != "object")
+      throw new Error("Invalid document");
+    const e = t;
+    if (!e.metadata)
+      throw new Error("Missing metadata");
+    if (!e.metadata.version)
+      throw new Error("Missing version in metadata");
+    if (!e.artboards && !e.elements)
+      throw new Error("Missing artboards or elements array");
+    if (e.artboards && !Array.isArray(e.artboards))
+      throw new Error("Invalid artboards array");
+  }
+  /**
+   * Read file as text
+   */
+  static readFileAsText(t) {
+    return new Promise((e, o) => {
+      const n = new FileReader();
+      n.onload = (s) => {
+        var i;
+        return e((i = s.target) == null ? void 0 : i.result);
+      }, n.onerror = () => o(new Error("Failed to read file")), n.readAsText(t);
+    });
+  }
+  /**
+   * Read file as data URL
+   */
+  static readFileAsDataURL(t) {
+    return new Promise((e, o) => {
+      const n = new FileReader();
+      n.onload = (s) => {
+        var i;
+        return e((i = s.target) == null ? void 0 : i.result);
+      }, n.onerror = () => o(new Error("Failed to read file")), n.readAsDataURL(t);
+    });
+  }
+  /**
+   * Get image dimensions from data URL
+   */
+  static getImageDimensions(t) {
+    return new Promise((e, o) => {
+      const n = new Image();
+      n.onload = () => {
+        e({ width: n.width, height: n.height });
+      }, n.onerror = () => o(new Error("Failed to load image")), n.src = t;
+    });
+  }
+  /**
+   * Validate imported data before applying to state
+   */
+  static validateImportedData(t, e) {
+    const o = [], n = /* @__PURE__ */ new Set();
+    t.forEach((i) => {
+      n.has(i.id) && o.push(`Duplicate artboard ID: ${i.id}`), n.add(i.id);
+    });
+    const s = /* @__PURE__ */ new Set();
+    return e.forEach((i) => {
+      s.has(i.id) && o.push(`Duplicate element ID: ${i.id}`), s.add(i.id);
+    }), t.forEach((i) => {
+      i.getElementIds().forEach((a) => {
+        s.has(a) || o.push(`Artboard "${i.name}" references missing element: ${a}`);
+      });
+    }), {
+      valid: o.length === 0,
+      errors: o
+    };
+  }
+  /**
+   * Get import summary (for UI display before confirming)
+   */
+  static getImportSummary(t, e) {
+    const o = this.validateImportedData(t, e);
+    return {
+      artboardCount: t.length,
+      elementCount: e.length,
+      artboardNames: t.map((n) => n.name),
+      warnings: o.errors
+    };
+  }
+  /**
+   * Preload all images in parallel for fast artboard switching
+   * Recursively finds all ImageElements (including those in groups)
+   */
+  static async preloadAllImages(t) {
+    const e = [], o = (s) => {
+      s.transformType === "image" ? e.push(s) : s.transformType === "group" && "children" in s && s.children.forEach((i) => o(i));
+    };
+    t.forEach(o);
+    const n = e.map((s) => new Promise((i) => {
+      if (s.imageLoaded)
+        i();
+      else if (s.imageElement) {
+        const a = s.imageElement, r = () => {
+          a.removeEventListener("load", r), a.removeEventListener("error", l), i();
+        }, l = () => {
+          a.removeEventListener("load", r), a.removeEventListener("error", l), i();
+        };
+        a.addEventListener("load", r), a.addEventListener("error", l);
+      } else
+        i();
+    }));
+    await Promise.all(n);
+  }
+};
+Ft.SUPPORTED_VERSIONS = ["1.0.0", "2.0.0"];
+let Jt = Ft;
+export {
+  Qe as A,
+  qt as C,
+  Jt as I,
+  Oe as R,
+  tn as S,
+  qe as T,
+  Ye as a,
+  sn as b,
+  nn as c,
+  en as d,
+  oe as e,
+  Je as f,
+  $t as g,
+  je as h,
+  Dt as i,
+  $e as j,
+  Ze as k,
+  Ue as r
+};
+//# sourceMappingURL=ImportManager-kRYfIX-D.js.map