@cardstack/boxel-cli 0.10.0 → 0.10.1-unstable.0

package/bundled-realms/pretui/components/zoomable-frame.usage.gts

@@ -0,0 +1,175 @@
+// Pretui — ZoomableFrame usage page.
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { FreestyleUsage } from './freestyle-usage';
+import { ZoomableFrame } from './zoomable-frame';
+
+// ── ZoomableFrame ────────────────────────────────────────────────────────
+export class ZoomableFrameUsage extends Component {
+  @tracked scale = 1;
+
+  onScaleChange = (scale: number) => {
+    this.scale = scale;
+  };
+
+  get percent(): string {
+    return Math.round(this.scale * 100) + '%';
+  }
+
+  get usage(): string {
+    return [
+      "<ZoomableFrame @label='Warehouse floor plan'>",
+      '  <img src={{this.planUrl}} alt="" />',
+      '</ZoomableFrame>',
+    ].join('\n');
+  }
+
+  <template>
+    <FreestyleUsage
+      @name='ZoomableFrame'
+      @description='A zoom-and-pan viewport around ordinary DOM — a card, a chart, an image, a plan. Every pointer gesture has a keyboard twin: plus and minus zoom, the arrows pan, shift coarsens the step and zero resets. Pinch works the same on a trackpad, a pen and two thumbs, through one unified pointer path rather than a separate touch branch.'
+      @source={{this.usage}}
+      @viewportMode='wide'
+    >
+      <:example>
+        <div class='frame-stage'>
+          <ZoomableFrame
+            @label='Warehouse floor plan'
+            @onScaleChange={{this.onScaleChange}}
+          >
+            <div class='frame-plan'>
+              <div class='frame-bay' data-bay='A'>Bay A</div>
+              <div class='frame-bay' data-bay='B'>Bay B</div>
+              <div class='frame-bay' data-bay='C'>Bay C</div>
+              <div class='frame-bay' data-bay='D'>Bay D</div>
+              <div class='frame-dock'>Dock</div>
+            </div>
+          </ZoomableFrame>
+          <p class='frame-note'>Reported scale
+            <strong>{{this.percent}}</strong>. Click the frame and press
+            <kbd>+</kbd>,
+            <kbd>-</kbd>, the arrow keys or
+            <kbd>0</kbd>; or drag, or pinch.</p>
+        </div>
+      </:example>
+      <:api as |Args|>
+        <Args.String
+          @name='label'
+          @description='Accessible name for the viewport. Required in practice — it is the only thing a screen reader can say about a pannable box.'
+        />
+        <Args.Number
+          @name='min'
+          @description='Smallest scale.'
+          @defaultValue={{0.25}}
+        />
+        <Args.Number
+          @name='max'
+          @description='Largest scale.'
+          @defaultValue={{4}}
+        />
+        <Args.Number
+          @name='step'
+          @description='Multiplier per zoom step from a button or a key. Multiplicative rather than additive, so a step feels the same at 25% and at 400%.'
+          @defaultValue={{1.25}}
+        />
+        <Args.Number
+          @name='scale'
+          @description='Controlled scale. Omit for uncontrolled.'
+        />
+        <Args.Action
+          @name='onScaleChange'
+          @description='Fires with the next scale on every change — button, key, wheel or pinch.'
+        />
+        <Args.Bool
+          @name='hideToolbar'
+          @description='Hide the toolbar. The keyboard and pointer paths are unaffected, but the readout goes with it — only reach for this when the scale is displayed somewhere else.'
+          @defaultValue={{false}}
+        />
+      </:api>
+      <:cssVars as |Css|>
+        <Css.Basic
+          @name='pretui-frame-height'
+          @type='dimension'
+          @description='Viewport height.'
+          @defaultValue='360px'
+        />
+        <Css.Basic
+          @name='pretui-frame-ground'
+          @type='color'
+          @description='Colour behind the framed content.'
+          @defaultValue='var(--muted)'
+        />
+      </:cssVars>
+    </FreestyleUsage>
+
+    <style scoped>
+      .frame-stage {
+        display: grid;
+        gap: var(--space-3, 8px);
+      }
+      .frame-plan {
+        inline-size: 420px;
+        block-size: 260px;
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        grid-template-rows: 1fr 1fr auto;
+        gap: 6px;
+        padding: 10px;
+        border-radius: var(--radius-surface, 10px);
+        background: var(--card);
+        box-shadow: var(
+          --pretui-shadow-hairline,
+          0 0 0 1px var(--border)
+        );
+      }
+      .frame-bay {
+        display: grid;
+        place-items: center;
+        border-radius: var(--radius-control, 7px);
+        background: color-mix(in oklch, var(--chart-2) 12%, transparent);
+        font-size: var(--text-ui-sm, 11.5px);
+        font-weight: var(--weight-strong, 600);
+        color: var(--foreground);
+      }
+      .frame-bay[data-bay='C'],
+      .frame-bay[data-bay='D'] {
+        background: color-mix(in oklch, var(--chart-3) 12%, transparent);
+      }
+      .frame-dock {
+        grid-column: 1 / -1;
+        display: grid;
+        place-items: center;
+        padding-block: 8px;
+        border-radius: var(--radius-control, 7px);
+        background: color-mix(
+          in oklch,
+          var(--muted-foreground) 14%,
+          transparent
+        );
+        font-size: var(--text-ui-xs, 11px);
+        letter-spacing: var(--track-eyebrow, 0.08em);
+        text-transform: uppercase;
+        color: var(--muted-foreground);
+      }
+      .frame-note {
+        margin: 0;
+        font-size: var(--text-ui-xs, 11px);
+        color: var(--muted-foreground);
+      }
+      .frame-note kbd {
+        font-family: var(--font-mono);
+        padding: 1px 5px;
+        border-radius: 4px;
+        background: color-mix(
+          in oklch,
+          var(--foreground) 8%,
+          transparent
+        );
+      }
+    </style>
+  </template>
+}
+
+export const DEMOS_ZOOMABLE_FRAME: Record<string, unknown> = {
+  ZoomableFrame: ZoomableFrameUsage,
+};

package/bundled-realms/pretui/cropper/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright 2015-present Chen Fengyuan
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/bundled-realms/pretui/cropper/README.md

@@ -0,0 +1,92 @@
+# cropper/ — Cropper.js v2, vendored
+
+`index.js` is [Cropper.js](https://github.com/fengyuanchen/cropperjs) **2.1.1**
+bundled to a single self-contained ES module. v2 is a **Web Component** suite,
+not the v1 jQuery-era class: importing this module defines eight custom
+elements and you write them as plain tags in a `<template>`.
+
+## Provenance
+
+| | |
+|---|---|
+| **Source** | **npm**, `cropperjs@2.1.1`. |
+| **Commit SHA** | n/a — built from the published tarball, not a git tree. |
+| **Version** | `cropperjs@2.1.1`. It is a monorepo façade: the bundle also contains **`@cropper/element` 2.1.1**, **`@cropper/elements` 2.1.1** and **`@cropper/utils` 2.1.1**, all at the same version and all MIT under the same copyright. |
+| **Licence** | **`MIT`**, read from the package's own `LICENSE` file, copied here verbatim as `LICENSE`. Copyright 2015-present Chen Fengyuan. |
+
+## Exports
+
+```js
+import './cropper/index.js';                    // side effect: defines the elements
+import { CropperSelection } from './cropper/index.js';  // types/instanceof only
+```
+
+Elements defined on import:
+
+    cropper-canvas   cropper-image     cropper-selection  cropper-shade
+    cropper-handle   cropper-grid      cropper-crosshair  cropper-viewer
+
+Also exported: the element classes, the `ACTION_*` / `EVENT_*` constants, and
+the geometry helpers (`getAdjustedSizes`, `multiplyMatrices`, …).
+
+Built with:
+
+    esbuild cr.js --bundle --format=esm --minify --line-limit=500 \
+      --legal-comments=none --banner:js="<licence banner + the HTMLElement shim>" \
+      --outfile=index.js
+
+where `cr.js` is `export * from 'cropperjs';`.
+
+- 41 KB minified, **12 KB gzipped**
+- No bare specifier survives the bundle.
+
+## The one adaptation, stated rather than hidden
+
+**Cropper.js fails the import-under-Node test as published, and the banner is what
+fixes it.** Evaluating the plain bundle under Node throws
+`ReferenceError: HTMLElement is not defined` — every element class is
+`class … extends HTMLElement` at module scope, and unlike Media Chrome,
+Cropper.js ships no server-safe globals shim. Since the realm indexer evaluates
+modules outside a browser, that is a hard block, not a nuisance.
+
+The banner therefore prepends exactly one line:
+
+```js
+if (typeof globalThis.HTMLElement === "undefined") { globalThis.HTMLElement = class {}; }
+```
+
+One line is genuinely enough, and it is worth knowing why: Cropper computes
+`IS_BROWSER` from `typeof window !== 'undefined' && window.document !== undefined`,
+and `$define()` — the only thing that would call `customElements.define` — is a
+no-op when that is false. So under Node the classes are *declared* and nothing
+else happens. The shim is inert in a browser (guarded by `typeof`), and it does
+**not** fabricate a `window`, so `IS_BROWSER` stays honestly `false` outside a
+browser instead of being tricked into `true`. Verified: the exact file in this
+directory evaluates clean under `node --input-type=module`.
+
+If Cropper.js ever gains its own shim, delete the banner line and re-verify.
+
+## Four things to know before using it
+
+- **No stylesheet.** Every element emits its CSS inside its own shadow root, so
+  the CSS-import trap that PhotoSwipe has to work around does not arise. Theming crosses the shadow boundary through `theme-color`
+  attributes and `--theme-color`.
+- **Glimmer binds dynamic attributes through the property.** `movable={{''}}`
+  sets `el.movable = ''`, which is falsy, so the element silently stays
+  immovable. Bind Cropper's boolean attributes as `true | undefined` — this bit
+  the media territory once already and Cropper has a dozen of them
+  (`movable`, `resizable`, `rotatable`, `scalable`, `translatable`, `bordered`,
+  `covered`, `centered`, `plain`, `background`, `outlined`, `zoomable`).
+- **`cropper-selection` is the state.** Its `x/y/width/height` are in the
+  image's own coordinate space, it fires `change` with them in `event.detail`,
+  and `$toCanvas()` renders the crop to a `<canvas>` — that is the whole
+  export path, no server round trip.
+- **Its keyboard support is partial and Pretui adds the rest.**
+  `cropper-selection` handles arrow keys when focused, but has no modifier
+  step, no Home/End, no `role='slider'` semantics and no announced value.
+  `media-cropper.gts` supplies those on top rather than forking the library.
+
+## Audited counts in the bundle
+
+**0 `requestAnimationFrame`, 3 `setTimeout`, 0 `setInterval`, 0 `Date.now`,
+0 `Math.random`.** Cleanest of the four media libraries on this axis.

package/bundled-realms/pretui/cropper/index.js

@@ -0,0 +1,81 @@
+/*! Cropper.js 2.1.1 — SPDX-License-Identifier: MIT — Copyright 2015-present Chen Fengyuan. Full text in ./LICENSE. */
+if(typeof globalThis.HTMLElement==="undefined"){globalThis.HTMLElement=class{};}
+var ct=typeof window<"u"&&typeof window.document<"u",R=ct?window:{},gt=ct?"ontouchstart"in R.document.documentElement:!1,Et=ct?"PointerEvent"in R:!1,V="cropper",k=`${V}-canvas`,Ht=`${V}-crosshair`,Xt=`${V}-grid`,Yt=`${V}-handle`,M=`${V}-image`,y=`${V}-selection`,Vt=`${V}-shade`,Ut=`${V}-viewer`,Q="select",ut="move",H="scale",lt="rotate",tt="transform",D="none",bt="n-resize",Ct="e-resize",Tt="s-resize",vt="w-resize",et="ne-resize",it="nw-resize",st="se-resize",nt="sw-resize",jt="action",de=gt?"to\
+uchend touchcancel":"mouseup",ue=gt?"touchmove":"mousemove",fe=gt?"touchstart":"mousedown",At=Et?"pointerdown":fe,St=Et?"pointermove":ue,Nt=Et?"pointerup pointercancel":de,wt="error",Ot="keydown",U="load",yt="resize",Rt="wheel",X="action",z="actionend",Zt="actionmove",W="actionstart",L="change",dt="transform";function ot(l){return typeof l=="string"}var _t=Number.isNaN||R.isNaN;function f(l){return typeof l=="number"&&!_t(l)}function O(l){return f(l)&&l>0&&l<1/0}function Ft(l){return typeof l>"u"}
+function It(l){return typeof l=="object"&&l!==null}var{hasOwnProperty:$e}=Object.prototype;function at(l){if(!It(l))return!1;try{let{constructor:t}=l,{prototype:e}=t;return t&&e&&$e.call(e,"isPrototypeOf")}catch{return!1}}function rt(l){return typeof l=="function"}function Y(l){return typeof l=="object"&&l!==null&&l.nodeType===1}var pe=/([a-z\d])([A-Z])/g;function kt(l){return String(l).replace(pe,"$1-$2").toLowerCase()}var me=/-[A-z\d]/g;function Pt(l){return l.replace(me,t=>t.slice(1).toUpperCase())}
+var Bt=/\s\s*/;function E(l,t,e,i){t.trim().split(Bt).forEach(s=>{l.removeEventListener(s,e,i)})}function C(l,t,e,i){t.trim().split(Bt).forEach(s=>{l.addEventListener(s,e,i)})}function xt(l,t,e,i){C(l,t,e,Object.assign(Object.assign({},i),{once:!0}))}var ge={bubbles:!0,cancelable:!0,composed:!0};function Gt(l,t,e,i){return l.dispatchEvent(new CustomEvent(t,Object.assign(Object.assign(Object.assign({},ge),{detail:e}),i)))}function qt(l){return typeof l.composedPath=="function"&&l.composedPath().find(
+Y)||l.target}var Wt=Promise.resolve();function Kt(l,t){return t?Wt.then(l?t.bind(l):t):Wt}function ft(l){let t=l.getRootNode();switch(t.nodeType){case 1:return t.ownerDocument;case 9:return t;case 11:return t}return null}function Mt(l){let{documentElement:t}=l.ownerDocument,e=l.getBoundingClientRect();return{left:e.left+(R.pageXOffset-t.clientLeft),top:e.top+(R.pageYOffset-t.clientTop)}}var Ee=/deg|g?rad|turn$/i;function $t(l){let t=parseFloat(l)||0;if(t!==0){let[e="rad"]=String(l).match(Ee)||[];
+switch(e.toLowerCase()){case"deg":return t/360*(Math.PI*2);case"grad":return t/400*(Math.PI*2);case"turn":return t*(Math.PI*2)}}return t}var Lt="contain",be="cover";function ht(l,t=Lt){let{aspectRatio:e}=l,{width:i,height:s}=l,n=O(i),h=O(s);if(n&&h){let r=s*e;t===Lt&&r>i||t===be&&r<i?s=i/e:i=s*e}else n?s=i/e:h&&(i=s*e);return{width:i,height:s}}function Dt(l,...t){if(t.length===0)return l;let[e,i,s,n,h,r]=l,[c,a,o,d,$,p]=t[0];return l=[e*c+s*a,i*c+n*a,e*o+s*d,i*o+n*d,e*$+s*p+h,i*$+n*p+r],Dt(l,...t.
+slice(1))}var Ce=":host([hidden]){display:none!important}",Te=/left|top|width|height/i,Jt="open",pt=new WeakMap,mt=new WeakMap,Qt=new Map,te=R.document&&Array.isArray(R.document.adoptedStyleSheets)&&"replaceSync"in R.CSSStyleSheet.prototype,A=class extends HTMLElement{get $sharedStyle(){return`${this.themeColor?`:host{--theme-color: ${this.themeColor};}`:""}${Ce}`}constructor(){var t,e;super(),this.shadowRootMode=Jt,this.slottable=!0;let i=(e=(t=Object.getPrototypeOf(this))===null||t===void 0?void 0:t.constructor)===
+null||e===void 0?void 0:e.$name;i&&Qt.set(i,this.tagName.toLowerCase())}static get observedAttributes(){return["shadow-root-mode","slottable","theme-color"]}attributeChangedCallback(t,e,i){if(Object.is(i,e))return;let s=Pt(t),n=this[s],h=i;switch(typeof n){case"boolean":h=i!==null&&i!=="false";break;case"number":h=Number(i);break}if(this[s]=h,t==="theme-color"){let r=mt.get(this),c=this.$sharedStyle;r&&c&&(te?r.replaceSync(c):r.textContent=c)}}$propertyChangedCallback(t,e,i){if(!Object.is(i,e))switch(t=
+kt(t),typeof i){case"boolean":i===!0?this.hasAttribute(t)||this.setAttribute(t,""):this.removeAttribute(t);break;case"number":_t(i)?i="":i=String(i);default:i?this.getAttribute(t)!==i&&this.setAttribute(t,i):this.removeAttribute(t)}}connectedCallback(){Object.getPrototypeOf(this).constructor.observedAttributes.forEach(e=>{let i=Pt(e),s=this[i];Ft(s)||this.$propertyChangedCallback(i,void 0,s),Object.defineProperty(this,i,{enumerable:!0,configurable:!0,get(){return s},set(n){let h=s;s=n,this.$propertyChangedCallback(
+i,h,n)}})});let t=this.shadowRoot||this.attachShadow({mode:this.shadowRootMode||Jt});if(pt.set(this,t),mt.set(this,this.$addStyles(this.$sharedStyle)),this.$style&&this.$addStyles(this.$style),this.$template){let e=document.createElement("template");e.innerHTML=this.$template,t.appendChild(e.content)}if(this.slottable){let e=document.createElement("slot");t.appendChild(e)}}disconnectedCallback(){mt.has(this)&&mt.delete(this),pt.has(this)&&pt.delete(this)}$getTagNameOf(t){var e;return(e=Qt.get(t))!==
+null&&e!==void 0?e:t}$setStyles(t){return Object.keys(t).forEach(e=>{let i=t[e];f(i)&&(i!==0&&Te.test(e)?i=`${i}px`:i=String(i)),this.style[e]=i}),this}$getShadowRoot(){return this.shadowRoot||pt.get(this)}$addStyles(t){let e,i=this.$getShadowRoot();return te?(e=new CSSStyleSheet,e.replaceSync(t),i.adoptedStyleSheets=i.adoptedStyleSheets.concat(e)):(e=document.createElement("style"),e.textContent=t,i.appendChild(e)),e}$emit(t,e,i){return Gt(this,t,e,i)}$nextTick(t){return Kt(this,t)}static $define(t,e){
+It(t)&&(e=t,t=""),t||(t=this.$name||this.name),t=kt(t),ct&&R.customElements&&!R.customElements.get(t)&&customElements.define(t,this,e)}};A.$version="2.1.1";var ve=':host{display:block;min-height:100px;min-width:200px;overflow:hidden;position:relative;touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}:host([background]){background-color:#fff;background-image:repeating-linear-gradient(45deg,#ccc 25%,transparent 0,transparent 75%,#ccc 0,#ccc),repeating-linear-gradient(45deg,#ccc 25%,transparent 0,transparent 75%,#ccc 0,#ccc);background-image:repeating-conic-gradient(#ccc 0 25%,#fff 0 50%);back\
+ground-position:0 0,.5rem .5rem;background-size:1rem 1rem}:host([disabled]){pointer-events:none}:host([disabled]):after{bottom:0;content:"";cursor:not-allowed;display:block;left:0;pointer-events:none;position:absolute;right:0;top:0}',j=class extends A{constructor(){super(...arguments),this.$onPointerDown=null,this.$onPointerMove=null,this.$onPointerUp=null,this.$onWheel=null,this.$wheeling=!1,this.$pointers=new Map,this.$style=ve,this.$action=D,this.background=!1,this.disabled=!1,this.scaleStep=
+.1,this.themeColor="#39f"}static get observedAttributes(){return super.observedAttributes.concat(["background","disabled","scale-step"])}connectedCallback(){super.connectedCallback(),this.disabled||this.$bind()}disconnectedCallback(){this.disabled||this.$unbind(),super.disconnectedCallback()}$propertyChangedCallback(t,e,i){Object.is(i,e)||(super.$propertyChangedCallback(t,e,i),t==="disabled"&&(i?this.$unbind():this.$bind()))}$bind(){this.$onPointerDown||(this.$onPointerDown=this.$handlePointerDown.
+bind(this),C(this,At,this.$onPointerDown)),this.$onPointerMove||(this.$onPointerMove=this.$handlePointerMove.bind(this),C(this.ownerDocument,St,this.$onPointerMove)),this.$onPointerUp||(this.$onPointerUp=this.$handlePointerUp.bind(this),C(this.ownerDocument,Nt,this.$onPointerUp)),this.$onWheel||(this.$onWheel=this.$handleWheel.bind(this),C(this,Rt,this.$onWheel,{passive:!1,capture:!0}))}$unbind(){this.$onPointerDown&&(E(this,At,this.$onPointerDown),this.$onPointerDown=null),this.$onPointerMove&&
+(E(this.ownerDocument,St,this.$onPointerMove),this.$onPointerMove=null),this.$onPointerUp&&(E(this.ownerDocument,Nt,this.$onPointerUp),this.$onPointerUp=null),this.$onWheel&&(E(this,Rt,this.$onWheel,{capture:!0}),this.$onWheel=null)}$handlePointerDown(t){let{buttons:e,button:i,type:s}=t;if(this.disabled||(s==="pointerdown"&&t.pointerType==="mouse"||s==="mousedown")&&(f(e)&&e!==1||f(i)&&i!==0||t.ctrlKey))return;let{$pointers:n}=this,h="";if(t.changedTouches)Array.from(t.changedTouches).forEach(({
+identifier:r,pageX:c,pageY:a})=>{n.set(r,{startX:c,startY:a,endX:c,endY:a})});else{let{pointerId:r=0,pageX:c,pageY:a}=t;n.set(r,{startX:c,startY:a,endX:c,endY:a})}n.size>1?h=tt:Y(t.target)&&(h=t.target.action||t.target.getAttribute(jt)||""),this.$emit(W,{action:h,relatedEvent:t})!==!1&&(t.preventDefault(),this.$action=h,this.style.willChange="transform")}$handlePointerMove(t){let{$action:e,$pointers:i}=this;if(this.disabled||e===D||i.size===0||this.$emit(Zt,{action:e,relatedEvent:t})===!1)return;
+if(t.preventDefault(),t.changedTouches)Array.from(t.changedTouches).forEach(({identifier:n,pageX:h,pageY:r})=>{let c=i.get(n);c&&Object.assign(c,{endX:h,endY:r})});else{let{pointerId:n=0,pageX:h,pageY:r}=t,c=i.get(n);c&&Object.assign(c,{endX:h,endY:r})}let s={action:e,relatedEvent:t};if(e===tt){let n=new Map(i),h=0,r=0,c=0,a=0,o=t.pageX,d=t.pageY;i.forEach((u,N)=>{n.delete(N),n.forEach(v=>{let m=v.startX-u.startX,T=v.startY-u.startY,g=v.endX-u.endX,b=v.endY-u.endY,S=0,w=0,_=0,I=0;if(m===0?T<0?_=
+Math.PI*2:T>0&&(_=Math.PI):m>0?_=Math.PI/2+Math.atan(T/m):m<0&&(_=Math.PI*1.5+Math.atan(T/m)),g===0?b<0?I=Math.PI*2:b>0&&(I=Math.PI):g>0?I=Math.PI/2+Math.atan(b/g):g<0&&(I=Math.PI*1.5+Math.atan(b/g)),I>0||_>0){let P=I-_,x=Math.abs(P);x>h&&(h=x,c=P,o=(u.startX+v.startX)/2,d=(u.startY+v.startY)/2)}if(m=Math.abs(m),T=Math.abs(T),g=Math.abs(g),b=Math.abs(b),m>0&&T>0?S=Math.sqrt(m*m+T*T):m>0?S=m:T>0&&(S=T),g>0&&b>0?w=Math.sqrt(g*g+b*b):g>0?w=g:b>0&&(w=b),S>0&&w>0){let P=(w-S)/S,x=Math.abs(P);x>r&&(r=
+x,a=P,o=(u.startX+v.startX)/2,d=(u.startY+v.startY)/2)}})});let $=h>0,p=r>0;$&&p?(s.rotate=c,s.scale=a,s.centerX=o,s.centerY=d):$?(s.action=lt,s.rotate=c,s.centerX=o,s.centerY=d):p?(s.action=H,s.scale=a,s.centerX=o,s.centerY=d):s.action=D}else{let[n]=Array.from(i.values());Object.assign(s,n)}i.forEach(n=>{n.startX=n.endX,n.startY=n.endY}),s.action!==D&&this.$emit(X,s,{cancelable:!1})}$handlePointerUp(t){let{$action:e,$pointers:i}=this;if(!(this.disabled||e===D)&&this.$emit(z,{action:e,relatedEvent:t})!==
+!1){if(t.preventDefault(),t.changedTouches)Array.from(t.changedTouches).forEach(({identifier:s})=>{i.delete(s)});else{let{pointerId:s=0}=t;i.delete(s)}i.size===0&&(this.style.willChange="",this.$action=D)}}$handleWheel(t){if(this.disabled||(t.preventDefault(),this.$wheeling))return;this.$wheeling=!0,setTimeout(()=>{this.$wheeling=!1},50);let i=(t.deltaY>0?-1:1)*this.scaleStep;this.$emit(X,{action:H,scale:i,relatedEvent:t},{cancelable:!1})}$setAction(t){return ot(t)&&(this.$action=t),this}$toCanvas(t){
+return new Promise((e,i)=>{if(!this.isConnected){i(new Error("The current element is not connected to the DOM."));return}let s=document.createElement("canvas"),n=this.offsetWidth,h=this.offsetHeight,r=1;at(t)&&(O(t.width)||O(t.height))&&({width:n,height:h}=ht({aspectRatio:n/h,width:t.width,height:t.height}),r=n/this.offsetWidth),s.width=n,s.height=h;let c=this.querySelector(this.$getTagNameOf(M));if(!c){e(s);return}c.$ready().then(a=>{let o=s.getContext("2d");if(o){let[d,$,p,u,N,v]=c.$getTransform(),
+m=N,T=v,g=a.naturalWidth,b=a.naturalHeight;r!==1&&(m*=r,T*=r,g*=r,b*=r);let S=g/2,w=b/2;o.fillStyle="transparent",o.fillRect(0,0,n,h),at(t)&&rt(t.beforeDraw)&&t.beforeDraw.call(this,o,s),o.save(),o.translate(S,w),o.transform(d,$,p,u,m,T),o.translate(-S,-w),o.drawImage(a,0,0,g,b),o.restore()}e(s)}).catch(i)})}};j.$name=k;j.$version="2.1.1";var Ae=":host{display:inline-block}img{display:block;height:100%;max-height:none!important;max-width:none!important;min-height:0!important;min-width:0!important;width:100%}",ee=new WeakMap,ie=["alt","crossorigin","decoding","elementtiming","fetchpriority","loading","referrerpolicy","sizes","src","srcset"],Z=class extends A{constructor(){super(...arguments),this.$isReady=!1,this.$matrix=[1,0,0,1,0,0],this.$onLoad=null,this.$onCanvasAction=null,this.$onCanvasActionEnd=null,this.$onCanvasActionStart=
+null,this.$actionStartTarget=null,this.$style=Ae,this.$image=new Image,this.initialCenterSize="contain",this.rotatable=!1,this.scalable=!1,this.skewable=!1,this.slottable=!1,this.translatable=!1,this.alt="",this.crossorigin="",this.decoding="",this.elementtiming="",this.fetchpriority="",this.loading="",this.referrerpolicy="",this.sizes="",this.src="",this.srcset=""}set $canvas(t){ee.set(this,t)}get $canvas(){return ee.get(this)}static get observedAttributes(){return super.observedAttributes.concat(
+ie,["initial-center-size","rotatable","scalable","skewable","translatable"])}attributeChangedCallback(t,e,i){Object.is(i,e)||(super.attributeChangedCallback(t,e,i),ie.includes(t)&&this.$image.setAttribute(t,i))}$propertyChangedCallback(t,e,i){if(!Object.is(i,e))switch(super.$propertyChangedCallback(t,e,i),t){case"initialCenterSize":this.$nextTick(()=>{this.$center(i)});break;case"src":this.$isReady=!1;break}}connectedCallback(){super.connectedCallback();let{$image:t}=this,e=this.closest(this.$getTagNameOf(
+k));e&&(this.$canvas=e,this.$setStyles({display:"block",position:"absolute"}),this.$onCanvasActionStart=i=>{var s,n;this.$actionStartTarget=(n=(s=i.detail)===null||s===void 0?void 0:s.relatedEvent)===null||n===void 0?void 0:n.target},this.$onCanvasActionEnd=()=>{this.$actionStartTarget=null},this.$onCanvasAction=this.$handleAction.bind(this),C(e,W,this.$onCanvasActionStart),C(e,z,this.$onCanvasActionEnd),C(e,X,this.$onCanvasAction)),this.$onLoad=this.$handleLoad.bind(this),C(t,U,this.$onLoad),this.
+$getShadowRoot().appendChild(t)}disconnectedCallback(){let{$image:t,$canvas:e}=this;e&&(this.$onCanvasActionStart&&(E(e,W,this.$onCanvasActionStart),this.$onCanvasActionStart=null),this.$onCanvasActionEnd&&(E(e,z,this.$onCanvasActionEnd),this.$onCanvasActionEnd=null),this.$onCanvasAction&&(E(e,X,this.$onCanvasAction),this.$onCanvasAction=null)),t&&this.$onLoad&&(E(t,U,this.$onLoad),this.$onLoad=null),this.$getShadowRoot().removeChild(t),super.disconnectedCallback()}$handleLoad(){let{$image:t}=this;
+this.$setStyles({width:t.naturalWidth,height:t.naturalHeight}),this.$canvas&&this.$center(this.initialCenterSize),this.$isReady=!0}$handleAction(t){if(this.hidden||!(this.rotatable||this.scalable||this.translatable))return;let{$canvas:e}=this,{detail:i}=t;if(i){let{relatedEvent:s}=i,{action:n}=i;switch(n===tt&&(!this.rotatable||!this.scalable)&&(this.rotatable?n=lt:this.scalable?n=H:n=D),n){case ut:if(this.translatable){let h=null;s&&(h=s.target.closest(this.$getTagNameOf(y))),h||(h=e.querySelector(
+this.$getTagNameOf(y))),h&&h.multiple&&!h.active&&(h=e.querySelector(`${this.$getTagNameOf(y)}[active]`)),(!h||h.hidden||!h.movable||h.dynamic||!(this.$actionStartTarget&&h.contains(this.$actionStartTarget)))&&this.$move(i.endX-i.startX,i.endY-i.startY)}break;case lt:if(this.rotatable)if(s){let{x:h,y:r}=this.getBoundingClientRect();this.$rotate(i.rotate,s.clientX-h,s.clientY-r)}else this.$rotate(i.rotate);break;case H:if(this.scalable)if(s){let h=s.target.closest(this.$getTagNameOf(y));if(!h||!h.
+zoomable||h.zoomable&&h.dynamic){let{x:r,y:c}=this.getBoundingClientRect();this.$zoom(i.scale,s.clientX-r,s.clientY-c)}}else this.$zoom(i.scale);break;case tt:if(this.rotatable&&this.scalable){let{rotate:h}=i,{scale:r}=i;r<0?r=1/(1-r):r+=1;let c=Math.cos(h),a=Math.sin(h),[o,d,$,p]=[c*r,a*r,-a*r,c*r];if(s){let u=this.getBoundingClientRect(),N=s.clientX-u.x,v=s.clientY-u.y,[m,T,g,b]=this.$matrix,S=u.width/2,w=u.height/2,_=N-S,I=v-w,P=(_*b-g*I)/(m*b-g*T),x=(I*m-T*_)/(m*b-g*T);this.$transform(o,d,$,
+p,P*(1-o)+x*$,x*(1-p)+P*d)}else this.$transform(o,d,$,p,0,0)}break}}}$ready(t){let{$image:e}=this,i=new Promise((s,n)=>{let h=new Error("Failed to load the image source");if(e.complete)e.naturalWidth>0&&e.naturalHeight>0?s(e):n(h);else{let r=()=>{E(e,wt,c),setTimeout(()=>{s(e)})},c=()=>{E(e,U,r),n(h)};xt(e,U,r),xt(e,wt,c)}});return rt(t)&&i.then(s=>(t(s),s)),i}$center(t){let{parentElement:e}=this;if(!e)return this;let i=e.getBoundingClientRect(),s=i.width,n=i.height,{x:h,y:r,width:c,height:a}=this.
+getBoundingClientRect(),o=h+c/2,d=r+a/2,$=i.x+s/2,p=i.y+n/2,{translatable:u}=this;if(!u&&!this.$isReady&&(this.translatable=!0,this.$nextTick(()=>{this.translatable=u})),this.$move($-o,p-d),t&&(c!==s||a!==n)){let N=s/c,v=n/a,{scalable:m}=this;switch(t&&!m&&!this.$isReady&&(this.scalable=!0,this.$nextTick(()=>{this.scalable=m})),t){case"cover":this.$scale(Math.max(N,v));break;case"contain":this.$scale(Math.min(N,v));break}}return this}$move(t,e=t){if(this.translatable&&f(t)&&f(e)){let[i,s,n,h]=this.
+$matrix,r=(t*h-n*e)/(i*h-n*s),c=(e*i-s*t)/(i*h-n*s);this.$translate(r,c)}return this}$moveTo(t,e=t){if(this.translatable&&f(t)&&f(e)){let[i,s,n,h]=this.$matrix,r=(t*h-n*e)/(i*h-n*s),c=(e*i-s*t)/(i*h-n*s);this.$setTransform(i,s,n,h,r,c)}return this}$rotate(t,e,i){if(this.rotatable){let s=$t(t),n=Math.cos(s),h=Math.sin(s),[r,c,a,o]=[n,h,-h,n];if(f(e)&&f(i)){let[d,$,p,u]=this.$matrix,{width:N,height:v}=this.getBoundingClientRect(),m=N/2,T=v/2,g=e-m,b=i-T,S=(g*u-p*b)/(d*u-p*$),w=(b*d-$*g)/(d*u-p*$);
+this.$transform(r,c,a,o,S*(1-r)-w*a,w*(1-o)-S*c)}else this.$transform(r,c,a,o,0,0)}return this}$zoom(t,e,i){if(!this.scalable||t===0)return this;if(t<0?t=1/(1-t):t+=1,f(e)&&f(i)){let[s,n,h,r]=this.$matrix,{width:c,height:a}=this.getBoundingClientRect(),o=c/2,d=a/2,$=e-o,p=i-d,u=($*r-h*p)/(s*r-h*n),N=(p*s-n*$)/(s*r-h*n);this.$transform(t,0,0,t,u*(1-t),N*(1-t))}else this.$scale(t);return this}$scale(t,e=t){return this.scalable&&this.$transform(t,0,0,e,0,0),this}$skew(t,e=0){if(this.skewable){let i=$t(
+t),s=$t(e);this.$transform(1,Math.tan(s),Math.tan(i),1,0,0)}return this}$translate(t,e=t){return this.translatable&&f(t)&&f(e)&&this.$transform(1,0,0,1,t,e),this}$transform(t,e,i,s,n,h){return f(t)&&f(e)&&f(i)&&f(s)&&f(n)&&f(h)?this.$setTransform(Dt(this.$matrix,[t,e,i,s,n,h])):this}$setTransform(t,e,i,s,n,h){if((this.rotatable||this.scalable||this.skewable||this.translatable)&&(Array.isArray(t)&&([t,e,i,s,n,h]=t),f(t)&&f(e)&&f(i)&&f(s)&&f(n)&&f(h))){let r=[...this.$matrix],c=[t,e,i,s,n,h];if(this.
+$emit(dt,{matrix:c,oldMatrix:r})===!1)return this;this.$matrix=c,this.style.transform=`matrix(${c.join(", ")})`}return this}$getTransform(){return this.$matrix.slice()}$resetTransform(){return this.$setTransform([1,0,0,1,0,0])}};Z.$name=M;Z.$version="2.1.1";var Se=":host{display:block;height:0;left:0;outline:var(--theme-color) solid 1px;position:relative;top:0;width:0}:host([transparent]){outline-color:transparent}",se=new WeakMap,F=class extends A{constructor(){super(...arguments),this.$onWindowResize=null,this.$onCanvasActionEnd=null,this.$onCanvasActionStart=null,this.$onSelectionChange=null,this.$style=Se,this.x=0,this.y=0,this.width=0,this.height=0,this.slottable=!1,this.themeColor="rgba(0, 0, 0, 0.65)"}set $canvas(t){se.set(this,t)}get $canvas(){
+return se.get(this)}static get observedAttributes(){return super.observedAttributes.concat(["height","width","x","y"])}connectedCallback(){super.connectedCallback();let t=this.closest(this.$getTagNameOf(k));if(t){this.$canvas=t,this.style.position="absolute";let e=t.querySelector(this.$getTagNameOf(y));e&&(this.$onWindowResize=this.$render.bind(this),this.$onCanvasActionStart=i=>{e.hidden&&i.detail.action===Q&&(this.hidden=!1)},this.$onCanvasActionEnd=i=>{e.hidden&&i.detail.action===Q&&(this.hidden=
+!0)},this.$onSelectionChange=i=>{let{x:s,y:n,width:h,height:r}=i.defaultPrevented?e:i.detail;this.$change(s,n,h,r),(e.hidden||s===0&&n===0&&h===0&&r===0)&&(this.hidden=!0)},C(window,yt,this.$onWindowResize),C(t,W,this.$onCanvasActionStart),C(t,z,this.$onCanvasActionEnd),C(t,L,this.$onSelectionChange))}this.$render()}disconnectedCallback(){let{$canvas:t}=this;t&&(this.$onWindowResize&&(E(window,yt,this.$onWindowResize),this.$onWindowResize=null),this.$onCanvasActionStart&&(E(t,W,this.$onCanvasActionStart),
+this.$onCanvasActionStart=null),this.$onCanvasActionEnd&&(E(t,z,this.$onCanvasActionEnd),this.$onCanvasActionEnd=null),this.$onSelectionChange&&(E(t,L,this.$onSelectionChange),this.$onSelectionChange=null)),super.disconnectedCallback()}$change(t,e,i=this.width,s=this.height){return!f(t)||!f(e)||!f(i)||!f(s)||t===this.x&&e===this.y&&i===this.width&&s===this.height?this:(this.hidden&&(this.hidden=!1),this.x=t,this.y=e,this.width=i,this.height=s,this.$render())}$reset(){return this.$change(0,0,0,0)}$render(){
+return this.$setStyles({transform:`translate(${this.x}px, ${this.y}px)`,width:this.width,height:this.height,outlineWidth:R.innerWidth*R.devicePixelRatio})}};F.$name=Vt;F.$version="2.1.1";var Ne=':host{background-color:var(--theme-color);display:block}:host([action=move]),:host([action=select]){height:100%;left:0;position:absolute;top:0;width:100%}:host([action=move]){cursor:move}:host([action=select]){cursor:crosshair}:host([action$=-resize]){background-color:transparent;height:15px;position:absolute;width:15px}:host([action$=-resize]):after{background-color:var(--theme-color);content:"";display:block;height:5px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);w\
+idth:5px}:host([action=n-resize]),:host([action=s-resize]){cursor:ns-resize;left:50%;transform:translateX(-50%);width:100%}:host([action=n-resize]){top:-8px}:host([action=s-resize]){bottom:-8px}:host([action=e-resize]),:host([action=w-resize]){cursor:ew-resize;height:100%;top:50%;transform:translateY(-50%)}:host([action=e-resize]){right:-8px}:host([action=w-resize]){left:-8px}:host([action=ne-resize]){cursor:nesw-resize;right:-8px;top:-8px}:host([action=nw-resize]){cursor:nwse-resize;left:-8px;t\
+op:-8px}:host([action=se-resize]){bottom:-8px;cursor:nwse-resize;right:-8px}:host([action=se-resize]):after{height:15px;width:15px}@media (pointer:coarse){:host([action=se-resize]):after{height:10px;width:10px}}@media (pointer:fine){:host([action=se-resize]):after{height:5px;width:5px}}:host([action=sw-resize]){bottom:-8px;cursor:nesw-resize;left:-8px}:host([plain]){background-color:transparent}',B=class extends A{constructor(){super(...arguments),this.$onCanvasCropEnd=null,this.$onCanvasCropStart=
+null,this.$style=Ne,this.action=D,this.plain=!1,this.slottable=!1,this.themeColor="rgba(51, 153, 255, 0.5)"}static get observedAttributes(){return super.observedAttributes.concat(["action","plain"])}};B.$name=Yt;B.$version="2.1.1";var we=':host{display:block;left:0;position:relative;right:0}:host([outlined]){outline:1px solid var(--theme-color)}:host([multiple]){outline:1px dashed hsla(0,0%,100%,.5)}:host([multiple]):after{bottom:0;content:"";cursor:pointer;display:block;left:0;position:absolute;right:0;top:0}:host([multiple][active]){outline-color:var(--theme-color);z-index:1}:host([multiple])>*{visibility:hidden}:host([multiple][active])>*{visibility:visible}:host([multiple][active]):after{display:none}',ne=new WeakMap,
+G=class extends A{constructor(){super(...arguments),this.$onCanvasAction=null,this.$onCanvasActionStart=null,this.$onCanvasActionEnd=null,this.$onDocumentKeyDown=null,this.$action="",this.$actionStartTarget=null,this.$changing=!1,this.$style=we,this.$initialSelection={x:0,y:0,width:0,height:0},this.x=0,this.y=0,this.width=0,this.height=0,this.aspectRatio=NaN,this.initialAspectRatio=NaN,this.initialCoverage=NaN,this.active=!1,this.linked=!1,this.dynamic=!1,this.movable=!1,this.resizable=!1,this.zoomable=
+!1,this.multiple=!1,this.keyboard=!1,this.outlined=!1,this.precise=!1}set $canvas(t){ne.set(this,t)}get $canvas(){return ne.get(this)}static get observedAttributes(){return super.observedAttributes.concat(["active","aspect-ratio","dynamic","height","initial-aspect-ratio","initial-coverage","keyboard","linked","movable","multiple","outlined","precise","resizable","width","x","y","zoomable"])}$propertyChangedCallback(t,e,i){if(!Object.is(i,e))switch(super.$propertyChangedCallback(t,e,i),t){case"x":case"\
+y":case"width":case"height":this.$changing||this.$nextTick(()=>{this.$change(this.x,this.y,this.width,this.height,this.aspectRatio,!0)});break;case"aspectRatio":case"initialAspectRatio":this.$nextTick(()=>{this.$initSelection()});break;case"initialCoverage":this.$nextTick(()=>{O(i)&&i<=1&&this.$initSelection(!0,!0)});break;case"keyboard":this.$nextTick(()=>{this.$canvas&&(i?this.$onDocumentKeyDown||(this.$onDocumentKeyDown=this.$handleKeyDown.bind(this),C(this.ownerDocument,Ot,this.$onDocumentKeyDown)):
+this.$onDocumentKeyDown&&(E(this.ownerDocument,Ot,this.$onDocumentKeyDown),this.$onDocumentKeyDown=null))});break;case"multiple":this.$nextTick(()=>{if(this.$canvas){let s=this.$getSelections();i?(s.forEach(n=>{n.active=!1}),this.active=!0,this.$emit(L,{x:this.x,y:this.y,width:this.width,height:this.height})):(this.active=!1,s.slice(1).forEach(n=>{this.$removeSelection(n)}))}});break;case"precise":this.$nextTick(()=>{this.$change(this.x,this.y)});break;case"linked":i&&(this.dynamic=!0);break}}connectedCallback(){
+super.connectedCallback();let t=this.closest(this.$getTagNameOf(k));t?(this.$canvas=t,this.$setStyles({position:"absolute",transform:`translate(${this.x}px, ${this.y}px)`}),this.hidden||this.$render(),this.$initSelection(!0),this.$onCanvasActionStart=this.$handleActionStart.bind(this),this.$onCanvasActionEnd=this.$handleActionEnd.bind(this),this.$onCanvasAction=this.$handleAction.bind(this),C(t,W,this.$onCanvasActionStart),C(t,z,this.$onCanvasActionEnd),C(t,X,this.$onCanvasAction)):this.$render()}disconnectedCallback(){
+let{$canvas:t}=this;t&&(this.$onCanvasActionStart&&(E(t,W,this.$onCanvasActionStart),this.$onCanvasActionStart=null),this.$onCanvasActionEnd&&(E(t,z,this.$onCanvasActionEnd),this.$onCanvasActionEnd=null),this.$onCanvasAction&&(E(t,X,this.$onCanvasAction),this.$onCanvasAction=null)),super.disconnectedCallback()}$getSelections(){let t=[];return this.parentElement&&(t=Array.from(this.parentElement.querySelectorAll(this.$getTagNameOf(y)))),t}$initSelection(t=!1,e=!1){let{initialCoverage:i,parentElement:s}=this;
+if(O(i)&&s){let n=this.aspectRatio||this.initialAspectRatio,h=(e?0:this.width)||s.offsetWidth*i,r=(e?0:this.height)||s.offsetHeight*i;O(n)&&({width:h,height:r}=ht({aspectRatio:n,width:h,height:r})),this.$change(this.x,this.y,h,r),t&&this.$center(),this.$initialSelection={x:this.x,y:this.y,width:this.width,height:this.height}}}$createSelection(){let t=this.cloneNode(!0);return this.hasAttribute("id")&&t.removeAttribute("id"),t.initialCoverage=NaN,this.active=!1,this.parentElement&&this.parentElement.
+insertBefore(t,this.nextSibling),t}$removeSelection(t=this){if(this.parentElement){let e=this.$getSelections();if(e.length>1){let i=e.indexOf(t),s=e[i+1]||e[i-1];s&&(t.active=!1,this.parentElement.removeChild(t),s.active=!0,s.$emit(L,{x:s.x,y:s.y,width:s.width,height:s.height}))}else this.$clear()}}$handleActionStart(t){var e,i;let s=(i=(e=t.detail)===null||e===void 0?void 0:e.relatedEvent)===null||i===void 0?void 0:i.target;this.$action="",this.$actionStartTarget=s,!this.hidden&&this.multiple&&
+!this.active&&s===this&&this.parentElement&&(this.$getSelections().forEach(n=>{n.active=!1}),this.active=!0,this.$emit(L,{x:this.x,y:this.y,width:this.width,height:this.height}))}$handleAction(t){let{currentTarget:e,detail:i}=t;if(!e||!i)return;let{relatedEvent:s}=i,{action:n}=i,h=s?qt(s):null;if(!n&&this.multiple&&(n=this.$action||h?.action,this.$action=n),!n||this.hidden&&n!==Q||this.multiple&&!this.active&&n!==H)return;let{width:r,height:c}=this,a=i.endX-i.startX,o=i.endY-i.startY,{aspectRatio:d}=this;
+switch(!O(d)&&s.shiftKey&&(d=O(r)&&O(c)?r/c:1),n){case Q:if(a!==0||o!==0){a===0?a=o:o===0&&(o=a);let{$canvas:$}=this,p=Mt(e);(this.multiple&&!this.hidden?this.$createSelection():this).$change(i.startX-p.left,i.startY-p.top,Math.abs(a),Math.abs(o),d),a<0?o<0?n=it:o>0&&(n=nt):a>0&&(o<0?n=et:o>0&&(n=st)),$&&($.$action=n)}break;case ut:this.movable&&(this.dynamic||this.$actionStartTarget&&this.contains(this.$actionStartTarget))&&this.$move(a,o);break;case H:if(s&&this.zoomable&&(this.dynamic||this.contains(
+s.target))){let $=Mt(e);this.$zoom(i.scale,s.pageX-$.left,s.pageY-$.top)}break;default:this.$resize(n,a,o,d)}}$handleActionEnd(){this.$action="",this.$actionStartTarget=null}$handleKeyDown(t){if(this.hidden||!this.keyboard||this.multiple&&!this.active||t.defaultPrevented)return;let{activeElement:e}=document;if(!(e&&(["INPUT","TEXTAREA"].includes(e.tagName)||["true","plaintext-only"].includes(e.contentEditable))))switch(t.key){case"Backspace":t.metaKey&&(t.preventDefault(),this.$removeSelection());
+break;case"Delete":t.preventDefault(),this.$removeSelection();break;case"ArrowLeft":t.preventDefault(),this.$move(-1,0);break;case"ArrowRight":t.preventDefault(),this.$move(1,0);break;case"ArrowUp":t.preventDefault(),this.$move(0,-1);break;case"ArrowDown":t.preventDefault(),this.$move(0,1);break;case"+":t.preventDefault(),this.$zoom(.1);break;case"-":t.preventDefault(),this.$zoom(-.1);break}}$center(){let{parentElement:t}=this;if(!t)return this;let e=(t.offsetWidth-this.width)/2,i=(t.offsetHeight-
+this.height)/2;return this.$change(e,i)}$move(t,e=t){return this.$moveTo(this.x+t,this.y+e)}$moveTo(t,e=t){return this.movable?this.$change(t,e):this}$resize(t,e=0,i=0,s=this.aspectRatio){if(!this.resizable)return this;let n=O(s),{$canvas:h}=this,{x:r,y:c,width:a,height:o}=this;switch(t){case bt:c+=i,o-=i,o<0&&(t=Tt,o=-o,c-=o),n&&(e=i*s,r+=e/2,a-=e,a<0&&(a=-a,r-=a));break;case Ct:a+=e,a<0&&(t=vt,a=-a,r-=a),n&&(i=e/s,c-=i/2,o+=i,o<0&&(o=-o,c-=o));break;case Tt:o+=i,o<0&&(t=bt,o=-o,c-=o),n&&(e=i*s,
+r-=e/2,a+=e,a<0&&(a=-a,r-=a));break;case vt:r+=e,a-=e,a<0&&(t=Ct,a=-a,r-=a),n&&(i=e/s,c+=i/2,o-=i,o<0&&(o=-o,c-=o));break;case et:n&&(i=-e/s),c+=i,o-=i,a+=e,a<0&&o<0?(t=nt,a=-a,o=-o,r-=a,c-=o):a<0?(t=it,a=-a,r-=a):o<0&&(t=st,o=-o,c-=o);break;case it:n&&(i=e/s),r+=e,c+=i,a-=e,o-=i,a<0&&o<0?(t=st,a=-a,o=-o,r-=a,c-=o):a<0?(t=et,a=-a,r-=a):o<0&&(t=nt,o=-o,c-=o);break;case st:n&&(i=e/s),a+=e,o+=i,a<0&&o<0?(t=it,a=-a,o=-o,r-=a,c-=o):a<0?(t=nt,a=-a,r-=a):o<0&&(t=et,o=-o,c-=o);break;case nt:n&&(i=-e/s),
+r+=e,a-=e,o+=i,a<0&&o<0?(t=et,a=-a,o=-o,r-=a,c-=o):a<0?(t=st,a=-a,r-=a):o<0&&(t=it,o=-o,c-=o);break}return h&&h.$setAction(t),this.$change(r,c,a,o)}$zoom(t,e,i){if(!this.zoomable||t===0)return this;t<0?t=1/(1-t):t+=1;let{width:s,height:n}=this,h=s*t,r=n*t,c=this.x,a=this.y;return f(e)&&f(i)?(c-=(h-s)*((e-this.x)/s),a-=(r-n)*((i-this.y)/n)):(c-=(h-s)/2,a-=(r-n)/2),this.$change(c,a,h,r)}$change(t,e,i=this.width,s=this.height,n=this.aspectRatio,h=!1){return this.$changing||!f(t)||!f(e)||!f(i)||!f(s)||
+i<0||s<0?this:(O(n)&&({width:i,height:s}=ht({aspectRatio:n,width:i,height:s},"cover")),this.precise||(t=Math.round(t),e=Math.round(e),i=Math.round(i),s=Math.round(s)),t===this.x&&e===this.y&&i===this.width&&s===this.height&&Object.is(n,this.aspectRatio)&&!h?this:(this.hidden&&(this.hidden=!1),this.$emit(L,{x:t,y:e,width:i,height:s})===!1?this:(this.$changing=!0,this.x=t,this.y=e,this.width=i,this.height=s,this.$changing=!1,this.$render())))}$reset(){let{x:t,y:e,width:i,height:s}=this.$initialSelection;
+return this.$change(t,e,i,s)}$clear(){return this.$change(0,0,0,0,NaN,!0),this.hidden=!0,this}$render(){return this.$setStyles({transform:`translate(${this.x}px, ${this.y}px)`,width:this.width,height:this.height})}$toCanvas(t){return new Promise((e,i)=>{if(!this.isConnected){i(new Error("The current element is not connected to the DOM."));return}let s=document.createElement("canvas"),{width:n,height:h}=this,r=1;if(at(t)&&(O(t.width)||O(t.height))&&({width:n,height:h}=ht({aspectRatio:n/h,width:t.
+width,height:t.height}),r=n/this.width),s.width=n,s.height=h,!this.$canvas){e(s);return}let c=this.$canvas.querySelector(this.$getTagNameOf(M));if(!c){e(s);return}c.$ready().then(a=>{let o=s.getContext("2d");if(o){let[d,$,p,u,N,v]=c.$getTransform(),m=-this.x,T=-this.y,g=(m*u-p*T)/(d*u-p*$),b=(T*d-$*m)/(d*u-p*$),S=d*g+p*b+N,w=$*g+u*b+v,_=a.naturalWidth,I=a.naturalHeight;r!==1&&(S*=r,w*=r,_*=r,I*=r);let P=_/2,x=I/2;o.fillStyle="transparent",o.fillRect(0,0,n,h),at(t)&&rt(t.beforeDraw)&&t.beforeDraw.
+call(this,o,s),o.save(),o.translate(P,x),o.transform(d,$,p,u,S,w),o.translate(-P,-x),o.drawImage(a,0,0,_,I),o.restore()}e(s)}).catch(i)})}};G.$name=y;G.$version="2.1.1";var Oe=":host{display:flex;flex-direction:column;position:relative;touch-action:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}:host([bordered]){border:1px dashed var(--theme-color)}:host([covered]){bottom:0;left:0;position:absolute;right:0;top:0}:host>span{display:flex;flex:1}:host>span+span{border-top:1px dashed var(--theme-color)}:host>span>span{flex:1}:host>span>span+span{border-left:1px dashed var(--theme-color)}",q=class extends A{constructor(){super(...arguments),this.
+$style=Oe,this.bordered=!1,this.columns=3,this.covered=!1,this.rows=3,this.slottable=!1,this.themeColor="rgba(238, 238, 238, 0.5)"}static get observedAttributes(){return super.observedAttributes.concat(["bordered","columns","covered","rows"])}$propertyChangedCallback(t,e,i){Object.is(i,e)||(super.$propertyChangedCallback(t,e,i),(t==="rows"||t==="columns")&&this.$nextTick(()=>{this.$render()}))}connectedCallback(){super.connectedCallback(),this.$render()}$render(){let t=this.$getShadowRoot(),e=document.
+createDocumentFragment();for(let i=0;i<this.rows;i+=1){let s=document.createElement("span");s.setAttribute("role","row");for(let n=0;n<this.columns;n+=1){let h=document.createElement("span");h.setAttribute("role","gridcell"),s.appendChild(h)}e.appendChild(s)}t&&(t.innerHTML="",t.appendChild(e))}};q.$name=Xt;q.$version="2.1.1";var ye=':host{display:inline-block;height:1em;position:relative;touch-action:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;width:1em}:host:after,:host:before{background-color:var(--theme-color);content:"";display:block;position:absolute}:host:before{height:1px;left:0;top:50%;transform:translateY(-50%);width:100%}:host:after{height:100%;left:50%;top:0;transform:translateX(-50%);width:1px}:host([centered]){left:50%;position:absolute;top:50%;transform:tr\
+anslate(-50%,-50%)}',K=class extends A{constructor(){super(...arguments),this.$style=ye,this.centered=!1,this.slottable=!1,this.themeColor="rgba(238, 238, 238, 0.5)"}static get observedAttributes(){return super.observedAttributes.concat(["centered"])}};K.$name=Ht;K.$version="2.1.1";var Re=":host{display:block;height:100%;overflow:hidden;position:relative;width:100%}",oe=new WeakMap,ae=new WeakMap,re=new WeakMap,he=new WeakMap,_e="both",Ie="horizontal",ce="vertical",ke="none",J=class extends A{constructor(){super(...arguments),this.$onSelectionChange=null,this.$onSourceImageLoad=null,this.$onSourceImageTransform=null,this.$scale=1,this.$style=Re,this.resize=ce,this.selection="",this.slottable=!1}set $image(t){ae.set(this,t)}get $image(){return ae.get(this)}set $sourceImage(t){
+he.set(this,t)}get $sourceImage(){return he.get(this)}set $canvas(t){oe.set(this,t)}get $canvas(){return oe.get(this)}set $selection(t){re.set(this,t)}get $selection(){return re.get(this)}static get observedAttributes(){return super.observedAttributes.concat(["resize","selection"])}connectedCallback(){var t,e;super.connectedCallback();let i=null;if(this.selection?i=(e=(t=ft(this))===null||t===void 0?void 0:t.querySelector(this.selection))!==null&&e!==void 0?e:null:i=this.closest(this.$getTagNameOf(
+y)),Y(i)){this.$selection=i,this.$onSelectionChange=this.$handleSelectionChange.bind(this),C(i,L,this.$onSelectionChange);let s=i.closest(this.$getTagNameOf(k));if(s){this.$canvas=s;let n=s.querySelector(this.$getTagNameOf(M));n&&(this.$sourceImage=n,this.$image=n.cloneNode(!0),this.$getShadowRoot().appendChild(this.$image),this.$onSourceImageLoad=this.$handleSourceImageLoad.bind(this),this.$onSourceImageTransform=this.$handleSourceImageTransform.bind(this),C(n.$image,U,this.$onSourceImageLoad),
+C(n,dt,this.$onSourceImageTransform))}this.$render()}}disconnectedCallback(){let{$selection:t,$sourceImage:e}=this;t&&this.$onSelectionChange&&(E(t,L,this.$onSelectionChange),this.$onSelectionChange=null),e&&this.$onSourceImageLoad&&(E(e.$image,U,this.$onSourceImageLoad),this.$onSourceImageLoad=null),e&&this.$onSourceImageTransform&&(E(e,dt,this.$onSourceImageTransform),this.$onSourceImageTransform=null),super.disconnectedCallback()}$handleSelectionChange(t){this.$render(t.defaultPrevented?this.
+$selection:t.detail)}$handleSourceImageLoad(){let{$image:t,$sourceImage:e}=this,i=t.getAttribute("src"),s=e.getAttribute("src");s&&s!==i&&(t.setAttribute("src",s),t.$ready(()=>{this.$render()}))}$handleSourceImageTransform(t){this.$render(void 0,t.detail.matrix)}$render(t,e){let{$canvas:i,$selection:s}=this;!t&&!s.hidden&&(t=s),(!t||t.x===0&&t.y===0&&t.width===0&&t.height===0)&&(t={x:0,y:0,width:i.offsetWidth,height:i.offsetHeight});let{x:n,y:h,width:r,height:c}=t,a={},{clientWidth:o,clientHeight:d}=this,
+$=o,p=d,u=NaN;switch(this.resize){case _e:u=1,$=r,p=c,a.width=r,a.height=c;break;case Ie:u=c>0?d/c:0,$=r*u,a.width=$;break;case ce:u=r>0?o/r:0,p=c*u,a.height=p;break;case ke:default:o>0?u=r>0?o/r:0:d>0&&(u=c>0?d/c:0)}this.$scale=u,this.$setStyles(a),this.$sourceImage&&setTimeout(()=>{this.$transformImageByOffset(e??this.$sourceImage.$getTransform(),-n,-h)})}$transformImageByOffset(t,e,i){let{$image:s,$scale:n,$sourceImage:h}=this;if(h&&s&&n>=0){let[r,c,a,o,d,$]=t,p=(e*o-a*i)/(r*o-a*c),u=(i*r-c*e)/
+(r*o-a*c),N=r*p+a*u+d,v=c*p+o*u+$;h.$ready(m=>{this.$setStyles.call(s,{width:m.naturalWidth*n,height:m.naturalHeight*n})}),s.$setTransform(r,c,a,o,N*n,v*n)}}};J.$name=Ut;J.$version="2.1.1";var Pe='<cropper-canvas background><cropper-image rotatable scalable skewable translatable></cropper-image><cropper-shade hidden></cropper-shade><cropper-handle action="select" plain></cropper-handle><cropper-selection initial-coverage="0.5" movable resizable><cropper-grid role="grid" bordered covered></cropper-grid><cropper-crosshair centered></cropper-crosshair><cropper-handle action="move" theme-color="rgba(255, 255, 255, 0.35)"></cropper-handle><cropper-handle action="n-resize"></cropper-han\
+dle><cropper-handle action="e-resize"></cropper-handle><cropper-handle action="s-resize"></cropper-handle><cropper-handle action="w-resize"></cropper-handle><cropper-handle action="ne-resize"></cropper-handle><cropper-handle action="nw-resize"></cropper-handle><cropper-handle action="se-resize"></cropper-handle><cropper-handle action="sw-resize"></cropper-handle></cropper-selection></cropper-canvas>',xe=/^img|canvas$/,Me=/<(\/?(?:script|style)[^>]*)>/gi,le={template:Pe};j.$define();K.$define();q.
+$define();B.$define();Z.$define();G.$define();F.$define();J.$define();var zt=class{constructor(t,e){var i;if(this.options=le,ot(t)&&(t=document.querySelector(t)),!Y(t)||!xe.test(t.localName))throw new Error("The first argument is required and must be an <img> or <canvas> element.");this.element=t,e=Object.assign(Object.assign({},le),e),this.options=e;let{container:s}=e;if(s&&(ot(s)&&(s=(i=ft(t))===null||i===void 0?void 0:i.querySelector(s)),!Y(s)))throw new Error("The `container` option must be \
+an element or a valid selector.");Y(s)||(t.parentElement?s=t.parentElement:s=t.ownerDocument.body),this.container=s;let n=t.localName,h="";n==="img"?{src:h}=t:n==="canvas"&&window.HTMLCanvasElement&&(h=t.toDataURL());let{template:r}=e;if(r&&ot(r)){let c=document.createElement("template"),a=document.createDocumentFragment();c.innerHTML=r.replace(Me,"&lt;$1&gt;"),a.appendChild(c.content),Array.from(a.querySelectorAll(M)).forEach(o=>{o.setAttribute("src",h),o.setAttribute("alt",t.alt||"The image to\
+ crop"),n==="img"&&["crossorigin","decoding","elementtiming","fetchpriority","loading","referrerpolicy","sizes","srcset"].forEach(d=>{t.hasAttribute(d)&&o.setAttribute(d,t.getAttribute(d)||"")})}),t.parentElement?(t.style.display="none",s.insertBefore(a,t.nextSibling)):s.appendChild(a)}}getCropperCanvas(){return this.container.querySelector(k)}getCropperImage(){return this.container.querySelector(M)}getCropperSelection(){return this.container.querySelector(y)}getCropperSelections(){return this.container.
+querySelectorAll(y)}destroy(){var t;let e=this.getCropperCanvas();e&&((t=e.parentElement)===null||t===void 0||t.removeChild(e)),this.element&&(this.element.style.display="")}};zt.version="2.1.1";export{ut as ACTION_MOVE,D as ACTION_NONE,Ct as ACTION_RESIZE_EAST,bt as ACTION_RESIZE_NORTH,et as ACTION_RESIZE_NORTHEAST,it as ACTION_RESIZE_NORTHWEST,Tt as ACTION_RESIZE_SOUTH,st as ACTION_RESIZE_SOUTHEAST,nt as ACTION_RESIZE_SOUTHWEST,vt as ACTION_RESIZE_WEST,lt as ACTION_ROTATE,H as ACTION_SCALE,Q as ACTION_SELECT,tt as ACTION_TRANSFORM,jt as ATTRIBUTE_ACTION,k as CROPPER_CANVAS,Ht as CROPPER_CROSSHAIR,Xt as CROPPER_GIRD,Yt as CROPPER_HANDLE,M as CROPPER_IMAGE,y as CROPPER_SELECTION,Vt as CROPPER_SHADE,
+Ut as CROPPER_VIEWER,j as CropperCanvas,K as CropperCrosshair,A as CropperElement,q as CropperGrid,B as CropperHandle,Z as CropperImage,G as CropperSelection,F as CropperShade,J as CropperViewer,Pe as DEFAULT_TEMPLATE,X as EVENT_ACTION,z as EVENT_ACTION_END,Zt as EVENT_ACTION_MOVE,W as EVENT_ACTION_START,L as EVENT_CHANGE,wt as EVENT_ERROR,Ot as EVENT_KEYDOWN,U as EVENT_LOAD,At as EVENT_POINTER_DOWN,St as EVENT_POINTER_MOVE,Nt as EVENT_POINTER_UP,yt as EVENT_RESIZE,de as EVENT_TOUCH_END,ue as EVENT_TOUCH_MOVE,
+fe as EVENT_TOUCH_START,dt as EVENT_TRANSFORM,Rt as EVENT_WHEEL,Et as HAS_POINTER_EVENT,ct as IS_BROWSER,gt as IS_TOUCH_DEVICE,V as NAMESPACE,R as WINDOW,Gt as emit,ht as getAdjustedSizes,qt as getComposedPathTarget,Mt as getOffset,ft as getRootDocument,Y as isElement,rt as isFunction,_t as isNaN,f as isNumber,It as isObject,at as isPlainObject,O as isPositiveNumber,ot as isString,Ft as isUndefined,Dt as multiplyMatrices,Kt as nextTick,E as off,C as on,xt as once,$t as toAngleInRadian,Pt as toCamelCase,
+kt as toKebabCase};