@scaleflex/crop 2.0.1

package/dist/react/define-t4Z6KaLY.js

@@ -0,0 +1,2590 @@
+import { LitElement as mt, css as b, html as f } from "lit";
+import { query as E, property as s, state as M } from "lit/decorators.js";
+import { classMap as at } from "lit/directives/class-map.js";
+import { p as ht, s as wt, m as yt, c as kt, g as q, a as R } from "./index-CktjrogS.js";
+import { unsafeHTML as k } from "lit/directives/unsafe-html.js";
+class N extends mt {
+}
+function A(i, t) {
+  typeof customElements > "u" || customElements.get(i) || customElements.define(i, t);
+}
+const St = b`
+  :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 Ct = Object.defineProperty, $t = (i, t, e, o) => {
+  for (var r = void 0, a = i.length - 1, n; a >= 0; a--)
+    (n = i[a]) && (r = n(t, e, r) || r);
+  return r && Ct(t, e, r), r;
+};
+const Q = class Q extends N {
+  render() {
+    return f`<canvas part="canvas"></canvas>`;
+  }
+};
+Q.styles = [St];
+let D = Q;
+$t([
+  E("canvas")
+], D.prototype, "canvasEl");
+const J = [
+  "free",
+  "square",
+  // Landscape
+  "16:9",
+  "4:3",
+  "3:2",
+  "5:4",
+  "2:1",
+  // Portrait
+  "9:16",
+  "3:4",
+  "2:3",
+  "4:5",
+  "1:2"
+], zt = [
+  "free",
+  "square",
+  "circle",
+  "rounded-rect"
+];
+function W(i) {
+  return typeof i != "string" ? !1 : zt.includes(i) ? !0 : ht(i) !== null;
+}
+function pt(i) {
+  if (i == null) return;
+  if (Array.isArray(i)) return i.filter(W);
+  if (typeof i != "string") return;
+  const t = i.trim();
+  if (t) {
+    if (t.startsWith("["))
+      try {
+        const e = JSON.parse(t);
+        if (Array.isArray(e)) return e.filter(W);
+      } catch {
+      }
+    return t.split(/[\s,]+/).filter(Boolean).filter(W);
+  }
+}
+const Rt = b`
+  :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);
+  }
+`, j = b`
+  .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;
+    }
+  }
+`, Pt = b`
+  @keyframes sfx-cr-spin { to { transform: rotate(360deg); } }
+`, It = b`
+  @keyframes sfx-cr-toolbar-enter {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+`;
+b`
+  @keyframes sfx-cr-zoom-enter {
+    from {
+      opacity: 0;
+      transform: translateX(-50%) translateY(12px);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(-50%) translateY(0);
+    }
+  }
+`;
+b`
+  @keyframes sfx-cr-card-in {
+    from {
+      opacity: 0;
+      transform: translateY(10px) scale(0.98);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+    }
+  }
+`;
+b`
+  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 Tt = b`
+  :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 Ot = Object.defineProperty, c = (i, t, e, o) => {
+  for (var r = void 0, a = i.length - 1, n; a >= 0; a--)
+    (n = i[a]) && (r = n(t, e, r) || r);
+  return r && Ot(t, e, r), r;
+};
+const Et = {
+  fromAttribute(i) {
+    return i === null ? "interaction" : i === "true" || i === "" ? !0 : i === "false" ? !1 : "interaction";
+  },
+  toAttribute(i) {
+    return i === !0 ? "true" : i === !1 ? "false" : "interaction";
+  }
+}, tt = class tt extends N {
+  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 = [...J], this.initialCrop = null, this.icons = {}, this.loading = !1, this.errorMessage = null, this.controller = null, this.currentImage = null, this.parentResizeObserver = null, this.onToolbarCommand = (t) => {
+      if (!this.controller) return;
+      const e = t.detail;
+      switch (e.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(e.value);
+          break;
+        case "scale":
+          this.controller.setScale(e.value);
+          break;
+        case "shape":
+          this.cropShape = e.value;
+          break;
+        case "save":
+          this.save();
+          break;
+      }
+    };
+  }
+  // === Lifecycle ===
+  async firstUpdated() {
+    if (wt(this), !(this.canvasHost instanceof D))
+      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 t = this.canvasHost.canvasEl, e = yt(this.buildConfig());
+    this.controller = kt({
+      canvas: t,
+      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: e,
+      callbacks: {
+        onReady: () => this.dispatch("sfx-crop-ready", { element: this }),
+        onImageLoad: (r) => {
+          this.currentImage = r, this.fitHostToImage(), this.dispatch("sfx-crop-image-load", { image: r });
+        },
+        onError: (r) => this.dispatch("sfx-crop-error", { error: r }),
+        onChange: (r) => {
+          this.dispatch("sfx-crop-change", r);
+        },
+        onCropChange: (r) => this.dispatch("sfx-crop-crop-change", r),
+        onRotationSync: (r) => {
+          var a;
+          return (a = this.toolbarHost) == null ? void 0 : a.setRotationValue(r);
+        },
+        onShapeSync: (r) => {
+          var a;
+          this.cropShape = r, (a = this.toolbarHost) == null || a.setShapeValue(r);
+        },
+        onScaleSync: () => {
+        },
+        onLoadingChange: (r, a) => {
+          this.loading = r, this.errorMessage = a;
+        }
+      }
+    });
+    const o = this.parentElement;
+    o && (this.parentResizeObserver = new ResizeObserver(() => this.fitHostToImage()), this.parentResizeObserver.observe(o)), this.src && this.controller.loadImage(this.src);
+  }
+  /** @see LIVE_CONFIG_KEYS for the exact set forwarded to `controller.update()`. */
+  updated(t) {
+    if (!this.controller) return;
+    const e = {};
+    let o = !1;
+    for (const r of Mt)
+      t.has(r) && (e[r] = this[r], o = !0);
+    o && this.controller.update(e), (t.has("variant") || t.has("cropShape")) && this.fitHostToImage();
+  }
+  disconnectedCallback() {
+    var t, e;
+    super.disconnectedCallback(), (t = this.parentResizeObserver) == null || t.disconnect(), this.parentResizeObserver = null, (e = this.controller) == null || e.destroy(), this.controller = null;
+  }
+  render() {
+    return f`
+      <div class="sfx-cr-container" part="container">
+        <sfx-crop-canvas part="canvas-host"></sfx-crop-canvas>
+        ${this.showToolbar ? f`
+          <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=${at({ "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=${at({ "sfx-cr-error": !0, "sfx-cr-error--visible": !!this.errorMessage })} part="error">
+          ${this.errorMessage ?? "Failed to load image"}
+        </div>
+      </div>
+    `;
+  }
+  // === Public imperative API ===
+  loadImage(t) {
+    return this.ensure().loadImage(t);
+  }
+  getTransformState() {
+    return this.ensure().getTransformState();
+  }
+  setCropShape(t) {
+    this.ensure(), this.cropShape = t;
+  }
+  setCropRect(t) {
+    this.ensure().setCropRect(t);
+  }
+  getCropRect() {
+    return this.ensure().getCropRect();
+  }
+  rotateLeft() {
+    this.ensure().rotateLeft();
+  }
+  flipHorizontal() {
+    this.ensure().flipHorizontal();
+  }
+  setRotation(t) {
+    this.ensure().setRotation(t);
+  }
+  setScale(t) {
+    this.ensure().setScale(t);
+  }
+  reset() {
+    this.ensure().reset();
+  }
+  toCanvas() {
+    return this.ensure().toCanvas();
+  }
+  toBlob(t, e) {
+    return this.ensure().toBlob(t, e);
+  }
+  toDataURL(t, e) {
+    return this.ensure().toDataURL(t, e);
+  }
+  toTransformParams() {
+    return this.ensure().toTransformParams();
+  }
+  async save(t, e) {
+    const o = await this.toBlob(t, e), r = this.toDataURL(t, e), a = this.toTransformParams();
+    this.dispatch("sfx-crop-save", { blob: o, dataURL: r, params: a });
+  }
+  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 t = this.currentImage.naturalWidth, e = this.currentImage.naturalHeight, o = this.style.width, r = this.style.height;
+    this.style.width = "", this.style.height = "";
+    const a = (m) => {
+      if (!m || m === "none") return Number.POSITIVE_INFINITY;
+      const O = _(m);
+      return Number.isFinite(O) && O > 0 ? O : Number.POSITIVE_INFINITY;
+    }, n = getComputedStyle(this);
+    let d = a(n.maxWidth), p = a(n.maxHeight);
+    const h = this.parentElement, g = h ? getComputedStyle(h) : null;
+    if (h && g && (g.display === "none" || h.clientWidth === 0)) {
+      this.style.width = o, this.style.height = r;
+      return;
+    }
+    const C = (() => {
+      if (!h || !g) return 0;
+      const m = h.clientWidth;
+      return Math.max(0, m - (_(g.paddingLeft) || 0) - (_(g.paddingRight) || 0));
+    })();
+    C > 0 ? d = Math.min(d, C) : Number.isFinite(d) || (d = window.innerWidth), Number.isFinite(p) || (p = window.innerHeight), this.style.width = o, this.style.height = r;
+    const I = d, T = p;
+    if (I <= 0 || T <= 0) return;
+    let L, F;
+    if (this.variant === "fixed") {
+      const m = this.fixedFrameAspect(I / T);
+      let O = I, Y = I / m;
+      Y > T && (Y = T, O = T * m), L = Math.floor(O), F = Math.floor(Y);
+    } else {
+      const m = Math.min(I / t, T / e, 1);
+      L = Math.floor(t * m), F = Math.floor(e * m);
+    }
+    const st = _(o), vt = _(r);
+    (Number.isNaN(st) || Math.abs(st - L) >= 1 || Math.abs(vt - F) >= 1) && (this.style.width = `${L}px`, this.style.height = `${F}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(t) {
+    const e = this.cropShape;
+    if (e === "free") return t;
+    if (e === "rounded-rect") return 1;
+    const o = q(e);
+    return o && o > 0 ? o : t;
+  }
+  dispatch(t, e) {
+    this.dispatchEvent(new CustomEvent(t, { detail: e, bubbles: !0, composed: !0 }));
+  }
+  parseInitialCrop() {
+    const t = this.initialCrop;
+    if (!t) return null;
+    const e = typeof t == "object" ? t : Nt(t);
+    if (!e || typeof e != "object") return null;
+    const o = e;
+    return typeof o.x != "number" || typeof o.y != "number" || typeof o.width != "number" || typeof o.height != "number" ? null : { x: o.x, y: o.y, width: o.width, height: o.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: pt(this.availableShapes) ?? [...J],
+      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
+    };
+  }
+};
+tt.styles = [Rt, j, Pt, Tt];
+let l = tt;
+c([
+  s({ type: String, reflect: !0 })
+], l.prototype, "src");
+c([
+  s({ type: String, attribute: "crop-shape", reflect: !0 })
+], l.prototype, "cropShape");
+c([
+  s({ type: String, reflect: !0 })
+], l.prototype, "theme");
+c([
+  s({ type: Number, attribute: "initial-rotation" })
+], l.prototype, "initialRotation");
+c([
+  s({ type: Number, attribute: "initial-scale" })
+], l.prototype, "initialScale");
+c([
+  s({ type: Number, attribute: "min-scale" })
+], l.prototype, "minScale");
+c([
+  s({ type: Number, attribute: "max-scale" })
+], l.prototype, "maxScale");
+c([
+  s({ type: Number, attribute: "min-crop-size" })
+], l.prototype, "minCropSize");
+c([
+  s({ type: Number, attribute: "handle-size" })
+], l.prototype, "handleSize");
+c([
+  s({ type: Number, attribute: "border-radius" })
+], l.prototype, "borderRadius");
+c([
+  s({ type: Number, attribute: "output-quality" })
+], l.prototype, "outputQuality");
+c([
+  s({ type: Number, attribute: "max-output-width" })
+], l.prototype, "maxOutputWidth");
+c([
+  s({ type: Number, attribute: "max-output-height" })
+], l.prototype, "maxOutputHeight");
+c([
+  s({ type: Number, attribute: "bleed-margin-size" })
+], l.prototype, "bleedMarginSize");
+c([
+  s({ type: Number, attribute: "animation-speed" })
+], l.prototype, "animationSpeed");
+c([
+  s({ type: String, attribute: "handle-color" })
+], l.prototype, "handleColor");
+c([
+  s({ type: String, attribute: "overlay-color" })
+], l.prototype, "overlayColor");
+c([
+  s({ type: String, attribute: "bleed-margin-color" })
+], l.prototype, "bleedMarginColor");
+c([
+  s({ type: String, attribute: "output-type" })
+], l.prototype, "outputType");
+c([
+  s({ type: String, attribute: "toolbar-position", reflect: !0 })
+], l.prototype, "toolbarPosition");
+c([
+  s({ type: String, reflect: !0 })
+], l.prototype, "variant");
+c([
+  s({ attribute: "show-grid", converter: Et })
+], l.prototype, "showGrid");
+c([
+  s({ type: Boolean, attribute: "show-toolbar" })
+], l.prototype, "showToolbar");
+c([
+  s({ type: Boolean, attribute: "show-rotate-slider" })
+], l.prototype, "showRotateSlider");
+c([
+  s({ type: Boolean, attribute: "show-zoom-slider" })
+], l.prototype, "showZoomSlider");
+c([
+  s({ type: Boolean, attribute: "show-shape-selector" })
+], l.prototype, "showShapeSelector");
+c([
+  s({ type: Boolean, attribute: "show-rotate-button" })
+], l.prototype, "showRotateButton");
+c([
+  s({ type: Boolean, attribute: "show-flip-button" })
+], l.prototype, "showFlipButton");
+c([
+  s({ type: Boolean, attribute: "show-bleed-margin" })
+], l.prototype, "showBleedMargin");
+c([
+  s({ type: Boolean, attribute: "enable-animations" })
+], l.prototype, "enableAnimations");
+c([
+  s({ type: Boolean })
+], l.prototype, "keyboard");
+c([
+  s({ type: Boolean, attribute: "pinch-zoom" })
+], l.prototype, "pinchZoom");
+c([
+  s({ type: Boolean, attribute: "wheel-zoom" })
+], l.prototype, "wheelZoom");
+c([
+  s({ attribute: "available-shapes" })
+], l.prototype, "availableShapes");
+c([
+  s({ attribute: "initial-crop" })
+], l.prototype, "initialCrop");
+c([
+  s({ attribute: !1 })
+], l.prototype, "icons");
+c([
+  M()
+], l.prototype, "loading");
+c([
+  M()
+], l.prototype, "errorMessage");
+c([
+  E("sfx-crop-canvas")
+], l.prototype, "canvasHost");
+c([
+  E("sfx-crop-toolbar")
+], l.prototype, "toolbarHost");
+c([
+  E(".sfx-cr-container")
+], l.prototype, "containerEl");
+const Mt = [
+  "src",
+  "variant",
+  "cropShape",
+  "theme",
+  "minScale",
+  "maxScale",
+  "minCropSize",
+  "borderRadius",
+  "handleSize",
+  "handleColor",
+  "overlayColor",
+  "showGrid",
+  "showBleedMargin",
+  "bleedMarginSize",
+  "bleedMarginColor",
+  "enableAnimations",
+  "animationSpeed",
+  "keyboard",
+  "pinchZoom",
+  "wheelZoom"
+];
+function _(i) {
+  if (!i) return NaN;
+  const t = parseFloat(i);
+  return Number.isFinite(t) ? /^-?\d*\.?\d+(?:px)?$/.test(i.trim()) ? t : NaN : NaN;
+}
+function Nt(i) {
+  try {
+    return JSON.parse(i);
+  } catch {
+    return null;
+  }
+}
+const 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"><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>', Bt = '<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>', 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"><path d="M6 2v14a2 2 0 0 0 2 2h14"/><path d="M18 22V8a2 2 0 0 0-2-2H2"/></svg>', _t = '<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>', 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"><rect width="14" height="20" x="5" y="2" rx="2" ry="2"/><path d="M12 18h.01"/></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="12" cy="12" r="10"/></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"><rect width="18" height="18" x="3" y="3" rx="5"/></svg>', jt = '<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>', 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="m6 9 6 6 6-6"/></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"><path d="M2 22h20"/><rect x="3" y="6" width="18" height="14" rx="2" transform="rotate(-10 12 13)"/></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>', Vt = '<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>', Yt = '<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>', Wt = '<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>', u = {
+  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: ""
+};
+u.rotateLeft = At;
+u.flipHorizontal = Bt;
+u.tilt = Lt;
+u.loupe = Yt;
+u.zoomIn = Ft;
+u.zoomOut = Vt;
+u.cropAspect = jt;
+u.cropCustom = dt;
+u.cropCircle = ft;
+u.cropRoundedRect = xt;
+u.orientLandscape = _t;
+u.orientPortrait = Dt;
+u.chevronDown = Ht;
+u.reset = Wt;
+function w(i, t) {
+  const e = t == null ? void 0 : t[i];
+  return typeof e == "string" && e.length > 0 ? e : u[i];
+}
+const Xt = b`
+  :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; }
+  }
+`, Ut = 72;
+function ut(i, t) {
+  let e = null, o = !1;
+  const r = () => {
+    var g;
+    let h = i;
+    for (let z = 0; z < 6; z++) {
+      const C = h.getRootNode();
+      if (!(C instanceof ShadowRoot)) break;
+      if (h = C.host, ((g = h.tagName) == null ? void 0 : g.toLowerCase()) === "sfx-crop") return h;
+    }
+    return null;
+  }, a = () => {
+    var C;
+    const h = (C = i.shadowRoot) == null ? void 0 : C.querySelector(t), g = r();
+    if (!h || !g) return;
+    const z = g.getBoundingClientRect();
+    h.style.setProperty("--sfx-cr-popover-left", `${z.left + z.width / 2}px`), h.style.setProperty("--sfx-cr-popover-top", `${z.bottom - Ut}px`);
+  }, n = () => a();
+  return { start: () => {
+    if (o) return;
+    o = !0, a(), window.addEventListener("resize", n), window.addEventListener("scroll", n, !0);
+    const h = r();
+    h && typeof ResizeObserver < "u" && (e = new ResizeObserver(() => a()), e.observe(h));
+  }, stop: () => {
+    o && (o = !1, window.removeEventListener("resize", n), window.removeEventListener("scroll", n, !0), e == null || e.disconnect(), e = null);
+  }, update: a };
+}
+var Zt = Object.defineProperty, H = (i, t, e, o) => {
+  for (var r = void 0, a = i.length - 1, n; a >= 0; a--)
+    (n = i[a]) && (r = n(t, e, r) || r);
+  return r && Zt(t, e, r), r;
+};
+const V = 6, X = 260, U = 1, Kt = 5, et = class et extends N {
+  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 = ut(this, ".sfx-cr-rotate-popover"), this.onKeyDown = (t) => {
+      t.key === "ArrowLeft" ? (t.preventDefault(), this.emit(R(this.value - (t.shiftKey ? 5 : 1), this.min, this.max))) : t.key === "ArrowRight" && (t.preventDefault(), this.emit(R(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, o = this.pointerStartValue - e / V;
+      this.emit(R(o, 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 = X / 2 - (this.value - this.min) * V, o = X / V, r = 4, a = Math.max(this.min, Math.floor(this.value - o / 2 - r)), n = Math.min(this.max, Math.ceil(this.value + o / 2 + r)), d = [];
+    for (let p = Math.ceil(a / U) * U; p <= n; p += U)
+      d.push({ deg: p, major: p % Kt === 0 });
+    return f`
+      <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: ${X}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)`}>
+              ${d.map((p) => f`
+                <span
+                  class=${`sfx-cr-rotate-tick${p.major ? " sfx-cr-rotate-tick--major" : ""}`}
+                  style=${`left: ${((p.deg - this.min) * V).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 = R(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
+    })));
+  }
+};
+et.styles = [j, Xt];
+let $ = et;
+H([
+  s({ type: Number })
+], $.prototype, "value");
+H([
+  s({ type: Number })
+], $.prototype, "min");
+H([
+  s({ type: Number })
+], $.prototype, "max");
+H([
+  s({ attribute: !1 })
+], $.prototype, "icons");
+H([
+  M()
+], $.prototype, "dragging");
+const Gt = b`
+  :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 qt = Object.defineProperty, P = (i, t, e, o) => {
+  for (var r = void 0, a = i.length - 1, n; a >= 0; a--)
+    (n = i[a]) && (r = n(t, e, r) || r);
+  return r && qt(t, e, r), r;
+};
+function gt(i) {
+  let r, a;
+  i >= 1 ? (r = 18, a = 18 / i) : (a = 18, r = 18 * i);
+  const n = Math.max(0, r - 1.5), d = Math.max(0, a - 1.5), p = (22 - n) / 2, h = (22 - d) / 2, g = Math.min(3.5, Math.min(n, d) / 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="${n.toFixed(2)}" height="${d.toFixed(2)}" rx="${g.toFixed(2)}"/></svg>`;
+}
+function Jt() {
+  return {
+    free: { value: "free", label: "Custom", icon: dt, show: "both" },
+    circle: { value: "circle", label: "Circle", icon: ft, show: "both" },
+    "rounded-rect": { value: "rounded-rect", label: "Rounded", icon: xt, show: "both" },
+    square: { value: "square", label: "1:1", icon: gt(1), show: "both" }
+  };
+}
+const bt = Jt();
+function Z(i) {
+  const t = bt[i];
+  if (t) return t;
+  const e = ht(i);
+  return e === null ? null : {
+    value: i,
+    label: i,
+    icon: gt(e),
+    show: e > 1 ? "landscape" : e < 1 ? "portrait" : "both"
+  };
+}
+const rt = class rt extends N {
+  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((o) => o.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 o = e[this.focusedIndex].value;
+            this.value = o, this.close(), this.emit(o);
+          }
+          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 = Z(this.value);
+      e && e.show !== "both" && (this.orientation = e.show), this.focusRafId = requestAnimationFrame(() => {
+        this.focusRafId = null;
+        const r = this.getVisibleOptions().findIndex((a) => a.value === this.value);
+        this.focusOption(r >= 0 ? r : 0);
+      });
+    }
+  }
+  render() {
+    const t = this.getVisibleOptions(), e = Z(this.value) ?? bt.free;
+    return f`
+      <div
+        @keydown=${this.onKeyDown}
+        @click=${(o) => o.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">${k(w("cropAspect", this.icons))}</span>
+          <span class="sfx-cr-shape-trigger-label">${e.label}</span>
+          <span class="sfx-cr-shape-chevron">${k(w("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")}
+            >${k(w("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")}
+            >${k(w("orientPortrait", this.icons))}</button>
+          </div>
+          <div class="sfx-cr-shape-list" role="presentation">
+            ${t.map((o, r) => f`
+              <button
+                type="button"
+                class=${`sfx-cr-shape-option${o.value === this.value ? " sfx-cr-shape-option--active" : ""}`}
+                role="option"
+                aria-selected=${o.value === this.value ? "true" : "false"}
+                @click=${(a) => this.onOptionClick(a, o.value)}
+                data-index=${String(r)}
+              >
+                <span class="sfx-cr-shape-option-icon">${k(this.optionIcon(o))}</span>
+                <span class="sfx-cr-shape-option-label">${o.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 w("cropCustom", this.icons);
+      case "circle":
+        return w("cropCircle", this.icons);
+      case "rounded-rect":
+        return w("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 o = Z(e);
+      o && (o.show !== "both" && o.show !== this.orientation || t.push(o));
+    }
+    return t.sort((e, o) => {
+      const r = { free: 0, circle: 1, "rounded-rect": 2, square: 3 }, a = r[e.value], n = r[o.value];
+      if (a !== void 0 && n !== void 0) return a - n;
+      if (a !== void 0) return -1;
+      if (n !== void 0) return 1;
+      const d = q(e.value) ?? 1, p = q(o.value) ?? 1;
+      return this.orientation === "portrait" ? p - d : d - 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();
+  }
+};
+rt.styles = [j, Gt];
+let y = rt;
+P([
+  s({ type: String })
+], y.prototype, "value");
+P([
+  s({ attribute: !1 })
+], y.prototype, "shapes");
+P([
+  s({ type: Boolean, reflect: !0 })
+], y.prototype, "open");
+P([
+  s({ type: String, reflect: !0 })
+], y.prototype, "variant");
+P([
+  s({ attribute: !1 })
+], y.prototype, "icons");
+P([
+  M()
+], y.prototype, "orientation");
+P([
+  M()
+], y.prototype, "focusedIndex");
+const Qt = b`
+  :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 te = Object.defineProperty, v = (i, t, e, o) => {
+  for (var r = void 0, a = i.length - 1, n; a >= 0; a--)
+    (n = i[a]) && (r = n(t, e, r) || r);
+  return r && te(t, e, r), r;
+};
+const ot = class ot extends N {
+  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 o;
+      ((o = t.detail) == null ? void 0 : o.source) !== "shapes" && this.shapesEl && (this.shapesEl.open = !1);
+    };
+  }
+  render() {
+    const t = this.showRotateButton || this.showFlipButton, e = pt(this.availableShapes) ?? [...J];
+    return f`
+      <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" })}
+        >
+          ${k(w("reset", this.icons))}
+          <span>Reset</span>
+        </button>
+
+        ${t ? f`
+          <div class="sfx-cr-toolbar-group">
+            ${this.showRotateButton ? f`
+              <button
+                type="button"
+                class="sfx-cr-toolbar-btn"
+                aria-label="Rotate left 90°"
+                @click=${() => this.emit({ type: "rotate-left" })}
+              >${k(w("rotateLeft", this.icons))}</button>
+            ` : null}
+            ${this.showFlipButton ? f`
+              <button
+                type="button"
+                class="sfx-cr-toolbar-btn"
+                aria-label="Flip horizontal"
+                @click=${() => this.emit({ type: "flip-h" })}
+              >${k(w("flipHorizontal", this.icons))}</button>
+            ` : null}
+          </div>
+        ` : null}
+
+        ${this.showRotateSlider ? f`
+          <sfx-crop-rotate
+            .value=${this.rotation}
+            .icons=${this.icons}
+            @sfx-crop-rotate-change=${(o) => this.emit({ type: "rotation", value: o.detail.degrees })}
+          ></sfx-crop-rotate>
+        ` : null}
+
+        ${this.showShapeSelector ? f`
+          <sfx-crop-shapes
+            .value=${this.shape}
+            .shapes=${e}
+            variant=${this.variant}
+            .icons=${this.icons}
+            @sfx-crop-shape-change=${(o) => this.emit({ type: "shape", value: o.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
+    }));
+  }
+};
+ot.styles = [j, It, Qt];
+let x = ot;
+v([
+  s({ type: String })
+], x.prototype, "shape");
+v([
+  s({ type: Number })
+], x.prototype, "rotation");
+v([
+  s({ type: Boolean, attribute: "show-rotate-button" })
+], x.prototype, "showRotateButton");
+v([
+  s({ type: Boolean, attribute: "show-flip-button" })
+], x.prototype, "showFlipButton");
+v([
+  s({ type: Boolean, attribute: "show-rotate-slider" })
+], x.prototype, "showRotateSlider");
+v([
+  s({ type: Boolean, attribute: "show-shape-selector" })
+], x.prototype, "showShapeSelector");
+v([
+  s({ type: String, attribute: "toolbar-position", reflect: !0 })
+], x.prototype, "toolbarPosition");
+v([
+  s({ type: String, reflect: !0 })
+], x.prototype, "variant");
+v([
+  s({ attribute: "available-shapes" })
+], x.prototype, "availableShapes");
+v([
+  s({ attribute: !1 })
+], x.prototype, "icons");
+v([
+  E("sfx-crop-rotate")
+], x.prototype, "rotateEl");
+v([
+  E("sfx-crop-shapes")
+], x.prototype, "shapesEl");
+const ee = b`
+  :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 re = Object.defineProperty, B = (i, t, e, o) => {
+  for (var r = void 0, a = i.length - 1, n; a >= 0; a--)
+    (n = i[a]) && (r = n(t, e, r) || r);
+  return r && re(t, e, r), r;
+};
+function K(i, t, e) {
+  return Math.log(i / t) / Math.log(e / t);
+}
+function nt(i, t, e) {
+  return t * Math.pow(e / t, i);
+}
+const G = 260, lt = 260, ct = 40, oe = 5, it = class it extends N {
+  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 = ut(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, o = t.shiftKey ? 0.05 : 0.01, r = K(this.value, this.min, this.max), a = R(r + e * o, 0, 1);
+          this.emit(nt(a, this.min, this.max));
+        }
+      }
+    }, this.onPointerDown = (t) => {
+      if (this.activePointer === null) {
+        this.clearAutoClose(), this.activePointer = t.pointerId, this.pointerStartX = t.clientX, this.pointerStartSlider = K(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, o = R(this.pointerStartSlider - e / G, 0, 1);
+      this.emit(nt(o, 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 = K(this.value, this.min, this.max), e = Math.round(this.value * 100), o = lt / 2 - t * G, r = [], a = 1 / ct;
+    for (let n = 0; n <= ct; n++)
+      r.push({ pos: n * a, major: n % oe === 0 });
+    return f`
+      <div
+        class="sfx-cr-zoom-root"
+        @click=${(n) => n.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}
+        >${k(w("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: ${lt}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(${o.toFixed(1)}px)`}>
+              ${r.map((n) => f`
+                <span
+                  class=${`sfx-cr-zoom-tick${n.major ? " sfx-cr-zoom-tick--major" : ""}`}
+                  style=${`left: ${(n.pos * G).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 = R(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
+    })));
+  }
+};
+it.styles = [j, ee];
+let S = it;
+B([
+  s({ type: Number })
+], S.prototype, "min");
+B([
+  s({ type: Number })
+], S.prototype, "max");
+B([
+  s({ type: Number })
+], S.prototype, "value");
+B([
+  s({ type: Boolean, reflect: !0 })
+], S.prototype, "open");
+B([
+  s({ attribute: !1 })
+], S.prototype, "icons");
+B([
+  M()
+], S.prototype, "dragging");
+A("sfx-crop-zoom", S);
+A("sfx-crop-rotate", $);
+A("sfx-crop-shapes", y);
+A("sfx-crop-canvas", D);
+A("sfx-crop-toolbar", x);
+A("sfx-crop", l);
+//# sourceMappingURL=define-t4Z6KaLY.js.map