@scaleflex/crop 2.0.1

package/dist/chunks/sfx-crop-CEe6OfTZ.js

@@ -0,0 +1,2030 @@
+import { LitElement as $t, css as Z, html as vt } from "lit";
+import { query as pt, property as E, state as Lt } from "lit/decorators.js";
+import { classMap as Ht } from "lit/directives/class-map.js";
+const _e = 80, Zt = {
+  src: "",
+  variant: "classic",
+  cropShape: "16:9",
+  initialCrop: null,
+  initialRotation: 0,
+  initialScale: 1,
+  customAspectRatios: [],
+  minCropSize: 20,
+  availableShapes: [
+    "free",
+    "square",
+    "16:9",
+    "4:3",
+    "3:2",
+    "5:4",
+    "2:1",
+    "9:16",
+    "3:4",
+    "2:3",
+    "4:5",
+    "1:2"
+  ],
+  minScale: 0.5,
+  maxScale: 5,
+  theme: "light",
+  showGrid: "interaction",
+  showRotateSlider: !0,
+  showZoomSlider: !0,
+  showShapeSelector: !0,
+  showRotateButton: !0,
+  showFlipButton: !0,
+  toolbarPosition: "top",
+  showToolbar: !0,
+  overlayColor: "rgba(0, 0, 0, 0.55)",
+  handleSize: 12,
+  handleColor: "#ffffff",
+  borderRadius: 20,
+  outputType: "image/png",
+  outputQuality: 0.92,
+  maxOutputWidth: 0,
+  maxOutputHeight: 0,
+  showBleedMargin: !1,
+  bleedMarginSize: 10,
+  bleedMarginColor: "rgba(255, 0, 0, 0.5)",
+  enableAnimations: !0,
+  animationSpeed: 1,
+  keyboard: !0,
+  pinchZoom: !0,
+  wheelZoom: !0
+};
+function zt(t) {
+  return { ...Zt, ...t };
+}
+function X(t, e, o) {
+  return Math.min(Math.max(t, e), o);
+}
+function $(t, e, o) {
+  return t + (e - t) * o;
+}
+function lt(t) {
+  return t * Math.PI / 180;
+}
+function Ut(t, e, o, i) {
+  const n = o - t, r = i - e;
+  return Math.sqrt(n * n + r * r);
+}
+function Yt(t) {
+  const e = /^(\d+(?:\.\d+)?):(\d+(?:\.\d+)?)$/.exec(t.trim());
+  if (!e) return null;
+  const o = Number(e[1]), i = Number(e[2]);
+  return !Number.isFinite(o) || !Number.isFinite(i) || o <= 0 || i <= 0 ? null : o / i;
+}
+function ft(t) {
+  switch (t) {
+    case "free":
+      return null;
+    case "rounded-rect":
+      return null;
+    case "square":
+    case "circle":
+      return 1;
+    // Everything else — `"16:9"`, `"4:3"`, `"7:2"`, `"2.35:1"` — goes
+    // through `parseRatio`. The switch intentionally doesn't enumerate
+    // the named ratios so the library stays a parser, not a catalog.
+    default:
+      return Yt(t);
+  }
+}
+function Gt(t, e, o, i, n, r) {
+  if (e === null)
+    return jt(t, r, i, n);
+  const u = i / n, l = e / u;
+  let { x: a, y: c, width: p, height: y } = t;
+  const m = o.includes("e") || o.includes("w"), d = o.includes("n") || o.includes("s");
+  m && !d ? y = p / l : d && !m ? p = y * l : y = p / l;
+  const s = t.x + t.width, f = t.y + t.height, x = t.x + t.width / 2, S = t.y + t.height / 2;
+  let v;
+  o.includes("w") ? v = s : o.includes("e") ? v = 1 - t.x : v = 2 * Math.min(x, 1 - x);
+  let b;
+  o.includes("n") ? b = f : o.includes("s") ? b = 1 - t.y : b = 2 * Math.min(S, 1 - S);
+  const k = Math.min(1, v / p, b / y);
+  k < 1 && (p *= k, y *= k);
+  const I = r / i, q = r / n;
+  return p < I && (p = I, y = p / l), y < q && (y = q, p = y * l), o.includes("w") ? a = s - p : o.includes("e") ? a = t.x : a = x - p / 2, o.includes("n") ? c = f - y : o.includes("s") ? c = t.y : c = S - y / 2, a = X(a, 0, 1 - p), c = X(c, 0, 1 - y), { x: a, y: c, width: p, height: y };
+}
+function jt(t, e, o, i) {
+  const n = e / o, r = e / i;
+  return {
+    ...t,
+    width: Math.max(t.width, n),
+    height: Math.max(t.height, r)
+  };
+}
+function Qt(t, e, o, i, n, r, u) {
+  const l = t.rotation * Math.PI / 180, a = Math.abs(Math.cos(l)), c = Math.abs(Math.sin(l)), p = i.width * a + i.height * c, y = i.width * c + i.height * a, m = Math.max(p / n, y / r), d = Math.min(m, u), s = X(t.scale, d, u), f = e / 2 - (i.x + i.width / 2), x = o / 2 - (i.y + i.height / 2), S = Math.max(0, (n * s - p) / 2), v = Math.max(0, (r * s - y) / 2);
+  return {
+    scale: s,
+    panX: X(t.panX, (-S - f) / s, (S - f) / s),
+    panY: X(t.panY, (-v - x) / s, (v - x) / s),
+    minScale: d
+  };
+}
+const _ = 0.8;
+function Ot(t, e, o) {
+  return !e || !o ? t : t / (e / o);
+}
+function Pt(t = "free", e = 1, o = 1) {
+  const i = ft(t);
+  let n;
+  if (i !== null) {
+    const r = Ot(i, e, o);
+    let u, l;
+    r >= 1 ? (u = _, l = u / r, l > _ && (l = _, u = l * r)) : (l = _, u = l * r, u > _ && (u = _, l = u / r)), n = {
+      x: (1 - u) / 2,
+      y: (1 - l) / 2,
+      width: u,
+      height: l
+    };
+  } else {
+    const r = _;
+    n = { x: (1 - r) / 2, y: (1 - r) / 2, width: r, height: r };
+  }
+  return {
+    quarterTurns: 0,
+    rotation: 0,
+    flipH: !1,
+    flipV: !1,
+    scale: 1,
+    panX: 0,
+    panY: 0,
+    cropRect: n
+  };
+}
+function Jt(t) {
+  const e = t.quarterTurns - 90;
+  return {
+    ...t,
+    quarterTurns: e,
+    panX: 0,
+    panY: 0
+  };
+}
+function te(t) {
+  return { ...t, flipH: !t.flipH };
+}
+function mt(t, e) {
+  const o = X(e, -45, 45);
+  let i = t.rotationPivot;
+  if (o === 0)
+    i = void 0;
+  else if (!i) {
+    const n = t.cropRect;
+    i = { x: n.x + n.width / 2, y: n.y + n.height / 2 };
+  }
+  return { ...t, rotation: o, rotationPivot: i };
+}
+function ot(t, e, o, i) {
+  return {
+    ...t,
+    scale: X(e, o, i)
+  };
+}
+function et(t, e) {
+  return {
+    ...t,
+    cropRect: {
+      x: X(e.x, 0, 1 - e.width),
+      y: X(e.y, 0, 1 - e.height),
+      width: X(e.width, 0, 1),
+      height: X(e.height, 0, 1)
+    }
+  };
+}
+function gt(t, e, o = 1, i = 1) {
+  const n = ft(e);
+  let r;
+  if (n === null)
+    r = { ...t.cropRect };
+  else {
+    const u = Ot(n, o, i), { cropRect: l } = t, a = l.x + l.width / 2, c = l.y + l.height / 2;
+    let p, y;
+    u >= 1 ? (p = _, y = p / u, y > _ && (y = _, p = y * u)) : (y = _, p = y * u, p > _ && (p = _, y = p / u)), r = {
+      x: X(a - p / 2, 0, 1 - p),
+      y: X(c - y / 2, 0, 1 - y),
+      width: p,
+      height: y
+    };
+  }
+  return {
+    ...t,
+    cropRect: r
+  };
+}
+function Et(t, e, o) {
+  return {
+    ...t,
+    panX: t.panX + e,
+    panY: t.panY + o
+  };
+}
+function ct(t, e, o, i, n) {
+  const r = Math.round(n / 90) % 2 !== 0, u = r ? e : t, l = r ? t : e, a = Math.max(u / o, l / i);
+  return { drawW: o * a, drawH: i * a };
+}
+function ee(t, e, o, i, n = !1) {
+  const { x: r, y: u, w: l, h: a } = o, c = r + l / 2, p = u + a / 2;
+  t.save();
+  const y = r + (i.cropRect.x + i.cropRect.width / 2) * l, m = u + (i.cropRect.y + i.cropRect.height / 2) * a, d = i.rotationPivot ?? {
+    x: i.cropRect.x + i.cropRect.width / 2,
+    y: i.cropRect.y + i.cropRect.height / 2
+  }, s = r + d.x * l, f = u + d.y * a;
+  i.rotation !== 0 && (t.translate(s, f), t.rotate(lt(i.rotation)), t.translate(-s, -f)), (i.flipH !== 1 || i.flipV !== 1) && (t.translate(y, m), t.scale(i.flipH, i.flipV), t.translate(-y, -m)), t.translate(c, p), t.scale(i.scale, i.scale), t.translate(i.panX, i.panY), i.quarterTurns !== 0 && t.rotate(lt(i.quarterTurns));
+  let x, S;
+  if (n) {
+    const v = ct(l, a, e.naturalWidth, e.naturalHeight, i.quarterTurns);
+    x = v.drawW, S = v.drawH;
+  } else {
+    const b = Math.round(i.quarterTurns / 90) % 2 !== 0 ? Math.min(l, a) / Math.max(l, a) : 1;
+    x = l * b, S = a * b;
+  }
+  t.drawImage(e, -x / 2, -S / 2, x, S), t.restore();
+}
+let j = null;
+function re(t, e) {
+  j || (j = document.createElement("canvas")), (j.width !== t || j.height !== e) && (j.width = t, j.height = e);
+  const o = j.getContext("2d");
+  return o.clearRect(0, 0, t, e), o;
+}
+function oe(t, e, o, i, n = "rect", r = 20, u = "rgba(0, 0, 0, 0.55)") {
+  const l = re(e, o);
+  if (l.fillStyle = u, l.fillRect(0, 0, e, o), l.globalCompositeOperation = "destination-out", l.fillStyle = "rgba(0, 0, 0, 1)", n === "circle") {
+    const a = i.x + i.width / 2, c = i.y + i.height / 2, p = i.width / 2, y = i.height / 2;
+    l.beginPath(), l.ellipse(a, c, p, y, 0, 0, Math.PI * 2), l.fill();
+  } else if (n === "rounded-rect") {
+    const { x: a, y: c, width: p, height: y } = i, m = Math.min(r, p / 2, y / 2);
+    l.beginPath(), l.moveTo(a + m, c), l.lineTo(a + p - m, c), l.arcTo(a + p, c, a + p, c + m, m), l.lineTo(a + p, c + y - m), l.arcTo(a + p, c + y, a + p - m, c + y, m), l.lineTo(a + m, c + y), l.arcTo(a, c + y, a, c + y - m, m), l.lineTo(a, c + m), l.arcTo(a, c, a + m, c, m), l.closePath(), l.fill();
+  } else
+    l.fillRect(i.x, i.y, i.width, i.height);
+  l.globalCompositeOperation = "source-over", t.drawImage(j, 0, 0);
+}
+const ie = 12, ne = 22, ht = 11, st = 9, ae = {
+  frame: "#ffffff",
+  frameShadow: "rgba(0, 0, 0, 0.3)",
+  handleFill: "#ffffff",
+  handleStroke: "rgba(0, 0, 0, 0.25)"
+};
+function se(t, e, o = "rect", i = 20, n = ae, r = !0) {
+  const u = o === "circle", l = o === "rounded-rect", { x: a, y: c, width: p, height: y } = e;
+  if (t.save(), t.strokeStyle = n.frameShadow, t.lineWidth = 1, u) {
+    const x = a + p / 2, S = c + y / 2, v = p / 2 - 1, b = y / 2 - 1;
+    t.beginPath(), t.ellipse(x, S, v, b, 0, 0, Math.PI * 2), t.stroke();
+  } else l ? (It(t, a + 1, c + 1, p - 2, y - 2, Math.min(i, p / 2, y / 2)), t.stroke()) : t.strokeRect(a + 1, c + 1, p - 2, y - 2);
+  if (t.strokeStyle = n.frame, t.lineWidth = 2, u) {
+    const x = a + p / 2, S = c + y / 2, v = p / 2, b = y / 2;
+    t.beginPath(), t.ellipse(x, S, v, b, 0, 0, Math.PI * 2), t.stroke(), t.setLineDash([4, 4]), t.strokeStyle = n.frameShadow, t.lineWidth = 1, t.beginPath(), t.ellipse(x, S, v - 1, b - 1, 0, 0, Math.PI * 2), t.stroke(), t.setLineDash([]);
+  } else if (l) {
+    const x = Math.min(i, p / 2, y / 2);
+    It(t, a, c, p, y, x), t.stroke();
+  } else
+    t.strokeRect(a, c, p, y);
+  if (!r) {
+    t.restore();
+    return;
+  }
+  t.fillStyle = n.handleFill, t.strokeStyle = n.handleStroke, t.lineWidth = 1;
+  const m = Math.min(ie / 2, p / 6, y / 6), d = [
+    { cx: a, cy: c },
+    { cx: a + p, cy: c },
+    { cx: a + p, cy: c + y },
+    { cx: a, cy: c + y }
+  ];
+  for (const x of d)
+    t.beginPath(), t.arc(x.cx, x.cy, m, 0, Math.PI * 2), t.fill(), t.stroke();
+  const s = a - ht, f = c - ht;
+  t.beginPath(), t.arc(s, f, m, 0, Math.PI * 2), t.fill(), t.stroke(), t.fillStyle = n.handleStroke, t.beginPath(), t.arc(s, f, Math.max(2, m * 0.35), 0, Math.PI * 2), t.fill(), t.restore();
+}
+function It(t, e, o, i, n, r) {
+  r = Math.min(r, i / 2, n / 2), t.beginPath(), t.moveTo(e + r, o), t.lineTo(e + i - r, o), t.arcTo(e + i, o, e + i, o + r, r), t.lineTo(e + i, o + n - r), t.arcTo(e + i, o + n, e + i - r, o + n, r), t.lineTo(e + r, o + n), t.arcTo(e, o + n, e, o + n - r, r), t.lineTo(e, o + r), t.arcTo(e, o, e + r, o, r), t.closePath();
+}
+function le(t) {
+  const { x: e, y: o, width: i, height: n } = t, r = ne;
+  return [
+    // Move-handle (NW diagonal) — checked first so it wins over the NW
+    // corner's hit area where they overlap.
+    {
+      target: "move-handle",
+      rect: {
+        x: e - ht - st,
+        y: o - ht - st,
+        w: st * 2,
+        h: st * 2
+      }
+    },
+    // Corner handles (highest priority — checked first)
+    { target: "handle-nw", rect: { x: e - r, y: o - r, w: r * 2, h: r * 2 } },
+    { target: "handle-ne", rect: { x: e + i - r, y: o - r, w: r * 2, h: r * 2 } },
+    { target: "handle-se", rect: { x: e + i - r, y: o + n - r, w: r * 2, h: r * 2 } },
+    { target: "handle-sw", rect: { x: e - r, y: o + n - r, w: r * 2, h: r * 2 } },
+    // Edge hit zones (no visual handle, but cursor + resize still work)
+    { target: "handle-n", rect: { x: e + r, y: o - r, w: i - r * 2, h: r * 2 } },
+    { target: "handle-s", rect: { x: e + r, y: o + n - r, w: i - r * 2, h: r * 2 } },
+    { target: "handle-e", rect: { x: e + i - r, y: o + r, w: r * 2, h: n - r * 2 } },
+    { target: "handle-w", rect: { x: e - r, y: o + r, w: r * 2, h: n - r * 2 } }
+  ];
+}
+function ce(t, e, o) {
+  const { x: i, y: n, width: r, height: u } = e;
+  t.save(), t.strokeStyle = `rgba(255, 255, 255, ${0.35 * o})`, t.lineWidth = 0.5;
+  for (let l = 1; l <= 2; l++) {
+    const a = i + r * l / 3;
+    t.beginPath(), t.moveTo(a, n), t.lineTo(a, n + u), t.stroke();
+  }
+  for (let l = 1; l <= 2; l++) {
+    const a = n + u * l / 3;
+    t.beginPath(), t.moveTo(i, a), t.lineTo(i + r, a), t.stroke();
+  }
+  t.restore();
+}
+function he(t, e, o, i) {
+  o * 2 >= e.width || o * 2 >= e.height || (t.save(), t.strokeStyle = i, t.lineWidth = 1, t.setLineDash([6, 4]), t.strokeRect(
+    e.x + o,
+    e.y + o,
+    e.width - o * 2,
+    e.height - o * 2
+  ), t.setLineDash([]), t.restore());
+}
+function ue(t, e, o, i = 20, n = !1, r) {
+  const u = t.getContext("2d");
+  if (!u) throw new Error("2D canvas context unavailable");
+  const l = u;
+  function a() {
+    if (r) return r;
+    if (t.parentElement) return t.parentElement;
+    let w = t.getRootNode();
+    for (; w && w !== document && w instanceof ShadowRoot; ) {
+      const H = w.host;
+      if (H instanceof HTMLElement) return H;
+      w = H.getRootNode();
+    }
+    return null;
+  }
+  let c = !0, p = null, y = !1, m = !1, d = 0;
+  const s = {
+    quarterTurns: 0,
+    rotation: 0,
+    flipH: 1,
+    flipV: 1,
+    scale: 1,
+    panX: 0,
+    panY: 0,
+    cropRect: { x: 0, y: 0, width: 1, height: 1 },
+    gridOpacity: 0,
+    interactive: !1
+  }, f = { ...s }, x = {
+    quarterTurns: 0,
+    flipH: 0,
+    flipV: 0
+  };
+  let S = { show: !1, size: 10, color: "rgba(255, 0, 0, 0.5)" }, v = 0, b = 0.5, k = 5, I = !1;
+  function q() {
+    if (y) return;
+    const w = a();
+    if (!w) return;
+    const H = window.devicePixelRatio, A = Math.min(Number.isFinite(H) && H > 0 ? H : 1, 2), O = w.getBoundingClientRect();
+    O.width <= 0 || O.height <= 0 || (t.width = Math.max(0, Math.floor(O.width * A)), t.height = Math.max(0, Math.floor(O.height * A)), t.style.width = `${O.width}px`, t.style.height = `${O.height}px`, l.setTransform(A, 0, 0, A, 0, 0), c = !0);
+  }
+  function N() {
+    const w = a();
+    return w ? { x: 0, y: 0, w: w.clientWidth, h: w.clientHeight } : { x: 0, y: 0, w: 0, h: 0 };
+  }
+  function Y() {
+    const w = N(), H = s.cropRect;
+    return {
+      x: w.x + H.x * w.w,
+      y: w.y + H.y * w.h,
+      width: H.width * w.w,
+      height: H.height * w.h
+    };
+  }
+  function U(w, H) {
+    return 1 - Math.pow(1 - w, H * 60);
+  }
+  function Q(w) {
+    if (n) {
+      s.quarterTurns = f.quarterTurns, s.rotation = f.rotation, s.flipH = f.flipH, s.flipV = f.flipV, s.scale = f.scale, s.panX = f.panX, s.panY = f.panY, s.cropRect = { ...f.cropRect }, s.gridOpacity = f.gridOpacity, s.interactive = f.interactive, c = !0;
+      return;
+    }
+    let H = !1;
+    if (Math.abs(s.quarterTurns - f.quarterTurns) > 0.01) {
+      const T = -180 * (s.quarterTurns - f.quarterTurns), B = -22 * x.quarterTurns;
+      x.quarterTurns += (T + B) * w, s.quarterTurns += x.quarterTurns * w, Math.abs(s.quarterTurns - f.quarterTurns) < 0.01 && Math.abs(x.quarterTurns) < 0.01 && (s.quarterTurns = f.quarterTurns, x.quarterTurns = 0), H = !0, c = !0;
+    }
+    if (Math.abs(s.flipH - f.flipH) > 0.01) {
+      const T = -400 * (s.flipH - f.flipH), B = -28 * x.flipH;
+      x.flipH += (T + B) * w, s.flipH += x.flipH * w, Math.abs(s.flipH - f.flipH) < 0.01 && Math.abs(x.flipH) < 0.01 && (s.flipH = f.flipH, x.flipH = 0), H = !0, c = !0;
+    }
+    if (Math.abs(s.flipV - f.flipV) > 0.01) {
+      const T = -400 * (s.flipV - f.flipV), B = -28 * x.flipV;
+      x.flipV += (T + B) * w, s.flipV += x.flipV * w, Math.abs(s.flipV - f.flipV) < 0.01 && Math.abs(x.flipV) < 0.01 && (s.flipV = f.flipV, x.flipV = 0), H = !0, c = !0;
+    }
+    const A = U(0.15, w), O = U(0.12, w), V = U(0.12, w);
+    if (Math.abs(s.rotation - f.rotation) > 0.01 && (s.rotation = $(s.rotation, f.rotation, A), H = !0, c = !0), Math.abs(s.scale - f.scale) > 1e-3 && (s.scale = $(s.scale, f.scale, A), H = !0, c = !0), !!f.interactive) {
+      (s.panX !== f.panX || s.panY !== f.panY) && (s.panX = f.panX, s.panY = f.panY, c = !0);
+      const P = f.cropRect, T = s.cropRect;
+      (T.x !== P.x || T.y !== P.y || T.width !== P.width || T.height !== P.height) && (s.cropRect = { ...P }, c = !0);
+    } else {
+      Math.abs(s.panX - f.panX) > 0.1 && (s.panX = $(s.panX, f.panX, A), H = !0, c = !0), Math.abs(s.panY - f.panY) > 0.1 && (s.panY = $(s.panY, f.panY, A), H = !0, c = !0);
+      const P = s.cropRect, T = f.cropRect;
+      (Math.abs(P.x - T.x) > 1e-4 || Math.abs(P.y - T.y) > 1e-4 || Math.abs(P.width - T.width) > 1e-4 || Math.abs(P.height - T.height) > 1e-4) && (s.cropRect = {
+        x: $(P.x, T.x, O),
+        y: $(P.y, T.y, O),
+        width: $(P.width, T.width, O),
+        height: $(P.height, T.height, O)
+      }, H = !0, c = !0);
+    }
+    if (Math.abs(s.gridOpacity - f.gridOpacity) > 0.01 && (s.gridOpacity = $(s.gridOpacity, f.gridOpacity, V), H = !0, c = !0), s.scale < b) {
+      const T = -400 * (s.scale - b), B = -28 * v;
+      v += (T + B) * w, s.scale += v * w, Math.abs(s.scale - b) < 1e-3 && Math.abs(v) < 1e-3 && (s.scale = b, v = 0), H = !0, c = !0;
+    } else if (s.scale > k) {
+      const T = -400 * (s.scale - k), B = -28 * v;
+      v += (T + B) * w, s.scale += v * w, Math.abs(s.scale - k) < 1e-3 && Math.abs(v) < 1e-3 && (s.scale = k, v = 0), H = !0, c = !0;
+    }
+    H || (s.rotation = f.rotation, s.scale = f.scale, s.panX = f.panX, s.panY = f.panY, s.cropRect = { ...f.cropRect }, s.gridOpacity = f.gridOpacity, s.interactive = f.interactive);
+  }
+  function G(w) {
+    if (y || !m) {
+      p = null;
+      return;
+    }
+    const H = typeof w == "number" ? w : performance.now(), A = d === 0 ? 1 / 60 : Math.min(0.25, Math.max(0, (H - d) / 1e3));
+    if (d = H, p = requestAnimationFrame(G), Q(A), !c) return;
+    const O = a();
+    if (!O) return;
+    const V = O.clientWidth, D = O.clientHeight;
+    if (V === 0 || D === 0) return;
+    c = !1, l.clearRect(0, 0, V, D);
+    const P = N();
+    ee(l, e, P, s, I);
+    const T = Y(), B = o(), dt = a() ?? t, J = (tt, at) => getComputedStyle(dt).getPropertyValue(tt).trim() || at;
+    if (!(I && B === "rect")) {
+      const tt = J("--sfx-cr-overlay-color", "rgba(0, 0, 0, 0.55)");
+      oe(l, V, D, T, B, i, tt);
+    }
+    I && B === "rect" || se(l, T, B, i, {
+      frame: J("--sfx-cr-frame-color", "#ffffff"),
+      frameShadow: J("--sfx-cr-frame-shadow", "rgba(0, 0, 0, 0.3)"),
+      handleFill: J("--sfx-cr-handle-fill", "#ffffff"),
+      handleStroke: J("--sfx-cr-handle-stroke", "rgba(0, 0, 0, 0.25)")
+    }, !I), S.show && he(l, T, S.size, S.color), s.gridOpacity > 0.01 && ce(l, T, s.gridOpacity);
+  }
+  return q(), {
+    markDirty() {
+      c = !0;
+    },
+    startLoop() {
+      m || y || (m = !0, d = 0, G());
+    },
+    stopLoop() {
+      m = !1, p !== null && (cancelAnimationFrame(p), p = null);
+    },
+    setDisplayState(w) {
+      Object.assign(f, w), s.rotationPivot = w.rotationPivot, c = !0;
+    },
+    getDisplayState() {
+      return { ...s };
+    },
+    getCanvasCropRect: Y,
+    setScaleBounds(w, H) {
+      b = w, k = H;
+    },
+    setBleedConfig(w) {
+      S = w, c = !0;
+    },
+    setFixedFrame(w) {
+      I = w, c = !0;
+    },
+    resize: q,
+    destroy() {
+      y = !0, m = !1, p !== null && (cancelAnimationFrame(p), p = null);
+    }
+  };
+}
+const pe = [
+  "nw",
+  "ne",
+  "sw",
+  "se",
+  "n",
+  "s",
+  "e",
+  "w"
+];
+function fe(t) {
+  return pe.includes(t) ? t : null;
+}
+function de(t, e, o) {
+  return t >= o.x && t <= o.x + o.w && e >= o.y && e <= o.y + o.h;
+}
+function xt(t, e, o) {
+  const i = le(o);
+  for (const { target: n, rect: r } of i)
+    if (de(t, e, r)) {
+      if (n === "move-handle") return { type: "move-handle" };
+      const u = fe(n.replace("handle-", ""));
+      if (u) return { type: "handle", position: u };
+    }
+  return t >= o.x && t <= o.x + o.width && e >= o.y && e <= o.y + o.height ? { type: "crop-area" } : { type: "outside" };
+}
+function Dt(t, e) {
+  if (t.type === "move-handle") return "move";
+  switch (t.type) {
+    case "crop-area":
+      return "move";
+    case "outside":
+      return "crosshair";
+    case "handle":
+      switch (t.position) {
+        case "nw":
+        case "se":
+          return "nwse-resize";
+        case "ne":
+        case "sw":
+          return "nesw-resize";
+        case "n":
+        case "s":
+          return "ns-resize";
+        case "e":
+        case "w":
+          return "ew-resize";
+        default:
+          return "default";
+      }
+    default:
+      return "default";
+  }
+}
+function ye(t, e) {
+  const o = /* @__PURE__ */ new Map();
+  let i = 0, n = !1;
+  function r(d) {
+    return d === "touch" || d === "pen" ? d : "mouse";
+  }
+  function u(d) {
+    const s = t.getBoundingClientRect();
+    return {
+      x: d.clientX - s.left,
+      y: d.clientY - s.top
+    };
+  }
+  function l() {
+    return [...o.values()];
+  }
+  function a(d) {
+    if (d.pointerType === "mouse" && d.button !== 0) return;
+    try {
+      t.setPointerCapture(d.pointerId);
+    } catch {
+    }
+    const s = u(d), f = {
+      id: d.pointerId,
+      x: s.x,
+      y: s.y,
+      startX: s.x,
+      startY: s.y,
+      pressure: d.pressure,
+      pointerType: r(d.pointerType),
+      shiftKey: d.shiftKey,
+      altKey: d.altKey
+    };
+    o.set(d.pointerId, f), e.onPointerDown(f, l());
+  }
+  function c(d) {
+    const s = o.get(d.pointerId);
+    if (!s) {
+      if (e.onHover) {
+        const S = u(d);
+        e.onHover({
+          id: d.pointerId,
+          x: S.x,
+          y: S.y,
+          startX: S.x,
+          startY: S.y,
+          pressure: 0,
+          pointerType: r(d.pointerType),
+          shiftKey: d.shiftKey,
+          altKey: d.altKey
+        });
+      }
+      return;
+    }
+    const f = u(d);
+    s.x = f.x, s.y = f.y, s.pressure = d.pressure, s.shiftKey = d.shiftKey, s.altKey = d.altKey;
+    const x = l();
+    if (e.onPointerMove(s, x), x.length === 2 && e.onPinch) {
+      const [S, v] = x, b = Math.sqrt((v.x - S.x) ** 2 + (v.y - S.y) ** 2);
+      !n && b > 10 && (i = b, n = !0), n && e.onPinch({
+        centerX: (S.x + v.x) / 2,
+        centerY: (S.y + v.y) / 2,
+        scale: b / i,
+        distance: b
+      });
+    }
+  }
+  function p(d) {
+    const s = o.get(d.pointerId);
+    if (s) {
+      o.delete(d.pointerId);
+      try {
+        t.releasePointerCapture(d.pointerId);
+      } catch {
+      }
+      l().length < 2 && (n = !1, i = 0), e.onPointerUp(s, l());
+    }
+  }
+  function y(d) {
+    e.onWheel && e.onWheel(d);
+  }
+  t.addEventListener("pointerdown", a), t.addEventListener("pointermove", c), t.addEventListener("pointerup", p), t.addEventListener("pointercancel", p), t.addEventListener("wheel", y, { passive: !1 });
+  const m = (d) => d.preventDefault();
+  return t.addEventListener("contextmenu", m), t.style.touchAction = "none", {
+    destroy() {
+      t.removeEventListener("pointerdown", a), t.removeEventListener("pointermove", c), t.removeEventListener("pointerup", p), t.removeEventListener("pointercancel", p), t.removeEventListener("wheel", y), t.removeEventListener("contextmenu", m), t.style.touchAction = "", o.clear();
+    }
+  };
+}
+function me(t, e, o, i, n) {
+  const r = (e - t.startX) / i, u = (o - t.startY) / n, { startCrop: l } = t;
+  return {
+    x: X(l.x - r, 0, 1 - l.width),
+    y: X(l.y - u, 0, 1 - l.height),
+    width: l.width,
+    height: l.height
+  };
+}
+function ge(t, e, o, i) {
+  return {
+    handle: t.startsWith("handle-") ? t.slice(7) : t,
+    startCrop: { ...e },
+    startX: o,
+    startY: i
+  };
+}
+function xe(t, e, o, i, n, r, u, l = { shiftKey: !1, altKey: !1 }) {
+  const a = (e - t.startX) / i, c = (o - t.startY) / n, { startCrop: p, handle: y } = t;
+  let m = p.x, d = p.y, s = p.width, f = p.height;
+  const x = u / i, S = u / n;
+  if (y.includes("w")) {
+    const k = X(m + a, 0, m + s - x);
+    s = s - (k - m), m = k;
+  }
+  if (y.includes("e") && (s = X(s + a, x, 1 - m)), y.includes("n")) {
+    const k = X(d + c, 0, d + f - S);
+    f = f - (k - d), d = k;
+  }
+  if (y.includes("s") && (f = X(f + c, S, 1 - d)), s = Math.max(s, x), f = Math.max(f, S), l.altKey) {
+    const k = p.x + p.width / 2, I = p.y + p.height / 2, q = s / 2, N = f / 2;
+    m = X(k - q, 0, 1 - s), d = X(I - N, 0, 1 - f);
+  }
+  let v = { x: m, y: d, width: s, height: f }, b = ft(r);
+  return l.shiftKey && r === "free" && (b = p.width / p.height), b !== null && (v = Gt(v, b, y, i, n, u)), v;
+}
+function we(t, e) {
+  if (t.length < 2) return null;
+  const [o, i] = t, n = Ut(o.x, o.y, i.x, i.y);
+  return n < 10 ? null : {
+    initialDistance: n,
+    initialScale: e,
+    initialCenterX: (o.x + i.x) / 2,
+    initialCenterY: (o.y + i.y) / 2
+  };
+}
+function be(t, e, o, i, n, r, u) {
+  const l = 1 - t * o.sensitivity * 1e-3, a = X(e * l, o.minScale, o.maxScale);
+  let c = 0, p = 0;
+  if (i !== void 0 && r !== void 0) {
+    const y = 1 - a / e;
+    c = (i - r) * y, p = (n - u) * y;
+  }
+  return { scale: a, panDeltaX: c, panDeltaY: p };
+}
+function ve(t, e) {
+  function o(i) {
+    if (!((typeof i.composedPath == "function" ? i.composedPath() : []).includes(t) || t.contains(document.activeElement) || document.activeElement === t) || i.ctrlKey || i.metaKey || i.altKey) return;
+    const u = i.shiftKey ? 0.01 : 5e-3;
+    switch (i.key) {
+      case "ArrowLeft":
+        i.preventDefault(), e.onMoveCrop(-u, 0);
+        break;
+      case "ArrowRight":
+        i.preventDefault(), e.onMoveCrop(u, 0);
+        break;
+      case "ArrowUp":
+        i.preventDefault(), e.onMoveCrop(0, -u);
+        break;
+      case "ArrowDown":
+        i.preventDefault(), e.onMoveCrop(0, u);
+        break;
+      case "r":
+      case "R":
+        i.preventDefault(), e.onRotateLeft();
+        break;
+      case "f":
+      case "F":
+        i.preventDefault(), e.onFlipH();
+        break;
+      case "+":
+      case "=":
+        i.preventDefault(), e.onZoomIn();
+        break;
+      case "-":
+      case "_":
+        i.preventDefault(), e.onZoomOut();
+        break;
+      case "0":
+        i.preventDefault(), e.onResetZoom();
+        break;
+      case "[":
+        i.preventDefault(), e.onRotateFine(-1);
+        break;
+      case "]":
+        i.preventDefault(), e.onRotateFine(1);
+        break;
+    }
+  }
+  return t.addEventListener("keydown", o), {
+    destroy() {
+      t.removeEventListener("keydown", o);
+    }
+  };
+}
+function Se(t) {
+  t.setAttribute("role", "application"), t.setAttribute("aria-roledescription", "image crop tool"), t.setAttribute("aria-label", "Image crop tool — use arrow keys to move crop, R to rotate, F to flip horizontal, +/- to zoom"), t.setAttribute("tabindex", "0");
+}
+function wt(t, e, o = "free") {
+  let i = t.querySelector(".sfx-cr-sr-only[aria-live]");
+  i || (i = document.createElement("div"), i.className = "sfx-cr-sr-only", i.setAttribute("aria-live", "polite"), t.appendChild(i));
+  const n = e.quarterTurns + e.rotation, r = Math.round(e.scale * 100), u = o, l = e.flipH ? ", flipped horizontal" : "";
+  i.textContent = `Crop: ${u}, rotation ${n.toFixed(1)}°${l}, zoom ${r}%`;
+}
+function St(t) {
+  const e = t.getContext("2d");
+  if (!e) throw new Error("2D canvas context unavailable");
+  return e;
+}
+function Re(t, e, o) {
+  const i = t.quarterTurns + t.rotation, n = Math.round(t.cropRect.width * e), r = Math.round(t.cropRect.height * o), u = Math.round(t.quarterTurns / 90) % 2 !== 0;
+  return {
+    rotation: i,
+    flipH: t.flipH,
+    flipV: t.flipV,
+    scale: t.scale,
+    crop: {
+      x: Math.round(t.cropRect.x * e),
+      y: Math.round(t.cropRect.y * o),
+      width: n,
+      height: r
+    },
+    outputWidth: u ? r : n,
+    outputHeight: u ? n : r
+  };
+}
+function Me(t, e, o, i, n = "free", r = 20, u = 0, l = 0, a = "classic") {
+  const c = t.naturalWidth, p = t.naturalHeight, y = a === "fixed" && u > 0 && l > 0;
+  let m, d, s, f;
+  if (y) {
+    const O = ct(u, l, c, p, e.quarterTurns), V = Math.max(c / O.drawW, p / O.drawH);
+    m = Math.max(1, Math.round(u * V)), d = Math.max(1, Math.round(l * V));
+    const D = ct(m, d, c, p, e.quarterTurns);
+    s = D.drawW, f = D.drawH;
+  } else {
+    m = c, d = p;
+    const V = Math.round(e.quarterTurns / 90) % 2 !== 0 ? Math.min(m, d) / Math.max(m, d) : 1;
+    s = m * V, f = d * V;
+  }
+  const x = e.cropRect.x * m, S = e.cropRect.y * d, v = e.cropRect.width * m, b = e.cropRect.height * d;
+  let k = Math.max(1, Math.round(v)), I = Math.max(1, Math.round(b));
+  o > 0 && k > o && (I = Math.max(1, Math.round(I * (o / k))), k = o), i > 0 && I > i && (k = Math.max(1, Math.round(k * (i / I))), I = i);
+  const q = v > 1e-6 ? k / v : 1, N = document.createElement("canvas");
+  N.width = k, N.height = I;
+  const Y = St(N);
+  Y.save(), Y.scale(q, q), Y.translate(-x, -S);
+  const U = (e.cropRect.x + e.cropRect.width / 2) * m, Q = (e.cropRect.y + e.cropRect.height / 2) * d, G = e.rotationPivot ?? {
+    x: e.cropRect.x + e.cropRect.width / 2,
+    y: e.cropRect.y + e.cropRect.height / 2
+  }, w = G.x * m, H = G.y * d;
+  e.rotation !== 0 && (Y.translate(w, H), Y.rotate(lt(e.rotation)), Y.translate(-w, -H)), (e.flipH || e.flipV) && (Y.translate(U, Q), Y.scale(e.flipH ? -1 : 1, e.flipV ? -1 : 1), Y.translate(-U, -Q)), Y.translate(m / 2, d / 2), Y.scale(e.scale, e.scale);
+  const A = u > 0 ? m / u : 1;
+  return Y.translate(e.panX * A, e.panY * A), e.quarterTurns !== 0 && Y.rotate(lt(e.quarterTurns)), Y.drawImage(t, -s / 2, -f / 2, s, f), Y.restore(), n === "circle" ? Te(N) : n === "rounded-rect" && Ce(N, r), N;
+}
+function Ce(t, e) {
+  const o = St(t), i = t.width, n = t.height, r = Math.min(e, i / 2, n / 2);
+  o.globalCompositeOperation = "destination-in", o.beginPath(), o.moveTo(r, 0), o.lineTo(i - r, 0), o.arcTo(i, 0, i, r, r), o.lineTo(i, n - r), o.arcTo(i, n, i - r, n, r), o.lineTo(r, n), o.arcTo(0, n, 0, n - r, r), o.lineTo(0, r), o.arcTo(0, 0, r, 0, r), o.closePath(), o.fill(), o.globalCompositeOperation = "source-over";
+}
+function Te(t) {
+  const e = St(t), o = t.width, i = t.height;
+  e.globalCompositeOperation = "destination-in", e.beginPath(), e.ellipse(o / 2, i / 2, o / 2, i / 2, 0, 0, Math.PI * 2), e.fill(), e.globalCompositeOperation = "source-over";
+}
+async function ke(t, e, o) {
+  return new Promise((i, n) => {
+    let r = !1;
+    try {
+      t.toBlob(
+        (u) => {
+          r || (r = !0, u ? i(u) : n(new Error("Failed to create blob (canvas may be empty or tainted)")));
+        },
+        e,
+        o
+      );
+    } catch (u) {
+      r || (r = !0, n(u instanceof Error ? u : new Error(String(u))));
+    }
+  });
+}
+function He(t) {
+  const { canvas: e, host: o, layoutContainer: i, callbacks: n = {} } = t;
+  let r = { ...t.config }, u = r.cropShape, l = null, a = Pt(r.cropShape), c = null, p = null, y = null, m = null, d = null, s = !1, f = !1, x = 0, S = null, v = null, b = null, k = null, I = null, q = 0, N = 0, Y = 0;
+  r.initialCrop && (a = et(a, r.initialCrop)), r.initialRotation && (a = mt(a, r.initialRotation)), r.initialScale && r.initialScale !== 1 && (a = ot(a, r.initialScale, r.minScale, r.maxScale));
+  function U() {
+    return u === "circle" ? "circle" : u === "rounded-rect" ? "rounded-rect" : "rect";
+  }
+  function Q() {
+    return { ...a, cropRect: { ...a.cropRect } };
+  }
+  function G() {
+    if (!l) return { ...a.cropRect };
+    const h = l.naturalWidth, g = l.naturalHeight;
+    return {
+      x: Math.round(a.cropRect.x * h),
+      y: Math.round(a.cropRect.y * g),
+      width: Math.round(a.cropRect.width * h),
+      height: Math.round(a.cropRect.height * g)
+    };
+  }
+  const w = { x: 0, y: 0, width: 1, height: 1 };
+  let H = 0, A = 0;
+  function O() {
+    const h = i.clientWidth, g = i.clientHeight;
+    return h > 0 && g > 0 && (H = h, A = g), { w: h > 0 ? h : H, h: g > 0 ? g : A };
+  }
+  function V() {
+    if (!l || !c) return;
+    const { w: h, h: g } = O();
+    if (h <= 0 || g <= 0) return;
+    let C, F, L;
+    if (r.variant === "fixed") {
+      C = { x: 0, y: 0, width: h, height: g };
+      const z = ct(h, g, l.naturalWidth, l.naturalHeight, a.quarterTurns);
+      F = z.drawW, L = z.drawH;
+    } else {
+      if (Math.round(a.quarterTurns / 90) % 2 !== 0) {
+        c.setScaleBounds(r.minScale, r.maxScale);
+        return;
+      }
+      const z = a.cropRect;
+      C = { x: z.x * h, y: z.y * g, width: z.width * h, height: z.height * g }, F = h, L = g;
+    }
+    const W = Qt(a, h, g, C, F, L, r.maxScale);
+    a = { ...a, scale: W.scale, panX: W.panX, panY: W.panY }, c.setScaleBounds(W.minScale, r.maxScale);
+  }
+  function D() {
+    if (!c) return;
+    V();
+    const h = {
+      quarterTurns: a.quarterTurns,
+      rotation: a.rotation,
+      flipH: a.flipH ? -1 : 1,
+      flipV: a.flipV ? -1 : 1,
+      scale: a.scale,
+      panX: a.panX,
+      panY: a.panY,
+      cropRect: { ...a.cropRect },
+      rotationPivot: a.rotationPivot,
+      gridOpacity: f || r.showGrid === !0 ? 1 : 0,
+      interactive: f
+    };
+    c.setDisplayState(h);
+  }
+  function P() {
+    var h;
+    (h = n.onChange) == null || h.call(n, Q());
+  }
+  function T() {
+    var h;
+    (h = n.onCropChange) == null || h.call(n, G());
+  }
+  m = new ResizeObserver(() => {
+    s || (d && clearTimeout(d), d = setTimeout(() => {
+      d = null, !s && (c == null || c.resize(), D(), c == null || c.markDirty());
+    }, 16));
+  }), m.observe(i);
+  async function B(h) {
+    var C, F, L, W, z;
+    if (s) return;
+    const g = ++x;
+    (C = n.onLoadingChange) == null || C.call(n, !0, null);
+    try {
+      const K = new Image();
+      if (K.crossOrigin = "anonymous", await new Promise((rt, Kt) => {
+        K.onload = () => rt(), K.onerror = () => Kt(new Error(`Failed to load image: ${h}`)), K.src = h;
+      }), s || g !== x) return;
+      l = K, (F = n.onLoadingChange) == null || F.call(n, !1, null), (L = n.onImageLoad) == null || L.call(n, K), dt();
+    } catch (K) {
+      if (s || g !== x) return;
+      const rt = K.message;
+      (W = n.onLoadingChange) == null || W.call(n, !1, rt), (z = n.onError) == null || z.call(n, K);
+    }
+  }
+  function dt() {
+    var g, C;
+    if (!l) return;
+    r.variant === "fixed" ? a = { ...a, cropRect: { ...w } } : r.initialCrop || (a = gt(a, u, l.naturalWidth, l.naturalHeight));
+    const h = !r.enableAnimations || typeof window < "u" && ((g = window.matchMedia) == null ? void 0 : g.call(window, "(prefers-reduced-motion: reduce)").matches);
+    c = ue(
+      e,
+      l,
+      U,
+      r.borderRadius,
+      h,
+      // Pass the layout container explicitly: the canvas lives in its own
+      // shadow root and `canvas.parentElement` returns null there.
+      i
+    ), c.setScaleBounds(r.minScale, r.maxScale), c.setFixedFrame(r.variant === "fixed"), c.setBleedConfig({
+      show: r.showBleedMargin,
+      size: r.bleedMarginSize,
+      color: r.bleedMarginColor
+    }), D(), c.startLoop(), J(), r.keyboard && (y = ve(o, {
+      onRotateLeft: () => Ct(),
+      onFlipH: () => Tt(),
+      onZoomIn: () => it(a.scale + 0.1),
+      onZoomOut: () => it(a.scale - 0.1),
+      onResetZoom: () => it(1),
+      onMoveCrop: (F, L) => {
+        if (r.variant === "fixed") return;
+        const W = a.cropRect;
+        a = et(a, { x: W.x + F, y: W.y + L, width: W.width, height: W.height }), D(), P(), T();
+      },
+      onRotateFine: (F) => kt(a.rotation + F)
+    })), (C = n.onReady) == null || C.call(n);
+  }
+  function J() {
+    p = ye(e, {
+      onPointerDown: (h, g) => {
+        const C = Date.now(), F = C - q, L = Math.sqrt((h.x - N) ** 2 + (h.y - Y) ** 2);
+        if (F < 300 && L < 20 && g.length === 1) {
+          it(1), q = 0;
+          return;
+        }
+        if (q = C, N = h.x, Y = h.y, g.length === 2) {
+          I = we(g, a.scale), S = null, k = null;
+          return;
+        }
+        const W = c.getCanvasCropRect();
+        let z = xt(h.x, h.y, W);
+        r.variant === "fixed" && (z.type === "handle" || z.type === "move-handle") && (z = { type: "crop-area" }), f = !0, z.type === "move-handle" ? b = {
+          startX: h.x,
+          startY: h.y,
+          startRect: { ...a.cropRect }
+        } : z.type === "crop-area" ? v = { startX: h.x, startY: h.y, startPanX: a.panX, startPanY: a.panY } : z.type === "handle" && z.position && (k = ge("handle-" + z.position, a.cropRect, h.x, h.y)), D();
+      },
+      onPointerMove: (h) => {
+        if (!l) return;
+        const g = c.getCanvasCropRect();
+        if (b) {
+          const { displayW: C, displayH: F } = tt();
+          if (C > 0 && F > 0) {
+            const L = (h.x - b.startX) / C, W = (h.y - b.startY) / F;
+            a = et(a, {
+              x: b.startRect.x + L,
+              y: b.startRect.y + W,
+              width: b.startRect.width,
+              height: b.startRect.height
+            }), D(), P(), T();
+          }
+          return;
+        }
+        if (v) {
+          const C = h.x - v.startX, F = h.y - v.startY, L = a.flipH ? -1 : 1, W = a.flipV ? -1 : 1;
+          a = {
+            ...a,
+            panX: v.startPanX + L * C / a.scale,
+            panY: v.startPanY + W * F / a.scale
+          }, D(), P();
+          return;
+        }
+        if (S) {
+          const { displayW: C, displayH: F } = tt(), L = me(S, h.x, h.y, C, F);
+          a = et(a, L), D(), P(), T();
+          return;
+        }
+        if (k) {
+          const { displayW: C, displayH: F } = tt(), L = xe(
+            k,
+            h.x,
+            h.y,
+            C,
+            F,
+            u,
+            r.minCropSize,
+            { shiftKey: h.shiftKey, altKey: h.altKey }
+          );
+          a = et(a, L), D(), P(), T();
+          return;
+        }
+        if (r.variant === "fixed")
+          e.style.cursor = "grab";
+        else {
+          const C = xt(h.x, h.y, g);
+          e.style.cursor = Dt(C);
+        }
+      },
+      onHover: (h) => {
+        if (!c) return;
+        if (r.variant === "fixed") {
+          e.style.cursor = "grab";
+          return;
+        }
+        const g = c.getCanvasCropRect(), C = xt(h.x, h.y, g);
+        e.style.cursor = Dt(C);
+      },
+      onPointerUp: (h, g) => {
+        g.length < 2 && (I = null), g.length === 0 && (S = null, v = null, b = null, k = null, f = !1, N = 0, Y = 0, D());
+      },
+      onPinch: (h) => {
+        var L;
+        I || (I = { initialDistance: h.distance, initialScale: a.scale, initialCenterX: h.centerX, initialCenterY: h.centerY });
+        const g = a.scale * (h.distance / I.initialDistance), C = h.centerX - I.initialCenterX, F = h.centerY - I.initialCenterY;
+        a = ot(a, g, r.minScale, r.maxScale), a = Et(a, C, F), (L = n.onScaleSync) == null || L.call(n, a.scale), D(), P();
+      },
+      onWheel: (h) => {
+        var K, rt;
+        if (!r.wheelZoom) return;
+        h.preventDefault();
+        const g = e.getBoundingClientRect(), C = h.clientX - g.left, F = h.clientY - g.top, L = g.width / 2, W = g.height / 2, z = be(h.deltaY, a.scale, {
+          minScale: r.minScale,
+          maxScale: r.maxScale,
+          sensitivity: 1
+        }, C, F, L, W);
+        a = ot(a, z.scale, r.minScale, r.maxScale), a = Et(a, z.panDeltaX, z.panDeltaY), (K = n.onScaleSync) == null || K.call(n, a.scale), (rt = n.onWheelZoomActivity) == null || rt.call(n), D(), P();
+      }
+    });
+  }
+  function tt() {
+    return { displayW: i.clientWidth, displayH: i.clientHeight };
+  }
+  function at(h) {
+    var g;
+    s || u !== h && (u = h, r.variant === "fixed" ? a = { ...a, cropRect: { ...w } } : a = gt(
+      a,
+      h,
+      (l == null ? void 0 : l.naturalWidth) ?? 1,
+      (l == null ? void 0 : l.naturalHeight) ?? 1
+    ), (g = n.onShapeSync) == null || g.call(n, h), D(), P(), T());
+  }
+  function Wt(h) {
+    s || (a = et(a, h), D(), P(), T());
+  }
+  function Ct() {
+    s || (a = Jt(a), D(), wt(o, a, u), P(), T());
+  }
+  function Tt() {
+    s || (a = te(a), D(), wt(o, a, u), P(), T());
+  }
+  function kt(h) {
+    var g;
+    s || (a = mt(a, h), (g = n.onRotationSync) == null || g.call(n, h), D(), P());
+  }
+  function it(h) {
+    var g;
+    s || (a = ot(a, h, r.minScale, r.maxScale), (g = n.onScaleSync) == null || g.call(n, a.scale), D(), P());
+  }
+  function At() {
+    var h, g, C;
+    s || (u = r.cropShape, a = Pt(
+      r.cropShape,
+      (l == null ? void 0 : l.naturalWidth) ?? 1,
+      (l == null ? void 0 : l.naturalHeight) ?? 1
+    ), r.variant === "fixed" ? a = { ...a, cropRect: { ...w } } : r.initialCrop && (a = et(a, r.initialCrop)), r.initialRotation && (a = mt(a, r.initialRotation)), r.initialScale !== void 0 && r.initialScale !== 1 && (a = ot(a, r.initialScale, r.minScale, r.maxScale)), (h = n.onRotationSync) == null || h.call(n, a.rotation), (g = n.onShapeSync) == null || g.call(n, r.cropShape), (C = n.onScaleSync) == null || C.call(n, a.scale), D(), wt(o, a, u), P(), T());
+  }
+  function yt() {
+    if (!l) throw new Error("No image loaded");
+    const { w: h, h: g } = O();
+    return Me(
+      l,
+      a,
+      r.maxOutputWidth,
+      r.maxOutputHeight,
+      u,
+      r.borderRadius,
+      // Pan is stored in the renderer's CSS-px container space; pass the
+      // container dims so the exporter can rescale pan into display space.
+      // The height + variant drive the fixed variant's cover-fit export.
+      h,
+      g,
+      r.variant
+    );
+  }
+  async function Bt(h, g) {
+    const C = yt();
+    return ke(C, h || r.outputType, g ?? r.outputQuality);
+  }
+  function Nt(h, g) {
+    try {
+      return yt().toDataURL(h || r.outputType, g ?? r.outputQuality);
+    } catch (C) {
+      const F = C instanceof Error ? C : new Error(String(C));
+      throw new Error(`Failed to export data URL: ${F.message}`);
+    }
+  }
+  function qt() {
+    if (!l) throw new Error("No image loaded");
+    return Re(a, l.naturalWidth, l.naturalHeight);
+  }
+  function Vt(h) {
+    if (s) return;
+    const g = r.src, C = r.variant;
+    r = zt({ ...r, ...h }), h.cropShape !== void 0 && at(h.cropShape), h.variant !== void 0 && h.variant !== C && (c == null || c.setFixedFrame(r.variant === "fixed"), r.variant === "fixed" ? a = { ...a, cropRect: { ...w } } : (c == null || c.setScaleBounds(r.minScale, r.maxScale), a = gt(a, u, (l == null ? void 0 : l.naturalWidth) ?? 1, (l == null ? void 0 : l.naturalHeight) ?? 1), a = ot({ ...a, panX: 0, panY: 0 }, r.initialScale ?? 1, r.minScale, r.maxScale)), D(), P(), T()), h.src !== void 0 && h.src !== g && B(h.src).catch(() => {
+    }), (h.showBleedMargin !== void 0 || h.bleedMarginSize !== void 0 || h.bleedMarginColor !== void 0) && (c == null || c.setBleedConfig({
+      show: r.showBleedMargin,
+      size: r.bleedMarginSize,
+      color: r.bleedMarginColor
+    })), h.showGrid !== void 0 && D(), c == null || c.markDirty();
+  }
+  function _t() {
+    s || (s = !0, x++, c == null || c.destroy(), p == null || p.destroy(), y == null || y.destroy(), m == null || m.disconnect(), d && (clearTimeout(d), d = null));
+  }
+  return {
+    loadImage: B,
+    getTransformState: Q,
+    getCropRect: G,
+    setCropShape: at,
+    setCropRect: Wt,
+    rotateLeft: Ct,
+    flipHorizontal: Tt,
+    setRotation: kt,
+    setScale: it,
+    reset: At,
+    toCanvas: yt,
+    toBlob: Bt,
+    toDataURL: Nt,
+    toTransformParams: qt,
+    update: Vt,
+    destroy: _t
+  };
+}
+class Xt extends $t {
+}
+function Ke(t, e) {
+  typeof customElements > "u" || customElements.get(t) || customElements.define(t, e);
+}
+const Pe = Z`
+  :host {
+    display: block;
+    width: 100%;
+    height: 100%;
+    min-width: 0;
+    min-height: 0;
+    /* Single source of clipping is .sfx-cr-container (overflow:hidden +
+       border-radius). Don't add a second mask here: this host is sized
+       by JS to the full outer rect (displayW×displayH), which is 4px
+       wider than the container's content-box, so its own border-radius
+       wouldn't align with the container's effective inner radius
+       (radius - border-width) and you'd see two stepped curves at the
+       corner. Transparent bg lets the container surface show through
+       in the rounded corner sliver. */
+    background: transparent;
+  }
+
+  canvas {
+    display: block;
+    width: 100%;
+    height: 100%;
+    outline: none;
+    touch-action: none;
+  }
+`;
+var Ee = Object.defineProperty, Ie = (t, e, o, i) => {
+  for (var n = void 0, r = t.length - 1, u; r >= 0; r--)
+    (u = t[r]) && (n = u(e, o, n) || n);
+  return n && Ee(e, o, n), n;
+};
+const Rt = class Rt extends Xt {
+  render() {
+    return vt`<canvas part="canvas"></canvas>`;
+  }
+};
+Rt.styles = [Pe];
+let ut = Rt;
+Ie([
+  pt("canvas")
+], ut.prototype, "canvasEl");
+const Ft = [
+  "free",
+  "square",
+  // Landscape
+  "16:9",
+  "4:3",
+  "3:2",
+  "5:4",
+  "2:1",
+  // Portrait
+  "9:16",
+  "3:4",
+  "2:3",
+  "4:5",
+  "1:2"
+], De = [
+  "free",
+  "square",
+  "circle",
+  "rounded-rect"
+];
+function bt(t) {
+  return typeof t != "string" ? !1 : De.includes(t) ? !0 : Yt(t) !== null;
+}
+function Fe(t) {
+  if (t == null) return;
+  if (Array.isArray(t)) return t.filter(bt);
+  if (typeof t != "string") return;
+  const e = t.trim();
+  if (e) {
+    if (e.startsWith("["))
+      try {
+        const o = JSON.parse(e);
+        if (Array.isArray(o)) return o.filter(bt);
+      } catch {
+      }
+    return e.split(/[\s,]+/).filter(Boolean).filter(bt);
+  }
+}
+const Le = Z`
+  :host {
+    /* Palette — light theme (matches ui-tw :root) */
+    --sfx-cr-primary: oklch(0.578 0.198 268.129);
+    --sfx-cr-primary-hover: oklch(0.5 0.198 268.129);
+    --sfx-cr-primary-mid: oklch(0.62 0.198 268.129);
+    --sfx-cr-primary-bg: oklch(0.578 0.198 268.129 / 0.07);
+    --sfx-cr-primary-glow: oklch(0.578 0.198 268.129 / 0.18);
+
+    --sfx-cr-success: oklch(0.637 0.17 151.295);
+    --sfx-cr-error: oklch(0.577 0.215 27.325);
+
+    --sfx-cr-text: oklch(0.37 0.022 248.413);
+    --sfx-cr-text-secondary: oklch(53.03% 0.039 249.89);
+    --sfx-cr-text-muted: oklch(0.685 0.033 249.82);
+    /* Fine-tilt ruler ink + halo. The ruler floats directly over the photo,
+       whose brightness is unknown, so its colour can't track the theme. We
+       render a bright (near-white) core wrapped in a dark halo: the white core
+       reads over dark images, the dark halo reads over bright ones — the same
+       trick subtitles use to stay legible over arbitrary footage. */
+    --sfx-cr-ruler-ink: oklch(1 0 0);
+    --sfx-cr-ruler-halo: oklch(0 0 0 / 0.85);
+
+    --sfx-cr-border: oklch(92.86% 0.009 247.92);
+    --sfx-cr-border-light: oklch(0.974 0.006 239.819);
+
+    --sfx-cr-bg: oklch(1 0 0);
+    --sfx-cr-surface: oklch(0.974 0.006 239.819);
+    --sfx-cr-canvas-bg: oklch(0.974 0.006 239.819);
+    /* Dimming overlay for pixels outside the crop rect. Light theme uses a
+       very soft, near-white tint so the whole surround stays bright; dark
+       theme keeps the classic black dim for contrast against the photo. */
+    --sfx-cr-overlay-color: oklch(1 0 0 / 0.52);
+    /* Crop frame + handle colors, theme-aware so the rectangle reads
+       against both a washed-out light background and a dimmed dark one. */
+    --sfx-cr-frame-color: oklch(0.37 0.022 248.413);
+    --sfx-cr-frame-shadow: oklch(1 0 0 / 0.7);
+    --sfx-cr-handle-fill: oklch(0.37 0.022 248.413);
+    --sfx-cr-handle-stroke: oklch(1 0 0 / 0.95);
+
+    --sfx-cr-ring: oklch(0.578 0.198 268.129 / 0.7);
+    --sfx-cr-shadow: oklch(26.18% 0.024 256.43 / 0.1);
+
+    /* Derived — kept for internal reuse */
+    --sfx-cr-toolbar-bg: oklch(1 0 0 / 0.85);
+    --sfx-cr-toolbar-color: var(--sfx-cr-text);
+    --sfx-cr-toolbar-border: oklch(92.86% 0.009 247.92 / 0.6);
+    /* shadow-sm + soft primary tint */
+    --sfx-cr-toolbar-shadow: 0 1px 3px 0 oklch(0 0 0 / 0.1), 0 1px 2px -1px oklch(0 0 0 / 0.1);
+    --sfx-cr-btn-size: 36px;
+    --sfx-cr-btn-radius: 6px;
+    --sfx-cr-btn-hover-bg: var(--sfx-cr-primary-bg);
+    --sfx-cr-btn-active-bg: oklch(0.578 0.198 268.129 / 0.14);
+    --sfx-cr-separator-color: var(--sfx-cr-border-light);
+    --sfx-cr-slider-track: var(--sfx-cr-border);
+    --sfx-cr-slider-fill: var(--sfx-cr-primary);
+    --sfx-cr-slider-thumb: var(--sfx-cr-primary);
+    /* Translucent so the dropdown picks up whatever sits behind it
+       (image, overlay) when paired with backdrop-filter. */
+    --sfx-cr-dropdown-bg: oklch(0.974 0.006 239.819 / 0.8);
+    --sfx-cr-dropdown-hover: var(--sfx-cr-primary-bg);
+    /* shadow-md + shadow-lg blend */
+    --sfx-cr-dropdown-shadow: 0 10px 15px -3px oklch(0 0 0 / 0.1), 0 4px 6px -4px oklch(0 0 0 / 0.1);
+    --sfx-cr-zoom-bar-bg: oklch(1 0 0 / 0.85);
+    --sfx-cr-transition: 0.15s ease;
+    --sfx-cr-font: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+
+    /* Border-radius scale — mirrors ui-tw --radius-sm/md/lg/xl */
+    --sfx-cr-radius-sm: 4px;
+    --sfx-cr-radius-md: 6px;
+    --sfx-cr-radius-lg: 8px;
+    --sfx-cr-radius-xl: 12px;
+    /* Outer card (when <sfx-crop> fills the host) */
+    --sfx-cr-radius: var(--sfx-cr-radius-xl);
+    --sfx-cr-card-shadow: 0 28px 80px oklch(0 0 0 / 0.2), 0 4px 16px oklch(0 0 0 / 0.06);
+  }
+
+  /* Dark variant — mirrors ui-tw :root.dark. */
+  :host([theme="dark"]) {
+    --sfx-cr-primary: oklch(0.6 0.2 268.129);
+    --sfx-cr-primary-hover: oklch(0.55 0.2 268.129);
+    --sfx-cr-primary-mid: oklch(0.65 0.2 268.129);
+    --sfx-cr-primary-bg: oklch(0.6 0.2 268.129 / 0.07);
+    --sfx-cr-primary-glow: oklch(0.6 0.2 268.129 / 0.22);
+
+    --sfx-cr-success: oklch(0.6 0.2 154.83);
+    --sfx-cr-error: oklch(0.55 0.2 27.325);
+
+    --sfx-cr-text: oklch(0.95 0.01 264.55);
+    --sfx-cr-text-secondary: oklch(0.9 0.01 264.55);
+    --sfx-cr-text-muted: oklch(0.75 0.01 249.82);
+    /* Ruler keeps the white core + dark halo over the photo (see light theme);
+       --sfx-cr-ruler-halo is inherited from the base :host. */
+    --sfx-cr-ruler-ink: oklch(1 0 0);
+
+    --sfx-cr-border: oklch(0.3 0.01 247.92);
+    --sfx-cr-border-light: oklch(0.3 0.01 285);
+
+    --sfx-cr-bg: oklch(0.13 0.027 261.692);
+    --sfx-cr-surface: oklch(0.25 0.01 264.55);
+    --sfx-cr-canvas-bg: oklch(0.13 0.027 261.692);
+    --sfx-cr-overlay-color: oklch(0 0 0 / 0.35);
+    --sfx-cr-frame-color: oklch(0.95 0.01 264.55);
+    --sfx-cr-frame-shadow: oklch(0 0 0 / 0.6);
+    --sfx-cr-handle-fill: oklch(0.95 0.01 264.55);
+    --sfx-cr-handle-stroke: oklch(0 0 0 / 0.25);
+
+    --sfx-cr-ring: oklch(0.6 0.2 268.129 / 0.7);
+    --sfx-cr-shadow: oklch(0 0 0 / 0.2);
+
+    --sfx-cr-toolbar-bg: oklch(0.13 0.027 261.692 / 0.85);
+    --sfx-cr-toolbar-color: oklch(0.95 0.01 264.55);
+    --sfx-cr-toolbar-border: oklch(0.3 0.01 247.92 / 0.5);
+    --sfx-cr-toolbar-shadow: 0 4px 20px oklch(0 0 0 / 0.4);
+
+    --sfx-cr-btn-hover-bg: oklch(0.6 0.2 268.129 / 0.22);
+    --sfx-cr-btn-active-bg: oklch(0.6 0.2 268.129 / 0.32);
+
+    --sfx-cr-slider-track: oklch(0.3 0.01 247.92);
+
+    --sfx-cr-dropdown-bg: oklch(0.13 0.027 261.692 / 0.82);
+    --sfx-cr-dropdown-hover: oklch(0.6 0.2 268.129 / 0.22);
+    --sfx-cr-dropdown-shadow: 0 10px 15px -3px oklch(0 0 0 / 0.5), 0 4px 6px -4px oklch(0 0 0 / 0.3);
+    --sfx-cr-zoom-bar-bg: oklch(0.13 0.027 261.692 / 0.85);
+
+    --sfx-cr-card-shadow: 0 28px 80px oklch(0 0 0 / 0.55), 0 4px 16px oklch(0 0 0 / 0.2);
+  }
+`, ze = Z`
+  .sfx-cr-sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :host, :host *, :host *::before, :host *::after {
+      transition-duration: 0.01ms !important;
+      animation-duration: 0.01ms !important;
+    }
+  }
+`, Ye = Z`
+  @keyframes sfx-cr-spin { to { transform: rotate(360deg); } }
+`, $e = Z`
+  @keyframes sfx-cr-toolbar-enter {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+`;
+Z`
+  @keyframes sfx-cr-zoom-enter {
+    from {
+      opacity: 0;
+      transform: translateX(-50%) translateY(12px);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(-50%) translateY(0);
+    }
+  }
+`;
+Z`
+  @keyframes sfx-cr-card-in {
+    from {
+      opacity: 0;
+      transform: translateY(10px) scale(0.98);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+    }
+  }
+`;
+Z`
+  input[type="range"]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background: var(--sfx-cr-slider-thumb);
+    cursor: pointer;
+    box-shadow: 0 1px 4px var(--sfx-cr-primary-glow);
+    transition: transform 150ms ease, box-shadow 150ms ease;
+  }
+  input[type="range"]::-webkit-slider-thumb:hover {
+    transform: scale(1.15);
+    box-shadow: 0 0 0 5px var(--sfx-cr-primary-glow);
+  }
+  input[type="range"]::-moz-range-thumb {
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background: var(--sfx-cr-slider-thumb);
+    border: none;
+    cursor: pointer;
+    box-shadow: 0 1px 4px var(--sfx-cr-primary-glow);
+  }
+`;
+const Oe = Z`
+  :host {
+    display: block;
+    position: relative;
+    width: 100%;
+    height: 100%;
+    font-family: var(--sfx-cr-font);
+    color: var(--sfx-cr-text);
+    /* Establish a named inline-size container so the toolbar / shapes /
+       zoom / rotate sub-elements can switch to their compact left-rail
+       layout based on the editor's own width — independent of the page
+       viewport. A narrow column on a wide desktop (sidebar preview,
+       split view) gets the same compact UI as a phone. */
+    container-type: inline-size;
+    container-name: sfxcrop;
+  }
+
+  :host([hidden]) { display: none; }
+
+  :host(:focus-visible) {
+    outline: 2px solid var(--sfx-cr-ring);
+    outline-offset: 2px;
+  }
+
+  .sfx-cr-container {
+    position: relative;
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+    background: var(--sfx-cr-bg);
+    border-radius: var(--sfx-cr-radius);
+    /* Editor card frame: shadow-only (no border). A border draws two
+       visible curves at the corners (outer + inner padding edge),
+       reading as a "double ring"; a slightly stronger shadow gives the
+       same elevation feel with a single clean rounded silhouette. */
+    /* shadow-xs ring + shadow-md elevation, sourced from ui-tw scale */
+    box-shadow:
+      0 0 0 1px oklch(0 0 0 / 0.05),
+      0 4px 6px -1px oklch(0 0 0 / 0.1),
+      0 2px 4px -2px oklch(0 0 0 / 0.1);
+    font-family: var(--sfx-cr-font);
+    user-select: none;
+    -webkit-user-select: none;
+  }
+
+  /* ====== Loading ====== */
+  .sfx-cr-loading {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 16px;
+    background: var(--sfx-cr-bg);
+    z-index: 10;
+    transition: opacity 280ms ease;
+  }
+  .sfx-cr-loading--hidden {
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  .sfx-cr-loading-spinner {
+    width: 36px;
+    height: 36px;
+    border: 3px solid var(--sfx-cr-border);
+    border-top-color: var(--sfx-cr-primary);
+    border-radius: 50%;
+    animation: sfx-cr-spin 0.8s linear infinite;
+  }
+
+  .sfx-cr-loading-text {
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--sfx-cr-text-secondary);
+    letter-spacing: 0.2px;
+  }
+
+  /* ====== Error ====== */
+  .sfx-cr-error {
+    position: absolute;
+    inset: 0;
+    display: none;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 12px;
+    padding: 32px;
+    background: var(--sfx-cr-bg);
+    z-index: 10;
+    color: var(--sfx-cr-error);
+    font-size: 14px;
+    font-weight: 500;
+    text-align: center;
+  }
+  .sfx-cr-error--visible { display: flex; }
+`;
+var Xe = Object.defineProperty, M = (t, e, o, i) => {
+  for (var n = void 0, r = t.length - 1, u; r >= 0; r--)
+    (u = t[r]) && (n = u(e, o, n) || n);
+  return n && Xe(e, o, n), n;
+};
+const We = {
+  fromAttribute(t) {
+    return t === null ? "interaction" : t === "true" || t === "" ? !0 : t === "false" ? !1 : "interaction";
+  },
+  toAttribute(t) {
+    return t === !0 ? "true" : t === !1 ? "false" : "interaction";
+  }
+}, Mt = class Mt extends Xt {
+  constructor() {
+    super(...arguments), this.src = "", this.cropShape = "16:9", this.theme = "light", this.initialRotation = 0, this.initialScale = 1, this.minScale = 0.5, this.maxScale = 5, this.minCropSize = 20, this.handleSize = 12, this.borderRadius = 20, this.outputQuality = 0.92, this.maxOutputWidth = 0, this.maxOutputHeight = 0, this.bleedMarginSize = 10, this.animationSpeed = 1, this.handleColor = "#ffffff", this.overlayColor = "rgba(0, 0, 0, 0.55)", this.bleedMarginColor = "rgba(255, 0, 0, 0.5)", this.outputType = "image/png", this.toolbarPosition = "top", this.variant = "classic", this.showGrid = "interaction", this.showToolbar = !0, this.showRotateSlider = !0, this.showZoomSlider = !0, this.showShapeSelector = !0, this.showRotateButton = !0, this.showFlipButton = !0, this.showBleedMargin = !1, this.enableAnimations = !0, this.keyboard = !0, this.pinchZoom = !0, this.wheelZoom = !0, this.availableShapes = [...Ft], this.initialCrop = null, this.icons = {}, this.loading = !1, this.errorMessage = null, this.controller = null, this.currentImage = null, this.parentResizeObserver = null, this.onToolbarCommand = (e) => {
+      if (!this.controller) return;
+      const o = e.detail;
+      switch (o.type) {
+        case "reset":
+          this.controller.reset();
+          break;
+        case "rotate-left":
+          this.controller.rotateLeft();
+          break;
+        case "flip-h":
+          this.controller.flipHorizontal();
+          break;
+        case "rotation":
+          this.controller.setRotation(o.value);
+          break;
+        case "scale":
+          this.controller.setScale(o.value);
+          break;
+        case "shape":
+          this.cropShape = o.value;
+          break;
+        case "save":
+          this.save();
+          break;
+      }
+    };
+  }
+  // === Lifecycle ===
+  async firstUpdated() {
+    if (Se(this), !(this.canvasHost instanceof ut))
+      throw new Error(
+        "<sfx-crop>: custom elements not registered. Import '@scaleflex/crop/define' before using the tag."
+      );
+    if (await this.canvasHost.updateComplete, !this.isConnected) return;
+    const e = this.canvasHost.canvasEl, o = zt(this.buildConfig());
+    this.controller = He({
+      canvas: e,
+      host: this,
+      // Pass the canvas host (which we size to the image's display rect)
+      // so the controller's ResizeObserver and renderer measure the tight
+      // photo box — not the outer column that also includes toolbars.
+      layoutContainer: this.canvasHost,
+      config: o,
+      callbacks: {
+        onReady: () => this.dispatch("sfx-crop-ready", { element: this }),
+        onImageLoad: (n) => {
+          this.currentImage = n, this.fitHostToImage(), this.dispatch("sfx-crop-image-load", { image: n });
+        },
+        onError: (n) => this.dispatch("sfx-crop-error", { error: n }),
+        onChange: (n) => {
+          this.dispatch("sfx-crop-change", n);
+        },
+        onCropChange: (n) => this.dispatch("sfx-crop-crop-change", n),
+        onRotationSync: (n) => {
+          var r;
+          return (r = this.toolbarHost) == null ? void 0 : r.setRotationValue(n);
+        },
+        onShapeSync: (n) => {
+          var r;
+          this.cropShape = n, (r = this.toolbarHost) == null || r.setShapeValue(n);
+        },
+        onScaleSync: () => {
+        },
+        onLoadingChange: (n, r) => {
+          this.loading = n, this.errorMessage = r;
+        }
+      }
+    });
+    const i = this.parentElement;
+    i && (this.parentResizeObserver = new ResizeObserver(() => this.fitHostToImage()), this.parentResizeObserver.observe(i)), this.src && this.controller.loadImage(this.src);
+  }
+  /** @see LIVE_CONFIG_KEYS for the exact set forwarded to `controller.update()`. */
+  updated(e) {
+    if (!this.controller) return;
+    const o = {};
+    let i = !1;
+    for (const n of Ae)
+      e.has(n) && (o[n] = this[n], i = !0);
+    i && this.controller.update(o), (e.has("variant") || e.has("cropShape")) && this.fitHostToImage();
+  }
+  disconnectedCallback() {
+    var e, o;
+    super.disconnectedCallback(), (e = this.parentResizeObserver) == null || e.disconnect(), this.parentResizeObserver = null, (o = this.controller) == null || o.destroy(), this.controller = null;
+  }
+  render() {
+    return vt`
+      <div class="sfx-cr-container" part="container">
+        <sfx-crop-canvas part="canvas-host"></sfx-crop-canvas>
+        ${this.showToolbar ? vt`
+          <sfx-crop-toolbar
+            part="toolbar"
+            .shape=${this.cropShape}
+            ?show-rotate-button=${this.showRotateButton}
+            ?show-flip-button=${this.showFlipButton}
+            ?show-rotate-slider=${this.showRotateSlider}
+            ?show-shape-selector=${this.showShapeSelector}
+            toolbar-position=${this.toolbarPosition}
+            variant=${this.variant}
+            .availableShapes=${this.availableShapes}
+            .icons=${this.icons}
+            @sfx-crop-toolbar-command=${this.onToolbarCommand}
+          ></sfx-crop-toolbar>
+        ` : null}
+        <div class=${Ht({ "sfx-cr-loading": !0, "sfx-cr-loading--hidden": !this.loading })} part="loading">
+          <div class="sfx-cr-loading-spinner"></div>
+          <div class="sfx-cr-loading-text">Loading…</div>
+        </div>
+        <div class=${Ht({ "sfx-cr-error": !0, "sfx-cr-error--visible": !!this.errorMessage })} part="error">
+          ${this.errorMessage ?? "Failed to load image"}
+        </div>
+      </div>
+    `;
+  }
+  // === Public imperative API ===
+  loadImage(e) {
+    return this.ensure().loadImage(e);
+  }
+  getTransformState() {
+    return this.ensure().getTransformState();
+  }
+  setCropShape(e) {
+    this.ensure(), this.cropShape = e;
+  }
+  setCropRect(e) {
+    this.ensure().setCropRect(e);
+  }
+  getCropRect() {
+    return this.ensure().getCropRect();
+  }
+  rotateLeft() {
+    this.ensure().rotateLeft();
+  }
+  flipHorizontal() {
+    this.ensure().flipHorizontal();
+  }
+  setRotation(e) {
+    this.ensure().setRotation(e);
+  }
+  setScale(e) {
+    this.ensure().setScale(e);
+  }
+  reset() {
+    this.ensure().reset();
+  }
+  toCanvas() {
+    return this.ensure().toCanvas();
+  }
+  toBlob(e, o) {
+    return this.ensure().toBlob(e, o);
+  }
+  toDataURL(e, o) {
+    return this.ensure().toDataURL(e, o);
+  }
+  toTransformParams() {
+    return this.ensure().toTransformParams();
+  }
+  async save(e, o) {
+    const i = await this.toBlob(e, o), n = this.toDataURL(e, o), r = this.toTransformParams();
+    this.dispatch("sfx-crop-save", { blob: i, dataURL: n, params: r });
+  }
+  cancel() {
+    this.dispatch("sfx-crop-cancel", void 0);
+  }
+  // === Internals ===
+  ensure() {
+    if (!this.controller)
+      throw new Error('<sfx-crop> not connected — wait for "sfx-crop-ready" or firstUpdated().');
+    return this.controller;
+  }
+  /**
+   * Size both the canvas host (to the image's display rect, no letterbox)
+   * and the outer `<sfx-crop>` host (photo rect + measured toolbar stack).
+   *
+   * Bound order for `max-width` / `max-height`:
+   *   1. Consumer-provided values on the host's own CSS / inline style.
+   *   2. Parent's client rect as a fallback.
+   *   3. Viewport size as a last resort.
+   *
+   * Called on image-load, on state changes (90° rotation swaps aspect),
+   * and whenever the parent resizes.
+   */
+  fitHostToImage() {
+    if (!this.currentImage || !this.isConnected || !this.canvasHost) return;
+    const e = this.currentImage.naturalWidth, o = this.currentImage.naturalHeight, i = this.style.width, n = this.style.height;
+    this.style.width = "", this.style.height = "";
+    const r = (b) => {
+      if (!b || b === "none") return Number.POSITIVE_INFINITY;
+      const k = nt(b);
+      return Number.isFinite(k) && k > 0 ? k : Number.POSITIVE_INFINITY;
+    }, u = getComputedStyle(this);
+    let l = r(u.maxWidth), a = r(u.maxHeight);
+    const c = this.parentElement, p = c ? getComputedStyle(c) : null;
+    if (c && p && (p.display === "none" || c.clientWidth === 0)) {
+      this.style.width = i, this.style.height = n;
+      return;
+    }
+    const m = (() => {
+      if (!c || !p) return 0;
+      const b = c.clientWidth;
+      return Math.max(0, b - (nt(p.paddingLeft) || 0) - (nt(p.paddingRight) || 0));
+    })();
+    m > 0 ? l = Math.min(l, m) : Number.isFinite(l) || (l = window.innerWidth), Number.isFinite(a) || (a = window.innerHeight), this.style.width = i, this.style.height = n;
+    const d = l, s = a;
+    if (d <= 0 || s <= 0) return;
+    let f, x;
+    if (this.variant === "fixed") {
+      const b = this.fixedFrameAspect(d / s);
+      let k = d, I = d / b;
+      I > s && (I = s, k = s * b), f = Math.floor(k), x = Math.floor(I);
+    } else {
+      const b = Math.min(d / e, s / o, 1);
+      f = Math.floor(e * b), x = Math.floor(o * b);
+    }
+    const S = nt(i), v = nt(n);
+    (Number.isNaN(S) || Math.abs(S - f) >= 1 || Math.abs(v - x) >= 1) && (this.style.width = `${f}px`, this.style.height = `${x}px`);
+  }
+  /**
+   * Aspect ratio (W/H) of the fixed-variant editor box for the current shape.
+   * `free` fills the host (uses the available-area aspect); `square` / `circle`
+   * / `rounded-rect` are square; ratio shapes use their parsed ratio.
+   */
+  fixedFrameAspect(e) {
+    const o = this.cropShape;
+    if (o === "free") return e;
+    if (o === "rounded-rect") return 1;
+    const i = ft(o);
+    return i && i > 0 ? i : e;
+  }
+  dispatch(e, o) {
+    this.dispatchEvent(new CustomEvent(e, { detail: o, bubbles: !0, composed: !0 }));
+  }
+  parseInitialCrop() {
+    const e = this.initialCrop;
+    if (!e) return null;
+    const o = typeof e == "object" ? e : Be(e);
+    if (!o || typeof o != "object") return null;
+    const i = o;
+    return typeof i.x != "number" || typeof i.y != "number" || typeof i.width != "number" || typeof i.height != "number" ? null : { x: i.x, y: i.y, width: i.width, height: i.height };
+  }
+  buildConfig() {
+    return {
+      src: this.src,
+      variant: this.variant,
+      cropShape: this.cropShape,
+      theme: this.theme,
+      initialRotation: this.initialRotation,
+      initialScale: this.initialScale,
+      initialCrop: this.parseInitialCrop(),
+      minScale: this.minScale,
+      maxScale: this.maxScale,
+      minCropSize: this.minCropSize,
+      availableShapes: Fe(this.availableShapes) ?? [...Ft],
+      handleSize: this.handleSize,
+      handleColor: this.handleColor,
+      borderRadius: this.borderRadius,
+      outputType: this.outputType,
+      outputQuality: this.outputQuality,
+      maxOutputWidth: this.maxOutputWidth,
+      maxOutputHeight: this.maxOutputHeight,
+      overlayColor: this.overlayColor,
+      showGrid: this.showGrid,
+      showToolbar: this.showToolbar,
+      showRotateSlider: this.showRotateSlider,
+      showZoomSlider: this.showZoomSlider,
+      showShapeSelector: this.showShapeSelector,
+      showRotateButton: this.showRotateButton,
+      showFlipButton: this.showFlipButton,
+      toolbarPosition: this.toolbarPosition,
+      showBleedMargin: this.showBleedMargin,
+      bleedMarginSize: this.bleedMarginSize,
+      bleedMarginColor: this.bleedMarginColor,
+      enableAnimations: this.enableAnimations,
+      animationSpeed: this.animationSpeed,
+      keyboard: this.keyboard,
+      pinchZoom: this.pinchZoom,
+      wheelZoom: this.wheelZoom
+    };
+  }
+};
+Mt.styles = [Le, ze, Ye, Oe];
+let R = Mt;
+M([
+  E({ type: String, reflect: !0 })
+], R.prototype, "src");
+M([
+  E({ type: String, attribute: "crop-shape", reflect: !0 })
+], R.prototype, "cropShape");
+M([
+  E({ type: String, reflect: !0 })
+], R.prototype, "theme");
+M([
+  E({ type: Number, attribute: "initial-rotation" })
+], R.prototype, "initialRotation");
+M([
+  E({ type: Number, attribute: "initial-scale" })
+], R.prototype, "initialScale");
+M([
+  E({ type: Number, attribute: "min-scale" })
+], R.prototype, "minScale");
+M([
+  E({ type: Number, attribute: "max-scale" })
+], R.prototype, "maxScale");
+M([
+  E({ type: Number, attribute: "min-crop-size" })
+], R.prototype, "minCropSize");
+M([
+  E({ type: Number, attribute: "handle-size" })
+], R.prototype, "handleSize");
+M([
+  E({ type: Number, attribute: "border-radius" })
+], R.prototype, "borderRadius");
+M([
+  E({ type: Number, attribute: "output-quality" })
+], R.prototype, "outputQuality");
+M([
+  E({ type: Number, attribute: "max-output-width" })
+], R.prototype, "maxOutputWidth");
+M([
+  E({ type: Number, attribute: "max-output-height" })
+], R.prototype, "maxOutputHeight");
+M([
+  E({ type: Number, attribute: "bleed-margin-size" })
+], R.prototype, "bleedMarginSize");
+M([
+  E({ type: Number, attribute: "animation-speed" })
+], R.prototype, "animationSpeed");
+M([
+  E({ type: String, attribute: "handle-color" })
+], R.prototype, "handleColor");
+M([
+  E({ type: String, attribute: "overlay-color" })
+], R.prototype, "overlayColor");
+M([
+  E({ type: String, attribute: "bleed-margin-color" })
+], R.prototype, "bleedMarginColor");
+M([
+  E({ type: String, attribute: "output-type" })
+], R.prototype, "outputType");
+M([
+  E({ type: String, attribute: "toolbar-position", reflect: !0 })
+], R.prototype, "toolbarPosition");
+M([
+  E({ type: String, reflect: !0 })
+], R.prototype, "variant");
+M([
+  E({ attribute: "show-grid", converter: We })
+], R.prototype, "showGrid");
+M([
+  E({ type: Boolean, attribute: "show-toolbar" })
+], R.prototype, "showToolbar");
+M([
+  E({ type: Boolean, attribute: "show-rotate-slider" })
+], R.prototype, "showRotateSlider");
+M([
+  E({ type: Boolean, attribute: "show-zoom-slider" })
+], R.prototype, "showZoomSlider");
+M([
+  E({ type: Boolean, attribute: "show-shape-selector" })
+], R.prototype, "showShapeSelector");
+M([
+  E({ type: Boolean, attribute: "show-rotate-button" })
+], R.prototype, "showRotateButton");
+M([
+  E({ type: Boolean, attribute: "show-flip-button" })
+], R.prototype, "showFlipButton");
+M([
+  E({ type: Boolean, attribute: "show-bleed-margin" })
+], R.prototype, "showBleedMargin");
+M([
+  E({ type: Boolean, attribute: "enable-animations" })
+], R.prototype, "enableAnimations");
+M([
+  E({ type: Boolean })
+], R.prototype, "keyboard");
+M([
+  E({ type: Boolean, attribute: "pinch-zoom" })
+], R.prototype, "pinchZoom");
+M([
+  E({ type: Boolean, attribute: "wheel-zoom" })
+], R.prototype, "wheelZoom");
+M([
+  E({ attribute: "available-shapes" })
+], R.prototype, "availableShapes");
+M([
+  E({ attribute: "initial-crop" })
+], R.prototype, "initialCrop");
+M([
+  E({ attribute: !1 })
+], R.prototype, "icons");
+M([
+  Lt()
+], R.prototype, "loading");
+M([
+  Lt()
+], R.prototype, "errorMessage");
+M([
+  pt("sfx-crop-canvas")
+], R.prototype, "canvasHost");
+M([
+  pt("sfx-crop-toolbar")
+], R.prototype, "toolbarHost");
+M([
+  pt(".sfx-cr-container")
+], R.prototype, "containerEl");
+const Ae = [
+  "src",
+  "variant",
+  "cropShape",
+  "theme",
+  "minScale",
+  "maxScale",
+  "minCropSize",
+  "borderRadius",
+  "handleSize",
+  "handleColor",
+  "overlayColor",
+  "showGrid",
+  "showBleedMargin",
+  "bleedMarginSize",
+  "bleedMarginColor",
+  "enableAnimations",
+  "animationSpeed",
+  "keyboard",
+  "pinchZoom",
+  "wheelZoom"
+];
+function nt(t) {
+  if (!t) return NaN;
+  const e = parseFloat(t);
+  return Number.isFinite(e) ? /^-?\d*\.?\d+(?:px)?$/.test(t.trim()) ? e : NaN : NaN;
+}
+function Be(t) {
+  try {
+    return JSON.parse(t);
+  } catch {
+    return null;
+  }
+}
+export {
+  Zt as D,
+  R as S,
+  _e as T,
+  Xt as a,
+  X as b,
+  He as c,
+  lt as d,
+  ze as e,
+  Fe as f,
+  ft as g,
+  Ft as h,
+  ut as i,
+  zt as m,
+  Yt as p,
+  Ke as s,
+  $e as t
+};
+//# sourceMappingURL=sfx-crop-CEe6OfTZ.js.map