@scaleflex/crop 2.0.1

package/dist/define.cjs

@@ -0,0 +1,1194 @@
+"use strict";const p=require("./chunks/sfx-crop-1LGASewd.cjs"),c=require("lit"),a=require("lit/decorators.js"),m=require("lit/directives/unsafe-html.js"),U='<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>',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"><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>',N='<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>',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"><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>',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="14" height="20" x="5" y="2" rx="2" ry="2"/><path d="M12 18h.01"/></svg>',F='<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>',H='<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>',W='<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>',Z='<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>',J='<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>',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="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>',tt='<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>',et='<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>',ot='<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>',h={rotateLeft:"",flipHorizontal:"",tilt:"",loupe:"",zoomIn:"",zoomOut:"",cropAspect:"",cropCustom:"",cropCircle:"",cropRoundedRect:"",orientLandscape:"",orientPortrait:"",chevronDown:"",reset:""};h.rotateLeft=U;h.flipHorizontal=q;h.tilt=J;h.loupe=et;h.zoomIn=Q;h.zoomOut=tt;h.cropAspect=W;h.cropCustom=N;h.cropCircle=F;h.cropRoundedRect=H;h.orientLandscape=K;h.orientPortrait=G;h.chevronDown=Z;h.reset=ot;function u(n,t){const e=t==null?void 0:t[n];return typeof e=="string"&&e.length>0?e:h[n]}const rt=c.css`
+  :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; }
+  }
+`,it=72;function V(n,t){let e=null,r=!1;const o=()=>{var y;let x=n;for(let C=0;C<6;C++){const z=x.getRootNode();if(!(z instanceof ShadowRoot))break;if(x=z.host,((y=x.tagName)==null?void 0:y.toLowerCase())==="sfx-crop")return x}return null},i=()=>{var z;const x=(z=n.shadowRoot)==null?void 0:z.querySelector(t),y=o();if(!x||!y)return;const C=y.getBoundingClientRect();x.style.setProperty("--sfx-cr-popover-left",`${C.left+C.width/2}px`),x.style.setProperty("--sfx-cr-popover-top",`${C.bottom-it}px`)},s=()=>i();return{start:()=>{if(r)return;r=!0,i(),window.addEventListener("resize",s),window.addEventListener("scroll",s,!0);const x=o();x&&typeof ResizeObserver<"u"&&(e=new ResizeObserver(()=>i()),e.observe(x))},stop:()=>{r&&(r=!1,window.removeEventListener("resize",s),window.removeEventListener("scroll",s,!0),e==null||e.disconnect(),e=null)},update:i}}var st=Object.defineProperty,P=(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&&st(t,e,o),o};const S=6,T=260,R=1,nt=5,D=class D extends p.SfxCropBaseElement{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=V(this,".sfx-cr-rotate-popover"),this.onKeyDown=t=>{t.key==="ArrowLeft"?(t.preventDefault(),this.emit(p.clamp(this.value-(t.shiftKey?5:1),this.min,this.max))):t.key==="ArrowRight"&&(t.preventDefault(),this.emit(p.clamp(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/S;this.emit(p.clamp(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=T/2-(this.value-this.min)*S,r=T/S,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)),g=[];for(let d=Math.ceil(i/R)*R;d<=s;d+=R)g.push({deg:d,major:d%nt===0});return c.html`
+      <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: ${T}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)`}>
+              ${g.map(d=>c.html`
+                <span
+                  class=${`sfx-cr-rotate-tick${d.major?" sfx-cr-rotate-tick--major":""}`}
+                  style=${`left: ${((d.deg-this.min)*S).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>
+    `}setValue(t){this.value=p.clamp(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})))}};D.styles=[p.baseStyles,rt];let w=D;P([a.property({type:Number})],w.prototype,"value");P([a.property({type:Number})],w.prototype,"min");P([a.property({type:Number})],w.prototype,"max");P([a.property({attribute:!1})],w.prototype,"icons");P([a.state()],w.prototype,"dragging");const at=c.css`
+  :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 pt=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&&pt(t,e,o),o};function X(n){let o,i;n>=1?(o=18,i=18/n):(i=18,o=18*n);const s=Math.max(0,o-1.5),g=Math.max(0,i-1.5),d=(22-s)/2,x=(22-g)/2,y=Math.min(3.5,Math.min(s,g)/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="${d.toFixed(2)}" y="${x.toFixed(2)}" width="${s.toFixed(2)}" height="${g.toFixed(2)}" rx="${y.toFixed(2)}"/></svg>`}function ct(){return{free:{value:"free",label:"Custom",icon:N,show:"both"},circle:{value:"circle",label:"Circle",icon:F,show:"both"},"rounded-rect":{value:"rounded-rect",label:"Rounded",icon:H,show:"both"},square:{value:"square",label:"1:1",icon:X(1),show:"both"}}}const Y=ct();function O(n){const t=Y[n];if(t)return t;const e=p.parseRatio(n);return e===null?null:{value:n,label:n,icon:X(e),show:e>1?"landscape":e<1?"portrait":"both"}}const M=class M extends p.SfxCropBaseElement{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=O(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=O(this.value)??Y.free;return c.html`
+      <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">${m.unsafeHTML(u("cropAspect",this.icons))}</span>
+          <span class="sfx-cr-shape-trigger-label">${e.label}</span>
+          <span class="sfx-cr-shape-chevron">${m.unsafeHTML(u("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")}
+            >${m.unsafeHTML(u("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")}
+            >${m.unsafeHTML(u("orientPortrait",this.icons))}</button>
+          </div>
+          <div class="sfx-cr-shape-list" role="presentation">
+            ${t.map((r,o)=>c.html`
+              <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">${m.unsafeHTML(this.optionIcon(r))}</span>
+                <span class="sfx-cr-shape-option-label">${r.label}</span>
+              </button>
+            `)}
+          </div>
+        </div>
+      </div>
+    `}optionIcon(t){switch(t.value){case"free":return u("cropCustom",this.icons);case"circle":return u("cropCircle",this.icons);case"rounded-rect":return u("cropRoundedRect",this.icons);default:return t.icon}}setValue(t){this.value=t}setOrientation(t){this.orientation!==t&&(this.orientation=t,this.focusedIndex=-1)}getVisibleOptions(){const t=[];for(const e of this.shapes){const r=O(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 g=p.getAspectRatio(e.value)??1,d=p.getAspectRatio(r.value)??1;return this.orientation==="portrait"?d-g:g-d})}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()}};M.styles=[p.baseStyles,at];let v=M;k([a.property({type:String})],v.prototype,"value");k([a.property({attribute:!1})],v.prototype,"shapes");k([a.property({type:Boolean,reflect:!0})],v.prototype,"open");k([a.property({type:String,reflect:!0})],v.prototype,"variant");k([a.property({attribute:!1})],v.prototype,"icons");k([a.state()],v.prototype,"orientation");k([a.state()],v.prototype,"focusedIndex");const lt=c.css`
+  :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 ht=Object.defineProperty,f=(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&&ht(t,e,o),o};const _=class _ extends p.SfxCropBaseElement{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=p.parseAvailableShapes(this.availableShapes)??[...p.DEFAULT_SHAPES];return c.html`
+      <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"})}
+        >
+          ${m.unsafeHTML(u("reset",this.icons))}
+          <span>Reset</span>
+        </button>
+
+        ${t?c.html`
+          <div class="sfx-cr-toolbar-group">
+            ${this.showRotateButton?c.html`
+              <button
+                type="button"
+                class="sfx-cr-toolbar-btn"
+                aria-label="Rotate left 90°"
+                @click=${()=>this.emit({type:"rotate-left"})}
+              >${m.unsafeHTML(u("rotateLeft",this.icons))}</button>
+            `:null}
+            ${this.showFlipButton?c.html`
+              <button
+                type="button"
+                class="sfx-cr-toolbar-btn"
+                aria-label="Flip horizontal"
+                @click=${()=>this.emit({type:"flip-h"})}
+              >${m.unsafeHTML(u("flipHorizontal",this.icons))}</button>
+            `:null}
+          </div>
+        `:null}
+
+        ${this.showRotateSlider?c.html`
+          <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?c.html`
+          <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>
+    `}setRotationValue(t){var e;this.rotation=t,(e=this.rotateEl)==null||e.setValue(t)}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}))}};_.styles=[p.baseStyles,p.toolbarEnterKeyframes,lt];let l=_;f([a.property({type:String})],l.prototype,"shape");f([a.property({type:Number})],l.prototype,"rotation");f([a.property({type:Boolean,attribute:"show-rotate-button"})],l.prototype,"showRotateButton");f([a.property({type:Boolean,attribute:"show-flip-button"})],l.prototype,"showFlipButton");f([a.property({type:Boolean,attribute:"show-rotate-slider"})],l.prototype,"showRotateSlider");f([a.property({type:Boolean,attribute:"show-shape-selector"})],l.prototype,"showShapeSelector");f([a.property({type:String,attribute:"toolbar-position",reflect:!0})],l.prototype,"toolbarPosition");f([a.property({type:String,reflect:!0})],l.prototype,"variant");f([a.property({attribute:"available-shapes"})],l.prototype,"availableShapes");f([a.property({attribute:!1})],l.prototype,"icons");f([a.query("sfx-crop-rotate")],l.prototype,"rotateEl");f([a.query("sfx-crop-shapes")],l.prototype,"shapesEl");const dt=c.css`
+  :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 xt=Object.defineProperty,$=(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&&xt(t,e,o),o};function I(n,t,e){return Math.log(n/t)/Math.log(e/t)}function A(n,t,e){return t*Math.pow(e/t,n)}const E=260,L=260,B=40,ft=5,j=class j extends p.SfxCropBaseElement{constructor(){super(...arguments),this.min=.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=V(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?.05:.01,o=I(this.value,this.min,this.max),i=p.clamp(o+e*r,0,1);this.emit(A(i,this.min,this.max))}}},this.onPointerDown=t=>{if(this.activePointer===null){this.clearAutoClose(),this.activePointer=t.pointerId,this.pointerStartX=t.clientX,this.pointerStartSlider=I(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=p.clamp(this.pointerStartSlider-e/E,0,1);this.emit(A(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=I(this.value,this.min,this.max),e=Math.round(this.value*100),r=L/2-t*E,o=[],i=1/B;for(let s=0;s<=B;s++)o.push({pos:s*i,major:s%ft===0});return c.html`
+      <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}
+        >${m.unsafeHTML(u("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: ${L}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=>c.html`
+                <span
+                  class=${`sfx-cr-zoom-tick${s.major?" sfx-cr-zoom-tick--major":""}`}
+                  style=${`left: ${(s.pos*E).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>
+    `}setValue(t){this.value=p.clamp(t,this.min,this.max)}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})))}};j.styles=[p.baseStyles,dt];let b=j;$([a.property({type:Number})],b.prototype,"min");$([a.property({type:Number})],b.prototype,"max");$([a.property({type:Number})],b.prototype,"value");$([a.property({type:Boolean,reflect:!0})],b.prototype,"open");$([a.property({attribute:!1})],b.prototype,"icons");$([a.state()],b.prototype,"dragging");p.safeDefine("sfx-crop-zoom",b);p.safeDefine("sfx-crop-rotate",w);p.safeDefine("sfx-crop-shapes",v);p.safeDefine("sfx-crop-canvas",p.SfxCropCanvasElement);p.safeDefine("sfx-crop-toolbar",l);p.safeDefine("sfx-crop",p.SfxCropElement);
+//# sourceMappingURL=define.cjs.map