@codingfactory/mediables-vue 2.0.1 → 2.0.5

package/dist/{index-CcGWfCCV.js → index-BsOWbGbb.js}

@@ -1,7 +1,10 @@
+var ie = Object.defineProperty;
+var re = (s, e, i) => e in s ? ie(s, e, { enumerable: !0, configurable: !0, writable: !0, value: i }) : s[e] = i;
+var B = (s, e, i) => re(s, typeof e != "symbol" ? e + "" : e, i);
 import * as g from "pixi-filters";
 import * as C from "pixi.js";
-import { GlProgram as K } from "pixi.js";
-class N {
+import { GlProgram as se } from "pixi.js";
+class I {
   constructor() {
     this._events = /* @__PURE__ */ new Map();
   }
@@ -31,7 +34,7 @@ class N {
     e ? this._events.delete(e) : this._events.clear();
   }
 }
-class Q extends N {
+class ae extends I {
   constructor() {
     super(), this._state = {
       // Image state
@@ -90,10 +93,10 @@ class Q extends N {
     const t = this.get(e);
     if (e.includes(".")) {
       const r = e.split("."), a = r.pop();
-      let l = this._state;
-      for (const o of r)
-        l[o] === void 0 && (l[o] = {}), l = l[o];
-      l[a] = i;
+      let o = this._state;
+      for (const l of r)
+        o[l] === void 0 && (o[l] = {}), o = o[l];
+      o[a] = i;
     } else
       this._state[e] = i;
     this.emit(`change:${e}`, { value: i, old: t }), this.emit("change", { key: e, value: i, old: t });
@@ -157,19 +160,29 @@ class Q extends N {
       this.set("isDarkMode", this._state.theme === "dark");
   }
 }
-function J() {
-  return new Q();
+function oe() {
+  return new ae();
 }
-class ee extends N {
+class le extends I {
   constructor() {
-    super(), this.app = null, this.sprite = null, this.originalTexture = null, this.baseTexture = null, this.fitScale = 1, this.zoom = 1, this._container = null;
+    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;
   }
   /**
-   * Get CSS size of the canvas (for proper coordinate mapping)
+   * Whether the renderer is fully initialized and ready for use.
+   * @returns {boolean}
+   */
+  get isReady() {
+    var e;
+    return !!((e = this.app) != null && e.renderer);
+  }
+  /**
+   * Get CSS size of the canvas (for proper coordinate mapping).
+   * Accesses renderer.canvas directly to avoid PIXI Application's
+   * canvas getter which throws when renderer is undefined.
    */
   _getCssSize() {
-    var r, a, l;
-    const e = (r = this.app) == null ? void 0 : r.canvas, i = (e == null ? void 0 : e.clientWidth) ?? ((a = this.app) == null ? void 0 : a.screen.width) ?? 0, t = (e == null ? void 0 : e.clientHeight) ?? ((l = this.app) == null ? void 0 : l.screen.height) ?? 0;
+    var r, a, o, l, n, c;
+    const e = (a = (r = this.app) == null ? void 0 : r.renderer) == null ? void 0 : a.canvas, i = (e == null ? void 0 : e.clientWidth) ?? ((l = (o = this.app) == null ? void 0 : o.screen) == null ? void 0 : l.width) ?? 0, t = (e == null ? void 0 : e.clientHeight) ?? ((c = (n = this.app) == null ? void 0 : n.screen) == null ? void 0 : c.height) ?? 0;
     return { w: i, h: t };
   }
   /**
@@ -224,33 +237,43 @@ class ee extends N {
   async mount(e, i = 16777215) {
     if (!e) return;
     this._container = e;
-    const t = window.PIXI;
-    if (!t)
-      throw new Error("PIXI.js not found. Please ensure PIXI is loaded globally.");
-    const r = e.clientWidth || 600, a = e.clientHeight || 400;
-    this.app = new t.Application(), await this.app.init({
-      width: r,
-      height: a,
-      backgroundColor: i,
-      antialias: !0,
-      autoDensity: !0,
-      resolution: window.devicePixelRatio || 1
-    }), e.appendChild(this.app.canvas);
-    const l = this.app.canvas;
-    l.classList.add("pixi-canvas"), l.style.width = "100%", l.style.height = "100%", l.style.transform = "translateZ(0)", l.style.willChange = "transform", this.emit("mounted", { width: r, height: a });
+    const t = async () => {
+      var n;
+      const r = window.PIXI;
+      if (!r)
+        throw new Error("PIXI.js not found. Please ensure PIXI is loaded globally.");
+      (n = r.Assets) != null && n.setPreferences && r.Assets.setPreferences({ crossOrigin: "anonymous" });
+      const a = e.clientWidth || 600, o = e.clientHeight || 400;
+      this.app = new r.Application(), await this.app.init({
+        width: a,
+        height: o,
+        backgroundColor: i,
+        antialias: !0,
+        autoDensity: !0,
+        resolution: window.devicePixelRatio || 1
+      }), e.appendChild(this.app.canvas);
+      const l = this.app.canvas;
+      l.classList.add("pixi-canvas"), l.style.width = "100%", l.style.height = "100%", l.style.transform = "translateZ(0)", l.style.willChange = "transform", l.setAttribute("role", "img"), l.setAttribute("aria-label", "Image editor canvas — use toolbar controls to edit the image"), this.emit("mounted", { width: a, height: o });
+    };
+    this._mountPromise = t(), await this._mountPromise;
   }
   /**
    * Load an image texture
-   * @param {string} imageUrl - URL or data URL of the image
+   * @param {string} imageUrl - URL, data URL, or blob URL of the image
    */
   async loadTexture(e) {
-    if (!this.app) return;
-    const i = window.PIXI, t = await i.Assets.load(e);
-    this.originalTexture = t, this.baseTexture = t, this.sprite && (this.app.stage.removeChild(this.sprite), this.sprite.destroy()), this.sprite = new i.Sprite(t), this.app.stage.addChild(this.sprite), this.fitScale = this.getFitScaleFor(t), this.zoom = 1;
-    const { w: r, h: a } = this._getCssSize();
-    this.applyViewTransform({ center: { x: r / 2, y: a / 2 } }), await new Promise(requestAnimationFrame);
-    const l = this.getFitScaleFor(t);
-    Math.abs(l - this.fitScale) / Math.max(1e-6, l) > 0.02 && (this.fitScale = l, this.applyViewTransform({ center: { x: r / 2, y: a / 2 } })), this.render(), this.emit("textureLoaded", { width: t.width, height: t.height });
+    var n, c, d;
+    if (this._mountPromise && await this._mountPromise, !((n = this.app) != null && n.renderer)) return;
+    const i = window.PIXI, t = await this._loadImageElement(e);
+    if (!t || !((c = this.app) != null && c.renderer)) return;
+    const r = i.Texture.from(t);
+    if (!r)
+      return;
+    this.originalTexture = r, this.baseTexture = r, this.sprite && (this.app.stage.removeChild(this.sprite), this.sprite.destroy()), this.sprite = new i.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 l = this.getFitScaleFor(r);
+    Math.abs(l - this.fitScale) / Math.max(1e-6, l) > 0.02 && (this.fitScale = l, 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
@@ -261,42 +284,63 @@ class ee extends N {
    * @returns {string|null} Data URL
    */
   exportImage(e = "png", i = 0.92, t = 0, r = !0) {
-    var b, y, k;
-    if (!this.app || !this.originalTexture) return null;
-    const a = window.PIXI, l = Math.round(this.originalTexture.width), o = Math.round(this.originalTexture.height);
-    let n = l, c = o;
+    var m, b, _;
+    if (!((m = this.app) != null && m.renderer) || !this.originalTexture)
+      return null;
+    const a = window.PIXI, o = Math.round(this.originalTexture.width), l = Math.round(this.originalTexture.height);
+    if (o <= 0 || l <= 0)
+      return null;
+    let n = o, c = l;
     if (t > 0) {
-      const _ = Math.max(l, o);
-      let S = t / _;
-      r && (S = Math.min(1, S)), n = Math.round(l * S), c = Math.round(o * S);
-    }
-    const u = new a.Container(), h = new a.Sprite(this.originalTexture);
-    if (h.scale.set(n / l, c / o), (y = (b = this.sprite) == null ? void 0 : b.filters) != null && y.length) {
-      const _ = this.sprite.filters.map(
-        (S) => typeof (S == null ? void 0 : S.clone) == "function" ? S.clone() : S
+      const x = Math.max(o, l);
+      let y = t / x;
+      r && (y = Math.min(1, y)), n = Math.round(o * y), c = Math.round(l * y);
+    }
+    const d = new a.Container(), h = new a.Sprite(this.originalTexture);
+    if (h.scale.set(n / o, c / l), (_ = (b = this.sprite) == null ? void 0 : b.filters) != null && _.length) {
+      const x = this.sprite.filters.map(
+        (y) => typeof (y == null ? void 0 : y.clone) == "function" ? y.clone() : y
       );
-      h.filters = _;
+      h.filters = x;
+    }
+    d.addChild(h);
+    let p = null;
+    try {
+      if (p = a.RenderTexture.create({ width: n, height: c }), this.app.renderer.render({ container: d, target: p }), !this.app.renderer.extract)
+        return null;
+      const x = this.app.renderer.extract.canvas(p);
+      if (!x)
+        return null;
+      let y = null;
+      if (typeof x.toDataURL == "function")
+        y = x.toDataURL(`image/${e}`, i);
+      else if (typeof x.getContext == "function") {
+        const P = document.createElement("canvas");
+        P.width = x.width, P.height = x.height;
+        const z = P.getContext("2d");
+        z && (z.drawImage(x, 0, 0), y = P.toDataURL(`image/${e}`, i));
+      }
+      return y || null;
+    } catch {
+      return null;
+    } finally {
+      p && p.destroy(!0), d.destroy({ children: !0 });
     }
-    u.addChild(h);
-    const p = a.RenderTexture.create({ width: n, height: c });
-    if (this.app.renderer.render({ container: u, target: p }), !this.app.renderer.extract)
-      return p.destroy(!0), u.destroy({ children: !0 }), null;
-    const m = this.app.renderer.extract.canvas(p), x = (k = m.toDataURL) == null ? void 0 : k.call(m, `image/${e}`, i);
-    return p.destroy(!0), u.destroy({ children: !0 }), x || null;
   }
   /**
    * Resize renderer to container
    * @param {HTMLElement} container
    */
   resizeTo(e) {
-    if (!this.app || !e) return;
+    var r;
+    if (!((r = this.app) != null && r.renderer) || !e) return;
     const i = e.clientWidth, t = e.clientHeight;
-    if (this.app.renderer.resize(i, t), this.originalTexture && this.sprite) {
-      const r = {
+    if (!(i === Math.round(this.app.screen.width) && t === Math.round(this.app.screen.height)) && !(i <= 0 || t <= 0) && (this.app.renderer.resize(i, t), this.originalTexture && this.sprite)) {
+      const a = {
         x: this.sprite.x + this.sprite.width / 2,
         y: this.sprite.y + this.sprite.height / 2
       };
-      this.fitScale = this.getFitScaleFor(this.originalTexture), this.applyViewTransform({ center: r });
+      this.fitScale = this.getFitScaleFor(this.originalTexture), this.applyViewTransform({ center: a });
     }
   }
   /**
@@ -307,14 +351,35 @@ class ee extends N {
     var i, t;
     (t = (i = this.app) == null ? void 0 : i.renderer) != null && t.background && (this.app.renderer.background.color = e);
   }
+  /**
+   * Load an image URL into an HTMLImageElement.
+   * Handles blob:, data:, and http(s): URLs.
+   * @param {string} url
+   * @returns {Promise<HTMLImageElement|null>}
+   */
+  _loadImageElement(e) {
+    return new Promise((i) => {
+      const t = new Image();
+      typeof e == "string" && /^https?:\/\//.test(e) && (t.crossOrigin = "anonymous"), t.onload = () => i(t), t.onerror = () => {
+        i(null);
+      }, t.src = e;
+    });
+  }
   /**
    * Clean up and destroy
    */
   destroy() {
-    this.app && (this.app.destroy(!0, { children: !0, texture: !0 }), this.app = null), this.sprite = null, this.originalTexture = null, this.baseTexture = null, this._container = null, this.removeAllListeners();
+    if (this._mountPromise = null, this.app) {
+      try {
+        this.app.destroy(!0, { children: !0, texture: !0 });
+      } catch {
+      }
+      this.app = null;
+    }
+    this.sprite = null, this.originalTexture = null, this.baseTexture = null, this._container = null, this.removeAllListeners();
   }
 }
-const te = {
+const ne = {
   adjust: ["adjust", "advanced"],
   // adjustment, adjustmentAdvanced, alpha, colorMatrix
   blur: ["blur"],
@@ -330,7 +395,7 @@ const te = {
   stylize: ["stylize"]
   // ascii, crt, crossHatch, dot, emboss
 };
-class ie extends N {
+class ce extends I {
   constructor(e, i) {
     super(), this.state = e, this.renderer = i, this.instances = {}, this._filterRegistry = null;
   }
@@ -365,11 +430,11 @@ class ie extends N {
    */
   getFiltersByCategory(e) {
     if (!this._filterRegistry) return [];
-    const i = te[e] || [e], t = [], r = /* @__PURE__ */ new Set();
+    const i = ne[e] || [e], t = [], r = /* @__PURE__ */ new Set();
     for (const a of i) {
-      const l = this._filterRegistry.getFiltersByCategory(a) || [];
-      for (const o of l)
-        r.has(o.id) || (r.add(o.id), t.push(o));
+      const o = this._filterRegistry.getFiltersByCategory(a) || [];
+      for (const l of o)
+        r.has(l.id) || (r.add(l.id), t.push(l));
     }
     return t;
   }
@@ -395,12 +460,12 @@ class ie extends N {
     }
     const r = i.replace(/\[(\d+)\]/g, ".$1").split(".").filter(Boolean);
     let a = e;
-    for (let o = 0; o < r.length - 1; o++) {
-      const n = r[o];
+    for (let l = 0; l < r.length - 1; l++) {
+      const n = r[l];
       if (!(n in a) || (a = a[n], a == null)) return;
     }
-    const l = r[r.length - 1];
-    a[l] = t;
+    const o = r[r.length - 1];
+    a[o] = t;
   }
   /**
    * Initialize filter values from definition defaults
@@ -443,7 +508,7 @@ class ie extends N {
     this.state.setFilterValue(e, i, r);
     const a = this.instances[e];
     if (a) {
-      const l = this.getFilterDef(e), o = l == null ? void 0 : l.controls.find((c) => c.id === i), n = (o == null ? void 0 : o.property) || i;
+      const o = this.getFilterDef(e), l = o == null ? void 0 : o.controls.find((c) => c.id === i), n = (l == null ? void 0 : l.property) || i;
       return typeof a.updateUIParam == "function" ? (a.updateUIParam(n, r), !0) : (this._setDeepProp(a, n, r), a.uniforms && n in a.uniforms && (a.uniforms[n] = r), !0);
     }
     return !1;
@@ -462,15 +527,15 @@ class ie extends N {
     const i = [], t = [];
     this.state.get("activeFilters").forEach((a) => {
       try {
-        const l = this.getFilterDef(a);
-        if (!l || !l.createFilter || typeof l.createFilter != "function")
+        const o = this.getFilterDef(a);
+        if (!o || !o.createFilter || typeof o.createFilter != "function")
           return;
-        const o = this.state.getFilterValues(a), n = l.defaultParams ? { ...l.defaultParams } : {};
-        l.controls && Array.isArray(l.controls) && l.controls.forEach((u) => {
-          const h = u.property || u.id;
-          n[h] = o[u.id] ?? u.default;
+        const l = this.state.getFilterValues(a), n = o.defaultParams ? { ...o.defaultParams } : {};
+        o.controls && Array.isArray(o.controls) && o.controls.forEach((d) => {
+          const h = d.property || d.id;
+          n[h] = l[d.id] ?? d.default;
         });
-        const c = l.createFilter(n);
+        const c = o.createFilter(n);
         c && (i.push(c), this.instances[a] = c);
       } catch {
         t.push(a);
@@ -510,9 +575,9 @@ class ie extends N {
     return this.instances[e] || null;
   }
 }
-class re extends N {
+const F = class F extends I {
   constructor(e, i) {
-    super(), this.state = e, this.renderer = i, this._overlayCanvas = null, this._isDragging = !1, this._dragStart = null, this._dragMode = null, this._startRect = null, this._hoverMode = null, 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);
+    super(), this.state = e, this.renderer = i, 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);
   }
   /**
    * Set the overlay canvas element
@@ -527,14 +592,22 @@ class re extends N {
    * @returns {number|null}
    */
   _getAspectRatio(e) {
-    return {
-      free: null,
+    if (!e || e === "free") return null;
+    const i = {
       "1:1": 1,
-      "4:3": 1.3333333333333333,
-      "16:9": 1.7777777777777777,
-      "3:2": 1.5,
-      "2:3": 0.6666666666666666
-    }[e] ?? null;
+      "4:3": 4 / 3,
+      "16:9": 16 / 9,
+      "3:2": 3 / 2,
+      "2:3": 2 / 3
+    };
+    if (i[e] !== void 0) return i[e];
+    const t = e.split(":");
+    if (t.length === 2) {
+      const r = parseFloat(t[0]), a = parseFloat(t[1]);
+      if (Number.isFinite(r) && Number.isFinite(a) && a > 0)
+        return r / a;
+    }
+    return null;
   }
   /**
    * Apply aspect ratio constraint to crop rect
@@ -555,13 +628,64 @@ class re extends N {
     if (!e) return;
     const i = this.renderer.sprite, t = this.renderer.app;
     if (!i || !t) return;
-    const r = this.state.get("crop.shape"), l = r === "circle" ? { x: 0, y: 0, w: t.screen.width, h: t.screen.height } : { x: i.x, y: i.y, w: i.width, h: i.height };
-    if (e.x = Math.max(l.x, Math.min(e.x, l.x + l.w - e.width)), e.y = Math.max(l.y, Math.min(e.y, l.y + l.h - e.height)), e.width = Math.min(e.width, l.w), e.height = Math.min(e.height, l.h), r !== "free" || this.state.get("crop.aspect") === "1:1") {
-      const o = Math.min(e.width, e.height);
-      e.width = o, e.height = o;
+    const r = this.state.get("crop.shape"), o = r === "circle" || !!this.state.get("autoZoomOnCropOverflow") ? { x: 0, y: 0, w: t.screen.width, h: t.screen.height } : { x: i.x, y: i.y, w: i.width, h: i.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 l = Math.min(e.width, e.height);
+      e.width = l, e.height = l;
     }
     this.state.set("crop.rect", e);
   }
+  /**
+   * Calculate the target zoom level for auto-zoom when crop exceeds image bounds.
+   * Pure function — returns the new zoom level, or null if no adjustment is needed.
+   *
+   * @param {{ width: number, height: number }} cropRect - Current crop dimensions
+   * @param {number} spriteWidth - Current sprite width on screen
+   * @param {number} spriteHeight - Current sprite height on screen
+   * @param {number} texWidth - Original texture width (pixels)
+   * @param {number} texHeight - Original texture height (pixels)
+   * @param {number} fitScale - Current fit-to-screen scale
+   * @param {number} currentZoom - Current zoom level
+   * @returns {number|null} Target zoom level, or null if no zoom needed
+   */
+  static calcAutoZoom(e, i, t, r, a, o, l) {
+    if (!e || !r || !a || !o) return null;
+    const n = e.width > i, c = e.height > t;
+    if (!n && !c) return null;
+    const d = F.AUTO_ZOOM_PADDING;
+    let h = l;
+    if (n) {
+      const p = e.width / (d * r * o);
+      h = Math.min(h, p);
+    }
+    if (c) {
+      const p = e.height / (d * a * o);
+      h = Math.min(h, p);
+    }
+    return h = Math.max(0.1, h), h >= l - 0.01 ? null : h;
+  }
+  /**
+   * Check if auto-zoom is needed and apply it (throttled).
+   * Called during crop resize drags when autoZoomOnCropOverflow is enabled.
+   */
+  _checkAutoZoom() {
+    if (!this.state.get("autoZoomOnCropOverflow")) return;
+    const e = Date.now();
+    if (e - this._lastAutoZoomCheck < F.AUTO_ZOOM_THROTTLE_MS) return;
+    this._lastAutoZoomCheck = e;
+    const i = this.state.get("crop.rect"), t = this.renderer.sprite, r = this.renderer.originalTexture;
+    if (!i || !t || !r) return;
+    const a = F.calcAutoZoom(
+      i,
+      t.width,
+      t.height,
+      r.width,
+      r.height,
+      this.renderer.fitScale,
+      this.renderer.zoom
+    );
+    a !== null && this.renderer.setZoom(a, { keepCenter: !0 });
+  }
   /**
    * Draw crop overlay on canvas
    */
@@ -570,43 +694,43 @@ class re extends N {
     if (!e) return;
     const i = this.renderer.app;
     if (!i) return;
-    const t = i.canvas, r = t.clientWidth, a = t.clientHeight, l = window.devicePixelRatio || 1;
-    (e.width !== Math.max(1, Math.floor(r * l)) || e.height !== Math.max(1, Math.floor(a * l))) && (e.width = Math.max(1, Math.floor(r * l)), e.height = Math.max(1, Math.floor(a * l)), e.style.width = r + "px", e.style.height = a + "px");
-    const o = e.getContext("2d");
-    if (!o) return;
-    o.setTransform(l, 0, 0, l, 0, 0), o.clearRect(0, 0, r, a), o.fillStyle = "rgba(0, 0, 0, 0.5)", o.fillRect(0, 0, r, a);
+    const t = i.canvas, r = t.clientWidth, a = t.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 l = e.getContext("2d");
+    if (!l) return;
+    l.setTransform(o, 0, 0, o, 0, 0), l.clearRect(0, 0, r, a), l.fillStyle = "rgba(0, 0, 0, 0.5)", l.fillRect(0, 0, r, a);
     const n = this.state.get("crop.rect");
     if (!n) return;
     const c = this.state.get("crop.shape");
-    if (o.save(), c === "circle") {
-      const y = n.x + n.width / 2, k = n.y + n.height / 2, _ = Math.min(n.width, n.height) / 2;
-      o.beginPath(), o.arc(y, k, _, 0, Math.PI * 2), o.clip();
+    if (l.save(), c === "circle") {
+      const _ = n.x + n.width / 2, x = n.y + n.height / 2, y = Math.min(n.width, n.height) / 2;
+      l.beginPath(), l.arc(_, x, y, 0, Math.PI * 2), l.clip();
     } else
-      o.beginPath(), o.rect(n.x, n.y, n.width, n.height), o.clip();
-    o.clearRect(n.x, n.y, n.width, n.height), o.restore(), o.strokeStyle = "#ffffff", o.lineWidth = 2, o.setLineDash([5, 5]), c === "circle" ? (o.beginPath(), o.arc(
+      l.beginPath(), l.rect(n.x, n.y, n.width, n.height), l.clip();
+    l.clearRect(n.x, n.y, n.width, n.height), l.restore(), l.strokeStyle = "#ffffff", l.lineWidth = 2, l.setLineDash([5, 5]), c === "circle" ? (l.beginPath(), l.arc(
       n.x + n.width / 2,
       n.y + n.height / 2,
       Math.min(n.width, n.height) / 2,
       0,
       Math.PI * 2
-    ), o.stroke()) : o.strokeRect(n.x, n.y, n.width, n.height), o.setLineDash([]), o.strokeStyle = "rgba(255,255,255,0.3)", o.lineWidth = 1;
-    const u = n.width / 3, h = n.height / 3;
-    for (let y = 1; y <= 2; y++)
-      o.beginPath(), o.moveTo(n.x + u * y, n.y), o.lineTo(n.x + u * y, n.y + n.height), o.stroke(), o.beginPath(), o.moveTo(n.x, n.y + h * y), o.lineTo(n.x + n.width, n.y + h * y), o.stroke();
+    ), l.stroke()) : l.strokeRect(n.x, n.y, n.width, n.height), l.setLineDash([]), l.strokeStyle = "rgba(255,255,255,0.3)", l.lineWidth = 1;
+    const d = n.width / 3, h = n.height / 3;
+    for (let _ = 1; _ <= 2; _++)
+      l.beginPath(), l.moveTo(n.x + d * _, n.y), l.lineTo(n.x + d * _, n.y + n.height), l.stroke(), l.beginPath(), l.moveTo(n.x, n.y + h * _), l.lineTo(n.x + n.width, n.y + h * _), l.stroke();
     const p = this.HANDLE_SIZE, m = [
       { x: n.x, y: n.y, m: "resize-nw" },
       { x: n.x + n.width, y: n.y, m: "resize-ne" },
       { x: n.x, y: n.y + n.height, m: "resize-sw" },
       { x: n.x + n.width, y: n.y + n.height, m: "resize-se" }
-    ], x = [
+    ], S = [
       { x: n.x + n.width / 2, y: n.y, m: "n" },
       { x: n.x + n.width / 2, y: n.y + n.height, m: "s" },
       { x: n.x, y: n.y + n.height / 2, m: "w" },
       { x: n.x + n.width, y: n.y + n.height / 2, m: "e" }
-    ], b = [...m, ...x];
-    for (const y of b) {
-      const k = this._hoverMode === y.m, _ = k ? p + 4 : p;
-      o.beginPath(), o.rect(y.x - _ / 2, y.y - _ / 2, _, _), o.fillStyle = k ? "#4da3ff" : "#ffffff", o.strokeStyle = "rgba(0,0,0,0.6)", o.lineWidth = 1, o.fill(), o.stroke();
+    ], b = [...m, ...S];
+    for (const _ of b) {
+      const x = this._hoverMode === _.m, y = x ? p + 4 : p;
+      l.beginPath(), l.rect(_.x - y / 2, _.y - y / 2, y, y), l.fillStyle = x ? "#4da3ff" : "#ffffff", l.strokeStyle = "rgba(0,0,0,0.6)", l.lineWidth = 1, l.fill(), l.stroke();
     }
   }
   /**
@@ -618,7 +742,7 @@ class re extends N {
   _hitHandle(e, i) {
     const t = this.state.get("crop.rect");
     if (!t) return null;
-    const r = (a, l, o, n, c) => Math.abs(a - o) <= c && Math.abs(l - n) <= c;
+    const r = (a, o, l, n, c) => Math.abs(a - l) <= c && Math.abs(o - n) <= c;
     return r(e, i, t.x, t.y, this.HANDLE_SIZE) ? "resize-nw" : r(e, i, t.x + t.width, t.y, this.HANDLE_SIZE) ? "resize-ne" : r(e, i, t.x, t.y + t.height, this.HANDLE_SIZE) ? "resize-sw" : r(e, i, t.x + t.width, t.y + t.height, this.HANDLE_SIZE) ? "resize-se" : Math.abs(i - t.y) <= this.EDGE_HIT_PAD && e >= t.x && e <= t.x + t.width ? "n" : Math.abs(i - (t.y + t.height)) <= this.EDGE_HIT_PAD && e >= t.x && e <= t.x + t.width ? "s" : Math.abs(e - t.x) <= this.EDGE_HIT_PAD && i >= t.y && i <= t.y + t.height ? "w" : Math.abs(e - (t.x + t.width)) <= this.EDGE_HIT_PAD && i >= t.y && i <= t.y + t.height ? "e" : e >= t.x && e <= t.x + t.width && i >= t.y && i <= t.y + t.height ? "move" : null;
   }
   /**
@@ -628,32 +752,32 @@ class re extends N {
     const i = this.state.get("crop.rect");
     if (!i) return;
     const t = e.global;
-    this._dragMode = this._hitHandle(t.x, t.y), this._dragMode && (this._isDragging = !0, this._dragStart = { x: t.x, y: t.y }, this._startRect = { ...i });
+    this._dragMode = this._hitHandle(t.x, t.y), this._dragMode && (this._isDragging = !0, this._dragStart = { x: t.x, y: t.y }, this._startRect = { ...i }, this._lastAutoZoomCheck = 0);
   }
   /**
    * Handle pointer move event
    */
   _handlePointerMove(e) {
-    var n, c, u, h;
+    var n, c, d, h;
     const i = this.renderer.app;
     if (!i) return;
     const t = e.global;
     if (!this._isDragging || !this._dragStart || !this._startRect) {
-      this._hoverMode = this._hitHandle(t.x, t.y), i.stage.cursor = this._hoverMode === "move" ? "move" : this._hoverMode === "n" || this._hoverMode === "s" ? "ns-resize" : this._hoverMode === "e" || this._hoverMode === "w" ? "ew-resize" : (n = this._hoverMode) != null && n.endsWith("nw") || (c = this._hoverMode) != null && c.endsWith("se") ? "nwse-resize" : (u = this._hoverMode) != null && u.endsWith("ne") || (h = this._hoverMode) != null && h.endsWith("sw") ? "nesw-resize" : "crosshair", this.drawOverlay();
+      this._hoverMode = this._hitHandle(t.x, t.y), i.stage.cursor = this._hoverMode === "move" ? "move" : this._hoverMode === "n" || this._hoverMode === "s" ? "ns-resize" : this._hoverMode === "e" || this._hoverMode === "w" ? "ew-resize" : (n = this._hoverMode) != null && n.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 r = this.state.get("crop.rect");
     if (!r) return;
-    const a = t.x - this._dragStart.x, l = t.y - this._dragStart.y;
+    const a = t.x - this._dragStart.x, o = t.y - this._dragStart.y;
     switch (this._dragMode) {
       case "move":
-        r.x = this._startRect.x + a, r.y = this._startRect.y + l;
+        r.x = this._startRect.x + a, r.y = this._startRect.y + o;
         break;
       case "n":
-        r.y = this._startRect.y + l, r.height = this._startRect.height - l;
+        r.y = this._startRect.y + o, r.height = this._startRect.height - o;
         break;
       case "s":
-        r.height = this._startRect.height + l;
+        r.height = this._startRect.height + o;
         break;
       case "w":
         r.x = this._startRect.x + a, r.width = this._startRect.width - a;
@@ -662,19 +786,19 @@ class re extends N {
         r.width = this._startRect.width + a;
         break;
       case "resize-nw":
-        r.x = this._startRect.x + a, r.y = this._startRect.y + l, r.width = this._startRect.width - a, r.height = this._startRect.height - l;
+        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":
-        r.y = this._startRect.y + l, r.width = this._startRect.width + a, r.height = this._startRect.height - l;
+        r.y = this._startRect.y + o, r.width = this._startRect.width + a, r.height = this._startRect.height - o;
         break;
       case "resize-sw":
-        r.x = this._startRect.x + a, r.width = this._startRect.width - a, r.height = this._startRect.height + l;
+        r.x = this._startRect.x + a, r.width = this._startRect.width - a, r.height = this._startRect.height + o;
         break;
       case "resize-se":
-        r.width = this._startRect.width + a, r.height = this._startRect.height + l;
+        r.width = this._startRect.width + a, r.height = this._startRect.height + o;
         break;
     }
-    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.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
@@ -690,8 +814,8 @@ class re extends N {
     if (!e || !i) return;
     let t = this.state.get("crop.rect");
     if (!t) {
-      const a = Math.min(e.screen.width, e.screen.height) * 0.7, l = i.x + (i.width - a) / 2, o = i.y + (i.height - a) / 2;
-      t = { x: l, y: o, width: a, height: a }, this.state.set("crop.rect", t), this.state.get("crop.shape") === "circle" && this.state.set("crop.aspect", "1:1"), this.state.get("crop.aspect") !== "free" && (this.applyAspectRatio(), this.constrainCropRect());
+      const a = Math.min(e.screen.width, e.screen.height) * 0.7, o = i.x + (i.width - a) / 2, l = i.y + (i.height - a) / 2;
+      t = { x: o, y: l, width: a, height: a }, this.state.set("crop.rect", t), this.state.get("crop.shape") === "circle" && this.state.set("crop.aspect", "1:1"), this.state.get("crop.aspect") !== "free" && (this.applyAspectRatio(), this.constrainCropRect());
     }
     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");
@@ -716,25 +840,25 @@ class re extends N {
   apply() {
     const e = this.renderer.app, i = this.renderer.sprite, t = this.renderer.originalTexture, r = this.state.get("crop.rect");
     if (!r || !i || !e || !t) return null;
-    const a = window.PIXI, l = this.renderer.zoom, o = t.width / i.width, n = t.height / i.height, c = (r.x - i.x) * o, u = (r.y - i.y) * n;
-    let h = Math.round(Math.max(1, r.width * o)), p = Math.round(Math.max(1, r.height * n)), m = Math.round(c), x = Math.round(u);
+    const a = window.PIXI, o = this.renderer.zoom, l = t.width / i.width, n = t.height / i.height, c = (r.x - i.x) * l, d = (r.y - i.y) * n;
+    let h = Math.round(Math.max(1, r.width * l)), p = Math.round(Math.max(1, r.height * n)), m = Math.round(c), S = Math.round(d);
     if (h <= 0 || p <= 0) return null;
-    const b = new a.Container(), y = new a.Sprite(t);
+    const b = new a.Container(), _ = new a.Sprite(t);
     if (this.state.get("crop.shape") === "circle") {
-      const X = Math.round(Math.max(h, p)), W = m + h / 2, Z = x + p / 2;
-      m = Math.round(W - X / 2), x = Math.round(Z - X / 2), h = p = X;
-      const F = new a.Graphics();
-      F.beginFill(16777215, 1), F.drawCircle(h / 2, p / 2, h / 2), F.endFill(), y.mask = F, b.addChild(F);
+      const z = Math.round(Math.max(h, p)), ee = m + h / 2, te = S + p / 2;
+      m = Math.round(ee - z / 2), S = Math.round(te - z / 2), h = p = z;
+      const v = new a.Graphics();
+      typeof v.circle == "function" && typeof v.fill == "function" ? v.circle(h / 2, p / 2, h / 2).fill(16777215) : (v.beginFill(16777215, 1), v.drawCircle(h / 2, p / 2, h / 2), v.endFill()), _.mask = v, b.addChild(v);
     }
-    y.x = -m, y.y = -x, b.addChild(y);
-    const _ = a.RenderTexture.create({ width: h, height: p });
+    _.x = -m, _.y = -S, b.addChild(_);
+    const y = a.RenderTexture.create({ width: h, height: p });
     e.renderer.render({
       container: b,
-      target: _,
+      target: y,
       clear: !0
-    }), b.destroy({ children: !0 }), this.renderer.originalTexture = _, e.stage.removeChild(i), i.destroy();
-    const S = new a.Sprite(_);
-    return e.stage.addChild(S), this.renderer.sprite = S, this.renderer.fitScale = this.renderer.getFitScaleFor(_), this.renderer.setZoom(l, { keepCenter: !1 }), this.renderer.applyViewTransform(), this.renderer.render(), this.disable(), this.emit("applied", { width: h, height: p }), { texture: _, preservedZoom: l };
+    }), b.destroy({ children: !0 }), this.renderer.originalTexture = y, e.stage.removeChild(i), i.destroy();
+    const P = new a.Sprite(y);
+    return e.stage.addChild(P), this.renderer.sprite = P, 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
@@ -747,17 +871,26 @@ class re extends N {
    * @param {'free'|'square'|'circle'} shape
    */
   setShape(e) {
-    this.state.set("crop.shape", e), (e === "circle" || e === "square") && this.state.set("crop.aspect", "1:1"), this.applyAspectRatio(), this.constrainCropRect(), this.drawOverlay();
+    this.state.get("lockCropShape") || (this.state.set("crop.shape", e), (e === "circle" || e === "square") && this.state.set("crop.aspect", "1:1"), this.applyAspectRatio(), this.constrainCropRect(), this.drawOverlay());
   }
   /**
    * Set aspect ratio
-   * @param {'free'|'1:1'|'4:3'|'16:9'|'3:2'|'2:3'} aspect
+   * @param {'free'|'1:1'|'4:3'|'16:9'|'3:2'|'2:3'|string} aspect
    */
   setAspect(e) {
-    this.state.set("crop.aspect", e), this.applyAspectRatio(), this.constrainCropRect(), this.drawOverlay();
+    this.state.get("lockAspectRatio") || (this.state.set("crop.aspect", e), this.applyAspectRatio(), this.constrainCropRect(), this.drawOverlay());
   }
-}
-class se {
+};
+/**
+ * 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.
+ */
+B(F, "AUTO_ZOOM_PADDING", 1.1), /**
+ * Minimum interval (ms) between auto-zoom adjustments during drag.
+ */
+B(F, "AUTO_ZOOM_THROTTLE_MS", 100);
+let U = F;
+class he {
   /**
    * Create a new RemoveBgManager
    * @param {Object} options
@@ -782,7 +915,7 @@ class se {
   async removeBackground(e, i = {}) {
     const t = typeof e == "string" ? await this._dataUrlToBlob(e) : e, r = new FormData();
     r.append("file", t, "image.png"), r.append("tier", i.tier || "balanced"), i.model && r.append("model", i.model), i.alpha_matting && (r.append("alpha_matting", "true"), r.append("alpha_f", String(i.alpha_f ?? 10)), r.append("alpha_fr", String(i.alpha_fr ?? 15)), r.append("alpha_erode_size", String(i.alpha_erode_size ?? 10)));
-    let a, l;
+    let a, o;
     try {
       a = await fetch(this._endpoint, {
         method: "POST",
@@ -791,7 +924,7 @@ class se {
         // For Sanctum auth
       });
     } catch (c) {
-      l = c;
+      o = c;
     }
     if ((!a || !a.ok) && this._fallbackEndpoint)
       try {
@@ -800,22 +933,22 @@ class se {
           body: r
         });
       } catch (c) {
-        l || (l = c);
+        o || (o = c);
       }
     if (!a)
-      throw l || new Error("Network error: Unable to connect to background removal service");
+      throw o || new Error("Network error: Unable to connect to background removal service");
     if (!a.ok) {
       let c = `Background removal failed (HTTP ${a.status})`;
       try {
-        const u = await a.text();
-        u && (c += `: ${u}`);
+        const d = await a.text();
+        d && (c += `: ${d}`);
       } catch {
       }
       throw new Error(c);
     }
-    const o = await a.blob();
+    const l = await a.blob();
     return {
-      dataUrl: await this._blobToDataUrl(o),
+      dataUrl: await this._blobToDataUrl(l),
       model: a.headers.get("X-Model-Used") || "unknown",
       processMs: a.headers.get("X-Process-Ms") || "0"
     };
@@ -827,10 +960,10 @@ class se {
    */
   async _dataUrlToBlob(e) {
     if (e.startsWith("data:")) {
-      const [t, r] = e.split(","), a = t.match(/:(.*?);/), l = a ? a[1] : "image/png", o = atob(r), n = new Uint8Array(o.length);
-      for (let c = 0; c < o.length; c++)
-        n[c] = o.charCodeAt(c);
-      return new Blob([n], { type: l });
+      const [t, r] = e.split(","), a = t.match(/:(.*?);/), o = a ? a[1] : "image/png", l = atob(r), n = new Uint8Array(l.length);
+      for (let c = 0; c < l.length; c++)
+        n[c] = l.charCodeAt(c);
+      return new Blob([n], { type: o });
     }
     return (await fetch(e)).blob();
   }
@@ -867,7 +1000,7 @@ class se {
     }
   }
 }
-function d(s, e = {}, ...i) {
+function u(s, e = {}, ...i) {
   const t = document.createElement(s);
   for (const [r, a] of Object.entries(e))
     if (a != null)
@@ -876,24 +1009,24 @@ function d(s, e = {}, ...i) {
       else if (r === "style" && typeof a == "object")
         Object.assign(t.style, a);
       else if (r.startsWith("on") && typeof a == "function") {
-        const l = r.slice(2).toLowerCase();
-        t.addEventListener(l, a);
+        const o = r.slice(2).toLowerCase();
+        t.addEventListener(o, a);
       } else r === "dataset" && typeof a == "object" ? Object.assign(t.dataset, a) : t.setAttribute(r, a);
   for (const r of i)
     typeof r == "string" ? t.appendChild(document.createTextNode(r)) : r instanceof HTMLElement && t.appendChild(r);
   return t;
 }
-function ae({ id: s, label: e, min: i = 0, max: t = 1, step: r = 0.01, value: a = 0.5, onChange: l }) {
-  const o = s.includes("-") ? s.split("-").slice(1).join("-") : s, n = d("div", {
+function de({ id: s, label: e, min: i = 0, max: t = 1, step: r = 0.01, value: a = 0.5, onChange: o }) {
+  const l = s.includes("-") ? s.split("-").slice(1).join("-") : s, n = u("div", {
     className: "slider-control slider-wrapper",
-    "data-control": o,
-    "data-testid": `slider-${o}`
-  }), c = d(
+    "data-control": l,
+    "data-testid": `slider-${l}`
+  }), c = u(
     "div",
     { className: "slider-header" },
-    d("label", { for: s, className: "slider-label" }, e),
-    d("span", { className: "slider-value", id: `${s}-value` }, Y(a))
-  ), u = d("input", {
+    u("label", { for: s, className: "slider-label" }, e),
+    u("span", { className: "slider-value", id: `${s}-value` }, O(a))
+  ), d = u("input", {
     type: "range",
     id: s,
     className: "slider-input",
@@ -903,100 +1036,109 @@ function ae({ id: s, label: e, min: i = 0, max: t = 1, step: r = 0.01, value: a
     value: String(a),
     onInput: (h) => {
       const p = parseFloat(h.target.value), m = n.querySelector(".slider-value");
-      m && (m.textContent = Y(p)), l == null || l(p);
+      m && (m.textContent = O(p)), o == null || o(p);
     }
   });
-  return n.appendChild(c), n.appendChild(u), n.setValue = (h) => {
-    u.value = String(h);
+  return n.appendChild(c), n.appendChild(d), n.setValue = (h) => {
+    d.value = String(h);
     const p = n.querySelector(".slider-value");
-    p && (p.textContent = Y(h));
+    p && (p.textContent = O(h));
   }, n;
 }
-function Y(s) {
+function O(s) {
   return Number.isInteger(s) ? String(s) : s.toFixed(2);
 }
-function le({ id: s, label: e, checked: i = !1, onChange: t }) {
-  const r = d("div", { className: "toggle-control" }), a = d("label", { className: "toggle-label", for: s }, e), l = d("input", {
+function ue({ id: s, label: e, checked: i = !1, onChange: t }) {
+  const r = u("div", { className: "toggle-control" }), a = u("label", { className: "toggle-label", for: s }, e), o = u("input", {
     type: "checkbox",
     id: s,
     className: "toggle-input",
     checked: i ? "checked" : void 0,
     onChange: (c) => t == null ? void 0 : t(c.target.checked)
-  }), o = d("div", {
+  }), l = u("div", {
     className: "toggle-switch",
     onClick: (c) => {
-      c.target !== l && (l.checked = !l.checked, t == null || t(l.checked));
+      c.target !== o && (o.checked = !o.checked, t == null || t(o.checked));
     }
-  }), n = d("span", { className: "toggle-slider" });
-  return o.appendChild(l), o.appendChild(n), r.appendChild(a), r.appendChild(o), r.setChecked = (c) => {
-    l.checked = c;
+  }), n = u("span", { className: "toggle-slider" });
+  return l.appendChild(o), l.appendChild(n), r.appendChild(a), r.appendChild(l), r.setChecked = (c) => {
+    o.checked = c;
   }, r;
 }
-function oe({ id: s, label: e, value: i = "#000000", onChange: t }) {
-  const r = d("div", { className: "color-control" }), a = d("label", { className: "color-label", for: s }, e), l = d("input", {
+function pe({ id: s, label: e, value: i = "#000000", onChange: t }) {
+  const r = u("div", { className: "color-control" }), a = u("label", { className: "color-label", for: s }, e), o = u("input", {
     type: "color",
     id: s,
     className: "color-input",
     value: i,
-    onInput: (o) => t == null ? void 0 : t(o.target.value)
+    onInput: (l) => t == null ? void 0 : t(l.target.value)
   });
-  return r.appendChild(a), r.appendChild(l), r.setValue = (o) => {
-    l.value = o;
+  return r.appendChild(a), r.appendChild(o), r.setValue = (l) => {
+    o.value = l;
   }, r;
 }
-function ne({ id: s, label: e, options: i = [], value: t, onChange: r }) {
-  const a = d("div", { className: "select-control" }), l = d("label", { className: "select-label", for: s }, e), o = d("select", {
+function fe({ id: s, label: e, options: i = [], value: t, onChange: r }) {
+  const a = u("div", { className: "select-control" }), o = u("label", { className: "select-label", for: s }, e), l = u("select", {
     id: s,
     className: "select-input",
     onChange: (n) => r == null ? void 0 : r(n.target.value)
   });
   for (const n of i) {
-    const c = d("option", { value: n.value }, n.label);
-    n.value === t && (c.selected = !0), o.appendChild(c);
+    const c = u("option", { value: n.value }, n.label);
+    n.value === t && (c.selected = !0), l.appendChild(c);
   }
-  return a.appendChild(l), a.appendChild(o), a.setValue = (n) => {
-    o.value = n;
+  return a.appendChild(o), a.appendChild(l), a.setValue = (n) => {
+    l.value = n;
   }, a;
 }
-function A({ label: s, className: e = "", onClick: i, icon: t = null, disabled: r = !1 }) {
-  const a = d("button", {
+function T({ label: s, className: e = "", onClick: i, icon: t = null, disabled: r = !1 }) {
+  const a = u("button", {
+    type: "button",
     className: `btn ${e}`.trim(),
     onClick: i,
     disabled: r ? "disabled" : void 0
   });
   if (t) {
-    const l = d("span", { className: "btn-icon" });
-    l.innerHTML = t, a.appendChild(l);
+    const o = u("span", { className: "btn-icon" });
+    o.innerHTML = t;
+    const l = o.querySelector("svg");
+    l && l.setAttribute("aria-hidden", "true"), a.appendChild(o);
   }
   return s && a.appendChild(document.createTextNode(s)), a;
 }
-function w({ icon: s, title: e, className: i = "", onClick: t, disabled: r = !1, testId: a = null, ariaLabel: l = null }) {
-  const o = {
+function w({ icon: s, title: e, className: i = "", onClick: t, disabled: r = !1, testId: a = null, ariaLabel: o = null }) {
+  const l = {
+    type: "button",
     className: `icon-btn ${i}`.trim(),
     title: e,
-    "aria-label": l || e,
+    "aria-label": o || e,
     onClick: t,
     disabled: r ? "disabled" : void 0
   };
-  a && (o.dataset = { testid: a });
-  const n = d("button", o);
-  return n.innerHTML = s, n;
+  a && (l.dataset = { testid: a });
+  const n = u("button", l);
+  n.innerHTML = s;
+  const c = n.querySelector("svg");
+  return c && c.setAttribute("aria-hidden", "true"), n;
 }
-function B({ label: s, icon: e, active: i = !1, onClick: t }) {
-  const r = d("button", {
+function D({ label: s, icon: e, active: i = !1, onClick: t }) {
+  const r = u("button", {
+    type: "button",
     className: `chip ${i ? "active" : ""}`.trim(),
     onClick: t
   });
   if (e) {
-    const a = d("span", { className: "chip-icon" });
-    a.innerHTML = e, r.appendChild(a);
+    const a = u("span", { className: "chip-icon" });
+    a.innerHTML = e;
+    const o = a.querySelector("svg");
+    o && o.setAttribute("aria-hidden", "true"), r.appendChild(a);
   }
-  return r.appendChild(d("span", { className: "chip-label" }, s)), r.setActive = (a) => {
+  return r.appendChild(u("span", { className: "chip-label" }, s)), r.setActive = (a) => {
     r.classList.toggle("active", a);
   }, r;
 }
-const q = '<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>', H = '<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>', ce = '<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>', 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="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>', 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="M432 320v112H320M80 192V80h112M320 80h112v112M192 432H80V320"/></svg>', ue = '<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>', 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="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>', 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="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>', ge = '<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>', 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="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>', ye = '<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>', _e = '<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>', $ = '<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>', 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="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>', 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="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>', Ce = '<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>', L = '<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>', we = '<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>', Se = '<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>', 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="M80 96h64l64 320h64l64-160h96"/></svg>', O = '<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>', V = '<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>', 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="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 Pe {
+const G = '<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>', K = '<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>', 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="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>', ge = '<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>', 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="M432 320v112H320M80 192V80h112M320 80h112v112M192 432H80V320"/></svg>', ye = '<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>', _e = '<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>', xe = '<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>', Ce = '<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>', we = '<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>', 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="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>', 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="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>', 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="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>', Q = '<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>', J = '<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>', 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="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>', 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="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>', j = '<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>', Fe = '<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>', ze = '<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>', 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="M80 96h64l64 320h64l64-160h96"/></svg>', q = '<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>', H = '<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>', 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="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 Re {
   constructor(e, i) {
     this.state = e, this.editor = i, this.element = null, this._unsubscribers = [];
   }
@@ -1005,9 +1147,9 @@ class Pe {
    * @returns {HTMLElement}
    */
   render() {
-    this.element = d("div", { className: "editor-toolbar" });
-    const e = d("div", { className: "toolbar-section toolbar-left" }), i = w({
-      icon: Ce,
+    this.element = u("div", { className: "editor-toolbar" });
+    const e = u("div", { className: "toolbar-section toolbar-left" }), i = w({
+      icon: Me,
       title: "Open Image",
       className: "toolbar-btn",
       testId: "btn-open-image",
@@ -1015,8 +1157,8 @@ class Pe {
       onClick: () => this.editor.openFilePicker()
     });
     e.appendChild(i);
-    const t = d("div", { className: "toolbar-section toolbar-center" }), r = w({
-      icon: he,
+    const t = u("div", { className: "toolbar-section toolbar-center" }), r = w({
+      icon: ge,
       title: "Zoom Out",
       className: "toolbar-btn",
       testId: "btn-zoom-out",
@@ -1026,9 +1168,14 @@ class Pe {
         this.editor.setZoom(h - 0.25);
       }
     });
-    this._zoomLabel = d("span", { className: "zoom-label" }, "100%");
+    this._zoomLabel = u("span", {
+      className: "zoom-label",
+      "aria-live": "polite",
+      "aria-atomic": "true",
+      role: "status"
+    }, "100%");
     const a = w({
-      icon: ce,
+      icon: me,
       title: "Zoom In",
       className: "toolbar-btn",
       testId: "btn-zoom-in",
@@ -1037,18 +1184,18 @@ class Pe {
         const h = this.state.get("zoom");
         this.editor.setZoom(h + 0.25);
       }
-    }), l = w({
-      icon: de,
+    }), o = w({
+      icon: be,
       title: "Fit to Screen",
       className: "toolbar-btn",
       testId: "btn-fit-screen",
       ariaLabel: "Fit to screen",
       onClick: () => this.editor.fitToScreen()
     });
-    t.appendChild(r), t.appendChild(this._zoomLabel), t.appendChild(a), t.appendChild(l);
-    const o = d("div", { className: "toolbar-section toolbar-right" });
+    t.appendChild(r), t.appendChild(this._zoomLabel), t.appendChild(a), t.appendChild(o);
+    const l = u("div", { className: "toolbar-section toolbar-right" });
     this._themeBtn = w({
-      icon: this.state.get("isDarkMode") ? O : V,
+      icon: this.state.get("isDarkMode") ? q : H,
       title: "Toggle Theme",
       className: "toolbar-btn",
       testId: "btn-toggle-theme",
@@ -1056,28 +1203,28 @@ class Pe {
       onClick: () => this.editor.toggleTheme()
     });
     const n = w({
-      icon: G,
+      icon: J,
       title: "Reset All",
       className: "toolbar-btn",
       testId: "btn-reset-all",
       ariaLabel: "Reset all changes",
       onClick: () => this.editor.resetAll()
     }), c = w({
-      icon: _e,
+      icon: ve,
       title: "Save Image",
       className: "toolbar-btn toolbar-btn-primary",
-      testId: "btn-save-image",
+      testId: "btn-save-edit",
       ariaLabel: "Save image",
       onClick: () => this.editor.save()
-    }), u = w({
-      icon: $,
+    }), d = w({
+      icon: Q,
       title: "Close",
       className: "toolbar-btn",
-      testId: "btn-close",
+      testId: "btn-cancel-edit",
       ariaLabel: "Close editor",
       onClick: () => this.editor.close()
     });
-    return o.appendChild(this._themeBtn), o.appendChild(n), o.appendChild(c), o.appendChild(u), this.element.appendChild(e), this.element.appendChild(t), this.element.appendChild(o), this._subscribeToState(), this.element;
+    return l.appendChild(this._themeBtn), l.appendChild(n), l.appendChild(c), l.appendChild(d), this.element.appendChild(e), this.element.appendChild(t), this.element.appendChild(l), this._subscribeToState(), this.element;
   }
   /**
    * Subscribe to state changes
@@ -1088,7 +1235,7 @@ class Pe {
     });
     this._unsubscribers.push(e);
     const i = this.state.on("change:isDarkMode", ({ value: t }) => {
-      this._themeBtn.innerHTML = t ? O : V;
+      this._themeBtn.innerHTML = t ? q : H;
     });
     this._unsubscribers.push(i);
   }
@@ -1107,24 +1254,24 @@ class Pe {
     this._unsubscribers.forEach((i) => i()), this._unsubscribers = [], (e = this.element) == null || e.remove(), this.element = null;
   }
 }
-const R = [
-  { id: "adjust", name: "Adjust", icon: ue },
+const X = [
+  { id: "adjust", name: "Adjust", icon: ye },
   // adjustment, adjustmentAdvanced, alpha
-  { id: "blur", name: "Blur", icon: pe },
+  { id: "blur", name: "Blur", icon: _e },
   // blur, kawaseBlur, motionBlur, radialBlur, etc.
-  { id: "color", name: "Color", icon: fe },
+  { id: "color", name: "Color", icon: xe },
   // colorOverlay, grayscale, hslAdjustment, etc.
-  { id: "effects", name: "Effects", icon: me },
+  { id: "effects", name: "Effects", icon: Ce },
   // noise, vignette, pixelate, dropShadow, etc.
-  { id: "distortion", name: "Distortion", icon: ge },
+  { id: "distortion", name: "Distortion", icon: we },
   // twist, bulgePinch, displacement, etc.
-  { id: "light", name: "Light", icon: be },
+  { id: "light", name: "Light", icon: Se },
   // bloom, glow, godray, advancedBloom
-  { id: "stylize", name: "Stylize", icon: ve },
+  { id: "stylize", name: "Stylize", icon: Ne },
   // ascii, crt, crossHatch, dot, emboss
-  { id: "crop", name: "Crop", icon: ye }
+  { id: "crop", name: "Crop", icon: ke }
 ];
-class Me {
+class Te {
   constructor(e, i) {
     this.state = e, this.editor = i, this.element = null, this._chips = /* @__PURE__ */ new Map(), this._scrollIndex = 0, this._unsubscribers = [];
   }
@@ -1134,16 +1281,16 @@ class Me {
    * @returns {HTMLElement}
    */
   render(e) {
-    this._onSelect = e, this.element = d("div", {
+    this._onSelect = e, this.element = u("div", {
       className: "category-carousel-container",
       "data-testid": "category-carousel"
     }), this._leftBtn = w({
-      icon: q,
+      icon: G,
       title: "Previous categories",
       className: "carousel-nav carousel-nav-left",
       onClick: () => this._scrollLeft()
-    }), this._carousel = d("div", { className: "category-carousel" }), R.forEach((t) => {
-      const r = B({
+    }), this._carousel = u("div", { className: "category-carousel" }), X.forEach((t) => {
+      const r = D({
         label: t.name,
         icon: t.icon,
         active: this.state.get("selectedCategory") === t.id,
@@ -1151,15 +1298,23 @@ class Me {
       });
       r.dataset.categoryId = t.id, r.dataset.category = t.id, r.dataset.testid = `category-${t.id}`, this._chips.set(t.id, r), this._carousel.appendChild(r);
     }), this._rightBtn = w({
-      icon: H,
+      icon: K,
       title: "Next categories",
       className: "carousel-nav carousel-nav-right",
       onClick: () => this._scrollRight()
-    }), this._pagination = d("div", { className: "carousel-pagination" });
-    const i = Math.ceil(R.length / 3);
+    }), this._pagination = u("div", {
+      className: "carousel-pagination",
+      role: "tablist",
+      "aria-label": "Category pages"
+    });
+    const i = Math.ceil(X.length / 3);
     for (let t = 0; t < i; t++) {
-      const r = d("span", {
+      const r = u("button", {
+        type: "button",
         className: `pagination-dot ${t === 0 ? "active" : ""}`,
+        role: "tab",
+        "aria-label": `Page ${t + 1} of ${i}`,
+        "aria-selected": t === 0 ? "true" : "false",
         onClick: () => this._scrollToPage(t)
       });
       this._pagination.appendChild(r);
@@ -1195,7 +1350,7 @@ class Me {
    * Scroll carousel right
    */
   _scrollRight() {
-    this._scrollIndex < R.length - 3 && (this._scrollIndex++, this._scrollCarousel());
+    this._scrollIndex < X.length - 3 && (this._scrollIndex++, this._scrollCarousel());
   }
   /**
    * Scroll to a specific page
@@ -1222,7 +1377,7 @@ class Me {
    * Update navigation button states
    */
   _updateNavButtons() {
-    this._leftBtn && (this._leftBtn.disabled = this._scrollIndex === 0), this._rightBtn && (this._rightBtn.disabled = this._scrollIndex >= R.length - 3);
+    this._leftBtn && (this._leftBtn.disabled = this._scrollIndex === 0), this._rightBtn && (this._rightBtn.disabled = this._scrollIndex >= X.length - 3);
   }
   /**
    * Update pagination dot states
@@ -1231,7 +1386,8 @@ class Me {
     if (this._pagination) {
       const e = this._pagination.querySelectorAll(".pagination-dot"), i = Math.floor(this._scrollIndex / 3);
       e.forEach((t, r) => {
-        t.classList.toggle("active", r === i);
+        const a = r === i;
+        t.classList.toggle("active", a), t.setAttribute("aria-selected", a ? "true" : "false");
       });
     }
   }
@@ -1250,7 +1406,7 @@ class Me {
     this._unsubscribers.forEach((i) => i()), this._unsubscribers = [], this._chips.clear(), (e = this.element) == null || e.remove(), this.element = null;
   }
 }
-class Fe {
+class Ie {
   constructor(e, i) {
     this.state = e, this.filterManager = i, this.element = null, this._filterCards = /* @__PURE__ */ new Map(), this._scrollIndex = 0, this._unsubscribers = [], this._onToggle = null, this._onSelect = null;
   }
@@ -1260,13 +1416,13 @@ class Fe {
    * @returns {HTMLElement}
    */
   render({ onToggle: e, onSelect: i }) {
-    return this._onToggle = e, this._onSelect = i, this.element = d("div", { className: "filter-carousel-container" }), this._leftBtn = w({
-      icon: q,
+    return this._onToggle = e, this._onSelect = i, this.element = u("div", { className: "filter-carousel-container" }), this._leftBtn = w({
+      icon: G,
       title: "Previous filters",
       className: "carousel-nav carousel-nav-left",
       onClick: () => this._scrollLeft()
-    }), this._carousel = d("div", { className: "filter-carousel" }), this._rightBtn = w({
-      icon: H,
+    }), this._carousel = u("div", { className: "filter-carousel" }), this._rightBtn = w({
+      icon: K,
       title: "Next filters",
       className: "carousel-nav carousel-nav-right",
       onClick: () => this._scrollRight()
@@ -1298,11 +1454,11 @@ class Fe {
     if (e === "crop") return;
     const i = this.filterManager.getFiltersByCategory(e), t = this.state.get("activeFilters"), r = this.state.get("selectedFilter");
     i.forEach((a) => {
-      const l = this._createFilterCard(a, {
+      const o = this._createFilterCard(a, {
         isActive: t.has(a.id),
         isSelected: r === a.id
       });
-      this._filterCards.set(a.id, l), this._carousel.appendChild(l);
+      this._filterCards.set(a.id, o), this._carousel.appendChild(o);
     }), this._updateNavButtons();
   }
   /**
@@ -1312,14 +1468,14 @@ class Fe {
    * @returns {HTMLElement}
    */
   _createFilterCard(e, { isActive: i, isSelected: t }) {
-    const r = d("div", {
+    const r = u("div", {
       className: `filter-card ${i ? "active" : ""} ${t ? "selected" : ""}`,
       "data-filter": e.id,
       "data-testid": `filter-${e.id}`,
       onClick: () => this._handleCardClick(e.id)
-    }), a = d("div", { className: "filter-preview" }), l = d("span", { className: "filter-preview-text" }, e.name.charAt(0));
-    a.appendChild(l);
-    const o = d("span", { className: "filter-name", title: e.name }, e.name), n = d("button", {
+    }), a = u("div", { className: "filter-preview" }), o = u("span", { className: "filter-preview-text" }, e.name.charAt(0));
+    a.appendChild(o);
+    const l = u("span", { className: "filter-name", title: e.name }, e.name), n = u("button", {
       className: `filter-toggle ${i ? "active" : ""}`,
       onClick: (c) => {
         var p;
@@ -1328,7 +1484,7 @@ class Fe {
         this._handleToggle(e.id, h), h && (this.state.set("selectedFilter", e.id), (p = this._onSelect) == null || p.call(this, e.id));
       }
     });
-    return n.innerHTML = i ? L : "", r.appendChild(a), r.appendChild(o), r.appendChild(n), r._toggle = n, r._isActive = i, r;
+    return n.innerHTML = i ? j : "", r.appendChild(a), r.appendChild(l), r.appendChild(n), r._toggle = n, r._isActive = i, r;
   }
   /**
    * Handle filter card click (select)
@@ -1354,7 +1510,7 @@ class Fe {
     const e = this.state.get("activeFilters");
     this._filterCards.forEach((i, t) => {
       const r = e.has(t);
-      i.classList.toggle("active", r), i._toggle.classList.toggle("active", r), i._toggle.innerHTML = r ? L : "", i._isActive = r;
+      i.classList.toggle("active", r), i._toggle.classList.toggle("active", r), i._toggle.innerHTML = r ? j : "", i._isActive = r;
     });
   }
   /**
@@ -1407,7 +1563,7 @@ class Fe {
     this._unsubscribers.forEach((i) => i()), this._unsubscribers = [], this._filterCards.clear(), (e = this.element) == null || e.remove(), this.element = null;
   }
 }
-class ze {
+class Xe {
   constructor(e, i) {
     this.state = e, this.filterManager = i, this.element = null, this._controls = /* @__PURE__ */ new Map(), this._onChange = null, this._onReset = null, this._onAction = null, this._unsubscribers = [];
   }
@@ -1417,7 +1573,7 @@ class ze {
    * @returns {HTMLElement}
    */
   render({ onChange: e, onReset: i, onAction: t }) {
-    return this._onChange = e, this._onReset = i, this._onAction = t, this.element = d("div", { className: "filter-adjustments" }), this._subscribeToState(), this._renderControls(), this.element;
+    return this._onChange = e, this._onReset = i, this._onAction = t, this.element = u("div", { className: "filter-adjustments" }), this._subscribeToState(), this._renderControls(), this.element;
   }
   /**
    * Subscribe to state changes
@@ -1440,27 +1596,27 @@ class ze {
     const e = this.state.get("selectedFilter");
     if (!e) {
       this.element.appendChild(
-        d("div", { className: "no-filter-selected" }, "Select a filter to adjust")
+        u("div", { className: "no-filter-selected" }, "Select a filter to adjust")
       );
       return;
     }
     const i = this.filterManager.getFilterDef(e);
     if (!i) {
       this.element.appendChild(
-        d("div", { className: "no-filter-selected" }, "Filter not found")
+        u("div", { className: "no-filter-selected" }, "Filter not found")
       );
       return;
     }
-    const t = d("div", { className: "adjustments-header" });
-    t.appendChild(d("span", { className: "adjustments-title" }, i.name)), t.appendChild(A({
+    const t = u("div", { className: "adjustments-header" });
+    t.appendChild(u("span", { className: "adjustments-title" }, i.name)), t.appendChild(T({
       label: "Reset",
       className: "btn-text",
       onClick: () => this._handleReset(e)
     })), this.element.appendChild(t);
-    const r = d("div", { className: "adjustments-grid" }), a = this.state.getFilterValues(e);
-    i.controls.forEach((l) => {
-      const o = this._createControl(e, l, a[l.id] ?? l.default);
-      o && (this._controls.set(l.id, o), r.appendChild(o));
+    const r = u("div", { className: "adjustments-grid" }), a = this.state.getFilterValues(e);
+    i.controls.forEach((o) => {
+      const l = this._createControl(e, o, a[o.id] ?? o.default);
+      l && (this._controls.set(o.id, l), r.appendChild(l));
     }), this.element.appendChild(r);
   }
   /**
@@ -1475,7 +1631,7 @@ class ze {
     const r = i.label || i.id;
     switch (this._normalizeControlType(i.type)) {
       case "slider":
-        return ae({
+        return de({
           id: `${e}-${i.id}`,
           label: r,
           min: i.min ?? 0,
@@ -1485,35 +1641,35 @@ class ze {
           onChange: (n) => this._handleChange(e, i.id, n)
         });
       case "toggle":
-        return le({
+        return ue({
           id: `${e}-${i.id}`,
           label: r,
           checked: !!t,
           onChange: (n) => this._handleChange(e, i.id, n)
         });
       case "color":
-        return oe({
+        return pe({
           id: `${e}-${i.id}`,
           label: r,
           value: typeof t == "string" && t.startsWith("#") ? t : i.default || "#000000",
           onChange: (n) => this._handleChange(e, i.id, n)
         });
       case "select":
-        const l = this._normalizeOptions(i.options);
-        return ne({
+        const o = this._normalizeOptions(i.options);
+        return fe({
           id: `${e}-${i.id}`,
           label: r,
-          options: l,
+          options: o,
           value: t ?? i.default,
           onChange: (n) => this._handleChange(e, i.id, n)
         });
       case "button":
-        const o = d("div", { className: "button-control" });
-        return o.appendChild(A({
+        const l = u("div", { className: "button-control" });
+        return l.appendChild(T({
           label: r,
           className: "btn-secondary",
           onClick: () => this._handleAction(e, i.action || i.id)
-        })), o;
+        })), l;
       default:
         return null;
     }
@@ -1585,8 +1741,8 @@ class ze {
     t && t.controls.forEach((r) => {
       const a = this._controls.get(r.id);
       if (a && typeof a.setValue == "function") {
-        const l = i[r.id] ?? r.default;
-        a.setValue(l);
+        const o = i[r.id] ?? r.default;
+        a.setValue(o);
       }
     });
   }
@@ -1610,11 +1766,11 @@ class ze {
     this._unsubscribers.forEach((i) => i()), this._unsubscribers = [], this._controls.clear(), (e = this.element) == null || e.remove(), this.element = null;
   }
 }
-const Ae = [
-  { id: "free", name: "Free", icon: ke },
-  { id: "square", name: "Square", icon: we },
-  { id: "circle", name: "Circle", icon: Se }
-], Ne = [
+const Ee = [
+  { id: "free", name: "Free", icon: Ae },
+  { id: "square", name: "Square", icon: Fe },
+  { id: "circle", name: "Circle", icon: ze }
+], Ye = [
   { id: "free", name: "Free" },
   { id: "1:1", name: "1:1" },
   { id: "4:3", name: "4:3" },
@@ -1622,7 +1778,7 @@ const Ae = [
   { id: "3:2", name: "3:2" },
   { id: "2:3", name: "2:3" }
 ];
-class Re {
+class Be {
   constructor(e, i) {
     this.state = e, this.cropManager = i, this.element = null, this._shapeChips = /* @__PURE__ */ new Map(), this._aspectChips = /* @__PURE__ */ new Map(), this._unsubscribers = [];
   }
@@ -1631,45 +1787,45 @@ class Re {
    * @returns {HTMLElement}
    */
   render() {
-    this.element = d("div", {
+    this.element = u("div", {
       className: "crop-controls",
       "data-testid": "crop-controls"
     });
-    const e = d("div", { className: "crop-section" });
-    e.appendChild(d("label", { className: "section-label" }, "Shape"));
-    const i = d("div", { className: "chip-row" }), t = this.state.get("crop.shape");
-    Ae.forEach((c) => {
-      const u = B({
+    const e = u("div", { className: "crop-section" });
+    e.appendChild(u("label", { className: "section-label" }, "Shape"));
+    const i = u("div", { className: "chip-row" }), t = this.state.get("crop.shape");
+    Ee.forEach((c) => {
+      const d = D({
         label: c.name,
         icon: c.icon,
         active: t === c.id,
         onClick: () => this._selectShape(c.id)
       });
-      u.dataset.shape = c.id, u.dataset.testid = `crop-shape-${c.id}`, this._shapeChips.set(c.id, u), i.appendChild(u);
-    }), e.appendChild(i), this.element.appendChild(e), this._aspectSection = d("div", { className: "crop-section" }), this._aspectSection.appendChild(d("label", { className: "section-label" }, "Aspect Ratio"));
-    const r = d("div", { className: "chip-row aspect-row" }), a = this.state.get("crop.aspect");
-    Ne.forEach((c) => {
-      const u = B({
+      d.dataset.shape = c.id, d.dataset.testid = `crop-shape-${c.id}`, this._shapeChips.set(c.id, d), i.appendChild(d);
+    }), e.appendChild(i), this.element.appendChild(e), this.state.get("lockCropShape") && (e.style.display = "none"), this._shapeSection = e, this._aspectSection = u("div", { className: "crop-section" }), this._aspectSection.appendChild(u("label", { className: "section-label" }, "Aspect Ratio"));
+    const r = u("div", { className: "chip-row aspect-row" }), a = this.state.get("crop.aspect");
+    Ye.forEach((c) => {
+      const d = D({
         label: c.name,
         active: a === c.id,
         onClick: () => this._selectAspect(c.id)
       });
-      u.dataset.ratio = c.id, u.dataset.testid = `crop-ratio-${c.id}`, this._aspectChips.set(c.id, u), r.appendChild(u);
+      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 l = d("div", { className: "crop-actions" }), o = A({
+    const o = u("div", { className: "crop-actions" }), l = T({
       label: "Cancel",
       className: "btn-secondary crop-cancel-btn",
-      icon: $,
+      icon: Q,
       onClick: () => this.cropManager.cancel()
     });
-    o.dataset.testid = "cancel-crop";
-    const n = A({
+    l.dataset.testid = "cancel-crop";
+    const n = T({
       label: "Apply Crop",
       className: "btn-primary crop-apply-btn",
-      icon: L,
+      icon: j,
       onClick: () => this.cropManager.apply()
     });
-    return n.dataset.testid = "apply-crop", l.appendChild(o), l.appendChild(n), this.element.appendChild(l), this._subscribeToState(), this.element;
+    return n.dataset.testid = "apply-crop", o.appendChild(l), o.appendChild(n), this.element.appendChild(o), this._subscribeToState(), this.element;
   }
   /**
    * Subscribe to state changes
@@ -1706,8 +1862,8 @@ class Re {
    * Update aspect ratio section visibility
    */
   _updateAspectVisibility() {
-    const e = this.state.get("crop.shape");
-    this._aspectSection && (this._aspectSection.style.display = e === "free" ? "" : "none");
+    const e = this.state.get("crop.shape"), i = this.state.get("lockAspectRatio");
+    this._aspectSection && (this._aspectSection.style.display = e === "free" && !i ? "" : "none");
   }
   /**
    * Show controls
@@ -1729,7 +1885,7 @@ class Re {
     this._unsubscribers.forEach((i) => i()), this._unsubscribers = [], this._shapeChips.clear(), this._aspectChips.clear(), (e = this.element) == null || e.remove(), this.element = null;
   }
 }
-class Te {
+class Oe {
   constructor(e, i) {
     this.state = e, this.filterManager = i, 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;
   }
@@ -1739,18 +1895,18 @@ class Te {
    * @returns {HTMLElement}
    */
   render({ onRemove: e, onReset: i, onClearAll: t, onUpdateValue: r, onSelect: a }) {
-    this._onRemove = e, this._onReset = i, this._onClearAll = t, this._onUpdateValue = r, this._onSelect = a, this.element = d("div", {
+    this._onRemove = e, this._onReset = i, this._onClearAll = t, this._onUpdateValue = r, this._onSelect = a, this.element = u("div", {
       className: "active-filters-panel",
       "data-testid": "active-filters-panel"
     });
-    const l = d("div", { className: "panel-header" });
-    l.appendChild(d("h3", { className: "panel-title" }, "Active Filters"));
-    const o = A({
+    const o = u("div", { className: "panel-header" });
+    o.appendChild(u("h3", { className: "panel-title" }, "Active Filters"));
+    const l = T({
       label: "Clear All",
       className: "btn-text btn-danger",
       onClick: () => this._handleClearAll()
     });
-    return o.dataset.testid = "clear-all-filters", l.appendChild(o), this.element.appendChild(l), this._listContainer = d("div", { className: "active-filters-list" }), this.element.appendChild(this._listContainer), this._subscribeToState(), this._renderFilterList(), this.element;
+    return l.dataset.testid = "clear-all-filters", o.appendChild(l), this.element.appendChild(o), this._listContainer = u("div", { className: "active-filters-list" }), this.element.appendChild(this._listContainer), this._subscribeToState(), this._renderFilterList(), this.element;
   }
   /**
    * Subscribe to state changes
@@ -1786,7 +1942,7 @@ class Te {
     const e = this.state.get("activeFilters");
     if (e.size === 0) {
       this._listContainer.appendChild(
-        d("div", { className: "no-filters-message" }, "No filters active")
+        u("div", { className: "no-filters-message" }, "No filters active")
       );
       return;
     }
@@ -1804,26 +1960,26 @@ class Te {
    * @returns {HTMLElement}
    */
   _createFilterItem(e, i) {
-    const r = this.state.get("selectedFilter") === e, a = d("div", {
+    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);
       }
-    }), l = d("div", { className: "filter-item-header" }), o = d("span", { className: "filter-item-name" }, i.name), n = d("div", { className: "filter-item-actions" }), c = w({
-      icon: G,
+    }), o = u("div", { className: "filter-item-header" }), l = u("span", { className: "filter-item-name" }, i.name), n = u("div", { className: "filter-item-actions" }), c = w({
+      icon: J,
       title: "Reset filter",
       className: "btn-icon-sm",
       onClick: () => this._handleReset(e)
-    }), u = w({
-      icon: xe,
+    }), d = w({
+      icon: Pe,
       title: "Remove filter",
       className: "btn-icon-sm btn-danger",
       onClick: () => this._handleRemove(e)
     });
-    n.appendChild(c), n.appendChild(u), l.appendChild(o), l.appendChild(n), a.appendChild(l);
-    const h = this.state.getFilterValues(e), p = d("div", { className: "filter-item-summary" });
+    n.appendChild(c), n.appendChild(d), o.appendChild(l), o.appendChild(n), a.appendChild(o);
+    const h = this.state.getFilterValues(e), p = u("div", { className: "filter-item-summary" });
     return p.textContent = this._getValuesSummary(i, h), a.appendChild(p), a._summaryEl = p, a;
   }
   /**
@@ -1856,8 +2012,8 @@ class Te {
     return e.controls.forEach((r) => {
       const a = this._normalizeControlType(r.type);
       if (a === "button") return;
-      const l = r.label || r.id, o = i[r.id] ?? r.default;
-      o !== r.default && (a === "slider" ? t.push(`${l}: ${this._formatValue(o)}`) : a === "toggle" ? o && t.push(l) : a === "color" ? t.push(`${l}: ${o}`) : a === "select" && t.push(`${l}: ${o}`));
+      const o = r.label || r.id, l = i[r.id] ?? r.default;
+      l !== r.default && (a === "slider" ? t.push(`${o}: ${this._formatValue(l)}`) : a === "toggle" ? l && t.push(o) : a === "color" ? t.push(`${o}: ${l}`) : a === "select" && t.push(`${o}: ${l}`));
     }), t.length > 0 ? t.join(", ") : "Default values";
   }
   /**
@@ -1930,17 +2086,78 @@ class Te {
     this._unsubscribers.forEach((i) => i()), this._unsubscribers = [], this._filterItems.clear(), (e = this.element) == null || e.remove(), this.element = null;
   }
 }
-class vt extends N {
+const N = {
+  name: "free",
+  initialMode: "filters",
+  cropShape: "free",
+  aspectRatio: "free",
+  autoZoomOnCropOverflow: !1,
+  lockCropShape: !1,
+  lockAspectRatio: !1,
+  showFilters: !0,
+  showCropControls: !0,
+  maxExportWidth: void 0,
+  maxExportHeight: void 0
+}, L = {
+  free: {
+    ...N
+  },
+  avatar: {
+    ...N,
+    name: "avatar",
+    initialMode: "crop",
+    cropShape: "circle",
+    aspectRatio: "1:1",
+    autoZoomOnCropOverflow: !0,
+    lockCropShape: !0,
+    lockAspectRatio: !0
+  },
+  banner: {
+    ...N,
+    name: "banner",
+    initialMode: "crop",
+    cropShape: "square",
+    aspectRatio: "16:9",
+    autoZoomOnCropOverflow: !1,
+    lockCropShape: !1,
+    lockAspectRatio: !0
+  },
+  product: {
+    ...N,
+    name: "product",
+    initialMode: "filters",
+    cropShape: "square",
+    aspectRatio: "1:1",
+    autoZoomOnCropOverflow: !1,
+    lockCropShape: !1,
+    lockAspectRatio: !1
+  }
+};
+function Le(s) {
+  if (!s)
+    return { ...L.free };
+  if (typeof s == "object" && s !== null)
+    return { ...N, ...s };
+  const e = L[s];
+  return e ? { ...e } : { ...L.free };
+}
+class Tt extends I {
   /**
    * Create a new VanillaImageEditor
    * @param {HTMLElement} container - Container element to mount the editor
    * @param {Object} options - Configuration options
    */
   constructor(e, i = {}) {
-    var t, r, a;
+    var a, o, l;
     if (super(), !e)
       throw new Error("VanillaImageEditor: container element is required");
-    this._container = e, this._options = {
+    this._container = e;
+    const t = i.preset ? Le(i.preset) : null, r = t ? {
+      initialMode: t.initialMode === "crop" ? "crop" : "adjust",
+      cropShape: t.cropShape,
+      initialAspectRatio: t.aspectRatio
+    } : {};
+    this._options = {
       theme: "auto",
       initialImage: null,
       initialMode: "adjust",
@@ -1951,10 +2168,11 @@ class vt extends N {
         endpoint: "/api/v1/media/remove-bg",
         fallbackEndpoint: null
       },
+      ...r,
       ...i
-    }, this._state = J(), this._state.set("theme", this._options.theme), this._state.set("crop.shape", this._options.cropShape), this._state.set("crop.aspect", this._options.initialAspectRatio), this._renderer = new ee(), this._filterManager = new ie(this._state, this._renderer), this._cropManager = new re(this._state, this._renderer), this._removeBgManager = null, ((t = this._options.backgroundRemoval) == null ? void 0 : t.enabled) !== !1 && (this._removeBgManager = new se({
-      endpoint: (r = this._options.backgroundRemoval) == null ? void 0 : r.endpoint,
-      fallbackEndpoint: (a = this._options.backgroundRemoval) == null ? void 0 : a.fallbackEndpoint
+    }, this._preset = t, this._state = oe(), 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 le(), this._filterManager = new ce(this._state, this._renderer), this._cropManager = new U(this._state, this._renderer), this._removeBgManager = null, ((a = this._options.backgroundRemoval) == null ? void 0 : a.enabled) !== !1 && (this._removeBgManager = new he({
+      endpoint: (o = this._options.backgroundRemoval) == null ? void 0 : o.endpoint,
+      fallbackEndpoint: (l = this._options.backgroundRemoval) == null ? void 0 : l.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();
   }
   /**
@@ -1970,16 +2188,17 @@ class vt extends N {
    * Build DOM structure
    */
   _buildDOM() {
-    this._container.innerHTML = "", this._editorEl = d("div", {
+    this._container.innerHTML = "", this._editorEl = u("div", {
       className: `vanilla-image-editor ${this._state.get("isDarkMode") ? "dark" : "light"}`
     });
-    const e = d("div", { className: "editor-toolbar-container" });
+    const e = u("div", { className: "editor-toolbar-container" });
     this._editorEl.appendChild(e), this._toolbarContainer = e;
-    const i = d("div", { className: "editor-content" }), t = d("div", { className: "canvas-section" });
-    this._canvasContainer = d("div", { className: "canvas-container" }), this._cropOverlay = d("canvas", { className: "crop-overlay" }), t.appendChild(this._canvasContainer), t.appendChild(this._cropOverlay), i.appendChild(t), this._controlsSection = d("div", { className: "controls-section" }), i.appendChild(this._controlsSection), this._editorEl.appendChild(i), this._fileInput = d("input", {
+    const i = u("div", { className: "editor-content" }), t = u("div", { className: "canvas-section" });
+    this._canvasContainer = u("div", { className: "canvas-container" }), this._cropOverlay = u("canvas", { className: "crop-overlay", "aria-hidden": "true" }), t.appendChild(this._canvasContainer), t.appendChild(this._cropOverlay), i.appendChild(t), this._controlsSection = u("div", { className: "controls-section" }), i.appendChild(this._controlsSection), this._editorEl.appendChild(i), this._fileInput = u("input", {
       type: "file",
       accept: "image/*",
       className: "hidden-file-input",
+      "aria-label": "Choose image file to edit",
       onChange: (r) => this._handleFileSelect(r)
     }), this._editorEl.appendChild(this._fileInput), this._container.appendChild(this._editorEl);
   }
@@ -1987,31 +2206,38 @@ class vt extends N {
    * Initialize UI components
    */
   _initUI() {
-    this._toolbar = new Pe(this._state, this), this._toolbarContainer.appendChild(this._toolbar.render()), this._filterControlsEl = d("div", { className: "filter-controls-container" }), this._categoryCarousel = new Me(this._state, this), this._filterControlsEl.appendChild(this._categoryCarousel.render((r) => {
+    this._toolbar = new Re(this._state, this), this._toolbarContainer.appendChild(this._toolbar.render()), this._filterControlsEl = u("div", { className: "filter-controls-container" }), this._categoryCarousel = new Te(this._state, this), this._filterControlsEl.appendChild(this._categoryCarousel.render((r) => {
     }));
-    const e = d("div", { className: "filter-layout" }), i = d("div", { className: "filter-left-column" });
-    this._filterCarousel = new Fe(this._state, this._filterManager), i.appendChild(this._filterCarousel.render({
+    const e = u("div", { className: "filter-layout" }), i = u("div", { className: "filter-left-column" });
+    this._filterCarousel = new Ie(this._state, this._filterManager), i.appendChild(this._filterCarousel.render({
       onToggle: (r, a) => this._handleFilterToggle(r, a),
       onSelect: (r) => this._handleFilterSelect(r)
-    })), this._filterAdjustments = new ze(this._state, this._filterManager), i.appendChild(this._filterAdjustments.render({
-      onChange: (r, a, l) => this._handleFilterChange(r, a, l),
+    })), this._filterAdjustments = new Xe(this._state, this._filterManager), i.appendChild(this._filterAdjustments.render({
+      onChange: (r, a, o) => this._handleFilterChange(r, a, o),
       onReset: (r) => this._handleFilterReset(r),
       onAction: (r, a) => this._handleFilterAction(r, a)
     })), e.appendChild(i);
-    const t = d("div", { className: "filter-right-column" });
-    this._activeFiltersPanel = new Te(this._state, this._filterManager), t.appendChild(this._activeFiltersPanel.render({
+    const t = u("div", { className: "filter-right-column" });
+    this._activeFiltersPanel = new Oe(this._state, this._filterManager), t.appendChild(this._activeFiltersPanel.render({
       onRemove: (r) => this._handleFilterToggle(r, !1),
       onReset: (r) => this._handleFilterReset(r),
       onClearAll: () => this.resetAll(),
       onSelect: (r) => this._handleFilterSelect(r)
-    })), e.appendChild(t), this._filterControlsEl.appendChild(e), this._cropControls = new Re(this._state, this._cropManager), this._cropControlsEl = this._cropControls.render(), this._cropControlsEl.style.display = "none", this._controlsSection.appendChild(this._filterControlsEl), this._controlsSection.appendChild(this._cropControlsEl);
+    })), e.appendChild(t), this._filterControlsEl.appendChild(e), this._cropControls = new Be(this._state, this._cropManager), this._cropControlsEl = this._cropControls.render(), this._cropControlsEl.style.display = "none", this._controlsSection.appendChild(this._filterControlsEl), this._controlsSection.appendChild(this._cropControlsEl);
   }
   /**
-   * Set up resize observer
+   * Set up resize observer with debounce to prevent infinite loops.
+   * Without debounce, PIXI renderer.resize() changes the canvas buffer
+   * which triggers another ResizeObserver notification, causing a loop
+   * that floods the console with "ResizeObserver loop completed" errors
+   * and prevents the image from rendering (gray canvas).
    */
   _setupResizeObserver() {
+    let e = null;
     this._resizeObserver = new ResizeObserver(() => {
-      this._canvasContainer && (this._renderer.resizeTo(this._canvasContainer), this._state.get("mode") === "crop" && this._cropManager.drawOverlay());
+      clearTimeout(e), e = setTimeout(() => {
+        this._canvasContainer && (this._renderer.resizeTo(this._canvasContainer), this._state.get("mode") === "crop" && this._cropManager.drawOverlay());
+      }, 50);
     }), this._resizeObserver.observe(this._canvasContainer);
   }
   /**
@@ -2098,7 +2324,7 @@ class vt extends N {
    */
   async loadImage(e) {
     let i = e;
-    e instanceof File && (i = await this._fileToDataUrl(e)), await this._renderer.loadTexture(i), this._state.set("hasImage", !0), this._state.set("imageUrl", i), this.emit("imageLoaded", { url: i });
+    e instanceof File && (i = await this._fileToDataUrl(e)), await this._renderer.loadTexture(i), this._state.set("hasImage", !0), this._state.set("imageUrl", i), this._options.initialMode === "crop" && this.setMode("crop"), this.emit("imageLoaded", { url: i });
   }
   /**
    * Convert a File to data URL
@@ -2250,9 +2476,9 @@ class vt extends N {
   _showLoadingOverlay(e) {
     var t;
     if (!this._loadingOverlay)
-      this._loadingOverlay = d("div", { className: "editor-loading-overlay" }, [
-        d("div", { className: "editor-loading-spinner" }),
-        d("div", { className: "editor-loading-text" }, e)
+      this._loadingOverlay = u("div", { className: "editor-loading-overlay" }, [
+        u("div", { className: "editor-loading-spinner" }),
+        u("div", { className: "editor-loading-text" }, e)
       ]);
     else {
       const r = this._loadingOverlay.querySelector(".editor-loading-text");
@@ -2272,27 +2498,27 @@ class vt extends N {
    * Destroy the editor and clean up
    */
   destroy() {
-    var e, i, t, r, a, l, o, n;
-    (e = this._resizeObserver) == null || e.disconnect(), this._renderer.destroy(), this._cropManager.disable(), (i = this._toolbar) == null || i.destroy(), (t = this._categoryCarousel) == null || t.destroy(), (r = this._filterCarousel) == null || r.destroy(), (a = this._filterAdjustments) == null || a.destroy(), (l = this._cropControls) == null || l.destroy(), (o = this._activeFiltersPanel) == null || o.destroy(), (n = this._editorEl) == null || n.remove(), this._container = null, this._state = null, this.emit("destroyed"), this.removeAllListeners();
+    var e, i, t, r, a, o, l, n;
+    (e = this._resizeObserver) == null || e.disconnect(), this._renderer.destroy(), this._cropManager.disable(), (i = this._toolbar) == null || i.destroy(), (t = this._categoryCarousel) == null || t.destroy(), (r = this._filterCarousel) == null || r.destroy(), (a = this._filterAdjustments) == null || a.destroy(), (o = this._cropControls) == null || o.destroy(), (l = this._activeFiltersPanel) == null || l.destroy(), (n = this._editorEl) == null || n.remove(), this._container = null, this._state = null, this.emit("destroyed"), this.removeAllListeners();
   }
 }
-const v = /* @__PURE__ */ new Map(), z = /* @__PURE__ */ new Map();
+const k = /* @__PURE__ */ new Map(), R = /* @__PURE__ */ new Map();
 function f(s) {
   var e;
-  return v.has(s.id), v.set(s.id, s), z.has(s.category) || z.set(s.category, []), (e = z.get(s.category)) == null || e.push(s.id), s;
+  return k.has(s.id), k.set(s.id, s), R.has(s.category) || R.set(s.category, []), (e = R.get(s.category)) == null || e.push(s.id), s;
 }
-function Ie(s) {
-  return v.get(s);
+function Ve(s) {
+  return k.get(s);
 }
-function I() {
-  return Array.from(v.values());
+function Y() {
+  return Array.from(k.values());
 }
-function Xe() {
-  I().map((i) => i.id), Object.entries(g).filter(
+function Ue() {
+  Y().map((i) => i.id), Object.entries(g).filter(
     (i) => /Filter$/.test(i[0]) && typeof i[1] == "function"
   ).forEach(([i, t]) => {
     const r = i.replace(/Filter$/, "").replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
-    v.has(r) || f({
+    k.has(r) || f({
       id: r,
       name: i.replace(/Filter$/, ""),
       category: "unlisted",
@@ -2310,17 +2536,17 @@ function Xe() {
     });
   });
 }
-function Ye(s) {
-  return (z.get(s) || []).map((i) => v.get(i)).filter(Boolean);
+function De(s) {
+  return (R.get(s) || []).map((i) => k.get(i)).filter(Boolean);
 }
-function Ee() {
-  return Array.from(z.keys());
+function je() {
+  return Array.from(R.keys());
 }
-function Pt(s) {
-  return v.has(s);
+function It(s) {
+  return k.has(s);
 }
-function Be() {
-  return Array.from(v.values()).map((s) => ({
+function qe() {
+  return Array.from(k.values()).map((s) => ({
     id: s.id,
     name: s.name,
     category: s.category,
@@ -2328,17 +2554,17 @@ function Be() {
   }));
 }
 if (typeof window < "u") {
-  window.__DEBUG_FILTERS_LIST = Array.from(v.keys()), window.getAllFilters = I, window.getFilter = Ie, window.getFiltersByCategory = Ye, window.getRegisteredFilters = Be;
+  window.__DEBUG_FILTERS_LIST = Array.from(k.keys()), window.getAllFilters = Y, window.getFilter = Ve, window.getFiltersByCategory = De, window.getRegisteredFilters = qe;
   const s = f;
   window.registerFilter = (e) => {
     const i = s(e);
-    return window.__DEBUG_FILTERS_LIST = Array.from(v.keys()), i;
+    return window.__DEBUG_FILTERS_LIST = Array.from(k.keys()), i;
   };
 }
 typeof window < "u" && (window.initializeFilterRegistry = window.initializeFilterRegistry || function() {
   return [];
 });
-const { AdjustmentFilter: Le } = g, { ColorMatrixFilter: Oe } = C;
+const { AdjustmentFilter: He } = g, { ColorMatrixFilter: $e } = C;
 f({
   id: "adjustment",
   name: "Adjustment",
@@ -2358,50 +2584,50 @@ f({
         alpha: s.alpha ?? 1
       };
       try {
-        const i = new Le(e);
+        const i = new He(e);
         return i._customParams = { ...s }, i.updateUIParam = function(t, r) {
           try {
             const a = this._customParams || {};
             this._customParams = a, a[t] = r;
-            const l = Number(r);
+            const o = Number(r);
             switch (t) {
               case "gamma":
-                this.gamma = l;
+                this.gamma = o;
                 break;
               case "saturation":
-                this.saturation = l;
+                this.saturation = o;
                 break;
               case "contrast":
-                this.contrast = l;
+                this.contrast = o;
                 break;
               case "brightness":
-                this.brightness = l;
+                this.brightness = o;
                 break;
               case "red":
-                this.red = l;
+                this.red = o;
                 break;
               case "green":
-                this.green = l;
+                this.green = o;
                 break;
               case "blue":
-                this.blue = l;
+                this.blue = o;
                 break;
               case "alpha":
-                this.alpha = l;
+                this.alpha = o;
                 break;
               default:
-                t in this && (this[t] = l);
+                t in this && (this[t] = o);
                 break;
             }
           } catch {
           }
         }, i;
       } catch {
-        const t = new Oe();
+        const t = new $e();
         return t._customParams = { ...s }, typeof t.brightness == "function" && t.brightness(s.brightness, !1), typeof t.contrast == "function" && t.contrast(s.contrast, !1), typeof t.saturate == "function" && t.saturate(s.saturation, !1), t.updateUIParam = function(r, a) {
           try {
-            const l = this._customParams || {};
-            switch (this._customParams = l, l[r] = a, r) {
+            const o = this._customParams || {};
+            switch (this._customParams = o, o[r] = a, r) {
               case "brightness":
                 typeof this.brightness == "function" && this.brightness(a, !1);
                 break;
@@ -2518,7 +2744,7 @@ f({
     }
   ]
 });
-const { ColorMatrixFilter: Ve } = C;
+const { ColorMatrixFilter: Ze } = C;
 f({
   id: "adjustment-advanced",
   name: "Advanced Adjustment",
@@ -2527,7 +2753,7 @@ f({
   // Create an instance of the ColorMatrixFilter with the provided parameters
   createFilter: (s) => {
     try {
-      const e = new Ve();
+      const e = new Ze();
       return e._customParams = { ...s }, e.reset(), s.brightness !== 1 && e.brightness(s.brightness, !1), s.contrast !== 1 && e.contrast(s.contrast, !1), s.saturation !== 1 && e.saturate(s.saturation, !1), s.hue !== 0 && e.hue(s.hue, !1), s.sepia > 0 && e.sepia(!1), s.negative && e.negative(!1), e.updateUIParam = function(i, t) {
         try {
           const r = this._customParams || {};
@@ -2626,8 +2852,8 @@ f({
         try {
           const a = this._customParams || {};
           if (this._customParams = a, t === "alpha") {
-            const l = Number(r);
-            this.alpha = l, a.alpha = l;
+            const o = Number(r);
+            this.alpha = o, a.alpha = o;
           } else
             t in this && (this[t] = r);
         } catch {
@@ -2805,7 +3031,7 @@ f({
     }
   ]
 });
-const { ColorOverlayFilter: Ue } = g;
+const { ColorOverlayFilter: We } = g;
 f({
   id: "colorOverlay",
   name: "Color Overlay",
@@ -2820,7 +3046,7 @@ f({
     try {
       let e = 16711680;
       s.color && (typeof s.color == "string" ? e = parseInt(s.color.replace("#", "0x"), 16) : typeof s.color == "number" && (e = s.color));
-      const i = new Ue({
+      const i = new We({
         color: e,
         alpha: s.alpha || 0.5
       });
@@ -2828,8 +3054,8 @@ f({
         const a = this._customParams || {};
         switch (this._customParams = a, a[t] = r, t) {
           case "color":
-            let l;
-            typeof r == "string" ? l = parseInt(r.replace("#", "0x"), 16) : l = Number(r), this.color = l, this.uniforms && (this.uniforms.uColor = l);
+            let 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(r), this.uniforms && (this.uniforms.uAlpha = Number(r));
@@ -2902,37 +3128,37 @@ f({
         _offset: r,
         _distance: i,
         _angle: t
-      }, a.updateUIParam = function(l, o) {
+      }, a.updateUIParam = function(o, l) {
         try {
           const n = this._customParams || {};
-          switch (this._customParams = n, n[l] = o, l) {
+          switch (this._customParams = n, n[o] = l, o) {
             case "color":
-              if (typeof o == "string") {
-                const u = parseInt(o.replace("#", "0x"), 16);
-                this.color = u;
+              if (typeof l == "string") {
+                const d = parseInt(l.replace("#", "0x"), 16);
+                this.color = d;
               }
               break;
             case "alpha":
-              this.alpha = Number(o);
+              this.alpha = Number(l);
               break;
             case "blur":
-              this.blur = Number(o);
+              this.blur = Number(l);
               break;
             case "quality":
-              this.quality = Number(o);
+              this.quality = Number(l);
               break;
             case "shadowOnly":
-              this.shadowOnly = !!o;
+              this.shadowOnly = !!l;
               break;
             case "pixelSizeX":
-              this.pixelSizeX = Number(o), n.pixelSizeX = Number(o);
+              this.pixelSizeX = Number(l), n.pixelSizeX = Number(l);
               break;
             case "pixelSizeY":
-              this.pixelSizeY = Number(o), n.pixelSizeY = Number(o);
+              this.pixelSizeY = Number(l), n.pixelSizeY = Number(l);
               break;
             case "distance":
             case "angle":
-              l === "distance" ? n._distance = Number(o) : n._angle = Number(o);
+              o === "distance" ? n._distance = Number(l) : n._angle = Number(l);
               const c = {
                 x: n._distance * Math.cos(n._angle * Math.PI / 180),
                 y: n._distance * Math.sin(n._angle * Math.PI / 180)
@@ -2940,12 +3166,12 @@ f({
               n._offset = c, this.offset = c;
               break;
             default:
-              l in this && (this[l] = o);
+              o in this && (this[o] = l);
               break;
           }
           return !0;
         } catch {
-          return this._customParams && (this._customParams[l] = o), !1;
+          return this._customParams && (this._customParams[o] = l), !1;
         }
       }, a;
     } catch {
@@ -3052,7 +3278,7 @@ f({
     }
   ]
 });
-const { ColorMatrixFilter: De } = C;
+const { ColorMatrixFilter: Ge } = C;
 f({
   id: "grayscale",
   name: "Grayscale",
@@ -3065,14 +3291,14 @@ f({
    */
   createFilter: (s) => {
     try {
-      const e = new De();
+      const e = new Ge();
       e._customParams = { ...s };
       const i = s.intensity !== void 0 ? s.intensity : 1;
-      return U(e, i), e.updateUIParam = function(t, r) {
+      return $(e, i), e.updateUIParam = function(t, r) {
         const a = this._customParams || {};
         switch (this._customParams = a, a[t] = r, t) {
           case "intensity":
-            U(this, r);
+            $(this, r);
             break;
           default:
             t in this && (this[t] = r);
@@ -3102,10 +3328,10 @@ f({
     }
   ]
 });
-function U(s, e) {
+function $(s, e) {
   s.reset(), s.greyscale(e);
 }
-const { HslAdjustmentFilter: je } = g;
+const { HslAdjustmentFilter: Ke } = g;
 f({
   id: "hsl-adjustment",
   name: "HSL Adjustment",
@@ -3117,7 +3343,7 @@ f({
    */
   createFilter: (s) => {
     try {
-      const e = new je({
+      const e = new Ke({
         hue: s.hue !== void 0 ? s.hue : 0,
         saturation: s.saturation !== void 0 ? s.saturation : 0,
         lightness: s.lightness !== void 0 ? s.lightness : 0,
@@ -3215,7 +3441,7 @@ f({
     }
   ]
 });
-const { KawaseBlurFilter: qe } = g;
+const { KawaseBlurFilter: Qe } = g;
 f({
   id: "kawase-blur",
   name: "Kawase Blur",
@@ -3228,7 +3454,7 @@ f({
    */
   createFilter: (s) => {
     try {
-      const e = new qe({
+      const e = new Qe({
         strength: s.strength || 4,
         quality: s.quality || 3,
         clamp: s.clamp || !1,
@@ -3333,7 +3559,7 @@ f({
     }
   ]
 });
-const { MotionBlurFilter: He } = g;
+const { MotionBlurFilter: Je } = g;
 f({
   id: "motion-blur",
   name: "Motion Blur",
@@ -3346,7 +3572,7 @@ f({
    */
   createFilter: (s) => {
     try {
-      const e = new He({
+      const e = new Je({
         velocity: {
           x: s.velocityX !== void 0 ? s.velocityX : 0,
           y: s.velocityY !== void 0 ? s.velocityY : 0
@@ -3441,7 +3667,7 @@ f({
     }
   ]
 });
-const { RadialBlurFilter: $e } = g;
+const { RadialBlurFilter: et } = g;
 f({
   id: "radial-blur",
   name: "Radial Blur",
@@ -3450,7 +3676,7 @@ f({
   // Create an instance of the RadialBlurFilter with the provided parameters
   createFilter: (s) => {
     try {
-      const e = new $e({
+      const e = new et({
         angle: s.angle ?? 20,
         center: { x: s.centerX ?? 0, y: s.centerY ?? 0 },
         kernelSize: s.kernelSize ?? 15,
@@ -3565,7 +3791,7 @@ f({
     }
   ]
 });
-const { TiltShiftFilter: Ge } = g;
+const { TiltShiftFilter: tt } = g;
 f({
   id: "tilt-shift",
   name: "Tilt Shift",
@@ -3574,48 +3800,48 @@ f({
   // Create an instance of the TiltShiftFilter with the provided parameters
   createFilter: (s) => {
     try {
-      const e = typeof s.blur == "number" ? s.blur : 100, i = typeof s.gradientBlur == "number" ? s.gradientBlur : 600, t = typeof s.startX == "number" ? s.startX : 0, r = typeof s.startY == "number" ? s.startY : 0.5, a = typeof s.endX == "number" ? s.endX : 1, l = typeof s.endY == "number" ? s.endY : 0.5, o = new Ge({
+      const e = typeof s.blur == "number" ? s.blur : 100, i = typeof s.gradientBlur == "number" ? s.gradientBlur : 600, t = 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, l = new tt({
         blur: Number(e),
         gradientBlur: Number(i),
         start: { x: Number(t), y: Number(r) },
-        end: { x: Number(a), y: Number(l) }
+        end: { x: Number(a), y: Number(o) }
       });
-      return o._customParams = {
+      return l._customParams = {
         blur: e,
         gradientBlur: i,
         startX: t,
         startY: r,
         endX: a,
-        endY: l
-      }, o.updateUIParam = function(n, c) {
+        endY: o
+      }, l.updateUIParam = function(n, c) {
         try {
-          const u = Number(c), h = this._customParams || {};
-          switch (this._customParams = h, h[n] = u, n) {
+          const d = Number(c), h = this._customParams || {};
+          switch (this._customParams = h, h[n] = d, n) {
             case "blur":
-              this.blur = u;
+              this.blur = d;
               break;
             case "gradientBlur":
-              this.gradientBlur = u;
+              this.gradientBlur = d;
               break;
             case "startX":
-              this.start && typeof this.start == "object" && (this.start.x = u);
+              this.start && typeof this.start == "object" && (this.start.x = d);
               break;
             case "startY":
-              this.start && typeof this.start == "object" && (this.start.y = u);
+              this.start && typeof this.start == "object" && (this.start.y = d);
               break;
             case "endX":
-              this.end && typeof this.end == "object" && (this.end.x = u);
+              this.end && typeof this.end == "object" && (this.end.x = d);
               break;
             case "endY":
-              this.end && typeof this.end == "object" && (this.end.y = u);
+              this.end && typeof this.end == "object" && (this.end.y = d);
               break;
             default:
-              n in this && (this[n] = u);
+              n in this && (this[n] = d);
               break;
           }
         } catch {
         }
-      }, o;
+      }, l;
     } catch {
       return null;
     }
@@ -3693,7 +3919,7 @@ f({
     }
   ]
 });
-const { ZoomBlurFilter: We } = g;
+const { ZoomBlurFilter: it } = g;
 f({
   id: "zoom-blur",
   name: "Zoom Blur",
@@ -3706,7 +3932,7 @@ f({
    */
   createFilter: (s) => {
     try {
-      const e = new We({
+      const e = new it({
         strength: s.strength || 0.1,
         center: {
           x: s.centerX !== void 0 ? s.centerX : 0.5,
@@ -3820,7 +4046,7 @@ f({
     }
   ]
 });
-const { ColorGradientFilter: D } = g;
+const { ColorGradientFilter: Z } = g;
 f({
   id: "color-gradient",
   name: "Color Gradient",
@@ -3844,7 +4070,7 @@ f({
         { offset: 0, color: 16711680, alpha: 1 },
         { offset: 1, color: 255, alpha: 1 }
       ]), e.sort((t, r) => t.offset - r.offset);
-      const i = new D({
+      const i = new Z({
         type: s.gradientType,
         // 0: linear, 1: radial, 2: conic
         stops: e,
@@ -3861,27 +4087,27 @@ f({
         }));
       }, i.getDynamicControls = function() {
         const t = this.getColorStopsForUI(), r = [];
-        return t.forEach((a, l) => {
+        return t.forEach((a, o) => {
           r.push({
-            id: `colorStop-${l}-color`,
+            id: `colorStop-${o}-color`,
             type: "color",
-            label: `Stop ${l + 1} Color`,
-            property: `colorStops[${l}].color`,
+            label: `Stop ${o + 1} Color`,
+            property: `colorStops[${o}].color`,
             default: a.color
           }), r.push({
-            id: `colorStop-${l}-offset`,
+            id: `colorStop-${o}-offset`,
             type: "slider",
-            label: `Stop ${l + 1} Position`,
-            property: `colorStops[${l}].offset`,
+            label: `Stop ${o + 1} Position`,
+            property: `colorStops[${o}].offset`,
             min: 0,
             max: 1,
             step: 0.01,
             default: a.offset
           }), r.push({
-            id: `colorStop-${l}-alpha`,
+            id: `colorStop-${o}-alpha`,
             type: "slider",
-            label: `Stop ${l + 1} Alpha`,
-            property: `colorStops[${l}].alpha`,
+            label: `Stop ${o + 1} Alpha`,
+            property: `colorStops[${o}].alpha`,
             min: 0,
             max: 1,
             step: 0.01,
@@ -3903,7 +4129,7 @@ f({
             t in this && (this[t] = r);
             break;
           case "addColorStop":
-            const l = [...this.stops], c = {
+            const o = [...this.stops], c = {
               offset: 1,
               // Will be adjusted later
               alpha: 1,
@@ -3912,20 +4138,20 @@ f({
                 return h << 16 | p << 8 | m;
               })()
             };
-            if (l.length > 0) {
-              for (let p = 0; p < l.length; p++)
-                l[p].offset *= 0.8;
+            if (o.length > 0) {
+              for (let p = 0; p < o.length; p++)
+                o[p].offset *= 0.8;
               c.offset = 1;
             }
-            l.push(c), this.stops = l, a.colorStops = this.stops.map((h) => ({
+            o.push(c), this.stops = o, a.colorStops = this.stops.map((h) => ({
               offset: h.offset,
               color: typeof h.color == "number" ? "#" + h.color.toString(16).padStart(6, "0") : h.color,
               alpha: h.alpha
             }));
             break;
           case "removeColorStop":
-            const u = [...this.stops];
-            u.length > 2 && (u.pop(), this.stops = u, a.colorStops = this.stops.map((h) => ({
+            const d = [...this.stops];
+            d.length > 2 && (d.pop(), this.stops = d, a.colorStops = this.stops.map((h) => ({
               offset: h.offset,
               color: typeof h.color == "number" ? "#" + h.color.toString(16).padStart(6, "0") : h.color,
               alpha: h.alpha
@@ -3934,7 +4160,7 @@ f({
           case "cssGradient":
             if (r && typeof r == "string" && r.trim() !== "")
               try {
-                const h = new D({ css: r });
+                const h = new Z({ 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,
@@ -3957,9 +4183,9 @@ f({
             if (/colorStops\[\d+\]\..*/.test(t)) {
               const h = t.match(/colorStops\[(\d+)\]\.(.*)/);
               if (h) {
-                const [p, m, x] = h, b = parseInt(m), y = [...this.stops];
-                if (b >= 0 && b < y.length)
-                  return x === "color" && typeof r == "string" ? y[b].color = parseInt(r.replace("#", "0x")) : (x === "offset" || x === "alpha") && (y[b][x] = r), this.stops = y, this.stops.sort((k, _) => k.offset - _.offset), a.colorStops = this.getColorStopsForUI(), !0;
+                const [p, m, S] = h, b = parseInt(m), _ = [...this.stops];
+                if (b >= 0 && b < _.length)
+                  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 t in this && (this[t] = r);
             break;
@@ -4083,8 +4309,8 @@ f({
         mix: s.mix
       });
       return t._customParams = { ...s }, t.updateUIParam = function(r, a) {
-        const l = this._customParams || {};
-        switch (this._customParams = l, l[r] = a, r) {
+        const o = this._customParams || {};
+        switch (this._customParams = o, o[r] = a, r) {
           case "texturePath":
             a && (this.colorMap = C.Texture.from(a));
             break;
@@ -4147,7 +4373,7 @@ f({
     }
   ]
 });
-const Ze = g.ColorReplaceFilter;
+const rt = g.ColorReplaceFilter;
 f({
   id: "color-replace",
   name: "Color Replace",
@@ -4164,14 +4390,14 @@ f({
       s.originalColor && (typeof s.originalColor == "string" ? e = parseInt(s.originalColor.replace("#", "0x"), 16) : typeof s.originalColor == "number" && (e = s.originalColor));
       let i = 255;
       s.targetColor && (typeof s.targetColor == "string" ? i = parseInt(s.targetColor.replace("#", "0x"), 16) : typeof s.targetColor == "number" && (i = s.targetColor));
-      const t = new Ze({
+      const t = new rt({
         originalColor: e,
         targetColor: i,
         tolerance: s.tolerance || 0.4
       });
       return t._customParams = { ...s }, t.updateUIParam = function(r, a) {
-        const l = this._customParams || {};
-        switch (this._customParams = l, l[r] = a, r) {
+        const o = this._customParams || {};
+        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;
@@ -4228,7 +4454,7 @@ f({
     }
   ]
 });
-const Ke = g.MultiColorReplaceFilter;
+const st = g.MultiColorReplaceFilter;
 f({
   id: "multi-color-replace",
   name: "Multi-Color Replace",
@@ -4254,7 +4480,7 @@ f({
         const t = 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([t, r]);
       }
-      const i = new Ke(
+      const i = new st(
         e,
         s.tolerance || 0.05,
         3
@@ -4263,20 +4489,20 @@ f({
       return i._customParams = { ...s }, i.updateUIParam = function(t, r) {
         const a = this._customParams || {};
         if (this._customParams = a, a[t] = r, t === "originalColor1" || t === "targetColor1" || t === "originalColor2" || t === "targetColor2" || t === "originalColor3" || t === "targetColor3" || t === "enableThirdPair") {
-          const l = [];
+          const o = [];
           if (a.originalColor1 && a.targetColor1) {
-            const o = typeof a.originalColor1 == "string" ? parseInt(a.originalColor1.replace("#", "0x"), 16) : a.originalColor1, n = typeof a.targetColor1 == "string" ? parseInt(a.targetColor1.replace("#", "0x"), 16) : a.targetColor1;
-            l.push([o, n]);
+            const l = typeof a.originalColor1 == "string" ? parseInt(a.originalColor1.replace("#", "0x"), 16) : a.originalColor1, n = typeof a.targetColor1 == "string" ? parseInt(a.targetColor1.replace("#", "0x"), 16) : a.targetColor1;
+            o.push([l, n]);
           }
           if (a.originalColor2 && a.targetColor2) {
-            const o = typeof a.originalColor2 == "string" ? parseInt(a.originalColor2.replace("#", "0x"), 16) : a.originalColor2, n = typeof a.targetColor2 == "string" ? parseInt(a.targetColor2.replace("#", "0x"), 16) : a.targetColor2;
-            l.push([o, n]);
+            const l = typeof a.originalColor2 == "string" ? parseInt(a.originalColor2.replace("#", "0x"), 16) : a.originalColor2, n = typeof a.targetColor2 == "string" ? parseInt(a.targetColor2.replace("#", "0x"), 16) : a.targetColor2;
+            o.push([l, n]);
           }
           if (a.enableThirdPair && a.originalColor3 && a.targetColor3) {
-            const o = typeof a.originalColor3 == "string" ? parseInt(a.originalColor3.replace("#", "0x"), 16) : a.originalColor3, n = typeof a.targetColor3 == "string" ? parseInt(a.targetColor3.replace("#", "0x"), 16) : a.targetColor3;
-            l.push([o, n]);
+            const l = typeof a.originalColor3 == "string" ? parseInt(a.originalColor3.replace("#", "0x"), 16) : a.originalColor3, n = typeof a.targetColor3 == "string" ? parseInt(a.targetColor3.replace("#", "0x"), 16) : a.targetColor3;
+            o.push([l, n]);
           }
-          this.replacements = l, this.refresh();
+          this.replacements = o, this.refresh();
         } else t === "tolerance" ? this.tolerance = r : t in this && (this[t] = r);
         return !0;
       }, i;
@@ -4365,7 +4591,7 @@ f({
     }
   ]
 });
-const { RGBSplitFilter: Qe } = g;
+const { RGBSplitFilter: at } = g;
 f({
   id: "rgb-split",
   name: "RGB Split",
@@ -4386,40 +4612,40 @@ f({
       }, t = {
         x: s.blueX !== void 0 ? s.blueX : 0,
         y: s.blueY !== void 0 ? s.blueY : 0
-      }, r = new Qe({
+      }, r = new at({
         red: e,
         green: i,
         blue: t
       });
-      return r._customParams = { ...s }, r.updateUIParam = function(a, l) {
+      return r._customParams = { ...s }, r.updateUIParam = function(a, o) {
         try {
-          const o = this._customParams || {};
-          switch (this._customParams = o, o[a] = l, a) {
+          const l = this._customParams || {};
+          switch (this._customParams = l, l[a] = o, a) {
             case "redX":
-              this.redX = Number(l);
+              this.redX = Number(o);
               break;
             case "redY":
-              this.redY = Number(l);
+              this.redY = Number(o);
               break;
             case "greenX":
-              this.greenX = Number(l);
+              this.greenX = Number(o);
               break;
             case "greenY":
-              this.greenY = Number(l);
+              this.greenY = Number(o);
               break;
             case "blueX":
-              this.blueX = Number(l);
+              this.blueX = Number(o);
               break;
             case "blueY":
-              this.blueY = Number(l);
+              this.blueY = Number(o);
               break;
             default:
-              a in this && (this[a] = l);
+              a in this && (this[a] = o);
               break;
           }
           return !0;
         } catch {
-          return this._customParams && (this._customParams[a] = l), !1;
+          return this._customParams && (this._customParams[a] = o), !1;
         }
       }, r;
     } catch {
@@ -4499,7 +4725,7 @@ f({
     }
   ]
 });
-const { AdvancedBloomFilter: Je } = g;
+const { AdvancedBloomFilter: ot } = g;
 f({
   id: "advanced-bloom",
   name: "Advanced Bloom",
@@ -4508,7 +4734,7 @@ f({
   // Create an instance of the AdvancedBloomFilter with the provided parameters
   createFilter: (s) => {
     try {
-      const e = new Je({
+      const e = new ot({
         threshold: s.threshold || 0.5,
         bloomScale: s.bloomScale || 1,
         brightness: s.brightness || 1,
@@ -4655,7 +4881,7 @@ f({
     }
   ]
 });
-const et = g.AsciiFilter;
+const lt = g.AsciiFilter;
 f({
   id: "ascii",
   name: "ASCII",
@@ -4667,7 +4893,7 @@ f({
       const e = typeof s.size == "number" ? s.size : 8;
       let i = s.color;
       typeof i == "string" && i.startsWith("#") && (i = parseInt(i.replace("#", "0x"), 16));
-      const t = s.replaceColor === !0, r = new et({
+      const t = s.replaceColor === !0, r = new lt({
         size: e,
         color: i,
         replaceColor: t
@@ -4676,21 +4902,21 @@ f({
         size: e,
         color: i,
         replaceColor: t
-      }, r.updateUIParam = function(a, l) {
+      }, r.updateUIParam = function(a, o) {
         try {
-          const o = this._customParams || {};
-          switch (this._customParams = o, o[a] = l, a) {
+          const l = this._customParams || {};
+          switch (this._customParams = l, l[a] = o, a) {
             case "size":
-              this.size = Number(l);
+              this.size = Number(o);
               break;
             case "color":
-              typeof l == "string" && l.startsWith("#") ? (o.color = l, this.color = parseInt(l.replace("#", "0x"), 16)) : this.color = l;
+              typeof o == "string" && o.startsWith("#") ? (l.color = o, this.color = parseInt(o.replace("#", "0x"), 16)) : this.color = o;
               break;
             case "replaceColor":
-              this.replaceColor = !!l;
+              this.replaceColor = !!o;
               break;
             default:
-              a in this && (this[a] = l);
+              a in this && (this[a] = o);
               break;
           }
         } catch {
@@ -4734,7 +4960,7 @@ f({
     }
   ]
 });
-const tt = g.BackdropBlurFilter;
+const nt = g.BackdropBlurFilter;
 f({
   id: "backdrop-blur",
   name: "Backdrop Blur",
@@ -4743,7 +4969,7 @@ f({
   // Create an instance of the BackdropBlurFilter with the provided parameters
   createFilter: (s) => {
     try {
-      const e = new tt({
+      const e = new nt({
         // Higher strength values (20-50) make the effect more noticeable
         strength: s.strength || 20,
         quality: s.quality || 4,
@@ -4841,7 +5067,7 @@ f({
     }
   ]
 });
-const { BevelFilter: it } = g;
+const { BevelFilter: ct } = g;
 f({
   id: "bevel",
   name: "Bevel",
@@ -4853,7 +5079,7 @@ f({
    */
   createFilter: (s) => {
     try {
-      const e = s.lightColor ? s.lightColor.replace("#", "0x") : "0xffffff", i = s.shadowColor ? s.shadowColor.replace("#", "0x") : "0x000000", t = new it({
+      const e = s.lightColor ? s.lightColor.replace("#", "0x") : "0xffffff", i = s.shadowColor ? s.shadowColor.replace("#", "0x") : "0x000000", t = new ct({
         rotation: s.rotation !== void 0 ? s.rotation : 45,
         thickness: s.thickness !== void 0 ? s.thickness : 2,
         lightColor: parseInt(e, 16),
@@ -4863,8 +5089,8 @@ f({
       });
       return t._customParams = { ...s }, t.updateUIParam = function(r, a) {
         try {
-          const l = this._customParams || {};
-          switch (this._customParams = l, l[r] = a, r) {
+          const o = this._customParams || {};
+          switch (this._customParams = o, o[r] = a, r) {
             case "rotation":
               this.rotation = Number(a);
               break;
@@ -4873,8 +5099,8 @@ f({
               break;
             case "lightColor":
               if (typeof a == "string") {
-                const o = parseInt(a.replace("#", "0x"), 16);
-                this.lightColor = o;
+                const l = parseInt(a.replace("#", "0x"), 16);
+                this.lightColor = l;
               }
               break;
             case "lightAlpha":
@@ -4882,8 +5108,8 @@ f({
               break;
             case "shadowColor":
               if (typeof a == "string") {
-                const o = parseInt(a.replace("#", "0x"), 16);
-                this.shadowColor = o;
+                const l = parseInt(a.replace("#", "0x"), 16);
+                this.shadowColor = l;
               }
               break;
             case "shadowAlpha":
@@ -4969,7 +5195,7 @@ f({
     }
   ]
 });
-const { BloomFilter: rt } = g;
+const { BloomFilter: ht } = g;
 f({
   id: "bloom",
   name: "Bloom/Glow",
@@ -4978,7 +5204,7 @@ f({
   // Create an instance of the BloomFilter with the provided parameters
   createFilter: (s) => {
     try {
-      const e = typeof s.strengthX == "number" ? s.strengthX : 2, i = typeof s.strengthY == "number" ? s.strengthY : 2, t = typeof s.quality == "number" ? s.quality : 4, r = typeof s.resolution == "number" ? s.resolution : 1, a = typeof s.kernelSize == "number" ? s.kernelSize : 5, l = new rt({
+      const e = typeof s.strengthX == "number" ? s.strengthX : 2, i = typeof s.strengthY == "number" ? s.strengthY : 2, t = 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 ht({
         strength: {
           x: Number(e),
           y: Number(i)
@@ -4987,22 +5213,22 @@ f({
         resolution: Number(r),
         kernelSize: Number(a)
       });
-      return l._customParams = {
+      return o._customParams = {
         strengthX: e,
         strengthY: i,
         quality: t,
         resolution: r,
         kernelSize: a
-      }, l.updateUIParam = function(o, n) {
-        var c, u;
+      }, o.updateUIParam = function(l, n) {
+        var c, d;
         try {
           const h = Number(n), p = this._customParams || {};
-          switch (this._customParams = p, p[o] = h, o) {
+          switch (this._customParams = p, p[l] = h, l) {
             case "strengthX":
               this.strength && typeof this.strength == "object" && (this.strength.x = h, (c = this._updateStrength) == null || c.call(this));
               break;
             case "strengthY":
-              this.strength && typeof this.strength == "object" && (this.strength.y = h, (u = this._updateStrength) == null || u.call(this));
+              this.strength && typeof this.strength == "object" && (this.strength.y = h, (d = this._updateStrength) == null || d.call(this));
               break;
             case "quality":
               this.quality = h;
@@ -5014,12 +5240,12 @@ f({
               this.kernelSize = h;
               break;
             default:
-              o in this && (this[o] = h);
+              l in this && (this[l] = h);
               break;
           }
         } catch {
         }
-      }, l;
+      }, o;
     } catch {
       return null;
     }
@@ -5081,7 +5307,7 @@ f({
     }
   ]
 });
-const { BulgePinchFilter: st } = g;
+const { BulgePinchFilter: dt } = g;
 f({
   id: "bulge-pinch",
   // ID must match what the application expects
@@ -5091,7 +5317,7 @@ f({
   // Create an instance of the BulgePinchFilter with the provided parameters
   createFilter: (s) => {
     try {
-      const e = s.centerX ?? 0.5, i = s.centerY ?? 0.5, t = s.radius ?? 100, r = s.strength ?? 1, a = new st({
+      const e = s.centerX ?? 0.5, i = s.centerY ?? 0.5, t = s.radius ?? 100, r = s.strength ?? 1, a = new dt({
         center: {
           x: e,
           y: i
@@ -5099,21 +5325,21 @@ f({
         radius: t,
         strength: r
       });
-      return a._customParams = { ...s }, a.updateUIParam = function(l, o) {
+      return a._customParams = { ...s }, a.updateUIParam = function(o, l) {
         const n = this._customParams || {};
-        switch (this._customParams = n, n[l] = o, l) {
+        switch (this._customParams = n, n[o] = l, o) {
           case "centerX":
-            this.center || (this.center = { x: 0.5, y: 0.5 }), this.center.x = o;
+            this.center || (this.center = { x: 0.5, y: 0.5 }), this.center.x = l;
             break;
           case "centerY":
-            this.center || (this.center = { x: 0.5, y: 0.5 }), this.center.y = o;
+            this.center || (this.center = { x: 0.5, y: 0.5 }), this.center.y = l;
             break;
           case "radius":
           case "strength":
-            this[l] = o;
+            this[o] = l;
             break;
           default:
-            l in this && (this[l] = o);
+            o in this && (this[o] = l);
             break;
         }
         return !0;
@@ -5173,7 +5399,7 @@ f({
     }
   ]
 });
-const { ConvolutionFilter: at } = g, M = {
+const { ConvolutionFilter: ut } = g, A = {
   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],
@@ -5206,25 +5432,25 @@ f({
         ];
       else {
         const t = s.preset;
-        e = M[t] || M.normal;
+        e = A[t] || A.normal;
       }
-      const i = new at(e, s.width || 200, s.height || 200);
+      const i = new ut(e, s.width || 200, s.height || 200);
       return i._customParams = { ...s }, i.updateUIParam = function(t, r) {
         const a = this._customParams || {};
         switch (this._customParams = a, a[t] = r, t) {
           case "preset":
             if (!a.customMatrix) {
-              const l = r;
-              M[l] && (this.matrix = M[l]);
+              const o = r;
+              A[o] && (this.matrix = A[o]);
             }
             break;
           case "customMatrix":
             if (r) {
-              const l = this.matrix;
-              a.m00 = l[0], a.m01 = l[1], a.m02 = l[2], a.m10 = l[3], a.m11 = l[4], a.m12 = l[5], a.m20 = l[6], a.m21 = l[7], a.m22 = l[8];
+              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 l = a.preset;
-              this.matrix = M[l] || M.normal;
+              const o = a.preset;
+              this.matrix = A[o] || A.normal;
             }
             break;
           case "m00":
@@ -5237,7 +5463,7 @@ f({
           case "m21":
           case "m22":
             if (a.customMatrix) {
-              const l = [...this.matrix], n = {
+              const o = [...this.matrix], n = {
                 m00: 0,
                 m01: 1,
                 m02: 2,
@@ -5248,7 +5474,7 @@ f({
                 m21: 7,
                 m22: 8
               }[t];
-              n !== void 0 && (l[n] = r, this.matrix = l);
+              n !== void 0 && (o[n] = r, this.matrix = o);
             }
             break;
           case "width":
@@ -5419,7 +5645,7 @@ f({
     }
   ]
 });
-const { CrossHatchFilter: lt } = g;
+const { CrossHatchFilter: pt } = g;
 f({
   id: "cross-hatch",
   name: "Cross Hatch",
@@ -5429,7 +5655,7 @@ f({
   // Note: CrossHatchFilter has NO parameters according to PixiJS examples
   createFilter: (s) => {
     try {
-      const e = new lt();
+      const e = new pt();
       return e.updateUIParam = function(i, t) {
         return !0;
       }, e;
@@ -5626,7 +5852,7 @@ f({
     }
   ]
 });
-const ot = C.DisplacementFilter, nt = C.Sprite, E = C.Texture;
+const ft = C.DisplacementFilter, mt = C.Sprite, V = C.Texture;
 f({
   id: "displacement",
   // ID must match what the application expects
@@ -5639,41 +5865,41 @@ f({
       const e = s.mapTexture || "/assets/images/displacement_map.png";
       let i;
       try {
-        i = E.from(e), i.source.addressMode = "repeat";
+        i = V.from(e), i.source.addressMode = "repeat";
       } catch {
-        const l = document.createElement("canvas");
-        l.width = 256, l.height = 256;
-        const o = l.getContext("2d");
-        if (o) {
-          o.fillStyle = "#ffffff", o.fillRect(0, 0, l.width, l.height), o.fillStyle = "#000000";
+        const o = document.createElement("canvas");
+        o.width = 256, o.height = 256;
+        const l = o.getContext("2d");
+        if (l) {
+          l.fillStyle = "#ffffff", l.fillRect(0, 0, o.width, o.height), l.fillStyle = "#000000";
           for (let n = 0; n < 10; n++)
             for (let c = 0; c < 10; c++)
-              (n + c) % 2 === 0 && o.fillRect(n * 25, c * 25, 25, 25);
+              (n + c) % 2 === 0 && l.fillRect(n * 25, c * 25, 25, 25);
         }
-        i = E.from(l);
+        i = V.from(o);
       }
-      const t = new nt(i), r = new ot(t, s.scale || 50);
-      return r.scale.x = s.scaleX || 50, r.scale.y = s.scaleY || 50, r._customParams = { ...s }, r._displacementSprite = t, r.updateUIParam = function(a, l) {
-        const o = this._customParams || {};
-        switch (this._customParams = o, o[a] = l, a) {
+      const t = new mt(i), r = new ft(t, s.scale || 50);
+      return r.scale.x = s.scaleX || 50, r.scale.y = s.scaleY || 50, r._customParams = { ...s }, r._displacementSprite = t, r.updateUIParam = function(a, o) {
+        const l = this._customParams || {};
+        switch (this._customParams = l, l[a] = o, a) {
           case "scaleX":
-            this.scale.x = l;
+            this.scale.x = o;
             break;
           case "scaleY":
-            this.scale.y = l;
+            this.scale.y = o;
             break;
           case "mapTexture":
             try {
               const n = this._displacementSprite;
               if (n) {
-                const c = E.from(l);
+                const c = V.from(o);
                 c.source.addressMode = "repeat", n.texture = c;
               }
             } catch {
             }
             break;
           default:
-            a in this ? this[a] = l : a in this.scale && (this.scale[a] = l);
+            a in this ? this[a] = o : a in this.scale && (this.scale[a] = o);
             break;
         }
         return !0;
@@ -5799,7 +6025,7 @@ f({
     }
   ]
 });
-const { EmbossFilter: ct } = g;
+const { EmbossFilter: gt } = g;
 f({
   id: "emboss",
   name: "Emboss",
@@ -5808,7 +6034,7 @@ f({
   // Create an instance of the Emboss filter with the provided parameters
   createFilter: (s) => {
     try {
-      const e = typeof s.strength == "number" ? s.strength : 5, i = new ct(e);
+      const e = typeof s.strength == "number" ? s.strength : 5, i = new gt(e);
       return i._customParams = {
         strength: e
       }, i.updateUIParam = function(t, r) {
@@ -5816,8 +6042,8 @@ f({
           const a = this._customParams || {};
           switch (this._customParams = a, a[t] = r, t) {
             case "strength":
-              const l = Number(r);
-              a.strength = l, this.strength = l;
+              const o = Number(r);
+              a.strength = o, this.strength = o;
               break;
             default:
               t in this && (this[t] = r);
@@ -5848,7 +6074,7 @@ f({
     }
   ]
 });
-const { GlitchFilter: ht } = g, P = {
+const { GlitchFilter: bt } = g, M = {
   TRANSPARENT: 0,
   ORIGINAL: 1,
   LOOP: 2,
@@ -5862,7 +6088,7 @@ f({
   description: "Apply digital distortion and glitch effects",
   createFilter: (s) => {
     try {
-      const e = { x: s.redX, y: s.redY }, i = { x: s.greenX, y: s.greenY }, t = { x: s.blueX, y: s.blueY }, r = new ht({
+      const e = { x: s.redX, y: s.redY }, i = { x: s.greenX, y: s.greenY }, t = { x: s.blueX, y: s.blueY }, r = new bt({
         slices: s.slices,
         offset: s.offset,
         direction: s.direction,
@@ -5877,34 +6103,34 @@ f({
       });
       r.animating = s.animating || !1, r._customParams = { ...s }, typeof r.refresh == "function" && r.refresh();
       let a = null;
-      const l = () => {
-        r.animating && (r.seed = Math.random()), a = requestAnimationFrame(l);
+      const o = () => {
+        r.animating && (r.seed = Math.random()), a = requestAnimationFrame(o);
       };
-      return r.animating && (a = requestAnimationFrame(l)), r._stopAnimation = () => {
+      return r.animating && (a = requestAnimationFrame(o)), r._stopAnimation = () => {
         a !== null && (cancelAnimationFrame(a), a = null);
-      }, r.updateUIParam = function(o, n) {
+      }, r.updateUIParam = function(l, n) {
         const c = this._customParams || {};
-        switch (this._customParams = c, c[o] = n, o) {
+        switch (this._customParams = c, c[l] = n, l) {
           case "animating":
-            this.animating = n, n && !a && (a = requestAnimationFrame(l));
+            this.animating = n, n && !a && (a = requestAnimationFrame(o));
             break;
           case "slices":
             this.slices = Math.round(n);
             break;
           case "redX":
           case "redY":
-            const u = this.red;
-            o === "redX" ? u.x = n : u.y = n, this.red = u;
+            const d = this.red;
+            l === "redX" ? d.x = n : d.y = n, this.red = d;
             break;
           case "greenX":
           case "greenY":
             const h = this.green;
-            o === "greenX" ? h.x = n : h.y = n, this.green = h;
+            l === "greenX" ? h.x = n : h.y = n, this.green = h;
             break;
           case "blueX":
           case "blueY":
             const p = this.blue;
-            o === "blueX" ? p.x = n : p.y = n, this.blue = p;
+            l === "blueX" ? p.x = n : p.y = n, this.blue = p;
             break;
           case "seed":
             this.animating || (this.seed = n);
@@ -5925,10 +6151,10 @@ f({
           case "average":
           case "minSize":
           case "sampleSize":
-            o in this && (this[o] = n);
+            l in this && (this[l] = n);
             break;
           default:
-            o in this && (this[o] = n);
+            l in this && (this[l] = n);
             break;
         }
       }, r;
@@ -5940,7 +6166,7 @@ f({
     slices: 10,
     offset: 100,
     direction: 0,
-    fillMode: P.LOOP,
+    fillMode: M.LOOP,
     // LOOP mode looks better for the demo
     seed: 0.5,
     average: !1,
@@ -6003,13 +6229,13 @@ f({
       label: "Fill Mode",
       property: "fillMode",
       options: [
-        { value: P.TRANSPARENT, label: "Transparent" },
-        { value: P.ORIGINAL, label: "Original" },
-        { value: P.LOOP, label: "Loop" },
-        { value: P.CLAMP, label: "Clamp" },
-        { value: P.MIRROR, label: "Mirror" }
+        { value: M.TRANSPARENT, label: "Transparent" },
+        { value: M.ORIGINAL, label: "Original" },
+        { value: M.LOOP, label: "Loop" },
+        { value: M.CLAMP, label: "Clamp" },
+        { value: M.MIRROR, label: "Mirror" }
       ],
-      default: P.LOOP
+      default: M.LOOP
     },
     {
       id: "seed",
@@ -6103,7 +6329,7 @@ f({
     }
   ]
 });
-const { GlowFilter: dt } = g;
+const { GlowFilter: yt } = g;
 f({
   id: "glow",
   name: "Glow",
@@ -6112,7 +6338,7 @@ f({
   // Create an instance of the GlowFilter with the provided parameters
   createFilter: (s) => {
     try {
-      const e = parseInt(s.color.replace("#", "0x"), 16), i = new dt({
+      const e = parseInt(s.color.replace("#", "0x"), 16), i = new yt({
         distance: s.distance || 10,
         outerStrength: s.outerStrength || 4,
         innerStrength: s.innerStrength || 0,
@@ -6238,7 +6464,7 @@ f({
     }
   ]
 });
-const { GodrayFilter: ut } = g;
+const { GodrayFilter: _t } = g;
 f({
   id: "godray",
   name: "Godray",
@@ -6247,7 +6473,7 @@ f({
   // Create an instance of the GodrayFilter with the provided parameters
   createFilter: (s) => {
     try {
-      const e = new ut({
+      const e = new _t({
         angle: s.angle || 30,
         parallel: s.parallel ?? !0,
         center: {
@@ -6400,7 +6626,7 @@ f({
     }
   ]
 });
-const pt = g.SimpleLightmapFilter, j = C.Texture;
+const xt = g.SimpleLightmapFilter, W = C.Texture;
 f({
   id: "lightmap",
   name: "Lightmap",
@@ -6425,41 +6651,41 @@ 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 l = j.from(r);
-      let o;
+      const o = W.from(r);
+      let l;
       try {
-        typeof i == "string" && i.startsWith("#") ? o = parseInt(i.replace("#", "0x"), 16) : o = 0;
+        typeof i == "string" && i.startsWith("#") ? l = parseInt(i.replace("#", "0x"), 16) : l = 0;
       } catch {
-        o = 0;
+        l = 0;
       }
-      const n = new pt(l, o, t);
+      const n = new xt(o, l, t);
       return n._customParams = {
         textureType: e,
         color: i,
         alpha: t
-      }, n.updateUIParam = function(c, u) {
+      }, n.updateUIParam = function(c, d) {
         try {
           const h = this._customParams || {};
-          switch (this._customParams = h, h[c] = u, c) {
+          switch (this._customParams = h, h[c] = d, c) {
             case "textureType":
-              h.textureType = u;
+              h.textureType = d;
               const p = document.createElement("canvas");
               p.width = 256, p.height = 256;
               const m = p.getContext("2d");
               if (m) {
-                if (u === "spotlight") {
+                if (d === "spotlight") {
                   m.fillStyle = "black", m.fillRect(0, 0, 256, 256);
                   const b = m.createRadialGradient(128, 128, 5, 128, 128, 80);
                   b.addColorStop(0, "white"), b.addColorStop(0.5, "rgba(255, 255, 255, 0.5)"), b.addColorStop(1, "rgba(0, 0, 0, 0)"), m.fillStyle = b, m.beginPath(), m.arc(128, 128, 100, 0, Math.PI * 2), m.fill();
-                } else if (u === "softlight") {
+                } else if (d === "softlight") {
                   const b = m.createLinearGradient(0, 0, 256, 256);
                   b.addColorStop(0, "white"), b.addColorStop(0.3, "rgba(220, 220, 220, 1)"), b.addColorStop(0.7, "rgba(150, 150, 150, 1)"), b.addColorStop(1, "rgba(80, 80, 80, 1)"), m.fillStyle = b, m.fillRect(0, 0, 256, 256);
                 } else {
                   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 x = j.from(p);
-                if (this.lightMap = x, this.enabled !== void 0) {
+                const S = W.from(p);
+                if (this.lightMap = S, this.enabled !== void 0) {
                   const b = this.enabled;
                   this.enabled = !1, setTimeout(() => {
                     this.enabled = b;
@@ -6468,18 +6694,18 @@ f({
               }
               break;
             case "color":
-              h.color = u;
+              h.color = d;
               try {
-                typeof u == "string" && u.startsWith("#") ? this.color = parseInt(u.replace("#", "0x"), 16) : this.color = 0;
+                typeof d == "string" && d.startsWith("#") ? this.color = parseInt(d.replace("#", "0x"), 16) : this.color = 0;
               } catch {
                 this.color = 0;
               }
               break;
             case "alpha":
-              this.alpha = Number(u);
+              this.alpha = Number(d);
               break;
             default:
-              c in this && (this[c] = u);
+              c in this && (this[c] = d);
               break;
           }
         } catch {
@@ -6531,7 +6757,7 @@ f({
     }
   ]
 });
-const { NoiseFilter: ft } = C;
+const { NoiseFilter: Ct } = C;
 f({
   id: "noise",
   name: "Noise",
@@ -6539,7 +6765,7 @@ f({
   description: "Add random noise to the image",
   createFilter: (s) => {
     try {
-      const e = new ft({
+      const e = new Ct({
         noise: s.noise || 0.5,
         seed: s.seed || Math.random()
       });
@@ -6551,8 +6777,8 @@ f({
       return e.animating && (i = requestAnimationFrame(t)), e._stopAnimation = () => {
         i !== null && (cancelAnimationFrame(i), i = null);
       }, e.updateUIParam = function(r, a) {
-        const l = this._customParams || {};
-        switch (this._customParams = l, l[r] = a, r) {
+        const o = this._customParams || {};
+        switch (this._customParams = o, o[r] = a, r) {
           case "animating":
             this.animating = a, a && !i && (i = requestAnimationFrame(t));
             break;
@@ -6616,7 +6842,7 @@ f({
     }
   ]
 });
-const { OldFilmFilter: mt } = g;
+const { OldFilmFilter: wt } = g;
 f({
   id: "old-film",
   name: "Old Film",
@@ -6624,7 +6850,7 @@ f({
   description: "Apply a vintage film effect with scratches and grain",
   createFilter: (s) => {
     try {
-      const e = new mt({
+      const e = new wt({
         sepia: s.sepia,
         noise: s.noise,
         noiseSize: s.noiseSize,
@@ -6644,8 +6870,8 @@ f({
       return e.animating && (i = requestAnimationFrame(t)), e._stopAnimation = () => {
         i !== null && (cancelAnimationFrame(i), i = null);
       }, e.updateUIParam = function(r, a) {
-        const l = this._customParams || {};
-        switch (this._customParams = l, l[r] = a, r) {
+        const o = this._customParams || {};
+        switch (this._customParams = o, o[r] = a, r) {
           case "animating":
             this.animating = a, a && !i && (i = requestAnimationFrame(t));
             break;
@@ -6805,7 +7031,7 @@ f({
     }
   ]
 });
-const { OutlineFilter: gt } = g;
+const { OutlineFilter: St } = g;
 f({
   id: "outline",
   name: "Outline",
@@ -6815,7 +7041,7 @@ f({
     try {
       let e = s.color;
       typeof e == "string" && (e = parseInt(e.replace("#", "0x"), 16));
-      const i = new gt({
+      const i = new St({
         thickness: s.thickness || 4,
         color: e,
         alpha: s.alpha || 1,
@@ -6905,7 +7131,7 @@ f({
     }
   ]
 });
-const { PixelateFilter: bt } = g;
+const { PixelateFilter: kt } = g;
 f({
   id: "pixelate",
   name: "Pixelate",
@@ -6913,7 +7139,7 @@ f({
   description: "Create a pixelated or mosaic effect",
   createFilter: (s) => {
     try {
-      const e = new bt(
+      const e = new kt(
         s.useUniform ? Math.max(4, s.size || 10) : [Math.max(4, s.sizeX || 10), Math.max(4, s.sizeY || 10)]
       );
       return e._customParams = { ...s }, e.updateUIParam = function(i, t) {
@@ -6996,7 +7222,7 @@ f({
     }
   ]
 });
-const { ReflectionFilter: yt } = g;
+const { ReflectionFilter: vt } = g;
 f({
   id: "reflection",
   // ID must match what the application expects
@@ -7013,7 +7239,7 @@ f({
         waveLength: new Float32Array([s.wavelengthStart ?? 30, s.wavelengthEnd ?? 100]),
         alpha: new Float32Array([s.alphaStart ?? 1, s.alphaEnd ?? 1]),
         time: s.time ?? 0
-      }, i = new yt(e);
+      }, i = new vt(e);
       return i._customParams = { ...s }, i.animating = s.animating ?? !1, i.updateUIParam = function(t, r) {
         const a = this._customParams || {};
         switch (this._customParams = a, a[t] = r, t) {
@@ -7164,7 +7390,7 @@ f({
     }
   ]
 });
-const { ShockwaveFilter: _t } = g;
+const { ShockwaveFilter: Pt } = g;
 f({
   id: "shockwave",
   // ID must match what the application expects
@@ -7174,16 +7400,16 @@ f({
   // Create an instance of the ShockwaveFilter with the provided parameters
   createFilter: (s) => {
     try {
-      const e = s.centerX ?? 0.5, i = s.centerY ?? 0.5, t = { x: e, y: i }, r = s.amplitude ?? 30, a = s.wavelength ?? 160, l = s.speed ?? 500, o = s.brightness ?? 1, n = s.radius ?? -1, c = s.time ?? 0, u = new _t({
+      const e = s.centerX ?? 0.5, i = s.centerY ?? 0.5, t = { x: e, y: i }, r = s.amplitude ?? 30, a = s.wavelength ?? 160, o = s.speed ?? 500, l = s.brightness ?? 1, n = s.radius ?? -1, c = s.time ?? 0, d = new Pt({
         center: t,
         amplitude: r,
         wavelength: a,
-        speed: l,
-        brightness: o,
+        speed: o,
+        brightness: l,
         radius: n,
         time: c
       });
-      return u._customParams = { ...s }, u.animating = s.animating ?? !1, u.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":
@@ -7208,7 +7434,7 @@ f({
             break;
         }
         return !0;
-      }, u;
+      }, d;
     } catch {
       return null;
     }
@@ -7316,7 +7542,7 @@ f({
     }
   ]
 });
-const { SimplexNoiseFilter: xt } = g;
+const { SimplexNoiseFilter: Mt } = g;
 f({
   id: "simplex-noise",
   name: "Simplex Noise",
@@ -7324,7 +7550,7 @@ f({
   description: "Apply procedural noise to create texture effects",
   createFilter: (s) => {
     try {
-      const e = s.animating ? 0 : s.offsetZ || 0, i = new xt({
+      const e = s.animating ? 0 : s.offsetZ || 0, i = new Mt({
         strength: s.strength,
         noiseScale: s.noiseScale,
         offsetX: s.offsetX,
@@ -7339,20 +7565,20 @@ f({
       };
       return i.animating && (t = requestAnimationFrame(a)), i._stopAnimation = () => {
         t !== null && (cancelAnimationFrame(t), t = null);
-      }, i.updateUIParam = function(l, o) {
+      }, i.updateUIParam = function(o, l) {
         const n = this._customParams || {};
-        switch (this._customParams = n, n[l] = o, l) {
+        switch (this._customParams = n, n[o] = l, o) {
           case "animating":
-            this.animating = o, o && !t && (t = requestAnimationFrame(a));
+            this.animating = l, l && !t && (t = requestAnimationFrame(a));
             break;
           case "animationSpeed":
-            this.animationSpeed = o;
+            this.animationSpeed = l;
             break;
           case "offsetZ":
-            this.animating || (this.offsetZ = o);
+            this.animating || (this.offsetZ = l);
             break;
           case "randomizeSeed":
-            if (o) {
+            if (l) {
               const c = () => Math.random() * 100 - 50;
               this.offsetX = c(), this.offsetY = c(), this.offsetZ = c(), n.offsetX = this.offsetX, n.offsetY = this.offsetY, n.offsetZ = this.offsetZ;
             }
@@ -7362,10 +7588,10 @@ f({
           case "offsetX":
           case "offsetY":
           case "step":
-            l in this && (this[l] = o);
+            o in this && (this[o] = l);
             break;
           default:
-            l in this && (this[l] = o);
+            o in this && (this[o] = l);
             break;
         }
       }, i;
@@ -7471,9 +7697,9 @@ f({
     }
   ]
 });
-class Ct extends C.Filter {
+class Ft extends C.Filter {
   constructor(e) {
-    const i = K.from({
+    const i = se.from({
       vertex: `
         attribute vec2 aPosition;
         varying vec2 vTextureCoord;
@@ -7582,7 +7808,7 @@ f({
   description: "Creates a twisting distortion effect around a central point",
   createFilter: (s) => {
     try {
-      const e = new Ct({
+      const e = new Ft({
         centerX: s.centerX ?? 0.5,
         centerY: s.centerY ?? 0.5,
         radius: s.radius ?? 0.25,
@@ -7652,8 +7878,8 @@ f({
     }
   ]
 });
-const { AdjustmentFilter: wt } = g;
-function T(s) {
+const { AdjustmentFilter: zt } = g;
+function E(s) {
   const e = typeof s == "string" ? parseInt(s.replace("#", "0x"), 16) : s;
   return [
     (e >> 16 & 255) / 255,
@@ -7661,14 +7887,14 @@ function T(s) {
     (e & 255) / 255
   ];
 }
-class St extends wt {
+class At extends zt {
   constructor(e = {}) {
     super({
       brightness: 1,
       contrast: 1,
       saturation: 1,
       alpha: 1
-    }), this._radius = 0.8, this._strength = 1, this._colorRgb = [0, 0, 0], this._colorValue = "#000000", this._radius = e.radius ?? 0.8, this._strength = e.strength ?? 1, e.color !== void 0 && (typeof e.color == "string" ? (this._colorValue = e.color, this._colorRgb = T(e.color)) : (this._colorValue = "#" + e.color.toString(16).padStart(6, "0"), this._colorRgb = T(e.color))), this.updateVignette();
+    }), this._radius = 0.8, this._strength = 1, this._colorRgb = [0, 0, 0], this._colorValue = "#000000", this._radius = e.radius ?? 0.8, this._strength = e.strength ?? 1, e.color !== void 0 && (typeof e.color == "string" ? (this._colorValue = e.color, this._colorRgb = E(e.color)) : (this._colorValue = "#" + e.color.toString(16).padStart(6, "0"), this._colorRgb = E(e.color))), this.updateVignette();
   }
   /**
    * Updates the filter parameters to simulate a vignette effect
@@ -7694,7 +7920,7 @@ class St extends wt {
     return this._colorValue;
   }
   set color(e) {
-    typeof e == "string" ? (this._colorValue = e, this._colorRgb = T(e)) : (this._colorValue = "#" + e.toString(16).padStart(6, "0"), this._colorRgb = T(e)), this.updateVignette();
+    typeof e == "string" ? (this._colorValue = e, this._colorRgb = E(e)) : (this._colorValue = "#" + e.toString(16).padStart(6, "0"), this._colorRgb = E(e)), this.updateVignette();
   }
 }
 f({
@@ -7704,7 +7930,7 @@ f({
   description: "Add a classic darkened border effect to the image",
   createFilter: (s) => {
     try {
-      const e = new St({
+      const e = new At({
         radius: s.radius || 0.8,
         strength: s.strength || 1,
         color: s.color || "#000000"
@@ -7768,15 +7994,15 @@ f({
     }
   ]
 });
-function Mt() {
+function Xt() {
   try {
     let s = [], e = [];
     try {
-      s = I(), s.length === 0 && Xe();
+      s = Y(), s.length === 0 && Ue();
     } catch {
     }
     try {
-      s = I(), e = Ee();
+      s = Y(), e = je();
     } catch {
       s || (s = []), e || (e = []);
     }
@@ -7786,14 +8012,14 @@ function Mt() {
   }
 }
 export {
-  vt as V,
-  Ie as a,
-  Ye as b,
-  Ee as c,
-  Be as d,
-  I as g,
-  Pt as h,
-  Mt as i,
+  Tt as V,
+  Ve as a,
+  De as b,
+  je as c,
+  qe as d,
+  Y as g,
+  It as h,
+  Xt as i,
   f as r
 };
-//# sourceMappingURL=index-CcGWfCCV.js.map
+//# sourceMappingURL=index-BsOWbGbb.js.map