@scaleflex/crop 2.0.1

package/dist/react/define-CVJd5aYk.cjs

@@ -0,0 +1,1545 @@
+"use strict";const p=require("lit"),s=require("lit/decorators.js"),rt=require("lit/directives/class-map.js"),u=require("./index-B-csHwK2.cjs"),k=require("lit/directives/unsafe-html.js");class O extends p.LitElement{}function M(i,t){typeof customElements>"u"||customElements.get(i)||customElements.define(i,t)}const ut=p.css`
+  :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 xt=Object.defineProperty,gt=(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&&xt(t,e,r),r};const Z=class Z extends O{render(){return p.html`<canvas part="canvas"></canvas>`}};Z.styles=[ut];let A=Z;gt([s.query("canvas")],A.prototype,"canvasEl");const q=["free","square","16:9","4:3","3:2","5:4","2:1","9:16","3:4","2:3","4:5","1:2"],bt=["free","square","circle","rounded-rect"];function F(i){return typeof i!="string"?!1:bt.includes(i)?!0:u.parseRatio(i)!==null}function at(i){if(i==null)return;if(Array.isArray(i))return i.filter(F);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(F)}catch{}return t.split(/[\s,]+/).filter(Boolean).filter(F)}}const mt=p.css`
+  :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);
+  }
+`,B=p.css`
+  .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;
+    }
+  }
+`,vt=p.css`
+  @keyframes sfx-cr-spin { to { transform: rotate(360deg); } }
+`,yt=p.css`
+  @keyframes sfx-cr-toolbar-enter {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+`;p.css`
+  @keyframes sfx-cr-zoom-enter {
+    from {
+      opacity: 0;
+      transform: translateX(-50%) translateY(12px);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(-50%) translateY(0);
+    }
+  }
+`;p.css`
+  @keyframes sfx-cr-card-in {
+    from {
+      opacity: 0;
+      transform: translateY(10px) scale(0.98);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+    }
+  }
+`;p.css`
+  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 wt=p.css`
+  :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 kt=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&&kt(t,e,r),r};const St={fromAttribute(i){return i===null?"interaction":i==="true"||i===""?!0:i==="false"?!1:"interaction"},toAttribute(i){return i===!0?"true":i===!1?"false":"interaction"}},K=class K extends O{constructor(){super(...arguments),this.src="",this.cropShape="16:9",this.theme="light",this.initialRotation=0,this.initialScale=1,this.minScale=.5,this.maxScale=5,this.minCropSize=20,this.handleSize=12,this.borderRadius=20,this.outputQuality=.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=[...q],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}}}async firstUpdated(){if(u.setupAria(this),!(this.canvasHost instanceof A))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=u.mergeConfig(this.buildConfig());this.controller=u.createCropController({canvas:t,host:this,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)}updated(t){if(!this.controller)return;const e={};let o=!1;for(const r of Ct)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 p.html`
+      <div class="sfx-cr-container" part="container">
+        <sfx-crop-canvas part="canvas-host"></sfx-crop-canvas>
+        ${this.showToolbar?p.html`
+          <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=${rt.classMap({"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=${rt.classMap({"sfx-cr-error":!0,"sfx-cr-error--visible":!!this.errorMessage})} part="error">
+          ${this.errorMessage??"Failed to load image"}
+        </div>
+      </div>
+    `}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)}ensure(){if(!this.controller)throw new Error('<sfx-crop> not connected — wait for "sfx-crop-ready" or firstUpdated().');return this.controller}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=v=>{if(!v||v==="none")return Number.POSITIVE_INFINITY;const I=N(v);return Number.isFinite(I)&&I>0?I:Number.POSITIVE_INFINITY},n=getComputedStyle(this);let f=a(n.maxWidth),d=a(n.maxHeight);const h=this.parentElement,b=h?getComputedStyle(h):null;if(h&&b&&(b.display==="none"||h.clientWidth===0)){this.style.width=o,this.style.height=r;return}const C=(()=>{if(!h||!b)return 0;const v=h.clientWidth;return Math.max(0,v-(N(b.paddingLeft)||0)-(N(b.paddingRight)||0))})();C>0?f=Math.min(f,C):Number.isFinite(f)||(f=window.innerWidth),Number.isFinite(d)||(d=window.innerHeight),this.style.width=o,this.style.height=r;const P=f,T=d;if(P<=0||T<=0)return;let H,L;if(this.variant==="fixed"){const v=this.fixedFrameAspect(P/T);let I=P,D=P/v;D>T&&(D=T,I=T*v),H=Math.floor(I),L=Math.floor(D)}else{const v=Math.min(P/t,T/e,1);H=Math.floor(t*v),L=Math.floor(e*v)}const et=N(o),ft=N(r);(Number.isNaN(et)||Math.abs(et-H)>=1||Math.abs(ft-L)>=1)&&(this.style.width=`${H}px`,this.style.height=`${L}px`)}fixedFrameAspect(t){const e=this.cropShape;if(e==="free")return t;if(e==="rounded-rect")return 1;const o=u.getAspectRatio(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:$t(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:at(this.availableShapes)??[...q],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}}};K.styles=[mt,B,vt,wt];let l=K;c([s.property({type:String,reflect:!0})],l.prototype,"src");c([s.property({type:String,attribute:"crop-shape",reflect:!0})],l.prototype,"cropShape");c([s.property({type:String,reflect:!0})],l.prototype,"theme");c([s.property({type:Number,attribute:"initial-rotation"})],l.prototype,"initialRotation");c([s.property({type:Number,attribute:"initial-scale"})],l.prototype,"initialScale");c([s.property({type:Number,attribute:"min-scale"})],l.prototype,"minScale");c([s.property({type:Number,attribute:"max-scale"})],l.prototype,"maxScale");c([s.property({type:Number,attribute:"min-crop-size"})],l.prototype,"minCropSize");c([s.property({type:Number,attribute:"handle-size"})],l.prototype,"handleSize");c([s.property({type:Number,attribute:"border-radius"})],l.prototype,"borderRadius");c([s.property({type:Number,attribute:"output-quality"})],l.prototype,"outputQuality");c([s.property({type:Number,attribute:"max-output-width"})],l.prototype,"maxOutputWidth");c([s.property({type:Number,attribute:"max-output-height"})],l.prototype,"maxOutputHeight");c([s.property({type:Number,attribute:"bleed-margin-size"})],l.prototype,"bleedMarginSize");c([s.property({type:Number,attribute:"animation-speed"})],l.prototype,"animationSpeed");c([s.property({type:String,attribute:"handle-color"})],l.prototype,"handleColor");c([s.property({type:String,attribute:"overlay-color"})],l.prototype,"overlayColor");c([s.property({type:String,attribute:"bleed-margin-color"})],l.prototype,"bleedMarginColor");c([s.property({type:String,attribute:"output-type"})],l.prototype,"outputType");c([s.property({type:String,attribute:"toolbar-position",reflect:!0})],l.prototype,"toolbarPosition");c([s.property({type:String,reflect:!0})],l.prototype,"variant");c([s.property({attribute:"show-grid",converter:St})],l.prototype,"showGrid");c([s.property({type:Boolean,attribute:"show-toolbar"})],l.prototype,"showToolbar");c([s.property({type:Boolean,attribute:"show-rotate-slider"})],l.prototype,"showRotateSlider");c([s.property({type:Boolean,attribute:"show-zoom-slider"})],l.prototype,"showZoomSlider");c([s.property({type:Boolean,attribute:"show-shape-selector"})],l.prototype,"showShapeSelector");c([s.property({type:Boolean,attribute:"show-rotate-button"})],l.prototype,"showRotateButton");c([s.property({type:Boolean,attribute:"show-flip-button"})],l.prototype,"showFlipButton");c([s.property({type:Boolean,attribute:"show-bleed-margin"})],l.prototype,"showBleedMargin");c([s.property({type:Boolean,attribute:"enable-animations"})],l.prototype,"enableAnimations");c([s.property({type:Boolean})],l.prototype,"keyboard");c([s.property({type:Boolean,attribute:"pinch-zoom"})],l.prototype,"pinchZoom");c([s.property({type:Boolean,attribute:"wheel-zoom"})],l.prototype,"wheelZoom");c([s.property({attribute:"available-shapes"})],l.prototype,"availableShapes");c([s.property({attribute:"initial-crop"})],l.prototype,"initialCrop");c([s.property({attribute:!1})],l.prototype,"icons");c([s.state()],l.prototype,"loading");c([s.state()],l.prototype,"errorMessage");c([s.query("sfx-crop-canvas")],l.prototype,"canvasHost");c([s.query("sfx-crop-toolbar")],l.prototype,"toolbarHost");c([s.query(".sfx-cr-container")],l.prototype,"containerEl");const Ct=["src","variant","cropShape","theme","minScale","maxScale","minCropSize","borderRadius","handleSize","handleColor","overlayColor","showGrid","showBleedMargin","bleedMarginSize","bleedMarginColor","enableAnimations","animationSpeed","keyboard","pinchZoom","wheelZoom"];function N(i){if(!i)return NaN;const t=parseFloat(i);return Number.isFinite(t)?/^-?\d*\.?\d+(?:px)?$/.test(i.trim())?t:NaN:NaN}function $t(i){try{return JSON.parse(i)}catch{return null}}const zt='<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>',Rt='<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>',nt='<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 2v14a2 2 0 0 0 2 2h14"/><path d="M18 22V8a2 2 0 0 0-2-2H2"/></svg>',Pt='<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>',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"><rect width="14" height="20" x="5" y="2" rx="2" ry="2"/><path d="M12 18h.01"/></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"><circle cx="12" cy="12" r="10"/></svg>',ct='<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="5"/></svg>',It='<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>',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="m6 9 6 6 6-6"/></svg>',Mt='<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>',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>',Nt='<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>',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"><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>',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="M3 12a9 9 0 1 0 3-6.7L3 8"/><path d="M3 3v5h5"/></svg>',g={rotateLeft:"",flipHorizontal:"",tilt:"",loupe:"",zoomIn:"",zoomOut:"",cropAspect:"",cropCustom:"",cropCircle:"",cropRoundedRect:"",orientLandscape:"",orientPortrait:"",chevronDown:"",reset:""};g.rotateLeft=zt;g.flipHorizontal=Rt;g.tilt=Mt;g.loupe=At;g.zoomIn=Et;g.zoomOut=Nt;g.cropAspect=It;g.cropCustom=nt;g.cropCircle=lt;g.cropRoundedRect=ct;g.orientLandscape=Pt;g.orientPortrait=Tt;g.chevronDown=Ot;g.reset=Bt;function y(i,t){const e=t==null?void 0:t[i];return typeof e=="string"&&e.length>0?e:g[i]}const _t=p.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; }
+  }
+`,Ht=72;function pt(i,t){let e=null,o=!1;const r=()=>{var b;let h=i;for(let z=0;z<6;z++){const C=h.getRootNode();if(!(C instanceof ShadowRoot))break;if(h=C.host,((b=h.tagName)==null?void 0:b.toLowerCase())==="sfx-crop")return h}return null},a=()=>{var C;const h=(C=i.shadowRoot)==null?void 0:C.querySelector(t),b=r();if(!h||!b)return;const z=b.getBoundingClientRect();h.style.setProperty("--sfx-cr-popover-left",`${z.left+z.width/2}px`),h.style.setProperty("--sfx-cr-popover-top",`${z.bottom-Ht}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 Lt=Object.defineProperty,_=(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&&Lt(t,e,r),r};const j=6,V=260,Y=1,jt=5,G=class G extends O{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=pt(this,".sfx-cr-rotate-popover"),this.onKeyDown=t=>{t.key==="ArrowLeft"?(t.preventDefault(),this.emit(u.clamp(this.value-(t.shiftKey?5:1),this.min,this.max))):t.key==="ArrowRight"&&(t.preventDefault(),this.emit(u.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,o=this.pointerStartValue-e/j;this.emit(u.clamp(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=V/2-(this.value-this.min)*j,o=V/j,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)),f=[];for(let d=Math.ceil(a/Y)*Y;d<=n;d+=Y)f.push({deg:d,major:d%jt===0});return p.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: ${V}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)`}>
+              ${f.map(d=>p.html`
+                <span
+                  class=${`sfx-cr-rotate-tick${d.major?" sfx-cr-rotate-tick--major":""}`}
+                  style=${`left: ${((d.deg-this.min)*j).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=u.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})))}};G.styles=[B,_t];let $=G;_([s.property({type:Number})],$.prototype,"value");_([s.property({type:Number})],$.prototype,"min");_([s.property({type:Number})],$.prototype,"max");_([s.property({attribute:!1})],$.prototype,"icons");_([s.state()],$.prototype,"dragging");const Dt=p.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 Ft=Object.defineProperty,R=(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&&Ft(t,e,r),r};function ht(i){let r,a;i>=1?(r=18,a=18/i):(a=18,r=18*i);const n=Math.max(0,r-1.5),f=Math.max(0,a-1.5),d=(22-n)/2,h=(22-f)/2,b=Math.min(3.5,Math.min(n,f)/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="${h.toFixed(2)}" width="${n.toFixed(2)}" height="${f.toFixed(2)}" rx="${b.toFixed(2)}"/></svg>`}function Vt(){return{free:{value:"free",label:"Custom",icon:nt,show:"both"},circle:{value:"circle",label:"Circle",icon:lt,show:"both"},"rounded-rect":{value:"rounded-rect",label:"Rounded",icon:ct,show:"both"},square:{value:"square",label:"1:1",icon:ht(1),show:"both"}}}const dt=Vt();function W(i){const t=dt[i];if(t)return t;const e=u.parseRatio(i);return e===null?null:{value:i,label:i,icon:ht(e),show:e>1?"landscape":e<1?"portrait":"both"}}const J=class J extends O{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=W(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=W(this.value)??dt.free;return p.html`
+      <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.unsafeHTML(y("cropAspect",this.icons))}</span>
+          <span class="sfx-cr-shape-trigger-label">${e.label}</span>
+          <span class="sfx-cr-shape-chevron">${k.unsafeHTML(y("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.unsafeHTML(y("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.unsafeHTML(y("orientPortrait",this.icons))}</button>
+          </div>
+          <div class="sfx-cr-shape-list" role="presentation">
+            ${t.map((o,r)=>p.html`
+              <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.unsafeHTML(this.optionIcon(o))}</span>
+                <span class="sfx-cr-shape-option-label">${o.label}</span>
+              </button>
+            `)}
+          </div>
+        </div>
+      </div>
+    `}optionIcon(t){switch(t.value){case"free":return y("cropCustom",this.icons);case"circle":return y("cropCircle",this.icons);case"rounded-rect":return y("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 o=W(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 f=u.getAspectRatio(e.value)??1,d=u.getAspectRatio(o.value)??1;return this.orientation==="portrait"?d-f:f-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()}};J.styles=[B,Dt];let w=J;R([s.property({type:String})],w.prototype,"value");R([s.property({attribute:!1})],w.prototype,"shapes");R([s.property({type:Boolean,reflect:!0})],w.prototype,"open");R([s.property({type:String,reflect:!0})],w.prototype,"variant");R([s.property({attribute:!1})],w.prototype,"icons");R([s.state()],w.prototype,"orientation");R([s.state()],w.prototype,"focusedIndex");const Yt=p.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 Wt=Object.defineProperty,m=(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&&Wt(t,e,r),r};const Q=class Q extends O{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=at(this.availableShapes)??[...q];return p.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"})}
+        >
+          ${k.unsafeHTML(y("reset",this.icons))}
+          <span>Reset</span>
+        </button>
+
+        ${t?p.html`
+          <div class="sfx-cr-toolbar-group">
+            ${this.showRotateButton?p.html`
+              <button
+                type="button"
+                class="sfx-cr-toolbar-btn"
+                aria-label="Rotate left 90°"
+                @click=${()=>this.emit({type:"rotate-left"})}
+              >${k.unsafeHTML(y("rotateLeft",this.icons))}</button>
+            `:null}
+            ${this.showFlipButton?p.html`
+              <button
+                type="button"
+                class="sfx-cr-toolbar-btn"
+                aria-label="Flip horizontal"
+                @click=${()=>this.emit({type:"flip-h"})}
+              >${k.unsafeHTML(y("flipHorizontal",this.icons))}</button>
+            `:null}
+          </div>
+        `:null}
+
+        ${this.showRotateSlider?p.html`
+          <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?p.html`
+          <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>
+    `}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}))}};Q.styles=[B,yt,Yt];let x=Q;m([s.property({type:String})],x.prototype,"shape");m([s.property({type:Number})],x.prototype,"rotation");m([s.property({type:Boolean,attribute:"show-rotate-button"})],x.prototype,"showRotateButton");m([s.property({type:Boolean,attribute:"show-flip-button"})],x.prototype,"showFlipButton");m([s.property({type:Boolean,attribute:"show-rotate-slider"})],x.prototype,"showRotateSlider");m([s.property({type:Boolean,attribute:"show-shape-selector"})],x.prototype,"showShapeSelector");m([s.property({type:String,attribute:"toolbar-position",reflect:!0})],x.prototype,"toolbarPosition");m([s.property({type:String,reflect:!0})],x.prototype,"variant");m([s.property({attribute:"available-shapes"})],x.prototype,"availableShapes");m([s.property({attribute:!1})],x.prototype,"icons");m([s.query("sfx-crop-rotate")],x.prototype,"rotateEl");m([s.query("sfx-crop-shapes")],x.prototype,"shapesEl");const Xt=p.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 Ut=Object.defineProperty,E=(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&&Ut(t,e,r),r};function X(i,t,e){return Math.log(i/t)/Math.log(e/t)}function ot(i,t,e){return t*Math.pow(e/t,i)}const U=260,st=260,it=40,qt=5,tt=class tt extends O{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=pt(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?.05:.01,r=X(this.value,this.min,this.max),a=u.clamp(r+e*o,0,1);this.emit(ot(a,this.min,this.max))}}},this.onPointerDown=t=>{if(this.activePointer===null){this.clearAutoClose(),this.activePointer=t.pointerId,this.pointerStartX=t.clientX,this.pointerStartSlider=X(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=u.clamp(this.pointerStartSlider-e/U,0,1);this.emit(ot(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=X(this.value,this.min,this.max),e=Math.round(this.value*100),o=st/2-t*U,r=[],a=1/it;for(let n=0;n<=it;n++)r.push({pos:n*a,major:n%qt===0});return p.html`
+      <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.unsafeHTML(y("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: ${st}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=>p.html`
+                <span
+                  class=${`sfx-cr-zoom-tick${n.major?" sfx-cr-zoom-tick--major":""}`}
+                  style=${`left: ${(n.pos*U).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=u.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})))}};tt.styles=[B,Xt];let S=tt;E([s.property({type:Number})],S.prototype,"min");E([s.property({type:Number})],S.prototype,"max");E([s.property({type:Number})],S.prototype,"value");E([s.property({type:Boolean,reflect:!0})],S.prototype,"open");E([s.property({attribute:!1})],S.prototype,"icons");E([s.state()],S.prototype,"dragging");M("sfx-crop-zoom",S);M("sfx-crop-rotate",$);M("sfx-crop-shapes",w);M("sfx-crop-canvas",A);M("sfx-crop-toolbar",x);M("sfx-crop",l);
+//# sourceMappingURL=define-CVJd5aYk.cjs.map