@codingfactory/mediables-vue 2.3.2 → 2.3.3

package/dist/{editor-CfH1RN8F.js → editor-DJXRx8vN.js}

@@ -1,9 +1,9 @@
-var he = Object.defineProperty;
-var de = (r, e, t) => e in r ? he(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t;
-var D = (r, e, t) => de(r, typeof e != "symbol" ? e + "" : e, t);
+var me = Object.defineProperty;
+var ge = (s, e, t) => e in s ? me(s, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[e] = t;
+var U = (s, e, t) => ge(s, typeof e != "symbol" ? e + "" : e, t);
 import * as g from "pixi-filters";
-import * as C from "pixi.js";
-import { GlProgram as ue } from "pixi.js";
+import * as w from "pixi.js";
+import { GlProgram as be } from "pixi.js";
 class B {
   constructor() {
     this._events = /* @__PURE__ */ new Map();
@@ -17,16 +17,16 @@ class B {
   }
   emit(e, ...t) {
     const i = this._events.get(e);
-    i && i.forEach((s) => {
+    i && i.forEach((r) => {
       try {
-        s(...t);
+        r(...t);
       } catch {
       }
     });
   }
   once(e, t) {
-    const i = (...s) => {
-      this.off(e, i), t(...s);
+    const i = (...r) => {
+      this.off(e, i), t(...r);
     };
     return this.on(e, i);
   }
@@ -34,7 +34,7 @@ class B {
     e ? this._events.delete(e) : this._events.clear();
   }
 }
-class pe extends B {
+class ye extends B {
   constructor() {
     super(), this._state = {
       // Image state
@@ -76,9 +76,9 @@ class pe extends B {
     if (e.includes(".")) {
       const t = e.split(".");
       let i = this._state;
-      for (const s of t) {
+      for (const r of t) {
         if (i == null) return;
-        i = i[s];
+        i = i[r];
       }
       return i;
     }
@@ -92,9 +92,9 @@ class pe extends B {
   set(e, t) {
     const i = this.get(e);
     if (e.includes(".")) {
-      const s = e.split("."), a = s.pop();
+      const r = e.split("."), a = r.pop();
       let o = this._state;
-      for (const n of s)
+      for (const n of r)
         o[n] === void 0 && (o[n] = {}), o = o[n];
       o[a] = t;
     } else
@@ -160,10 +160,10 @@ class pe extends B {
       this.set("isDarkMode", this._state.theme === "dark");
   }
 }
-function fe() {
-  return new pe();
+function _e() {
+  return new ye();
 }
-class me extends B {
+class xe extends B {
   constructor() {
     super(), this.app = null, this.sprite = null, this.originalTexture = null, this.baseTexture = null, this.fitScale = 1, this.zoom = 1, this._container = null, this._mountPromise = null;
   }
@@ -181,8 +181,8 @@ class me extends B {
    * canvas getter which throws when renderer is undefined.
    */
   _getCssSize() {
-    var s, a, o, n, l, c;
-    const e = (a = (s = this.app) == null ? void 0 : s.renderer) == null ? void 0 : a.canvas, t = (e == null ? void 0 : e.clientWidth) ?? ((n = (o = this.app) == null ? void 0 : o.screen) == null ? void 0 : n.width) ?? 0, i = (e == null ? void 0 : e.clientHeight) ?? ((c = (l = this.app) == null ? void 0 : l.screen) == null ? void 0 : c.height) ?? 0;
+    var r, a, o, n, l, c;
+    const e = (a = (r = this.app) == null ? void 0 : r.renderer) == null ? void 0 : a.canvas, t = (e == null ? void 0 : e.clientWidth) ?? ((n = (o = this.app) == null ? void 0 : o.screen) == null ? void 0 : n.width) ?? 0, i = (e == null ? void 0 : e.clientHeight) ?? ((c = (l = this.app) == null ? void 0 : l.screen) == null ? void 0 : c.height) ?? 0;
     return { w: t, h: i };
   }
   /**
@@ -204,15 +204,15 @@ class me extends B {
     if (!this.app || !e) return 1;
     const { w: t, h: i } = this._getCssSize();
     if (t <= 1 || i <= 1) return 1;
-    let s = Math.min(t / e.width, i / e.height) * 0.9;
-    return (!Number.isFinite(s) || s <= 0) && (s = 1), s;
+    let r = Math.min(t / e.width, i / e.height) * 0.9;
+    return (!Number.isFinite(r) || r <= 0) && (r = 1), r;
   }
   /**
    * Apply view transform (position and scale) to sprite
    */
   applyViewTransform(e = {}) {
     if (!this.app || !this.sprite || !this.originalTexture) return;
-    const t = this.fitScale * this.zoom, { w: i, h: s } = this._getCssSize(), a = e.keepCenter ? { x: this.sprite.x + this.sprite.width / 2, y: this.sprite.y + this.sprite.height / 2 } : e.center ?? { x: i / 2, y: s / 2 };
+    const t = this.fitScale * this.zoom, { w: i, h: r } = this._getCssSize(), a = e.keepCenter ? { x: this.sprite.x + this.sprite.width / 2, y: this.sprite.y + this.sprite.height / 2 } : e.center ?? { x: i / 2, y: r / 2 };
     this.sprite.width = this.originalTexture.width * t, this.sprite.height = this.originalTexture.height * t, this.sprite.x = a.x - this.sprite.width / 2, this.sprite.y = a.y - this.sprite.height / 2, this.render();
   }
   /**
@@ -239,12 +239,12 @@ class me extends B {
     this._container = e;
     const i = async () => {
       var l;
-      const s = window.PIXI;
-      if (!s)
+      const r = window.PIXI;
+      if (!r)
         throw new Error("PIXI.js not found. Please ensure PIXI is loaded globally.");
-      (l = s.Assets) != null && l.setPreferences && s.Assets.setPreferences({ crossOrigin: "anonymous" });
+      (l = r.Assets) != null && l.setPreferences && r.Assets.setPreferences({ crossOrigin: "anonymous" });
       const a = e.clientWidth || 600, o = e.clientHeight || 400;
-      this.app = new s.Application(), await this.app.init({
+      this.app = new r.Application(), await this.app.init({
         width: a,
         height: o,
         backgroundColor: t,
@@ -266,14 +266,14 @@ class me extends B {
     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;
-    const s = t.Texture.from(i);
-    if (!s)
+    const r = t.Texture.from(i);
+    if (!r)
       return;
-    this.originalTexture = s, this.baseTexture = s, this.sprite && (this.app.stage.removeChild(this.sprite), this.sprite.destroy()), this.sprite = new t.Sprite(s), this.app.stage.addChild(this.sprite), this.fitScale = this.getFitScaleFor(s), this.zoom = 1;
+    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;
-    const n = this.getFitScaleFor(s);
-    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: s.width, height: s.height });
+    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 });
   }
   /**
    * Export the current image with filters applied
@@ -283,7 +283,7 @@ class me extends B {
    * @param {boolean} dontUpscale - Don't upscale smaller images
    * @returns {string|null} Data URL
    */
-  exportImage(e = "png", t = 0.92, i = 0, s = !0) {
+  exportImage(e = "png", t = 0.92, i = 0, r = !0) {
     var m, b, _;
     if (!((m = this.app) != null && m.renderer) || !this.originalTexture)
       return null;
@@ -294,7 +294,7 @@ class me extends B {
     if (i > 0) {
       const x = Math.max(o, n);
       let y = i / x;
-      s && (y = Math.min(1, y)), l = Math.round(o * y), c = Math.round(n * y);
+      r && (y = Math.min(1, y)), l = Math.round(o * y), c = Math.round(n * y);
     }
     const d = new a.Container(), h = new a.Sprite(this.originalTexture);
     if (h.scale.set(l / o, c / n), (_ = (b = this.sprite) == null ? void 0 : b.filters) != null && _.length) {
@@ -315,10 +315,10 @@ class me extends B {
       if (typeof x.toDataURL == "function")
         y = x.toDataURL(`image/${e}`, t);
       else if (typeof x.getContext == "function") {
-        const F = document.createElement("canvas");
-        F.width = x.width, F.height = x.height;
-        const T = F.getContext("2d");
-        T && (T.drawImage(x, 0, 0), y = F.toDataURL(`image/${e}`, t));
+        const A = document.createElement("canvas");
+        A.width = x.width, A.height = x.height;
+        const I = A.getContext("2d");
+        I && (I.drawImage(x, 0, 0), y = A.toDataURL(`image/${e}`, t));
       }
       return y || null;
     } catch {
@@ -332,8 +332,8 @@ class me extends B {
    * @param {HTMLElement} container
    */
   resizeTo(e) {
-    var s;
-    if (!((s = this.app) != null && s.renderer) || !e) return;
+    var r;
+    if (!((r = this.app) != null && r.renderer) || !e) return;
     const t = e.clientWidth, i = e.clientHeight;
     if (!(t === Math.round(this.app.screen.width) && i === Math.round(this.app.screen.height)) && !(t <= 0 || i <= 0) && (this.app.renderer.resize(t, i), this.originalTexture && this.sprite)) {
       const a = {
@@ -379,7 +379,7 @@ class me extends B {
     this.sprite = null, this.originalTexture = null, this.baseTexture = null, this._container = null, this.removeAllListeners();
   }
 }
-const ge = {
+const Ce = {
   adjust: ["adjust", "advanced"],
   // adjustment, adjustmentAdvanced, alpha, colorMatrix
   blur: ["blur"],
@@ -395,7 +395,7 @@ const ge = {
   stylize: ["stylize"]
   // ascii, crt, crossHatch, dot, emboss
 };
-class be extends B {
+class we extends B {
   constructor(e, t) {
     super(), this.state = e, this.renderer = t, this.instances = {}, this._filterRegistry = null;
   }
@@ -430,11 +430,11 @@ class be extends B {
    */
   getFiltersByCategory(e) {
     if (!this._filterRegistry) return [];
-    const t = ge[e] || [e], i = [], s = /* @__PURE__ */ new Set();
+    const t = Ce[e] || [e], i = [], r = /* @__PURE__ */ new Set();
     for (const a of t) {
       const o = this._filterRegistry.getFiltersByCategory(a) || [];
       for (const n of o)
-        s.has(n.id) || (s.add(n.id), i.push(n));
+        r.has(n.id) || (r.add(n.id), i.push(n));
     }
     return i;
   }
@@ -458,13 +458,13 @@ class be extends B {
       e[t] = i;
       return;
     }
-    const s = t.replace(/\[(\d+)\]/g, ".$1").split(".").filter(Boolean);
+    const r = t.replace(/\[(\d+)\]/g, ".$1").split(".").filter(Boolean);
     let a = e;
-    for (let n = 0; n < s.length - 1; n++) {
-      const l = s[n];
+    for (let n = 0; n < r.length - 1; n++) {
+      const l = r[n];
       if (!(l in a) || (a = a[l], a == null)) return;
     }
-    const o = s[s.length - 1];
+    const o = r[r.length - 1];
     a[o] = i;
   }
   /**
@@ -474,8 +474,8 @@ class be extends B {
   initializeValues(e) {
     const t = this.getFilterDef(e);
     t && t.controls.forEach((i) => {
-      const s = this.state.getFilterValues(e);
-      i.id in s || this.state.setFilterValue(e, i.id, i.default);
+      const r = this.state.getFilterValues(e);
+      i.id in r || this.state.setFilterValue(e, i.id, i.default);
     });
   }
   /**
@@ -504,12 +504,12 @@ class be extends B {
    * @returns {boolean} True if updated in-place
    */
   updateValue(e, t, i) {
-    const s = this._normalizeValue(i);
-    this.state.setFilterValue(e, t, s);
+    const r = this._normalizeValue(i);
+    this.state.setFilterValue(e, t, r);
     const a = this.instances[e];
     if (a) {
       const o = this.getFilterDef(e), n = o == null ? void 0 : o.controls.find((c) => c.id === t), l = (n == null ? void 0 : n.property) || t;
-      return typeof a.updateUIParam == "function" ? (a.updateUIParam(l, s), !0) : (this._setDeepProp(a, l, s), a.uniforms && l in a.uniforms && (a.uniforms[l] = s), !0);
+      return typeof a.updateUIParam == "function" ? (a.updateUIParam(l, r), !0) : (this._setDeepProp(a, l, r), a.uniforms && l in a.uniforms && (a.uniforms[l] = r), !0);
     }
     return !1;
   }
@@ -575,7 +575,7 @@ class be extends B {
     return this.instances[e] || null;
   }
 }
-const N = class N extends B {
+const R = class R extends B {
   constructor(e, t) {
     super(), this.state = e, this.renderer = t, this._overlayCanvas = null, this._isDragging = !1, this._dragStart = null, this._dragMode = null, this._startRect = null, this._hoverMode = null, this._lastAutoZoomCheck = 0, this.HANDLE_SIZE = 14, this.EDGE_HIT_PAD = 10, this._onPointerDown = this._handlePointerDown.bind(this), this._onPointerMove = this._handlePointerMove.bind(this), this._onPointerUp = this._handlePointerUp.bind(this);
   }
@@ -603,9 +603,9 @@ const N = class N extends B {
     if (t[e] !== void 0) return t[e];
     const i = e.split(":");
     if (i.length === 2) {
-      const s = parseFloat(i[0]), a = parseFloat(i[1]);
-      if (Number.isFinite(s) && Number.isFinite(a) && a > 0)
-        return s / a;
+      const r = parseFloat(i[0]), a = parseFloat(i[1]);
+      if (Number.isFinite(r) && Number.isFinite(a) && a > 0)
+        return r / a;
     }
     return null;
   }
@@ -617,8 +617,8 @@ const N = class N extends B {
     if (!e || t === "free") return;
     const i = this._getAspectRatio(t);
     if (!i) return;
-    const s = e.width / e.height;
-    Math.abs(s - i) < 0.01 || (s > i ? e.width = e.height * i : e.height = e.width / i, this.state.set("crop.rect", e));
+    const r = e.width / e.height;
+    Math.abs(r - i) < 0.01 || (r > i ? e.width = e.height * i : e.height = e.width / i, this.state.set("crop.rect", e));
   }
   /**
    * Constrain crop rect to bounds
@@ -628,8 +628,8 @@ const N = class N extends B {
     if (!e) return;
     const t = this.renderer.sprite, i = this.renderer.app;
     if (!t || !i) return;
-    const s = this.state.get("crop.shape"), o = s === "circle" || !!this.state.get("autoZoomOnCropOverflow") ? { x: 0, y: 0, w: i.screen.width, h: i.screen.height } : { x: t.x, y: t.y, w: t.width, h: t.height };
-    if (e.x = Math.max(o.x, Math.min(e.x, o.x + o.w - e.width)), e.y = Math.max(o.y, Math.min(e.y, o.y + o.h - e.height)), e.width = Math.min(e.width, o.w), e.height = Math.min(e.height, o.h), s !== "free" || this.state.get("crop.aspect") === "1:1") {
+    const r = this.state.get("crop.shape"), o = r === "circle" || !!this.state.get("autoZoomOnCropOverflow") ? { x: 0, y: 0, w: i.screen.width, h: i.screen.height } : { x: t.x, y: t.y, w: t.width, h: t.height };
+    if (e.x = Math.max(o.x, Math.min(e.x, o.x + o.w - e.width)), e.y = Math.max(o.y, Math.min(e.y, o.y + o.h - e.height)), e.width = Math.min(e.width, o.w), e.height = Math.min(e.height, o.h), r !== "free" || this.state.get("crop.aspect") === "1:1") {
       const n = Math.min(e.width, e.height);
       e.width = n, e.height = n;
     }
@@ -648,14 +648,14 @@ const N = class N extends B {
    * @param {number} currentZoom - Current zoom level
    * @returns {number|null} Target zoom level, or null if no zoom needed
    */
-  static calcAutoZoom(e, t, i, s, a, o, n) {
-    if (!e || !s || !a || !o) return null;
+  static calcAutoZoom(e, t, i, r, a, o, n) {
+    if (!e || !r || !a || !o) return null;
     const l = e.width > t, c = e.height > i;
     if (!l && !c) return null;
-    const d = N.AUTO_ZOOM_PADDING;
+    const d = R.AUTO_ZOOM_PADDING;
     let h = n;
     if (l) {
-      const p = e.width / (d * s * o);
+      const p = e.width / (d * r * o);
       h = Math.min(h, p);
     }
     if (c) {
@@ -671,16 +671,16 @@ const N = class N extends B {
   _checkAutoZoom() {
     if (!this.state.get("autoZoomOnCropOverflow")) return;
     const e = Date.now();
-    if (e - this._lastAutoZoomCheck < N.AUTO_ZOOM_THROTTLE_MS) return;
+    if (e - this._lastAutoZoomCheck < R.AUTO_ZOOM_THROTTLE_MS) return;
     this._lastAutoZoomCheck = e;
-    const t = this.state.get("crop.rect"), i = this.renderer.sprite, s = this.renderer.originalTexture;
-    if (!t || !i || !s) return;
-    const a = N.calcAutoZoom(
+    const t = this.state.get("crop.rect"), i = this.renderer.sprite, r = this.renderer.originalTexture;
+    if (!t || !i || !r) return;
+    const a = R.calcAutoZoom(
       t,
       i.width,
       i.height,
-      s.width,
-      s.height,
+      r.width,
+      r.height,
       this.renderer.fitScale,
       this.renderer.zoom
     );
@@ -694,11 +694,11 @@ const N = class N extends B {
     if (!e) return;
     const t = this.renderer.app;
     if (!t) return;
-    const i = t.canvas, s = i.clientWidth, a = i.clientHeight, o = window.devicePixelRatio || 1;
-    (e.width !== Math.max(1, Math.floor(s * o)) || e.height !== Math.max(1, Math.floor(a * o))) && (e.width = Math.max(1, Math.floor(s * o)), e.height = Math.max(1, Math.floor(a * o)), e.style.width = s + "px", e.style.height = a + "px");
+    const i = t.canvas, r = i.clientWidth, a = i.clientHeight, o = window.devicePixelRatio || 1;
+    (e.width !== Math.max(1, Math.floor(r * o)) || e.height !== Math.max(1, Math.floor(a * o))) && (e.width = Math.max(1, Math.floor(r * o)), e.height = Math.max(1, Math.floor(a * o)), e.style.width = r + "px", e.style.height = a + "px");
     const n = e.getContext("2d");
     if (!n) return;
-    n.setTransform(o, 0, 0, o, 0, 0), n.clearRect(0, 0, s, a), n.fillStyle = "rgba(0, 0, 0, 0.5)", n.fillRect(0, 0, s, a);
+    n.setTransform(o, 0, 0, o, 0, 0), n.clearRect(0, 0, r, a), n.fillStyle = "rgba(0, 0, 0, 0.5)", n.fillRect(0, 0, r, a);
     const l = this.state.get("crop.rect");
     if (!l) return;
     const c = this.state.get("crop.shape");
@@ -742,8 +742,8 @@ const N = class N extends B {
   _hitHandle(e, t) {
     const i = this.state.get("crop.rect");
     if (!i) return null;
-    const s = (a, o, n, l, c) => Math.abs(a - n) <= c && Math.abs(o - l) <= c;
-    return s(e, t, i.x, i.y, this.HANDLE_SIZE) ? "resize-nw" : s(e, t, i.x + i.width, i.y, this.HANDLE_SIZE) ? "resize-ne" : s(e, t, i.x, i.y + i.height, this.HANDLE_SIZE) ? "resize-sw" : s(e, t, i.x + i.width, i.y + i.height, this.HANDLE_SIZE) ? "resize-se" : Math.abs(t - i.y) <= this.EDGE_HIT_PAD && e >= i.x && e <= i.x + i.width ? "n" : Math.abs(t - (i.y + i.height)) <= this.EDGE_HIT_PAD && e >= i.x && e <= i.x + i.width ? "s" : Math.abs(e - i.x) <= this.EDGE_HIT_PAD && t >= i.y && t <= i.y + i.height ? "w" : Math.abs(e - (i.x + i.width)) <= this.EDGE_HIT_PAD && t >= i.y && t <= i.y + i.height ? "e" : e >= i.x && e <= i.x + i.width && t >= i.y && t <= i.y + i.height ? "move" : null;
+    const r = (a, o, n, l, c) => Math.abs(a - n) <= c && Math.abs(o - l) <= c;
+    return r(e, t, i.x, i.y, this.HANDLE_SIZE) ? "resize-nw" : r(e, t, i.x + i.width, i.y, this.HANDLE_SIZE) ? "resize-ne" : r(e, t, i.x, i.y + i.height, this.HANDLE_SIZE) ? "resize-sw" : r(e, t, i.x + i.width, i.y + i.height, this.HANDLE_SIZE) ? "resize-se" : Math.abs(t - i.y) <= this.EDGE_HIT_PAD && e >= i.x && e <= i.x + i.width ? "n" : Math.abs(t - (i.y + i.height)) <= this.EDGE_HIT_PAD && e >= i.x && e <= i.x + i.width ? "s" : Math.abs(e - i.x) <= this.EDGE_HIT_PAD && t >= i.y && t <= i.y + i.height ? "w" : Math.abs(e - (i.x + i.width)) <= this.EDGE_HIT_PAD && t >= i.y && t <= i.y + i.height ? "e" : e >= i.x && e <= i.x + i.width && t >= i.y && t <= i.y + i.height ? "move" : null;
   }
   /**
    * Handle pointer down event
@@ -766,39 +766,39 @@ const N = class N extends B {
       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();
       return;
     }
-    const s = this.state.get("crop.rect");
-    if (!s) return;
+    const r = this.state.get("crop.rect");
+    if (!r) return;
     const a = i.x - this._dragStart.x, o = i.y - this._dragStart.y;
     switch (this._dragMode) {
       case "move":
-        s.x = this._startRect.x + a, s.y = this._startRect.y + o;
+        r.x = this._startRect.x + a, r.y = this._startRect.y + o;
         break;
       case "n":
-        s.y = this._startRect.y + o, s.height = this._startRect.height - o;
+        r.y = this._startRect.y + o, r.height = this._startRect.height - o;
         break;
       case "s":
-        s.height = this._startRect.height + o;
+        r.height = this._startRect.height + o;
         break;
       case "w":
-        s.x = this._startRect.x + a, s.width = this._startRect.width - a;
+        r.x = this._startRect.x + a, r.width = this._startRect.width - a;
         break;
       case "e":
-        s.width = this._startRect.width + a;
+        r.width = this._startRect.width + a;
         break;
       case "resize-nw":
-        s.x = this._startRect.x + a, s.y = this._startRect.y + o, s.width = this._startRect.width - a, s.height = this._startRect.height - o;
+        r.x = this._startRect.x + a, r.y = this._startRect.y + o, r.width = this._startRect.width - a, r.height = this._startRect.height - o;
         break;
       case "resize-ne":
-        s.y = this._startRect.y + o, s.width = this._startRect.width + a, s.height = this._startRect.height - o;
+        r.y = this._startRect.y + o, r.width = this._startRect.width + a, r.height = this._startRect.height - o;
         break;
       case "resize-sw":
-        s.x = this._startRect.x + a, s.width = this._startRect.width - a, s.height = this._startRect.height + o;
+        r.x = this._startRect.x + a, r.width = this._startRect.width - a, r.height = this._startRect.height + o;
         break;
       case "resize-se":
-        s.width = this._startRect.width + a, s.height = this._startRect.height + o;
+        r.width = this._startRect.width + a, r.height = this._startRect.height + o;
         break;
     }
-    s.width = Math.max(50, s.width), s.height = Math.max(50, s.height), this.state.set("crop.rect", s), this.state.get("crop.shape") === "circle" && this.state.get("crop.aspect") !== "1:1" && this.state.set("crop.aspect", "1:1"), this.applyAspectRatio(), this._dragMode !== "move" && this._checkAutoZoom(), this.constrainCropRect(), this.drawOverlay();
+    r.width = Math.max(50, r.width), r.height = Math.max(50, r.height), this.state.set("crop.rect", r), this.state.get("crop.shape") === "circle" && this.state.get("crop.aspect") !== "1:1" && this.state.set("crop.aspect", "1:1"), this.applyAspectRatio(), this._dragMode !== "move" && this._checkAutoZoom(), this.constrainCropRect(), this.drawOverlay();
   }
   /**
    * Handle pointer up event
@@ -817,8 +817,8 @@ const N = class N extends B {
       const a = Math.min(e.screen.width, e.screen.height) * 0.7, o = t.x + (t.width - a) / 2, n = t.y + (t.height - a) / 2;
       i = { x: o, y: n, width: a, height: a }, this.state.set("crop.rect", i), this.state.get("crop.shape") === "circle" && this.state.set("crop.aspect", "1:1"), this.state.get("crop.aspect") !== "free" && (this.applyAspectRatio(), this.constrainCropRect());
     }
-    const s = e.stage;
-    s.eventMode = "static", s.hitArea = e.screen, s.cursor = "crosshair", s.on("pointerdown", this._onPointerDown), s.on("pointermove", this._onPointerMove), s.on("pointerup", this._onPointerUp), s.on("pointerupoutside", this._onPointerUp), this.state.set("mode", "crop"), this.drawOverlay(), this.emit("enabled");
+    const r = e.stage;
+    r.eventMode = "static", r.hitArea = e.screen, r.cursor = "crosshair", r.on("pointerdown", this._onPointerDown), r.on("pointermove", this._onPointerMove), r.on("pointerup", this._onPointerUp), r.on("pointerupoutside", this._onPointerUp), this.state.set("mode", "crop"), this.drawOverlay(), this.emit("enabled");
   }
   /**
    * Disable crop mode
@@ -838,15 +838,15 @@ const N = class N extends B {
    * @returns {{ texture: PIXI.Texture, preservedZoom: number }|null}
    */
   apply() {
-    const e = this.renderer.app, t = this.renderer.sprite, i = this.renderer.originalTexture, s = this.state.get("crop.rect");
-    if (!s || !t || !e || !i) return null;
-    const a = window.PIXI, o = this.renderer.zoom, n = i.width / t.width, l = i.height / t.height, c = (s.x - t.x) * n, d = (s.y - t.y) * l;
-    let h = Math.round(Math.max(1, s.width * n)), p = Math.round(Math.max(1, s.height * l)), m = Math.round(c), S = Math.round(d);
+    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), S = Math.round(d);
     if (h <= 0 || p <= 0) return null;
     const b = new a.Container(), _ = new a.Sprite(i);
     if (this.state.get("crop.shape") === "circle") {
-      const T = Math.round(Math.max(h, p)), le = m + h / 2, ce = S + p / 2;
-      m = Math.round(le - T / 2), S = Math.round(ce - T / 2), h = p = T;
+      const I = Math.round(Math.max(h, p)), pe = m + h / 2, fe = S + p / 2;
+      m = Math.round(pe - I / 2), S = Math.round(fe - I / 2), h = p = I;
       const M = new a.Graphics();
       typeof M.circle == "function" && typeof M.fill == "function" ? M.circle(h / 2, p / 2, h / 2).fill(16777215) : (M.beginFill(16777215, 1), M.drawCircle(h / 2, p / 2, h / 2), M.endFill()), _.mask = M, b.addChild(M);
     }
@@ -857,8 +857,8 @@ const N = class N extends B {
       target: y,
       clear: !0
     }), b.destroy({ children: !0 }), this.renderer.originalTexture = y, e.stage.removeChild(t), t.destroy();
-    const F = new a.Sprite(y);
-    return e.stage.addChild(F), this.renderer.sprite = F, this.renderer.fitScale = this.renderer.getFitScaleFor(y), this.renderer.setZoom(o, { keepCenter: !1 }), this.renderer.applyViewTransform(), this.renderer.render(), this.disable(), this.emit("applied", { width: h, height: p }), { texture: y, preservedZoom: o };
+    const A = new a.Sprite(y);
+    return e.stage.addChild(A), this.renderer.sprite = A, this.renderer.fitScale = this.renderer.getFitScaleFor(y), this.renderer.setZoom(o, { keepCenter: !1 }), this.renderer.applyViewTransform(), this.renderer.render(), this.disable(), this.emit("applied", { width: h, height: p }), { texture: y, preservedZoom: o };
   }
   /**
    * Cancel crop
@@ -885,12 +885,12 @@ const N = class N extends B {
  * Padding factor for auto-zoom: image will be ~91% of crop size (1/1.1).
  * Higher values = more aggressive zoom-out, more padding around image.
  */
-D(N, "AUTO_ZOOM_PADDING", 1.1), /**
+U(R, "AUTO_ZOOM_PADDING", 1.1), /**
  * Minimum interval (ms) between auto-zoom adjustments during drag.
  */
-D(N, "AUTO_ZOOM_THROTTLE_MS", 100);
-let H = N;
-class ye {
+U(R, "AUTO_ZOOM_THROTTLE_MS", 100);
+let H = R;
+class Se {
   /**
    * Create a new RemoveBgManager
    * @param {Object} options
@@ -913,13 +913,13 @@ class ye {
    * @returns {Promise<{dataUrl: string, model: string, processMs: string}>}
    */
   async removeBackground(e, t = {}) {
-    const i = typeof e == "string" ? await this._dataUrlToBlob(e) : e, s = new FormData();
-    s.append("file", i, "image.png"), s.append("tier", t.tier || "balanced"), t.model && s.append("model", t.model), t.alpha_matting && (s.append("alpha_matting", "true"), s.append("alpha_f", String(t.alpha_f ?? 10)), s.append("alpha_fr", String(t.alpha_fr ?? 15)), s.append("alpha_erode_size", String(t.alpha_erode_size ?? 10)));
+    const i = typeof e == "string" ? await this._dataUrlToBlob(e) : e, r = new FormData();
+    r.append("file", i, "image.png"), r.append("tier", t.tier || "balanced"), t.model && r.append("model", t.model), t.alpha_matting && (r.append("alpha_matting", "true"), r.append("alpha_f", String(t.alpha_f ?? 10)), r.append("alpha_fr", String(t.alpha_fr ?? 15)), r.append("alpha_erode_size", String(t.alpha_erode_size ?? 10)));
     let a, o;
     try {
       a = await fetch(this._endpoint, {
         method: "POST",
-        body: s,
+        body: r,
         credentials: "include"
         // For Sanctum auth
       });
@@ -930,7 +930,7 @@ class ye {
       try {
         a = await fetch(this._fallbackEndpoint, {
           method: "POST",
-          body: s
+          body: r
         });
       } catch (c) {
         o || (o = c);
@@ -960,7 +960,7 @@ class ye {
    */
   async _dataUrlToBlob(e) {
     if (e.startsWith("data:")) {
-      const [i, s] = e.split(","), a = i.match(/:(.*?);/), o = a ? a[1] : "image/png", n = atob(s), l = new Uint8Array(n.length);
+      const [i, r] = e.split(","), a = i.match(/:(.*?);/), o = a ? a[1] : "image/png", n = atob(r), l = new Uint8Array(n.length);
       for (let c = 0; c < n.length; c++)
         l[c] = n.charCodeAt(c);
       return new Blob([l], { type: o });
@@ -974,8 +974,8 @@ class ye {
    */
   _blobToDataUrl(e) {
     return new Promise((t, i) => {
-      const s = new FileReader();
-      s.onload = () => t(s.result), s.onerror = () => i(new Error("Failed to read blob as data URL")), s.readAsDataURL(e);
+      const r = new FileReader();
+      r.onload = () => t(r.result), r.onerror = () => i(new Error("Failed to read blob as data URL")), r.readAsDataURL(e);
     });
   }
   /**
@@ -1000,39 +1000,39 @@ class ye {
     }
   }
 }
-function u(r, e = {}, ...t) {
-  const i = document.createElement(r);
-  for (const [s, a] of Object.entries(e))
+function u(s, e = {}, ...t) {
+  const i = document.createElement(s);
+  for (const [r, a] of Object.entries(e))
     if (a != null)
-      if (s === "className")
+      if (r === "className")
         i.className = a;
-      else if (s === "style" && typeof a == "object")
+      else if (r === "style" && typeof a == "object")
         Object.assign(i.style, a);
-      else if (s.startsWith("on") && typeof a == "function") {
-        const o = s.slice(2).toLowerCase();
+      else if (r.startsWith("on") && typeof a == "function") {
+        const o = r.slice(2).toLowerCase();
         i.addEventListener(o, a);
-      } else s === "dataset" && typeof a == "object" ? Object.assign(i.dataset, a) : i.setAttribute(s, a);
-  for (const s of t)
-    typeof s == "string" ? i.appendChild(document.createTextNode(s)) : s instanceof HTMLElement && i.appendChild(s);
+      } else r === "dataset" && typeof a == "object" ? Object.assign(i.dataset, a) : i.setAttribute(r, a);
+  for (const r of t)
+    typeof r == "string" ? i.appendChild(document.createTextNode(r)) : r instanceof HTMLElement && i.appendChild(r);
   return i;
 }
-function _e({ id: r, label: e, min: t = 0, max: i = 1, step: s = 0.01, value: a = 0.5, onChange: o }) {
-  const n = r.includes("-") ? r.split("-").slice(1).join("-") : r, l = u("div", {
+function se({ 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", {
     className: "slider-control slider-wrapper",
     "data-control": n,
     "data-testid": `slider-${n}`
   }), c = u(
     "div",
     { className: "slider-header" },
-    u("label", { for: r, className: "slider-label" }, e),
-    u("span", { className: "slider-value", id: `${r}-value` }, V(a))
+    u("label", { for: s, className: "slider-label" }, e),
+    u("span", { className: "slider-value", id: `${s}-value` }, V(a))
   ), d = u("input", {
     type: "range",
-    id: r,
+    id: s,
     className: "slider-input",
     min: String(t),
     max: String(i),
-    step: String(s),
+    step: String(r),
     value: String(a),
     onInput: (h) => {
       const p = parseFloat(h.target.value), m = l.querySelector(".slider-value");
@@ -1045,13 +1045,13 @@ function _e({ id: r, label: e, min: t = 0, max: i = 1, step: s = 0.01, value: a
     p && (p.textContent = V(h));
   }, l;
 }
-function V(r) {
-  return Number.isInteger(r) ? String(r) : r.toFixed(2);
+function V(s) {
+  return Number.isInteger(s) ? String(s) : s.toFixed(2);
 }
-function xe({ id: r, label: e, checked: t = !1, onChange: i }) {
-  const s = u("div", { className: "toggle-control" }), a = u("label", { className: "toggle-label", for: r }, e), o = u("input", {
+function ae({ 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", {
     type: "checkbox",
-    id: r,
+    id: s,
     className: "toggle-input",
     checked: t ? "checked" : void 0,
     onChange: (c) => i == null ? void 0 : i(c.target.checked)
@@ -1061,27 +1061,27 @@ function xe({ id: r, label: e, checked: t = !1, onChange: i }) {
       c.target !== o && (o.checked = !o.checked, i == null || i(o.checked));
     }
   }), l = u("span", { className: "toggle-slider" });
-  return n.appendChild(o), n.appendChild(l), s.appendChild(a), s.appendChild(n), s.setChecked = (c) => {
+  return n.appendChild(o), n.appendChild(l), r.appendChild(a), r.appendChild(n), r.setChecked = (c) => {
     o.checked = c;
-  }, s;
+  }, r;
 }
-function Ce({ id: r, label: e, value: t = "#000000", onChange: i }) {
-  const s = u("div", { className: "color-control" }), a = u("label", { className: "color-label", for: r }, e), o = u("input", {
+function oe({ 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", {
     type: "color",
-    id: r,
+    id: s,
     className: "color-input",
     value: t,
     onInput: (n) => i == null ? void 0 : i(n.target.value)
   });
-  return s.appendChild(a), s.appendChild(o), s.setValue = (n) => {
+  return r.appendChild(a), r.appendChild(o), r.setValue = (n) => {
     o.value = n;
-  }, s;
+  }, r;
 }
-function we({ id: r, label: e, options: t = [], value: i, onChange: s }) {
-  const a = u("div", { className: "select-control" }), o = u("label", { className: "select-label", for: r }, e), n = u("select", {
-    id: r,
+function ne({ 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", {
+    id: s,
     className: "select-input",
-    onChange: (l) => s == null ? void 0 : s(l.target.value)
+    onChange: (l) => r == null ? void 0 : r(l.target.value)
   });
   for (const l of t) {
     const c = u("option", { value: l.value }, l.label);
@@ -1091,12 +1091,12 @@ function we({ id: r, label: e, options: t = [], value: i, onChange: s }) {
     n.value = l;
   }, a;
 }
-function Y({ label: r, className: e = "", onClick: t, icon: i = null, disabled: s = !1 }) {
+function F({ label: s, className: e = "", onClick: t, icon: i = null, disabled: r = !1 }) {
   const a = u("button", {
     type: "button",
     className: `btn ${e}`.trim(),
     onClick: t,
-    disabled: s ? "disabled" : void 0
+    disabled: r ? "disabled" : void 0
   });
   if (i) {
     const o = u("span", { className: "btn-icon" });
@@ -1104,25 +1104,25 @@ function Y({ label: r, className: e = "", onClick: t, icon: i = null, disabled:
     const n = o.querySelector("svg");
     n && n.setAttribute("aria-hidden", "true"), a.appendChild(o);
   }
-  return r && a.appendChild(document.createTextNode(r)), a;
+  return s && a.appendChild(document.createTextNode(s)), a;
 }
-function w({ icon: r, title: e, className: t = "", onClick: i, disabled: s = !1, testId: a = null, ariaLabel: o = null }) {
+function C({ icon: s, title: e, className: t = "", onClick: i, disabled: r = !1, testId: a = null, ariaLabel: o = null }) {
   const n = {
     type: "button",
     className: `icon-btn ${t}`.trim(),
     title: e,
     "aria-label": o || e,
     onClick: i,
-    disabled: s ? "disabled" : void 0
+    disabled: r ? "disabled" : void 0
   };
   a && (n.dataset = { testid: a });
   const l = u("button", n);
-  l.innerHTML = r;
+  l.innerHTML = s;
   const c = l.querySelector("svg");
   return c && c.setAttribute("aria-hidden", "true"), l;
 }
-function $({ label: r, icon: e, active: t = !1, onClick: i }) {
-  const s = u("button", {
+function $({ label: s, icon: e, active: t = !1, onClick: i }) {
+  const r = u("button", {
     type: "button",
     className: `chip ${t ? "active" : ""}`.trim(),
     onClick: i
@@ -1131,13 +1131,13 @@ function $({ label: r, icon: e, active: t = !1, onClick: i }) {
     const a = u("span", { className: "chip-icon" });
     a.innerHTML = e;
     const o = a.querySelector("svg");
-    o && o.setAttribute("aria-hidden", "true"), s.appendChild(a);
+    o && o.setAttribute("aria-hidden", "true"), r.appendChild(a);
   }
-  return s.appendChild(u("span", { className: "chip-label" }, r)), s.setActive = (a) => {
-    s.classList.toggle("active", a);
-  }, s;
+  return r.appendChild(u("span", { className: "chip-label" }, s)), r.setActive = (a) => {
+    r.classList.toggle("active", a);
+  }, r;
 }
-const re = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="48" d="M328 112L184 256l144 144"/></svg>', se = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="48" d="M184 112l144 144-144 144"/></svg>', Se = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M221.09 64a157.09 157.09 0 10157.09 157.09A157.1 157.1 0 00221.09 64z"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M338.29 338.29L448 448M256 184v74m-37-37h74"/></svg>', ve = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M221.09 64a157.09 157.09 0 10157.09 157.09A157.1 157.1 0 00221.09 64z"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M338.29 338.29L448 448M184 221h74"/></svg>', ke = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M432 320v112H320M80 192V80h112M320 80h112v112M192 432H80V320"/></svg>', Pe = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M262.29 192.31a64 64 0 1057.4 57.4 64.13 64.13 0 00-57.4-57.4z"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M416.39 256a154.34 154.34 0 01-1.53 20.79l45.21 35.46a10.81 10.81 0 012.45 13.75l-42.77 74a10.81 10.81 0 01-13.14 4.59l-44.9-18.08a16.11 16.11 0 00-15.17 1.75A164.48 164.48 0 01325 400.8a15.94 15.94 0 00-8.82 12.14l-6.73 47.89a11.08 11.08 0 01-10.68 9.17h-85.54a11.11 11.11 0 01-10.69-8.87l-6.72-47.82a16.07 16.07 0 00-9-12.22 155.3 155.3 0 01-21.46-12.57 16 16 0 00-15.11-1.71l-44.89 18.07a10.81 10.81 0 01-13.14-4.58l-42.77-74a10.8 10.8 0 012.45-13.75l38.21-30a16.05 16.05 0 006-14.08c-.36-4.17-.58-8.33-.58-12.5s.21-8.27.58-12.35a16 16 0 00-6.07-13.94l-38.19-30A10.81 10.81 0 0149.48 186l42.77-74a10.81 10.81 0 0113.14-4.59l44.9 18.08a16.11 16.11 0 0015.17-1.75A164.48 164.48 0 01187 111.2a15.94 15.94 0 008.82-12.14l6.73-47.89A11.08 11.08 0 01213.23 42h85.54a11.11 11.11 0 0110.69 8.87l6.72 47.82a16.07 16.07 0 009 12.22 155.3 155.3 0 0121.46 12.57 16 16 0 0015.11 1.71l44.89-18.07a10.81 10.81 0 0113.14 4.58l42.77 74a10.8 10.8 0 01-2.45 13.75l-38.21 30a16.05 16.05 0 00-6.05 14.08c.33 4.14.55 8.3.55 12.47z"/></svg>', Me = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M400 320c0 88.37-55.63 144-144 144s-144-55.63-144-144c0-94.83 103.23-222.85 134.89-259.88a12 12 0 0118.23 0C296.77 97.15 400 225.17 400 320z"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M344 328a72 72 0 01-72 72"/></svg>', Fe = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32" d="M430.11 347.9c-6.6-6.1-16.3-7.6-24.6-9-11.5-1.9-15.9-4-22.6-10-14.3-12.7-14.3-31.1 0-43.8l30.3-26.9c46.4-41 46.4-108.2 0-149.2-34.2-30.1-80.1-45-127.8-45-55.7 0-113.9 20.3-158.8 60.1-83.5 73.8-83.5 194.7 0 268.5 41.5 36.7 97.5 55 152.9 55.4h1.7c55.4 0 110-17.9 148.8-52.4 14.4-12.7 11.99-36.6.1-47.7z"/><circle cx="144" cy="208" r="32"/><circle cx="152" cy="311" r="32"/><circle cx="224" cy="144" r="32"/><circle cx="256" cy="367" r="32"/><circle cx="328" cy="144" r="32"/></svg>', Ae = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M259.92 262.91L216.4 149.77a9 9 0 00-16.8 0l-43.52 113.14a9 9 0 01-5.17 5.17L37.77 311.6a9 9 0 000 16.8l113.14 43.52a9 9 0 015.17 5.17l43.52 113.14a9 9 0 0016.8 0l43.52-113.14a9 9 0 015.17-5.17l113.14-43.52a9 9 0 000-16.8l-113.14-43.52a9 9 0 01-5.17-5.17zM108 68L88 16 68 68 16 88l52 20 20 52 20-52 52-20-52-20zM426.67 117.33L400 48l-26.67 69.33L304 144l69.33 26.67L400 240l26.67-69.33L496 144l-69.33-26.67z"/></svg>', ze = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M176 112l80-80 80 80M255.98 32l.02 448M176 400l80 80 80-80M400 176l80 80-80 80M112 176l-80 80 80 80M32 256h448"/></svg>', Ne = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M315.27 33L96 304h128l-31.51 173.23a2.36 2.36 0 002.33 2.77h0a2.36 2.36 0 001.89-.95L416 208H288l31.66-173.25a2.45 2.45 0 00-2.44-2.75h0a2.42 2.42 0 00-1.95 1z"/></svg>', Re = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M144 48v272a48 48 0 0048 48h272"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M368 464V192a48 48 0 00-48-48H48"/></svg>', Te = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M380.93 57.37A32 32 0 00358.3 48H94.22A46.21 46.21 0 0048 94.22v323.56A46.21 46.21 0 0094.22 464h323.56A46.36 46.36 0 00464 417.78V153.7a32 32 0 00-9.37-22.63zM256 416a64 64 0 1164-64 63.92 63.92 0 01-64 64zm48-224H112a16 16 0 01-16-16v-64a16 16 0 0116-16h192a16 16 0 0116 16v64a16 16 0 01-16 16z"/></svg>', ae = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M368 368L144 144M368 144L144 368"/></svg>', oe = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M320 146s24.36-12-64-12a160 160 0 10160 160"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M256 58l80 80-80 80"/></svg>', Ie = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M112 112l20 320c.95 18.49 14.4 32 32 32h184c17.67 0 30.87-13.51 32-32l20-320"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="32" d="M80 112h352"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M192 112V72h0a23.93 23.93 0 0124-24h80a23.93 23.93 0 0124 24h0v40M256 176v224M184 176l8 224M328 176l-8 224"/></svg>', Xe = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M64 192v-72a40 40 0 0140-40h75.89a40 40 0 0122.19 6.72l27.84 18.56a40 40 0 0022.19 6.72H408a40 40 0 0140 40v40"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M479.9 226.55L463.68 392a40 40 0 01-39.93 40H88.25a40 40 0 01-39.93-40L32.1 226.55A32 32 0 0164 192h384.1a32 32 0 0131.8 34.55z"/></svg>', Z = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M416 128L192 384l-96-96"/></svg>', Ee = '<svg viewBox="0 0 512 512" width="20" height="20"><rect x="64" y="64" width="384" height="384" rx="48" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32"/></svg>', Ye = '<svg viewBox="0 0 512 512" width="20" height="20"><circle cx="256" cy="256" r="208" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/></svg>', Be = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M80 96h64l64 320h64l64-160h96"/></svg>', W = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="32" d="M256 48v48M256 416v48M403.08 108.92l-33.94 33.94M142.86 369.14l-33.94 33.94M464 256h-48M96 256H48M403.08 403.08l-33.94-33.94M142.86 142.86l-33.94-33.94"/><circle cx="256" cy="256" r="80" fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="32"/></svg>', G = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M160 136c0-30.62 4.51-61.61 16-88C99.57 81.27 48 159.32 48 248c0 119.29 96.71 216 216 216 88.68 0 166.73-51.57 200-128-26.39 11.49-57.38 16-88 16-119.29 0-216-96.71-216-216z"/></svg>', Oe = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M436 80H76a44.05 44.05 0 00-44 44v264a44.05 44.05 0 0044 44h360a44.05 44.05 0 0044-44V124a44.05 44.05 0 00-44-44z"/><circle cx="256" cy="256" r="80" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M220 80v56M292 80v56M220 376v56M292 376v56M80 144h56M80 224h56M80 304h56M376 144h56M376 224h56M376 304h56"/></svg>';
+const le = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="48" d="M328 112L184 256l144 144"/></svg>', ce = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="48" d="M184 112l144 144-144 144"/></svg>', ve = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M221.09 64a157.09 157.09 0 10157.09 157.09A157.1 157.1 0 00221.09 64z"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M338.29 338.29L448 448M256 184v74m-37-37h74"/></svg>', ke = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M221.09 64a157.09 157.09 0 10157.09 157.09A157.1 157.1 0 00221.09 64z"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M338.29 338.29L448 448M184 221h74"/></svg>', Pe = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M432 320v112H320M80 192V80h112M320 80h112v112M192 432H80V320"/></svg>', Me = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M262.29 192.31a64 64 0 1057.4 57.4 64.13 64.13 0 00-57.4-57.4z"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M416.39 256a154.34 154.34 0 01-1.53 20.79l45.21 35.46a10.81 10.81 0 012.45 13.75l-42.77 74a10.81 10.81 0 01-13.14 4.59l-44.9-18.08a16.11 16.11 0 00-15.17 1.75A164.48 164.48 0 01325 400.8a15.94 15.94 0 00-8.82 12.14l-6.73 47.89a11.08 11.08 0 01-10.68 9.17h-85.54a11.11 11.11 0 01-10.69-8.87l-6.72-47.82a16.07 16.07 0 00-9-12.22 155.3 155.3 0 01-21.46-12.57 16 16 0 00-15.11-1.71l-44.89 18.07a10.81 10.81 0 01-13.14-4.58l-42.77-74a10.8 10.8 0 012.45-13.75l38.21-30a16.05 16.05 0 006-14.08c-.36-4.17-.58-8.33-.58-12.5s.21-8.27.58-12.35a16 16 0 00-6.07-13.94l-38.19-30A10.81 10.81 0 0149.48 186l42.77-74a10.81 10.81 0 0113.14-4.59l44.9 18.08a16.11 16.11 0 0015.17-1.75A164.48 164.48 0 01187 111.2a15.94 15.94 0 008.82-12.14l6.73-47.89A11.08 11.08 0 01213.23 42h85.54a11.11 11.11 0 0110.69 8.87l6.72 47.82a16.07 16.07 0 009 12.22 155.3 155.3 0 0121.46 12.57 16 16 0 0015.11 1.71l44.89-18.07a10.81 10.81 0 0113.14 4.58l42.77 74a10.8 10.8 0 01-2.45 13.75l-38.21 30a16.05 16.05 0 00-6.05 14.08c.33 4.14.55 8.3.55 12.47z"/></svg>', Fe = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M400 320c0 88.37-55.63 144-144 144s-144-55.63-144-144c0-94.83 103.23-222.85 134.89-259.88a12 12 0 0118.23 0C296.77 97.15 400 225.17 400 320z"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M344 328a72 72 0 01-72 72"/></svg>', Ae = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32" d="M430.11 347.9c-6.6-6.1-16.3-7.6-24.6-9-11.5-1.9-15.9-4-22.6-10-14.3-12.7-14.3-31.1 0-43.8l30.3-26.9c46.4-41 46.4-108.2 0-149.2-34.2-30.1-80.1-45-127.8-45-55.7 0-113.9 20.3-158.8 60.1-83.5 73.8-83.5 194.7 0 268.5 41.5 36.7 97.5 55 152.9 55.4h1.7c55.4 0 110-17.9 148.8-52.4 14.4-12.7 11.99-36.6.1-47.7z"/><circle cx="144" cy="208" r="32"/><circle cx="152" cy="311" r="32"/><circle cx="224" cy="144" r="32"/><circle cx="256" cy="367" r="32"/><circle cx="328" cy="144" r="32"/></svg>', ze = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M259.92 262.91L216.4 149.77a9 9 0 00-16.8 0l-43.52 113.14a9 9 0 01-5.17 5.17L37.77 311.6a9 9 0 000 16.8l113.14 43.52a9 9 0 015.17 5.17l43.52 113.14a9 9 0 0016.8 0l43.52-113.14a9 9 0 015.17-5.17l113.14-43.52a9 9 0 000-16.8l-113.14-43.52a9 9 0 01-5.17-5.17zM108 68L88 16 68 68 16 88l52 20 20 52 20-52 52-20-52-20zM426.67 117.33L400 48l-26.67 69.33L304 144l69.33 26.67L400 240l26.67-69.33L496 144l-69.33-26.67z"/></svg>', Ne = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M176 112l80-80 80 80M255.98 32l.02 448M176 400l80 80 80-80M400 176l80 80-80 80M112 176l-80 80 80 80M32 256h448"/></svg>', Re = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M315.27 33L96 304h128l-31.51 173.23a2.36 2.36 0 002.33 2.77h0a2.36 2.36 0 001.89-.95L416 208H288l31.66-173.25a2.45 2.45 0 00-2.44-2.75h0a2.42 2.42 0 00-1.95 1z"/></svg>', he = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M144 48v272a48 48 0 0048 48h272"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M368 464V192a48 48 0 00-48-48H48"/></svg>', Te = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M380.93 57.37A32 32 0 00358.3 48H94.22A46.21 46.21 0 0048 94.22v323.56A46.21 46.21 0 0094.22 464h323.56A46.36 46.36 0 00464 417.78V153.7a32 32 0 00-9.37-22.63zM256 416a64 64 0 1164-64 63.92 63.92 0 01-64 64zm48-224H112a16 16 0 01-16-16v-64a16 16 0 0116-16h192a16 16 0 0116 16v64a16 16 0 01-16 16z"/></svg>', Z = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M368 368L144 144M368 144L144 368"/></svg>', de = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M320 146s24.36-12-64-12a160 160 0 10160 160"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M256 58l80 80-80 80"/></svg>', Ie = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M112 112l20 320c.95 18.49 14.4 32 32 32h184c17.67 0 30.87-13.51 32-32l20-320"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="32" d="M80 112h352"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M192 112V72h0a23.93 23.93 0 0124-24h80a23.93 23.93 0 0124 24h0v40M256 176v224M184 176l8 224M328 176l-8 224"/></svg>', Ee = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M64 192v-72a40 40 0 0140-40h75.89a40 40 0 0122.19 6.72l27.84 18.56a40 40 0 0022.19 6.72H408a40 40 0 0140 40v40"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M479.9 226.55L463.68 392a40 40 0 01-39.93 40H88.25a40 40 0 01-39.93-40L32.1 226.55A32 32 0 0164 192h384.1a32 32 0 0131.8 34.55z"/></svg>', W = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M416 128L192 384l-96-96"/></svg>', Xe = '<svg viewBox="0 0 512 512" width="20" height="20"><rect x="64" y="64" width="384" height="384" rx="48" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32"/></svg>', Ye = '<svg viewBox="0 0 512 512" width="20" height="20"><circle cx="256" cy="256" r="208" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/></svg>', Be = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M80 96h64l64 320h64l64-160h96"/></svg>', G = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="32" d="M256 48v48M256 416v48M403.08 108.92l-33.94 33.94M142.86 369.14l-33.94 33.94M464 256h-48M96 256H48M403.08 403.08l-33.94-33.94M142.86 142.86l-33.94-33.94"/><circle cx="256" cy="256" r="80" fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="32"/></svg>', K = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M160 136c0-30.62 4.51-61.61 16-88C99.57 81.27 48 159.32 48 248c0 119.29 96.71 216 216 216 88.68 0 166.73-51.57 200-128-26.39 11.49-57.38 16-88 16-119.29 0-216-96.71-216-216z"/></svg>', Oe = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M436 80H76a44.05 44.05 0 00-44 44v264a44.05 44.05 0 0044 44h360a44.05 44.05 0 0044-44V124a44.05 44.05 0 00-44-44z"/><circle cx="256" cy="256" r="80" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M220 80v56M292 80v56M220 376v56M292 376v56M80 144h56M80 224h56M80 304h56M376 144h56M376 224h56M376 304h56"/></svg>';
 class Le {
   constructor(e, t) {
     this.state = e, this.editor = t, this.element = null, this._unsubscribers = [];
@@ -1148,8 +1148,8 @@ class Le {
    */
   render() {
     this.element = u("div", { className: "editor-toolbar" });
-    const e = u("div", { className: "toolbar-section toolbar-left" }), t = w({
-      icon: Xe,
+    const e = u("div", { className: "toolbar-section toolbar-left" }), t = C({
+      icon: Ee,
       title: "Open Image",
       className: "toolbar-btn",
       testId: "btn-open-image",
@@ -1157,8 +1157,8 @@ class Le {
       onClick: () => this.editor.openFilePicker()
     });
     e.appendChild(t);
-    const i = u("div", { className: "toolbar-section toolbar-center" }), s = w({
-      icon: ve,
+    const i = u("div", { className: "toolbar-section toolbar-center" }), r = C({
+      icon: ke,
       title: "Zoom Out",
       className: "toolbar-btn",
       testId: "btn-zoom-out",
@@ -1174,8 +1174,8 @@ class Le {
       "aria-atomic": "true",
       role: "status"
     }, "100%");
-    const a = w({
-      icon: Se,
+    const a = C({
+      icon: ve,
       title: "Zoom In",
       className: "toolbar-btn",
       testId: "btn-zoom-in",
@@ -1184,60 +1184,73 @@ class Le {
         const h = this.state.get("zoom");
         this.editor.setZoom(h + 0.25);
       }
-    }), o = w({
-      icon: ke,
+    }), o = C({
+      icon: Pe,
       title: "Fit to Screen",
       className: "toolbar-btn",
       testId: "btn-fit-screen",
       ariaLabel: "Fit to screen",
       onClick: () => this.editor.fitToScreen()
     });
-    i.appendChild(s), i.appendChild(this._zoomLabel), i.appendChild(a), i.appendChild(o);
+    i.appendChild(r), i.appendChild(this._zoomLabel), i.appendChild(a), i.appendChild(o);
     const n = u("div", { className: "toolbar-section toolbar-right" });
-    this._themeBtn = w({
-      icon: this.state.get("isDarkMode") ? W : G,
+    this._themeBtn = C({
+      icon: this.state.get("isDarkMode") ? G : K,
       title: "Toggle Theme",
-      className: "toolbar-btn",
+      className: "toolbar-btn toolbar-btn-theme",
       testId: "btn-toggle-theme",
       ariaLabel: "Toggle theme",
       onClick: () => this.editor.toggleTheme()
+    }), this._cropBtn = C({
+      icon: he,
+      title: "Crop",
+      className: "toolbar-btn toolbar-btn-crop",
+      testId: "btn-crop",
+      ariaLabel: "Crop image",
+      onClick: () => {
+        this.state.get("mode") === "crop" ? this.editor.setMode("filters") : this.editor.setMode("crop");
+      }
     });
-    const l = w({
-      icon: oe,
+    const l = C({
+      icon: de,
       title: "Reset All",
       className: "toolbar-btn",
       testId: "btn-reset-all",
       ariaLabel: "Reset all changes",
       onClick: () => this.editor.resetAll()
-    }), c = w({
+    }), c = C({
       icon: Te,
       title: "Save Image",
       className: "toolbar-btn toolbar-btn-primary",
       testId: "btn-save-edit",
       ariaLabel: "Save image",
       onClick: () => this.editor.save()
-    }), d = w({
-      icon: ae,
+    }), d = C({
+      icon: Z,
       title: "Close",
       className: "toolbar-btn",
       testId: "btn-cancel-edit",
       ariaLabel: "Close editor",
       onClick: () => this.editor.close()
     });
-    return n.appendChild(this._themeBtn), 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(d), this.element.appendChild(e), this.element.appendChild(i), this.element.appendChild(n), this._subscribeToState(), this.element;
   }
   /**
    * Subscribe to state changes
    */
   _subscribeToState() {
-    const e = this.state.on("change:zoom", ({ value: i }) => {
-      this._zoomLabel.textContent = `${Math.round(i * 100)}%`;
+    const e = this.state.on("change:zoom", ({ value: r }) => {
+      this._zoomLabel.textContent = `${Math.round(r * 100)}%`;
     });
     this._unsubscribers.push(e);
-    const t = this.state.on("change:isDarkMode", ({ value: i }) => {
-      this._themeBtn.innerHTML = i ? W : G;
+    const t = this.state.on("change:isDarkMode", ({ value: r }) => {
+      this._themeBtn.innerHTML = r ? G : K;
     });
     this._unsubscribers.push(t);
+    const i = this.state.on("change:mode", ({ value: r }) => {
+      this._cropBtn && this._cropBtn.classList.toggle("toolbar-btn-primary", r === "crop");
+    });
+    this._unsubscribers.push(i);
   }
   /**
    * Update zoom display
@@ -1255,23 +1268,23 @@ class Le {
   }
 }
 const O = [
-  { id: "adjust", name: "Adjust", icon: Pe },
+  { id: "adjust", name: "Adjust", icon: Me },
   // adjustment, adjustmentAdvanced, alpha
-  { id: "blur", name: "Blur", icon: Me },
+  { id: "blur", name: "Blur", icon: Fe },
   // blur, kawaseBlur, motionBlur, radialBlur, etc.
-  { id: "color", name: "Color", icon: Fe },
+  { id: "color", name: "Color", icon: Ae },
   // colorOverlay, grayscale, hslAdjustment, etc.
-  { id: "effects", name: "Effects", icon: Ae },
+  { id: "effects", name: "Effects", icon: ze },
   // noise, vignette, pixelate, dropShadow, etc.
-  { id: "distortion", name: "Distortion", icon: ze },
+  { id: "distortion", name: "Distortion", icon: Ne },
   // twist, bulgePinch, displacement, etc.
-  { id: "light", name: "Light", icon: Ne },
+  { id: "light", name: "Light", icon: Re },
   // bloom, glow, godray, advancedBloom
   { id: "stylize", name: "Stylize", icon: Oe },
   // ascii, crt, crossHatch, dot, emboss
-  { id: "crop", name: "Crop", icon: Re }
+  { id: "crop", name: "Crop", icon: he }
 ];
-class Ue {
+class De {
   constructor(e, t) {
     this.state = e, this.editor = t, this.element = null, this._chips = /* @__PURE__ */ new Map(), this._scrollIndex = 0, this._unsubscribers = [];
   }
@@ -1284,21 +1297,21 @@ class Ue {
     this._onSelect = e, this.element = u("div", {
       className: "category-carousel-container",
       "data-testid": "category-carousel"
-    }), this._leftBtn = w({
-      icon: re,
+    }), this._leftBtn = C({
+      icon: le,
       title: "Previous categories",
       className: "carousel-nav carousel-nav-left",
       onClick: () => this._scrollLeft()
     }), this._carousel = u("div", { className: "category-carousel" }), O.forEach((i) => {
-      const s = $({
+      const r = $({
         label: i.name,
         icon: i.icon,
         active: this.state.get("selectedCategory") === i.id,
         onClick: () => this._selectCategory(i.id)
       });
-      s.dataset.categoryId = i.id, s.dataset.category = i.id, s.dataset.testid = `category-${i.id}`, this._chips.set(i.id, s), this._carousel.appendChild(s);
-    }), this._rightBtn = w({
-      icon: se,
+      r.dataset.categoryId = i.id, r.dataset.category = i.id, r.dataset.testid = `category-${i.id}`, this._chips.set(i.id, r), this._carousel.appendChild(r);
+    }), this._rightBtn = C({
+      icon: ce,
       title: "Next categories",
       className: "carousel-nav carousel-nav-right",
       onClick: () => this._scrollRight()
@@ -1309,7 +1322,7 @@ class Ue {
     });
     const t = Math.ceil(O.length / 3);
     for (let i = 0; i < t; i++) {
-      const s = u("button", {
+      const r = u("button", {
         type: "button",
         className: `pagination-dot ${i === 0 ? "active" : ""}`,
         role: "tab",
@@ -1317,7 +1330,7 @@ class Ue {
         "aria-selected": i === 0 ? "true" : "false",
         onClick: () => this._scrollToPage(i)
       });
-      this._pagination.appendChild(s);
+      this._pagination.appendChild(r);
     }
     return this.element.appendChild(this._leftBtn), this.element.appendChild(this._carousel), this.element.appendChild(this._rightBtn), this.element.appendChild(this._pagination), this._subscribeToState(), this._updateNavButtons(), this.element;
   }
@@ -1326,8 +1339,8 @@ class Ue {
    */
   _subscribeToState() {
     const e = this.state.on("change:selectedCategory", ({ value: t }) => {
-      this._chips.forEach((i, s) => {
-        i.setActive(s === t);
+      this._chips.forEach((i, r) => {
+        i.setActive(r === t);
       });
     });
     this._unsubscribers.push(e);
@@ -1385,8 +1398,8 @@ class Ue {
   _updatePagination() {
     if (this._pagination) {
       const e = this._pagination.querySelectorAll(".pagination-dot"), t = Math.floor(this._scrollIndex / 3);
-      e.forEach((i, s) => {
-        const a = s === t;
+      e.forEach((i, r) => {
+        const a = r === t;
         i.classList.toggle("active", a), i.setAttribute("aria-selected", a ? "true" : "false");
       });
     }
@@ -1406,7 +1419,7 @@ class Ue {
     this._unsubscribers.forEach((t) => t()), this._unsubscribers = [], this._chips.clear(), (e = this.element) == null || e.remove(), this.element = null;
   }
 }
-class De {
+class Ue {
   constructor(e, t) {
     this.state = e, this.filterManager = t, this.element = null, this._filterCards = /* @__PURE__ */ new Map(), this._scrollIndex = 0, this._unsubscribers = [], this._onToggle = null, this._onSelect = null;
   }
@@ -1416,13 +1429,13 @@ class De {
    * @returns {HTMLElement}
    */
   render({ onToggle: e, onSelect: t }) {
-    return this._onToggle = e, this._onSelect = t, this.element = u("div", { className: "filter-carousel-container" }), this._leftBtn = w({
-      icon: re,
+    return this._onToggle = e, this._onSelect = t, this.element = u("div", { className: "filter-carousel-container" }), this._leftBtn = C({
+      icon: le,
       title: "Previous filters",
       className: "carousel-nav carousel-nav-left",
       onClick: () => this._scrollLeft()
-    }), this._carousel = u("div", { className: "filter-carousel" }), this._rightBtn = w({
-      icon: se,
+    }), this._carousel = u("div", { className: "filter-carousel" }), this._rightBtn = C({
+      icon: ce,
       title: "Next filters",
       className: "carousel-nav carousel-nav-right",
       onClick: () => this._scrollRight()
@@ -1452,11 +1465,11 @@ class De {
     this._carousel.innerHTML = "", this._filterCards.clear(), this._scrollIndex = 0;
     const e = this.state.get("selectedCategory");
     if (e === "crop") return;
-    const t = this.filterManager.getFiltersByCategory(e), i = this.state.get("activeFilters"), s = this.state.get("selectedFilter");
+    const t = this.filterManager.getFiltersByCategory(e), i = this.state.get("activeFilters"), r = this.state.get("selectedFilter");
     t.forEach((a) => {
       const o = this._createFilterCard(a, {
         isActive: i.has(a.id),
-        isSelected: s === a.id
+        isSelected: r === a.id
       });
       this._filterCards.set(a.id, o), this._carousel.appendChild(o);
     }), this._updateNavButtons();
@@ -1468,7 +1481,7 @@ class De {
    * @returns {HTMLElement}
    */
   _createFilterCard(e, { isActive: t, isSelected: i }) {
-    const s = u("div", {
+    const r = u("div", {
       className: `filter-card ${t ? "active" : ""} ${i ? "selected" : ""}`,
       "data-filter": e.id,
       "data-testid": `filter-${e.id}`,
@@ -1484,7 +1497,7 @@ class De {
         this._handleToggle(e.id, h), h && (this.state.set("selectedFilter", e.id), (p = this._onSelect) == null || p.call(this, e.id));
       }
     });
-    return l.innerHTML = t ? Z : "", s.appendChild(a), s.appendChild(n), s.appendChild(l), s._toggle = l, s._isActive = t, s;
+    return l.innerHTML = t ? W : "", r.appendChild(a), r.appendChild(n), r.appendChild(l), r._toggle = l, r._isActive = t, r;
   }
   /**
    * Handle filter card click (select)
@@ -1509,8 +1522,8 @@ class De {
   _updateActiveStates() {
     const e = this.state.get("activeFilters");
     this._filterCards.forEach((t, i) => {
-      const s = e.has(i);
-      t.classList.toggle("active", s), t._toggle.classList.toggle("active", s), t._toggle.innerHTML = s ? Z : "", t._isActive = s;
+      const r = e.has(i);
+      t.classList.toggle("active", r), t._toggle.classList.toggle("active", r), t._toggle.innerHTML = r ? W : "", t._isActive = r;
     });
   }
   /**
@@ -1608,16 +1621,16 @@ class Ve {
       return;
     }
     const i = u("div", { className: "adjustments-header" });
-    i.appendChild(u("span", { className: "adjustments-title" }, t.name)), i.appendChild(Y({
+    i.appendChild(u("span", { className: "adjustments-title" }, t.name)), i.appendChild(F({
       label: "Reset",
       className: "btn-text",
       onClick: () => this._handleReset(e)
     })), this.element.appendChild(i);
-    const s = u("div", { className: "adjustments-grid" }), a = this.state.getFilterValues(e);
+    const r = u("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), s.appendChild(n));
-    }), this.element.appendChild(s);
+      n && (this._controls.set(o.id, n), r.appendChild(n));
+    }), this.element.appendChild(r);
   }
   /**
    * Create a control element based on type
@@ -1628,12 +1641,12 @@ class Ve {
    */
   _createControl(e, t, i) {
     if (t.hidden) return null;
-    const s = t.label || t.id;
+    const r = t.label || t.id;
     switch (this._normalizeControlType(t.type)) {
       case "slider":
-        return _e({
+        return se({
           id: `${e}-${t.id}`,
-          label: s,
+          label: r,
           min: t.min ?? 0,
           max: t.max ?? 1,
           step: t.step ?? 0.01,
@@ -1641,32 +1654,32 @@ class Ve {
           onChange: (l) => this._handleChange(e, t.id, l)
         });
       case "toggle":
-        return xe({
+        return ae({
           id: `${e}-${t.id}`,
-          label: s,
+          label: r,
           checked: !!i,
           onChange: (l) => this._handleChange(e, t.id, l)
         });
       case "color":
-        return Ce({
+        return oe({
           id: `${e}-${t.id}`,
-          label: s,
+          label: r,
           value: typeof i == "string" && i.startsWith("#") ? i : t.default || "#000000",
           onChange: (l) => this._handleChange(e, t.id, l)
         });
       case "select":
         const o = this._normalizeOptions(t.options);
-        return we({
+        return ne({
           id: `${e}-${t.id}`,
-          label: s,
+          label: r,
           options: o,
           value: i ?? t.default,
           onChange: (l) => this._handleChange(e, t.id, l)
         });
       case "button":
         const n = u("div", { className: "button-control" });
-        return n.appendChild(Y({
-          label: s,
+        return n.appendChild(F({
+          label: r,
           className: "btn-secondary",
           onClick: () => this._handleAction(e, t.action || t.id)
         })), n;
@@ -1711,8 +1724,8 @@ class Ve {
    * @param {*} value
    */
   _handleChange(e, t, i) {
-    var s;
-    (s = this._onChange) == null || s.call(this, e, t, i);
+    var r;
+    (r = this._onChange) == null || r.call(this, e, t, i);
   }
   /**
    * Handle reset button
@@ -1738,10 +1751,10 @@ class Ve {
     const e = this.state.get("selectedFilter");
     if (!e) return;
     const t = this.state.getFilterValues(e), i = this.filterManager.getFilterDef(e);
-    i && i.controls.forEach((s) => {
-      const a = this._controls.get(s.id);
+    i && i.controls.forEach((r) => {
+      const a = this._controls.get(r.id);
       if (a && typeof a.setValue == "function") {
-        const o = t[s.id] ?? s.default;
+        const o = t[r.id] ?? r.default;
         a.setValue(o);
       }
     });
@@ -1766,11 +1779,280 @@ class Ve {
     this._unsubscribers.forEach((t) => t()), this._unsubscribers = [], this._controls.clear(), (e = this.element) == null || e.remove(), this.element = null;
   }
 }
-const je = [
+class je {
+  constructor(e, t) {
+    this.state = e, this.filterManager = t, this._drawer = null, this._body = null, this._titleEl = null, this._isOpen = !1, this._currentFilterId = null, this._controls = /* @__PURE__ */ new Map(), this._onChange = null, this._onReset = null, this._onRemove = null, this._onAction = null, this._container = null;
+  }
+  /**
+   * Build the drawer DOM and append to container (should be the controls section)
+   * @param {HTMLElement} container - Parent element (controls-section)
+   * @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 = F({
+      label: "Reset",
+      className: "btn-text",
+      onClick: () => {
+        var h;
+        this._currentFilterId && ((h = this._onReset) == null || h.call(this, this._currentFilterId), this._renderControls());
+      }
+    }), c = F({
+      label: "Remove",
+      className: "btn-text btn-danger",
+      onClick: () => {
+        var h;
+        this._currentFilterId && ((h = this._onRemove) == null || h.call(this, this._currentFilterId), this.close());
+      }
+    }), d = C({
+      icon: Z,
+      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);
+  }
+  /**
+   * Open the drawer for a specific filter
+   * @param {string} filterId
+   */
+  open(e) {
+    this._isOpen && this._currentFilterId === e || (this._currentFilterId = e, this._renderControls(), this._isOpen || (this._isOpen = !0, this._sizeToContainer(), this._animateOpen()));
+  }
+  /**
+   * Close the drawer
+   */
+  close() {
+    this._isOpen && (this._isOpen = !1, this._animateClose(), this._currentFilterId = null);
+  }
+  /**
+   * Check if drawer is open
+   * @returns {boolean}
+   */
+  get isOpen() {
+    return this._isOpen;
+  }
+  /**
+   * Size the drawer to match the container (controls section) height
+   */
+  _sizeToContainer() {
+    if (!this._container || !this._drawer) return;
+    const e = this._container.offsetHeight;
+    e > 0 && (this._drawer.style.height = e + "px");
+  }
+  /**
+   * Animate drawer open (CSS transition)
+   */
+  _animateOpen() {
+    this._drawer.style.transition = "none", this._drawer.style.transform = "translateY(100%)", this._drawer.offsetHeight, this._drawer.style.transition = "transform 0.25s cubic-bezier(0.33, 1, 0.68, 1)", this._drawer.style.transform = "translateY(0)";
+  }
+  /**
+   * Animate drawer close (CSS transition)
+   */
+  _animateClose() {
+    this._drawer.style.transition = "transform 0.2s cubic-bezier(0.32, 0, 0.67, 0)", this._drawer.style.transform = "translateY(100%)";
+  }
+  /**
+   * Render controls for the current filter
+   */
+  _renderControls() {
+    if (this._body.innerHTML = "", this._controls.clear(), !this._currentFilterId) return;
+    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);
+    e.controls.forEach((r) => {
+      if (r.hidden) return;
+      const a = this._createControl(this._currentFilterId, r, i[r.id] ?? r.default);
+      a && (this._controls.set(r.id, a), t.appendChild(a));
+    }), this._body.appendChild(t);
+  }
+  /**
+   * Create a control element based on type
+   * @param {string} filterId
+   * @param {Object} ctl
+   * @param {*} value
+   * @returns {HTMLElement|null}
+   */
+  _createControl(e, t, i) {
+    const r = t.label || t.id;
+    switch (this._normalizeControlType(t.type)) {
+      case "slider":
+        return se({
+          id: `drawer-${e}-${t.id}`,
+          label: r,
+          min: t.min ?? 0,
+          max: t.max ?? 1,
+          step: t.step ?? 0.01,
+          value: typeof i == "number" ? i : t.default ?? 0,
+          onChange: (o) => {
+            var n;
+            return (n = this._onChange) == null ? void 0 : n.call(this, e, t.id, o);
+          }
+        });
+      case "toggle":
+        return ae({
+          id: `drawer-${e}-${t.id}`,
+          label: r,
+          checked: !!i,
+          onChange: (o) => {
+            var n;
+            return (n = this._onChange) == null ? void 0 : n.call(this, e, t.id, o);
+          }
+        });
+      case "color":
+        return oe({
+          id: `drawer-${e}-${t.id}`,
+          label: r,
+          value: typeof i == "string" && i.startsWith("#") ? i : t.default || "#000000",
+          onChange: (o) => {
+            var n;
+            return (n = this._onChange) == null ? void 0 : n.call(this, e, t.id, o);
+          }
+        });
+      case "select": {
+        const o = this._normalizeOptions(t.options);
+        return ne({
+          id: `drawer-${e}-${t.id}`,
+          label: r,
+          options: o,
+          value: i ?? t.default,
+          onChange: (n) => {
+            var l;
+            return (l = this._onChange) == null ? void 0 : l.call(this, e, t.id, n);
+          }
+        });
+      }
+      case "button": {
+        const o = u("div", { className: "button-control" });
+        return o.appendChild(F({
+          label: r,
+          className: "btn-secondary",
+          onClick: () => {
+            var n;
+            return (n = this._onAction) == null ? void 0 : n.call(this, e, t.action || t.id);
+          }
+        })), o;
+      }
+      default:
+        return null;
+    }
+  }
+  /**
+   * Normalize control type
+   * @param {string} type
+   * @returns {string}
+   */
+  _normalizeControlType(e) {
+    return {
+      slider: "slider",
+      range: "slider",
+      toggle: "toggle",
+      checkbox: "toggle",
+      color: "color",
+      select: "select",
+      dropdown: "select",
+      button: "button",
+      text: "slider"
+    }[e] || e;
+  }
+  /**
+   * Normalize options array
+   * @param {Array} options
+   * @returns {Array}
+   */
+  _normalizeOptions(e) {
+    return !e || !Array.isArray(e) ? [] : e.map((t) => typeof t == "object" && t.value !== void 0 ? { value: t.value, label: t.label || String(t.value) } : typeof t == "string" ? { value: t, label: t } : typeof t == "number" ? { value: t, label: String(t) } : { value: t, label: String(t) });
+  }
+  /**
+   * Clean up
+   */
+  destroy() {
+    var e;
+    this._controls.clear(), (e = this._drawer) == null || e.remove(), this._drawer = null, this._isOpen = !1, this._currentFilterId = null, this._container = null;
+  }
+}
+class qe {
+  constructor(e, t) {
+    this.state = e, this.filterManager = t, this.element = null, this._scrollContainer = null, this._chips = /* @__PURE__ */ new Map(), this._unsubscribers = [], this._onToggle = null, this._onSelect = null;
+  }
+  /**
+   * @param {Object} callbacks - { onToggle(filterId, enabled), onSelect(filterId) }
+   * @returns {HTMLElement}
+   */
+  render({ onToggle: e, onSelect: t }) {
+    return this._onToggle = e, this._onSelect = t, this.element = u("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;
+  }
+  _subscribeToState() {
+    const e = this.state.on("change:activeFilters", () => {
+      this._renderChips();
+    });
+    this._unsubscribers.push(e);
+    const t = this.state.on("change:selectedFilter", () => {
+      this._updateSelectedState();
+    });
+    this._unsubscribers.push(t);
+  }
+  _renderChips() {
+    this._scrollContainer.innerHTML = "", this._chips.clear();
+    const e = this.state.get("activeFilters");
+    if (!e || e.size === 0) {
+      const t = u("div", {
+        className: "active-filter-placeholder"
+      }, "No active filters");
+      this._scrollContainer.appendChild(t);
+      return;
+    }
+    e.forEach((t) => {
+      const i = this.filterManager.getFilterDef(t);
+      if (!i) return;
+      const r = this._createChip(t, i);
+      this._chips.set(t, r), this._scrollContainer.appendChild(r);
+    }), this._updateSelectedState();
+  }
+  _createChip(e, t) {
+    const i = u("div", {
+      className: "active-filter-chip",
+      "data-filter-id": e,
+      "data-testid": `active-chip-${e}`
+    }), r = u("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", {
+      className: "active-filter-chip-check",
+      "aria-label": `Remove ${t.name} filter`,
+      onClick: (o) => {
+        var n;
+        o.stopPropagation(), (n = this._onToggle) == null || n.call(this, e, !1);
+      }
+    });
+    return a.innerHTML = '<svg width="10" height="10" viewBox="0 0 12 12"><path d="M2 6l3 3 5-5" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>', i.appendChild(r), i.appendChild(a), i;
+  }
+  _updateSelectedState() {
+    const e = this.state.get("selectedFilter");
+    this._chips.forEach((t, i) => {
+      t.classList.toggle("selected", i === e);
+    });
+  }
+  destroy() {
+    var e;
+    this._unsubscribers.forEach((t) => t()), this._unsubscribers = [], this._chips.clear(), (e = this.element) == null || e.remove(), this.element = null;
+  }
+}
+const He = [
   { id: "free", name: "Free", icon: Be },
-  { id: "square", name: "Square", icon: Ee },
+  { id: "square", name: "Square", icon: Xe },
   { id: "circle", name: "Circle", icon: Ye }
-], qe = [
+], $e = [
   { id: "free", name: "Free" },
   { id: "1:1", name: "1:1" },
   { id: "4:3", name: "4:3" },
@@ -1778,7 +2060,7 @@ const je = [
   { id: "3:2", name: "3:2" },
   { id: "2:3", name: "2:3" }
 ];
-class He {
+class We {
   constructor(e, t) {
     this.state = e, this.cropManager = t, this.element = null, this._shapeChips = /* @__PURE__ */ new Map(), this._aspectChips = /* @__PURE__ */ new Map(), this._unsubscribers = [];
   }
@@ -1794,7 +2076,7 @@ class He {
     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");
-    je.forEach((c) => {
+    He.forEach((c) => {
       const d = $({
         label: c.name,
         icon: c.icon,
@@ -1803,26 +2085,26 @@ class He {
       });
       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 s = u("div", { className: "chip-row aspect-row" }), a = this.state.get("crop.aspect");
-    qe.forEach((c) => {
+    const r = u("div", { className: "chip-row aspect-row" }), a = this.state.get("crop.aspect");
+    $e.forEach((c) => {
       const d = $({
         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), s.appendChild(d);
-    }), this._aspectSection.appendChild(s), this.element.appendChild(this._aspectSection), this._updateAspectVisibility();
-    const o = u("div", { className: "crop-actions" }), n = Y({
+      d.dataset.ratio = c.id, d.dataset.testid = `crop-ratio-${c.id}`, this._aspectChips.set(c.id, d), r.appendChild(d);
+    }), this._aspectSection.appendChild(r), this.element.appendChild(this._aspectSection), this._updateAspectVisibility();
+    const o = u("div", { className: "crop-actions" }), n = F({
       label: "Cancel",
       className: "btn-secondary crop-cancel-btn",
-      icon: ae,
+      icon: Z,
       onClick: () => this.cropManager.cancel()
     });
     n.dataset.testid = "cancel-crop";
-    const l = Y({
+    const l = F({
       label: "Apply Crop",
       className: "btn-primary crop-apply-btn",
-      icon: Z,
+      icon: W,
       onClick: () => this.cropManager.apply()
     });
     return l.dataset.testid = "apply-crop", o.appendChild(n), o.appendChild(l), this.element.appendChild(o), this._subscribeToState(), this.element;
@@ -1832,14 +2114,14 @@ class He {
    */
   _subscribeToState() {
     const e = this.state.on("change:crop.shape", ({ value: i }) => {
-      this._shapeChips.forEach((s, a) => {
-        s.setActive(a === i);
+      this._shapeChips.forEach((r, a) => {
+        r.setActive(a === i);
       }), this._updateAspectVisibility();
     });
     this._unsubscribers.push(e);
     const t = this.state.on("change:crop.aspect", ({ value: i }) => {
-      this._aspectChips.forEach((s, a) => {
-        s.setActive(a === i);
+      this._aspectChips.forEach((r, a) => {
+        r.setActive(a === i);
       });
     });
     this._unsubscribers.push(t);
@@ -1885,7 +2167,7 @@ class He {
     this._unsubscribers.forEach((t) => t()), this._unsubscribers = [], this._shapeChips.clear(), this._aspectChips.clear(), (e = this.element) == null || e.remove(), this.element = null;
   }
 }
-class $e {
+class Ze {
   constructor(e, t) {
     this.state = e, this.filterManager = t, this.element = null, this._filterItems = /* @__PURE__ */ new Map(), this._unsubscribers = [], this._onRemove = null, this._onReset = null, this._onClearAll = null, this._onUpdateValue = null, this._onSelect = null;
   }
@@ -1894,14 +2176,14 @@ class $e {
    * @param {Object} options - { onRemove, onReset, onClearAll, onUpdateValue, onSelect }
    * @returns {HTMLElement}
    */
-  render({ onRemove: e, onReset: t, onClearAll: i, onUpdateValue: s, onSelect: a }) {
-    this._onRemove = e, this._onReset = t, this._onClearAll = i, this._onUpdateValue = s, this._onSelect = a, this.element = u("div", {
+  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", {
       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 n = Y({
+    const n = F({
       label: "Clear All",
       className: "btn-text btn-danger",
       onClick: () => this._handleClearAll()
@@ -1949,8 +2231,8 @@ class $e {
     e.forEach((t) => {
       const i = this.filterManager.getFilterDef(t);
       if (!i) return;
-      const s = this._createFilterItem(t, i);
-      this._filterItems.set(t, s), this._listContainer.appendChild(s);
+      const r = this._createFilterItem(t, i);
+      this._filterItems.set(t, r), this._listContainer.appendChild(r);
     });
   }
   /**
@@ -1960,19 +2242,19 @@ class $e {
    * @returns {HTMLElement}
    */
   _createFilterItem(e, t) {
-    const s = this.state.get("selectedFilter") === e, a = u("div", {
-      className: `active-filter-item ${s ? "selected" : ""}`,
+    const r = this.state.get("selectedFilter") === e, a = u("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 = w({
-      icon: oe,
+    }), o = u("div", { className: "filter-item-header" }), n = u("span", { className: "filter-item-name" }, t.name), l = u("div", { className: "filter-item-actions" }), c = C({
+      icon: de,
       title: "Reset filter",
       className: "btn-icon-sm",
       onClick: () => this._handleReset(e)
-    }), d = w({
+    }), d = C({
       icon: Ie,
       title: "Remove filter",
       className: "btn-icon-sm btn-danger",
@@ -2009,11 +2291,11 @@ class $e {
     if (!e.controls || !Array.isArray(e.controls))
       return "Default values";
     const i = [];
-    return e.controls.forEach((s) => {
-      const a = this._normalizeControlType(s.type);
+    return e.controls.forEach((r) => {
+      const a = this._normalizeControlType(r.type);
       if (a === "button") return;
-      const o = s.label || s.id, n = t[s.id] ?? s.default;
-      n !== s.default && (a === "slider" ? i.push(`${o}: ${this._formatValue(n)}`) : a === "toggle" ? n && i.push(o) : a === "color" ? i.push(`${o}: ${n}`) : a === "select" && i.push(`${o}: ${n}`));
+      const o = r.label || r.id, n = t[r.id] ?? r.default;
+      n !== r.default && (a === "slider" ? i.push(`${o}: ${this._formatValue(n)}`) : a === "toggle" ? n && i.push(o) : a === "color" ? i.push(`${o}: ${n}`) : a === "select" && i.push(`${o}: ${n}`));
     }), i.length > 0 ? i.join(", ") : "Default values";
   }
   /**
@@ -2031,8 +2313,8 @@ class $e {
     this._filterItems.forEach((e, t) => {
       const i = this.filterManager.getFilterDef(t);
       if (!i || !e._summaryEl) return;
-      const s = this.state.getFilterValues(t);
-      e._summaryEl.textContent = this._getValuesSummary(i, s);
+      const r = this.state.getFilterValues(t);
+      e._summaryEl.textContent = this._getValuesSummary(i, r);
     });
   }
   /**
@@ -2086,7 +2368,7 @@ class $e {
     this._unsubscribers.forEach((t) => t()), this._unsubscribers = [], this._filterItems.clear(), (e = this.element) == null || e.remove(), this.element = null;
   }
 }
-const E = {
+const Y = {
   name: "free",
   initialMode: "filters",
   cropShape: "free",
@@ -2100,10 +2382,10 @@ const E = {
   maxExportHeight: void 0
 }, j = {
   free: {
-    ...E
+    ...Y
   },
   avatar: {
-    ...E,
+    ...Y,
     name: "avatar",
     initialMode: "crop",
     cropShape: "circle",
@@ -2113,7 +2395,7 @@ const E = {
     lockAspectRatio: !0
   },
   banner: {
-    ...E,
+    ...Y,
     name: "banner",
     initialMode: "crop",
     cropShape: "square",
@@ -2123,7 +2405,7 @@ const E = {
     lockAspectRatio: !0
   },
   product: {
-    ...E,
+    ...Y,
     name: "product",
     initialMode: "filters",
     cropShape: "square",
@@ -2133,15 +2415,15 @@ const E = {
     lockAspectRatio: !1
   }
 };
-function Ze(r) {
-  if (!r)
+function Ge(s) {
+  if (!s)
     return { ...j.free };
-  if (typeof r == "object" && r !== null)
-    return { ...E, ...r };
-  const e = j[r];
+  if (typeof s == "object" && s !== null)
+    return { ...Y, ...s };
+  const e = j[s];
   return e ? { ...e } : { ...j.free };
 }
-class Zt extends B {
+class Gt extends B {
   /**
    * Create a new VanillaImageEditor
    * @param {HTMLElement} container - Container element to mount the editor
@@ -2152,7 +2434,7 @@ class Zt extends B {
     if (super(), !e)
       throw new Error("VanillaImageEditor: container element is required");
     this._container = e;
-    const i = t.preset ? Ze(t.preset) : null, s = i ? {
+    const i = t.preset ? Ge(t.preset) : null, r = i ? {
       initialMode: i.initialMode === "crop" ? "crop" : "adjust",
       cropShape: i.cropShape,
       initialAspectRatio: i.aspectRatio
@@ -2168,12 +2450,12 @@ class Zt extends B {
         endpoint: "/api/v1/media/remove-bg",
         fallbackEndpoint: null
       },
-      ...s,
+      ...r,
       ...t
-    }, this._preset = i, this._state = fe(), this._state.set("theme", this._options.theme), this._state.set("crop.shape", this._options.cropShape), this._state.set("crop.aspect", this._options.initialAspectRatio), this._preset && (this._state.set("lockCropShape", !!this._preset.lockCropShape), this._state.set("lockAspectRatio", !!this._preset.lockAspectRatio), this._state.set("showFilters", this._preset.showFilters !== !1), this._state.set("showCropControls", this._preset.showCropControls !== !1), this._state.set("autoZoomOnCropOverflow", !!this._preset.autoZoomOnCropOverflow)), this._renderer = new me(), this._filterManager = new be(this._state, this._renderer), this._cropManager = new H(this._state, this._renderer), this._removeBgManager = null, ((a = this._options.backgroundRemoval) == null ? void 0 : a.enabled) !== !1 && (this._removeBgManager = new ye({
+    }, this._preset = i, this._state = _e(), this._state.set("theme", this._options.theme), this._state.set("crop.shape", this._options.cropShape), this._state.set("crop.aspect", this._options.initialAspectRatio), this._preset && (this._state.set("lockCropShape", !!this._preset.lockCropShape), this._state.set("lockAspectRatio", !!this._preset.lockAspectRatio), this._state.set("showFilters", this._preset.showFilters !== !1), this._state.set("showCropControls", this._preset.showCropControls !== !1), this._state.set("autoZoomOnCropOverflow", !!this._preset.autoZoomOnCropOverflow)), this._renderer = new xe(), this._filterManager = new we(this._state, this._renderer), this._cropManager = new H(this._state, this._renderer), this._removeBgManager = null, ((a = this._options.backgroundRemoval) == null ? void 0 : a.enabled) !== !1 && (this._removeBgManager = new Se({
       endpoint: (o = this._options.backgroundRemoval) == null ? void 0 : o.endpoint,
       fallbackEndpoint: (n = this._options.backgroundRemoval) == null ? void 0 : n.fallbackEndpoint
-    })), this._loadingOverlay = null, this._toolbar = null, this._categoryCarousel = null, this._filterCarousel = null, this._filterAdjustments = null, this._cropControls = null, this._activeFiltersPanel = null, this._editorEl = null, this._canvasContainer = null, this._cropOverlay = null, this._controlsSection = null, this._filterControlsEl = null, this._fileInput = null, this._resizeObserver = null, this._init();
+    })), this._loadingOverlay = null, this._isMobile = typeof window < "u" ? window.innerWidth <= 768 : !1, this._toolbar = null, this._categoryCarousel = null, this._filterCarousel = null, this._filterAdjustments = null, this._mobileFilterDrawer = null, this._mobileActiveFilters = null, this._cropControls = null, this._activeFiltersPanel = null, this._editorEl = null, this._canvasContainer = null, this._cropOverlay = null, this._controlsSection = null, this._filterControlsEl = null, this._fileInput = null, this._resizeObserver = null, this._init();
   }
   /**
    * Initialize the editor
@@ -2182,7 +2464,7 @@ class Zt extends B {
     this._state.detectTheme(), this._buildDOM(), await this._renderer.mount(
       this._canvasContainer,
       this._state.get("isDarkMode") ? 657930 : 16777215
-    ), this._cropManager.setOverlayCanvas(this._cropOverlay), this._initUI(), this._setupResizeObserver(), this._subscribeToState(), this._options.initialImage && await this.loadImage(this._options.initialImage), this.emit("ready");
+    ), this._cropManager.setOverlayCanvas(this._cropOverlay), this._initUI(), this._setupResizeObserver(), this._setupWindowResize(), this._subscribeToState(), this._options.initialImage && await this.loadImage(this._options.initialImage), this.emit("ready");
   }
   /**
    * Build DOM structure
@@ -2199,31 +2481,45 @@ class Zt extends B {
       accept: "image/*",
       className: "hidden-file-input",
       "aria-label": "Choose image file to edit",
-      onChange: (s) => this._handleFileSelect(s)
+      onChange: (r) => this._handleFileSelect(r)
     }), this._editorEl.appendChild(this._fileInput), this._container.appendChild(this._editorEl);
   }
   /**
    * 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 Ue(this._state, this), this._filterControlsEl.appendChild(this._categoryCarousel.render((s) => {
+    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) => {
     }));
     const e = u("div", { className: "filter-layout" }), t = u("div", { className: "filter-left-column" });
-    this._filterCarousel = new De(this._state, this._filterManager), t.appendChild(this._filterCarousel.render({
-      onToggle: (s, a) => this._handleFilterToggle(s, a),
-      onSelect: (s) => this._handleFilterSelect(s)
+    this._filterCarousel = new Ue(this._state, this._filterManager), t.appendChild(this._filterCarousel.render({
+      onToggle: (r, a) => this._handleFilterToggle(r, a),
+      onSelect: (r) => {
+        this._handleFilterSelect(r), this._isMobile && this._mobileFilterDrawer && this._mobileFilterDrawer.open(r);
+      }
     })), this._filterAdjustments = new Ve(this._state, this._filterManager), t.appendChild(this._filterAdjustments.render({
-      onChange: (s, a, o) => this._handleFilterChange(s, a, o),
-      onReset: (s) => this._handleFilterReset(s),
-      onAction: (s, a) => this._handleFilterAction(s, a)
+      onChange: (r, a, o) => this._handleFilterChange(r, a, o),
+      onReset: (r) => this._handleFilterReset(r),
+      onAction: (r, a) => this._handleFilterAction(r, a)
     })), e.appendChild(t);
     const i = u("div", { className: "filter-right-column" });
-    this._activeFiltersPanel = new $e(this._state, this._filterManager), i.appendChild(this._activeFiltersPanel.render({
-      onRemove: (s) => this._handleFilterToggle(s, !1),
-      onReset: (s) => this._handleFilterReset(s),
+    this._activeFiltersPanel = new Ze(this._state, this._filterManager), i.appendChild(this._activeFiltersPanel.render({
+      onRemove: (r) => this._handleFilterToggle(r, !1),
+      onReset: (r) => this._handleFilterReset(r),
       onClearAll: () => this.resetAll(),
-      onSelect: (s) => this._handleFilterSelect(s)
-    })), e.appendChild(i), this._filterControlsEl.appendChild(e), this._cropControls = new He(this._state, this._cropManager), this._cropControlsEl = this._cropControls.render(), this._cropControlsEl.style.display = "none", this._controlsSection.appendChild(this._filterControlsEl), this._controlsSection.appendChild(this._cropControlsEl);
+      onSelect: (r) => this._handleFilterSelect(r)
+    })), e.appendChild(i), this._filterControlsEl.appendChild(e), this._mobileActiveFilters = new qe(this._state, this._filterManager), this._filterControlsEl.appendChild(this._mobileActiveFilters.render({
+      onToggle: (r, a) => this._handleFilterToggle(r, a),
+      onSelect: (r) => {
+        this._handleFilterSelect(r), this._isMobile && this._mobileFilterDrawer && this._mobileFilterDrawer.open(r);
+      }
+    })), this._cropControls = new We(this._state, this._cropManager), this._cropControlsEl = this._cropControls.render(), this._cropControlsEl.style.display = "none", this._controlsSection.appendChild(this._filterControlsEl), this._controlsSection.appendChild(this._cropControlsEl), this._mobileFilterDrawer = new je(this._state, this._filterManager), this._mobileFilterDrawer.build(this._controlsSection, {
+      onChange: (r, a, o) => this._handleFilterChange(r, a, o),
+      onReset: (r) => this._handleFilterReset(r),
+      onRemove: (r) => {
+        this._handleFilterToggle(r, !1), this._state.set("selectedFilter", null);
+      },
+      onAction: (r, a) => this._handleFilterAction(r, a)
+    });
   }
   /**
    * Set up resize observer with debounce to prevent infinite loops.
@@ -2240,12 +2536,21 @@ class Zt extends B {
       }, 50);
     }), this._resizeObserver.observe(this._canvasContainer);
   }
+  /**
+   * Set up window resize listener for mobile detection
+   */
+  _setupWindowResize() {
+    this._handleWindowResize = () => {
+      var e;
+      this._isMobile = window.innerWidth <= 768, !this._isMobile && ((e = this._mobileFilterDrawer) != null && e.isOpen) && this._mobileFilterDrawer.close();
+    }, window.addEventListener("resize", this._handleWindowResize);
+  }
   /**
    * Subscribe to state changes
    */
   _subscribeToState() {
     this._state.on("change:mode", ({ value: e }) => {
-      this._updateModeUI(e);
+      this._updateModeUI(e), e === "filters" && this._filterManager.applyFilters();
     }), this._state.on("change:isDarkMode", ({ value: e }) => {
       this._editorEl.classList.toggle("dark", e), this._editorEl.classList.toggle("light", !e), this._renderer.setBackgroundColor(e ? 657930 : 16777215);
     }), this._state.on("change:hasImage", ({ value: e }) => {
@@ -2259,7 +2564,8 @@ class Zt extends B {
    * @param {string} mode
    */
   _updateModeUI(e) {
-    e === "crop" ? (this._filterControlsEl.style.display = "none", this._cropControlsEl.style.display = "") : (this._filterControlsEl.style.display = "", this._cropControlsEl.style.display = "none");
+    var t;
+    e === "crop" ? (this._filterControlsEl.style.display = "none", this._cropControlsEl.style.display = "", (t = this._mobileFilterDrawer) != null && t.isOpen && this._mobileFilterDrawer.close()) : (this._filterControlsEl.style.display = "", this._cropControlsEl.style.display = "none");
   }
   /**
    * Handle file selection
@@ -2333,8 +2639,8 @@ class Zt extends B {
    */
   _fileToDataUrl(e) {
     return new Promise((t, i) => {
-      const s = new FileReader();
-      s.onload = () => t(s.result), s.onerror = i, s.readAsDataURL(e);
+      const r = new FileReader();
+      r.onload = () => t(r.result), r.onerror = i, r.readAsDataURL(e);
     });
   }
   /**
@@ -2363,11 +2669,11 @@ class Zt extends B {
       try {
         const i = this.exportImage("png", 0.92);
         if (!i) throw new Error("Failed to export image");
-        const s = {
+        const r = {
           width: Math.round(((e = this._renderer.sprite) == null ? void 0 : e.width) || 0),
           height: Math.round(((t = this._renderer.sprite) == null ? void 0 : t.height) || 0)
         }, a = document.createElement("a");
-        a.href = i, a.download = `edited-image-${Date.now()}.png`, document.body.appendChild(a), a.click(), document.body.removeChild(a), this.emit("save", { imageData: i, dimensions: s });
+        a.href = i, a.download = `edited-image-${Date.now()}.png`, document.body.appendChild(a), a.click(), document.body.removeChild(a), this.emit("save", { imageData: i, dimensions: r });
       } catch (i) {
         this.emit("error", { error: i });
       } finally {
@@ -2481,8 +2787,8 @@ class Zt extends B {
         u("div", { className: "editor-loading-text" }, e)
       ]);
     else {
-      const s = this._loadingOverlay.querySelector(".editor-loading-text");
-      s && (s.textContent = e);
+      const r = this._loadingOverlay.querySelector(".editor-loading-text");
+      r && (r.textContent = e);
     }
     const t = (i = this._canvasContainer) == null ? void 0 : i.parentElement;
     t && !this._loadingOverlay.parentElement && t.appendChild(this._loadingOverlay);
@@ -2498,31 +2804,31 @@ class Zt extends B {
    * Destroy the editor and clean up
    */
   destroy() {
-    var e, t, i, s, a, o, n, l;
-    (e = this._resizeObserver) == null || e.disconnect(), this._renderer.destroy(), this._cropManager.disable(), (t = this._toolbar) == null || t.destroy(), (i = this._categoryCarousel) == null || i.destroy(), (s = this._filterCarousel) == null || s.destroy(), (a = this._filterAdjustments) == null || a.destroy(), (o = this._cropControls) == null || o.destroy(), (n = this._activeFiltersPanel) == null || n.destroy(), (l = this._editorEl) == null || l.remove(), this._container = null, this._state = null, this.emit("destroyed"), this.removeAllListeners();
+    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();
   }
 }
-const v = /* @__PURE__ */ new Map(), R = /* @__PURE__ */ new Map();
-function We(r, e) {
-  return !Array.isArray(r.mediaTargets) || r.mediaTargets.length === 0 ? !0 : r.mediaTargets.includes(e);
+const v = /* @__PURE__ */ new Map(), T = /* @__PURE__ */ new Map();
+function Ke(s, e) {
+  return !Array.isArray(s.mediaTargets) || s.mediaTargets.length === 0 ? !0 : s.mediaTargets.includes(e);
 }
-function f(r) {
+function f(s) {
   var e;
-  return v.has(r.id), v.set(r.id, r), R.has(r.category) || R.set(r.category, []), (e = R.get(r.category)) == null || e.push(r.id), r;
+  return v.has(s.id), v.set(s.id, s), T.has(s.category) || T.set(s.category, []), (e = T.get(s.category)) == null || e.push(s.id), s;
 }
-function Ge(r) {
-  return v.get(r);
+function Qe(s) {
+  return v.get(s);
 }
-function U() {
+function D() {
   return Array.from(v.values());
 }
-function Ke() {
-  U().map((t) => t.id), Object.entries(g).filter(
+function Je() {
+  D().map((t) => t.id), Object.entries(g).filter(
     (t) => /Filter$/.test(t[0]) && typeof t[1] == "function"
   ).forEach(([t, i]) => {
-    const s = t.replace(/Filter$/, "").replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
-    v.has(s) || f({
-      id: s,
+    const r = t.replace(/Filter$/, "").replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+    v.has(r) || f({
+      id: r,
       name: t.replace(/Filter$/, ""),
       category: "unlisted",
       // Put in a category that won't be shown in UI
@@ -2540,51 +2846,51 @@ function Ke() {
     });
   });
 }
-function Qe(r) {
-  return (R.get(r) || []).map((t) => v.get(t)).filter(Boolean);
+function et(s) {
+  return (T.get(s) || []).map((t) => v.get(t)).filter(Boolean);
 }
-function Je() {
-  return Array.from(R.keys());
+function tt() {
+  return Array.from(T.keys());
 }
-function Wt(r) {
-  return v.has(r);
+function Kt(s) {
+  return v.has(s);
 }
-function et(r) {
-  const e = v.get(r);
+function it(s) {
+  const e = v.get(s);
   if (!e)
     return !1;
-  v.delete(r);
-  const t = R.get(e.category);
+  v.delete(s);
+  const t = T.get(e.category);
   if (t) {
-    const i = t.indexOf(r);
-    i !== -1 && t.splice(i, 1), t.length === 0 && R.delete(e.category);
+    const i = t.indexOf(s);
+    i !== -1 && t.splice(i, 1), t.length === 0 && T.delete(e.category);
   }
   return !0;
 }
-function Gt(r, e) {
-  const t = v.get(r);
-  return t ? We(t, e) : !1;
+function Qt(s, e) {
+  const t = v.get(s);
+  return t ? Ke(t, e) : !1;
 }
-function tt() {
-  return Array.from(v.values()).map((r) => ({
-    id: r.id,
-    name: r.name,
-    category: r.category,
-    controls: r.controls
+function rt() {
+  return Array.from(v.values()).map((s) => ({
+    id: s.id,
+    name: s.name,
+    category: s.category,
+    controls: s.controls
   }));
 }
 if (typeof window < "u") {
-  window.__DEBUG_FILTERS_LIST = Array.from(v.keys()), window.getAllFilters = U, window.getFilter = Ge, window.getFiltersByCategory = Qe, window.getRegisteredFilters = tt;
-  const r = f;
+  window.__DEBUG_FILTERS_LIST = Array.from(v.keys()), window.getAllFilters = D, window.getFilter = Qe, window.getFiltersByCategory = et, window.getRegisteredFilters = rt;
+  const s = f;
   window.registerFilter = (e) => {
-    const t = r(e);
+    const t = s(e);
     return window.__DEBUG_FILTERS_LIST = Array.from(v.keys()), t;
   };
 }
 typeof window < "u" && (window.initializeFilterRegistry = window.initializeFilterRegistry || function() {
   return [];
 });
-const { AdjustmentFilter: it } = g, { ColorMatrixFilter: rt } = C, k = {
+const { AdjustmentFilter: st } = g, { ColorMatrixFilter: at } = w, k = {
   gamma: 1,
   saturation: 1,
   contrast: 1,
@@ -2593,7 +2899,7 @@ const { AdjustmentFilter: it } = g, { ColorMatrixFilter: rt } = C, k = {
   green: 1,
   blue: 1,
   alpha: 1
-}, st = /* @__PURE__ */ new Set([
+}, ot = /* @__PURE__ */ new Set([
   "gamma",
   "saturation",
   "contrast",
@@ -2603,33 +2909,33 @@ const { AdjustmentFilter: it } = g, { ColorMatrixFilter: rt } = C, k = {
   "blue",
   "alpha"
 ]);
-function P(r, e) {
-  if (typeof r == "number" && Number.isFinite(r))
-    return r;
-  if (typeof r == "string") {
-    const t = Number(r);
+function P(s, e) {
+  if (typeof s == "number" && Number.isFinite(s))
+    return s;
+  if (typeof s == "string") {
+    const t = Number(s);
     if (Number.isFinite(t))
       return t;
   }
   return e;
 }
-function K(r) {
-  return st.has(r);
+function Q(s) {
+  return ot.has(s);
 }
-function at(r) {
+function nt(s) {
   return {
-    gamma: P(r.gamma, k.gamma),
-    saturation: P(r.saturation, k.saturation),
-    contrast: P(r.contrast, k.contrast),
-    brightness: P(r.brightness, k.brightness),
-    red: P(r.red, k.red),
-    green: P(r.green, k.green),
-    blue: P(r.blue, k.blue),
-    alpha: P(r.alpha, k.alpha)
+    gamma: P(s.gamma, k.gamma),
+    saturation: P(s.saturation, k.saturation),
+    contrast: P(s.contrast, k.contrast),
+    brightness: P(s.brightness, k.brightness),
+    red: P(s.red, k.red),
+    green: P(s.green, k.green),
+    blue: P(s.blue, k.blue),
+    alpha: P(s.alpha, k.alpha)
   };
 }
-function Q(r, e) {
-  r.reset(), r.brightness(e.brightness, !0), r.contrast(e.contrast, !0), r.saturate(e.saturation, !0);
+function J(s, e) {
+  s.reset(), s.brightness(e.brightness, !0), s.contrast(e.contrast, !0), s.saturate(e.saturation, !0);
 }
 f({
   id: "adjustment",
@@ -2637,14 +2943,14 @@ f({
   category: "adjust",
   description: "Adjust basic image properties like brightness, contrast, and saturation",
   // Create an instance of the AdjustmentFilter with the provided parameters
-  createFilter: (r) => {
+  createFilter: (s) => {
     try {
-      const e = at(r ?? {}), t = { ...e };
+      const e = nt(s ?? {}), t = { ...e };
       try {
-        const i = new it(t), s = i;
-        return s._customParams = { ...e }, s.updateUIParam = function(o, n) {
+        const i = new st(t), r = i;
+        return r._customParams = { ...e }, r.updateUIParam = function(o, n) {
           try {
-            if (!K(o))
+            if (!Q(o))
               return;
             const l = this._customParams ?? { ...k }, c = P(n, l[o]);
             l[o] = c, this._customParams = l;
@@ -2654,16 +2960,16 @@ f({
           }
         }, i;
       } catch {
-        const s = new rt(), a = s;
-        return a._customParams = { ...e }, Q(s, e), a.updateUIParam = function(n, l) {
+        const r = new at(), a = r;
+        return a._customParams = { ...e }, J(r, e), a.updateUIParam = function(n, l) {
           try {
-            if (!K(n))
+            if (!Q(n))
               return;
             const c = this._customParams ?? { ...k }, d = P(l, c[n]);
-            c[n] = d, this._customParams = c, Q(this, c);
+            c[n] = d, this._customParams = c, J(this, c);
           } catch {
           }
-        }, s;
+        }, r;
       }
     } catch {
       return null;
@@ -2764,14 +3070,14 @@ f({
     }
   ]
 });
-const { ColorMatrixFilter: ot } = C, z = {
+const { ColorMatrixFilter: lt } = w, N = {
   brightness: 1,
   contrast: 1,
   saturation: 1,
   hue: 0,
   sepia: 0,
   negative: !1
-}, nt = /* @__PURE__ */ new Set([
+}, ct = /* @__PURE__ */ new Set([
   "brightness",
   "contrast",
   "saturation",
@@ -2779,42 +3085,42 @@ const { ColorMatrixFilter: ot } = C, z = {
   "sepia",
   "negative"
 ]);
-function lt(r) {
-  return nt.has(r);
+function ht(s) {
+  return ct.has(s);
 }
-function X(r, e) {
-  if (typeof r == "number" && Number.isFinite(r))
-    return r;
-  if (typeof r == "string") {
-    const t = Number(r);
+function X(s, e) {
+  if (typeof s == "number" && Number.isFinite(s))
+    return s;
+  if (typeof s == "string") {
+    const t = Number(s);
     if (Number.isFinite(t))
       return t;
   }
   return e;
 }
-function ne(r, e) {
-  if (typeof r == "boolean")
-    return r;
-  if (typeof r == "string") {
-    if (r === "true")
+function ue(s, e) {
+  if (typeof s == "boolean")
+    return s;
+  if (typeof s == "string") {
+    if (s === "true")
       return !0;
-    if (r === "false")
+    if (s === "false")
       return !1;
   }
   return e;
 }
-function ct(r) {
+function dt(s) {
   return {
-    brightness: X(r.brightness, z.brightness),
-    contrast: X(r.contrast, z.contrast),
-    saturation: X(r.saturation, z.saturation),
-    hue: X(r.hue, z.hue),
-    sepia: X(r.sepia, z.sepia),
-    negative: ne(r.negative, z.negative)
+    brightness: X(s.brightness, N.brightness),
+    contrast: X(s.contrast, N.contrast),
+    saturation: X(s.saturation, N.saturation),
+    hue: X(s.hue, N.hue),
+    sepia: X(s.sepia, N.sepia),
+    negative: ue(s.negative, N.negative)
   };
 }
-function J(r, e) {
-  r.reset(), e.brightness !== 1 && r.brightness(e.brightness, !0), e.contrast !== 1 && r.contrast(e.contrast, !0), e.saturation !== 1 && r.saturate(e.saturation, !0), e.hue !== 0 && r.hue(e.hue, !0), e.sepia > 0 && r.sepia(!0), e.negative && r.negative(!0);
+function ee(s, e) {
+  s.reset(), e.brightness !== 1 && s.brightness(e.brightness, !0), e.contrast !== 1 && s.contrast(e.contrast, !0), e.saturation !== 1 && s.saturate(e.saturation, !0), e.hue !== 0 && s.hue(e.hue, !0), e.sepia > 0 && s.sepia(!0), e.negative && s.negative(!0);
 }
 f({
   id: "adjustment-advanced",
@@ -2822,21 +3128,21 @@ f({
   category: "adjust",
   description: "Comprehensive image adjustments including brightness, contrast, saturation, hue, and more",
   // Create an instance of the ColorMatrixFilter with the provided parameters
-  createFilter: (r) => {
+  createFilter: (s) => {
     try {
-      const e = ct(r ?? {}), t = new ot(), i = t;
-      return i._customParams = { ...e }, J(t, e), i.updateUIParam = function(a, o) {
+      const e = dt(s ?? {}), t = new lt(), i = t;
+      return i._customParams = { ...e }, ee(t, e), i.updateUIParam = function(a, o) {
         try {
-          if (!lt(a))
+          if (!ht(a))
             return;
-          const n = this._customParams ?? { ...z };
+          const n = this._customParams ?? { ...N };
           if (a === "negative")
-            n.negative = ne(o, n.negative);
+            n.negative = ue(o, n.negative);
           else {
             const l = a;
             n[l] = X(o, n[l]);
           }
-          this._customParams = n, J(this, n);
+          this._customParams = n, ee(this, n);
         } catch {
         }
       }, t;
@@ -2920,19 +3226,19 @@ f({
   category: "adjust",
   description: "Adjust the transparency of the image",
   // Create an instance of the ColorMatrixFilter with alpha adjustment
-  createFilter: (r) => {
+  createFilter: (s) => {
     try {
-      const e = r.alpha !== void 0 ? r.alpha : 1, t = new C.ColorMatrixFilter();
+      const e = s.alpha !== void 0 ? s.alpha : 1, t = new w.ColorMatrixFilter();
       return t.alpha = e, t._customParams = {
         alpha: e
-      }, t.updateUIParam = function(i, s) {
+      }, t.updateUIParam = function(i, r) {
         try {
           const a = this._customParams || {};
           if (this._customParams = a, i === "alpha") {
-            const o = Number(s);
+            const o = Number(r);
             this.alpha = o, a.alpha = o;
           } else
-            i in this && (this[i] = s);
+            i in this && (this[i] = r);
         } catch {
         }
       }, t;
@@ -2967,15 +3273,15 @@ f({
    * Create an instance of the BlurFilter from pixi.js package
    * This implementation matches the PixiJS example exactly, using 'blur' and 'quality' parameters
    */
-  createFilter: (r) => {
+  createFilter: (s) => {
     try {
-      const e = new C.BlurFilter({
-        strength: r.blur || 8,
-        quality: r.quality || 4
+      const e = new w.BlurFilter({
+        strength: s.blur || 8,
+        quality: s.quality || 4
       });
-      return e._customParams = { ...r }, e.updateUIParam = function(t, i) {
-        const s = this._customParams || {};
-        switch (this._customParams = s, s[t] = i, t) {
+      return e._customParams = { ...s }, e.updateUIParam = function(t, i) {
+        const r = this._customParams || {};
+        switch (this._customParams = r, r[t] = i, t) {
           case "blur":
             this.strength = i;
             break;
@@ -3027,13 +3333,13 @@ f({
   category: "advanced",
   description: "Advanced color adjustments including sepia, hue rotation, and more",
   // Create an instance of the ColorMatrixFilter with the provided parameters
-  createFilter: (r) => {
-    const e = C.ColorMatrixFilter;
+  createFilter: (s) => {
+    const e = w.ColorMatrixFilter;
     if (!e)
       return null;
     const t = new e();
     try {
-      return typeof t.reset == "function" && t.reset(), r.brightness !== 1 && typeof t.brightness == "function" && t.brightness(r.brightness, !1), r.contrast !== 1 && typeof t.contrast == "function" && t.contrast(r.contrast, !1), r.saturation !== 1 && typeof t.saturate == "function" && t.saturate(r.saturation, !1), r.hue !== 0 && typeof t.hue == "function" && t.hue(r.hue, !1), r.sepia > 0 && typeof t.sepia == "function" && t.sepia(r.sepia), r.negative && typeof t.negative == "function" && t.negative(!1), t;
+      return typeof t.reset == "function" && t.reset(), s.brightness !== 1 && typeof t.brightness == "function" && t.brightness(s.brightness, !1), s.contrast !== 1 && typeof t.contrast == "function" && t.contrast(s.contrast, !1), s.saturation !== 1 && typeof t.saturate == "function" && t.saturate(s.saturation, !1), s.hue !== 0 && typeof t.hue == "function" && t.hue(s.hue, !1), s.sepia > 0 && typeof t.sepia == "function" && t.sepia(s.sepia), s.negative && typeof t.negative == "function" && t.negative(!1), t;
     } catch {
       return t;
     }
@@ -3108,7 +3414,7 @@ f({
     }
   ]
 });
-const { ColorOverlayFilter: ht } = g;
+const { ColorOverlayFilter: ut } = g;
 f({
   id: "colorOverlay",
   name: "Color Overlay",
@@ -3119,26 +3425,26 @@ f({
    * This implementation follows the pattern from ColorGradientFilter, adding
    * proper parameter handling with an updateUIParam method
    */
-  createFilter: (r) => {
+  createFilter: (s) => {
     try {
       let e = 16711680;
-      r.color && (typeof r.color == "string" ? e = parseInt(r.color.replace("#", "0x"), 16) : typeof r.color == "number" && (e = r.color));
-      const t = new ht({
+      s.color && (typeof s.color == "string" ? e = parseInt(s.color.replace("#", "0x"), 16) : typeof s.color == "number" && (e = s.color));
+      const t = new ut({
         color: e,
-        alpha: r.alpha || 0.5
+        alpha: s.alpha || 0.5
       });
-      return t._customParams = { ...r }, t.updateUIParam = function(i, s) {
+      return t._customParams = { ...s }, t.updateUIParam = function(i, r) {
         const a = this._customParams || {};
-        switch (this._customParams = a, a[i] = s, i) {
+        switch (this._customParams = a, a[i] = r, i) {
           case "color":
             let o;
-            typeof s == "string" ? o = parseInt(s.replace("#", "0x"), 16) : o = Number(s), this.color = o, this.uniforms && (this.uniforms.uColor = o);
+            typeof r == "string" ? o = parseInt(r.replace("#", "0x"), 16) : o = Number(r), this.color = o, this.uniforms && (this.uniforms.uColor = o);
             break;
           case "alpha":
-            this.alpha = Number(s), this.uniforms && (this.uniforms.uAlpha = Number(s));
+            this.alpha = Number(r), this.uniforms && (this.uniforms.uAlpha = Number(r));
             break;
           default:
-            i in this && (this[i] = s);
+            i in this && (this[i] = r);
             break;
         }
         return !0;
@@ -3182,27 +3488,27 @@ f({
    * Create an instance of the DropShadowFilter with the provided parameters
    * Using the official pixi-filters implementation
    */
-  createFilter: (r) => {
+  createFilter: (s) => {
     try {
-      const e = r.color ? r.color.replace("#", "0x") : "0x000000", t = r.distance !== void 0 ? r.distance : 5, i = r.angle !== void 0 ? r.angle : 90, s = {
+      const e = s.color ? s.color.replace("#", "0x") : "0x000000", t = s.distance !== void 0 ? s.distance : 5, i = s.angle !== void 0 ? s.angle : 90, r = {
         x: t * Math.cos(i * Math.PI / 180),
         y: t * Math.sin(i * Math.PI / 180)
       }, a = new g.DropShadowFilter({
-        offset: s,
+        offset: r,
         color: parseInt(e, 16),
-        alpha: r.alpha !== void 0 ? r.alpha : 0.5,
-        blur: r.blur !== void 0 ? r.blur : 2,
-        quality: r.quality !== void 0 ? r.quality : 3,
-        shadowOnly: r.shadowOnly !== void 0 ? r.shadowOnly : !1,
+        alpha: s.alpha !== void 0 ? s.alpha : 0.5,
+        blur: s.blur !== void 0 ? s.blur : 2,
+        quality: s.quality !== void 0 ? s.quality : 3,
+        shadowOnly: s.shadowOnly !== void 0 ? s.shadowOnly : !1,
         pixelSize: {
-          x: r.pixelSizeX !== void 0 ? r.pixelSizeX : 1,
-          y: r.pixelSizeY !== void 0 ? r.pixelSizeY : 1
+          x: s.pixelSizeX !== void 0 ? s.pixelSizeX : 1,
+          y: s.pixelSizeY !== void 0 ? s.pixelSizeY : 1
         }
       });
       return a._customParams = {
-        ...r,
+        ...s,
         // Also store the calculated offset for use in updateUIParam
-        _offset: s,
+        _offset: r,
         _distance: t,
         _angle: i
       }, a.updateUIParam = function(o, n) {
@@ -3355,7 +3661,7 @@ f({
     }
   ]
 });
-const { ColorMatrixFilter: dt } = C;
+const { ColorMatrixFilter: pt } = w;
 f({
   id: "grayscale",
   name: "Grayscale",
@@ -3366,19 +3672,19 @@ f({
    * This implementation follows the pattern from ColorGradientFilter, adding
    * proper parameter handling with an updateUIParam method
    */
-  createFilter: (r) => {
+  createFilter: (s) => {
     try {
-      const e = new dt();
-      e._customParams = { ...r };
-      const t = r.intensity !== void 0 ? r.intensity : 1;
-      return ee(e, t), e.updateUIParam = function(i, s) {
+      const e = new pt();
+      e._customParams = { ...s };
+      const t = s.intensity !== void 0 ? s.intensity : 1;
+      return te(e, t), e.updateUIParam = function(i, r) {
         const a = this._customParams || {};
-        switch (this._customParams = a, a[i] = s, i) {
+        switch (this._customParams = a, a[i] = r, i) {
           case "intensity":
-            ee(this, s);
+            te(this, r);
             break;
           default:
-            i in this && (this[i] = s);
+            i in this && (this[i] = r);
             break;
         }
         return !0;
@@ -3405,10 +3711,10 @@ f({
     }
   ]
 });
-function ee(r, e) {
-  r.reset(), r.greyscale(e);
+function te(s, e) {
+  s.reset(), s.greyscale(e);
 }
-const { HslAdjustmentFilter: ut } = g;
+const { HslAdjustmentFilter: ft } = g;
 f({
   id: "hsl-adjustment",
   name: "HSL Adjustment",
@@ -3418,19 +3724,19 @@ f({
    * Create an instance of the HslAdjustmentFilter with the provided parameters
    * Using the official pixi-filters implementation instead of a custom one
    */
-  createFilter: (r) => {
+  createFilter: (s) => {
     try {
-      const e = new ut({
-        hue: r.hue !== void 0 ? r.hue : 0,
-        saturation: r.saturation !== void 0 ? r.saturation : 0,
-        lightness: r.lightness !== void 0 ? r.lightness : 0,
-        colorize: r.colorize !== void 0 ? r.colorize : !1,
-        alpha: r.alpha !== void 0 ? r.alpha : 1
+      const e = new ft({
+        hue: s.hue !== void 0 ? s.hue : 0,
+        saturation: s.saturation !== void 0 ? s.saturation : 0,
+        lightness: s.lightness !== void 0 ? s.lightness : 0,
+        colorize: s.colorize !== void 0 ? s.colorize : !1,
+        alpha: s.alpha !== void 0 ? s.alpha : 1
       });
-      return e._customParams = { ...r }, e.updateUIParam = function(t, i) {
+      return e._customParams = { ...s }, e.updateUIParam = function(t, i) {
         try {
-          const s = this._customParams || {};
-          switch (this._customParams = s, s[t] = i, t) {
+          const r = this._customParams || {};
+          switch (this._customParams = r, r[t] = i, t) {
             case "hue":
               this.hue = Number(i), this.uniforms && (this.uniforms.uHue = Number(i));
               break;
@@ -3518,7 +3824,7 @@ f({
     }
   ]
 });
-const { KawaseBlurFilter: pt } = g;
+const { KawaseBlurFilter: mt } = g;
 f({
   id: "kawase-blur",
   name: "Kawase Blur",
@@ -3529,17 +3835,17 @@ f({
    * This implementation follows the pattern from ColorGradientFilter, adding
    * proper parameter handling with an updateUIParam method
    */
-  createFilter: (r) => {
+  createFilter: (s) => {
     try {
-      const e = new pt({
-        strength: r.strength || 4,
-        quality: r.quality || 3,
-        clamp: r.clamp || !1,
-        pixelSize: r.pixelSize || 1
+      const e = new mt({
+        strength: s.strength || 4,
+        quality: s.quality || 3,
+        clamp: s.clamp || !1,
+        pixelSize: s.pixelSize || 1
       });
-      return e._customParams = { ...r }, e.updateUIParam = function(t, i) {
-        const s = this._customParams || {};
-        switch (this._customParams = s, s[t] = i, t) {
+      return e._customParams = { ...s }, e.updateUIParam = function(t, i) {
+        const r = this._customParams || {};
+        switch (this._customParams = r, r[t] = i, t) {
           case "strength":
             this.strength = i;
             break;
@@ -3636,7 +3942,7 @@ f({
     }
   ]
 });
-const { MotionBlurFilter: ft } = g;
+const { MotionBlurFilter: gt } = g;
 f({
   id: "motion-blur",
   name: "Motion Blur",
@@ -3647,19 +3953,19 @@ f({
    * This implementation follows the pattern from ColorGradientFilter, adding
    * proper parameter handling with an updateUIParam method
    */
-  createFilter: (r) => {
+  createFilter: (s) => {
     try {
-      const e = new ft({
+      const e = new gt({
         velocity: {
-          x: r.velocityX !== void 0 ? r.velocityX : 0,
-          y: r.velocityY !== void 0 ? r.velocityY : 0
+          x: s.velocityX !== void 0 ? s.velocityX : 0,
+          y: s.velocityY !== void 0 ? s.velocityY : 0
         },
-        kernelSize: r.kernelSize || 5,
-        offset: r.offset !== void 0 ? r.offset : 0
+        kernelSize: s.kernelSize || 5,
+        offset: s.offset !== void 0 ? s.offset : 0
       });
-      return e._customParams = { ...r }, e.updateUIParam = function(t, i) {
-        const s = this._customParams || {};
-        switch (this._customParams = s, s[t] = i, t) {
+      return e._customParams = { ...s }, e.updateUIParam = function(t, i) {
+        const r = this._customParams || {};
+        switch (this._customParams = r, r[t] = i, t) {
           case "velocityX":
             this.velocityX = i;
             break;
@@ -3744,24 +4050,24 @@ f({
     }
   ]
 });
-const { RadialBlurFilter: mt } = g;
+const { RadialBlurFilter: bt } = g;
 f({
   id: "radial-blur",
   name: "Radial Blur",
   category: "blur",
   description: "Creates a circular blur effect emanating from a center point",
   // Create an instance of the RadialBlurFilter with the provided parameters
-  createFilter: (r) => {
+  createFilter: (s) => {
     try {
-      const e = new mt({
-        angle: r.angle ?? 20,
-        center: { x: r.centerX ?? 0, y: r.centerY ?? 0 },
-        kernelSize: r.kernelSize ?? 15,
-        radius: r.radius ?? 300
+      const e = new bt({
+        angle: s.angle ?? 20,
+        center: { x: s.centerX ?? 0, y: s.centerY ?? 0 },
+        kernelSize: s.kernelSize ?? 15,
+        radius: s.radius ?? 300
       });
       return e._customParams = {
-        centerX: r.centerX ?? 0,
-        centerY: r.centerY ?? 0
+        centerX: s.centerX ?? 0,
+        centerY: s.centerY ?? 0
       }, e.updateUIParam = function(t, i) {
         try {
           switch (t) {
@@ -3868,26 +4174,26 @@ f({
     }
   ]
 });
-const { TiltShiftFilter: gt } = g;
+const { TiltShiftFilter: yt } = g;
 f({
   id: "tilt-shift",
   name: "Tilt Shift",
   category: "blur",
   description: "Creates a depth-of-field effect simulating miniature photography",
   // Create an instance of the TiltShiftFilter with the provided parameters
-  createFilter: (r) => {
+  createFilter: (s) => {
     try {
-      const e = typeof r.blur == "number" ? r.blur : 100, t = typeof r.gradientBlur == "number" ? r.gradientBlur : 600, i = typeof r.startX == "number" ? r.startX : 0, s = typeof r.startY == "number" ? r.startY : 0.5, a = typeof r.endX == "number" ? r.endX : 1, o = typeof r.endY == "number" ? r.endY : 0.5, n = new gt({
+      const e = typeof s.blur == "number" ? s.blur : 100, t = typeof s.gradientBlur == "number" ? s.gradientBlur : 600, i = typeof s.startX == "number" ? s.startX : 0, r = typeof s.startY == "number" ? s.startY : 0.5, a = typeof s.endX == "number" ? s.endX : 1, o = typeof s.endY == "number" ? s.endY : 0.5, n = new yt({
         blur: Number(e),
         gradientBlur: Number(t),
-        start: { x: Number(i), y: Number(s) },
+        start: { x: Number(i), y: Number(r) },
         end: { x: Number(a), y: Number(o) }
       });
       return n._customParams = {
         blur: e,
         gradientBlur: t,
         startX: i,
-        startY: s,
+        startY: r,
         endX: a,
         endY: o
       }, n.updateUIParam = function(l, c) {
@@ -3996,7 +4302,7 @@ f({
     }
   ]
 });
-const { ZoomBlurFilter: bt } = g;
+const { ZoomBlurFilter: _t } = g;
 f({
   id: "zoom-blur",
   name: "Zoom Blur",
@@ -4007,21 +4313,21 @@ f({
    * This implementation follows the pattern from ColorGradientFilter, adding
    * proper parameter handling with an updateUIParam method
    */
-  createFilter: (r) => {
+  createFilter: (s) => {
     try {
-      const e = new bt({
-        strength: r.strength || 0.1,
+      const e = new _t({
+        strength: s.strength || 0.1,
         center: {
-          x: r.centerX !== void 0 ? r.centerX : 0.5,
-          y: r.centerY !== void 0 ? r.centerY : 0.5
+          x: s.centerX !== void 0 ? s.centerX : 0.5,
+          y: s.centerY !== void 0 ? s.centerY : 0.5
         },
-        innerRadius: r.innerRadius || 80,
-        radius: r.radius !== void 0 ? r.radius : -1,
-        maxKernelSize: r.maxKernelSize || 32
+        innerRadius: s.innerRadius || 80,
+        radius: s.radius !== void 0 ? s.radius : -1,
+        maxKernelSize: s.maxKernelSize || 32
       });
-      return e._customParams = { ...r }, e.updateUIParam = function(t, i) {
-        const s = this._customParams || {};
-        switch (this._customParams = s, s[t] = i, t) {
+      return e._customParams = { ...s }, e.updateUIParam = function(t, i) {
+        const r = this._customParams || {};
+        switch (this._customParams = r, r[t] = i, t) {
           case "strength":
             this.strength = i;
             break;
@@ -4123,7 +4429,7 @@ f({
     }
   ]
 });
-const { ColorGradientFilter: te } = g;
+const { ColorGradientFilter: ie } = g;
 f({
   id: "color-gradient",
   name: "Color Gradient",
@@ -4133,10 +4439,10 @@ f({
    * Create an instance of the ColorGradientFilter with the provided parameters
    * This implementation supports unlimited color stops like the PixiJS example app
    */
-  createFilter: (r) => {
+  createFilter: (s) => {
     try {
       let e = [];
-      e = (r.colorStops || [
+      e = (s.colorStops || [
         { offset: 0, color: "#ff0000", alpha: 1 },
         { offset: 1, color: "#0000ff", alpha: 1 }
       ]).map((i) => ({
@@ -4146,32 +4452,32 @@ f({
       })), e.length < 2 && (e = [
         { offset: 0, color: 16711680, alpha: 1 },
         { offset: 1, color: 255, alpha: 1 }
-      ]), e.sort((i, s) => i.offset - s.offset);
-      const t = new te({
-        type: r.gradientType,
+      ]), e.sort((i, r) => i.offset - r.offset);
+      const t = new ie({
+        type: s.gradientType,
         // 0: linear, 1: radial, 2: conic
         stops: e,
-        angle: r.angle,
-        alpha: r.alpha,
-        maxColors: r.maxColors || 0,
-        replace: r.replace
+        angle: s.angle,
+        alpha: s.alpha,
+        maxColors: s.maxColors || 0,
+        replace: s.replace
       });
-      return t._customParams = { ...r }, t.getColorStopsForUI = function() {
-        return !this.stops || !Array.isArray(this.stops) ? [] : this.stops.map((s) => ({
-          offset: s.offset,
-          color: typeof s.color == "number" ? "#" + s.color.toString(16).padStart(6, "0") : s.color,
-          alpha: s.alpha
+      return t._customParams = { ...s }, t.getColorStopsForUI = function() {
+        return !this.stops || !Array.isArray(this.stops) ? [] : this.stops.map((r) => ({
+          offset: r.offset,
+          color: typeof r.color == "number" ? "#" + r.color.toString(16).padStart(6, "0") : r.color,
+          alpha: r.alpha
         }));
       }, t.getDynamicControls = function() {
-        const i = this.getColorStopsForUI(), s = [];
+        const i = this.getColorStopsForUI(), r = [];
         return i.forEach((a, o) => {
-          s.push({
+          r.push({
             id: `colorStop-${o}-color`,
             type: "color",
             label: `Stop ${o + 1} Color`,
             property: `colorStops[${o}].color`,
             default: a.color
-          }), s.push({
+          }), r.push({
             id: `colorStop-${o}-offset`,
             type: "slider",
             label: `Stop ${o + 1} Position`,
@@ -4180,7 +4486,7 @@ f({
             max: 1,
             step: 0.01,
             default: a.offset
-          }), s.push({
+          }), r.push({
             id: `colorStop-${o}-alpha`,
             type: "slider",
             label: `Stop ${o + 1} Alpha`,
@@ -4190,20 +4496,20 @@ f({
             step: 0.01,
             default: a.alpha
           });
-        }), s;
+        }), r;
       }, t.handleButtonAction = function(i) {
         (i === "addColorStop" || i === "removeColorStop") && this.updateUIParam(i, !0);
-      }, t.updateUIParam = function(i, s) {
+      }, t.updateUIParam = function(i, r) {
         const a = this._customParams || {};
-        switch (this._customParams = a, a[i] = s, i) {
+        switch (this._customParams = a, a[i] = r, i) {
           case "gradientType":
-            this.type = s;
+            this.type = r;
             break;
           case "angle":
           case "alpha":
           case "maxColors":
           case "replace":
-            i in this && (this[i] = s);
+            i in this && (this[i] = r);
             break;
           case "addColorStop":
             const o = [...this.stops], c = {
@@ -4235,9 +4541,9 @@ f({
             })));
             break;
           case "cssGradient":
-            if (s && typeof s == "string" && s.trim() !== "")
+            if (r && typeof r == "string" && r.trim() !== "")
               try {
-                const h = new te({ css: s });
+                const h = new ie({ css: r });
                 this.type = h.type, this.angle = h.angle, this.stops = [...h.stops], a.colorStops = this.stops.map((p) => ({
                   offset: p.offset,
                   color: typeof p.color == "number" ? "#" + p.color.toString(16).padStart(6, "0") : p.color,
@@ -4247,8 +4553,8 @@ f({
               }
             break;
           case "colorStops":
-            if (Array.isArray(s)) {
-              const h = s.map((p) => ({
+            if (Array.isArray(r)) {
+              const h = r.map((p) => ({
                 offset: p.offset,
                 color: typeof p.color == "string" ? parseInt(p.color.replace("#", "0x")) : p.color,
                 alpha: p.alpha
@@ -4262,9 +4568,9 @@ f({
               if (h) {
                 const [p, m, S] = h, b = parseInt(m), _ = [...this.stops];
                 if (b >= 0 && b < _.length)
-                  return S === "color" && typeof s == "string" ? _[b].color = parseInt(s.replace("#", "0x")) : (S === "offset" || S === "alpha") && (_[b][S] = s), this.stops = _, this.stops.sort((x, y) => x.offset - y.offset), a.colorStops = this.getColorStopsForUI(), !0;
+                  return S === "color" && typeof r == "string" ? _[b].color = parseInt(r.replace("#", "0x")) : (S === "offset" || S === "alpha") && (_[b][S] = r), this.stops = _, this.stops.sort((x, y) => x.offset - y.offset), a.colorStops = this.getColorStopsForUI(), !0;
               }
-            } else i in this && (this[i] = s);
+            } else i in this && (this[i] = r);
             break;
         }
       }, t;
@@ -4373,23 +4679,23 @@ f({
   category: "color",
   description: "Maps colors using a reference texture as a lookup table",
   // Create an instance of the ColorMapFilter with the provided parameters
-  createFilter: (r) => {
+  createFilter: (s) => {
     try {
       const e = g.ColorMapFilter;
       if (!e)
         return null;
       let t = null;
-      r.texturePath ? t = C.Texture.from(r.texturePath) : t = C.Texture.from("/examples/filters-main/examples/images/colormap.png");
+      s.texturePath ? t = w.Texture.from(s.texturePath) : t = w.Texture.from("/examples/filters-main/examples/images/colormap.png");
       const i = new e({
         colorMap: t,
-        nearest: r.nearest,
-        mix: r.mix
+        nearest: s.nearest,
+        mix: s.mix
       });
-      return i._customParams = { ...r }, i.updateUIParam = function(s, a) {
+      return i._customParams = { ...s }, i.updateUIParam = function(r, a) {
         const o = this._customParams || {};
-        switch (this._customParams = o, o[s] = a, s) {
+        switch (this._customParams = o, o[r] = a, r) {
           case "texturePath":
-            a && (this.colorMap = C.Texture.from(a));
+            a && (this.colorMap = w.Texture.from(a));
             break;
           case "mix":
             this.mix = a;
@@ -4398,7 +4704,7 @@ f({
             this.nearest = a;
             break;
           default:
-            s in this && (this[s] = a);
+            r in this && (this[r] = a);
             break;
         }
         return !0;
@@ -4450,7 +4756,7 @@ f({
     }
   ]
 });
-const yt = g.ColorReplaceFilter;
+const xt = g.ColorReplaceFilter;
 f({
   id: "color-replace",
   name: "Color Replace",
@@ -4461,20 +4767,20 @@ f({
    * This implementation follows the pattern from ColorGradientFilter, adding
    * proper parameter handling with an updateUIParam method
    */
-  createFilter: (r) => {
+  createFilter: (s) => {
     try {
       let e = 16711680;
-      r.originalColor && (typeof r.originalColor == "string" ? e = parseInt(r.originalColor.replace("#", "0x"), 16) : typeof r.originalColor == "number" && (e = r.originalColor));
+      s.originalColor && (typeof s.originalColor == "string" ? e = parseInt(s.originalColor.replace("#", "0x"), 16) : typeof s.originalColor == "number" && (e = s.originalColor));
       let t = 255;
-      r.targetColor && (typeof r.targetColor == "string" ? t = parseInt(r.targetColor.replace("#", "0x"), 16) : typeof r.targetColor == "number" && (t = r.targetColor));
-      const i = new yt({
+      s.targetColor && (typeof s.targetColor == "string" ? t = parseInt(s.targetColor.replace("#", "0x"), 16) : typeof s.targetColor == "number" && (t = s.targetColor));
+      const i = new xt({
         originalColor: e,
         targetColor: t,
-        tolerance: r.tolerance || 0.4
+        tolerance: s.tolerance || 0.4
       });
-      return i._customParams = { ...r }, i.updateUIParam = function(s, a) {
+      return i._customParams = { ...s }, i.updateUIParam = function(r, a) {
         const o = this._customParams || {};
-        switch (this._customParams = o, o[s] = a, s) {
+        switch (this._customParams = o, o[r] = a, r) {
           case "originalColor":
             typeof a == "string" ? this.originalColor = parseInt(a.replace("#", "0x"), 16) : typeof a == "number" && (this.originalColor = a);
             break;
@@ -4485,7 +4791,7 @@ f({
             this.tolerance = a;
             break;
           default:
-            s in this && (this[s] = a);
+            r in this && (this[r] = a);
             break;
         }
         return !0;
@@ -4531,7 +4837,7 @@ f({
     }
   ]
 });
-const _t = g.MultiColorReplaceFilter;
+const Ct = g.MultiColorReplaceFilter;
 f({
   id: "multi-color-replace",
   name: "Multi-Color Replace",
@@ -4542,30 +4848,30 @@ f({
    * This implementation follows the pattern from ColorGradientFilter, adding
    * proper parameter handling with an updateUIParam method
    */
-  createFilter: (r) => {
+  createFilter: (s) => {
     try {
       const e = [];
-      if (r.originalColor1 && r.targetColor1) {
-        const i = typeof r.originalColor1 == "string" ? parseInt(r.originalColor1.replace("#", "0x"), 16) : r.originalColor1, s = typeof r.targetColor1 == "string" ? parseInt(r.targetColor1.replace("#", "0x"), 16) : r.targetColor1;
-        e.push([i, s]);
+      if (s.originalColor1 && s.targetColor1) {
+        const i = typeof s.originalColor1 == "string" ? parseInt(s.originalColor1.replace("#", "0x"), 16) : s.originalColor1, r = typeof s.targetColor1 == "string" ? parseInt(s.targetColor1.replace("#", "0x"), 16) : s.targetColor1;
+        e.push([i, r]);
       }
-      if (r.originalColor2 && r.targetColor2) {
-        const i = typeof r.originalColor2 == "string" ? parseInt(r.originalColor2.replace("#", "0x"), 16) : r.originalColor2, s = typeof r.targetColor2 == "string" ? parseInt(r.targetColor2.replace("#", "0x"), 16) : r.targetColor2;
-        e.push([i, s]);
+      if (s.originalColor2 && s.targetColor2) {
+        const i = typeof s.originalColor2 == "string" ? parseInt(s.originalColor2.replace("#", "0x"), 16) : s.originalColor2, r = typeof s.targetColor2 == "string" ? parseInt(s.targetColor2.replace("#", "0x"), 16) : s.targetColor2;
+        e.push([i, r]);
       }
-      if (r.enableThirdPair && r.originalColor3 && r.targetColor3) {
-        const i = typeof r.originalColor3 == "string" ? parseInt(r.originalColor3.replace("#", "0x"), 16) : r.originalColor3, s = typeof r.targetColor3 == "string" ? parseInt(r.targetColor3.replace("#", "0x"), 16) : r.targetColor3;
-        e.push([i, s]);
+      if (s.enableThirdPair && s.originalColor3 && s.targetColor3) {
+        const i = typeof s.originalColor3 == "string" ? parseInt(s.originalColor3.replace("#", "0x"), 16) : s.originalColor3, r = typeof s.targetColor3 == "string" ? parseInt(s.targetColor3.replace("#", "0x"), 16) : s.targetColor3;
+        e.push([i, r]);
       }
-      const t = new _t(
+      const t = new Ct(
         e,
-        r.tolerance || 0.05,
+        s.tolerance || 0.05,
         3
         // Allow up to 3 color pairs
       );
-      return t._customParams = { ...r }, t.updateUIParam = function(i, s) {
+      return t._customParams = { ...s }, t.updateUIParam = function(i, r) {
         const a = this._customParams || {};
-        if (this._customParams = a, a[i] = s, i === "originalColor1" || i === "targetColor1" || i === "originalColor2" || i === "targetColor2" || i === "originalColor3" || i === "targetColor3" || i === "enableThirdPair") {
+        if (this._customParams = a, a[i] = r, i === "originalColor1" || i === "targetColor1" || i === "originalColor2" || i === "targetColor2" || i === "originalColor3" || i === "targetColor3" || i === "enableThirdPair") {
           const o = [];
           if (a.originalColor1 && a.targetColor1) {
             const n = typeof a.originalColor1 == "string" ? parseInt(a.originalColor1.replace("#", "0x"), 16) : a.originalColor1, l = typeof a.targetColor1 == "string" ? parseInt(a.targetColor1.replace("#", "0x"), 16) : a.targetColor1;
@@ -4580,7 +4886,7 @@ f({
             o.push([n, l]);
           }
           this.replacements = o, this.refresh();
-        } else i === "tolerance" ? this.tolerance = s : i in this && (this[i] = s);
+        } else i === "tolerance" ? this.tolerance = r : i in this && (this[i] = r);
         return !0;
       }, t;
     } catch {
@@ -4668,7 +4974,7 @@ f({
     }
   ]
 });
-const { RGBSplitFilter: xt } = g;
+const { RGBSplitFilter: wt } = g;
 f({
   id: "rgb-split",
   name: "RGB Split",
@@ -4678,23 +4984,23 @@ f({
    * Create an instance of the RGBSplitFilter with the provided parameters
    * Using the official pixi-filters implementation
    */
-  createFilter: (r) => {
+  createFilter: (s) => {
     try {
       const e = {
-        x: r.redX !== void 0 ? r.redX : -10,
-        y: r.redY !== void 0 ? r.redY : 0
+        x: s.redX !== void 0 ? s.redX : -10,
+        y: s.redY !== void 0 ? s.redY : 0
       }, t = {
-        x: r.greenX !== void 0 ? r.greenX : 0,
-        y: r.greenY !== void 0 ? r.greenY : 10
+        x: s.greenX !== void 0 ? s.greenX : 0,
+        y: s.greenY !== void 0 ? s.greenY : 10
       }, i = {
-        x: r.blueX !== void 0 ? r.blueX : 0,
-        y: r.blueY !== void 0 ? r.blueY : 0
-      }, s = new xt({
+        x: s.blueX !== void 0 ? s.blueX : 0,
+        y: s.blueY !== void 0 ? s.blueY : 0
+      }, r = new wt({
         red: e,
         green: t,
         blue: i
       });
-      return s._customParams = { ...r }, s.updateUIParam = function(a, o) {
+      return r._customParams = { ...s }, r.updateUIParam = function(a, o) {
         try {
           const n = this._customParams || {};
           switch (this._customParams = n, n[a] = o, a) {
@@ -4724,7 +5030,7 @@ f({
         } catch {
           return this._customParams && (this._customParams[a] = o), !1;
         }
-      }, s;
+      }, r;
     } catch {
       return null;
     }
@@ -4802,33 +5108,33 @@ f({
     }
   ]
 });
-const { AdvancedBloomFilter: Ct } = g;
+const { AdvancedBloomFilter: St } = g;
 f({
   id: "advanced-bloom",
   name: "Advanced Bloom",
   category: "light",
   description: "Adds a sophisticated bloom/glow effect with fine-grained control",
   // Create an instance of the AdvancedBloomFilter with the provided parameters
-  createFilter: (r) => {
+  createFilter: (s) => {
     try {
-      const e = new Ct({
-        threshold: r.threshold || 0.5,
-        bloomScale: r.bloomScale || 1,
-        brightness: r.brightness || 1,
-        blur: r.blur || 8,
-        quality: r.quality || 4,
+      const e = new St({
+        threshold: s.threshold || 0.5,
+        bloomScale: s.bloomScale || 1,
+        brightness: s.brightness || 1,
+        blur: s.blur || 8,
+        quality: s.quality || 4,
         pixelSize: {
-          x: r.pixelSizeX || 1,
-          y: r.pixelSizeY || 1
+          x: s.pixelSizeX || 1,
+          y: s.pixelSizeY || 1
         }
       });
       return e._customParams = {
-        pixelSizeX: r.pixelSizeX || 1,
-        pixelSizeY: r.pixelSizeY || 1
+        pixelSizeX: s.pixelSizeX || 1,
+        pixelSizeY: s.pixelSizeY || 1
       }, e.updateUIParam = function(t, i) {
         try {
-          const s = this._customParams || {};
-          switch (this._customParams = s, s[t] = i, t) {
+          const r = this._customParams || {};
+          switch (this._customParams = r, r[t] = i, t) {
             case "threshold":
               this.threshold = Number(i);
               break;
@@ -4845,14 +5151,14 @@ f({
               this.quality = Number(i);
               break;
             case "pixelSizeX":
-              s.pixelSizeX = Number(i), this.pixelSize = {
+              r.pixelSizeX = Number(i), this.pixelSize = {
                 x: Number(i),
-                y: s.pixelSizeY
+                y: r.pixelSizeY
               };
               break;
             case "pixelSizeY":
-              s.pixelSizeY = Number(i), this.pixelSize = {
-                x: s.pixelSizeX,
+              r.pixelSizeY = Number(i), this.pixelSize = {
+                x: r.pixelSizeX,
                 y: Number(i)
               };
               break;
@@ -4958,28 +5264,28 @@ f({
     }
   ]
 });
-const wt = g.AsciiFilter;
+const vt = g.AsciiFilter;
 f({
   id: "ascii",
   name: "ASCII",
   category: "stylize",
   description: "Convert image to ASCII text characters",
   // Create an instance of the AsciiFilter with the provided parameters
-  createFilter: (r) => {
+  createFilter: (s) => {
     try {
-      const e = typeof r.size == "number" ? r.size : 8;
-      let t = r.color;
+      const e = typeof s.size == "number" ? s.size : 8;
+      let t = s.color;
       typeof t == "string" && t.startsWith("#") && (t = parseInt(t.replace("#", "0x"), 16));
-      const i = r.replaceColor === !0, s = new wt({
+      const i = s.replaceColor === !0, r = new vt({
         size: e,
         color: t,
         replaceColor: i
       });
-      return s._customParams = {
+      return r._customParams = {
         size: e,
         color: t,
         replaceColor: i
-      }, s.updateUIParam = function(a, o) {
+      }, r.updateUIParam = function(a, o) {
         try {
           const n = this._customParams || {};
           switch (this._customParams = n, n[a] = o, a) {
@@ -4998,7 +5304,7 @@ f({
           }
         } catch {
         }
-      }, s;
+      }, r;
     } catch {
       return null;
     }
@@ -5037,27 +5343,27 @@ f({
     }
   ]
 });
-const St = g.BackdropBlurFilter;
+const kt = g.BackdropBlurFilter;
 f({
   id: "backdrop-blur",
   name: "Backdrop Blur",
   category: "blur",
   description: "Blurs what is behind the object, creating a glass-like effect",
   // Create an instance of the BackdropBlurFilter with the provided parameters
-  createFilter: (r) => {
+  createFilter: (s) => {
     try {
-      const e = new St({
+      const e = new kt({
         // Higher strength values (20-50) make the effect more noticeable
-        strength: r.strength || 20,
-        quality: r.quality || 4,
+        strength: s.strength || 20,
+        quality: s.quality || 4,
         // Lower resolution values (0.2-0.5) can make the effect more visible but less sharp
-        resolution: r.resolution || 0.5,
-        kernelSize: r.kernelSize || 9
+        resolution: s.resolution || 0.5,
+        kernelSize: s.kernelSize || 9
       });
-      return e._customParams = { ...r }, e.updateUIParam = function(t, i) {
+      return e._customParams = { ...s }, e.updateUIParam = function(t, i) {
         try {
-          const s = this._customParams || {};
-          switch (this._customParams = s, s[t] = i, t) {
+          const r = this._customParams || {};
+          switch (this._customParams = r, r[t] = i, t) {
             case "strength":
               this.strength = Number(i), this.blur = Number(i) / 4;
               break;
@@ -5144,7 +5450,7 @@ f({
     }
   ]
 });
-const { BevelFilter: vt } = g;
+const { BevelFilter: Pt } = g;
 f({
   id: "bevel",
   name: "Bevel",
@@ -5154,20 +5460,20 @@ f({
    * Create an instance of the BevelFilter with the provided parameters
    * Using the official pixi-filters implementation
    */
-  createFilter: (r) => {
+  createFilter: (s) => {
     try {
-      const e = r.lightColor ? r.lightColor.replace("#", "0x") : "0xffffff", t = r.shadowColor ? r.shadowColor.replace("#", "0x") : "0x000000", i = new vt({
-        rotation: r.rotation !== void 0 ? r.rotation : 45,
-        thickness: r.thickness !== void 0 ? r.thickness : 2,
+      const e = s.lightColor ? s.lightColor.replace("#", "0x") : "0xffffff", t = s.shadowColor ? s.shadowColor.replace("#", "0x") : "0x000000", i = new Pt({
+        rotation: s.rotation !== void 0 ? s.rotation : 45,
+        thickness: s.thickness !== void 0 ? s.thickness : 2,
         lightColor: parseInt(e, 16),
-        lightAlpha: r.lightAlpha !== void 0 ? r.lightAlpha : 0.7,
+        lightAlpha: s.lightAlpha !== void 0 ? s.lightAlpha : 0.7,
         shadowColor: parseInt(t, 16),
-        shadowAlpha: r.shadowAlpha !== void 0 ? r.shadowAlpha : 0.7
+        shadowAlpha: s.shadowAlpha !== void 0 ? s.shadowAlpha : 0.7
       });
-      return i._customParams = { ...r }, i.updateUIParam = function(s, a) {
+      return i._customParams = { ...s }, i.updateUIParam = function(r, a) {
         try {
           const o = this._customParams || {};
-          switch (this._customParams = o, o[s] = a, s) {
+          switch (this._customParams = o, o[r] = a, r) {
             case "rotation":
               this.rotation = Number(a);
               break;
@@ -5193,12 +5499,12 @@ f({
               this.shadowAlpha = Number(a);
               break;
             default:
-              s in this && (this[s] = a);
+              r in this && (this[r] = a);
               break;
           }
           return !0;
         } catch {
-          return this._customParams && (this._customParams[s] = a), !1;
+          return this._customParams && (this._customParams[r] = a), !1;
         }
       }, i;
     } catch {
@@ -5272,29 +5578,29 @@ f({
     }
   ]
 });
-const { BloomFilter: kt } = g;
+const { BloomFilter: Mt } = g;
 f({
   id: "bloom",
   name: "Bloom/Glow",
   category: "light",
   description: "Add a subtle glow effect to bright areas of the image",
   // Create an instance of the BloomFilter with the provided parameters
-  createFilter: (r) => {
+  createFilter: (s) => {
     try {
-      const e = typeof r.strengthX == "number" ? r.strengthX : 2, t = typeof r.strengthY == "number" ? r.strengthY : 2, i = typeof r.quality == "number" ? r.quality : 4, s = typeof r.resolution == "number" ? r.resolution : 1, a = typeof r.kernelSize == "number" ? r.kernelSize : 5, o = new kt({
+      const e = typeof s.strengthX == "number" ? s.strengthX : 2, t = typeof s.strengthY == "number" ? s.strengthY : 2, i = typeof s.quality == "number" ? s.quality : 4, r = typeof s.resolution == "number" ? s.resolution : 1, a = typeof s.kernelSize == "number" ? s.kernelSize : 5, o = new Mt({
         strength: {
           x: Number(e),
           y: Number(t)
         },
         quality: Number(i),
-        resolution: Number(s),
+        resolution: Number(r),
         kernelSize: Number(a)
       });
       return o._customParams = {
         strengthX: e,
         strengthY: t,
         quality: i,
-        resolution: s,
+        resolution: r,
         kernelSize: a
       }, o.updateUIParam = function(n, l) {
         var c, d;
@@ -5384,7 +5690,7 @@ f({
     }
   ]
 });
-const { BulgePinchFilter: Pt } = g;
+const { BulgePinchFilter: Ft } = g;
 f({
   id: "bulge-pinch",
   // ID must match what the application expects
@@ -5392,17 +5698,17 @@ f({
   category: "distortion",
   description: "Creates a bulge or pinch effect in a circular area",
   // Create an instance of the BulgePinchFilter with the provided parameters
-  createFilter: (r) => {
+  createFilter: (s) => {
     try {
-      const e = r.centerX ?? 0.5, t = r.centerY ?? 0.5, i = r.radius ?? 100, s = r.strength ?? 1, a = new Pt({
+      const e = s.centerX ?? 0.5, t = s.centerY ?? 0.5, i = s.radius ?? 100, r = s.strength ?? 1, a = new Ft({
         center: {
           x: e,
           y: t
         },
         radius: i,
-        strength: s
+        strength: r
       });
-      return a._customParams = { ...r }, a.updateUIParam = function(o, n) {
+      return a._customParams = { ...s }, a.updateUIParam = function(o, n) {
         const l = this._customParams || {};
         switch (this._customParams = l, l[o] = n, o) {
           case "centerX":
@@ -5476,7 +5782,7 @@ f({
     }
   ]
 });
-const { ConvolutionFilter: Mt } = g, I = {
+const { ConvolutionFilter: At } = g, E = {
   normal: [0, 0, 0, 0, 1, 0, 0, 0, 0],
   gaussianBlur: [0.045, 0.122, 0.045, 0.122, 0.332, 0.122, 0.045, 0.122, 0.045],
   boxBlur: [1 / 9, 1 / 9, 1 / 9, 1 / 9, 1 / 9, 1 / 9, 1 / 9, 1 / 9, 1 / 9],
@@ -5492,42 +5798,42 @@ f({
   name: "Convolution Matrix",
   category: "effects",
   description: "Apply custom image effects using matrix convolution",
-  createFilter: (r) => {
+  createFilter: (s) => {
     try {
       let e;
-      if (r.customMatrix)
+      if (s.customMatrix)
         e = [
-          r.m00,
-          r.m01,
-          r.m02,
-          r.m10,
-          r.m11,
-          r.m12,
-          r.m20,
-          r.m21,
-          r.m22
+          s.m00,
+          s.m01,
+          s.m02,
+          s.m10,
+          s.m11,
+          s.m12,
+          s.m20,
+          s.m21,
+          s.m22
         ];
       else {
-        const i = r.preset;
-        e = I[i] || I.normal;
+        const i = s.preset;
+        e = E[i] || E.normal;
       }
-      const t = new Mt(e, r.width || 200, r.height || 200);
-      return t._customParams = { ...r }, t.updateUIParam = function(i, s) {
+      const t = new At(e, s.width || 200, s.height || 200);
+      return t._customParams = { ...s }, t.updateUIParam = function(i, r) {
         const a = this._customParams || {};
-        switch (this._customParams = a, a[i] = s, i) {
+        switch (this._customParams = a, a[i] = r, i) {
           case "preset":
             if (!a.customMatrix) {
-              const o = s;
-              I[o] && (this.matrix = I[o]);
+              const o = r;
+              E[o] && (this.matrix = E[o]);
             }
             break;
           case "customMatrix":
-            if (s) {
+            if (r) {
               const o = this.matrix;
               a.m00 = o[0], a.m01 = o[1], a.m02 = o[2], a.m10 = o[3], a.m11 = o[4], a.m12 = o[5], a.m20 = o[6], a.m21 = o[7], a.m22 = o[8];
             } else {
               const o = a.preset;
-              this.matrix = I[o] || I.normal;
+              this.matrix = E[o] || E.normal;
             }
             break;
           case "m00":
@@ -5551,17 +5857,17 @@ f({
                 m21: 7,
                 m22: 8
               }[i];
-              l !== void 0 && (o[l] = s, this.matrix = o);
+              l !== void 0 && (o[l] = r, this.matrix = o);
             }
             break;
           case "width":
-            this.width = s;
+            this.width = r;
             break;
           case "height":
-            this.height = s;
+            this.height = r;
             break;
           default:
-            i in this && (this[i] = s);
+            i in this && (this[i] = r);
             break;
         }
       }, t;
@@ -5722,7 +6028,7 @@ f({
     }
   ]
 });
-const { CrossHatchFilter: Ft } = g;
+const { CrossHatchFilter: zt } = g;
 f({
   id: "cross-hatch",
   name: "Cross Hatch",
@@ -5730,9 +6036,9 @@ f({
   description: "Creates a crosshatching effect like in a pencil drawing",
   // Create an instance of the CrossHatchFilter
   // Note: CrossHatchFilter has NO parameters according to PixiJS examples
-  createFilter: (r) => {
+  createFilter: (s) => {
     try {
-      const e = new Ft();
+      const e = new zt();
       return e.updateUIParam = function(t, i) {
         return !0;
       }, e;
@@ -5751,60 +6057,60 @@ f({
   category: "stylize",
   description: "Simulates an old CRT screen with scan lines and noise",
   // Create an instance of the CRTFilter with the provided parameters
-  createFilter: (r) => {
+  createFilter: (s) => {
     try {
       const e = {
-        lineWidth: typeof r.lineWidth == "number" ? r.lineWidth : 1,
-        noise: typeof r.noise == "number" ? r.noise : 0.3,
-        curvature: typeof r.curvature == "number" ? r.curvature : 1,
-        lineContrast: typeof r.lineContrast == "number" ? r.lineContrast : 0.25,
-        verticalLine: r.verticalLine === !0,
-        noiseSize: typeof r.noiseSize == "number" ? r.noiseSize : 1,
-        vignetting: typeof r.vignetting == "number" ? r.vignetting : 0.3,
-        vignettingAlpha: typeof r.vignettingAlpha == "number" ? r.vignettingAlpha : 1,
-        vignettingBlur: typeof r.vignettingBlur == "number" ? r.vignettingBlur : 0.3,
-        time: typeof r.time == "number" ? r.time : 0,
-        seed: typeof r.seed == "number" ? r.seed : Math.random()
+        lineWidth: typeof s.lineWidth == "number" ? s.lineWidth : 1,
+        noise: typeof s.noise == "number" ? s.noise : 0.3,
+        curvature: typeof s.curvature == "number" ? s.curvature : 1,
+        lineContrast: typeof s.lineContrast == "number" ? s.lineContrast : 0.25,
+        verticalLine: s.verticalLine === !0,
+        noiseSize: typeof s.noiseSize == "number" ? s.noiseSize : 1,
+        vignetting: typeof s.vignetting == "number" ? s.vignetting : 0.3,
+        vignettingAlpha: typeof s.vignettingAlpha == "number" ? s.vignettingAlpha : 1,
+        vignettingBlur: typeof s.vignettingBlur == "number" ? s.vignettingBlur : 0.3,
+        time: typeof s.time == "number" ? s.time : 0,
+        seed: typeof s.seed == "number" ? s.seed : Math.random()
       }, t = new g.CRTFilter(e);
-      return t._customParams = { ...e }, t.updateUIParam = function(i, s) {
+      return t._customParams = { ...e }, t.updateUIParam = function(i, r) {
         try {
           const a = this._customParams || {};
-          switch (this._customParams = a, a[i] = s, i) {
+          switch (this._customParams = a, a[i] = r, i) {
             case "lineWidth":
-              this.lineWidth = Number(s);
+              this.lineWidth = Number(r);
               break;
             case "noise":
-              this.noise = Number(s);
+              this.noise = Number(r);
               break;
             case "curvature":
-              this.curvature = Number(s);
+              this.curvature = Number(r);
               break;
             case "lineContrast":
-              this.lineContrast = Number(s);
+              this.lineContrast = Number(r);
               break;
             case "verticalLine":
-              this.verticalLine = !!s;
+              this.verticalLine = !!r;
               break;
             case "noiseSize":
-              this.noiseSize = Number(s);
+              this.noiseSize = Number(r);
               break;
             case "vignetting":
-              this.vignetting = Number(s);
+              this.vignetting = Number(r);
               break;
             case "vignettingAlpha":
-              this.vignettingAlpha = Number(s);
+              this.vignettingAlpha = Number(r);
               break;
             case "vignettingBlur":
-              this.vignettingBlur = Number(s);
+              this.vignettingBlur = Number(r);
               break;
             case "time":
-              this.time = Number(s);
+              this.time = Number(r);
               break;
             case "seed":
-              this.seed = Number(s);
+              this.seed = Number(r);
               break;
             default:
-              i in this && (this[i] = s);
+              i in this && (this[i] = r);
               break;
           }
         } catch {
@@ -5929,7 +6235,7 @@ f({
     }
   ]
 });
-const At = C.DisplacementFilter, zt = C.Sprite, q = C.Texture;
+const Nt = w.DisplacementFilter, Rt = w.Sprite, q = w.Texture;
 f({
   id: "displacement",
   // ID must match what the application expects
@@ -5937,9 +6243,9 @@ f({
   category: "distortion",
   description: "Distorts the image using a displacement map texture",
   // Create an instance of the DisplacementFilter with the provided parameters
-  createFilter: (r) => {
+  createFilter: (s) => {
     try {
-      const e = r.mapTexture || "/assets/images/displacement_map.png";
+      const e = s.mapTexture || "/assets/images/displacement_map.png";
       let t;
       try {
         t = q.from(e), t.source.addressMode = "repeat";
@@ -5955,8 +6261,8 @@ f({
         }
         t = q.from(o);
       }
-      const i = new zt(t), s = new At(i, r.scale || 50);
-      return s.scale.x = r.scaleX || 50, s.scale.y = r.scaleY || 50, s._customParams = { ...r }, s._displacementSprite = i, s.updateUIParam = function(a, o) {
+      const i = new Rt(t), r = new Nt(i, s.scale || 50);
+      return r.scale.x = s.scaleX || 50, r.scale.y = s.scaleY || 50, r._customParams = { ...s }, r._displacementSprite = i, r.updateUIParam = function(a, o) {
         const n = this._customParams || {};
         switch (this._customParams = n, n[a] = o, a) {
           case "scaleX":
@@ -5980,7 +6286,7 @@ f({
             break;
         }
         return !0;
-      }, s;
+      }, r;
     } catch {
       return null;
     }
@@ -6034,28 +6340,28 @@ f({
   category: "stylize",
   description: "Simulates a halftone printing pattern with dots",
   // Create an instance of the DotFilter with the provided parameters
-  createFilter: (r) => {
+  createFilter: (s) => {
     try {
       const e = {
-        scale: typeof r.scale == "number" ? r.scale : 1,
-        angle: typeof r.angle == "number" ? r.angle : 5,
-        grayscale: r.grayscale === !0
+        scale: typeof s.scale == "number" ? s.scale : 1,
+        angle: typeof s.angle == "number" ? s.angle : 5,
+        grayscale: s.grayscale === !0
       }, t = new g.DotFilter(e);
-      return t._customParams = { ...e }, t.updateUIParam = function(i, s) {
+      return t._customParams = { ...e }, t.updateUIParam = function(i, r) {
         try {
           const a = this._customParams || {};
-          switch (this._customParams = a, a[i] = s, i) {
+          switch (this._customParams = a, a[i] = r, i) {
             case "scale":
-              this.scale = Number(s);
+              this.scale = Number(r);
               break;
             case "angle":
-              this.angle = Number(s);
+              this.angle = Number(r);
               break;
             case "grayscale":
-              this.grayscale = !!s;
+              this.grayscale = !!r;
               break;
             default:
-              i in this && (this[i] = s);
+              i in this && (this[i] = r);
               break;
           }
         } catch {
@@ -6102,28 +6408,28 @@ f({
     }
   ]
 });
-const { EmbossFilter: Nt } = g;
+const { EmbossFilter: Tt } = g;
 f({
   id: "emboss",
   name: "Emboss",
   category: "stylize",
   description: "Creates an embossed relief effect",
   // Create an instance of the Emboss filter with the provided parameters
-  createFilter: (r) => {
+  createFilter: (s) => {
     try {
-      const e = typeof r.strength == "number" ? r.strength : 5, t = new Nt(e);
+      const e = typeof s.strength == "number" ? s.strength : 5, t = new Tt(e);
       return t._customParams = {
         strength: e
-      }, t.updateUIParam = function(i, s) {
+      }, t.updateUIParam = function(i, r) {
         try {
           const a = this._customParams || {};
-          switch (this._customParams = a, a[i] = s, i) {
+          switch (this._customParams = a, a[i] = r, i) {
             case "strength":
-              const o = Number(s);
+              const o = Number(r);
               a.strength = o, this.strength = o;
               break;
             default:
-              i in this && (this[i] = s);
+              i in this && (this[i] = r);
               break;
           }
         } catch {
@@ -6151,7 +6457,7 @@ f({
     }
   ]
 });
-const { GlitchFilter: Rt } = g, A = {
+const { GlitchFilter: It } = g, z = {
   TRANSPARENT: 0,
   ORIGINAL: 1,
   LOOP: 2,
@@ -6163,29 +6469,29 @@ f({
   name: "Glitch",
   category: "effects",
   description: "Apply digital distortion and glitch effects",
-  createFilter: (r) => {
+  createFilter: (s) => {
     try {
-      const e = { x: r.redX, y: r.redY }, t = { x: r.greenX, y: r.greenY }, i = { x: r.blueX, y: r.blueY }, s = new Rt({
-        slices: r.slices,
-        offset: r.offset,
-        direction: r.direction,
-        fillMode: r.fillMode,
-        seed: r.seed,
-        average: r.average,
-        minSize: r.minSize,
-        sampleSize: r.sampleSize,
+      const e = { x: s.redX, y: s.redY }, t = { x: s.greenX, y: s.greenY }, i = { x: s.blueX, y: s.blueY }, r = new It({
+        slices: s.slices,
+        offset: s.offset,
+        direction: s.direction,
+        fillMode: s.fillMode,
+        seed: s.seed,
+        average: s.average,
+        minSize: s.minSize,
+        sampleSize: s.sampleSize,
         red: e,
         green: t,
         blue: i
       });
-      s.animating = r.animating || !1, s._customParams = { ...r }, typeof s.refresh == "function" && s.refresh();
+      r.animating = s.animating || !1, r._customParams = { ...s }, typeof r.refresh == "function" && r.refresh();
       let a = null;
       const o = () => {
-        s.animating && (s.seed = Math.random()), a = requestAnimationFrame(o);
+        r.animating && (r.seed = Math.random()), a = requestAnimationFrame(o);
       };
-      return s.animating && (a = requestAnimationFrame(o)), s._stopAnimation = () => {
+      return r.animating && (a = requestAnimationFrame(o)), r._stopAnimation = () => {
         a !== null && (cancelAnimationFrame(a), a = null);
-      }, s.updateUIParam = function(n, l) {
+      }, r.updateUIParam = function(n, l) {
         const c = this._customParams || {};
         switch (this._customParams = c, c[n] = l, n) {
           case "animating":
@@ -6234,7 +6540,7 @@ f({
             n in this && (this[n] = l);
             break;
         }
-      }, s;
+      }, r;
     } catch {
       return null;
     }
@@ -6243,7 +6549,7 @@ f({
     slices: 10,
     offset: 100,
     direction: 0,
-    fillMode: A.LOOP,
+    fillMode: z.LOOP,
     // LOOP mode looks better for the demo
     seed: 0.5,
     average: !1,
@@ -6306,13 +6612,13 @@ f({
       label: "Fill Mode",
       property: "fillMode",
       options: [
-        { value: A.TRANSPARENT, label: "Transparent" },
-        { value: A.ORIGINAL, label: "Original" },
-        { value: A.LOOP, label: "Loop" },
-        { value: A.CLAMP, label: "Clamp" },
-        { value: A.MIRROR, label: "Mirror" }
+        { value: z.TRANSPARENT, label: "Transparent" },
+        { value: z.ORIGINAL, label: "Original" },
+        { value: z.LOOP, label: "Loop" },
+        { value: z.CLAMP, label: "Clamp" },
+        { value: z.MIRROR, label: "Mirror" }
       ],
-      default: A.LOOP
+      default: z.LOOP
     },
     {
       id: "seed",
@@ -6406,54 +6712,54 @@ f({
     }
   ]
 });
-const { GlowFilter: Tt } = g;
+const { GlowFilter: Et } = g;
 f({
   id: "glow",
   name: "Glow",
   category: "light",
   description: "Adds a customizable glow effect around the image",
   // Create an instance of the GlowFilter with the provided parameters
-  createFilter: (r) => {
+  createFilter: (s) => {
     try {
-      const e = parseInt(r.color.replace("#", "0x"), 16), t = new Tt({
-        distance: r.distance || 10,
-        outerStrength: r.outerStrength || 4,
-        innerStrength: r.innerStrength || 0,
+      const e = parseInt(s.color.replace("#", "0x"), 16), t = new Et({
+        distance: s.distance || 10,
+        outerStrength: s.outerStrength || 4,
+        innerStrength: s.innerStrength || 0,
         color: e,
-        alpha: r.alpha ?? 1,
-        quality: r.quality || 0.1,
-        knockout: r.knockout || !1
+        alpha: s.alpha ?? 1,
+        quality: s.quality || 0.1,
+        knockout: s.knockout || !1
       });
       return t._customParams = {
-        color: r.color || "#ffffff",
-        ...r
-      }, t.updateUIParam = function(i, s) {
+        color: s.color || "#ffffff",
+        ...s
+      }, t.updateUIParam = function(i, r) {
         try {
           const a = this._customParams || {};
-          switch (this._customParams = a, a[i] = s, i) {
+          switch (this._customParams = a, a[i] = r, i) {
             case "distance":
-              this.distance = Number(s);
+              this.distance = Number(r);
               break;
             case "outerStrength":
-              this.outerStrength = Number(s);
+              this.outerStrength = Number(r);
               break;
             case "innerStrength":
-              this.innerStrength = Number(s);
+              this.innerStrength = Number(r);
               break;
             case "color":
-              a.color = s, this.color = parseInt(s.replace("#", "0x"), 16);
+              a.color = r, this.color = parseInt(r.replace("#", "0x"), 16);
               break;
             case "alpha":
-              this.alpha = Number(s);
+              this.alpha = Number(r);
               break;
             case "quality":
-              this.quality = Number(s);
+              this.quality = Number(r);
               break;
             case "knockout":
-              this.knockout = !!s;
+              this.knockout = !!r;
               break;
             default:
-              i in this && (this[i] = s);
+              i in this && (this[i] = r);
               break;
           }
         } catch {
@@ -6541,35 +6847,35 @@ f({
     }
   ]
 });
-const { GodrayFilter: It } = g;
+const { GodrayFilter: Xt } = g;
 f({
   id: "godray",
   name: "Godray",
   category: "light",
   description: "Creates volumetric light-ray effects (crepuscular rays)",
   // Create an instance of the GodrayFilter with the provided parameters
-  createFilter: (r) => {
+  createFilter: (s) => {
     try {
-      const e = new It({
-        angle: r.angle || 30,
-        parallel: r.parallel ?? !0,
+      const e = new Xt({
+        angle: s.angle || 30,
+        parallel: s.parallel ?? !0,
         center: {
-          x: r.centerX || 0,
-          y: r.centerY || 0
+          x: s.centerX || 0,
+          y: s.centerY || 0
         },
-        gain: r.gain || 0.5,
-        lacunarity: r.lacunarity || 2.5,
-        time: r.time || 0,
-        alpha: r.alpha || 1
+        gain: s.gain || 0.5,
+        lacunarity: s.lacunarity || 2.5,
+        time: s.time || 0,
+        alpha: s.alpha || 1
       });
       return e._customParams = {
-        centerX: r.centerX || 0,
-        centerY: r.centerY || 0,
-        ...r
+        centerX: s.centerX || 0,
+        centerY: s.centerY || 0,
+        ...s
       }, e.updateUIParam = function(t, i) {
         try {
-          const s = this._customParams || {};
-          switch (this._customParams = s, s[t] = i, t) {
+          const r = this._customParams || {};
+          switch (this._customParams = r, r[t] = i, t) {
             case "angle":
               this.angle = Number(i);
               break;
@@ -6577,14 +6883,14 @@ f({
               this.parallel = !!i;
               break;
             case "centerX":
-              s.centerX = Number(i), this.center = {
+              r.centerX = Number(i), this.center = {
                 x: Number(i),
-                y: s.centerY
+                y: r.centerY
               };
               break;
             case "centerY":
-              s.centerY = Number(i), this.center = {
-                x: s.centerX,
+              r.centerY = Number(i), this.center = {
+                x: r.centerX,
                 y: Number(i)
               };
               break;
@@ -6703,18 +7009,18 @@ f({
     }
   ]
 });
-const Xt = g.SimpleLightmapFilter, ie = C.Texture;
+const Yt = g.SimpleLightmapFilter, re = w.Texture;
 f({
   id: "lightmap",
   name: "Lightmap",
   category: "light",
   description: "Applies lighting effects using a reference texture as a light map",
   // Create an instance of the SimpleLightmapFilter with the provided parameters
-  createFilter: (r) => {
+  createFilter: (s) => {
     try {
-      const e = r.textureType || "default", t = r.color || "#000000", i = typeof r.alpha == "number" ? r.alpha : 1, s = document.createElement("canvas");
-      s.width = 256, s.height = 256;
-      const a = s.getContext("2d");
+      const e = s.textureType || "default", t = s.color || "#000000", i = typeof s.alpha == "number" ? s.alpha : 1, r = document.createElement("canvas");
+      r.width = 256, r.height = 256;
+      const a = r.getContext("2d");
       if (!a)
         throw new Error("Canvas 2D context not available");
       if (e === "spotlight") {
@@ -6728,14 +7034,14 @@ f({
         const c = a.createRadialGradient(128, 128, 10, 128, 128, 160);
         c.addColorStop(0, "white"), c.addColorStop(0.3, "rgba(220, 220, 220, 1)"), c.addColorStop(0.6, "rgba(150, 150, 150, 1)"), c.addColorStop(1, "black"), a.fillStyle = c, a.fillRect(0, 0, 256, 256);
       }
-      const o = ie.from(s);
+      const o = re.from(r);
       let n;
       try {
         typeof t == "string" && t.startsWith("#") ? n = parseInt(t.replace("#", "0x"), 16) : n = 0;
       } catch {
         n = 0;
       }
-      const l = new Xt(o, n, i);
+      const l = new Yt(o, n, i);
       return l._customParams = {
         textureType: e,
         color: t,
@@ -6761,7 +7067,7 @@ f({
                   const b = m.createRadialGradient(128, 128, 10, 128, 128, 160);
                   b.addColorStop(0, "white"), b.addColorStop(0.3, "rgba(220, 220, 220, 1)"), b.addColorStop(0.6, "rgba(150, 150, 150, 1)"), b.addColorStop(1, "black"), m.fillStyle = b, m.fillRect(0, 0, 256, 256);
                 }
-                const S = ie.from(p);
+                const S = re.from(p);
                 if (this.lightMap = S, this.enabled !== void 0) {
                   const b = this.enabled;
                   this.enabled = !1, setTimeout(() => {
@@ -6834,28 +7140,28 @@ f({
     }
   ]
 });
-const { NoiseFilter: Et } = C;
+const { NoiseFilter: Bt } = w;
 f({
   id: "noise",
   name: "Noise",
   category: "effects",
   description: "Add random noise to the image",
-  createFilter: (r) => {
+  createFilter: (s) => {
     try {
-      const e = new Et({
-        noise: r.noise || 0.5,
-        seed: r.seed || Math.random()
+      const e = new Bt({
+        noise: s.noise || 0.5,
+        seed: s.seed || Math.random()
       });
-      e.animating = r.animating || !1, e._customParams = { ...r };
+      e.animating = s.animating || !1, e._customParams = { ...s };
       let t = null;
       const i = () => {
         e.animating && (e.seed = Math.random()), t = requestAnimationFrame(i);
       };
       return e.animating && (t = requestAnimationFrame(i)), e._stopAnimation = () => {
         t !== null && (cancelAnimationFrame(t), t = null);
-      }, e.updateUIParam = function(s, a) {
+      }, e.updateUIParam = function(r, a) {
         const o = this._customParams || {};
-        switch (this._customParams = o, o[s] = a, s) {
+        switch (this._customParams = o, o[r] = a, r) {
           case "animating":
             this.animating = a, a && !t && (t = requestAnimationFrame(i));
             break;
@@ -6869,7 +7175,7 @@ f({
             a && (this.seed = Math.random());
             break;
           default:
-            s in this && (this[s] = a);
+            r in this && (this[r] = a);
             break;
         }
       }, e;
@@ -6919,36 +7225,36 @@ f({
     }
   ]
 });
-const { OldFilmFilter: Yt } = g;
+const { OldFilmFilter: Ot } = g;
 f({
   id: "old-film",
   name: "Old Film",
   category: "effects",
   description: "Apply a vintage film effect with scratches and grain",
-  createFilter: (r) => {
+  createFilter: (s) => {
     try {
-      const e = new Yt({
-        sepia: r.sepia,
-        noise: r.noise,
-        noiseSize: r.noiseSize,
-        scratch: r.scratch,
-        scratchDensity: r.scratchDensity,
-        scratchWidth: r.scratchWidth,
-        vignetting: r.vignetting,
-        vignettingAlpha: r.vignettingAlpha,
-        vignettingBlur: r.vignettingBlur,
-        seed: r.seed || Math.random()
+      const e = new Ot({
+        sepia: s.sepia,
+        noise: s.noise,
+        noiseSize: s.noiseSize,
+        scratch: s.scratch,
+        scratchDensity: s.scratchDensity,
+        scratchWidth: s.scratchWidth,
+        vignetting: s.vignetting,
+        vignettingAlpha: s.vignettingAlpha,
+        vignettingBlur: s.vignettingBlur,
+        seed: s.seed || Math.random()
       });
-      e.animating = r.animating || !1, e._customParams = { ...r };
+      e.animating = s.animating || !1, e._customParams = { ...s };
       let t = null;
       const i = () => {
         e.animating && (e.seed = Math.random()), t = requestAnimationFrame(i);
       };
       return e.animating && (t = requestAnimationFrame(i)), e._stopAnimation = () => {
         t !== null && (cancelAnimationFrame(t), t = null);
-      }, e.updateUIParam = function(s, a) {
+      }, e.updateUIParam = function(r, a) {
         const o = this._customParams || {};
-        switch (this._customParams = o, o[s] = a, s) {
+        switch (this._customParams = o, o[r] = a, r) {
           case "animating":
             this.animating = a, a && !t && (t = requestAnimationFrame(i));
             break;
@@ -6967,10 +7273,10 @@ f({
           case "vignetting":
           case "vignettingAlpha":
           case "vignettingBlur":
-            s in this && (this[s] = a);
+            r in this && (this[r] = a);
             break;
           default:
-            s in this && (this[s] = a);
+            r in this && (this[r] = a);
             break;
         }
       }, e;
@@ -7108,43 +7414,43 @@ f({
     }
   ]
 });
-const { OutlineFilter: Bt } = g;
+const { OutlineFilter: Lt } = g;
 f({
   id: "outline",
   name: "Outline",
   category: "effects",
   description: "Add an outline or stroke around the image",
-  createFilter: (r) => {
+  createFilter: (s) => {
     try {
-      let e = r.color;
+      let e = s.color;
       typeof e == "string" && (e = parseInt(e.replace("#", "0x"), 16));
-      const t = new Bt({
-        thickness: r.thickness || 4,
+      const t = new Lt({
+        thickness: s.thickness || 4,
         color: e,
-        alpha: r.alpha || 1,
-        quality: r.quality || 0.1,
-        knockout: r.knockout || !1
+        alpha: s.alpha || 1,
+        quality: s.quality || 0.1,
+        knockout: s.knockout || !1
       });
-      return t._customParams = { ...r }, t.updateUIParam = function(i, s) {
+      return t._customParams = { ...s }, t.updateUIParam = function(i, r) {
         const a = this._customParams || {};
-        switch (this._customParams = a, a[i] = s, i) {
+        switch (this._customParams = a, a[i] = r, i) {
           case "thickness":
-            this.thickness = Math.max(0, s);
+            this.thickness = Math.max(0, r);
             break;
           case "color":
-            typeof s == "string" ? (this.color = parseInt(s.replace("#", "0x"), 16), a.color = s) : this.color = s;
+            typeof r == "string" ? (this.color = parseInt(r.replace("#", "0x"), 16), a.color = r) : this.color = r;
             break;
           case "alpha":
-            this.alpha = Math.max(0, Math.min(1, s));
+            this.alpha = Math.max(0, Math.min(1, r));
             break;
           case "quality":
-            this.quality = Math.max(0.01, Math.min(1, s));
+            this.quality = Math.max(0.01, Math.min(1, r));
             break;
           case "knockout":
-            this.knockout = !!s;
+            this.knockout = !!r;
             break;
           default:
-            i in this && (this[i] = s);
+            i in this && (this[i] = r);
             break;
         }
       }, t;
@@ -7208,37 +7514,37 @@ f({
     }
   ]
 });
-const { PixelateFilter: Ot } = g;
+const { PixelateFilter: Dt } = g;
 f({
   id: "pixelate",
   name: "Pixelate",
   category: "effects",
   description: "Create a pixelated or mosaic effect",
-  createFilter: (r) => {
+  createFilter: (s) => {
     try {
-      const e = new Ot(
-        r.useUniform ? Math.max(4, r.size || 10) : [Math.max(4, r.sizeX || 10), Math.max(4, r.sizeY || 10)]
+      const e = new Dt(
+        s.useUniform ? Math.max(4, s.size || 10) : [Math.max(4, s.sizeX || 10), Math.max(4, s.sizeY || 10)]
       );
-      return e._customParams = { ...r }, e.updateUIParam = function(t, i) {
-        const s = this._customParams || {};
-        switch (this._customParams = s, s[t] = i, t) {
+      return e._customParams = { ...s }, e.updateUIParam = function(t, i) {
+        const r = this._customParams || {};
+        switch (this._customParams = r, r[t] = i, t) {
           case "useUniform":
-            if (s.useUniform = i, i) {
+            if (r.useUniform = i, i) {
               const a = Math.round((this.sizeX + this.sizeY) / 2);
-              this.size = Math.max(4, a), s.size = a;
+              this.size = Math.max(4, a), r.size = a;
             } else {
               const a = Array.isArray(this.size) ? this.size[0] : this.size;
-              this.sizeX = Math.max(4, a), this.sizeY = Math.max(4, a), s.sizeX = this.sizeX, s.sizeY = this.sizeY;
+              this.sizeX = Math.max(4, a), this.sizeY = Math.max(4, a), r.sizeX = this.sizeX, r.sizeY = this.sizeY;
             }
             break;
           case "size":
-            s.useUniform && (this.size = Math.max(4, i));
+            r.useUniform && (this.size = Math.max(4, i));
             break;
           case "sizeX":
-            s.useUniform || (this.sizeX = Math.max(4, i));
+            r.useUniform || (this.sizeX = Math.max(4, i));
             break;
           case "sizeY":
-            s.useUniform || (this.sizeY = Math.max(4, i));
+            r.useUniform || (this.sizeY = Math.max(4, i));
             break;
           default:
             t in this && (this[t] = i);
@@ -7299,7 +7605,7 @@ f({
     }
   ]
 });
-const { ReflectionFilter: Lt } = g;
+const { ReflectionFilter: Ut } = g;
 f({
   id: "reflection",
   // ID must match what the application expects
@@ -7307,47 +7613,47 @@ f({
   category: "distortion",
   description: "Creates a water reflection effect with configurable waves",
   // Create an instance of the ReflectionFilter with the provided parameters
-  createFilter: (r) => {
+  createFilter: (s) => {
     try {
       const e = {
-        mirror: r.mirror ?? !0,
-        boundary: r.boundary ?? 0.5,
-        amplitude: new Float32Array([r.amplitudeStart ?? 0, r.amplitudeEnd ?? 20]),
-        waveLength: new Float32Array([r.wavelengthStart ?? 30, r.wavelengthEnd ?? 100]),
-        alpha: new Float32Array([r.alphaStart ?? 1, r.alphaEnd ?? 1]),
-        time: r.time ?? 0
-      }, t = new Lt(e);
-      return t._customParams = { ...r }, t.animating = r.animating ?? !1, t.updateUIParam = function(i, s) {
+        mirror: s.mirror ?? !0,
+        boundary: s.boundary ?? 0.5,
+        amplitude: new Float32Array([s.amplitudeStart ?? 0, s.amplitudeEnd ?? 20]),
+        waveLength: new Float32Array([s.wavelengthStart ?? 30, s.wavelengthEnd ?? 100]),
+        alpha: new Float32Array([s.alphaStart ?? 1, s.alphaEnd ?? 1]),
+        time: s.time ?? 0
+      }, t = new Ut(e);
+      return t._customParams = { ...s }, t.animating = s.animating ?? !1, t.updateUIParam = function(i, r) {
         const a = this._customParams || {};
-        switch (this._customParams = a, a[i] = s, i) {
+        switch (this._customParams = a, a[i] = r, i) {
           case "mirror":
           case "boundary":
           case "time":
-            this[i] = s;
+            this[i] = r;
             break;
           case "amplitudeStart":
-            Array.isArray(this.amplitude) || (this.amplitude = [0, this._customParams.amplitudeEnd || 20]), this.amplitude[0] = s;
+            Array.isArray(this.amplitude) || (this.amplitude = [0, this._customParams.amplitudeEnd || 20]), this.amplitude[0] = r;
             break;
           case "amplitudeEnd":
-            Array.isArray(this.amplitude) || (this.amplitude = [this._customParams.amplitudeStart || 0, 20]), this.amplitude[1] = s;
+            Array.isArray(this.amplitude) || (this.amplitude = [this._customParams.amplitudeStart || 0, 20]), this.amplitude[1] = r;
             break;
           case "wavelengthStart":
-            Array.isArray(this.waveLength) || (this.waveLength = [30, this._customParams.wavelengthEnd || 100]), this.waveLength[0] = s;
+            Array.isArray(this.waveLength) || (this.waveLength = [30, this._customParams.wavelengthEnd || 100]), this.waveLength[0] = r;
             break;
           case "wavelengthEnd":
-            Array.isArray(this.waveLength) || (this.waveLength = [this._customParams.wavelengthStart || 30, 100]), this.waveLength[1] = s;
+            Array.isArray(this.waveLength) || (this.waveLength = [this._customParams.wavelengthStart || 30, 100]), this.waveLength[1] = r;
             break;
           case "alphaStart":
-            Array.isArray(this.alpha) || (this.alpha = [1, this._customParams.alphaEnd || 1]), this.alpha[0] = s;
+            Array.isArray(this.alpha) || (this.alpha = [1, this._customParams.alphaEnd || 1]), this.alpha[0] = r;
             break;
           case "alphaEnd":
-            Array.isArray(this.alpha) || (this.alpha = [this._customParams.alphaStart || 1, 1]), this.alpha[1] = s;
+            Array.isArray(this.alpha) || (this.alpha = [this._customParams.alphaStart || 1, 1]), this.alpha[1] = r;
             break;
           case "animating":
-            this.animating = s;
+            this.animating = r;
             break;
           default:
-            i in this && (this[i] = s);
+            i in this && (this[i] = r);
             break;
         }
         return !0;
@@ -7467,7 +7773,7 @@ f({
     }
   ]
 });
-const { ShockwaveFilter: Ut } = g;
+const { ShockwaveFilter: Vt } = g;
 f({
   id: "shockwave",
   // ID must match what the application expects
@@ -7475,18 +7781,18 @@ f({
   category: "distortion",
   description: "Creates a rippling shockwave or blast wave effect",
   // Create an instance of the ShockwaveFilter with the provided parameters
-  createFilter: (r) => {
+  createFilter: (s) => {
     try {
-      const e = r.centerX ?? 0.5, t = r.centerY ?? 0.5, i = { x: e, y: t }, s = r.amplitude ?? 30, a = r.wavelength ?? 160, o = r.speed ?? 500, n = r.brightness ?? 1, l = r.radius ?? -1, c = r.time ?? 0, d = new Ut({
+      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({
         center: i,
-        amplitude: s,
+        amplitude: r,
         wavelength: a,
         speed: o,
         brightness: n,
         radius: l,
         time: c
       });
-      return d._customParams = { ...r }, d.animating = r.animating ?? !1, d.updateUIParam = function(h, p) {
+      return d._customParams = { ...s }, d.animating = s.animating ?? !1, d.updateUIParam = function(h, p) {
         const m = this._customParams || {};
         switch (this._customParams = m, m[h] = p, h) {
           case "centerX":
@@ -7619,26 +7925,26 @@ f({
     }
   ]
 });
-const { SimplexNoiseFilter: Dt } = g;
+const { SimplexNoiseFilter: jt } = g;
 f({
   id: "simplex-noise",
   name: "Simplex Noise",
   category: "effects",
   description: "Apply procedural noise to create texture effects",
-  createFilter: (r) => {
+  createFilter: (s) => {
     try {
-      const e = r.animating ? 0 : r.offsetZ || 0, t = new Dt({
-        strength: r.strength,
-        noiseScale: r.noiseScale,
-        offsetX: r.offsetX,
-        offsetY: r.offsetY,
+      const e = s.animating ? 0 : s.offsetZ || 0, t = new jt({
+        strength: s.strength,
+        noiseScale: s.noiseScale,
+        offsetX: s.offsetX,
+        offsetY: s.offsetY,
         offsetZ: e,
-        step: r.step
+        step: s.step
       });
-      t.animating = r.animating || !1, t.animationSpeed = r.animationSpeed || 0.01, t._customParams = { ...r };
-      let i = null, s = 0;
+      t.animating = s.animating || !1, t.animationSpeed = s.animationSpeed || 0.01, t._customParams = { ...s };
+      let i = null, r = 0;
       const a = () => {
-        t.animating && (s += t.animationSpeed, t.offsetZ = s), i = requestAnimationFrame(a);
+        t.animating && (r += t.animationSpeed, t.offsetZ = r), i = requestAnimationFrame(a);
       };
       return t.animating && (i = requestAnimationFrame(a)), t._stopAnimation = () => {
         i !== null && (cancelAnimationFrame(i), i = null);
@@ -7774,9 +8080,9 @@ f({
     }
   ]
 });
-class Vt extends C.Filter {
+class qt extends w.Filter {
   constructor(e) {
-    const t = ue.from({
+    const t = be.from({
       vertex: `
         attribute vec2 aPosition;
         varying vec2 vTextureCoord;
@@ -7883,15 +8189,15 @@ f({
   name: "Twist",
   category: "distortion",
   description: "Creates a twisting distortion effect around a central point",
-  createFilter: (r) => {
+  createFilter: (s) => {
     try {
-      const e = new Vt({
-        centerX: r.centerX ?? 0.5,
-        centerY: r.centerY ?? 0.5,
-        radius: r.radius ?? 0.25,
-        angle: r.angle ?? 4
+      const e = new qt({
+        centerX: s.centerX ?? 0.5,
+        centerY: s.centerY ?? 0.5,
+        radius: s.radius ?? 0.25,
+        angle: s.angle ?? 4
       });
-      return e._customParams = { ...r }, e;
+      return e._customParams = { ...s }, e;
     } catch {
       return null;
     }
@@ -7955,16 +8261,16 @@ f({
     }
   ]
 });
-const { AdjustmentFilter: jt } = g;
-function L(r) {
-  const e = typeof r == "string" ? parseInt(r.replace("#", "0x"), 16) : r;
+const { AdjustmentFilter: Ht } = g;
+function L(s) {
+  const e = typeof s == "string" ? parseInt(s.replace("#", "0x"), 16) : s;
   return [
     (e >> 16 & 255) / 255,
     (e >> 8 & 255) / 255,
     (e & 255) / 255
   ];
 }
-class qt extends jt {
+class $t extends Ht {
   constructor(e = {}) {
     super({
       brightness: 1,
@@ -8005,16 +8311,16 @@ f({
   name: "Vignette",
   category: "effects",
   description: "Add a classic darkened border effect to the image",
-  createFilter: (r) => {
+  createFilter: (s) => {
     try {
-      const e = new qt({
-        radius: r.radius || 0.8,
-        strength: r.strength || 1,
-        color: r.color || "#000000"
+      const e = new $t({
+        radius: s.radius || 0.8,
+        strength: s.strength || 1,
+        color: s.color || "#000000"
       });
-      return e._customParams = { ...r }, e.updateUIParam = function(t, i) {
-        const s = this._customParams || {};
-        switch (this._customParams = s, s[t] = i, t) {
+      return e._customParams = { ...s }, e.updateUIParam = function(t, i) {
+        const r = this._customParams || {};
+        switch (this._customParams = r, r[t] = i, t) {
           case "radius":
             this.radius = Math.max(0.1, Math.min(1.5, i));
             break;
@@ -8022,7 +8328,7 @@ f({
             this.strength = Math.max(0, i);
             break;
           case "color":
-            this.color = i, typeof i == "string" && (s.color = i);
+            this.color = i, typeof i == "string" && (r.color = i);
             break;
           default:
             t in this && (this[t] = i);
@@ -8071,22 +8377,22 @@ f({
     }
   ]
 });
-function Kt(r) {
+function Jt(s) {
   try {
     let e = [], t = [];
     try {
-      e = U(), e.length === 0 && Ke();
+      e = D(), e.length === 0 && Je();
     } catch {
     }
-    const i = r == null ? void 0 : r.disabled;
+    const i = s == null ? void 0 : s.disabled;
     if (Array.isArray(i) && i.length > 0) {
-      let s = 0;
+      let r = 0;
       for (const a of i)
-        et(a) && s++;
-      s > 0;
+        it(a) && r++;
+      r > 0;
     }
     try {
-      e = U(), t = Je();
+      e = D(), t = tt();
     } catch {
       e || (e = []), t || (t = []);
     }
@@ -8096,16 +8402,16 @@ function Kt(r) {
   }
 }
 export {
-  Zt as V,
-  Ge as a,
-  Qe as b,
-  Je as c,
-  Ke as d,
-  Gt as e,
-  tt as f,
-  U as g,
-  Wt as h,
-  Kt as i,
+  Gt as V,
+  Qe as a,
+  et as b,
+  tt as c,
+  Je as d,
+  Qt as e,
+  rt as f,
+  D as g,
+  Kt as h,
+  Jt as i,
   f as r
 };
-//# sourceMappingURL=editor-CfH1RN8F.js.map
+//# sourceMappingURL=editor-DJXRx8vN.js.map