jodit-pro 4.12.40 → 4.13.2

package/es2021/plugins/image-editor-pro/image-editor-pro.min.js

@@ -0,0 +1,792 @@
+/*!
+ * jodit-pro - PRO Version of Jodit Editor
+ * Author: Chupurnov Valerii <chupurnov@gmail.com>
+ * Version: v4.13.2
+ * Url: https://xdsoft.net/jodit/pro/
+ * License(s): SEE LICENSE IN LICENSE.md
+ */
+	"use strict";!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define([],t);else{var i=t();for(var r in i)("object"==typeof exports?exports:e)[r]=i[r]}}(self,function(){return(self.webpackChunkjodit_pro=self.webpackChunkjodit_pro||[]).push([[918],{76542:function(e,t,i){i.d(t,{ProImageEditor:function(){return d}});var r=i(82749),a=i(85013),o=i(6441),n=i(91907),s=i(10830),l=i(78584);class d extends n.ViewComponent{className(){return"ImageEditorPro"}async open(e,t){let i=this.j,r=o.Config.defaultOptions.imageEditorPro,n=i.c.div("jodit-image-editor-pro");n.style.width="100%",n.style.height="100%";let s=new l.Dialog({language:i.o.language});s.setSize(r.dialog.width,r.dialog.height),s.setContent(n),s.open();let d=null,h=null,c=()=>{h?.(),h=null,d?.destroy(),d=null,s.close()};s.e.on("beforeClose",()=>{h?.(),h=null,d?.destroy(),d=null}),d=new a.ImageEditor({container:n,state:{showToolbar:!1,status:"loading"},onSave:i=>{this.persist(d,e,void 0,i,t,c)},onSaveAs:i=>{this.saveAs(d,e,i,t,c)}}),h=this.mountToolbar(s,d);try{let t=await this.loadImage(e);await d.fromBlob(t)}catch(e){d?.update({status:"error",error:e instanceof Error?e.message:e+""}),this.error(e)}}mountToolbar(e,t){let i=this.j,r=(0,s.Button)(i,{icon:{name:"save"},text:i.i18n("Save")},"primary"),o=(0,s.Button)(i,{icon:{name:"save"},name:"save-as",text:i.i18n("Save as")}),n=i.c.span("jodit-image-editor-pro__size"),l=(0,s.Button)(i,a.ICONS.minus),d=i.c.span("jodit-image-editor-pro__zoom"),h=(0,s.Button)(i,a.ICONS.plus),c=(0,s.Button)(i,"update",i.i18n("Reset")),u=(0,s.Button)(i,"undo",i.i18n("Undo")),p=(0,s.Button)(i,"redo",i.i18n("Redo"));l.setState({tooltip:"Zoom out"}),h.setState({tooltip:"Zoom in"});let g=null;r.onAction(()=>{g=r,t.save()}),o.onAction(()=>{g=o,t.saveAs()}),l.onAction(()=>t.update({zoom:t.state.zoom/1.2})),h.onAction(()=>t.update({zoom:1.2*t.state.zoom})),c.onAction(()=>t.reset()),u.onAction(()=>t.update({history:{step:-1}})),p.onAction(()=>t.update({history:{step:1}}));let f=(...e)=>{let t=i.c.div("jodit-image-editor-pro__group");return t.style.display="flex",t.style.alignItems="center",t.style.gap="4px",e.forEach(e=>t.appendChild(e)),t},m=i.c.div("jodit-image-editor-pro__toolbar");m.style.display="flex",m.style.alignItems="center",m.style.gap="12px",m.style.width="100%",n.style.opacity="0.75",d.style.minWidth="3.5em",d.style.textAlign="center",m.appendChild(f(r.container,o.container)),m.appendChild(f(n,l.container,d,h.container));let b=f(c.container,u.container,p.container);b.style.marginLeft="auto",m.appendChild(b),e.setHeader(m);let x="jodit-image-editor-pro__button_busy",y=e=>{let t=a.selectors.selectOutputSize(e),i="exporting"===e.status,s=i||"loading"===e.status,l=e.busyVisible,h=i&&(l??!0);i||(g=null),r.setState({disabled:!e.source||s}),o.setState({disabled:!e.source||s}),r.container.classList.toggle(x,h&&g!==o),o.container.classList.toggle(x,h&&g===o),c.setState({disabled:!a.selectors.selectIsDirty(e)}),u.setState({disabled:!a.selectors.selectCanUndo(e)}),p.setState({disabled:!a.selectors.selectCanRedo(e)}),n.textContent=t?`${t.width} \xd7 ${t.height}`:"";let f=a.selectors.selectViewportFit(e),m=f?Math.round(100*f.scale):Math.round(100*e.zoom);d.textContent=`${m}%`};y(t.state);let w=t.store.subscribe(y);return()=>{w(),[r,o,l,h,c,u,p].forEach(e=>e.destruct())}}saveAs(e,t,i,r,a){this.j.prompt("Enter new name","Save in new file",o=>{let n=(o||"").trim();if(!n)return this.j.alert("The name should not be empty"),!1;this.persist(e,t,n,i,r,a)})}async persist(e,t,i,r,a,o){e?.update({status:"exporting"});try{let{w:e,h:n}=await this.blobSize(r),s=await this.uploadEdited(t,r,i),l=()=>{o(),this.j.e.fire("update.filebrowser")};a(i,this.coreSupportsSaved()?{action:"saved",box:{w:e,h:n},newPath:s||void 0}:{action:"resize",box:{w:e,h:n}},l,e=>{o(),this.error(e)})}catch(e){o(),this.error(e)}}async uploadEdited(e,t,i){let{source:r,path:a,name:o}=await this.j.dataProvider.getPathByUrl(e),n=this.connectorUrl();if(!n)throw Error("No connector configured for imageSave");let s=(i||o||"image.png")+"",l=new FormData;l.append("action","imageSave"),l.append("source",(r??"")+""),l.append("path",(a??"")+""),l.append("name",s),l.append("files[0]",t,s);let d=n.includes("?")?"&":"?",h=await fetch(`${n}${d}action=imageSave`,{method:"POST",body:l,credentials:"include"}),c=await h.json();if(!c.success)throw Error(c.message||"Failed to save the edited image");return c.data?.newPath??""}coreSupportsSaved(){let[e=0,t=0,i=0]=(this.j.getVersion?this.j.getVersion():"").split(".").map(e=>parseInt(e,10)||0);return e>4||4===e&&(t>12||12===t&&i>=34)}connectorUrl(){let e=this.j.o.ajax?.url,t=this.j.o.uploader?.url;return"string"==typeof e&&e?e:"string"==typeof t&&t?t:""}async loadImage(e){let t=this.connectorUrl();if(t)try{return await this.loadViaConnector(t,e)}catch{}let i=e.includes("?")?"&":"?",r=await fetch(`${e}${i}_tst=${Date.now()}`,{credentials:"include"});if(!r.ok)throw Error(`Failed to load image (${r.status})`);return r.blob()}async loadViaConnector(e,t){let{source:i,path:r,name:a}=await this.j.dataProvider.getPathByUrl(t),o=new FormData;o.append("action","imageLoad"),o.append("source",(i??"")+""),o.append("path",(r??"")+""),o.append("name",(a??"")+"");let n=e.includes("?")?"&":"?",s=await fetch(`${e}${n}action=imageLoad`,{method:"POST",body:o,credentials:"include"}),l=await s.json();if(!l.success||!l.data?.content)throw Error(l.message||"Failed to load the image");return(await fetch(l.data.content)).blob()}async blobSize(e){let t=await createImageBitmap(e),i={w:t.width,h:t.height};return t.close(),i}error(e){this.j.e.fire("errorMessage",e.message)}constructor(...e){super(...e),(0,r._)(this,"isProImageEditor",!0)}}},45719:function(e,t,i){i(6441).Config.prototype.imageEditorPro={dialog:{width:"90%",height:"90%"}}},98270:function(e,t,i){i.r(t),i.d(t,{imageEditorPro:function(){return s}});var r=i(82749);i(45719);var a=i(76542),o=i(50911),n=i(2692);class s extends o.Plugin{afterInit(e){n.JoditPro.modules.ImageEditor=a.ProImageEditor}beforeDestruct(e){}}(0,r._)(s,"requires",["license"]),n.JoditPro.plugins.add("imageEditorPro",s)},85013:function(e,t,i){function r(e,t,i){return t in e?Object.defineProperty(e,t,{value:i,enumerable:!0,configurable:!0,writable:!0}):e[t]=i,e}i.d(t,{ICONS:function(){return eS},ImageEditor:function(){return eq},selectors:function(){return R}});try{if("u">typeof document){var a=document.createElement("style");a.appendChild(document.createTextNode(`/*
+ * Jodit Image Editor — design system & layout.
+ *
+ * Everything is scoped under \`.jie\` so the stylesheet can be injected into any
+ * page without leaking. Tokens are CSS custom properties; switching \`data-theme\`
+ * re-themes the whole tree. PostCSS handles nesting + autoprefixing.
+ */
+
+.jie {
+  /* palette */
+  --jie-accent: #5b5fc7;
+  --jie-accent-soft: #eceefb;
+  --jie-bg: #ffffff;
+  --jie-surface: #ffffff;
+  --jie-stage: #f3f4f8;
+  --jie-border: #e6e8ef;
+  --jie-text: #1f2430;
+  --jie-text-dim: #8a90a2;
+  --jie-danger: #e0533d;
+  --jie-shadow: 0 1px 2px rgba(20, 24, 40, 0.06), 0 8px 24px rgba(20, 24, 40, 0.06);
+
+  /* sizing scale — one system for every control */
+  --jie-control-h: 38px; /* shared height: buttons, inputs, selects, color, slider row */
+  --jie-control-px: 12px; /* horizontal padding inside controls */
+  --jie-icon: 20px; /* inline icon size (rail icons override to 24) */
+  --jie-radius: 12px; /* cards / panels */
+  --jie-radius-sm: 8px; /* controls */
+  --jie-gap: 16px; /* between groups */
+  --jie-gap-sm: 8px; /* between controls in a row */
+  --jie-font-sm: 13px;
+  --jie-font-md: 14px;
+  --jie-rail-w: 92px;
+  --jie-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  min-height: 420px;
+  box-sizing: border-box;
+  font-family: var(--jie-font);
+  color: var(--jie-text);
+  background: var(--jie-bg);
+  border: 1px solid var(--jie-border);
+  border-radius: var(--jie-radius);
+  overflow: hidden;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+.jie *,.jie *::before,.jie *::after {
+    box-sizing: border-box;
+  }
+
+.jie[data-theme='dark'] {
+    --jie-accent: #8a8df0;
+    --jie-accent-soft: #2a2d44;
+    --jie-bg: #14161f;
+    --jie-surface: #1b1e2a;
+    --jie-stage: #0f1118;
+    --jie-border: #2a2e3d;
+    --jie-text: #e7e9f3;
+    --jie-text-dim: #8b91a7;
+    --jie-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.4);
+  }
+
+/* ---- top bar ------------------------------------------------------------ */
+.jie-topbar {
+  display: flex;
+  align-items: center;
+  gap: var(--jie-gap);
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--jie-border);
+  background: var(--jie-surface);
+}
+
+.jie-topbar__save {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.jie-topbar__meta {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin: 0 auto;
+  color: var(--jie-text-dim);
+  font-size: 14px;
+}
+
+.jie-zoom {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-variant-numeric: tabular-nums;
+}
+
+.jie-topbar__actions {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+/* ---- buttons ------------------------------------------------------------ */
+.jie-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  height: var(--jie-control-h);
+  min-width: var(--jie-control-h); /* single-char buttons (B / I) stay square */
+  padding: 0 var(--jie-control-px);
+  font: inherit;
+  font-size: var(--jie-font-md);
+  font-weight: 600;
+  line-height: 1;
+  white-space: nowrap;
+  color: var(--jie-text);
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--jie-radius-sm);
+  cursor: pointer;
+  transition:
+    background 0.12s ease,
+    color 0.12s ease,
+    border-color 0.12s ease;
+}
+.jie-btn:hover:not(:disabled) {
+    background: var(--jie-accent-soft);
+  }
+.jie-btn:disabled {
+    opacity: 0.4;
+    cursor: default;
+  }
+/* inline icons are smaller than the standalone rail icons */
+.jie-btn .jie-icon {
+    width: var(--jie-icon);
+    height: var(--jie-icon);
+  }
+
+.jie-btn--primary {
+  color: #fff;
+  background: var(--jie-accent);
+  padding-inline: 18px;
+}
+
+.jie-btn--primary:hover:not(:disabled) {
+    background: color-mix(in srgb, var(--jie-accent) 88%, #000);
+  }
+
+.jie-btn--icon {
+  width: var(--jie-control-h);
+  padding: 0;
+  color: var(--jie-text-dim);
+}
+
+.jie-btn--icon:hover:not(:disabled) {
+    color: var(--jie-text);
+  }
+
+.jie-btn--active {
+  color: var(--jie-accent);
+  background: var(--jie-accent-soft);
+}
+
+/* text-style modifiers (the B / I annotation toggles) */
+.jie-btn--bold {
+  font-weight: 800;
+}
+.jie-btn--italic {
+  font-style: italic;
+  font-family: Georgia, 'Times New Roman', serif;
+}
+
+.jie-icon {
+  display: inline-flex;
+  width: 24px;
+  height: 24px;
+}
+
+.jie-icon svg {
+    width: 100%;
+    height: 100%;
+  }
+
+/* ---- body / rail -------------------------------------------------------- */
+.jie-body {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+}
+
+.jie-rail {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  width: var(--jie-rail-w);
+  padding: 14px 10px;
+  border-right: 1px solid var(--jie-border);
+  background: var(--jie-surface);
+  overflow-y: auto;
+}
+
+.jie-tab {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  padding: 12px 6px;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--jie-text-dim);
+  background: transparent;
+  border: 0;
+  border-radius: var(--jie-radius-sm);
+  cursor: pointer;
+  transition:
+    background 0.12s ease,
+    color 0.12s ease;
+}
+
+.jie-tab:hover {
+    background: var(--jie-accent-soft);
+  }
+
+.jie-tab[aria-selected='true'] {
+    color: var(--jie-accent);
+    background: var(--jie-accent-soft);
+  }
+
+/* ---- stage / preview ---------------------------------------------------- */
+.jie-stage {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-width: 0;
+  background: var(--jie-bg);
+}
+
+.jie-canvas-wrap {
+  position: relative;
+  flex: 1;
+  margin: 16px;
+  border-radius: var(--jie-radius);
+  background: var(--jie-stage);
+  overflow: hidden;
+  touch-action: none;
+}
+
+.jie-canvas {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+/* ---- transient status (loading / saving / error) ------------------------- */
+
+.jie-spinner {
+  display: inline-block;
+  flex: 0 0 auto;
+  width: var(--jie-icon);
+  height: var(--jie-icon);
+  border: 2px solid currentColor;
+  border-right-color: transparent;
+  border-radius: 50%;
+  animation: jie-spin 0.8s linear infinite;
+}
+
+@keyframes jie-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* Covers the canvas while the image is loading, or shows the load error. */
+.jie-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--jie-gap-sm);
+  font-size: var(--jie-font-md);
+  color: var(--jie-text-dim);
+  background: var(--jie-stage);
+}
+.jie-overlay .jie-spinner {
+    width: 32px;
+    height: 32px;
+    border-width: 3px;
+    color: var(--jie-accent);
+  }
+
+.jie-overlay--error {
+  color: var(--jie-danger);
+}
+
+.jie-overlay__detail {
+  max-width: 80%;
+  font-size: var(--jie-font-sm);
+  text-align: center;
+  color: var(--jie-text-dim);
+}
+
+/* crop overlay */
+.jie-crop {
+  position: absolute;
+  border: 1.5px dashed var(--jie-accent);
+  box-shadow: 0 0 0 100vmax var(--jie-scrim, rgba(17, 24, 39, 0.45));
+  transform-origin: center;
+  cursor: move;
+}
+
+/*
+ * Rotation knob, centred *above* the frame and connected by a short stem. The
+ * preview keeps \`VIEWPORT_PADDING\` around the image, so the knob has room and is
+ * never clipped — even for a full-image crop.
+ */
+.jie-crop__rotate {
+  position: absolute;
+  left: 50%;
+  top: -34px;
+  width: 18px;
+  height: 18px;
+  margin-left: -9px;
+  background: var(--jie-bg);
+  border: 2px solid var(--jie-accent);
+  border-radius: 50%;
+  box-shadow: 0 1px 3px rgba(20, 24, 40, 0.3);
+  cursor: grab;
+  touch-action: none;
+
+  /* stem runs from the knob's bottom (-16px) toward the frame, stopping ~5px
+     short of the edge so it never touches/overlaps the dashed border */
+}
+.jie-crop__rotate::before {
+    content: '';
+    position: absolute;
+    left: 50%;
+    top: 18px;
+    width: 2px;
+    height: 11px;
+    margin-left: -1px;
+    background: var(--jie-accent);
+  }
+.jie-crop__rotate:active {
+    cursor: grabbing;
+  }
+
+.jie-crop__handle {
+  position: absolute;
+  width: 14px;
+  height: 14px;
+  background: var(--jie-bg);
+  border: 2px solid var(--jie-accent);
+  border-radius: 50%;
+}
+
+.jie-crop__handle[data-h='nw'] {
+    top: -7px;
+    left: -7px;
+    cursor: nwse-resize;
+  }
+
+.jie-crop__handle[data-h='ne'] {
+    top: -7px;
+    right: -7px;
+    cursor: nesw-resize;
+  }
+
+.jie-crop__handle[data-h='sw'] {
+    bottom: -7px;
+    left: -7px;
+    cursor: nesw-resize;
+  }
+
+.jie-crop__handle[data-h='se'] {
+    bottom: -7px;
+    right: -7px;
+    cursor: nwse-resize;
+  }
+
+/* ---- bottom panel ------------------------------------------------------- */
+.jie-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  align-items: center;
+  padding: 14px 16px 20px;
+  border-top: 1px solid var(--jie-border);
+  background: var(--jie-surface);
+}
+
+/* a row of equal-height controls, centred on a shared baseline */
+.jie-toolrow {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--jie-gap-sm);
+  align-items: center;
+  justify-content: center;
+}
+
+/* a row of labelled (label-above) fields; inputs and buttons share a height,
+   so aligning their bottoms keeps everything tidy */
+.jie-fieldrow {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--jie-gap);
+  align-items: flex-end;
+  justify-content: center;
+}
+
+.jie-field {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  font-size: var(--jie-font-sm);
+  color: var(--jie-text-dim);
+}
+
+.jie-input,
+.jie-select {
+  height: var(--jie-control-h);
+  width: 120px;
+  padding: 0 var(--jie-control-px);
+  font: inherit;
+  font-size: var(--jie-font-md);
+  color: var(--jie-text);
+  background: var(--jie-bg);
+  border: 1px solid var(--jie-border);
+  border-radius: var(--jie-radius-sm);
+}
+
+:is(.jie-input,.jie-select):focus {
+    outline: 2px solid var(--jie-accent-soft);
+    border-color: var(--jie-accent);
+  }
+
+/* native colour input, normalised to the control height as a rounded swatch */
+/* colour picker: a swatch button that opens a popover of preset swatches */
+.jie-colorpicker {
+  position: relative;
+  display: inline-flex;
+}
+
+/* the trigger swatch (shows the current colour via inline \`background\`) */
+.jie-color {
+  width: var(--jie-control-h);
+  height: var(--jie-control-h);
+  padding: 0;
+  border: 1px solid var(--jie-border);
+  border-radius: var(--jie-radius-sm);
+  box-shadow: inset 0 0 0 2px var(--jie-bg);
+  cursor: pointer;
+}
+
+.jie-popover__backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+}
+
+.jie-popover {
+  position: absolute;
+  bottom: calc(100% + 8px);
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 51;
+  padding: 10px;
+  background: var(--jie-surface);
+  border: 1px solid var(--jie-border);
+  border-radius: var(--jie-radius);
+  box-shadow: var(--jie-shadow);
+}
+
+.jie-swatches {
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  gap: 8px;
+}
+
+/* 3\xd73 position anchor grid */
+.jie-posgrid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 2px;
+  padding: 3px;
+  background: var(--jie-bg);
+  border: 1px solid var(--jie-border);
+  border-radius: var(--jie-radius-sm);
+}
+
+.jie-posgrid__cell {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  color: var(--jie-text-dim);
+  background: transparent;
+  border: 0;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.jie-posgrid__cell .jie-icon {
+    width: 16px;
+    height: 16px;
+  }
+
+.jie-posgrid__cell:hover {
+    background: var(--jie-accent-soft);
+    color: var(--jie-text);
+  }
+
+.jie-posgrid__cell[aria-pressed='true'] {
+    background: var(--jie-accent);
+    color: #fff;
+  }
+
+/* font selector */
+.jie-fontselect {
+  position: relative;
+  display: inline-flex;
+}
+
+.jie-fontselect__trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: var(--jie-control-h);
+  min-width: 130px;
+  padding: 0 10px;
+  font: inherit;
+  font-size: var(--jie-font-md);
+  color: var(--jie-text);
+  background: var(--jie-bg);
+  border: 1px solid var(--jie-border);
+  border-radius: var(--jie-radius-sm);
+  cursor: pointer;
+}
+
+.jie-fontselect__trigger > span {
+    flex: 1;
+    text-align: left;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+.jie-fontselect__trigger .jie-icon {
+    width: 16px;
+    height: 16px;
+    color: var(--jie-text-dim);
+    flex: none;
+  }
+
+.jie-fontlist {
+  min-width: 180px;
+  max-height: 260px;
+  overflow-y: auto;
+  padding: 6px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.jie-fontlist__item {
+  padding: 8px 10px;
+  font-size: 15px;
+  text-align: left;
+  color: var(--jie-text);
+  background: transparent;
+  border: 0;
+  border-radius: var(--jie-radius-sm);
+  cursor: pointer;
+}
+
+.jie-fontlist__item:hover {
+    background: var(--jie-accent-soft);
+  }
+
+.jie-fontlist__item[aria-pressed='true'] {
+    color: var(--jie-accent);
+    background: var(--jie-accent-soft);
+  }
+
+.jie-swatch {
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: 1px solid var(--jie-border);
+  border-radius: var(--jie-radius-sm);
+  box-shadow: inset 0 0 0 2px var(--jie-surface);
+  cursor: pointer;
+  transition:
+    transform 0.1s ease,
+    box-shadow 0.1s ease;
+}
+
+.jie-swatch:hover {
+    transform: scale(1.08);
+  }
+
+.jie-swatch[aria-pressed='true'] {
+    box-shadow:
+      inset 0 0 0 2px var(--jie-surface),
+      0 0 0 2px var(--jie-accent);
+  }
+
+/* slider — the whole control occupies the shared height and centres its track */
+.jie-slider {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  height: var(--jie-control-h);
+  width: clamp(180px, 28vw, 300px);
+}
+
+.jie-slider__label {
+  font-size: var(--jie-font-sm);
+  color: var(--jie-text-dim);
+  white-space: nowrap;
+}
+
+.jie-slider__value {
+  min-width: 2.5ch;
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+  font-weight: 600;
+}
+
+/*
+ * Fully custom range so it looks identical across evergreen browsers (the
+ * native \`accent-color\` only themes the colour, not the track/thumb shapes).
+ * The filled portion is driven by \`--jie-range-fill\` (set per render by the
+ * slider component) on WebKit, and by the native \`::-moz-range-progress\` on
+ * Firefox.
+ */
+.jie-range {
+  --jie-range-fill: 50%;
+  appearance: none;
+  flex: 1;
+  min-width: 0;
+  height: 16px; /* hit area */
+  background: transparent;
+  cursor: pointer;
+}
+.jie-range::-webkit-slider-runnable-track {
+    height: 4px;
+    border-radius: 999px;
+    background: linear-gradient(
+      to right,
+      var(--jie-accent) var(--jie-range-fill),
+      var(--jie-border) var(--jie-range-fill)
+    );
+  }
+.jie-range::-webkit-slider-thumb {
+    appearance: none;
+    margin-top: -6px; /* centre the 16px thumb on the 4px track */
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background: var(--jie-accent);
+    border: 2px solid var(--jie-bg);
+    box-shadow: 0 1px 3px rgba(20, 24, 40, 0.25);
+  }
+.jie-range::-moz-range-track {
+    height: 4px;
+    border-radius: 999px;
+    background: var(--jie-border);
+  }
+.jie-range::-moz-range-progress {
+    height: 4px;
+    border-radius: 999px;
+    background: var(--jie-accent);
+  }
+.jie-range::-moz-range-thumb {
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background: var(--jie-accent);
+    border: 2px solid var(--jie-bg);
+    box-shadow: 0 1px 3px rgba(20, 24, 40, 0.25);
+  }
+.jie-range:focus-visible {
+    outline: none;
+  }
+.jie-range:focus-visible::-webkit-slider-thumb {
+    box-shadow: 0 0 0 4px var(--jie-accent-soft);
+  }
+.jie-range:focus-visible::-moz-range-thumb {
+    box-shadow: 0 0 0 4px var(--jie-accent-soft);
+  }
+
+/* filter thumbnails */
+.jie-thumbs {
+  display: flex;
+  gap: 12px;
+  width: 100%;
+  padding-bottom: 4px;
+  overflow-x: auto;
+  justify-content: flex-start;
+}
+
+.jie-thumb {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  align-items: center;
+  padding: 4px;
+  font-size: 12px;
+  color: var(--jie-text-dim);
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+}
+
+.jie-thumb canvas,.jie-thumb .jie-thumb__swatch {
+    width: 76px;
+    height: 56px;
+    border-radius: var(--jie-radius-sm);
+    border: 2px solid transparent;
+    object-fit: cover;
+    background: var(--jie-stage);
+  }
+
+.jie-thumb[aria-pressed='true'] {
+    color: var(--jie-accent);
+  }
+
+.jie-thumb[aria-pressed='true'] canvas,.jie-thumb[aria-pressed='true'] .jie-thumb__swatch {
+      border-color: var(--jie-accent);
+    }
+
+/* ---- responsive / mobile ------------------------------------------------ */
+@media (max-width: 720px) {
+  .jie {
+    --jie-rail-w: 100%;
+  }
+
+  .jie-topbar__meta {
+    display: none;
+  }
+
+  .jie-body {
+    flex-direction: column-reverse;
+  }
+
+  .jie-rail {
+    flex-direction: row;
+    width: 100%;
+    border-right: 0;
+    border-top: 1px solid var(--jie-border);
+    overflow-x: auto;
+  }
+
+  .jie-tab {
+    flex: 0 0 auto;
+    min-width: 72px;
+  }
+
+  .jie-canvas-wrap {
+    margin: 10px;
+  }
+
+  .jie-input {
+    width: 100px;
+  }
+}
+
+@media (hover: none) {
+  .jie-crop__handle {
+    width: 22px;
+    height: 22px;
+  }
+}`)),document.head.appendChild(a)}}catch(e){}let o=Object.freeze([{label:"Arial",value:"Arial, Helvetica, sans-serif"},{label:"Helvetica",value:"Helvetica, Arial, sans-serif"},{label:"Verdana",value:"Verdana, Geneva, sans-serif"},{label:"Tahoma",value:"Tahoma, Geneva, sans-serif"},{label:"Trebuchet MS",value:'"Trebuchet MS", Helvetica, sans-serif'},{label:"Times New Roman",value:'"Times New Roman", Times, serif'},{label:"Georgia",value:'Georgia, "Times New Roman", serif'},{label:"Courier New",value:'"Courier New", Courier, monospace'},{label:"Impact",value:"Impact, Haettenschweiler, sans-serif"}]),n=Object.freeze({brightness:0,contrast:0,saturation:0,warmth:0,blur:0}),s=Object.freeze(["#ffffff","#1a1a1a","#9e9689","#4a90e2","#54b98a","#f2c94c","#eb5757","#a29bfe","#8b5cf6","#f178b6","#f2994a","#b8e454","#7ec8f0","#5b6470","#d8d2c8","#eeeeee"]);function l(){return{flip:{horizontal:!1,vertical:!1},rotate:0,angle:0,crop:null,resize:null,finetune:{...n},filter:"original",annotations:[],focus:null}}function d(){return{source:null,status:"idle",busyVisible:!1,error:null,activeTab:"adjust",activeTool:"crop",zoom:1,history:{entries:[l()],index:0},selectedAnnotationId:null,theme:"light",showToolbar:!0,locale:"en",minCropSize:8,minResizeSize:1,palette:[...s],fonts:o.map(e=>({...e})),activePopover:null,viewport:null}}function h(e){let t=e.entries[e.index];if(void 0===t)throw RangeError(`history index ${e.index} is out of bounds`);return t}function c(e,t){let i=e.entries.slice(0,e.index+1);i.push(t);let r=Math.max(0,i.length-100),a=r>0?i.slice(r):i;return{entries:a,index:a.length-1}}function u(e,t){let i=Math.min(Math.max(t,0),e.entries.length-1);return i===e.index?e:{...e,index:i}}function p(e,t){var i,r,a,o,n,s;let d=e;if(void 0!==t.activeTab&&(d=g(d,{activeTab:t.activeTab})),void 0!==t.activeTool&&(d=g(d,{activeTool:t.activeTool})),void 0!==t.zoom&&(d=g(d,{zoom:!Number.isFinite(o=t.zoom)||o<=0?1:Math.min(Math.max(o,.01),64)})),void 0!==t.theme&&(d=g(d,{theme:t.theme})),void 0!==t.showToolbar&&(d=g(d,{showToolbar:t.showToolbar})),void 0!==t.locale&&(d=g(d,{locale:t.locale})),void 0!==t.minCropSize&&(d=g(d,{minCropSize:Math.max(1,t.minCropSize)})),void 0!==t.minResizeSize&&(d=g(d,{minResizeSize:Math.max(1,t.minResizeSize)})),void 0!==t.palette&&(d=g(d,{palette:t.palette})),void 0!==t.fonts&&(d=g(d,{fonts:t.fonts})),void 0!==t.activePopover&&(d=g(d,{activePopover:t.activePopover})),void 0!==t.status&&(d=g(d,{status:t.status}),"exporting"!==t.status&&d.busyVisible&&(d=g(d,{busyVisible:!1}))),void 0!==t.busyVisible&&(d=g(d,{busyVisible:t.busyVisible})),void 0!==t.error&&(d=g(d,{error:t.error})),void 0!==t.source&&(d=g(d,{source:t.source})),void 0!==t.viewport&&(d=g(d,{viewport:t.viewport})),void 0!==t.selectedAnnotationId&&(d=g(d,{selectedAnnotationId:t.selectedAnnotationId})),t.resetHistory&&(d=g(d,{history:{entries:[l()],index:0}})),t.resetDesign&&(d=g(d,{history:c(d.history,l())})),void 0!==t.design){let e,r=(n=h(d.history),s=t.design,{...n,...s,flip:s.flip?{...n.flip,...s.flip}:n.flip,finetune:s.finetune?{...n.finetune,...s.finetune}:n.finetune,rotate:void 0!==s.rotate?(90*Math.round(s.rotate/90)%360+360)%360:n.rotate}),a=!1===t.commit?((e=(i=d.history).entries.slice())[i.index]=r,{entries:e,index:i.index}):c(d.history,r);d=g(d,{history:a})}if(void 0!==t.history){let e=t.history,i="step"in e?(r=d.history,a=e.step,u(r,r.index+a)):u(d.history,e.index);d=g(d,{history:i})}return d}function g(e,t){for(let i of Object.keys(t))if(e[i]!==t[i])return{...e,...t};return e}class f{request(e){this.pending=e,null===this.handle&&(this.handle=this.schedule(()=>this.flush()))}flush(){null!==this.handle&&(this.clear(this.handle),this.handle=null);let e=this.pending;this.pending=null,e&&e()}cancel(){null!==this.handle&&(this.clear(this.handle),this.handle=null),this.pending=null}constructor(e,t){r(this,"pending",null),r(this,"handle",null),this.schedule=e,this.clear=t}}class m{request(e){this.pending=e,this.flush()}flush(){let e=this.pending;this.pending=null,e&&e()}cancel(){this.pending=null}constructor(){r(this,"pending",null)}}class b{getState(){return this.state}update(e){let t=this.reducer(this.state,e);return t!==this.state&&(this.state=t,this.scheduler.request(()=>this.notify())),this.state}subscribe(e){return this.listeners.add(e),()=>{this.listeners.delete(e)}}flush(){this.scheduler.flush()}destroy(){this.scheduler.cancel(),this.listeners.clear()}notify(){if(!this.notifying){this.notifying=!0;try{for(let e of this.listeners)e(this.state)}finally{this.notifying=!1}}}constructor(e={}){r(this,"state",void 0),r(this,"reducer",void 0),r(this,"scheduler",void 0),r(this,"listeners",new Set),r(this,"notifying",!1),this.state=e.initialState??d(),this.reducer=e.reducer??p,this.scheduler=e.scheduler??new m}}function x(e,t,i){return Math.min(Math.max(e,t),i)}function y(e,t){let i=x(e.width,1,t.width),r=x(e.height,1,t.height);return{x:x(e.x,0,t.width-i),y:x(e.y,0,t.height-r),width:i,height:r}}function w(e){return h(e.history)}function j(e){return"adjust"===e.activeTab&&"crop"===e.activeTool}function M(e){let t=w(e);return j(e)?{...t,crop:null,angle:0}:t}function k(e){return e.history.index>0}function S(e){var t;return(t=e.history).index<t.entries.length-1}function z(e){return e.history.index>0||e.history.entries.length>1}function C(e){if(!e.source)return null;let t=w(e),{width:i,height:r}=e.source;return 90===t.rotate||270===t.rotate?{width:r,height:i}:{width:i,height:r}}function _(e){let t=w(e);return t.resize?t.resize:t.crop?{width:Math.round(t.crop.width),height:Math.round(t.crop.height)}:C(e)}function T(e){return j(e)?C(e):_(e)}function P(e){let t,i,r,a=T(e);if(!a||!e.viewport)return null;let o={width:Math.max(1,e.viewport.width-88),height:Math.max(1,e.viewport.height-88)},n=(t=Math.min(o.width/a.width,o.height/a.height)||0,i=a.width*t,r=a.height*t,{scale:t,width:i,height:r,offsetX:(o.width-i)/2,offsetY:(o.height-r)/2}).scale*e.zoom,s=a.width*n,l=a.height*n;return{scale:n,width:s,height:l,offsetX:(e.viewport.width-s)/2,offsetY:(e.viewport.height-l)/2,content:a}}function E(e){return w(e).angle}function A(e){let t=w(e);if(t.crop)return t.crop;let i=C(e);return i?{x:0,y:0,width:i.width,height:i.height}:null}let R=Object.freeze(Object.defineProperty({__proto__:null,VIEWPORT_PADDING:44,selectCanRedo:S,selectCanUndo:k,selectCropAngle:E,selectDesign:w,selectEffectiveCrop:A,selectIsCropping:j,selectIsDirty:z,selectOrientedSize:C,selectOutputSize:_,selectPreviewContentSize:T,selectPreviewDesign:M,selectViewportFit:P},Symbol.toStringTag,{value:"Module"})),I=Math.PI/180,B={nw:[-1,-1],ne:[1,-1],sw:[-1,1],se:[1,1]};function $(e){return{x:e.x+e.width/2,y:e.y+e.height/2}}function O(e,t,i,r){let a=$(e),o=t*I,n=Math.cos(o),s=Math.sin(o),l=i*e.width/2,d=r*e.height/2;return{x:a.x+l*n-d*s,y:a.y+l*s+d*n}}function D(e,t,i,r){return Math.atan2(r-t,i-e)/I}function L(e,t,i){F(e,"width"),F(t,"height");let r=e*t*4;if(i&&i.length!==r)throw RangeError(`data length ${i.length} does not match ${e}x${t} (${r})`);return{width:e,height:t,data:i??new Uint8ClampedArray(r)}}function V(e,t,i){return(i*e.width+t)*4}function F(e,t){if(!Number.isInteger(e)||e<=0)throw RangeError(`${t} must be a positive integer, got ${e}`)}function N(e,t){let i=L(e.width,e.height),{width:r,height:a}=e;for(let o=0;o<a;o++)for(let n=0;n<r;n++)q(e,V(e,"horizontal"===t?r-1-n:n,"vertical"===t?a-1-o:o),i,V(i,n,o));return i}function U(e,t){let i=Math.max(1,Math.round(t.width)),r=Math.max(1,Math.round(t.height));if(i===e.width&&r===e.height)return L(i,r,new Uint8ClampedArray(e.data));let a=e;for(;a.width>=2*i;)a=function(e){let t=Math.ceil(e.width/2),i=L(t,e.height);for(let r=0;r<e.height;r++)for(let a=0;a<t;a++){let t=V(e,2*a,r),o=V(e,Math.min(2*a+1,e.width-1),r),n=V(i,a,r);for(let r=0;r<4;r++)i.data[n+r]=(e.data[t+r]+e.data[o+r])/2}return i}(a);for(;a.height>=2*r;)a=function(e){let t=Math.ceil(e.height/2),i=L(e.width,t);for(let r=0;r<t;r++)for(let t=0;t<e.width;t++){let a=V(e,t,2*r),o=V(e,t,Math.min(2*r+1,e.height-1)),n=V(i,t,r);for(let t=0;t<4;t++)i.data[n+t]=(e.data[a+t]+e.data[o+t])/2}return i}(a);return a.width===i&&a.height===r?L(i,r,new Uint8ClampedArray(a.data)):function(e,t,i){let r=L(t,i),a=e.width/t,o=e.height/i;for(let c=0;c<i;c++){let i=(c+.5)*o-.5,u=Math.floor(i),p=i-u,g=H(u,e.height),f=H(u+1,e.height);for(let i=0;i<t;i++){let t=(i+.5)*a-.5,o=Math.floor(t),u=t-o,m=H(o,e.width),b=H(o+1,e.width),x=V(e,m,g),y=V(e,b,g),w=V(e,m,f),j=V(e,b,f),M=V(r,i,c);for(let t=0;t<4;t++){var n,s,l,d,h;let i=(n=e.data[x+t],s=e.data[y+t],n+(s-n)*u),a=(l=e.data[w+t],d=e.data[j+t],l+(d-l)*u);r.data[M+t]=(h=i)+(a-h)*p}}}return r}(a,i,r)}function q(e,t,i,r){i.data[r]=e.data[t],i.data[r+1]=e.data[t+1],i.data[r+2]=e.data[t+2],i.data[r+3]=e.data[t+3]}function H(e,t){return e<0?0:e>=t?t-1:e}function X(e,t){let i=L(e.width,e.height,new Uint8ClampedArray(e.data));for(let e=0;e<i.data.length;e+=4)i.data[e]=t(i.data[e],0),i.data[e+1]=t(i.data[e+1],1),i.data[e+2]=t(i.data[e+2],2);return i}function Y(e,t){if(0===t)return et(e);let i=t/100*255;return X(e,e=>e+i)}function Z(e,t){if(0===t)return et(e);let i=t/100*255,r=259*(i+255)/(255*(259-i));return X(e,e=>r*(e-128)+128)}function W(e,t){if(0===t)return et(e);let i=1+t/100,r=L(e.width,e.height,new Uint8ClampedArray(e.data));for(let e=0;e<r.data.length;e+=4){let t=r.data[e],a=r.data[e+1],o=r.data[e+2],n=.299*t+.587*a+.114*o;r.data[e]=n+(t-n)*i,r.data[e+1]=n+(a-n)*i,r.data[e+2]=n+(o-n)*i}return r}function G(e,t){if(0===t)return et(e);let i=t/100*40;return X(e,(e,t)=>0===t?e+i:2===t?e-i:e)}function K(e,t,i=20){let r=Math.round(Math.max(0,Math.min(100,t))/100*i);return r<=0?et(e):Q(Q(e,r,"horizontal"),r,"vertical")}function J(e,t){let i=e;return K(i=G(i=W(i=Z(i=Y(i,t.brightness),t.contrast),t.saturation),t.warmth),t.blur)}function Q(e,t,i){let r=L(e.width,e.height),{width:a,height:o,data:n}=e,s="horizontal"===i,l=s?o:a,d=s?a:o,h=2*t+1;for(let e=0;l>e;e++)for(let i=0;i<4;i++){let l=0;for(let r=-t;t>=r;r++)l+=ee(n,a,o,s,e,r,i);for(let c=0;d>c;c++){let d=(s?e*a+c:c*a+e)*4+i;r.data[d]=l/h;let u=ee(n,a,o,s,e,c-t,i);l+=ee(n,a,o,s,e,c+t+1,i)-u}}return r}function ee(e,t,i,r,a,o,n){let s=(r?t:i)-1,l=o<0?0:o>s?s:o;return e[(r?a*t+l:l*t+a)*4+n]}function et(e){return L(e.width,e.height,new Uint8ClampedArray(e.data))}function ei(e,t){let i=L(e.width,e.height,new Uint8ClampedArray(e.data));for(let e=0;e<i.data.length;e+=4){let[r,a,o]=t(i.data[e],i.data[e+1],i.data[e+2]);i.data[e]=r,i.data[e+1]=a,i.data[e+2]=o}return i}Object.freeze(Object.defineProperty({__proto__:null,applyFinetune:J,blur:K,brightness:Y,contrast:Z,saturation:W,warmth:G},Symbol.toStringTag,{value:"Module"}));let er=e=>L(e.width,e.height,new Uint8ClampedArray(e.data)),ea=new Map;function eo(e){return ea.set(e.id,e),()=>{ea.get(e.id)===e&&ea.delete(e.id)}}function en(e,t){let i=ea.get(t);return i?i.apply(e):er(e)}function es(e){return new ImageData(e.data,e.width,e.height)}[{id:"original",label:"Original",apply:er},{id:"invert",label:"Invert",apply:e=>ei(e,(e,t,i)=>[255-e,255-t,255-i])},{id:"grayscale",label:"Black & White",apply:e=>ei(e,(e,t,i)=>{let r=.299*e+.587*t+.114*i;return[r,r,r]})},{id:"sepia",label:"Sepia",apply:e=>ei(e,(e,t,i)=>[.393*e+.769*t+.189*i,.349*e+.686*t+.168*i,.272*e+.534*t+.131*i])},{id:"solarize",label:"Solarize",apply:e=>ei(e,(e,t,i)=>[e<128?e:255-e,t<128?t:255-t,i<128?i:255-i])},{id:"clarendon",label:"Clarendon",apply:e=>G(W(Z(e,20),25),-10)},{id:"gingham",label:"Gingham",apply:e=>G(W(Z(e,-10),-15),12)}].forEach(eo);class el{register(e){let t=this.locales.get(e.id);return this.locales.set(e.id,{...t??{},...e.messages}),()=>{t?this.locales.set(e.id,t):this.locales.delete(e.id)}}has(e){return this.locales.has(e)}get(e){return this.locales.get(e)}list(){return[...this.locales.keys()]}translator(e){return function(e={},t={}){return(i,r)=>{let a=e[i]??t[i]??i;return r?a.replace(/\{(\w+)\}/g,(e,t)=>t in r?r[t]+"":e):a}}(this.locales.get(e)??{})}constructor(){r(this,"locales",new Map)}}let ed=new Set(["value","checked","disabled","selected","innerHTML"]);function eh(e,t={},i=[]){return{kind:"element",tag:e,key:t.key,props:t,children:function(e){let t=Array.isArray(e)?e:[e],i=[];for(let e of t)null!=e&&!1!==e&&!0!==e&&i.push("object"==typeof e?e:{kind:"text",text:e+""});return i}(i)}}function ec(e){return"element"===e.kind}let eu={};class ep{render(e){if(null===this.prev){let t=this.mount(e);this.host.insert(this.container,t,null)}else if(eg(this.prev,e))this.patch(this.prev,e);else{let t=this.mount(e),i=this.prev.node;this.host.insert(this.container,t,this.host.nextSibling(i)),this.host.remove(this.container,i)}this.prev=e}unmount(){this.prev&&(this.host.remove(this.container,this.prev.node),this.prev=null)}mount(e){if(!ec(e)){let t=this.host.createText(e.text);return e.node=t,t}let t=this.host.createElement(e.tag);for(let i of(e.node=t,this.applyProps(t,eu,e.props),e.children))this.host.insert(t,this.mount(i),null);return t}patch(e,t){let i=e.node;return(t.node=i,ec(t)&&ec(e))?(this.applyProps(i,e.props,t.props),this.patchChildren(i,e.children,t.children)):ec(t)||t.text===e.text||this.host.setText(i,t.text),i}applyProps(e,t,i){for(let r of(this.applyClass(e,t.class,i.class),this.applyStyle(e,t.style??{},i.style??{}),this.applyEvents(e,t.on??{},i.on??{}),Object.keys(i))){if(ef(r))continue;let a=i[r];a!==t[r]&&this.applyAttr(e,r,a)}for(let r of Object.keys(t))ef(r)||r in i||(ed.has(r)?this.host.setProperty(e,r,""):this.host.removeAttribute(e,r))}applyAttr(e,t,i){ed.has(t)?this.host.setProperty(e,t,i):!1===i||null==i?this.host.removeAttribute(e,t):this.host.setAttribute(e,t,!0===i?"":"string"==typeof i?i:"number"==typeof i||"boolean"==typeof i||"bigint"==typeof i?i+"":JSON.stringify(i)??"")}applyClass(e,t,i){t!==i&&(i?this.host.setAttribute(e,"class",i):this.host.removeAttribute(e,"class"))}applyStyle(e,t,i){for(let r of Object.keys(i))i[r]!==t[r]&&this.host.setStyle(e,r,i[r]+"");for(let r of Object.keys(t))r in i||this.host.removeStyle(e,r)}applyEvents(e,t,i){let r=this.events.get(e);for(let a of Object.keys(t))!(a in i)&&r?.has(a)&&(this.host.removeEventListener(e,a,r.get(a).wrapper),r.delete(a));for(let t of Object.keys(i)){let a=i[t],o=r?.get(t);if(o){o.handler=a;continue}r||(r=new Map,this.events.set(e,r));let n={handler:a,wrapper:e=>n.handler(e)};r.set(t,n),this.host.addEventListener(e,t,n.wrapper)}}patchChildren(e,t,i){let r=0,a=t.length-1,o=0,n=i.length-1,s=null;for(;r<=a&&o<=n;){let l=t[r],d=t[a],h=i[o],c=i[n];if(eg(l,h)){this.patch(l,h),r++,o++;continue}if(eg(d,c)){this.patch(d,c),a--,n--;continue}if(eg(l,c)){this.patch(l,c),this.host.insert(e,l.node,this.host.nextSibling(d.node)),r++,n--;continue}if(eg(d,h)){this.patch(d,h),this.host.insert(e,d.node,l.node),a--,o++;continue}s??=function(e,t,i){let r=new Map;for(let a=t;a<=i;a++){let t=e[a].key;void 0!==t&&r.set(t,a)}return r}(t,r,a);let u=void 0!==h.key?s.get(h.key):void 0;if(void 0===u)this.host.insert(e,this.mount(h),l.node);else{let i=t[u];this.patch(i,h),i.node=void 0,this.host.insert(e,h.node,l.node)}o++}if(r>a){let t=i[n+1]?.node??null;for(let r=o;n>=r;r++)this.host.insert(e,this.mount(i[r]),t)}else if(o>n)for(let i=r;a>=i;i++){let r=t[i].node;r&&this.host.remove(e,r)}}constructor(e,t){r(this,"events",new WeakMap),r(this,"prev",null),this.host=e,this.container=t}}function eg(e,t){return e.kind===t.kind&&("text"===e.kind||e.tag===t.tag&&e.key===t.key)}function ef(e){return"key"===e||"class"===e||"style"===e||"on"===e}class ev{createElement(e){return this.doc.createElement(e)}createText(e){return this.doc.createTextNode(e)}setText(e,t){e.textContent=t}insert(e,t,i){e.insertBefore(t,i)}remove(e,t){t.parentNode===e&&e.removeChild(t)}parent(e){return e.parentNode}nextSibling(e){return e.nextSibling}setAttribute(e,t,i){e.setAttribute(t,i)}removeAttribute(e,t){e.removeAttribute(t)}setProperty(e,t,i){e[t]=i}setStyle(e,t,i){e.style.setProperty(t,i)}removeStyle(e,t){e.style.removeProperty(t)}addEventListener(e,t,i){e.addEventListener(t,i)}removeEventListener(e,t,i){e.removeEventListener(t,i)}constructor(e=document){this.doc=e}}class em{register(e){return this.tools.set(e.id,e),this.order.set(e.id,e.order??em.UNORDERED_BASE+this.seq++),()=>{this.tools.get(e.id)===e&&(this.tools.delete(e.id),this.order.delete(e.id))}}get(e){return this.tools.get(e)}has(e){return this.tools.has(e)}list(){return[...this.tools.values()].sort((e,t)=>(this.order.get(e.id)??0)-(this.order.get(t.id)??0))}first(){return this.list()[0]}constructor(){r(this,"tools",new Map),r(this,"seq",0),r(this,"order",new Map)}}function eb(e){return eh("span",{class:"jie-icon",innerHTML:e})}function ex(){return eh("span",{class:"jie-spinner"})}function ey(e){let t=["jie-btn"];"primary"===e.variant&&t.push("jie-btn--primary"),"icon"===e.variant&&t.push("jie-btn--icon"),e.active&&t.push("jie-btn--active"),e.busy&&t.push("jie-btn--busy"),e.className&&t.push(e.className);let i=[];return e.busy?i.push(ex()):e.icon&&i.push(eb(e.icon)),e.label&&i.push(eh("span",{},e.label)),eh("button",{key:e.key,class:t.join(" "),type:"button",disabled:e.disabled??!1,title:e.title??e.label??"",on:{click:e.onClick}},i)}function ew(e){let t=e.onStart,i={input:t=>e.onInput(Number(t.target.value))};t&&(i.pointerdown=()=>t());let r=e.max-e.min||1,a=Math.min(100,Math.max(0,(e.value-e.min)/r*100));return eh("div",{class:"jie-slider"},[eh("span",{class:"jie-slider__label"},e.label),eh("input",{class:"jie-range",type:"range",min:e.min+"",max:e.max+"",step:(e.step??1)+"",value:e.value+"",style:{"--jie-range-fill":`${a}%`},on:i}),eh("span",{class:"jie-slider__value"},Math.round(e.value)+"")])}function ej(e){return eh("label",{class:"jie-field"},[eh("span",{},e.label),eh("span",{style:{display:"flex","align-items":"center",gap:"6px"}},[eh("input",{class:"jie-input",type:"number",value:e.value+"",on:{change(t){let i=Number(t.target.value);Number.isFinite(i)&&e.onChange(i)}}}),e.suffix?eh("span",{},e.suffix):null])])}function eM(e,t,i){return eh("div",{class:"jie-toolrow"},e.map(e=>ey({key:e.id,label:e.label,icon:e.icon,active:e.id===t,onClick:()=>i(e.id)})))}r(em,"UNORDERED_BASE",1e6);let ek=e=>`<svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${e}</svg>`,eS={adjust:ek('<path d="M4 8h2M9 8h11M4 16h11M18 16h2"/><circle cx="7.5" cy="8" r="1.6"/><circle cx="16.5" cy="16" r="1.6"/>'),finetune:ek('<path d="M4 7h12M4 12h16M4 17h8"/><circle cx="18" cy="7" r="1.6"/><circle cx="12" cy="17" r="1.6"/>'),filters:ek('<circle cx="9" cy="9" r="5"/><circle cx="15" cy="9" r="5"/><circle cx="12" cy="15" r="5"/>'),watermark:ek('<rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 15l5-4 4 3 3-2 6 4"/><circle cx="8.5" cy="9.5" r="1.4"/>'),annotate:ek('<path d="M12 20h9"/><path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z"/>'),resize:ek('<path d="M9 3H5a2 2 0 0 0-2 2v4M21 15v4a2 2 0 0 1-2 2h-4"/><path d="M8 16l8-8M16 8h-4M16 8v4"/>'),crop:ek('<path d="M6 2v14a2 2 0 0 0 2 2h14"/><path d="M2 6h14a2 2 0 0 1 2 2v14"/>'),rotate:ek('<path d="M3 12a9 9 0 1 0 3-6.7L3 8"/><path d="M3 3v5h5"/>'),flipX:ek('<path d="M12 3v18"/><path d="M8 7 4 12l4 5Z"/><path d="M16 7l4 5-4 5Z"/>'),flipY:ek('<path d="M3 12h18"/><path d="M7 8 12 4l5 4Z"/><path d="M7 16l5 4 5-4Z"/>'),undo:ek('<path d="M9 7 4 12l5 5"/><path d="M4 12h11a5 5 0 0 1 0 10h-1"/>'),redo:ek('<path d="m15 7 5 5-5 5"/><path d="M20 12H9a5 5 0 0 0 0 10h1"/>'),reset:ek('<path d="M3 12a9 9 0 1 1 2.6 6.3"/><path d="M3 21v-5h5"/>'),trash:ek('<path d="M4 7h16M9 7V5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2M6 7l1 13a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1l1-13M10 11v6M14 11v6"/>'),plus:ek('<path d="M12 5v14M5 12h14"/>'),minus:ek('<path d="M5 12h14"/>'),zoomIn:ek('<circle cx="10.5" cy="10.5" r="7.5"/><path d="M21 21l-5.2-5.2M10.5 7.5v6M7.5 10.5h6"/>'),zoomOut:ek('<circle cx="10.5" cy="10.5" r="7.5"/><path d="M21 21l-5.2-5.2M7.5 10.5h6"/>'),posTopLeft:ek('<path d="M17 17 7 7M7 13V7h6"/>'),posTop:ek('<path d="M12 19V6M7 11l5-5 5 5"/>'),posTopRight:ek('<path d="M7 17 17 7M11 7h6v6"/>'),posLeft:ek('<path d="M19 12H6M11 7l-5 5 5 5"/>'),posCenter:ek('<circle cx="12" cy="12" r="6.5"/><circle cx="12" cy="12" r="2" fill="currentColor" stroke="none"/>'),posRight:ek('<path d="M5 12h13M13 7l5 5-5 5"/>'),posBottomLeft:ek('<path d="M17 7 7 17M7 11v6h6"/>'),posBottom:ek('<path d="M12 5v13M7 13l5 5 5-5"/>'),posBottomRight:ek('<path d="M7 7l10 10M17 11v6h-6"/>'),font:ek('<path d="M4 20 9.5 6h1L16 20M6 15h8M17 20l3-9h.5l3 9M18 17h4"/>'),focus:ek('<circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="3.5"/>'),lock:ek('<rect x="5" y="11" width="14" height="9" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/>'),unlock:ek('<rect x="5" y="11" width="14" height="9" rx="2"/><path d="M8 11V7a4 4 0 0 1 7.5-2"/>'),text:ek('<path d="M5 5h14M12 5v14M9 19h6"/>'),brightness:ek('<circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M2 12h2M20 12h2M5 5l1.5 1.5M17.5 17.5 19 19M19 5l-1.5 1.5M6.5 17.5 5 19"/>'),contrast:ek('<circle cx="12" cy="12" r="9"/><path d="M12 3a9 9 0 0 0 0 18Z" fill="currentColor" stroke="none"/>'),blur:ek('<path d="M12 3s6 6.5 6 11a6 6 0 0 1-12 0c0-4.5 6-11 6-11Z"/>'),book:ek('<path d="M4 5a2 2 0 0 1 2-2h5v18H6a2 2 0 0 1-2-2Z"/><path d="M20 5a2 2 0 0 0-2-2h-5v18h5a2 2 0 0 0 2-2Z"/>')},ez={id:"adjust",label:"Adjust",icon:eS.adjust,order:0,defaultTool:"crop",renderPanel({state:e,update:t,t:i}){let r=w(e),a=j(e);return eh("div",{class:"jie-toolrow"},[ey({label:i("Crop"),icon:eS.crop,active:a,onClick:()=>t({activeTab:"adjust",activeTool:a?null:"crop"})}),ey({label:i("Rotate"),icon:eS.rotate,onClick:()=>t({design:{rotate:r.rotate+90}})}),ey({label:i("Flip X"),icon:eS.flipX,onClick:()=>t({design:{flip:{horizontal:!r.flip.horizontal}}})}),ey({label:i("Flip Y"),icon:eS.flipY,onClick:()=>t({design:{flip:{vertical:!r.flip.vertical}}})})])}},eC=[{id:"brightness",label:"Brightness",icon:eS.brightness,min:-100,max:100},{id:"contrast",label:"Contrast",icon:eS.contrast,min:-100,max:100},{id:"saturation",label:"Saturation",icon:eS.filters,min:-100,max:100},{id:"blur",label:"Blur",icon:eS.blur,min:0,max:100},{id:"warmth",label:"Warmth",icon:eS.brightness,min:-100,max:100}],e_={id:"finetune",label:"Finetune",icon:eS.finetune,order:1,defaultTool:"brightness",renderPanel({state:e,update:t,t:i}){var r;let a=(r=e.activeTool,eC.find(e=>e.id===r)??eC[0]),o=w(e).finetune[a.id],n=(e,i)=>{t({design:{finetune:{[a.id]:e}},commit:i})};return eh("div",{class:"jie-panel-stack",style:{display:"contents"}},[ew({label:i(a.label),value:o,min:a.min,max:a.max,onStart:()=>n(o,!0),onInput:e=>n(e,!1)}),eM(eC.map(e=>({id:e.id,label:i(e.label),icon:e.icon})),a.id,e=>t({activeTab:"finetune",activeTool:e}))])}},eT={id:"filters",label:"Filters",icon:eS.filters,order:2,renderPanel({state:e,update:t,t:i}){let r=w(e).filter;return eh("div",{class:"jie-thumbs"},[...ea.values()].map(e=>eh("button",{key:e.id,class:"jie-thumb",type:"button","aria-pressed":(e.id===r)+"",on:{click:()=>t({design:{filter:e.id}})}},[eh("canvas",{class:"jie-thumb__swatch","data-jie-filter-thumb":e.id}),eh("span",{},i(e.label))])))}},eP={id:"focus",label:"Focus",icon:eS.focus,order:3,defaultTool:"radial",renderPanel({state:e,update:t,t:i}){let r=w(e).focus??{shape:"radial",x:.5,y:.5,radius:.28,angle:0,amount:60},a=null!==w(e).focus,o=(e,i)=>t({design:{focus:{...r,...e}},commit:i});return eh("div",{class:"jie-panel-stack",style:{display:"contents"}},[eh("div",{class:"jie-toolrow"},[ew({label:i("Intensity"),value:r.amount,min:0,max:100,onStart:()=>o({amount:r.amount},!0),onInput:e=>o({amount:e},!1)}),ew({label:i("Radius"),value:Math.round(100*r.radius),min:5,max:90,onStart:()=>o({radius:r.radius},!0),onInput:e=>o({radius:e/100},!1)}),a?ey({variant:"icon",icon:eS.trash,title:i("Reset"),onClick:()=>t({design:{focus:null}})}):null]),eM([{id:"radial",label:i("Radial")},{id:"linear",label:i("Linear")}],r.shape,e=>o({shape:e},!0))])}},eE=[{align:"left",valign:"top",icon:eS.posTopLeft},{align:"center",valign:"top",icon:eS.posTop},{align:"right",valign:"top",icon:eS.posTopRight},{align:"left",valign:"middle",icon:eS.posLeft},{align:"center",valign:"middle",icon:eS.posCenter},{align:"right",valign:"middle",icon:eS.posRight},{align:"left",valign:"bottom",icon:eS.posBottomLeft},{align:"center",valign:"bottom",icon:eS.posBottom},{align:"right",valign:"bottom",icon:eS.posBottomRight}],eA=function(e="id"){let t=0;return()=>`${e}-${++t}`}("jie"),eR="text-color",eI="text-font",eB={id:"annotate",label:"Text",icon:eS.text,order:4,defaultTool:"text",renderPanel({state:e,update:t,t:i}){var r,a,n;let s,l,d,h=w(e),c=h.annotations[0];if(!c)return eh("div",{class:"jie-toolrow"},[ey({label:i("Add text"),icon:eS.text,variant:"primary",onClick(){let e=function(e,t={}){return{id:e,type:"text",text:"Text",x:.5,y:.5,fontSize:.06,fontFamily:o[0].value,color:"#eb5757",bold:!1,italic:!1,align:"center",valign:"middle",...t}}(eA());t({design:{annotations:[e]},selectedAnnotationId:e.id})}})]);let u=e=>{var i,r;return t({design:{annotations:(i=h.annotations,r=c.id,i.map(t=>t.id===r?{...t,...e}:t))}})};return eh("div",{class:"jie-toolrow"},[eh("input",{class:"jie-input",type:"text",value:c.text,on:{input:e=>u({text:e.target.value})}}),(s=(r={value:c.fontFamily,fonts:e.fonts,title:i("Font"),open:e.activePopover===eI,onToggle:()=>t({activePopover:e.activePopover===eI?null:eI}),onPick(e){u({fontFamily:e}),t({activePopover:null})}}).fonts.find(e=>e.value===r.value),l=[eh("button",{class:"jie-fontselect__trigger",type:"button",title:r.title??"Font","aria-haspopup":"listbox","aria-expanded":r.open+"",on:{click:()=>r.onToggle()}},[eb(eS.font),eh("span",{style:{"font-family":r.value}},s?.label??"Font"),eb(eS.book)])],r.open&&l.push(eh("div",{class:"jie-popover__backdrop",on:{click:()=>r.onToggle()}}),eh("div",{class:"jie-popover jie-fontlist",role:"listbox"},r.fonts.map(e=>eh("button",{key:e.value,class:"jie-fontlist__item",type:"button","aria-pressed":(e.value===r.value)+"",style:{"font-family":e.value},on:{click:()=>r.onPick(e.value)}},e.label)))),eh("div",{class:"jie-fontselect"},l)),(d=[eh("button",{class:"jie-color",type:"button",title:(a={value:c.color,palette:e.palette,title:i("Colour"),open:e.activePopover===eR,onToggle:()=>t({activePopover:e.activePopover===eR?null:eR}),onPick(e){u({color:e}),t({activePopover:null})}}).title??"Colour",style:{background:a.value},"aria-haspopup":"true","aria-expanded":a.open+"",on:{click:()=>a.onToggle()}})],a.open&&d.push(eh("div",{class:"jie-popover__backdrop",on:{click:()=>a.onToggle()}}),eh("div",{class:"jie-popover jie-swatches",role:"listbox"},a.palette.map(e=>eh("button",{key:e,class:"jie-swatch",type:"button",title:e,style:{background:e},"aria-pressed":(e.toLowerCase()===a.value.toLowerCase())+"",on:{click:()=>a.onPick(e)}})))),eh("div",{class:"jie-colorpicker"},d)),ey({label:"B",className:"jie-btn--bold",active:c.bold,onClick:()=>u({bold:!c.bold})}),ey({label:"I",className:"jie-btn--italic",active:c.italic,onClick:()=>u({italic:!c.italic})}),ew({label:i("Size"),value:Math.round(100*c.fontSize),min:1,max:40,onInput:e=>u({fontSize:e/100})}),(n={align:c.align,valign:c.valign,onPick:(e,t)=>u({align:e,valign:t,x:"left"===e?.04:"right"===e?.96:.5,y:"top"===t?.04:"bottom"===t?.96:.5})},eh("div",{class:"jie-posgrid",role:"group"},eE.map(e=>eh("button",{key:`${e.valign}-${e.align}`,class:"jie-posgrid__cell",type:"button","data-pos":`${e.valign}-${e.align}`,"aria-pressed":(e.align===n.align&&e.valign===n.valign)+"",on:{click:()=>n.onPick(e.align,e.valign)}},[eb(e.icon)])))),ey({variant:"icon",icon:eS.trash,title:i("Delete"),onClick(){var e,i;return t({design:{annotations:(e=h.annotations,i=c.id,e.filter(e=>e.id!==i))},selectedAnnotationId:null})}})])}},e$={id:"resize",label:"Resize",icon:eS.resize,order:5,renderPanel({state:e,update:t,t:i}){let r=_(e);if(!r)return null;let a="unlocked"!==e.activeTool,o=i=>t({design:{resize:function(e,t,i,r=1){let a=e.width/e.height;if(!i)return{width:Math.max(r,Math.round(t.width??e.width)),height:Math.max(r,Math.round(t.height??e.height))};if(void 0!==t.width){let e=Math.max(r,Math.round(t.width));return{width:e,height:Math.max(r,Math.round(e/a))}}if(void 0!==t.height){let e=Math.max(r,Math.round(t.height));return{width:Math.max(r,Math.round(e*a)),height:e}}return{...e}}(r,i,a,e.minResizeSize)}});return eh("div",{class:"jie-fieldrow"},[ej({label:i("Width"),value:r.width,suffix:i("px"),onChange:e=>o({width:e})}),ey({variant:"icon",icon:a?eS.lock:eS.unlock,title:a?i("Aspect ratio locked"):i("Aspect ratio unlocked"),onClick:()=>t({activeTab:"resize",activeTool:a?"unlocked":"locked"})}),ej({label:i("Height"),value:r.height,suffix:i("px"),onChange:e=>o({height:e})}),ey({variant:"icon",icon:eS.reset,title:i("Reset size"),onClick:()=>t({design:{resize:null}})})])}};function eO(e){return parseInt(e+e,16)}function eD(e,t){return parseInt(e.slice(t,t+2),16)}let eL=/image\/(jpe?g|bmp)/i;function eV(e,t){if("u"<typeof document)throw Error("No DOM available: provide a CanvasFactory to the codec");let i=document.createElement("canvas");return i.width=e,i.height=t,{get width(){return i.width},set width(v){i.width=v},get height(){return i.height},set height(v){i.height=v},getContext:e=>i.getContext(e),toBlobAsync:(e,t)=>new Promise((r,a)=>{i.toBlob(e=>e?r(e):a(Error("canvas.toBlob returned null")),e,t)})}}class eF{async decode(e){var t,i,r;let a,o=await this.toBitmap(e),n=(t=o.width,i=o.height,r={maxSize:this.maxSize,maxPixels:this.maxPixels},a=1,r.maxSize&&r.maxSize>0&&(a=Math.min(a,r.maxSize/Math.max(t,i))),r.maxPixels&&r.maxPixels>0&&(a=Math.min(a,Math.sqrt(r.maxPixels/(t*i)))),Math.min(1,a)),s=Math.max(1,Math.round(o.width*n)),l=Math.max(1,Math.round(o.height*n)),d=this.createCanvas(s,l),h=this.context(d);h.imageSmoothingEnabled=!0,h.imageSmoothingQuality="high",h.drawImage(o,0,0,s,l),"close"in o&&"function"==typeof o.close&&o.close();let c=h.getImageData(0,0,s,l);return L(c.width,c.height,c.data)}async encode(e,t={}){let i,{type:r="image/png",quality:a=.92,background:o}=t,n=void 0!==o||eL.test(r)?function(e,[t,i,r]){let a=L(e.width,e.height);for(let o=0;o<e.data.length;o+=4){let n=e.data[o+3]/255,s=1-n;a.data[o]=e.data[o]*n+t*s,a.data[o+1]=e.data[o+1]*n+i*s,a.data[o+2]=e.data[o+2]*n+r*s,a.data[o+3]=255}return a}(e,(i=(o??"#ffffff").trim().replace(/^#/,""),/^[0-9a-f]{3}$/i.test(i)?[eO(i[0]),eO(i[1]),eO(i[2])]:/^[0-9a-f]{6}$/i.test(i)?[eD(i,0),eD(i,2),eD(i,4)]:[255,255,255])):e,s=this.createCanvas(n.width,n.height);return this.context(s).putImageData(es(n),0,0),s.toBlobAsync(r,a)}context(e){let t=e.getContext("2d");if(!t)throw Error("Unable to acquire a 2D canvas context");return t}async toBitmap(e){return"function"==typeof createImageBitmap?createImageBitmap(e,{imageOrientation:"from-image"}):new Promise((t,i)=>{let r=URL.createObjectURL(e),a=new Image;a.style.imageOrientation="from-image",a.onload=()=>{URL.revokeObjectURL(r),t(a)},a.onerror=()=>{URL.revokeObjectURL(r),i(Error("Failed to decode image blob"))},a.src=r})}constructor(e=eV,t={}){r(this,"maxPixels",void 0),r(this,"maxSize",void 0),this.createCanvas=e,this.maxPixels=t.maxPixels??0x1000000,this.maxSize=t.maxSize}}class eN{decode(e){return this.codec.decode(e)}render(e,t){let i=function(e,t){let i=e;if(t.flip.horizontal&&(i=N(i,"horizontal")),t.flip.vertical&&(i=N(i,"vertical")),0!==t.rotate&&(i=function(e,t){let i=(Math.round(t/90)%4+4)%4;if(0===i)return L(e.width,e.height,new Uint8ClampedArray(e.data));let{width:r,height:a}=e,o=1===i||3===i,n=L(o?a:r,o?r:a);for(let t=0;t<a;t++)for(let o=0;o<r;o++){let s,l;1===i?(s=a-1-t,l=o):2===i?(s=r-1-o,l=a-1-t):(s=t,l=r-1-o),q(e,V(e,o,t),n,V(n,s,l))}return n}(i,t.rotate)),0!==t.angle){let e=t.crop??{x:0,y:0,width:i.width,height:i.height};i=function(e,t,i){let r=Math.max(1,Math.round(t.width)),a=Math.max(1,Math.round(t.height)),o=L(r,a),n=t.x+t.width/2,s=t.y+t.height/2,l=i*Math.PI/180,d=Math.cos(l),h=Math.sin(l);for(let t=0;t<a;t++){let i=t+.5-a/2;for(let a=0;r>a;a++){let l=a+.5-r/2;!function(e,t,i,r,a){if(t<=-1||i<=-1||t>=e.width||i>=e.height){r.data[a]=0,r.data[a+1]=0,r.data[a+2]=0,r.data[a+3]=0;return}let o=Math.floor(t),n=Math.floor(i),s=t-o,l=i-n,d=H(o,e.width),h=H(o+1,e.width),c=H(n,e.height),u=H(n+1,e.height),p=V(e,d,c),g=V(e,h,c),f=V(e,d,u),m=V(e,h,u);for(let t=0;t<4;t++){var b,x;let i=(b=e.data[p+t],b+(e.data[g+t]-b)*s),o=(x=e.data[f+t],x+(e.data[m+t]-x)*s);r.data[a+t]=i+(o-i)*l}}(e,n+l*d-i*h-.5,s+l*h+i*d-.5,o,V(o,a,t))}}return o}(i,e,t.angle)}else t.crop&&(i=function(e,t){let i,r,a=y({x:i=Math.round(t.x),y:r=Math.round(t.y),width:Math.round(t.x+t.width)-i,height:Math.round(t.y+t.height)-r},e),o=L(a.width,a.height);for(let t=0;t<a.height;t++){let i=V(e,a.x,a.y+t),r=V(o,0,t);o.data.set(e.data.subarray(i,i+4*a.width),r)}return o}(i,t.crop));return t.resize&&(i=U(i,t.resize)),i=en(i=J(i,t.finetune),t.filter),t.focus&&(i=function(e,t){if(t.amount<=0)return L(e.width,e.height,new Uint8ClampedArray(e.data));let i=K(e,t.amount,32),{width:r,height:a}=e,o=L(r,a),n=Math.min(r,a),s=t.x*r,l=t.y*a,d=t.radius*n,h=Math.max(.06*n,.9*d),c=t.angle*Math.PI/180,u=-Math.sin(c),p=Math.cos(c);for(let n=0;n<a;n++)for(let a=0;a<r;a++){let r=a-s,c=n-l,g=function(e,t,i){if(t<=e)return+(i>=t);let r=Math.min(1,Math.max(0,(i-e)/(t-e)));return r*r*(3-2*r)}(d,d+h,"radial"===t.shape?Math.hypot(r,c):Math.abs(r*u+c*p)),f=V(o,a,n);for(let t=0;t<4;t++)o.data[f+t]=e.data[f+t]+(i.data[f+t]-e.data[f+t])*g}return o}(i,t.focus)),i}(e,t);return function(e,t,i){if(0===i.length)return t;let r=e(t.width,t.height).getContext("2d");if(!r)throw Error("Unable to acquire a 2D canvas context");for(let e of(r.putImageData(es(t),0,0),i)){if("text"!==e.type)continue;let i=function(e,t){let i=Math.max(1,Math.round(e.fontSize*t.height)),r=e.bold?"bold":"normal",a=e.italic?"italic":"normal";return{text:e.text,x:Math.round(e.x*t.width),y:Math.round(e.y*t.height),fontPx:i,font:`${a} ${r} ${i}px ${e.fontFamily}`,color:e.color,align:e.align,baseline:e.valign}}(e,t);r.font=i.font,r.fillStyle=i.color,r.textAlign=i.align,r.textBaseline=i.baseline,function(e,t){let i=t.text.split(`
+`),r=1.2*t.fontPx,a=(i.length-1)*r,o="middle"===t.baseline?t.y-a/2:"bottom"===t.baseline?t.y-a:t.y;i.forEach((i,a)=>e.fillText(i,t.x,o+a*r))}(r,i)}let a=r.getImageData(0,0,t.width,t.height);return L(a.width,a.height,a.data)}(this.createCanvas,i,t.annotations)}async toBlob(e,t,i){return this.codec.encode(this.render(e,t),i)}constructor(e){r(this,"codec",void 0),r(this,"createCanvas",void 0),this.codec=e.codec,this.createCanvas=e.createCanvas}}function eU(e,t,i){e.update({zoom:t.zoom*i})}class eq{get state(){return this.store.getState()}update(e){return this.store.update(e),this}async save(){return this.handleSave()}async saveAs(){return this.handleSaveAs()}reset(){return this.handleReset(),this}use(e){let t=e.setup(this.api());return"function"==typeof t&&this.disposers.push(t),this}async fromBlob(e){this.store.update({status:"loading",error:null});try{let t=await this.processor.decode(e);if(this.destroyed)return this;this.source=t,this.previewSource=eH(t,this.previewMaxSize),this.thumbSource=eH(t,160),this.thumbVersion++,this.store.update({source:{width:t.width,height:t.height,name:e instanceof File?e.name:null,mimeType:e.type||"image/png"},resetHistory:!0,status:"ready"})}catch(e){this.store.update({status:"error",error:e instanceof Error?e.message:e+""})}return this}async toBlob(e){if(!this.source)throw Error("No image loaded — call fromBlob() first");let t=w(this.store.getState());this.store.update({status:"exporting"});try{return t.annotations.length>0&&"u">typeof document&&document.fonts&&await document.fonts.ready,await this.processor.toBlob(this.source,t,e)}finally{this.store.update({status:"ready"})}}destroy(){if(!this.destroyed){for(let e of(this.destroyed=!0,this.clearBusyTimer(),this.dragCleanup?.(),this.resizeObserver?.disconnect(),this.disposers.splice(0)))e();this.renderer.unmount(),this.store.destroy()}}api(){return{registerTool:e=>this.registry.register(e),registerFilter:e=>eo(e),registerLocale:e=>this.locales.register(e),getState:()=>this.store.getState(),update:e=>this.store.update(e)}}translator(){return this.locales.translator(this.store.getState().locale)}appContext(){return{update:e=>this.store.update(e),tools:this.registry.list(),t:this.translator(),onSave:()=>void this.handleSave(),onSaveAs:()=>void this.handleSaveAs(),onReset:()=>this.handleReset(),beginCropDrag:(e,t)=>this.beginCropDrag(e,t),beginCropRotate:e=>this.beginCropRotate(e)}}handleReset(){z(this.store.getState())&&this.confirm(this.translator()("Reset all changes? You can still undo afterwards."))&&this.store.update({resetDesign:!0})}render(){if(!this.destroyed){var e,t;let i,r,a,o,n,s,l,d;this.renderer.render((e=this.store.getState(),t=this.appContext(),eh("div",{class:"jie","data-theme":e.theme},[e.showToolbar?(i=_(e),a=(r=P(e))?Math.round(100*r.scale):Math.round(100*e.zoom),o=t.t,n="loading"===e.status||"exporting"===e.status,s="exporting"===e.status&&e.busyVisible,eh("header",{class:"jie-topbar"},[eh("div",{class:"jie-topbar__save"},[ey({label:o("Save"),variant:"primary",onClick:()=>t.onSave(),disabled:!e.source||n,busy:s}),ey({label:o("Save as"),onClick:()=>t.onSaveAs(),disabled:!e.source||n,busy:s})]),eh("div",{class:"jie-topbar__meta"},[i?eh("span",{},`${i.width} x ${i.height} px`):null,eb(eS.book),eh("div",{class:"jie-zoom"},[ey({variant:"icon",icon:eS.zoomOut,title:o("Zoom out"),onClick:()=>eU(t,e,1/1.2)}),eh("span",{},`${a}%`),ey({variant:"icon",icon:eS.zoomIn,title:o("Zoom in"),onClick:()=>eU(t,e,1.2)})])]),eh("div",{class:"jie-topbar__actions"},[ey({variant:"icon",icon:eS.reset,title:o("Reset"),disabled:!z(e),onClick:()=>t.onReset()}),ey({variant:"icon",icon:eS.undo,title:o("Undo"),disabled:!k(e),onClick:()=>t.update({history:{step:-1}})}),ey({variant:"icon",icon:eS.redo,title:o("Redo"),disabled:!S(e),onClick:()=>t.update({history:{step:1}})})])])):null,eh("div",{class:"jie-body"},[eh("nav",{class:"jie-rail"},t.tools.map(i=>eh("button",{key:i.id,class:"jie-tab",type:"button","aria-selected":(e.activeTab===i.id)+"",on:{click:()=>t.update({activeTab:i.id,activeTool:i.defaultTool??null})}},[eb(i.icon),eh("span",{},t.t(i.label))]))),(l=t.tools.find(t=>t.id===e.activeTab)??t.tools[0],d=l?.renderPanel({state:e,update:t.update,t:t.t})??null,eh("div",{class:"jie-stage"},[eh("div",{class:"jie-canvas-wrap","data-jie-canvas-wrap":""},[eh("canvas",{class:"jie-canvas","data-jie-canvas":""}),function(e,t){if(!j(e))return null;let i=P(e),r=A(e);if(!i||!r)return null;let a=E(e);return eh("div",{class:"jie-crop",style:{left:`${i.offsetX+r.x*i.scale}px`,top:`${i.offsetY+r.y*i.scale}px`,width:`${r.width*i.scale}px`,height:`${r.height*i.scale}px`,transform:`rotate(${a}deg)`},on:{pointerdown:e=>t.beginCropDrag("move",e)}},[eh("div",{key:"rotate",class:"jie-crop__rotate",title:"Rotate",on:{pointerdown(e){e.stopPropagation(),t.beginCropRotate(e)}}}),...["nw","ne","sw","se"].map(e=>eh("div",{key:e,class:"jie-crop__handle","data-h":e,on:{pointerdown(i){i.stopPropagation(),t.beginCropDrag(e,i)}}}))])}(e,t),"loading"===e.status?eh("div",{class:"jie-overlay","data-jie-loading":""},[ex()]):"error"===e.status&&e.error?eh("div",{class:"jie-overlay jie-overlay--error","data-jie-error":""},[eh("span",{},t.t("Failed to load the image")),eh("span",{class:"jie-overlay__detail"},e.error)]):null]),d?eh("div",{class:"jie-panel"},[d]):null]))])]))),this.ensureViewportObserver(),this.paint(),this.paintFilterThumbs()}}async handleSave(){if(!this.canExport())return;let e=await this.toBlob();this.onSaveCb?.(e,this),this.container.dispatchEvent(new CustomEvent("jie:save",{detail:{blob:e},bubbles:!0}))}async handleSaveAs(){if(!this.canExport())return;let e=await this.toBlob();this.onSaveAsCb?.(e,this),this.container.dispatchEvent(new CustomEvent("jie:saveas",{detail:{blob:e},bubbles:!0}))}canExport(){let{status:e}=this.store.getState();return null!==this.source&&"exporting"!==e&&"loading"!==e}syncBusyTimer(e){"exporting"!==e.status?this.clearBusyTimer():e.busyVisible||null!==this.busyTimer||(this.busyTimer=setTimeout(()=>{this.busyTimer=null,this.destroyed||"exporting"!==this.store.getState().status||this.store.update({busyVisible:!0})},this.spinnerDelay))}clearBusyTimer(){null!==this.busyTimer&&(clearTimeout(this.busyTimer),this.busyTimer=null)}ensureViewportObserver(){let e=this.container.querySelector("[data-jie-canvas-wrap]");if(e&&e!==this.observedWrap){if(this.resizeObserver?.disconnect(),this.observedWrap=e,"u"<typeof ResizeObserver)return void this.measureViewport(e);this.resizeObserver=new ResizeObserver(()=>this.measureViewport(e)),this.resizeObserver.observe(e),this.measureViewport(e)}}measureViewport(e){let{clientWidth:t,clientHeight:i}=e,r=this.store.getState().viewport;t<=0||i<=0||r&&r.width===t&&r.height===i||this.store.update({viewport:{width:t,height:i}})}paint(){let e=this.store.getState(),t=this.container.querySelector("[data-jie-canvas]");if(!t||!this.previewSource||!e.viewport)return;let i=P(e);if(!i)return;let r=M(e),a=`${this.thumbVersion}:${JSON.stringify(r)}`;a===this.cachedRasterKey&&this.cachedRaster||(this.cachedRaster=this.processor.render(this.previewSource,r),this.cachedRasterKey=a);let o=`${a}@${e.viewport.width}x${e.viewport.height}:${i.scale}:${i.offsetX},${i.offsetY}`;o!==this.lastPaintKey&&(this.lastPaintKey=o,function(e,t,i,r){let a="u">typeof window&&window.devicePixelRatio||1;e.width=Math.max(1,Math.round(i.width*a)),e.height=Math.max(1,Math.round(i.height*a));let o=e.getContext("2d");if(!o)return;o.setTransform(a,0,0,a,0,0),o.clearRect(0,0,i.width,i.height);let n=document.createElement("canvas");n.width=t.width,n.height=t.height;let s=n.getContext("2d");s&&(s.putImageData(es(t),0,0),o.imageSmoothingEnabled=!0,o.imageSmoothingQuality="high",o.drawImage(n,r.offsetX,r.offsetY,r.width,r.height))}(t,this.cachedRaster,e.viewport,i))}paintFilterThumbs(){let e=this.thumbSource;if(e)for(let t of this.container.querySelectorAll("canvas[data-jie-filter-thumb]")){let i=t.dataset.jieFilterThumb;if(!i)continue;let r=`${this.thumbVersion}:${i}`;if(t.dataset.key===r)continue;let a=en(e,i);t.width=a.width,t.height=a.height;let o=t.getContext("2d");o&&(o.putImageData(es(a),0,0),t.dataset.key=r)}}beginCropDrag(e,t){let i=this.store.getState(),r=P(i),a=A(i),o=C(i);if(!r||!a||!o)return;let n=E(i),s=i.minCropSize,l=t.clientX,d=t.clientY;this.runPointerGesture(t,t=>{let i=(t.clientX-l)/r.scale,h=(t.clientY-d)/r.scale;return{crop:0!==n?function(e,t,i,r,a,o=8){if("move"===i)return{...e,x:e.x+r,y:e.y+a};let[n,s]=B[i],l=O(e,t,n,s),d=O(e,t,-n,-s),h={x:l.x+r,y:l.y+a},c=(h.x+d.x)/2,u=(h.y+d.y)/2,p=t*I,g=Math.cos(p),f=Math.sin(p),m=h.x-d.x,b=h.y-d.y,x=Math.max(o,Math.abs(m*g+b*f)),y=Math.max(o,Math.abs(-(m*f)+b*g));return{x:c-x/2,y:u-y/2,width:x,height:y}}(a,n,e,i,h,s):function(e,t,i,r,a,o=null,n=8){var s;let l,d;if("move"===t)return y({...e,x:e.x+i,y:e.y+r},a);let{x:h,y:c,width:u,height:p}=e;if("nw"===t||"sw"===t){let e=x(h+i,0,h+u-n);u+=h-e,h=e}else u=x(u+i,n,a.width-h);if("nw"===t||"ne"===t){let e=x(c+r,0,c+p-n);p+=c-e,c=e}else p=x(p+r,n,a.height-c);let g={x:h,y:c,width:u,height:p};return null!==o&&o>0&&(l=(s=g).width/o,d="sw"===t||"se"===t?s.y:s.y+s.height-l,g={...s,height:l,y:d}),y(g,a)}(a,e,i,h,o,null,s)}})}beginCropRotate(e){let t=this.store.getState(),i=P(t),r=A(t),a=this.observedWrap??this.container.querySelector("[data-jie-canvas-wrap]");if(!i||!r||!a)return;let o=a.getBoundingClientRect(),n=$(r),s=o.left+i.offsetX+n.x*i.scale,l=o.top+i.offsetY+n.y*i.scale,d=E(t),h=D(s,l,e.clientX,e.clientY);this.runPointerGesture(e,e=>{let t=d+(D(s,l,e.clientX,e.clientY)-h);return 2>Math.abs(t)&&(t=0),{angle:Math.round(10*t)/10}})}runPointerGesture(e,t){e.preventDefault();let i=!1,r=e=>{this.store.update({design:t(e),commit:!i}),i=!0},a=()=>{window.removeEventListener("pointermove",r),window.removeEventListener("pointerup",a),this.dragCleanup=null};window.addEventListener("pointermove",r),window.addEventListener("pointerup",a),this.dragCleanup=a}constructor(e){for(const t of(r(this,"store",void 0),r(this,"container",void 0),r(this,"renderer",void 0),r(this,"registry",new em),r(this,"locales",new el),r(this,"processor",void 0),r(this,"previewMaxSize",void 0),r(this,"spinnerDelay",void 0),r(this,"busyTimer",null),r(this,"onSaveCb",void 0),r(this,"onSaveAsCb",void 0),r(this,"confirm",void 0),r(this,"source",null),r(this,"previewSource",null),r(this,"thumbSource",null),r(this,"thumbVersion",0),r(this,"cachedRaster",null),r(this,"cachedRasterKey",""),r(this,"lastPaintKey",""),r(this,"disposers",[]),r(this,"resizeObserver",null),r(this,"observedWrap",null),r(this,"dragCleanup",null),r(this,"destroyed",!1),this.container=function(e){if("string"!=typeof e)return e;let t=document.querySelector(e);if(!t)throw Error("Container not found: "+e);return t}(e.container),this.processor=e.processor??function(e=eV,t){return new eN({codec:new eF(e,t),createCanvas:e})}(void 0,{maxPixels:e.maxSourcePixels,maxSize:e.maxSourceSize}),this.previewMaxSize=e.previewMaxSize??1600,this.spinnerDelay=Math.max(0,e.spinnerDelay??250),this.onSaveCb=e.onSave,this.onSaveAsCb=e.onSaveAs,this.confirm=e.confirm??(e=>"u"<typeof window||window.confirm(e)),e.locales??[]))this.locales.register(t);for(const t of(this.store=new b({scheduler:e.scheduler??function(){if("function"!=typeof requestAnimationFrame)return new f(e=>setTimeout(e,16),e=>clearTimeout(e));let e=e=>{cancelAnimationFrame(e.raf),null!==e.timer&&(clearTimeout(e.timer),e.timer=null)};return new f(t=>{let i={raf:0,timer:null},r=()=>{e(i),t()};return i.raf=requestAnimationFrame(r),i.timer=setTimeout(r,100),i},e)}(),initialState:{...d(),...e.state,...e.locale?{locale:e.locale}:{},...void 0!==e.minCropSize?{minCropSize:Math.max(1,e.minCropSize)}:{},...void 0!==e.minResizeSize?{minResizeSize:Math.max(1,e.minResizeSize)}:{},...e.palette?{palette:e.palette}:{},...e.fonts?{fonts:e.fonts}:{}}}),e.tools??[ez,e_,eT,eP,eB,e$]))this.registry.register(t);for(const t of e.plugins??[])this.use(t);this.renderer=new ep(new ev(document),this.container),this.disposers.push(this.store.subscribe(()=>this.render())),this.disposers.push(this.store.subscribe(e=>this.syncBusyTimer(e))),this.render(),e.image&&this.fromBlob(e.image)}}function eH(e,t){let i=Math.max(e.width,e.height);if(t>=i)return e;let r=t/i;return U(e,{width:Math.round(e.width*r),height:Math.round(e.height*r)})}}},function(e){return e(e.s=98270)}])});