@scaleflex/crop 2.0.1

package/dist/define.js

@@ -0,0 +1,1746 @@
+import { a as R, b as y, e as I, g as V, p as Q, t as tt, f as et, h as ot, s as C, i as rt, S as it } from "./chunks/sfx-crop-CEe6OfTZ.js";
+import { css as T, html as d } from "lit";
+import { property as a, state as E, query as U } from "lit/decorators.js";
+import { unsafeHTML as v } from "lit/directives/unsafe-html.js";
+const st = '<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 9V7a2 2 0 0 0-2-2h-6"/><path d="m15 8-3-3 3-3"/><path d="M4 14a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2h13a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2Z"/></svg>', nt = '<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h3"/><path d="M16 3h3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-3"/><path d="M12 20v2"/><path d="M12 15v2"/><path d="M12 10v2"/><path d="M12 5v2"/></svg>', K = '<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 2v14a2 2 0 0 0 2 2h14"/><path d="M18 22V8a2 2 0 0 0-2-2H2"/></svg>', at = '<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="14" x="2" y="3" rx="2"/><line x1="8" x2="16" y1="21" y2="21"/><line x1="12" x2="12" y1="17" y2="21"/></svg>', ct = '<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="20" x="5" y="2" rx="2" ry="2"/><path d="M12 18h.01"/></svg>', q = '<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/></svg>', G = '<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="5"/></svg>', lt = '<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="12" height="20" x="6" y="2" rx="2"/><rect width="20" height="12" x="2" y="6" rx="2"/></svg>', pt = '<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>', ht = '<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 22h20"/><rect x="3" y="6" width="18" height="14" rx="2" transform="rotate(-10 12 13)"/></svg>', dt = '<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" x2="16.65" y1="21" y2="16.65"/><line x1="11" x2="11" y1="8" y2="14"/><line x1="8" x2="14" y1="11" y2="11"/></svg>', xt = '<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" x2="16.65" y1="21" y2="16.65"/><line x1="8" x2="14" y1="11" y2="11"/></svg>', ft = '<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" x2="16.65" y1="21" y2="16.65"/><line x1="11" x2="11" y1="8" y2="14"/><line x1="8" x2="14" y1="11" y2="11"/></svg>', ut = '<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 1 0 3-6.7L3 8"/><path d="M3 3v5h5"/></svg>', l = {
+  rotateLeft: "",
+  // populated below via a second block to avoid TDZ on const order
+  flipHorizontal: "",
+  tilt: "",
+  loupe: "",
+  zoomIn: "",
+  zoomOut: "",
+  cropAspect: "",
+  cropCustom: "",
+  cropCircle: "",
+  cropRoundedRect: "",
+  orientLandscape: "",
+  orientPortrait: "",
+  chevronDown: "",
+  reset: ""
+};
+l.rotateLeft = st;
+l.flipHorizontal = nt;
+l.tilt = ht;
+l.loupe = ft;
+l.zoomIn = dt;
+l.zoomOut = xt;
+l.cropAspect = lt;
+l.cropCustom = K;
+l.cropCircle = q;
+l.cropRoundedRect = G;
+l.orientLandscape = at;
+l.orientPortrait = ct;
+l.chevronDown = pt;
+l.reset = ut;
+function f(n, t) {
+  const e = t == null ? void 0 : t[n];
+  return typeof e == "string" && e.length > 0 ? e : l[n];
+}
+const gt = T`
+  :host {
+    /* Inline-flex so the host doesn't take toolbar space — the actual ruler
+       below uses position:fixed and anchors to the canvas bottom-center via
+       createPopoverAnchor, exactly where the legacy popover lived. */
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+  }
+
+  .sfx-cr-rotate-root {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .sfx-cr-rotate-popover {
+    position: fixed;
+    top: var(--sfx-cr-popover-top, 50%);
+    left: var(--sfx-cr-popover-left, 50%);
+    transform: translateX(-50%);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 4px;
+    padding: 0;
+    background: transparent;
+    border: none;
+    box-shadow: none;
+    pointer-events: auto;
+    white-space: nowrap;
+    z-index: 10;
+  }
+
+  /* Ruler viewport — fixed width, overflow clipped. Ticks scroll inside. */
+  .sfx-cr-rotate-ruler {
+    position: relative;
+    width: var(--ruler-w, 260px);
+    height: 30px;
+    overflow: hidden;
+    cursor: grab;
+    touch-action: none;
+    user-select: none;
+    -webkit-user-select: none;
+  }
+  .sfx-cr-rotate-ruler.is-dragging { cursor: grabbing; }
+  .sfx-cr-rotate-ruler:focus-visible {
+    outline: 2px solid var(--sfx-cr-ring);
+    outline-offset: 2px;
+    border-radius: 4px;
+  }
+
+  /* Tick strip — absolutely positioned ticks, the whole strip is
+     translated along X in sync with the current value. */
+  .sfx-cr-rotate-ticks {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    height: 100%;
+    will-change: transform;
+    /* Dark halo wrapping every tick so the white ink stays legible over a
+       bright photo. Applied to the strip so all ticks share one shadow pass. */
+    filter:
+      drop-shadow(0 0 1px var(--sfx-cr-ruler-halo, oklch(0 0 0 / 0.85)))
+      drop-shadow(0 0 2px var(--sfx-cr-ruler-halo, oklch(0 0 0 / 0.85)));
+  }
+
+  .sfx-cr-rotate-tick {
+    position: absolute;
+    top: 50%;
+    width: 1px;
+    height: 8px;
+    margin-left: -0.5px;
+    margin-top: -4px;
+    border-radius: 0.5px;
+    background: var(--sfx-cr-ruler-ink, var(--sfx-cr-text));
+    opacity: 0.9;
+  }
+  .sfx-cr-rotate-tick--major {
+    width: 1px;
+    height: 12px;
+    margin-left: -0.5px;
+    margin-top: -6px;
+    opacity: 1;
+  }
+
+  /* Fixed center indicator — single vertical line, slightly taller than ticks. */
+  .sfx-cr-rotate-indicator {
+    position: absolute;
+    top: calc(50% + 4px);
+    height: 16px;
+    left: 50%;
+    width: 4px;
+    margin-left: -2px;
+    background: var(--sfx-cr-ruler-ink, var(--sfx-cr-text));
+    border-radius: 2px;
+    pointer-events: none;
+    /* Same dark halo as the ticks so the centre marker stays visible. */
+    filter:
+      drop-shadow(0 0 1px var(--sfx-cr-ruler-halo, oklch(0 0 0 / 0.85)))
+      drop-shadow(0 0 2px var(--sfx-cr-ruler-halo, oklch(0 0 0 / 0.85)));
+  }
+
+  .sfx-cr-rotate-value {
+    font-size: 14px;
+    font-weight: 400;
+    color: var(--sfx-cr-ruler-ink, var(--sfx-cr-text));
+    text-align: center;
+    font-variant-numeric: tabular-nums;
+    letter-spacing: 0.2px;
+    /* Dark halo so the degree readout reads over both bright and dark photos. */
+    text-shadow:
+      0 0 2px var(--sfx-cr-ruler-halo, oklch(0 0 0 / 0.85)),
+      0 1px 2px var(--sfx-cr-ruler-halo, oklch(0 0 0 / 0.85));
+  }
+
+  @media (max-width: 768px) {
+    .sfx-cr-rotate-ruler { width: 220px; height: 22px; }
+    .sfx-cr-rotate-tick { height: 6px; margin-top: -3px; }
+    .sfx-cr-rotate-tick--major { height: 9px; margin-top: -4.5px; }
+    .sfx-cr-rotate-indicator {
+      top: calc(50% + 3px);
+      height: 12px;
+      width: 3px;
+      margin-left: -1.5px;
+    }
+    .sfx-cr-rotate-value { font-size: 12px; }
+    .sfx-cr-rotate-popover {
+      transform: translateX(-50%) translateY(24px);
+    }
+  }
+  @media (max-width: 480px) {
+    .sfx-cr-rotate-ruler { width: 180px; height: 20px; }
+    .sfx-cr-rotate-tick { height: 5px; margin-top: -2.5px; }
+    .sfx-cr-rotate-tick--major { height: 8px; margin-top: -4px; }
+    .sfx-cr-rotate-indicator {
+      top: calc(50% + 2px);
+      height: 10px;
+    }
+    .sfx-cr-rotate-value { font-size: 11px; }
+    .sfx-cr-rotate-popover {
+      transform: translateX(-50%) translateY(30px);
+    }
+  }
+
+  /* Narrow editor — make the ruler more compact when the toolbar
+     collapses into the vertical left rail. */
+  @container sfxcrop (max-width: 760px) {
+    .sfx-cr-rotate-ruler { width: 140px; height: 18px; }
+    .sfx-cr-rotate-tick { height: 5px; margin-top: -2.5px; }
+    .sfx-cr-rotate-tick--major { height: 8px; margin-top: -4px; }
+    .sfx-cr-rotate-indicator {
+      top: calc(50% + 2px);
+      height: 10px;
+      width: 3px;
+      margin-left: -1.5px;
+    }
+    .sfx-cr-rotate-value { font-size: 11px; }
+  }
+`, vt = 72;
+function W(n, t) {
+  let e = null, r = !1;
+  const o = () => {
+    var w;
+    let h = n;
+    for (let $ = 0; $ < 6; $++) {
+      const P = h.getRootNode();
+      if (!(P instanceof ShadowRoot)) break;
+      if (h = P.host, ((w = h.tagName) == null ? void 0 : w.toLowerCase()) === "sfx-crop") return h;
+    }
+    return null;
+  }, i = () => {
+    var P;
+    const h = (P = n.shadowRoot) == null ? void 0 : P.querySelector(t), w = o();
+    if (!h || !w) return;
+    const $ = w.getBoundingClientRect();
+    h.style.setProperty("--sfx-cr-popover-left", `${$.left + $.width / 2}px`), h.style.setProperty("--sfx-cr-popover-top", `${$.bottom - vt}px`);
+  }, s = () => i();
+  return { start: () => {
+    if (r) return;
+    r = !0, i(), window.addEventListener("resize", s), window.addEventListener("scroll", s, !0);
+    const h = o();
+    h && typeof ResizeObserver < "u" && (e = new ResizeObserver(() => i()), e.observe(h));
+  }, stop: () => {
+    r && (r = !1, window.removeEventListener("resize", s), window.removeEventListener("scroll", s, !0), e == null || e.disconnect(), e = null);
+  }, update: i };
+}
+var bt = Object.defineProperty, S = (n, t, e, r) => {
+  for (var o = void 0, i = n.length - 1, s; i >= 0; i--)
+    (s = n[i]) && (o = s(t, e, o) || o);
+  return o && bt(t, e, o), o;
+};
+const O = 6, A = 260, _ = 1, mt = 5, N = class N extends R {
+  constructor() {
+    super(...arguments), this.value = 0, this.min = -45, this.max = 45, this.icons = {}, this.dragging = !1, this.activePointer = null, this.pointerStartX = 0, this.pointerStartValue = 0, this.popoverAnchor = W(this, ".sfx-cr-rotate-popover"), this.onKeyDown = (t) => {
+      t.key === "ArrowLeft" ? (t.preventDefault(), this.emit(y(this.value - (t.shiftKey ? 5 : 1), this.min, this.max))) : t.key === "ArrowRight" && (t.preventDefault(), this.emit(y(this.value + (t.shiftKey ? 5 : 1), this.min, this.max)));
+    }, this.onPointerDown = (t) => {
+      if (this.activePointer === null) {
+        this.activePointer = t.pointerId, this.pointerStartX = t.clientX, this.pointerStartValue = this.value, this.dragging = !0;
+        try {
+          t.currentTarget.setPointerCapture(t.pointerId);
+        } catch {
+        }
+      }
+    }, this.onPointerMove = (t) => {
+      if (this.activePointer !== t.pointerId) return;
+      const e = t.clientX - this.pointerStartX, r = this.pointerStartValue - e / O;
+      this.emit(y(r, this.min, this.max));
+    }, this.onPointerUp = (t) => {
+      if (this.activePointer === t.pointerId) {
+        this.activePointer = null, this.dragging = !1;
+        try {
+          t.currentTarget.releasePointerCapture(t.pointerId);
+        } catch {
+        }
+        Math.abs(this.value) < 2 && this.emit(0);
+      }
+    }, this.onReset = () => {
+      this.emit(0);
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.popoverAnchor.start();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.popoverAnchor.stop();
+  }
+  updated(t) {
+    (t.has("value") || t.has("dragging")) && this.popoverAnchor.update();
+  }
+  render() {
+    const t = `${this.value > 0 ? "+" : ""}${this.value.toFixed(1)}°`, e = A / 2 - (this.value - this.min) * O, r = A / O, o = 4, i = Math.max(this.min, Math.floor(this.value - r / 2 - o)), s = Math.min(this.max, Math.ceil(this.value + r / 2 + o)), u = [];
+    for (let p = Math.ceil(i / _) * _; p <= s; p += _)
+      u.push({ deg: p, major: p % mt === 0 });
+    return d`
+      <div class="sfx-cr-rotate-root" @keydown=${this.onKeyDown}>
+        <div class="sfx-cr-rotate-popover" role="group" aria-label="Fine rotation">
+          <div
+            class=${`sfx-cr-rotate-ruler${this.dragging ? " is-dragging" : ""}`}
+            role="slider"
+            aria-valuemin=${String(this.min)}
+            aria-valuemax=${String(this.max)}
+            aria-valuenow=${String(this.value)}
+            aria-valuetext=${t}
+            tabindex="0"
+            style=${`--ruler-w: ${A}px`}
+            @pointerdown=${this.onPointerDown}
+            @pointermove=${this.onPointerMove}
+            @pointerup=${this.onPointerUp}
+            @pointercancel=${this.onPointerUp}
+            @dblclick=${this.onReset}
+          >
+            <div class="sfx-cr-rotate-ticks" style=${`transform: translateX(${e.toFixed(1)}px)`}>
+              ${u.map((p) => d`
+                <span
+                  class=${`sfx-cr-rotate-tick${p.major ? " sfx-cr-rotate-tick--major" : ""}`}
+                  style=${`left: ${((p.deg - this.min) * O).toFixed(1)}px`}
+                ></span>
+              `)}
+            </div>
+            <div class="sfx-cr-rotate-indicator" aria-hidden="true"></div>
+          </div>
+          <span class="sfx-cr-rotate-value">${t}</span>
+        </div>
+      </div>
+    `;
+  }
+  /** Sync value without emitting — used by host to reflect controller state. */
+  setValue(t) {
+    this.value = y(t, this.min, this.max);
+  }
+  emit(t) {
+    this.value !== t && (this.value = t, this.dispatchEvent(new CustomEvent("sfx-crop-rotate-change", {
+      detail: { degrees: t },
+      bubbles: !0,
+      composed: !0
+    })));
+  }
+};
+N.styles = [I, gt];
+let m = N;
+S([
+  a({ type: Number })
+], m.prototype, "value");
+S([
+  a({ type: Number })
+], m.prototype, "min");
+S([
+  a({ type: Number })
+], m.prototype, "max");
+S([
+  a({ attribute: !1 })
+], m.prototype, "icons");
+S([
+  E()
+], m.prototype, "dragging");
+const wt = T`
+  :host {
+    position: relative;
+    display: inline-block;
+  }
+
+  .sfx-cr-shape-trigger {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 8px 14px;
+    min-width: 84px;
+    height: 36px;
+    background: transparent;
+    color: var(--sfx-cr-text-secondary);
+    border: 1.5px solid var(--sfx-cr-border);
+    border-radius: 50px;
+    cursor: pointer;
+    font-family: var(--sfx-cr-font);
+    font-size: 14px;
+    font-weight: 500;
+    transition:
+      background var(--sfx-cr-transition),
+      border-color var(--sfx-cr-transition),
+      color var(--sfx-cr-transition),
+      transform var(--sfx-cr-transition),
+      box-shadow var(--sfx-cr-transition);
+    white-space: nowrap;
+    letter-spacing: 0.1px;
+  }
+
+  /* Fixed variant: translucent pill so the trigger reads over the photo
+     (no dimmed crop mask behind it). Plain background — no filter/transform. */
+  :host([variant="fixed"]) .sfx-cr-shape-trigger {
+    background: var(--sfx-cr-overlay-color);
+  }
+
+  .sfx-cr-shape-trigger:hover {
+    border-color: var(--sfx-cr-primary);
+    transform: translateY(-1px);
+  }
+
+  .sfx-cr-shape-trigger:focus-visible {
+    outline: 2px solid var(--sfx-cr-ring);
+    outline-offset: 2px;
+  }
+
+  .sfx-cr-shape-trigger-icon {
+    display: flex;
+    width: 20px;
+    height: 20px;
+  }
+  .sfx-cr-shape-trigger-icon svg { width: 100%; height: 100%; display: block; }
+
+  .sfx-cr-shape-trigger-label { line-height: 1; }
+
+  .sfx-cr-shape-chevron {
+    display: flex;
+    width: 14px;
+    height: 14px;
+    margin-left: auto;
+    transition: transform var(--sfx-cr-transition);
+  }
+  .sfx-cr-shape-chevron svg { width: 100%; height: 100%; display: block; }
+
+  :host([open]) .sfx-cr-shape-chevron {
+    transform: rotate(180deg);
+  }
+
+  .sfx-cr-shape-dropdown {
+    position: absolute;
+    top: calc(100% + 8px);
+    right: 0;
+    /* Size to the widest option + orientation toggle. Clamp to avoid
+       spilling off the viewport on very narrow screens. */
+    width: max-content;
+    min-width: 88px;
+    max-width: min(92vw, 200px);
+    max-height: min(55vh, 360px);
+    padding: 4px;
+    /* Barely-there grey tint with translucency so the panel picks up
+       whatever sits behind it (image, dark overlay, etc.) without reading
+       as a solid white box. backdrop-filter blur keeps text crisp on
+       busy backgrounds. */
+    background: var(--sfx-cr-dropdown-bg);
+    border: 1px solid var(--sfx-cr-border);
+    border-radius: var(--sfx-cr-radius-lg, 8px);
+    box-shadow: var(--sfx-cr-dropdown-shadow);
+    backdrop-filter: blur(14px) saturate(160%);
+    -webkit-backdrop-filter: blur(14px) saturate(160%);
+    display: flex;
+    flex-direction: column;
+    z-index: 100;
+    opacity: 0;
+    transform: translateY(6px) scale(0.96);
+    pointer-events: none;
+    transition: opacity 120ms ease-in, transform 120ms ease-in;
+  }
+
+  /* Orientation toggle — naked icon-only buttons centered at the top.
+     No border, no background: only the rectangle SVG is visible. Active
+     state is signalled by the icon's color (text) vs. inactive (muted). */
+  .sfx-cr-shape-orient {
+    display: flex;
+    justify-content: center;
+    gap: 8px;
+    margin-bottom: 4px;
+  }
+
+  .sfx-cr-shape-orient-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 32px;
+    padding: 0;
+    background: transparent;
+    color: var(--sfx-cr-text-muted);
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: color var(--sfx-cr-transition);
+  }
+  .sfx-cr-shape-orient-btn:hover {
+    color: var(--sfx-cr-text-secondary);
+  }
+  .sfx-cr-shape-orient-btn.is-active {
+    color: var(--sfx-cr-text-secondary);
+  }
+  .sfx-cr-shape-orient-btn svg {
+    width: 24px;
+    height: 24px;
+    /* display:block kills SVG's default baseline drop (inline elements sit
+       on the text baseline, leaving a few sub-pixels of descender space at
+       the bottom — enough to push a tightly-fitted icon visibly off-center).
+       The -1px translate is optical correction: both Lucide monitor (stand
+       under the screen) and smartphone (home-indicator dot near the bottom)
+       carry visual weight below their geometric centre. */
+    display: block;
+    transform: translateY(-1px);
+  }
+
+  .sfx-cr-shape-list {
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+    overflow-y: auto;
+    scrollbar-width: thin;
+  }
+  .sfx-cr-shape-list::-webkit-scrollbar {
+    width: 4px;
+  }
+  .sfx-cr-shape-list::-webkit-scrollbar-thumb {
+    background: var(--sfx-cr-border);
+    border-radius: 2px;
+  }
+
+  :host([open]) .sfx-cr-shape-dropdown {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+    pointer-events: auto;
+    transition: opacity 220ms cubic-bezier(0.34, 1.2, 0.64, 1),
+                transform 220ms cubic-bezier(0.34, 1.2, 0.64, 1);
+  }
+
+  .sfx-cr-shape-option {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    /* Stretch to the dropdown's resolved (content-sized) width so all
+       rows share the same left edge + hover highlight. */
+    width: 100%;
+    padding: 5px 10px;
+    height: 30px;
+    background: transparent;
+    color: var(--sfx-cr-text-secondary);
+    border: none;
+    border-radius: var(--sfx-cr-radius-sm, 4px);
+    cursor: pointer;
+    font-family: var(--sfx-cr-font);
+    font-size: 14px;
+    font-weight: 500;
+    text-align: left;
+    transition: background var(--sfx-cr-transition), color var(--sfx-cr-transition);
+  }
+
+  .sfx-cr-shape-option:hover {
+    background: var(--sfx-cr-dropdown-hover);
+    color: var(--sfx-cr-primary);
+  }
+
+  .sfx-cr-shape-option:focus-visible {
+    outline: 2px solid var(--sfx-cr-ring);
+    outline-offset: -2px;
+  }
+
+  .sfx-cr-shape-option--active {
+    background: var(--sfx-cr-primary-bg);
+    color: var(--sfx-cr-primary);
+  }
+
+  .sfx-cr-shape-option-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 18px;
+    height: 18px;
+    color: var(--sfx-cr-text-secondary);
+    flex-shrink: 0;
+  }
+  .sfx-cr-shape-option-icon svg { width: 100%; height: 100%; display: block; }
+  .sfx-cr-shape-option--active .sfx-cr-shape-option-icon { color: var(--sfx-cr-primary); }
+
+  @media (max-width: 768px) {
+    /* Drop label + chevron and shrink to a square icon-only pill so
+       the shape icon sits dead-center. The base 84px min-width was
+       sized for the desktop "[icon] Aspect 16:9 ▾" layout and leaves
+       empty pill space on the right once those pieces are hidden. */
+    .sfx-cr-shape-trigger-label { display: none; }
+    .sfx-cr-shape-chevron { display: none; }
+    .sfx-cr-shape-trigger {
+      min-width: 0;
+      width: 36px;
+      padding: 0;
+      gap: 0;
+      justify-content: center;
+    }
+  }
+
+  /* Narrow editor: drop the textual label + chevron so the trigger
+     reduces to an icon-only 30×30 capsule that matches the rest of
+     the compact left-rail toolbar. Anchor the dropdown to the left
+     edge since the trigger now lives in the left column. Container
+     query keyed off the sfxcrop named container so a narrow editor on
+     a wide desktop also collapses. */
+  @container sfxcrop (max-width: 760px) {
+    /* Label/chevron also need hiding when only the editor (not viewport)
+       is narrow — the 768px @media above only triggers on small viewports. */
+    .sfx-cr-shape-trigger-label { display: none; }
+    .sfx-cr-shape-chevron { display: none; }
+    .sfx-cr-shape-trigger {
+      min-width: 0;
+      width: 30px;
+      height: 30px;
+      padding: 0;
+      gap: 0;
+      justify-content: center;
+    }
+    /* Shrink the icon SLOT (not just the SVG) and center its contents,
+       so the 16×16 SVG sits dead-center inside the 30×30 trigger. The
+       base .sfx-cr-shape-trigger-icon is 20×20 with display:flex but
+       no justify/align — leaving a 16×16 SVG inside top-left aligned. */
+    .sfx-cr-shape-trigger-icon {
+      width: 16px;
+      height: 16px;
+      align-items: center;
+      justify-content: center;
+    }
+    .sfx-cr-shape-trigger svg {
+      width: 16px;
+      height: 16px;
+    }
+    /* Fixed variant: match the toolbar's uniform 40×40 round icon buttons. */
+    :host([variant="fixed"]) .sfx-cr-shape-trigger {
+      width: 40px;
+      height: 40px;
+    }
+    /* Classic left-rail only: the trigger sits in the vertical rail, so the
+       dropdown opens to the SIDE (right of the trigger). Excluded from the
+       fixed variant — there the toolbar is a horizontal top bar, so the menu
+       must keep the default downward opening (below the trigger) to avoid
+       running off the screen edge. */
+    :host(:not([variant="fixed"])) .sfx-cr-shape-dropdown {
+      right: auto;
+      left: calc(100% + 6px);
+      top: auto;
+      bottom: -30px;
+      transform: translateY(6px) scale(0.96);
+    }
+    :host(:not([variant="fixed"])[open]) .sfx-cr-shape-dropdown {
+      transform: translateY(0) scale(1);
+    }
+  }
+`;
+var yt = Object.defineProperty, k = (n, t, e, r) => {
+  for (var o = void 0, i = n.length - 1, s; i >= 0; i--)
+    (s = n[i]) && (o = s(t, e, o) || o);
+  return o && yt(t, e, o), o;
+};
+function Z(n) {
+  let o, i;
+  n >= 1 ? (o = 18, i = 18 / n) : (i = 18, o = 18 * n);
+  const s = Math.max(0, o - 1.5), u = Math.max(0, i - 1.5), p = (22 - s) / 2, h = (22 - u) / 2, w = Math.min(3.5, Math.min(s, u) / 4);
+  return `<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22" fill="none" stroke="currentColor" stroke-width="${1.5}"><rect x="${p.toFixed(2)}" y="${h.toFixed(2)}" width="${s.toFixed(2)}" height="${u.toFixed(2)}" rx="${w.toFixed(2)}"/></svg>`;
+}
+function kt() {
+  return {
+    free: { value: "free", label: "Custom", icon: K, show: "both" },
+    circle: { value: "circle", label: "Circle", icon: q, show: "both" },
+    "rounded-rect": { value: "rounded-rect", label: "Rounded", icon: G, show: "both" },
+    square: { value: "square", label: "1:1", icon: Z(1), show: "both" }
+  };
+}
+const J = kt();
+function j(n) {
+  const t = J[n];
+  if (t) return t;
+  const e = Q(n);
+  return e === null ? null : {
+    value: n,
+    label: n,
+    icon: Z(e),
+    show: e > 1 ? "landscape" : e < 1 ? "portrait" : "both"
+  };
+}
+const B = class B extends R {
+  constructor() {
+    super(...arguments), this.value = "free", this.shapes = [
+      "free",
+      "square",
+      "16:9",
+      "4:3",
+      "3:2",
+      "5:4",
+      "2:1",
+      "9:16",
+      "3:4",
+      "2:3",
+      "4:5",
+      "1:2"
+    ], this.open = !1, this.variant = "classic", this.icons = {}, this.orientation = "landscape", this.focusedIndex = -1, this.focusRafId = null, this.docClickHandler = () => {
+      this.open && this.close();
+    }, this.onTriggerClick = (t) => {
+      if (t.stopPropagation(), this.open)
+        this.close();
+      else {
+        const e = this.getVisibleOptions();
+        this.focusedIndex = Math.max(0, e.findIndex((r) => r.value === this.value)), this.open = !0, this.dispatchEvent(new CustomEvent("sfx-crop-popover-open", {
+          detail: { source: "shapes" },
+          bubbles: !0,
+          composed: !0
+        }));
+      }
+    }, this.onKeyDown = (t) => {
+      if (!this.open) return;
+      const e = this.getVisibleOptions();
+      switch (t.key) {
+        case "Escape":
+          t.preventDefault(), t.stopPropagation(), this.close();
+          break;
+        case "ArrowDown":
+          t.preventDefault(), t.stopPropagation(), this.focusOption(Math.min(this.focusedIndex + 1, e.length - 1));
+          break;
+        case "ArrowUp":
+          t.preventDefault(), t.stopPropagation(), this.focusOption(Math.max(this.focusedIndex - 1, 0));
+          break;
+        case "ArrowLeft":
+          t.preventDefault(), t.stopPropagation(), this.setOrientation("landscape");
+          break;
+        case "ArrowRight":
+          t.preventDefault(), t.stopPropagation(), this.setOrientation("portrait");
+          break;
+        case "Enter":
+        case " ":
+          if (t.preventDefault(), t.stopPropagation(), this.focusedIndex >= 0 && this.focusedIndex < e.length) {
+            const r = e[this.focusedIndex].value;
+            this.value = r, this.close(), this.emit(r);
+          }
+          break;
+      }
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), document.addEventListener("click", this.docClickHandler);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), document.removeEventListener("click", this.docClickHandler), this.focusRafId !== null && (cancelAnimationFrame(this.focusRafId), this.focusRafId = null);
+  }
+  updated(t) {
+    if (t.has("open") && this.open) {
+      const e = j(this.value);
+      e && e.show !== "both" && (this.orientation = e.show), this.focusRafId = requestAnimationFrame(() => {
+        this.focusRafId = null;
+        const o = this.getVisibleOptions().findIndex((i) => i.value === this.value);
+        this.focusOption(o >= 0 ? o : 0);
+      });
+    }
+  }
+  render() {
+    const t = this.getVisibleOptions(), e = j(this.value) ?? J.free;
+    return d`
+      <div
+        @keydown=${this.onKeyDown}
+        @click=${(r) => r.stopPropagation()}
+      >
+        <button
+          type="button"
+          class="sfx-cr-shape-trigger"
+          aria-label="Select crop shape"
+          aria-haspopup="listbox"
+          aria-expanded=${this.open ? "true" : "false"}
+          @click=${this.onTriggerClick}
+        >
+          <span class="sfx-cr-shape-trigger-icon">${v(f("cropAspect", this.icons))}</span>
+          <span class="sfx-cr-shape-trigger-label">${e.label}</span>
+          <span class="sfx-cr-shape-chevron">${v(f("chevronDown", this.icons))}</span>
+        </button>
+        <div class="sfx-cr-shape-dropdown" role="listbox">
+          <div class="sfx-cr-shape-orient" role="tablist" aria-label="Orientation">
+            <button
+              type="button"
+              class=${`sfx-cr-shape-orient-btn${this.orientation === "landscape" ? " is-active" : ""}`}
+              role="tab"
+              aria-selected=${this.orientation === "landscape" ? "true" : "false"}
+              aria-label="Landscape orientations"
+              @click=${() => this.setOrientation("landscape")}
+            >${v(f("orientLandscape", this.icons))}</button>
+            <button
+              type="button"
+              class=${`sfx-cr-shape-orient-btn${this.orientation === "portrait" ? " is-active" : ""}`}
+              role="tab"
+              aria-selected=${this.orientation === "portrait" ? "true" : "false"}
+              aria-label="Portrait orientations"
+              @click=${() => this.setOrientation("portrait")}
+            >${v(f("orientPortrait", this.icons))}</button>
+          </div>
+          <div class="sfx-cr-shape-list" role="presentation">
+            ${t.map((r, o) => d`
+              <button
+                type="button"
+                class=${`sfx-cr-shape-option${r.value === this.value ? " sfx-cr-shape-option--active" : ""}`}
+                role="option"
+                aria-selected=${r.value === this.value ? "true" : "false"}
+                @click=${(i) => this.onOptionClick(i, r.value)}
+                data-index=${String(o)}
+              >
+                <span class="sfx-cr-shape-option-icon">${v(this.optionIcon(r))}</span>
+                <span class="sfx-cr-shape-option-label">${r.label}</span>
+              </button>
+            `)}
+          </div>
+        </div>
+      </div>
+    `;
+  }
+  /**
+   * Pick the icon for a dropdown option, consulting consumer overrides
+   * for the three non-ratio geometry shapes. Aspect-ratio options stay
+   * on their proportional rectangle — not overridable, and that's
+   * intentional since each one is generated from the ratio itself.
+   */
+  optionIcon(t) {
+    switch (t.value) {
+      case "free":
+        return f("cropCustom", this.icons);
+      case "circle":
+        return f("cropCircle", this.icons);
+      case "rounded-rect":
+        return f("cropRoundedRect", this.icons);
+      default:
+        return t.icon;
+    }
+  }
+  /** Sync value without emitting — used by host. */
+  setValue(t) {
+    this.value = t;
+  }
+  setOrientation(t) {
+    this.orientation !== t && (this.orientation = t, this.focusedIndex = -1);
+  }
+  /**
+   * Options visible under the current orientation tab, respecting the
+   * `shapes` allow-list. Each allowed name is resolved via `resolveShape`
+   * so consumer-supplied `"W:H"` strings (not in SHAPE_MAP) get a dynamic
+   * option with a proportional icon. Sorted: named shapes first in a
+   * fixed order, then ratios by numeric value.
+   */
+  getVisibleOptions() {
+    const t = [];
+    for (const e of this.shapes) {
+      const r = j(e);
+      r && (r.show !== "both" && r.show !== this.orientation || t.push(r));
+    }
+    return t.sort((e, r) => {
+      const o = { free: 0, circle: 1, "rounded-rect": 2, square: 3 }, i = o[e.value], s = o[r.value];
+      if (i !== void 0 && s !== void 0) return i - s;
+      if (i !== void 0) return -1;
+      if (s !== void 0) return 1;
+      const u = V(e.value) ?? 1, p = V(r.value) ?? 1;
+      return this.orientation === "portrait" ? p - u : u - p;
+    });
+  }
+  emit(t) {
+    this.dispatchEvent(new CustomEvent("sfx-crop-shape-change", {
+      detail: { shape: t },
+      bubbles: !0,
+      composed: !0
+    }));
+  }
+  close() {
+    this.open = !1;
+  }
+  onOptionClick(t, e) {
+    t.stopPropagation(), this.value = e, this.close(), this.emit(e);
+  }
+  focusOption(t) {
+    this.focusedIndex = t;
+    const e = this.renderRoot.querySelector(
+      `.sfx-cr-shape-option[data-index="${t}"]`
+    );
+    e == null || e.focus();
+  }
+};
+B.styles = [I, wt];
+let g = B;
+k([
+  a({ type: String })
+], g.prototype, "value");
+k([
+  a({ attribute: !1 })
+], g.prototype, "shapes");
+k([
+  a({ type: Boolean, reflect: !0 })
+], g.prototype, "open");
+k([
+  a({ type: String, reflect: !0 })
+], g.prototype, "variant");
+k([
+  a({ attribute: !1 })
+], g.prototype, "icons");
+k([
+  E()
+], g.prototype, "orientation");
+k([
+  E()
+], g.prototype, "focusedIndex");
+const $t = T`
+  :host {
+    position: absolute;
+    top: 16px;
+    left: 0;
+    right: 0;
+    display: flex;
+    justify-content: center;
+    z-index: 5;
+    animation: sfx-cr-toolbar-enter 300ms ease forwards;
+    pointer-events: none;
+  }
+
+  :host([toolbar-position="bottom"]) {
+    top: auto;
+    bottom: 16px;
+  }
+
+  /* Fixed variant: the editor box IS the crop frame, so the floating bar sits
+     directly over the photo. Classic gets its button contrast for free from
+     the dimmed crop mask; fixed has none, so give each control its own
+     translucent pill to stay legible over arbitrary image content.
+
+     IMPORTANT: backgrounds only — no backdrop-filter / transform / filter
+     here or on any ancestor. Those create a containing block for
+     position:fixed descendants, which would re-anchor the canvas-bottom ruler
+     + shape popover (both fixed-positioned) to the bar and knock the 45-deg
+     tilt ruler off-screen. A plain background is safe. */
+  :host([variant="fixed"]) .sfx-cr-toolbar,
+  :host([variant="fixed"]) .sfx-cr-toolbar-group {
+    /* Fixed variant runs a slightly tighter uniform gap than classic. */
+    gap: 12px;
+  }
+  :host([variant="fixed"]) .sfx-cr-reset-btn,
+  :host([variant="fixed"]) .sfx-cr-toolbar-btn {
+    background: var(--sfx-cr-overlay-color);
+  }
+
+  /* Primary "Done" action — pinned to the right edge of the toolbar strip,
+     away from the centered control cluster. The host spans the full block
+     width (left:0/right:0), so right:16px sits near the block's edge. */
+  .sfx-cr-done-btn {
+    position: absolute;
+    right: 16px;
+    top: 50%;
+    transform: translateY(-50%);
+    pointer-events: auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: 36px;
+    padding: 0 18px;
+    background: var(--sfx-cr-primary);
+    color: #fff;
+    border: none;
+    border-radius: 50px;
+    cursor: pointer;
+    font-family: var(--sfx-cr-font);
+    font-size: 14px;
+    font-weight: 600;
+    letter-spacing: 0.1px;
+    white-space: nowrap;
+    box-shadow: var(--sfx-cr-toolbar-shadow);
+    transition:
+      background var(--sfx-cr-transition),
+      transform var(--sfx-cr-transition);
+  }
+  .sfx-cr-done-btn:hover {
+    background: var(--sfx-cr-primary-hover);
+    transform: translateY(-50%) scale(1.02);
+  }
+  .sfx-cr-done-btn:active {
+    transform: translateY(-50%) scale(0.97);
+  }
+  .sfx-cr-done-btn:focus-visible {
+    outline: 2px solid var(--sfx-cr-ring);
+    outline-offset: 2px;
+  }
+
+  /* Hole-punch pattern: the toolbar host is pointer-transparent and
+     individual interactive children below opt back in. Gaps between
+     buttons fall through to the canvas — important when a crop handle
+     ends up under the floating toolbar and the user wants to grab it.
+     The rotate / zoom / shapes sub-elements already follow the same
+     pattern in their own stylesheets. */
+  .sfx-cr-toolbar {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 16px;
+    padding: 4px 8px;
+    background: transparent;
+    color: var(--sfx-cr-toolbar-color);
+    border: none;
+    border-radius: 0;
+    box-shadow: none;
+    pointer-events: none;
+  }
+
+  .sfx-cr-toolbar-group {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    /* Match the toolbar's own gap so spacing is uniform across every button
+       (Reset, rotate, flip, shapes), not tighter inside the group. */
+    gap: 16px;
+  }
+
+  /* Sub-element hosts — same hole-punch opt-in as the plain buttons.
+     Their hosts are tight inline-flex wrappers around a single trigger,
+     so re-enabling them adds no extra dead zone. */
+  sfx-crop-rotate,
+  sfx-crop-shapes {
+    pointer-events: auto;
+  }
+
+  /* The fine-tilt ruler renders as a canvas-anchored fixed popover, but its
+     inline host still occupies a zero-width slot in the toolbar row — which
+     doubles the gap between the flip button and the shape selector. Pull the
+     host out of flow so every visible button stays evenly spaced (both
+     variants). The popover is position:fixed, so this doesn't move it. */
+  sfx-crop-rotate {
+    position: absolute;
+  }
+
+  .sfx-cr-toolbar-btn {
+    pointer-events: auto;
+    width: 52px;
+    height: 36px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: transparent;
+    color: var(--sfx-cr-text-secondary);
+    /* Transparent default border → hover swaps in a colored ring without
+       the layout shifting from 0 → 1 px. */
+    border: 1px solid transparent;
+    border-radius: 999px;
+    cursor: pointer;
+    padding: 0;
+    transition:
+      border-color var(--sfx-cr-transition),
+      color var(--sfx-cr-transition),
+      transform var(--sfx-cr-transition);
+  }
+
+  .sfx-cr-toolbar-btn:hover {
+    border-color: var(--sfx-cr-primary);
+    transform: translateY(-1px);
+  }
+
+  .sfx-cr-toolbar-btn:active {
+    transform: translateY(0) scale(0.96);
+  }
+
+  .sfx-cr-toolbar-btn:disabled {
+    opacity: 0.45;
+    cursor: not-allowed;
+  }
+
+  .sfx-cr-toolbar-btn:disabled:hover {
+    border-color: transparent;
+    color: var(--sfx-cr-text-muted);
+    transform: none;
+  }
+
+  .sfx-cr-toolbar-btn:focus-visible {
+    outline: 2px solid var(--sfx-cr-ring);
+    outline-offset: 2px;
+  }
+
+  .sfx-cr-toolbar-btn svg {
+    width: 20px;
+    height: 20px;
+    display: block;
+  }
+
+  /* Reset pill — mirrors the shape-selector trigger visual language:
+     capsule border, transparent fill, primary-blue tint on hover. Lives
+     before every other control so the user can wipe back to the initial
+     state in one click. */
+  .sfx-cr-reset-btn {
+    pointer-events: auto;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 8px 14px;
+    min-width: 84px;
+    height: 36px;
+    background: transparent;
+    color: var(--sfx-cr-text-secondary);
+    border: 1.5px solid var(--sfx-cr-border);
+    border-radius: 50px;
+    cursor: pointer;
+    font-family: var(--sfx-cr-font);
+    font-size: 14px;
+    font-weight: 500;
+    letter-spacing: 0.1px;
+    white-space: nowrap;
+    transition:
+      background var(--sfx-cr-transition),
+      border-color var(--sfx-cr-transition),
+      color var(--sfx-cr-transition),
+      transform var(--sfx-cr-transition),
+      box-shadow var(--sfx-cr-transition);
+  }
+  .sfx-cr-reset-btn:hover {
+    border-color: var(--sfx-cr-primary);
+    transform: translateY(-1px);
+  }
+  .sfx-cr-reset-btn:focus-visible {
+    outline: 2px solid var(--sfx-cr-ring);
+    outline-offset: 2px;
+  }
+  .sfx-cr-reset-btn svg {
+    width: 18px;
+    height: 18px;
+    display: block;
+  }
+
+  @media (max-width: 768px) {
+    .sfx-cr-toolbar {
+      flex-wrap: wrap;
+      justify-content: center;
+    }
+  }
+
+  @media (max-width: 480px) {
+    .sfx-cr-toolbar {
+      padding: 6px 8px;
+      gap: 8px;
+    }
+    .sfx-cr-toolbar-group {
+      gap: 8px;
+    }
+    .sfx-cr-toolbar-btn {
+      width: 40px;
+      height: 32px;
+    }
+    .sfx-cr-toolbar-btn svg {
+      width: 18px;
+      height: 18px;
+      display: block;
+    }
+  }
+
+  /* Narrow editor (component itself is small, regardless of viewport):
+     stack the toolbar vertically along the LEFT edge, icons only.
+     Tucked tight against the edge with a compact 30×30 footprint so
+     the photo behind keeps maximum breathing room. Triggered by the
+     sfxcrop container set on the sfx-crop host — matches editor
+     width, not viewport width, so a narrow column on a wide desktop
+     gets the same compact layout.
+
+     EXCLUDED from the fixed variant via :not([variant="fixed"]): a fixed
+     frame is often portrait/phone-shaped (narrow but tall), where the left
+     rail looks wrong — fixed keeps the horizontal top bar at any width. */
+  @container sfxcrop (max-width: 760px) {
+    :host(:not([variant="fixed"])) {
+      top: 8px;
+      bottom: 8px;
+      /* Stay full-width (don't collapse to a left-hugging strip): the Done
+         button is absolutely positioned against this host, so the host must
+         keep spanning to the container's right edge for Done to stay in the
+         top-right corner. The button column is tucked left with padding
+         instead of by repositioning the whole host. */
+      left: 0;
+      right: 0;
+      padding-left: 4px;
+      justify-content: flex-start;
+      /* Cross-axis centers the stacked button column vertically inside
+         the full-height host strip — toolbar floats in the middle of
+         the photo regardless of its content height. */
+      align-items: center;
+    }
+    :host(:not([variant="fixed"])[toolbar-position="bottom"]) {
+      top: 8px;
+      bottom: 8px;
+    }
+    /* Keep Done pinned to the editor's top-right corner — exactly where the
+       desktop bar puts it — even though the host now spans the full photo
+       height (top:50% would otherwise drop it to the vertical middle). A bit
+       smaller and tucked tighter into the corner to free up the photo. */
+    :host(:not([variant="fixed"])) .sfx-cr-done-btn {
+      top: 6px;
+      right: 8px;
+      height: 28px;
+      padding: 0 12px;
+      font-size: 12px;
+      transform: none;
+    }
+    :host(:not([variant="fixed"])) .sfx-cr-done-btn:hover { transform: scale(1.02); }
+    :host(:not([variant="fixed"])) .sfx-cr-done-btn:active { transform: scale(0.97); }
+    :host(:not([variant="fixed"])) .sfx-cr-toolbar {
+      flex-direction: column;
+      flex-wrap: nowrap;
+      align-items: center;
+      justify-content: flex-start;
+      gap: 4px;
+      padding: 3px;
+    }
+    :host(:not([variant="fixed"])) .sfx-cr-toolbar-group {
+      flex-direction: column;
+      gap: 4px;
+    }
+    :host(:not([variant="fixed"])) .sfx-cr-toolbar-btn {
+      width: 30px;
+      height: 30px;
+    }
+    :host(:not([variant="fixed"])) .sfx-cr-toolbar-btn svg {
+      width: 16px;
+      height: 16px;
+    }
+    :host(:not([variant="fixed"])) .sfx-cr-reset-btn {
+      width: 30px;
+      height: 30px;
+      min-width: 0;
+      padding: 0;
+      gap: 0;
+      justify-content: center;
+    }
+    :host(:not([variant="fixed"])) .sfx-cr-reset-btn svg {
+      width: 16px;
+      height: 16px;
+    }
+    :host(:not([variant="fixed"])) .sfx-cr-reset-btn span {
+      display: none;
+    }
+  }
+
+  /* Fixed + narrow (portrait/phone frame): keep the horizontal top bar, but
+     render every control as a uniform 40×40 round icon button, centered in
+     the frame. (Reset / shapes labels are dropped — icon only.) */
+  @container sfxcrop (max-width: 760px) {
+    :host([variant="fixed"]) .sfx-cr-toolbar {
+      flex-wrap: wrap;
+      justify-content: center;
+      gap: 10px;
+    }
+    :host([variant="fixed"]) .sfx-cr-toolbar-group {
+      gap: 10px;
+    }
+    :host([variant="fixed"]) .sfx-cr-reset-btn,
+    :host([variant="fixed"]) .sfx-cr-toolbar-btn {
+      width: 40px;
+      height: 40px;
+      min-width: 0;
+      padding: 0;
+      gap: 0;
+      justify-content: center;
+    }
+    :host([variant="fixed"]) .sfx-cr-reset-btn span {
+      display: none;
+    }
+    :host([variant="fixed"]) .sfx-cr-done-btn {
+      /* Stay in the top-right corner when the bar wraps to multiple rows
+         (top:50% would otherwise centre Done over the taller wrapped bar),
+         a bit smaller and tucked tighter into the corner. */
+      top: 6px;
+      right: 8px;
+      height: 28px;
+      padding: 0 12px;
+      font-size: 12px;
+      transform: none;
+    }
+    :host([variant="fixed"]) .sfx-cr-done-btn:hover { transform: scale(1.02); }
+    :host([variant="fixed"]) .sfx-cr-done-btn:active { transform: scale(0.97); }
+  }
+`;
+var Ct = Object.defineProperty, x = (n, t, e, r) => {
+  for (var o = void 0, i = n.length - 1, s; i >= 0; i--)
+    (s = n[i]) && (o = s(t, e, o) || o);
+  return o && Ct(t, e, o), o;
+};
+const L = class L extends R {
+  constructor() {
+    super(...arguments), this.shape = "free", this.rotation = 0, this.showRotateButton = !0, this.showFlipButton = !0, this.showRotateSlider = !0, this.showShapeSelector = !0, this.toolbarPosition = "top", this.variant = "classic", this.availableShapes = null, this.icons = {}, this.onPopoverOpen = (t) => {
+      var r;
+      ((r = t.detail) == null ? void 0 : r.source) !== "shapes" && this.shapesEl && (this.shapesEl.open = !1);
+    };
+  }
+  render() {
+    const t = this.showRotateButton || this.showFlipButton, e = et(this.availableShapes) ?? [...ot];
+    return d`
+      <div class="sfx-cr-toolbar" @sfx-crop-popover-open=${this.onPopoverOpen}>
+        <button
+          type="button"
+          class="sfx-cr-reset-btn"
+          aria-label="Reset all changes"
+          @click=${() => this.emit({ type: "reset" })}
+        >
+          ${v(f("reset", this.icons))}
+          <span>Reset</span>
+        </button>
+
+        ${t ? d`
+          <div class="sfx-cr-toolbar-group">
+            ${this.showRotateButton ? d`
+              <button
+                type="button"
+                class="sfx-cr-toolbar-btn"
+                aria-label="Rotate left 90°"
+                @click=${() => this.emit({ type: "rotate-left" })}
+              >${v(f("rotateLeft", this.icons))}</button>
+            ` : null}
+            ${this.showFlipButton ? d`
+              <button
+                type="button"
+                class="sfx-cr-toolbar-btn"
+                aria-label="Flip horizontal"
+                @click=${() => this.emit({ type: "flip-h" })}
+              >${v(f("flipHorizontal", this.icons))}</button>
+            ` : null}
+          </div>
+        ` : null}
+
+        ${this.showRotateSlider ? d`
+          <sfx-crop-rotate
+            .value=${this.rotation}
+            .icons=${this.icons}
+            @sfx-crop-rotate-change=${(r) => this.emit({ type: "rotation", value: r.detail.degrees })}
+          ></sfx-crop-rotate>
+        ` : null}
+
+        ${this.showShapeSelector ? d`
+          <sfx-crop-shapes
+            .value=${this.shape}
+            .shapes=${e}
+            variant=${this.variant}
+            .icons=${this.icons}
+            @sfx-crop-shape-change=${(r) => this.emit({ type: "shape", value: r.detail.shape })}
+          ></sfx-crop-shapes>
+        ` : null}
+      </div>
+
+      <button
+        type="button"
+        class="sfx-cr-done-btn"
+        part="done"
+        aria-label="Done"
+        @click=${() => this.emit({ type: "save" })}
+      >Done</button>
+    `;
+  }
+  /** Sync the rotation slider without firing an event. */
+  setRotationValue(t) {
+    var e;
+    this.rotation = t, (e = this.rotateEl) == null || e.setValue(t);
+  }
+  /** Sync the shape selector without firing an event. */
+  setShapeValue(t) {
+    var e;
+    this.shape = t, (e = this.shapesEl) == null || e.setValue(t);
+  }
+  emit(t) {
+    this.dispatchEvent(new CustomEvent("sfx-crop-toolbar-command", {
+      detail: t,
+      bubbles: !0,
+      composed: !0
+    }));
+  }
+};
+L.styles = [I, tt, $t];
+let c = L;
+x([
+  a({ type: String })
+], c.prototype, "shape");
+x([
+  a({ type: Number })
+], c.prototype, "rotation");
+x([
+  a({ type: Boolean, attribute: "show-rotate-button" })
+], c.prototype, "showRotateButton");
+x([
+  a({ type: Boolean, attribute: "show-flip-button" })
+], c.prototype, "showFlipButton");
+x([
+  a({ type: Boolean, attribute: "show-rotate-slider" })
+], c.prototype, "showRotateSlider");
+x([
+  a({ type: Boolean, attribute: "show-shape-selector" })
+], c.prototype, "showShapeSelector");
+x([
+  a({ type: String, attribute: "toolbar-position", reflect: !0 })
+], c.prototype, "toolbarPosition");
+x([
+  a({ type: String, reflect: !0 })
+], c.prototype, "variant");
+x([
+  a({ attribute: "available-shapes" })
+], c.prototype, "availableShapes");
+x([
+  a({ attribute: !1 })
+], c.prototype, "icons");
+x([
+  U("sfx-crop-rotate")
+], c.prototype, "rotateEl");
+x([
+  U("sfx-crop-shapes")
+], c.prototype, "shapesEl");
+const zt = T`
+  :host {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+  }
+
+  .sfx-cr-zoom-root {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  /* Trigger — visually matches the other toolbar icon buttons. */
+  .sfx-cr-zoom-trigger {
+    width: 44px;
+    height: 36px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    background: transparent;
+    color: var(--sfx-cr-text-secondary);
+    border: 1px solid transparent;
+    border-radius: 999px;
+    cursor: pointer;
+    transition:
+      border-color var(--sfx-cr-transition),
+      color var(--sfx-cr-transition),
+      transform var(--sfx-cr-transition);
+  }
+  .sfx-cr-zoom-trigger:hover {
+    border-color: var(--sfx-cr-primary);
+    color: var(--sfx-cr-primary);
+    transform: translateY(-1px);
+  }
+  .sfx-cr-zoom-trigger:active {
+    transform: translateY(0) scale(0.96);
+  }
+  .sfx-cr-zoom-trigger:focus-visible {
+    outline: 2px solid var(--sfx-cr-ring);
+    outline-offset: 2px;
+  }
+  .sfx-cr-zoom-trigger svg {
+    width: 20px;
+    height: 20px;
+    display: block;
+  }
+
+  :host([open]) .sfx-cr-zoom-trigger {
+    color: var(--sfx-cr-primary);
+  }
+
+  /* Popover — transparent, floats above the trigger. */
+  .sfx-cr-zoom-popover {
+    position: fixed;
+    top: var(--sfx-cr-popover-top, 50%);
+    left: var(--sfx-cr-popover-left, 50%);
+    transform: translateX(-50%) translateY(6px) scale(0.98);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 4px;
+    padding: 0;
+    background: transparent;
+    border: none;
+    box-shadow: none;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 120ms ease-in, transform 120ms ease-in;
+    white-space: nowrap;
+    z-index: 10;
+  }
+
+  :host([open]) .sfx-cr-zoom-popover {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0) scale(1);
+    pointer-events: auto;
+    transition: opacity 220ms cubic-bezier(0.34, 1.2, 0.64, 1),
+                transform 220ms cubic-bezier(0.34, 1.2, 0.64, 1);
+  }
+
+  .sfx-cr-zoom-ruler {
+    position: relative;
+    width: var(--ruler-w, 260px);
+    height: 30px;
+    overflow: hidden;
+    cursor: grab;
+    touch-action: none;
+    user-select: none;
+    -webkit-user-select: none;
+  }
+  .sfx-cr-zoom-ruler.is-dragging { cursor: grabbing; }
+  .sfx-cr-zoom-ruler:focus-visible {
+    outline: 2px solid var(--sfx-cr-ring);
+    outline-offset: 2px;
+    border-radius: 4px;
+  }
+
+  .sfx-cr-zoom-ticks {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    height: 100%;
+    will-change: transform;
+  }
+
+  .sfx-cr-zoom-tick {
+    position: absolute;
+    top: 50%;
+    width: 1px;
+    height: 8px;
+    margin-left: -0.5px;
+    margin-top: -4px;
+    border-radius: 0.5px;
+    background: var(--sfx-cr-text);
+    opacity: 0.55;
+  }
+  .sfx-cr-zoom-tick--major {
+    width: 1px;
+    height: 12px;
+    margin-left: -0.5px;
+    margin-top: -6px;
+    opacity: 0.9;
+  }
+
+  .sfx-cr-zoom-indicator {
+    position: absolute;
+    top: calc(50% + 4px);
+    height: 16px;
+    left: 50%;
+    width: 4px;
+    margin-left: -2px;
+    background: var(--sfx-cr-text);
+    border-radius: 2px;
+    pointer-events: none;
+  }
+
+  .sfx-cr-zoom-value {
+    font-size: 14px;
+    font-weight: 400;
+    color: var(--sfx-cr-text);
+    text-align: center;
+    font-variant-numeric: tabular-nums;
+    letter-spacing: 0.2px;
+  }
+
+  @media (max-width: 768px) {
+    /* Slimmer ruler + smaller readout on phones, mirroring the rotate
+       popover. Push the popover down toward the canvas bottom edge so
+       it doesn't sit in the middle of the photo. */
+    .sfx-cr-zoom-ruler { width: 220px; height: 22px; }
+    .sfx-cr-zoom-tick { height: 6px; margin-top: -3px; }
+    .sfx-cr-zoom-tick--major { height: 9px; margin-top: -4.5px; }
+    .sfx-cr-zoom-indicator {
+      top: calc(50% + 3px);
+      height: 12px;
+      width: 3px;
+      margin-left: -1.5px;
+    }
+    .sfx-cr-zoom-value { font-size: 12px; }
+    :host([open]) .sfx-cr-zoom-popover {
+      transform: translateX(-50%) translateY(24px) scale(1);
+    }
+  }
+  @media (max-width: 480px) {
+    .sfx-cr-zoom-ruler { width: 180px; height: 20px; }
+    .sfx-cr-zoom-tick { height: 5px; margin-top: -2.5px; }
+    .sfx-cr-zoom-tick--major { height: 8px; margin-top: -4px; }
+    .sfx-cr-zoom-indicator {
+      top: calc(50% + 2px);
+      height: 10px;
+    }
+    .sfx-cr-zoom-value { font-size: 11px; }
+    :host([open]) .sfx-cr-zoom-popover {
+      transform: translateX(-50%) translateY(30px) scale(1);
+    }
+  }
+
+  /* Narrow editor — match the compact 30×30 trigger sizing of the
+     rest of the vertical left-rail toolbar. Container query so a
+     narrow editor on a wide desktop also collapses. */
+  @container sfxcrop (max-width: 600px) {
+    .sfx-cr-zoom-trigger {
+      width: 30px;
+      height: 30px;
+    }
+    .sfx-cr-zoom-trigger svg {
+      width: 16px;
+      height: 16px;
+    }
+  }
+`;
+var Pt = Object.defineProperty, z = (n, t, e, r) => {
+  for (var o = void 0, i = n.length - 1, s; i >= 0; i--)
+    (s = n[i]) && (o = s(t, e, o) || o);
+  return o && Pt(t, e, o), o;
+};
+function D(n, t, e) {
+  return Math.log(n / t) / Math.log(e / t);
+}
+function X(n, t, e) {
+  return t * Math.pow(e / t, n);
+}
+const M = 260, Y = 260, H = 40, St = 5, F = class F extends R {
+  constructor() {
+    super(...arguments), this.min = 0.5, this.max = 5, this.value = 1, this.open = !1, this.icons = {}, this.dragging = !1, this.activePointer = null, this.pointerStartX = 0, this.pointerStartSlider = 0, this.autoCloseTimer = null, this.docClickHandler = () => {
+      this.open && (this.clearAutoClose(), this.open = !1);
+    }, this.popoverAnchor = W(this, ".sfx-cr-zoom-popover"), this.onTriggerClick = (t) => {
+      t.stopPropagation(), this.clearAutoClose(), this.open = !this.open, this.open && this.dispatchEvent(new CustomEvent("sfx-crop-popover-open", {
+        detail: { source: "zoom" },
+        bubbles: !0,
+        composed: !0
+      }));
+    }, this.onKeyDown = (t) => {
+      if (this.open) {
+        if (t.key === "Escape") {
+          t.preventDefault(), t.stopPropagation(), this.open = !1;
+          return;
+        }
+        if (t.key === "ArrowLeft" || t.key === "ArrowRight") {
+          t.preventDefault();
+          const e = t.key === "ArrowRight" ? 1 : -1, r = t.shiftKey ? 0.05 : 0.01, o = D(this.value, this.min, this.max), i = y(o + e * r, 0, 1);
+          this.emit(X(i, this.min, this.max));
+        }
+      }
+    }, this.onPointerDown = (t) => {
+      if (this.activePointer === null) {
+        this.clearAutoClose(), this.activePointer = t.pointerId, this.pointerStartX = t.clientX, this.pointerStartSlider = D(this.value, this.min, this.max), this.dragging = !0;
+        try {
+          t.currentTarget.setPointerCapture(t.pointerId);
+        } catch {
+        }
+      }
+    }, this.onPointerMove = (t) => {
+      if (this.activePointer !== t.pointerId) return;
+      const e = t.clientX - this.pointerStartX, r = y(this.pointerStartSlider - e / M, 0, 1);
+      this.emit(X(r, this.min, this.max));
+    }, this.onPointerUp = (t) => {
+      if (this.activePointer === t.pointerId) {
+        this.activePointer = null, this.dragging = !1;
+        try {
+          t.currentTarget.releasePointerCapture(t.pointerId);
+        } catch {
+        }
+      }
+    }, this.onReset = () => {
+      this.emit(1);
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), document.addEventListener("click", this.docClickHandler);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), document.removeEventListener("click", this.docClickHandler), this.popoverAnchor.stop(), this.clearAutoClose();
+  }
+  updated(t) {
+    t.has("open") && (this.open ? this.popoverAnchor.start() : this.popoverAnchor.stop()), this.open && (t.has("value") || t.has("dragging")) && this.popoverAnchor.update();
+  }
+  render() {
+    const t = D(this.value, this.min, this.max), e = Math.round(this.value * 100), r = Y / 2 - t * M, o = [], i = 1 / H;
+    for (let s = 0; s <= H; s++)
+      o.push({ pos: s * i, major: s % St === 0 });
+    return d`
+      <div
+        class="sfx-cr-zoom-root"
+        @click=${(s) => s.stopPropagation()}
+        @keydown=${this.onKeyDown}
+      >
+        <button
+          type="button"
+          class="sfx-cr-zoom-trigger"
+          aria-label=${`Zoom — ${e}%`}
+          aria-haspopup="dialog"
+          aria-expanded=${this.open ? "true" : "false"}
+          @click=${this.onTriggerClick}
+        >${v(f("loupe", this.icons))}</button>
+
+        <div class="sfx-cr-zoom-popover" role="group" aria-label="Zoom controls">
+          <div
+            class=${`sfx-cr-zoom-ruler${this.dragging ? " is-dragging" : ""}`}
+            role="slider"
+            aria-valuemin=${String(this.min)}
+            aria-valuemax=${String(this.max)}
+            aria-valuenow=${this.value.toFixed(2)}
+            aria-valuetext=${`${e}%`}
+            tabindex="0"
+            style=${`--ruler-w: ${Y}px`}
+            @pointerdown=${this.onPointerDown}
+            @pointermove=${this.onPointerMove}
+            @pointerup=${this.onPointerUp}
+            @pointercancel=${this.onPointerUp}
+            @dblclick=${this.onReset}
+          >
+            <div class="sfx-cr-zoom-ticks" style=${`transform: translateX(${r.toFixed(1)}px)`}>
+              ${o.map((s) => d`
+                <span
+                  class=${`sfx-cr-zoom-tick${s.major ? " sfx-cr-zoom-tick--major" : ""}`}
+                  style=${`left: ${(s.pos * M).toFixed(1)}px`}
+                ></span>
+              `)}
+            </div>
+            <div class="sfx-cr-zoom-indicator" aria-hidden="true"></div>
+          </div>
+          <span class="sfx-cr-zoom-value">${e}%</span>
+        </div>
+      </div>
+    `;
+  }
+  /** Sync value without emitting — used by host to reflect controller state. */
+  setValue(t) {
+    this.value = y(t, this.min, this.max);
+  }
+  /**
+   * Open the popover and auto-close after `duration` ms of inactivity.
+   * Subsequent calls debounce the close (so a stream of wheel events keeps
+   * the slider visible). Manual interaction (trigger click, ruler drag)
+   * cancels the pending close.
+   *
+   * If the popover is already open via manual click (no timer armed) this
+   * is a no-op: a wheel burst must never hijack a user-opened popover into
+   * auto-closing.
+   */
+  showTemporarily(t = 1500) {
+    if (this.open && this.autoCloseTimer === null) return;
+    const e = this.open;
+    this.open = !0, e || this.dispatchEvent(new CustomEvent("sfx-crop-popover-open", {
+      detail: { source: "zoom" },
+      bubbles: !0,
+      composed: !0
+    })), this.clearAutoClose(), this.autoCloseTimer = setTimeout(() => {
+      this.autoCloseTimer = null, this.open = !1;
+    }, t);
+  }
+  clearAutoClose() {
+    this.autoCloseTimer !== null && (clearTimeout(this.autoCloseTimer), this.autoCloseTimer = null);
+  }
+  emit(t) {
+    this.value !== t && (this.value = t, this.dispatchEvent(new CustomEvent("sfx-crop-zoom-change", {
+      detail: { scale: t },
+      bubbles: !0,
+      composed: !0
+    })));
+  }
+};
+F.styles = [I, zt];
+let b = F;
+z([
+  a({ type: Number })
+], b.prototype, "min");
+z([
+  a({ type: Number })
+], b.prototype, "max");
+z([
+  a({ type: Number })
+], b.prototype, "value");
+z([
+  a({ type: Boolean, reflect: !0 })
+], b.prototype, "open");
+z([
+  a({ attribute: !1 })
+], b.prototype, "icons");
+z([
+  E()
+], b.prototype, "dragging");
+C("sfx-crop-zoom", b);
+C("sfx-crop-rotate", m);
+C("sfx-crop-shapes", g);
+C("sfx-crop-canvas", rt);
+C("sfx-crop-toolbar", c);
+C("sfx-crop", it);
+//# sourceMappingURL=define.js.map