@codingfactory/mediables-vue 2.3.5 → 2.3.6

package/dist/{editor-BgjKZltI.js → editor-BWpslm--.js}

@@ -262,7 +262,7 @@ class xe extends B {
    * @param {string} imageUrl - URL, data URL, or blob URL of the image
    */
   async loadTexture(e) {
-    var l, c, d;
+    var l, c, u;
     if (this._mountPromise && await this._mountPromise, !((l = this.app) != null && l.renderer)) return;
     const t = window.PIXI, i = await this._loadImageElement(e);
     if (!i || !((c = this.app) != null && c.renderer)) return;
@@ -271,7 +271,7 @@ class xe extends B {
       return;
     this.originalTexture = r, this.baseTexture = r, this.sprite && (this.app.stage.removeChild(this.sprite), this.sprite.destroy()), this.sprite = new t.Sprite(r), this.app.stage.addChild(this.sprite), this.fitScale = this.getFitScaleFor(r), this.zoom = 1;
     const { w: a, h: o } = this._getCssSize();
-    if (this.applyViewTransform({ center: { x: a / 2, y: o / 2 } }), await new Promise(requestAnimationFrame), !((d = this.app) != null && d.renderer)) return;
+    if (this.applyViewTransform({ center: { x: a / 2, y: o / 2 } }), await new Promise(requestAnimationFrame), !((u = this.app) != null && u.renderer)) return;
     const n = this.getFitScaleFor(r);
     Math.abs(n - this.fitScale) / Math.max(1e-6, n) > 0.02 && (this.fitScale = n, this.applyViewTransform({ center: { x: a / 2, y: o / 2 } })), this.render(), this.emit("textureLoaded", { width: r.width, height: r.height });
   }
@@ -290,16 +290,23 @@ class xe extends B {
     const a = window.PIXI, o = Math.round(this.originalTexture.width), n = Math.round(this.originalTexture.height);
     if (o <= 0 || n <= 0)
       return null;
-    let l = o, c = n;
+    let l = o;
     if (i > 0) {
       const _ = Math.max(o, n);
       let v = i / _;
-      r && (v = Math.min(1, v)), l = Math.round(o * v), c = Math.round(n * v);
+      r && (v = Math.min(1, v)), l = Math.round(o * v);
     }
-    const d = this.sprite, h = d.x, p = d.y, m = d.scale.x, C = d.scale.y;
+    const c = this.sprite, u = c.x, h = c.y, p = c.width, m = c.height;
+    if (p <= 0 || m <= 0)
+      return null;
+    const C = l / p;
     let b = null;
     try {
-      if (d.x = 0, d.y = 0, d.scale.set(l / o, c / n), b = a.RenderTexture.create({ width: l, height: c }), this.app.renderer.render({ container: this.app.stage, target: b }), !this.app.renderer.extract)
+      if (c.x = 0, c.y = 0, b = a.RenderTexture.create({
+        width: Math.ceil(p),
+        height: Math.ceil(m),
+        resolution: C
+      }), this.app.renderer.render({ container: this.app.stage, target: b }), !this.app.renderer.extract)
         return null;
       const _ = this.app.renderer.extract.canvas(b);
       if (!_)
@@ -317,7 +324,7 @@ class xe extends B {
     } catch {
       return null;
     } finally {
-      d.x = h, d.y = p, d.scale.set(m, C), b && b.destroy(!0);
+      c.x = u, c.y = h, b && b.destroy(!0);
     }
   }
   /**
@@ -524,9 +531,9 @@ class we extends B {
         if (!o || !o.createFilter || typeof o.createFilter != "function")
           return;
         const n = this.state.getFilterValues(a), l = o.defaultParams ? { ...o.defaultParams } : {};
-        o.controls && Array.isArray(o.controls) && o.controls.forEach((d) => {
-          const h = d.property || d.id;
-          l[h] = n[d.id] ?? d.default;
+        o.controls && Array.isArray(o.controls) && o.controls.forEach((u) => {
+          const h = u.property || u.id;
+          l[h] = n[u.id] ?? u.default;
         });
         const c = o.createFilter(l);
         c && (t.push(c), this.instances[a] = c);
@@ -645,14 +652,14 @@ const T = class T extends B {
     if (!e || !r || !a || !o) return null;
     const l = e.width > t, c = e.height > i;
     if (!l && !c) return null;
-    const d = T.AUTO_ZOOM_PADDING;
+    const u = T.AUTO_ZOOM_PADDING;
     let h = n;
     if (l) {
-      const p = e.width / (d * r * o);
+      const p = e.width / (u * r * o);
       h = Math.min(h, p);
     }
     if (c) {
-      const p = e.height / (d * a * o);
+      const p = e.height / (u * a * o);
       h = Math.min(h, p);
     }
     return h = Math.max(0.1, h), h >= n - 0.01 ? null : h;
@@ -707,9 +714,9 @@ const T = class T extends B {
       0,
       Math.PI * 2
     ), n.stroke()) : n.strokeRect(l.x, l.y, l.width, l.height), n.setLineDash([]), n.strokeStyle = "rgba(255,255,255,0.3)", n.lineWidth = 1;
-    const d = l.width / 3, h = l.height / 3;
+    const u = l.width / 3, h = l.height / 3;
     for (let y = 1; y <= 2; y++)
-      n.beginPath(), n.moveTo(l.x + d * y, l.y), n.lineTo(l.x + d * y, l.y + l.height), n.stroke(), n.beginPath(), n.moveTo(l.x, l.y + h * y), n.lineTo(l.x + l.width, l.y + h * y), n.stroke();
+      n.beginPath(), n.moveTo(l.x + u * y, l.y), n.lineTo(l.x + u * y, l.y + l.height), n.stroke(), n.beginPath(), n.moveTo(l.x, l.y + h * y), n.lineTo(l.x + l.width, l.y + h * y), n.stroke();
     const p = this.HANDLE_SIZE, m = [
       { x: l.x, y: l.y, m: "resize-nw" },
       { x: l.x + l.width, y: l.y, m: "resize-ne" },
@@ -751,12 +758,12 @@ const T = class T extends B {
    * Handle pointer move event
    */
   _handlePointerMove(e) {
-    var l, c, d, h;
+    var l, c, u, h;
     const t = this.renderer.app;
     if (!t) return;
     const i = e.global;
     if (!this._isDragging || !this._dragStart || !this._startRect) {
-      this._hoverMode = this._hitHandle(i.x, i.y), t.stage.cursor = this._hoverMode === "move" ? "move" : this._hoverMode === "n" || this._hoverMode === "s" ? "ns-resize" : this._hoverMode === "e" || this._hoverMode === "w" ? "ew-resize" : (l = this._hoverMode) != null && l.endsWith("nw") || (c = this._hoverMode) != null && c.endsWith("se") ? "nwse-resize" : (d = this._hoverMode) != null && d.endsWith("ne") || (h = this._hoverMode) != null && h.endsWith("sw") ? "nesw-resize" : "crosshair", this.drawOverlay();
+      this._hoverMode = this._hitHandle(i.x, i.y), t.stage.cursor = this._hoverMode === "move" ? "move" : this._hoverMode === "n" || this._hoverMode === "s" ? "ns-resize" : this._hoverMode === "e" || this._hoverMode === "w" ? "ew-resize" : (l = this._hoverMode) != null && l.endsWith("nw") || (c = this._hoverMode) != null && c.endsWith("se") ? "nwse-resize" : (u = this._hoverMode) != null && u.endsWith("ne") || (h = this._hoverMode) != null && h.endsWith("sw") ? "nesw-resize" : "crosshair", this.drawOverlay();
       return;
     }
     const r = this.state.get("crop.rect");
@@ -833,8 +840,8 @@ const T = class T extends B {
   apply() {
     const e = this.renderer.app, t = this.renderer.sprite, i = this.renderer.originalTexture, r = this.state.get("crop.rect");
     if (!r || !t || !e || !i) return null;
-    const a = window.PIXI, o = this.renderer.zoom, n = i.width / t.width, l = i.height / t.height, c = (r.x - t.x) * n, d = (r.y - t.y) * l;
-    let h = Math.round(Math.max(1, r.width * n)), p = Math.round(Math.max(1, r.height * l)), m = Math.round(c), C = Math.round(d);
+    const a = window.PIXI, o = this.renderer.zoom, n = i.width / t.width, l = i.height / t.height, c = (r.x - t.x) * n, u = (r.y - t.y) * l;
+    let h = Math.round(Math.max(1, r.width * n)), p = Math.round(Math.max(1, r.height * l)), m = Math.round(c), C = Math.round(u);
     if (h <= 0 || p <= 0) return null;
     const b = new a.Container(), y = new a.Sprite(i);
     if (this.state.get("crop.shape") === "circle") {
@@ -933,8 +940,8 @@ class Se {
     if (!a.ok) {
       let c = `Background removal failed (HTTP ${a.status})`;
       try {
-        const d = await a.text();
-        d && (c += `: ${d}`);
+        const u = await a.text();
+        u && (c += `: ${u}`);
       } catch {
       }
       throw new Error(c);
@@ -993,7 +1000,7 @@ class Se {
     }
   }
 }
-function u(s, e = {}, ...t) {
+function d(s, e = {}, ...t) {
   const i = document.createElement(s);
   for (const [r, a] of Object.entries(e))
     if (a != null)
@@ -1010,16 +1017,16 @@ function u(s, e = {}, ...t) {
   return i;
 }
 function ae({ id: s, label: e, min: t = 0, max: i = 1, step: r = 0.01, value: a = 0.5, onChange: o }) {
-  const n = s.includes("-") ? s.split("-").slice(1).join("-") : s, l = u("div", {
+  const n = s.includes("-") ? s.split("-").slice(1).join("-") : s, l = d("div", {
     className: "slider-control slider-wrapper",
     "data-control": n,
     "data-testid": `slider-${n}`
-  }), c = u(
+  }), c = d(
     "div",
     { className: "slider-header" },
-    u("label", { for: s, className: "slider-label" }, e),
-    u("span", { className: "slider-value", id: `${s}-value` }, j(a))
-  ), d = u("input", {
+    d("label", { for: s, className: "slider-label" }, e),
+    d("span", { className: "slider-value", id: `${s}-value` }, j(a))
+  ), u = d("input", {
     type: "range",
     id: s,
     className: "slider-input",
@@ -1032,8 +1039,8 @@ function ae({ id: s, label: e, min: t = 0, max: i = 1, step: r = 0.01, value: a
       m && (m.textContent = j(p)), o == null || o(p);
     }
   });
-  return l.appendChild(c), l.appendChild(d), l.setValue = (h) => {
-    d.value = String(h);
+  return l.appendChild(c), l.appendChild(u), l.setValue = (h) => {
+    u.value = String(h);
     const p = l.querySelector(".slider-value");
     p && (p.textContent = j(h));
   }, l;
@@ -1042,24 +1049,24 @@ function j(s) {
   return Number.isInteger(s) ? String(s) : s.toFixed(2);
 }
 function oe({ id: s, label: e, checked: t = !1, onChange: i }) {
-  const r = u("div", { className: "toggle-control" }), a = u("label", { className: "toggle-label", for: s }, e), o = u("input", {
+  const r = d("div", { className: "toggle-control" }), a = d("label", { className: "toggle-label", for: s }, e), o = d("input", {
     type: "checkbox",
     id: s,
     className: "toggle-input",
     checked: t ? "checked" : void 0,
     onChange: (c) => i == null ? void 0 : i(c.target.checked)
-  }), n = u("div", {
+  }), n = d("div", {
     className: "toggle-switch",
     onClick: (c) => {
       c.target !== o && (o.checked = !o.checked, i == null || i(o.checked));
     }
-  }), l = u("span", { className: "toggle-slider" });
+  }), l = d("span", { className: "toggle-slider" });
   return n.appendChild(o), n.appendChild(l), r.appendChild(a), r.appendChild(n), r.setChecked = (c) => {
     o.checked = c;
   }, r;
 }
 function ne({ id: s, label: e, value: t = "#000000", onChange: i }) {
-  const r = u("div", { className: "color-control" }), a = u("label", { className: "color-label", for: s }, e), o = u("input", {
+  const r = d("div", { className: "color-control" }), a = d("label", { className: "color-label", for: s }, e), o = d("input", {
     type: "color",
     id: s,
     className: "color-input",
@@ -1071,13 +1078,13 @@ function ne({ id: s, label: e, value: t = "#000000", onChange: i }) {
   }, r;
 }
 function le({ id: s, label: e, options: t = [], value: i, onChange: r }) {
-  const a = u("div", { className: "select-control" }), o = u("label", { className: "select-label", for: s }, e), n = u("select", {
+  const a = d("div", { className: "select-control" }), o = d("label", { className: "select-label", for: s }, e), n = d("select", {
     id: s,
     className: "select-input",
     onChange: (l) => r == null ? void 0 : r(l.target.value)
   });
   for (const l of t) {
-    const c = u("option", { value: l.value }, l.label);
+    const c = d("option", { value: l.value }, l.label);
     l.value === i && (c.selected = !0), n.appendChild(c);
   }
   return a.appendChild(o), a.appendChild(n), a.setValue = (l) => {
@@ -1085,14 +1092,14 @@ function le({ id: s, label: e, options: t = [], value: i, onChange: r }) {
   }, a;
 }
 function A({ label: s, className: e = "", onClick: t, icon: i = null, disabled: r = !1 }) {
-  const a = u("button", {
+  const a = d("button", {
     type: "button",
     className: `btn ${e}`.trim(),
     onClick: t,
     disabled: r ? "disabled" : void 0
   });
   if (i) {
-    const o = u("span", { className: "btn-icon" });
+    const o = d("span", { className: "btn-icon" });
     o.innerHTML = i;
     const n = o.querySelector("svg");
     n && n.setAttribute("aria-hidden", "true"), a.appendChild(o);
@@ -1109,24 +1116,24 @@ function x({ icon: s, title: e, className: t = "", onClick: i, disabled: r = !1,
     disabled: r ? "disabled" : void 0
   };
   a && (n.dataset = { testid: a });
-  const l = u("button", n);
+  const l = d("button", n);
   l.innerHTML = s;
   const c = l.querySelector("svg");
   return c && c.setAttribute("aria-hidden", "true"), l;
 }
 function W({ label: s, icon: e, active: t = !1, onClick: i }) {
-  const r = u("button", {
+  const r = d("button", {
     type: "button",
     className: `chip ${t ? "active" : ""}`.trim(),
     onClick: i
   });
   if (e) {
-    const a = u("span", { className: "chip-icon" });
+    const a = d("span", { className: "chip-icon" });
     a.innerHTML = e;
     const o = a.querySelector("svg");
     o && o.setAttribute("aria-hidden", "true"), r.appendChild(a);
   }
-  return r.appendChild(u("span", { className: "chip-label" }, s)), r.setActive = (a) => {
+  return r.appendChild(d("span", { className: "chip-label" }, s)), r.setActive = (a) => {
     r.classList.toggle("active", a);
   }, r;
 }
@@ -1140,8 +1147,8 @@ class Le {
    * @returns {HTMLElement}
    */
   render() {
-    this.element = u("div", { className: "editor-toolbar" });
-    const e = u("div", { className: "toolbar-section toolbar-left" }), t = x({
+    this.element = d("div", { className: "editor-toolbar" });
+    const e = d("div", { className: "toolbar-section toolbar-left" }), t = x({
       icon: Ee,
       title: "Open Image",
       className: "toolbar-btn",
@@ -1150,7 +1157,7 @@ class Le {
       onClick: () => this.editor.openFilePicker()
     });
     e.appendChild(t);
-    const i = u("div", { className: "toolbar-section toolbar-center" }), r = x({
+    const i = d("div", { className: "toolbar-section toolbar-center" }), r = x({
       icon: ke,
       title: "Zoom Out",
       className: "toolbar-btn",
@@ -1161,7 +1168,7 @@ class Le {
         this.editor.setZoom(h - 0.25);
       }
     });
-    this._zoomLabel = u("span", {
+    this._zoomLabel = d("span", {
       className: "zoom-label",
       "aria-live": "polite",
       "aria-atomic": "true",
@@ -1186,7 +1193,7 @@ class Le {
       onClick: () => this.editor.fitToScreen()
     });
     i.appendChild(r), i.appendChild(this._zoomLabel), i.appendChild(a), i.appendChild(o);
-    const n = u("div", { className: "toolbar-section toolbar-right" });
+    const n = d("div", { className: "toolbar-section toolbar-right" });
     this._themeBtn = x({
       icon: this.state.get("isDarkMode") ? K : Q,
       title: "Toggle Theme",
@@ -1218,7 +1225,7 @@ class Le {
       testId: "btn-save-edit",
       ariaLabel: "Save image",
       onClick: () => this.editor.save()
-    }), d = x({
+    }), u = x({
       icon: G,
       title: "Close",
       className: "toolbar-btn",
@@ -1226,7 +1233,7 @@ class Le {
       ariaLabel: "Close editor",
       onClick: () => this.editor.close()
     });
-    return n.appendChild(this._themeBtn), n.appendChild(this._cropBtn), n.appendChild(l), n.appendChild(c), n.appendChild(d), this.element.appendChild(e), this.element.appendChild(i), this.element.appendChild(n), this._subscribeToState(), this.element;
+    return n.appendChild(this._themeBtn), n.appendChild(this._cropBtn), n.appendChild(l), n.appendChild(c), n.appendChild(u), this.element.appendChild(e), this.element.appendChild(i), this.element.appendChild(n), this._subscribeToState(), this.element;
   }
   /**
    * Subscribe to state changes
@@ -1287,7 +1294,7 @@ class De {
    * @returns {HTMLElement}
    */
   render(e) {
-    this._onSelect = e, this.element = u("div", {
+    this._onSelect = e, this.element = d("div", {
       className: "category-carousel-container",
       "data-testid": "category-carousel"
     }), this._leftBtn = x({
@@ -1295,7 +1302,7 @@ class De {
       title: "Previous categories",
       className: "carousel-nav carousel-nav-left",
       onClick: () => this._scrollLeft()
-    }), this._carousel = u("div", { className: "category-carousel" }), L.forEach((i) => {
+    }), this._carousel = d("div", { className: "category-carousel" }), L.forEach((i) => {
       const r = W({
         label: i.name,
         icon: i.icon,
@@ -1308,14 +1315,14 @@ class De {
       title: "Next categories",
       className: "carousel-nav carousel-nav-right",
       onClick: () => this._scrollRight()
-    }), this._pagination = u("div", {
+    }), this._pagination = d("div", {
       className: "carousel-pagination",
       role: "tablist",
       "aria-label": "Category pages"
     });
     const t = Math.ceil(L.length / 3);
     for (let i = 0; i < t; i++) {
-      const r = u("button", {
+      const r = d("button", {
         type: "button",
         className: `pagination-dot ${i === 0 ? "active" : ""}`,
         role: "tab",
@@ -1422,12 +1429,12 @@ class Ue {
    * @returns {HTMLElement}
    */
   render({ onToggle: e, onSelect: t }) {
-    return this._onToggle = e, this._onSelect = t, this.element = u("div", { className: "filter-carousel-container" }), this._leftBtn = x({
+    return this._onToggle = e, this._onSelect = t, this.element = d("div", { className: "filter-carousel-container" }), this._leftBtn = x({
       icon: ce,
       title: "Previous filters",
       className: "carousel-nav carousel-nav-left",
       onClick: () => this._scrollLeft()
-    }), this._carousel = u("div", { className: "filter-carousel" }), this._rightBtn = x({
+    }), this._carousel = d("div", { className: "filter-carousel" }), this._rightBtn = x({
       icon: he,
       title: "Next filters",
       className: "carousel-nav carousel-nav-right",
@@ -1474,14 +1481,14 @@ class Ue {
    * @returns {HTMLElement}
    */
   _createFilterCard(e, { isActive: t, isSelected: i }) {
-    const r = u("div", {
+    const r = d("div", {
       className: `filter-card ${t ? "active" : ""} ${i ? "selected" : ""}`,
       "data-filter": e.id,
       "data-testid": `filter-${e.id}`,
       onClick: () => this._handleCardClick(e.id)
-    }), a = u("div", { className: "filter-preview" }), o = u("span", { className: "filter-preview-text" }, e.name.charAt(0));
+    }), a = d("div", { className: "filter-preview" }), o = d("span", { className: "filter-preview-text" }, e.name.charAt(0));
     a.appendChild(o);
-    const n = u("span", { className: "filter-name", title: e.name }, e.name), l = u("button", {
+    const n = d("span", { className: "filter-name", title: e.name }, e.name), l = d("button", {
       className: `filter-toggle ${t ? "active" : ""}`,
       onClick: (c) => {
         var p;
@@ -1579,7 +1586,7 @@ class Ve {
    * @returns {HTMLElement}
    */
   render({ onChange: e, onReset: t, onAction: i }) {
-    return this._onChange = e, this._onReset = t, this._onAction = i, this.element = u("div", { className: "filter-adjustments" }), this._subscribeToState(), this._renderControls(), this.element;
+    return this._onChange = e, this._onReset = t, this._onAction = i, this.element = d("div", { className: "filter-adjustments" }), this._subscribeToState(), this._renderControls(), this.element;
   }
   /**
    * Subscribe to state changes
@@ -1602,24 +1609,24 @@ class Ve {
     const e = this.state.get("selectedFilter");
     if (!e) {
       this.element.appendChild(
-        u("div", { className: "no-filter-selected" }, "Select a filter to adjust")
+        d("div", { className: "no-filter-selected" }, "Select a filter to adjust")
       );
       return;
     }
     const t = this.filterManager.getFilterDef(e);
     if (!t) {
       this.element.appendChild(
-        u("div", { className: "no-filter-selected" }, "Filter not found")
+        d("div", { className: "no-filter-selected" }, "Filter not found")
       );
       return;
     }
-    const i = u("div", { className: "adjustments-header" });
-    i.appendChild(u("span", { className: "adjustments-title" }, t.name)), i.appendChild(A({
+    const i = d("div", { className: "adjustments-header" });
+    i.appendChild(d("span", { className: "adjustments-title" }, t.name)), i.appendChild(A({
       label: "Reset",
       className: "btn-text",
       onClick: () => this._handleReset(e)
     })), this.element.appendChild(i);
-    const r = u("div", { className: "adjustments-grid" }), a = this.state.getFilterValues(e);
+    const r = d("div", { className: "adjustments-grid" }), a = this.state.getFilterValues(e);
     t.controls.forEach((o) => {
       const n = this._createControl(e, o, a[o.id] ?? o.default);
       n && (this._controls.set(o.id, n), r.appendChild(n));
@@ -1670,7 +1677,7 @@ class Ve {
           onChange: (l) => this._handleChange(e, t.id, l)
         });
       case "button":
-        const n = u("div", { className: "button-control" });
+        const n = d("div", { className: "button-control" });
         return n.appendChild(A({
           label: r,
           className: "btn-secondary",
@@ -1782,10 +1789,10 @@ class je {
    * @param {Object} callbacks - { onChange, onReset, onRemove, onAction }
    */
   build(e, { onChange: t, onReset: i, onRemove: r, onAction: a }) {
-    this._onChange = t, this._onReset = i, this._onRemove = r, this._onAction = a, this._container = e, this._drawer = u("div", { className: "mobile-filter-drawer" });
-    const o = u("div", { className: "drawer-header" });
-    this._titleEl = u("span", { className: "drawer-title" }, "Filter");
-    const n = u("div", { className: "drawer-header-actions" }), l = A({
+    this._onChange = t, this._onReset = i, this._onRemove = r, this._onAction = a, this._container = e, this._drawer = d("div", { className: "mobile-filter-drawer" });
+    const o = d("div", { className: "drawer-header" });
+    this._titleEl = d("span", { className: "drawer-title" }, "Filter");
+    const n = d("div", { className: "drawer-header-actions" }), l = A({
       label: "Reset",
       className: "btn-text",
       onClick: () => {
@@ -1799,14 +1806,14 @@ class je {
         var h;
         this._currentFilterId && ((h = this._onRemove) == null || h.call(this, this._currentFilterId), this.close());
       }
-    }), d = x({
+    }), u = x({
       icon: G,
       title: "Close",
       className: "btn-icon-sm",
       ariaLabel: "Close drawer",
       onClick: () => this.close()
     });
-    n.appendChild(l), n.appendChild(c), n.appendChild(d), o.appendChild(this._titleEl), o.appendChild(n), this._drawer.appendChild(o), this._body = u("div", { className: "drawer-body" }), this._drawer.appendChild(this._body), e.appendChild(this._drawer);
+    n.appendChild(l), n.appendChild(c), n.appendChild(u), o.appendChild(this._titleEl), o.appendChild(n), this._drawer.appendChild(o), this._body = d("div", { className: "drawer-body" }), this._drawer.appendChild(this._body), e.appendChild(this._drawer);
   }
   /**
    * Open the drawer for a specific filter
@@ -1856,7 +1863,7 @@ class je {
     const e = this.filterManager.getFilterDef(this._currentFilterId);
     if (!e) return;
     this._titleEl.textContent = e.name;
-    const t = u("div", { className: "adjustments-grid" }), i = this.state.getFilterValues(this._currentFilterId);
+    const t = d("div", { className: "adjustments-grid" }), i = this.state.getFilterValues(this._currentFilterId);
     e.controls.forEach((r) => {
       if (r.hidden) return;
       const a = this._createControl(this._currentFilterId, r, i[r.id] ?? r.default);
@@ -1920,7 +1927,7 @@ class je {
         });
       }
       case "button": {
-        const o = u("div", { className: "button-control" });
+        const o = d("div", { className: "button-control" });
         return o.appendChild(A({
           label: r,
           className: "btn-secondary",
@@ -1977,10 +1984,10 @@ class qe {
    * @returns {HTMLElement}
    */
   render({ onToggle: e, onSelect: t }) {
-    return this._onToggle = e, this._onSelect = t, this.element = u("div", {
+    return this._onToggle = e, this._onSelect = t, this.element = d("div", {
       className: "mobile-active-filters",
       "data-testid": "mobile-active-filters"
-    }), this._scrollContainer = u("div", { className: "mobile-active-filters-scroll" }), this.element.appendChild(this._scrollContainer), this._subscribeToState(), this._renderChips(), this.element;
+    }), this._scrollContainer = d("div", { className: "mobile-active-filters-scroll" }), this.element.appendChild(this._scrollContainer), this._subscribeToState(), this._renderChips(), this.element;
   }
   _subscribeToState() {
     const e = this.state.on("change:activeFilters", () => {
@@ -1996,7 +2003,7 @@ class qe {
     this._scrollContainer.innerHTML = "", this._chips.clear();
     const e = this.state.get("activeFilters");
     if (!e || e.size === 0) {
-      const t = u("div", {
+      const t = d("div", {
         className: "active-filter-placeholder"
       }, "No active filters");
       this._scrollContainer.appendChild(t);
@@ -2010,17 +2017,17 @@ class qe {
     }), this._updateSelectedState();
   }
   _createChip(e, t) {
-    const i = u("div", {
+    const i = d("div", {
       className: "active-filter-chip",
       "data-filter-id": e,
       "data-testid": `active-chip-${e}`
-    }), r = u("span", {
+    }), r = d("span", {
       className: "active-filter-chip-label",
       onClick: (o) => {
         var n;
         o.stopPropagation(), (n = this._onSelect) == null || n.call(this, e);
       }
-    }, t.name), a = u("button", {
+    }, t.name), a = d("button", {
       className: "active-filter-chip-check",
       "aria-label": `Remove ${t.name} filter`,
       onClick: (o) => {
@@ -2062,32 +2069,32 @@ class We {
    * @returns {HTMLElement}
    */
   render() {
-    this.element = u("div", {
+    this.element = d("div", {
       className: "crop-controls",
       "data-testid": "crop-controls"
     });
-    const e = u("div", { className: "crop-section" });
-    e.appendChild(u("label", { className: "section-label" }, "Shape"));
-    const t = u("div", { className: "chip-row" }), i = this.state.get("crop.shape");
+    const e = d("div", { className: "crop-section" });
+    e.appendChild(d("label", { className: "section-label" }, "Shape"));
+    const t = d("div", { className: "chip-row" }), i = this.state.get("crop.shape");
     He.forEach((c) => {
-      const d = W({
+      const u = W({
         label: c.name,
         icon: c.icon,
         active: i === c.id,
         onClick: () => this._selectShape(c.id)
       });
-      d.dataset.shape = c.id, d.dataset.testid = `crop-shape-${c.id}`, this._shapeChips.set(c.id, d), t.appendChild(d);
-    }), e.appendChild(t), this.element.appendChild(e), this.state.get("lockCropShape") && (e.style.display = "none"), this._shapeSection = e, this._aspectSection = u("div", { className: "crop-section" }), this._aspectSection.appendChild(u("label", { className: "section-label" }, "Aspect Ratio"));
-    const r = u("div", { className: "chip-row aspect-row" }), a = this.state.get("crop.aspect");
+      u.dataset.shape = c.id, u.dataset.testid = `crop-shape-${c.id}`, this._shapeChips.set(c.id, u), t.appendChild(u);
+    }), e.appendChild(t), this.element.appendChild(e), this.state.get("lockCropShape") && (e.style.display = "none"), this._shapeSection = e, this._aspectSection = d("div", { className: "crop-section" }), this._aspectSection.appendChild(d("label", { className: "section-label" }, "Aspect Ratio"));
+    const r = d("div", { className: "chip-row aspect-row" }), a = this.state.get("crop.aspect");
     $e.forEach((c) => {
-      const d = W({
+      const u = W({
         label: c.name,
         active: a === c.id,
         onClick: () => this._selectAspect(c.id)
       });
-      d.dataset.ratio = c.id, d.dataset.testid = `crop-ratio-${c.id}`, this._aspectChips.set(c.id, d), r.appendChild(d);
+      u.dataset.ratio = c.id, u.dataset.testid = `crop-ratio-${c.id}`, this._aspectChips.set(c.id, u), r.appendChild(u);
     }), this._aspectSection.appendChild(r), this.element.appendChild(this._aspectSection), this._updateAspectVisibility();
-    const o = u("div", { className: "crop-actions" }), n = A({
+    const o = d("div", { className: "crop-actions" }), n = A({
       label: "Cancel",
       className: "btn-secondary crop-cancel-btn",
       icon: G,
@@ -2170,18 +2177,18 @@ class Ze {
    * @returns {HTMLElement}
    */
   render({ onRemove: e, onReset: t, onClearAll: i, onUpdateValue: r, onSelect: a }) {
-    this._onRemove = e, this._onReset = t, this._onClearAll = i, this._onUpdateValue = r, this._onSelect = a, this.element = u("div", {
+    this._onRemove = e, this._onReset = t, this._onClearAll = i, this._onUpdateValue = r, this._onSelect = a, this.element = d("div", {
       className: "active-filters-panel",
       "data-testid": "active-filters-panel"
     });
-    const o = u("div", { className: "panel-header" });
-    o.appendChild(u("h3", { className: "panel-title" }, "Active Filters"));
+    const o = d("div", { className: "panel-header" });
+    o.appendChild(d("h3", { className: "panel-title" }, "Active Filters"));
     const n = A({
       label: "Clear All",
       className: "btn-text btn-danger",
       onClick: () => this._handleClearAll()
     });
-    return n.dataset.testid = "clear-all-filters", o.appendChild(n), this.element.appendChild(o), this._listContainer = u("div", { className: "active-filters-list" }), this.element.appendChild(this._listContainer), this._subscribeToState(), this._renderFilterList(), this.element;
+    return n.dataset.testid = "clear-all-filters", o.appendChild(n), this.element.appendChild(o), this._listContainer = d("div", { className: "active-filters-list" }), this.element.appendChild(this._listContainer), this._subscribeToState(), this._renderFilterList(), this.element;
   }
   /**
    * Subscribe to state changes
@@ -2217,7 +2224,7 @@ class Ze {
     const e = this.state.get("activeFilters");
     if (e.size === 0) {
       this._listContainer.appendChild(
-        u("div", { className: "no-filters-message" }, "No filters active")
+        d("div", { className: "no-filters-message" }, "No filters active")
       );
       return;
     }
@@ -2235,26 +2242,26 @@ class Ze {
    * @returns {HTMLElement}
    */
   _createFilterItem(e, t) {
-    const r = this.state.get("selectedFilter") === e, a = u("div", {
+    const r = this.state.get("selectedFilter") === e, a = d("div", {
       className: `active-filter-item ${r ? "selected" : ""}`,
       "data-active-filter": e,
       "data-testid": `active-filter-${e}`,
       onClick: (m) => {
         m.target.closest(".filter-item-actions") || this._handleSelect(e);
       }
-    }), o = u("div", { className: "filter-item-header" }), n = u("span", { className: "filter-item-name" }, t.name), l = u("div", { className: "filter-item-actions" }), c = x({
+    }), o = d("div", { className: "filter-item-header" }), n = d("span", { className: "filter-item-name" }, t.name), l = d("div", { className: "filter-item-actions" }), c = x({
       icon: ue,
       title: "Reset filter",
       className: "btn-icon-sm",
       onClick: () => this._handleReset(e)
-    }), d = x({
+    }), u = x({
       icon: Ie,
       title: "Remove filter",
       className: "btn-icon-sm btn-danger",
       onClick: () => this._handleRemove(e)
     });
-    l.appendChild(c), l.appendChild(d), o.appendChild(n), o.appendChild(l), a.appendChild(o);
-    const h = this.state.getFilterValues(e), p = u("div", { className: "filter-item-summary" });
+    l.appendChild(c), l.appendChild(u), o.appendChild(n), o.appendChild(l), a.appendChild(o);
+    const h = this.state.getFilterValues(e), p = d("div", { className: "filter-item-summary" });
     return p.textContent = this._getValuesSummary(t, h), a.appendChild(p), a._summaryEl = p, a;
   }
   /**
@@ -2463,13 +2470,13 @@ class Gt extends B {
    * Build DOM structure
    */
   _buildDOM() {
-    this._container.innerHTML = "", this._editorEl = u("div", {
+    this._container.innerHTML = "", this._editorEl = d("div", {
       className: `vanilla-image-editor ${this._state.get("isDarkMode") ? "dark" : "light"}`
     });
-    const e = u("div", { className: "editor-toolbar-container" });
+    const e = d("div", { className: "editor-toolbar-container" });
     this._editorEl.appendChild(e), this._toolbarContainer = e;
-    const t = u("div", { className: "editor-content" }), i = u("div", { className: "canvas-section" });
-    this._canvasContainer = u("div", { className: "canvas-container" }), this._cropOverlay = u("canvas", { className: "crop-overlay", "aria-hidden": "true" }), i.appendChild(this._canvasContainer), i.appendChild(this._cropOverlay), t.appendChild(i), this._controlsSection = u("div", { className: "controls-section" }), t.appendChild(this._controlsSection), this._editorEl.appendChild(t), this._fileInput = u("input", {
+    const t = d("div", { className: "editor-content" }), i = d("div", { className: "canvas-section" });
+    this._canvasContainer = d("div", { className: "canvas-container" }), this._cropOverlay = d("canvas", { className: "crop-overlay", "aria-hidden": "true" }), i.appendChild(this._canvasContainer), i.appendChild(this._cropOverlay), t.appendChild(i), this._controlsSection = d("div", { className: "controls-section" }), t.appendChild(this._controlsSection), this._editorEl.appendChild(t), this._fileInput = d("input", {
       type: "file",
       accept: "image/*",
       className: "hidden-file-input",
@@ -2481,9 +2488,9 @@ class Gt extends B {
    * Initialize UI components
    */
   _initUI() {
-    this._toolbar = new Le(this._state, this), this._toolbarContainer.appendChild(this._toolbar.render()), this._filterControlsEl = u("div", { className: "filter-controls-container" }), this._categoryCarousel = new De(this._state, this), this._filterControlsEl.appendChild(this._categoryCarousel.render((r) => {
+    this._toolbar = new Le(this._state, this), this._toolbarContainer.appendChild(this._toolbar.render()), this._filterControlsEl = d("div", { className: "filter-controls-container" }), this._categoryCarousel = new De(this._state, this), this._filterControlsEl.appendChild(this._categoryCarousel.render((r) => {
     }));
-    const e = u("div", { className: "filter-layout" }), t = u("div", { className: "filter-left-column" });
+    const e = d("div", { className: "filter-layout" }), t = d("div", { className: "filter-left-column" });
     this._filterCarousel = new Ue(this._state, this._filterManager), t.appendChild(this._filterCarousel.render({
       onToggle: (r, a) => this._handleFilterToggle(r, a),
       onSelect: (r) => {
@@ -2494,7 +2501,7 @@ class Gt extends B {
       onReset: (r) => this._handleFilterReset(r),
       onAction: (r, a) => this._handleFilterAction(r, a)
     })), e.appendChild(t);
-    const i = u("div", { className: "filter-right-column" });
+    const i = d("div", { className: "filter-right-column" });
     this._activeFiltersPanel = new Ze(this._state, this._filterManager), i.appendChild(this._activeFiltersPanel.render({
       onRemove: (r) => this._handleFilterToggle(r, !1),
       onReset: (r) => this._handleFilterReset(r),
@@ -2775,9 +2782,9 @@ class Gt extends B {
   _showLoadingOverlay(e) {
     var i;
     if (!this._loadingOverlay)
-      this._loadingOverlay = u("div", { className: "editor-loading-overlay" }, [
-        u("div", { className: "editor-loading-spinner" }),
-        u("div", { className: "editor-loading-text" }, e)
+      this._loadingOverlay = d("div", { className: "editor-loading-overlay" }, [
+        d("div", { className: "editor-loading-spinner" }),
+        d("div", { className: "editor-loading-text" }, e)
       ]);
     else {
       const r = this._loadingOverlay.querySelector(".editor-loading-text");
@@ -2797,8 +2804,8 @@ class Gt extends B {
    * Destroy the editor and clean up
    */
   destroy() {
-    var e, t, i, r, a, o, n, l, c, d;
-    (e = this._resizeObserver) == null || e.disconnect(), this._renderer.destroy(), this._cropManager.disable(), this._handleWindowResize && window.removeEventListener("resize", this._handleWindowResize), (t = this._toolbar) == null || t.destroy(), (i = this._categoryCarousel) == null || i.destroy(), (r = this._filterCarousel) == null || r.destroy(), (a = this._filterAdjustments) == null || a.destroy(), (o = this._mobileFilterDrawer) == null || o.destroy(), (n = this._mobileActiveFilters) == null || n.destroy(), (l = this._cropControls) == null || l.destroy(), (c = this._activeFiltersPanel) == null || c.destroy(), (d = this._editorEl) == null || d.remove(), this._container = null, this._state = null, this.emit("destroyed"), this.removeAllListeners();
+    var e, t, i, r, a, o, n, l, c, u;
+    (e = this._resizeObserver) == null || e.disconnect(), this._renderer.destroy(), this._cropManager.disable(), this._handleWindowResize && window.removeEventListener("resize", this._handleWindowResize), (t = this._toolbar) == null || t.destroy(), (i = this._categoryCarousel) == null || i.destroy(), (r = this._filterCarousel) == null || r.destroy(), (a = this._filterAdjustments) == null || a.destroy(), (o = this._mobileFilterDrawer) == null || o.destroy(), (n = this._mobileActiveFilters) == null || n.destroy(), (l = this._cropControls) == null || l.destroy(), (c = this._activeFiltersPanel) == null || c.destroy(), (u = this._editorEl) == null || u.remove(), this._container = null, this._state = null, this.emit("destroyed"), this.removeAllListeners();
   }
 }
 const S = /* @__PURE__ */ new Map(), I = /* @__PURE__ */ new Map();
@@ -2947,8 +2954,8 @@ f({
               return;
             const l = this._customParams ?? { ...k }, c = P(n, l[o]);
             l[o] = c, this._customParams = l;
-            const d = this;
-            o in d && (d[o] = c);
+            const u = this;
+            o in u && (u[o] = c);
           } catch {
           }
         }, i;
@@ -2958,8 +2965,8 @@ f({
           try {
             if (!J(n))
               return;
-            const c = this._customParams ?? { ...k }, d = P(l, c[n]);
-            c[n] = d, this._customParams = c, ee(this, c);
+            const c = this._customParams ?? { ...k }, u = P(l, c[n]);
+            c[n] = u, this._customParams = c, ee(this, c);
           } catch {
           }
         }, r;
@@ -3510,8 +3517,8 @@ f({
           switch (this._customParams = l, l[o] = n, o) {
             case "color":
               if (typeof n == "string") {
-                const d = parseInt(n.replace("#", "0x"), 16);
-                this.color = d;
+                const u = parseInt(n.replace("#", "0x"), 16);
+                this.color = u;
               }
               break;
             case "alpha":
@@ -4191,28 +4198,28 @@ f({
         endY: o
       }, n.updateUIParam = function(l, c) {
         try {
-          const d = Number(c), h = this._customParams || {};
-          switch (this._customParams = h, h[l] = d, l) {
+          const u = Number(c), h = this._customParams || {};
+          switch (this._customParams = h, h[l] = u, l) {
             case "blur":
-              this.blur = d;
+              this.blur = u;
               break;
             case "gradientBlur":
-              this.gradientBlur = d;
+              this.gradientBlur = u;
               break;
             case "startX":
-              this.start && typeof this.start == "object" && (this.start.x = d);
+              this.start && typeof this.start == "object" && (this.start.x = u);
               break;
             case "startY":
-              this.start && typeof this.start == "object" && (this.start.y = d);
+              this.start && typeof this.start == "object" && (this.start.y = u);
               break;
             case "endX":
-              this.end && typeof this.end == "object" && (this.end.x = d);
+              this.end && typeof this.end == "object" && (this.end.x = u);
               break;
             case "endY":
-              this.end && typeof this.end == "object" && (this.end.y = d);
+              this.end && typeof this.end == "object" && (this.end.y = u);
               break;
             default:
-              l in this && (this[l] = d);
+              l in this && (this[l] = u);
               break;
           }
         } catch {
@@ -4526,8 +4533,8 @@ f({
             }));
             break;
           case "removeColorStop":
-            const d = [...this.stops];
-            d.length > 2 && (d.pop(), this.stops = d, a.colorStops = this.stops.map((h) => ({
+            const u = [...this.stops];
+            u.length > 2 && (u.pop(), this.stops = u, a.colorStops = this.stops.map((h) => ({
               offset: h.offset,
               color: typeof h.color == "number" ? "#" + h.color.toString(16).padStart(6, "0") : h.color,
               alpha: h.alpha
@@ -5596,7 +5603,7 @@ f({
         resolution: r,
         kernelSize: a
       }, o.updateUIParam = function(n, l) {
-        var c, d;
+        var c, u;
         try {
           const h = Number(l), p = this._customParams || {};
           switch (this._customParams = p, p[n] = h, n) {
@@ -5604,7 +5611,7 @@ f({
               this.strength && typeof this.strength == "object" && (this.strength.x = h, (c = this._updateStrength) == null || c.call(this));
               break;
             case "strengthY":
-              this.strength && typeof this.strength == "object" && (this.strength.y = h, (d = this._updateStrength) == null || d.call(this));
+              this.strength && typeof this.strength == "object" && (this.strength.y = h, (u = this._updateStrength) == null || u.call(this));
               break;
             case "quality":
               this.quality = h;
@@ -6495,8 +6502,8 @@ f({
             break;
           case "redX":
           case "redY":
-            const d = this.red;
-            n === "redX" ? d.x = l : d.y = l, this.red = d;
+            const u = this.red;
+            n === "redX" ? u.x = l : u.y = l, this.red = u;
             break;
           case "greenX":
           case "greenY":
@@ -7039,21 +7046,21 @@ f({
         textureType: e,
         color: t,
         alpha: i
-      }, l.updateUIParam = function(c, d) {
+      }, l.updateUIParam = function(c, u) {
         try {
           const h = this._customParams || {};
-          switch (this._customParams = h, h[c] = d, c) {
+          switch (this._customParams = h, h[c] = u, c) {
             case "textureType":
-              h.textureType = d;
+              h.textureType = u;
               const p = document.createElement("canvas");
               p.width = 256, p.height = 256;
               const m = p.getContext("2d");
               if (m) {
-                if (d === "spotlight") {
+                if (u === "spotlight") {
                   m.fillStyle = "black", m.fillRect(0, 0, 256, 256);
                   const b = m.createRadialGradient(128, 128, 5, 128, 128, 80);
                   b.addColorStop(0, "white"), b.addColorStop(0.5, "rgba(255, 255, 255, 0.5)"), b.addColorStop(1, "rgba(0, 0, 0, 0)"), m.fillStyle = b, m.beginPath(), m.arc(128, 128, 100, 0, Math.PI * 2), m.fill();
-                } else if (d === "softlight") {
+                } else if (u === "softlight") {
                   const b = m.createLinearGradient(0, 0, 256, 256);
                   b.addColorStop(0, "white"), b.addColorStop(0.3, "rgba(220, 220, 220, 1)"), b.addColorStop(0.7, "rgba(150, 150, 150, 1)"), b.addColorStop(1, "rgba(80, 80, 80, 1)"), m.fillStyle = b, m.fillRect(0, 0, 256, 256);
                 } else {
@@ -7070,18 +7077,18 @@ f({
               }
               break;
             case "color":
-              h.color = d;
+              h.color = u;
               try {
-                typeof d == "string" && d.startsWith("#") ? this.color = parseInt(d.replace("#", "0x"), 16) : this.color = 0;
+                typeof u == "string" && u.startsWith("#") ? this.color = parseInt(u.replace("#", "0x"), 16) : this.color = 0;
               } catch {
                 this.color = 0;
               }
               break;
             case "alpha":
-              this.alpha = Number(d);
+              this.alpha = Number(u);
               break;
             default:
-              c in this && (this[c] = d);
+              c in this && (this[c] = u);
               break;
           }
         } catch {
@@ -7776,7 +7783,7 @@ f({
   // Create an instance of the ShockwaveFilter with the provided parameters
   createFilter: (s) => {
     try {
-      const e = s.centerX ?? 0.5, t = s.centerY ?? 0.5, i = { x: e, y: t }, r = s.amplitude ?? 30, a = s.wavelength ?? 160, o = s.speed ?? 500, n = s.brightness ?? 1, l = s.radius ?? -1, c = s.time ?? 0, d = new Vt({
+      const e = s.centerX ?? 0.5, t = s.centerY ?? 0.5, i = { x: e, y: t }, r = s.amplitude ?? 30, a = s.wavelength ?? 160, o = s.speed ?? 500, n = s.brightness ?? 1, l = s.radius ?? -1, c = s.time ?? 0, u = new Vt({
         center: i,
         amplitude: r,
         wavelength: a,
@@ -7785,7 +7792,7 @@ f({
         radius: l,
         time: c
       });
-      return d._customParams = { ...s }, d.animating = s.animating ?? !1, d.updateUIParam = function(h, p) {
+      return u._customParams = { ...s }, u.animating = s.animating ?? !1, u.updateUIParam = function(h, p) {
         const m = this._customParams || {};
         switch (this._customParams = m, m[h] = p, h) {
           case "centerX":
@@ -7810,7 +7817,7 @@ f({
             break;
         }
         return !0;
-      }, d;
+      }, u;
     } catch {
       return null;
     }
@@ -8407,4 +8414,4 @@ export {
   Jt as i,
   f as r
 };
-//# sourceMappingURL=editor-BgjKZltI.js.map
+//# sourceMappingURL=editor-BWpslm--.js.map