@codingfactory/mediables-vue 2.11.0 → 2.12.0

package/dist/{editor-CYj5y5bp.js → editor-Bj9-m03S.js}

@@ -1,9 +1,9 @@
-var Ve = Object.defineProperty;
-var Ue = (s, e, t) => e in s ? Ve(s, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[e] = t;
-var J = (s, e, t) => Ue(s, typeof e != "symbol" ? e + "" : e, t);
-import * as b from "pixi-filters";
+var je = Object.defineProperty;
+var qe = (s, e, t) => e in s ? je(s, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[e] = t;
+var ie = (s, e, t) => qe(s, typeof e != "symbol" ? e + "" : e, t);
+import * as y from "pixi-filters";
 import * as R from "pixi.js";
-class W {
+class G {
   constructor() {
     this._events = /* @__PURE__ */ new Map();
   }
@@ -33,7 +33,7 @@ class W {
     e ? this._events.delete(e) : this._events.clear();
   }
 }
-class je extends W {
+class He extends G {
   constructor() {
     super(), this._state = {
       // Image state
@@ -56,8 +56,15 @@ class je extends W {
         // 'free' | 'square' | 'circle'
         aspect: "free",
         // 'free' | '1:1' | '4:3' | '16:9' | '3:2' | '2:3'
-        rect: null
+        rect: null,
         // { x, y, width, height }
+        dirty: !1
+        // true once the user changes the generated crop frame
+      },
+      // Transform state
+      transform: {
+        rotation: 0
+        // degrees clockwise, normalized to 0..359.999
       },
       // UI state
       theme: "auto",
@@ -92,10 +99,10 @@ class je extends W {
     const i = this.get(e);
     if (e.includes(".")) {
       const r = e.split("."), a = r.pop();
-      let n = this._state;
-      for (const o of r)
-        n[o] === void 0 && (n[o] = {}), n = n[o];
-      n[a] = t;
+      let o = this._state;
+      for (const n of r)
+        o[n] === void 0 && (o[n] = {}), o = o[n];
+      o[a] = t;
     } else
       this._state[e] = t;
     this.emit(`change:${e}`, { value: t, old: i }), this.emit("change", { key: e, value: t, old: i });
@@ -114,14 +121,15 @@ class je extends W {
    * @returns {Object} ImageEditorSessionState-compatible object
    */
   getSerializableState() {
+    var i;
     const e = [];
     if (this._state.activeFilters)
-      for (const i of this._state.activeFilters) {
-        const r = this._state.filterValues[i];
+      for (const r of this._state.activeFilters) {
+        const a = this._state.filterValues[r];
         e.push({
-          id: i,
+          id: r,
           enabled: !0,
-          values: r ? { ...r } : {}
+          values: a ? { ...a } : {}
         });
       }
     const t = this._state.crop;
@@ -132,6 +140,9 @@ class je extends W {
         aspectRatio: (t == null ? void 0 : t.aspect) || "free",
         shape: (t == null ? void 0 : t.shape) || "free"
       },
+      transform: {
+        rotation: Number((i = this._state.transform) == null ? void 0 : i.rotation) || 0
+      },
       filters: e
     };
   }
@@ -188,12 +199,12 @@ class je extends W {
       this.set("isDarkMode", this._state.theme === "dark");
   }
 }
-function qe() {
-  return new je();
+function $e() {
+  return new He();
 }
-class He extends W {
+class We extends G {
   constructor() {
-    super(), this.app = null, this.sprite = null, this.originalTexture = null, this.baseTexture = null, this.fitScale = 1, this.zoom = 1, this._container = null, this._mountPromise = null;
+    super(), this.app = null, this.sprite = null, this.originalTexture = null, this.baseTexture = null, this.fitScale = 1, this.zoom = 1, this._container = null, this._lastExportDimensions = null, this._mountPromise = null;
   }
   /**
    * Whether the renderer is fully initialized and ready for use.
@@ -209,8 +220,8 @@ class He extends W {
    * canvas getter which throws when renderer is undefined.
    */
   _getCssSize() {
-    var r, a, n, o, l, c;
-    const e = (a = (r = this.app) == null ? void 0 : r.renderer) == null ? void 0 : a.canvas, t = (e == null ? void 0 : e.clientWidth) ?? ((o = (n = this.app) == null ? void 0 : n.screen) == null ? void 0 : o.width) ?? 0, i = (e == null ? void 0 : e.clientHeight) ?? ((c = (l = this.app) == null ? void 0 : l.screen) == null ? void 0 : c.height) ?? 0;
+    var r, a, o, n, l, c;
+    const e = (a = (r = this.app) == null ? void 0 : r.renderer) == null ? void 0 : a.canvas, t = (e == null ? void 0 : e.clientWidth) ?? ((n = (o = this.app) == null ? void 0 : o.screen) == null ? void 0 : n.width) ?? 0, i = (e == null ? void 0 : e.clientHeight) ?? ((c = (l = this.app) == null ? void 0 : l.screen) == null ? void 0 : c.height) ?? 0;
     return { w: t, h: i };
   }
   /**
@@ -297,10 +308,10 @@ class He extends W {
       if (!a)
         throw new Error("PIXI.js not found. Please ensure PIXI is loaded globally.");
       (d = a.Assets) != null && d.setPreferences && a.Assets.setPreferences({ crossOrigin: "anonymous" });
-      const n = e.clientWidth || 600, o = e.clientHeight || 400, l = typeof i.backgroundAlpha == "number" ? i.backgroundAlpha : 1;
+      const o = e.clientWidth || 600, n = e.clientHeight || 400, l = typeof i.backgroundAlpha == "number" ? i.backgroundAlpha : 1;
       this.app = new a.Application(), await this.app.init({
-        width: n,
-        height: o,
+        width: o,
+        height: n,
         backgroundColor: t,
         backgroundAlpha: l,
         antialias: !0,
@@ -308,7 +319,7 @@ class He extends W {
         resolution: window.devicePixelRatio || 1
       }), e.appendChild(this.app.canvas);
       const c = this.app.canvas;
-      c.classList.add("pixi-canvas"), c.style.width = "100%", c.style.height = "100%", c.style.transform = "translateZ(0)", c.style.willChange = "transform", c.setAttribute("role", "img"), c.setAttribute("aria-label", "Image editor canvas — use toolbar controls to edit the image"), this.emit("mounted", { width: n, height: o });
+      c.classList.add("pixi-canvas"), c.style.width = "100%", c.style.height = "100%", c.style.transform = "translateZ(0)", c.style.willChange = "transform", c.setAttribute("role", "img"), c.setAttribute("aria-label", "Image editor canvas — use toolbar controls to edit the image"), this.emit("mounted", { width: o, height: n });
     };
     this._mountPromise = r(), await this._mountPromise;
   }
@@ -325,10 +336,76 @@ class He extends W {
     if (!r)
       return !1;
     this.originalTexture = r, this.baseTexture = r, this.sprite && (this.app.stage.removeChild(this.sprite), this.sprite.destroy()), this.sprite = new t.Sprite(r), this.app.stage.addChild(this.sprite), this.fitScale = this.getFitScaleFor(r), this.zoom = 1;
-    const { w: a, h: n } = this._getCssSize();
-    if (this.applyViewTransform({ center: { x: a / 2, y: n / 2 } }), await this._waitForNextFrame(), !((d = this.app) != null && d.renderer)) return !1;
-    const o = this.getFitScaleFor(r);
-    return Math.abs(o - this.fitScale) / Math.max(1e-6, o) > 0.02 && (this.fitScale = o, this.applyViewTransform({ center: { x: a / 2, y: n / 2 } })), this.render(), this.emit("textureLoaded", { width: r.width, height: r.height }), !0;
+    const { w: a, h: o } = this._getCssSize();
+    if (this.applyViewTransform({ center: { x: a / 2, y: o / 2 } }), await this._waitForNextFrame(), !((d = this.app) != null && d.renderer)) return !1;
+    const n = this.getFitScaleFor(r);
+    return Math.abs(n - this.fitScale) / Math.max(1e-6, n) > 0.02 && (this.fitScale = n, this.applyViewTransform({ center: { x: a / 2, y: o / 2 } })), this.render(), this.emit("textureLoaded", { width: r.width, height: r.height }), !0;
+  }
+  /**
+   * Normalize degrees to the 0..360 range.
+   * @param {number} degrees
+   * @returns {number}
+   */
+  _normalizeDegrees(e) {
+    if (!Number.isFinite(e)) return 0;
+    const t = e % 360;
+    return t < 0 ? t + 360 : t;
+  }
+  /**
+   * Calculate the axis-aligned bounds for a rotated rectangle.
+   * @param {number} width
+   * @param {number} height
+   * @param {number} degrees
+   * @returns {{ width: number, height: number }}
+   */
+  getRotatedBounds(e, t, i) {
+    const r = this._normalizeDegrees(i);
+    if (r === 0)
+      return {
+        width: Math.max(1, Math.round(e)),
+        height: Math.max(1, Math.round(t))
+      };
+    const a = r * Math.PI / 180, o = Math.abs(Math.cos(a)), n = Math.abs(Math.sin(a)), l = o < 1e-10 ? 0 : o, c = n < 1e-10 ? 0 : n;
+    return {
+      width: Math.max(1, Math.ceil(e * l + t * c)),
+      height: Math.max(1, Math.ceil(e * c + t * l))
+    };
+  }
+  /**
+   * Permanently rotate the working texture. This keeps crop math simple:
+   * after rotation, sprite coordinates and texture dimensions both describe
+   * the visible image exactly.
+   *
+   * @param {number} degrees Clockwise degrees to add to the working texture.
+   * @returns {boolean}
+   */
+  rotateBy(e) {
+    var g, x, P;
+    const t = this._normalizeDegrees(e);
+    if (t === 0) return !0;
+    if (!((g = this.app) != null && g.renderer) || !this.originalTexture || !this.sprite)
+      return !1;
+    const i = window.PIXI, r = Math.round(this.originalTexture.width), a = Math.round(this.originalTexture.height);
+    if (r <= 0 || a <= 0) return !1;
+    const { width: o, height: n } = this.getRotatedBounds(r, a, t), l = t * Math.PI / 180, c = new i.Container(), d = new i.Sprite(this.originalTexture);
+    (P = (x = d.anchor) == null ? void 0 : x.set) == null || P.call(x, 0.5), d.x = o / 2, d.y = n / 2, d.rotation = l, c.addChild(d);
+    const h = i.RenderTexture.create({ width: o, height: n, resolution: 1 });
+    try {
+      this.app.renderer.render({
+        container: c,
+        target: h,
+        clear: !0,
+        clearColor: [0, 0, 0, 0]
+      });
+    } catch {
+      return h.destroy(!0), !1;
+    } finally {
+      c.removeChildren(), d.destroy({ children: !1, texture: !1, textureSource: !1 }), c.destroy({ children: !1 });
+    }
+    const u = this.originalTexture, p = Array.isArray(this.sprite.filters) ? [...this.sprite.filters] : null;
+    u && u !== this.baseTexture && u.destroy(!0), this.originalTexture = h, this._lastExportDimensions = null, this.app.stage.removeChild(this.sprite), this.sprite.destroy({ children: !1, texture: !1, textureSource: !1 });
+    const b = new i.Sprite(h);
+    return p != null && p.length && (b.filters = p), this.app.stage.addChild(b), this.sprite = b, this.fitScale = this.getFitScaleFor(h), this.zoom = 1, this.applyViewTransform({ keepCenter: !1 }), this.render(), this.emit("textureRotated", { width: o, height: n, degrees: t }), !0;
   }
   /**
    * Export the current image with filters applied.
@@ -346,108 +423,108 @@ class He extends W {
     var T;
     if (!((T = this.app) != null && T.renderer) || !this.originalTexture || !this.sprite)
       return null;
-    const n = window.PIXI, o = Math.round(this.originalTexture.width), l = Math.round(this.originalTexture.height);
-    if (o <= 0 || l <= 0)
+    const o = window.PIXI, n = Math.round(this.originalTexture.width), l = Math.round(this.originalTexture.height);
+    if (n <= 0 || l <= 0)
       return null;
     const c = this.sprite.width, d = this.sprite.height;
     if (c <= 0 || d <= 0)
       return null;
-    const h = c / o, u = h > 0 ? 1 / h : 1, f = [];
+    const h = c / n, u = h > 0 ? 1 / h : 1, p = [];
     if (Array.isArray(this.sprite.filters)) {
-      for (const y of this.sprite.filters)
-        if (y)
-          if (typeof y.createExportFilter == "function") {
-            const C = y.createExportFilter({ previewToNativeScale: u });
-            C && f.push(C);
+      for (const _ of this.sprite.filters)
+        if (_)
+          if (typeof _.createExportFilter == "function") {
+            const C = _.createExportFilter({ previewToNativeScale: u });
+            C && p.push(C);
           } else
-            f.push(y);
-    }
-    let _ = 0;
-    for (const y of f) {
-      const C = typeof y.getExportPadding == "function" ? Number(y.getExportPadding()) || 0 : typeof y._exportPadding == "number" ? y._exportPadding : typeof y.padding == "number" ? y.padding : 0;
-      C > 0 && (_ += C);
-    }
-    const g = Math.max(Math.ceil(_), 64), x = (y) => {
-      var k, w;
-      const C = Math.ceil(o + 2 * y), v = Math.ceil(l + 2 * y), M = new n.Container(), F = new n.Sprite(this.originalTexture);
-      F.x = y, F.y = y, F.scale.set(1, 1), f.length > 0 && (F.filters = f, F.filterArea = new n.Rectangle(0, 0, o, l)), M.addChild(F);
-      const I = n.RenderTexture.create({
+            p.push(_);
+    }
+    let b = 0;
+    for (const _ of p) {
+      const C = typeof _.getExportPadding == "function" ? Number(_.getExportPadding()) || 0 : typeof _._exportPadding == "number" ? _._exportPadding : typeof _.padding == "number" ? _.padding : 0;
+      C > 0 && (b += C);
+    }
+    const g = Math.max(Math.ceil(b), 64), x = (_) => {
+      var F, w;
+      const C = Math.ceil(n + 2 * _), M = Math.ceil(l + 2 * _), k = new o.Container(), A = new o.Sprite(this.originalTexture);
+      A.x = _, A.y = _, A.scale.set(1, 1), p.length > 0 && (A.filters = p, A.filterArea = new o.Rectangle(0, 0, n, l)), k.addChild(A);
+      const B = o.RenderTexture.create({
         width: C,
-        height: v,
+        height: M,
         resolution: 1
       });
       try {
         this.app.renderer.render({
-          container: M,
-          target: I,
+          container: k,
+          target: B,
           clear: !0,
           clearColor: [0, 0, 0, 0]
         });
-        const S = (w = (k = this.app.renderer.extract) == null ? void 0 : k.canvas) == null ? void 0 : w.call(k, I);
-        return S ? { canvas: S, width: C, height: v, margin: y } : null;
+        const S = (w = (F = this.app.renderer.extract) == null ? void 0 : F.canvas) == null ? void 0 : w.call(F, B);
+        return S ? { canvas: S, width: C, height: M, margin: _ } : null;
       } finally {
-        F.filters = null, M.removeChildren(), F.destroy({ children: !1, texture: !1, textureSource: !1 }), M.destroy({ children: !1 }), I.destroy(!0);
+        A.filters = null, k.removeChildren(), A.destroy({ children: !1, texture: !1, textureSource: !1 }), k.destroy({ children: !1 }), B.destroy(!0);
       }
-    }, A = (y, C, v) => {
-      const M = typeof y.getContext == "function" ? y.getContext("2d") : null;
-      if (!M) return null;
-      let F;
+    }, P = (_, C, M) => {
+      const k = typeof _.getContext == "function" ? _.getContext("2d") : null;
+      if (!k) return null;
+      let A;
       try {
-        F = M.getImageData(0, 0, C, v).data;
+        A = k.getImageData(0, 0, C, M).data;
       } catch {
         return null;
       }
-      const I = 1;
-      let k = C, w = v, S = -1, Z = -1;
-      const ce = 4, Be = C * ce;
-      for (let Y = 0; Y < v; Y++) {
-        const De = Y * Be;
-        for (let L = 0; L < C; L++)
-          F[De + L * ce + 3] >= I && (L < k && (k = L), L > S && (S = L), Y < w && (w = Y), Y > Z && (Z = Y));
+      const B = 1;
+      let F = C, w = M, S = -1, K = -1;
+      const de = 4, Ye = C * de;
+      for (let Y = 0; Y < M; Y++) {
+        const Ue = Y * Ye;
+        for (let D = 0; D < C; D++)
+          A[Ue + D * de + 3] >= B && (D < F && (F = D), D > S && (S = D), Y < w && (w = Y), Y > K && (K = Y));
       }
       if (S < 0) return null;
-      const Ye = S - k + 1, Oe = Z - w + 1, Le = k === 0 || w === 0 || S === C - 1 || Z === v - 1;
-      return { x: k, y: w, width: Ye, height: Oe, touchesEdge: Le };
+      const De = S - F + 1, Le = K - w + 1, Ve = F === 0 || w === 0 || S === C - 1 || K === M - 1;
+      return { x: F, y: w, width: De, height: Le, touchesEdge: Ve };
     };
-    let P = null;
+    let v = null;
     try {
-      let y = x(g);
-      if (!y)
+      let _ = x(g);
+      if (!_)
         return null;
-      let C = A(y.canvas, y.width, y.height);
+      let C = P(_.canvas, _.width, _.height);
       if (!C)
         return null;
-      if (C.touchesEdge && g < o && g < l) {
-        const k = Math.max(g * 4, 256), w = x(k);
+      if (C.touchesEdge && g < n && g < l) {
+        const F = Math.max(g * 4, 256), w = x(F);
         if (w) {
-          const S = A(w.canvas, w.width, w.height);
-          S && !S.touchesEdge ? (y = w, C = S) : (y = w, C = S ?? C);
+          const S = P(w.canvas, w.width, w.height);
+          S && !S.touchesEdge ? (_ = w, C = S) : (_ = w, C = S ?? C);
         }
       }
-      let v = C.width, M = C.height;
+      let M = C.width, k = C.height;
       if (i > 0) {
-        const k = Math.max(v, M);
-        let w = i / k;
-        r && (w = Math.min(1, w)), v = Math.max(1, Math.round(v * w)), M = Math.max(1, Math.round(M * w));
+        const F = Math.max(M, k);
+        let w = i / F;
+        r && (w = Math.min(1, w)), M = Math.max(1, Math.round(M * w)), k = Math.max(1, Math.round(k * w));
       }
-      if (a > 0 && v * M > a) {
-        const k = Math.sqrt(a / (v * M));
-        v = Math.max(1, Math.floor(v * k)), M = Math.max(1, Math.floor(M * k));
+      if (a > 0 && M * k > a) {
+        const F = Math.sqrt(a / (M * k));
+        M = Math.max(1, Math.floor(M * F)), k = Math.max(1, Math.floor(k * F));
       }
-      const F = document.createElement("canvas");
-      F.width = v, F.height = M;
-      const I = F.getContext("2d");
-      return I ? (I.drawImage(
-        y.canvas,
+      const A = document.createElement("canvas");
+      A.width = M, A.height = k;
+      const B = A.getContext("2d");
+      return B ? (B.drawImage(
+        _.canvas,
         C.x,
         C.y,
         C.width,
         C.height,
         0,
         0,
-        v,
-        M
-      ), P = F.toDataURL(`image/${e}`, t), this._lastExportDimensions = { width: v, height: M }, P || null) : null;
+        M,
+        k
+      ), v = A.toDataURL(`image/${e}`, t), this._lastExportDimensions = { width: M, height: k }, v || null) : null;
     } catch {
       return null;
     }
@@ -463,16 +540,16 @@ class He extends W {
    * @returns {{ width: number, height: number }}
    */
   getExportDimensions() {
-    var n;
+    var o;
     if (this._lastExportDimensions)
       return { ...this._lastExportDimensions };
     const e = this.originalTexture, t = Math.round((e == null ? void 0 : e.width) || 0), i = Math.round((e == null ? void 0 : e.height) || 0);
     let r = 0;
-    const a = (n = this.sprite) == null ? void 0 : n.filters;
+    const a = (o = this.sprite) == null ? void 0 : o.filters;
     if (Array.isArray(a))
-      for (const o of a) {
-        if (!o) continue;
-        const l = typeof o._exportPadding == "number" ? o._exportPadding : typeof o.padding == "number" ? o.padding : 0;
+      for (const n of a) {
+        if (!n) continue;
+        const l = typeof n._exportPadding == "number" ? n._exportPadding : typeof n.padding == "number" ? n.padding : 0;
         l > r && (r = l);
       }
     return {
@@ -489,8 +566,8 @@ class He extends W {
   async exportBlob(e = "png", t = 0.92) {
     const i = this.exportImage(e, t);
     if (!i) return null;
-    const a = await (await fetch(i)).blob(), n = this.getExportDimensions();
-    return { blob: a, width: n.width, height: n.height };
+    const a = await (await fetch(i)).blob(), o = this.getExportDimensions();
+    return { blob: a, width: o.width, height: o.height };
   }
   /**
    * Resize renderer to container
@@ -544,64 +621,64 @@ class He extends W {
     this.sprite = null, this.originalTexture = null, this.baseTexture = null, this._container = null, this.removeAllListeners();
   }
 }
-const Me = '<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>', Pe = '<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>', $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="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>', 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="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>', Ze = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M432 320v112H320M80 192V80h112M320 80h112v112M192 432H80V320"/></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="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>', 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="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>', Qe = '<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>', Je = '<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>', et = '<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>', tt = '<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>', it = '<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>', oe = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M368 368L144 144M368 144L144 368"/></svg>', Fe = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="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>', rt = '<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>', st = '<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>', 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="M416 128L192 384l-96-96"/></svg>', at = '<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>', nt = '<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>', ot = '<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>', he = '<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>', 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="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>', lt = '<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>', le = [
+const Pe = '<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>', Fe = '<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>', Ze = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="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>', Ke = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M432 320v112H320M80 192V80h112M320 80h112v112M192 432H80V320"/></svg>', Qe = '<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>', Je = '<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>', et = '<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>', tt = '<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>', it = '<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>', rt = '<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>', 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="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>', st = '<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>', 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="M368 368L144 144M368 144L144 368"/></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="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>', at = '<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 112l-64 64 64 64"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M112 176h176a112 112 0 110 224H160"/></svg>', ot = '<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="M336 112l64 64-64 64"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M400 176H224a112 112 0 100 224h128"/></svg>', nt = '<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>', lt = '<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>', 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="M416 128L192 384l-96-96"/></svg>', ct = '<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>', ht = '<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>', dt = '<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>', ue = '<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>', 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="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>', ut = '<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>', he = [
   {
     id: "adjust",
     name: "Adjust",
-    icon: Ge,
+    icon: Qe,
     registryCategories: ["adjust", "advanced"]
     // adjustment, adjustmentAdvanced, alpha, colorMatrix
   },
   {
     id: "blur",
     name: "Blur",
-    icon: Ke,
+    icon: Je,
     registryCategories: ["blur"]
   },
   {
     id: "color",
     name: "Color",
-    icon: Qe,
+    icon: et,
     registryCategories: ["color"]
   },
   {
     id: "effects",
     name: "Effects",
-    icon: Je,
+    icon: tt,
     registryCategories: ["effects"]
   },
   {
     id: "distortion",
     name: "Distortion",
-    icon: et,
+    icon: it,
     registryCategories: ["distortion"]
   },
   {
     id: "light",
     name: "Light",
-    icon: tt,
+    icon: rt,
     registryCategories: ["light"]
   },
   {
     id: "stylize",
     name: "Stylize",
-    icon: lt,
+    icon: ut,
     registryCategories: ["stylize"]
   },
   {
     id: "crop",
     name: "Crop",
-    icon: ke
+    icon: Ae
   }
-], ct = Object.fromEntries(
-  le.filter((s) => Array.isArray(s.registryCategories) && s.registryCategories.length > 0).map((s) => [s.id, s.registryCategories])
-), ht = Object.fromEntries(
-  le.filter((s) => Array.isArray(s.registryCategories)).flatMap((s) => s.registryCategories.map((e) => [e, s.id]))
+], pt = Object.fromEntries(
+  he.filter((s) => Array.isArray(s.registryCategories) && s.registryCategories.length > 0).map((s) => [s.id, s.registryCategories])
+), ft = Object.fromEntries(
+  he.filter((s) => Array.isArray(s.registryCategories)).flatMap((s) => s.registryCategories.map((e) => [e, s.id]))
 );
-function dt(s) {
-  return ct[s] || [s];
+function mt(s) {
+  return pt[s] || [s];
 }
-class ut extends W {
+class gt extends G {
   constructor(e, t) {
     super(), this.state = e, this.renderer = t, this.instances = {}, this._filterRegistry = null;
   }
@@ -636,11 +713,11 @@ class ut extends W {
    */
   getFiltersByCategory(e) {
     if (!this._filterRegistry) return [];
-    const t = dt(e), i = [], r = /* @__PURE__ */ new Set();
+    const t = mt(e), i = [], r = /* @__PURE__ */ new Set();
     for (const a of t) {
-      const n = this._filterRegistry.getFiltersByCategory(a) || [];
-      for (const o of n)
-        r.has(o.id) || (r.add(o.id), i.push(o));
+      const o = this._filterRegistry.getFiltersByCategory(a) || [];
+      for (const n of o)
+        r.has(n.id) || (r.add(n.id), i.push(n));
     }
     return i;
   }
@@ -685,12 +762,12 @@ class ut extends W {
     }
     const r = t.replace(/\[(\d+)\]/g, ".$1").split(".").filter(Boolean);
     let a = e;
-    for (let o = 0; o < r.length - 1; o++) {
-      const l = r[o];
+    for (let n = 0; n < r.length - 1; n++) {
+      const l = r[n];
       if (!(l in a) || (a = a[l], a == null)) return;
     }
-    const n = r[r.length - 1];
-    a[n] = i;
+    const o = r[r.length - 1];
+    a[o] = i;
   }
   /**
    * Initialize filter values from definition defaults.
@@ -704,8 +781,8 @@ class ut extends W {
     if (!t) return;
     const i = this.state.getFilterValues(e), r = new Set((t.controls || []).map((a) => a.id));
     if (t.defaultParams)
-      for (const [a, n] of Object.entries(t.defaultParams))
-        !r.has(a) && !(a in i) && this.state.setFilterValue(e, a, n);
+      for (const [a, o] of Object.entries(t.defaultParams))
+        !r.has(a) && !(a in i) && this.state.setFilterValue(e, a, o);
     t.controls && t.controls.forEach((a) => {
       a.id in i || this.state.setFilterValue(e, a.id, a.default);
     });
@@ -756,16 +833,16 @@ class ut extends W {
    * @returns {boolean} True if updated in-place, false if caller must recreate
    */
   updateValue(e, t, i) {
-    const r = this._normalizeValue(i), a = this.getFilterDef(e), n = a == null ? void 0 : a.controls.find((h) => h.id === t), o = !n && (t.includes("[") || t.includes("."));
-    o || this.state.setFilterValue(e, t, r);
+    const r = this._normalizeValue(i), a = this.getFilterDef(e), o = a == null ? void 0 : a.controls.find((h) => h.id === t), n = !o && (t.includes("[") || t.includes("."));
+    n || this.state.setFilterValue(e, t, r);
     const l = this.instances[e];
     if (!l) return !1;
-    const c = (n == null ? void 0 : n.property) || t;
+    const c = (o == null ? void 0 : o.property) || t;
     if (typeof l.updateUIParam == "function") {
-      if (l.updateUIParam(c, r), o && typeof l.getSerializableParams == "function") {
+      if (l.updateUIParam(c, r), n && typeof l.getSerializableParams == "function") {
         const h = l.getSerializableParams();
-        for (const [u, f] of Object.entries(h))
-          this.state.setFilterValue(e, u, f);
+        for (const [u, p] of Object.entries(h))
+          this.state.setFilterValue(e, u, p);
       }
       return !0;
     }
@@ -786,8 +863,8 @@ class ut extends W {
     if (!(!i || typeof i.updateUIParam != "function")) {
       if (i.updateUIParam(t, !0), typeof i.getSerializableParams == "function") {
         const r = i.getSerializableParams();
-        for (const [a, n] of Object.entries(r))
-          this.state.setFilterValue(e, a, n);
+        for (const [a, o] of Object.entries(r))
+          this.state.setFilterValue(e, a, o);
       }
       this.applyFilters(), this.emit("filterActionPerformed", { filterId: e, action: t });
     }
@@ -806,20 +883,20 @@ class ut extends W {
     const t = [], i = [];
     this.state.get("activeFilters").forEach((a) => {
       try {
-        const n = this.getFilterDef(a);
-        if (!n || !n.createFilter || typeof n.createFilter != "function")
+        const o = this.getFilterDef(a);
+        if (!o || !o.createFilter || typeof o.createFilter != "function")
           return;
-        const o = this.state.getFilterValues(a), l = n.defaultParams ? { ...n.defaultParams } : {};
-        n.controls && Array.isArray(n.controls) && n.controls.forEach((f) => {
-          const _ = f.property || f.id;
-          l[_] = o[f.id] ?? f.default;
+        const n = this.state.getFilterValues(a), l = o.defaultParams ? { ...o.defaultParams } : {};
+        o.controls && Array.isArray(o.controls) && o.controls.forEach((p) => {
+          const b = p.property || p.id;
+          l[b] = n[p.id] ?? p.default;
         });
-        const c = new Set((n.controls || []).map((f) => f.id));
-        for (const [f, _] of Object.entries(o))
-          c.has(f) || (l[f] = _);
+        const c = new Set((o.controls || []).map((p) => p.id));
+        for (const [p, b] of Object.entries(n))
+          c.has(p) || (l[p] = b);
         const d = this.renderer.sprite, h = this.renderer.originalTexture;
         l._sourceWidth = Math.round((h == null ? void 0 : h.width) || (d == null ? void 0 : d.width) || 0), l._sourceHeight = Math.round((h == null ? void 0 : h.height) || (d == null ? void 0 : d.height) || 0);
-        const u = n.createFilter(l);
+        const u = o.createFilter(l);
         u && (t.push(u), this.instances[a] = u);
       } catch {
         i.push(a);
@@ -856,7 +933,7 @@ class ut extends W {
     return this.instances[e] || null;
   }
 }
-const U = class U extends W {
+const U = class U extends G {
   constructor(e, t) {
     super(), this.state = e, this.renderer = t, this._overlayCanvas = null, this._isDragging = !1, this._dragStart = null, this._dragMode = null, this._startRect = null, this._hoverMode = null, this._lastAutoZoomCheck = 0, this.HANDLE_SIZE = 14, this.EDGE_HIT_PAD = 10, this._onPointerDown = this._handlePointerDown.bind(this), this._onPointerMove = this._handlePointerMove.bind(this), this._onPointerUp = this._handlePointerUp.bind(this);
   }
@@ -911,8 +988,8 @@ const U = class U extends W {
     if (!t || !i) return;
     const r = this.state.get("crop.shape"), a = { x: 0, y: 0, w: i.screen.width, h: i.screen.height };
     if (e.x = Math.max(a.x, Math.min(e.x, a.x + a.w - e.width)), e.y = Math.max(a.y, Math.min(e.y, a.y + a.h - e.height)), e.width = Math.min(e.width, a.w), e.height = Math.min(e.height, a.h), r !== "free" || this.state.get("crop.aspect") === "1:1") {
-      const n = Math.min(e.width, e.height);
-      e.width = n, e.height = n;
+      const o = Math.min(e.width, e.height);
+      e.width = o, e.height = o;
     }
     this.state.set("crop.rect", e);
   }
@@ -929,21 +1006,21 @@ const U = class U extends W {
    * @param {number} currentZoom - Current zoom level
    * @returns {number|null} Target zoom level, or null if no zoom needed
    */
-  static calcAutoZoom(e, t, i, r, a, n, o) {
-    if (!e || !r || !a || !n) return null;
+  static calcAutoZoom(e, t, i, r, a, o, n) {
+    if (!e || !r || !a || !o) return null;
     const l = e.width > t, c = e.height > i;
     if (!l && !c) return null;
     const d = U.AUTO_ZOOM_PADDING;
-    let h = o;
+    let h = n;
     if (l) {
-      const u = e.width / (d * r * n);
+      const u = e.width / (d * r * o);
       h = Math.min(h, u);
     }
     if (c) {
-      const u = e.height / (d * a * n);
+      const u = e.height / (d * a * o);
       h = Math.min(h, u);
     }
-    return h = Math.max(0.1, h), h >= o - 0.01 ? null : h;
+    return h = Math.max(0.1, h), h >= n - 0.01 ? null : h;
   }
   /**
    * Check if auto-zoom is needed and apply it (throttled).
@@ -975,43 +1052,43 @@ const U = class U extends W {
     if (!e) return;
     const t = this.renderer.app;
     if (!t) return;
-    const i = t.canvas, r = i.clientWidth, a = i.clientHeight, n = window.devicePixelRatio || 1;
-    (e.width !== Math.max(1, Math.floor(r * n)) || e.height !== Math.max(1, Math.floor(a * n))) && (e.width = Math.max(1, Math.floor(r * n)), e.height = Math.max(1, Math.floor(a * n)), e.style.width = r + "px", e.style.height = a + "px");
-    const o = e.getContext("2d");
-    if (!o) return;
-    o.setTransform(n, 0, 0, n, 0, 0), o.clearRect(0, 0, r, a), o.fillStyle = "rgba(0, 0, 0, 0.5)", o.fillRect(0, 0, r, a);
+    const i = t.canvas, r = i.clientWidth, a = i.clientHeight, o = window.devicePixelRatio || 1;
+    (e.width !== Math.max(1, Math.floor(r * o)) || e.height !== Math.max(1, Math.floor(a * o))) && (e.width = Math.max(1, Math.floor(r * o)), e.height = Math.max(1, Math.floor(a * o)), e.style.width = r + "px", e.style.height = a + "px");
+    const n = e.getContext("2d");
+    if (!n) return;
+    n.setTransform(o, 0, 0, o, 0, 0), n.clearRect(0, 0, r, a), n.fillStyle = "rgba(0, 0, 0, 0.5)", n.fillRect(0, 0, r, a);
     const l = this.state.get("crop.rect");
     if (!l) return;
     const c = this.state.get("crop.shape");
-    if (o.save(), c === "circle") {
-      const x = l.x + l.width / 2, A = l.y + l.height / 2, P = Math.min(l.width, l.height) / 2;
-      o.beginPath(), o.arc(x, A, P, 0, Math.PI * 2), o.clip();
+    if (n.save(), c === "circle") {
+      const x = l.x + l.width / 2, P = l.y + l.height / 2, v = Math.min(l.width, l.height) / 2;
+      n.beginPath(), n.arc(x, P, v, 0, Math.PI * 2), n.clip();
     } else
-      o.beginPath(), o.rect(l.x, l.y, l.width, l.height), o.clip();
-    o.clearRect(l.x, l.y, l.width, l.height), o.restore(), o.strokeStyle = "#ffffff", o.lineWidth = 2, o.setLineDash([5, 5]), c === "circle" ? (o.beginPath(), o.arc(
+      n.beginPath(), n.rect(l.x, l.y, l.width, l.height), n.clip();
+    n.clearRect(l.x, l.y, l.width, l.height), n.restore(), n.strokeStyle = "#ffffff", n.lineWidth = 2, n.setLineDash([5, 5]), c === "circle" ? (n.beginPath(), n.arc(
       l.x + l.width / 2,
       l.y + l.height / 2,
       Math.min(l.width, l.height) / 2,
       0,
       Math.PI * 2
-    ), o.stroke()) : o.strokeRect(l.x, l.y, l.width, l.height), o.setLineDash([]), o.strokeStyle = "rgba(255,255,255,0.3)", o.lineWidth = 1;
+    ), n.stroke()) : n.strokeRect(l.x, l.y, l.width, l.height), n.setLineDash([]), n.strokeStyle = "rgba(255,255,255,0.3)", n.lineWidth = 1;
     const d = l.width / 3, h = l.height / 3;
     for (let x = 1; x <= 2; x++)
-      o.beginPath(), o.moveTo(l.x + d * x, l.y), o.lineTo(l.x + d * x, l.y + l.height), o.stroke(), o.beginPath(), o.moveTo(l.x, l.y + h * x), o.lineTo(l.x + l.width, l.y + h * x), o.stroke();
-    const u = this.HANDLE_SIZE, f = [
+      n.beginPath(), n.moveTo(l.x + d * x, l.y), n.lineTo(l.x + d * x, l.y + l.height), n.stroke(), n.beginPath(), n.moveTo(l.x, l.y + h * x), n.lineTo(l.x + l.width, l.y + h * x), n.stroke();
+    const u = this.HANDLE_SIZE, p = [
       { x: l.x, y: l.y, m: "resize-nw" },
       { x: l.x + l.width, y: l.y, m: "resize-ne" },
       { x: l.x, y: l.y + l.height, m: "resize-sw" },
       { x: l.x + l.width, y: l.y + l.height, m: "resize-se" }
-    ], _ = [
+    ], b = [
       { x: l.x + l.width / 2, y: l.y, m: "n" },
       { x: l.x + l.width / 2, y: l.y + l.height, m: "s" },
       { x: l.x, y: l.y + l.height / 2, m: "w" },
       { x: l.x + l.width, y: l.y + l.height / 2, m: "e" }
-    ], g = [...f, ..._];
+    ], g = [...p, ...b];
     for (const x of g) {
-      const A = this._hoverMode === x.m, P = A ? u + 4 : u;
-      o.beginPath(), o.rect(x.x - P / 2, x.y - P / 2, P, P), o.fillStyle = A ? "#4da3ff" : "#ffffff", o.strokeStyle = "rgba(0,0,0,0.6)", o.lineWidth = 1, o.fill(), o.stroke();
+      const P = this._hoverMode === x.m, v = P ? u + 4 : u;
+      n.beginPath(), n.rect(x.x - v / 2, x.y - v / 2, v, v), n.fillStyle = P ? "#4da3ff" : "#ffffff", n.strokeStyle = "rgba(0,0,0,0.6)", n.lineWidth = 1, n.fill(), n.stroke();
     }
   }
   /**
@@ -1023,7 +1100,7 @@ const U = class U extends W {
   _hitHandle(e, t) {
     const i = this.state.get("crop.rect");
     if (!i) return null;
-    const r = (a, n, o, l, c) => Math.abs(a - o) <= c && Math.abs(n - l) <= c;
+    const r = (a, o, n, l, c) => Math.abs(a - n) <= c && Math.abs(o - l) <= c;
     return r(e, t, i.x, i.y, this.HANDLE_SIZE) ? "resize-nw" : r(e, t, i.x + i.width, i.y, this.HANDLE_SIZE) ? "resize-ne" : r(e, t, i.x, i.y + i.height, this.HANDLE_SIZE) ? "resize-sw" : r(e, t, i.x + i.width, i.y + i.height, this.HANDLE_SIZE) ? "resize-se" : Math.abs(t - i.y) <= this.EDGE_HIT_PAD && e >= i.x && e <= i.x + i.width ? "n" : Math.abs(t - (i.y + i.height)) <= this.EDGE_HIT_PAD && e >= i.x && e <= i.x + i.width ? "s" : Math.abs(e - i.x) <= this.EDGE_HIT_PAD && t >= i.y && t <= i.y + i.height ? "w" : Math.abs(e - (i.x + i.width)) <= this.EDGE_HIT_PAD && t >= i.y && t <= i.y + i.height ? "e" : e >= i.x && e <= i.x + i.width && t >= i.y && t <= i.y + i.height ? "move" : null;
   }
   /**
@@ -1049,16 +1126,16 @@ const U = class U extends W {
     }
     const r = this.state.get("crop.rect");
     if (!r) return;
-    const a = i.x - this._dragStart.x, n = i.y - this._dragStart.y;
+    const a = i.x - this._dragStart.x, o = i.y - this._dragStart.y;
     switch (this._dragMode) {
       case "move":
-        r.x = this._startRect.x + a, r.y = this._startRect.y + n;
+        r.x = this._startRect.x + a, r.y = this._startRect.y + o;
         break;
       case "n":
-        r.y = this._startRect.y + n, r.height = this._startRect.height - n;
+        r.y = this._startRect.y + o, r.height = this._startRect.height - o;
         break;
       case "s":
-        r.height = this._startRect.height + n;
+        r.height = this._startRect.height + o;
         break;
       case "w":
         r.x = this._startRect.x + a, r.width = this._startRect.width - a;
@@ -1067,19 +1144,19 @@ const U = class U extends W {
         r.width = this._startRect.width + a;
         break;
       case "resize-nw":
-        r.x = this._startRect.x + a, r.y = this._startRect.y + n, r.width = this._startRect.width - a, r.height = this._startRect.height - n;
+        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 + n, r.width = this._startRect.width + a, r.height = this._startRect.height - n;
+        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 + n;
+        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 + n;
+        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._dragMode !== "move" && this._checkAutoZoom(), this.constrainCropRect(), this.drawOverlay();
+    r.width = Math.max(50, r.width), r.height = Math.max(50, r.height), this.state.set("crop.rect", r), this.state.set("crop.dirty", !0), 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
@@ -1096,18 +1173,19 @@ const U = class U extends W {
     let i = this.state.get("crop.rect");
     if (!i) {
       this.state.get("crop.shape") === "circle" && this.state.set("crop.aspect", "1:1");
-      const n = this.state.get("crop.aspect"), o = this._getAspectRatio(n);
+      const o = this.state.get("crop.aspect"), n = this._getAspectRatio(o);
       let l, c;
-      if (o) {
-        const u = t.width * 0.9, f = t.height * 0.9;
-        u / f > o ? (c = f, l = c * o) : (l = u, c = l / o);
+      if (n) {
+        const u = t.width * 0.9, p = t.height * 0.9;
+        u / p > n ? (c = p, l = c * n) : (l = u, c = l / n);
       } else {
         const u = Math.min(e.screen.width, e.screen.height) * 0.7;
         l = u, c = u;
       }
       const d = t.x + (t.width - l) / 2, h = t.y + (t.height - c) / 2;
-      i = { x: d, y: h, width: l, height: c }, this.state.set("crop.rect", i), n !== "free" && this.constrainCropRect();
+      i = { x: d, y: h, width: l, height: c }, this.state.set("crop.rect", i), o !== "free" && this.constrainCropRect();
     }
+    this.state.set("crop.dirty", !1);
     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");
   }
@@ -1118,7 +1196,7 @@ const U = class U extends W {
     const e = this.renderer.app;
     if (!e) return;
     const t = e.stage;
-    if (t.off("pointerdown", this._onPointerDown), t.off("pointermove", this._onPointerMove), t.off("pointerup", this._onPointerUp), t.off("pointerupoutside", this._onPointerUp), t.eventMode = "auto", t.cursor = "default", this.state.set("crop.rect", null), this._overlayCanvas) {
+    if (t.off("pointerdown", this._onPointerDown), t.off("pointermove", this._onPointerMove), t.off("pointerup", this._onPointerUp), t.off("pointerupoutside", this._onPointerUp), t.eventMode = "auto", t.cursor = "default", this.state.set("crop.rect", null), this.state.set("crop.dirty", !1), this._overlayCanvas) {
       const i = this._overlayCanvas.getContext("2d");
       i == null || i.clearRect(0, 0, this._overlayCanvas.width, this._overlayCanvas.height);
     }
@@ -1131,34 +1209,34 @@ const U = class U extends W {
   apply() {
     const e = this.renderer.app, t = this.renderer.sprite, i = this.renderer.originalTexture, r = this.state.get("crop.rect");
     if (!r || !t || !e || !i) return null;
-    const a = window.PIXI, n = this.renderer.zoom, o = i.width / t.width, l = i.height / t.height, c = (r.x - t.x) * o, d = (r.y - t.y) * l;
-    let h = Math.round(Math.max(1, r.width * o)), u = Math.round(Math.max(1, r.height * l)), f = Math.round(c), _ = Math.round(d);
+    const a = window.PIXI, o = this.renderer.zoom, n = i.width / t.width, l = i.height / t.height, c = (r.x - t.x) * n, d = (r.y - t.y) * l;
+    let h = Math.round(Math.max(1, r.width * n)), u = Math.round(Math.max(1, r.height * l)), p = Math.round(c), b = Math.round(d);
     if (h <= 0 || u <= 0) return null;
     const g = new a.Container(), x = new a.Sprite(i);
     if (this.state.get("crop.shape") === "circle") {
-      const I = Math.round(Math.max(h, u)), k = f + h / 2, w = _ + u / 2;
-      f = Math.round(k - I / 2), _ = Math.round(w - I / 2), h = u = I;
+      const B = Math.round(Math.max(h, u)), F = p + h / 2, w = b + u / 2;
+      p = Math.round(F - B / 2), b = Math.round(w - B / 2), h = u = B;
       const S = new a.Graphics();
       typeof S.circle == "function" && typeof S.fill == "function" ? S.circle(h / 2, u / 2, h / 2).fill(16777215) : (S.beginFill(16777215, 1), S.drawCircle(h / 2, u / 2, h / 2), S.endFill()), x.mask = S, g.addChild(S);
     }
-    x.x = -f, x.y = -_, g.addChild(x);
-    const P = a.RenderTexture.create({ width: h, height: u });
+    x.x = -p, x.y = -b, g.addChild(x);
+    const v = a.RenderTexture.create({ width: h, height: u });
     e.renderer.render({
       container: g,
-      target: P,
+      target: v,
       clear: !0
     }), g.destroy({ children: !0 });
     const T = this.renderer.originalTexture;
-    T && T !== this.renderer.baseTexture && T.destroy(!0), this.renderer.originalTexture = P, e.stage.removeChild(t), t.destroy();
-    const N = new a.Sprite(P);
-    e.stage.addChild(N), this.renderer.sprite = N, this.renderer.fitScale = this.renderer.getFitScaleFor(P), this.renderer.setZoom(n, { keepCenter: !1 }), this.renderer.applyViewTransform(), this.renderer.render();
-    const y = this.state.get("crop.appliedRect"), v = y && Number.isFinite(y.x) && Number.isFinite(y.y) && Number.isFinite(y.width) && Number.isFinite(y.height) ? {
-      x: Math.round(y.x + f),
-      y: Math.round(y.y + _),
+    T && T !== this.renderer.baseTexture && T.destroy(!0), this.renderer.originalTexture = v, e.stage.removeChild(t), t.destroy();
+    const z = new a.Sprite(v);
+    e.stage.addChild(z), this.renderer.sprite = z, this.renderer.fitScale = this.renderer.getFitScaleFor(v), this.renderer.setZoom(o, { keepCenter: !1 }), this.renderer.applyViewTransform(), this.renderer.render();
+    const _ = this.state.get("crop.appliedRect"), M = _ && Number.isFinite(_.x) && Number.isFinite(_.y) && Number.isFinite(_.width) && Number.isFinite(_.height) ? {
+      x: Math.round(_.x + p),
+      y: Math.round(_.y + b),
       width: h,
       height: u
-    } : { x: f, y: _, width: h, height: u }, M = this.state.get("crop.shape") || "free", F = this.state.get("crop.aspect") || "free";
-    return this.disable(), this.state.set("crop.appliedRect", v), this.state.set("crop.appliedShape", M), this.state.set("crop.appliedAspect", F), this.emit("applied", { width: h, height: u }), { texture: P, preservedZoom: n };
+    } : { x: p, y: b, width: h, height: u }, k = this.state.get("crop.shape") || "free", A = this.state.get("crop.aspect") || "free";
+    return this.disable(), this.state.set("crop.appliedRect", M), this.state.set("crop.appliedShape", k), this.state.set("crop.appliedAspect", A), this.state.set("crop.dirty", !1), this.emit("applied", { width: h, height: u }), { texture: v, preservedZoom: o };
   }
   /**
    * Apply a crop from saved texture-pixel coordinates (for state rehydration).
@@ -1170,23 +1248,23 @@ const U = class U extends W {
   applyFromPixelRect(e, t = "free") {
     const i = this.renderer.app, r = this.renderer.sprite, a = this.renderer.originalTexture;
     if (!e || !r || !i || !a) return null;
-    const n = window.PIXI, o = this.renderer.zoom;
+    const o = window.PIXI, n = this.renderer.zoom;
     let l = Math.round(Math.max(1, e.width)), c = Math.round(Math.max(1, e.height)), d = Math.round(e.x), h = Math.round(e.y);
     if (l <= 0 || c <= 0) return null;
-    const u = new n.Container(), f = new n.Sprite(a);
+    const u = new o.Container(), p = new o.Sprite(a);
     if (t === "circle") {
-      const A = Math.round(Math.max(l, c)), P = d + l / 2, T = h + c / 2;
-      d = Math.round(P - A / 2), h = Math.round(T - A / 2), l = c = A;
-      const N = new n.Graphics();
-      typeof N.circle == "function" && typeof N.fill == "function" ? N.circle(l / 2, c / 2, l / 2).fill(16777215) : (N.beginFill(16777215, 1), N.drawCircle(l / 2, c / 2, l / 2), N.endFill()), f.mask = N, u.addChild(N);
-    }
-    f.x = -d, f.y = -h, u.addChild(f);
-    const _ = n.RenderTexture.create({ width: l, height: c });
-    i.renderer.render({ container: u, target: _, clear: !0 }), u.destroy({ children: !0 });
+      const P = Math.round(Math.max(l, c)), v = d + l / 2, T = h + c / 2;
+      d = Math.round(v - P / 2), h = Math.round(T - P / 2), l = c = P;
+      const z = new o.Graphics();
+      typeof z.circle == "function" && typeof z.fill == "function" ? z.circle(l / 2, c / 2, l / 2).fill(16777215) : (z.beginFill(16777215, 1), z.drawCircle(l / 2, c / 2, l / 2), z.endFill()), p.mask = z, u.addChild(z);
+    }
+    p.x = -d, p.y = -h, u.addChild(p);
+    const b = o.RenderTexture.create({ width: l, height: c });
+    i.renderer.render({ container: u, target: b, clear: !0 }), u.destroy({ children: !0 });
     const g = this.renderer.originalTexture;
-    g && g !== this.renderer.baseTexture && g.destroy(!0), this.renderer.originalTexture = _, i.stage.removeChild(r), r.destroy();
-    const x = new n.Sprite(_);
-    return i.stage.addChild(x), this.renderer.sprite = x, this.renderer.fitScale = this.renderer.getFitScaleFor(_), this.renderer.setZoom(o, { keepCenter: !1 }), this.renderer.applyViewTransform(), this.renderer.render(), { texture: _, preservedZoom: o };
+    g && g !== this.renderer.baseTexture && g.destroy(!0), this.renderer.originalTexture = b, i.stage.removeChild(r), r.destroy();
+    const x = new o.Sprite(b);
+    return i.stage.addChild(x), this.renderer.sprite = x, this.renderer.fitScale = this.renderer.getFitScaleFor(b), this.renderer.setZoom(n, { keepCenter: !1 }), this.renderer.applyViewTransform(), this.renderer.render(), { texture: b, preservedZoom: n };
   }
   /**
    * Cancel crop
@@ -1199,7 +1277,7 @@ const U = class U extends W {
    * @param {'free'|'square'|'circle'} shape
    */
   setShape(e) {
-    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());
+    this.state.get("lockCropShape") || (this.state.set("crop.shape", e), this.state.set("crop.dirty", !0), (e === "circle" || e === "square") && this.state.set("crop.aspect", "1:1"), this.applyAspectRatio(), this.constrainCropRect(), this.drawOverlay());
   }
   /**
    * Set aspect ratio
@@ -1211,19 +1289,19 @@ const U = class U extends W {
       if (this.state.get("lockCropShape")) return;
       this.state.set("crop.shape", "free");
     }
-    this.state.set("crop.aspect", e), this.applyAspectRatio(), this.constrainCropRect(), this.drawOverlay();
+    this.state.set("crop.aspect", e), this.state.set("crop.dirty", !0), this.applyAspectRatio(), this.constrainCropRect(), this.drawOverlay();
   }
 };
 /**
  * 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.
  */
-J(U, "AUTO_ZOOM_PADDING", 1.1), /**
+ie(U, "AUTO_ZOOM_PADDING", 1.1), /**
  * Minimum interval (ms) between auto-zoom adjustments during drag.
  */
-J(U, "AUTO_ZOOM_THROTTLE_MS", 100);
-let ae = U;
-class pt {
+ie(U, "AUTO_ZOOM_THROTTLE_MS", 100);
+let le = U;
+class bt {
   /**
    * Create a new RemoveBgManager
    * @param {Object} options
@@ -1248,7 +1326,7 @@ class pt {
   async removeBackground(e, t = {}) {
     const i = typeof e == "string" ? await this._dataUrlToBlob(e) : e, r = new FormData();
     r.append("file", i, "image.png"), r.append("tier", t.tier || "balanced"), t.model && r.append("model", t.model), t.alpha_matting && (r.append("alpha_matting", "true"), r.append("alpha_f", String(t.alpha_f ?? 10)), r.append("alpha_fr", String(t.alpha_fr ?? 15)), r.append("alpha_erode_size", String(t.alpha_erode_size ?? 10)));
-    let a, n;
+    let a, o;
     try {
       a = await fetch(this._endpoint, {
         method: "POST",
@@ -1257,7 +1335,7 @@ class pt {
         // For Sanctum auth
       });
     } catch (c) {
-      n = c;
+      o = c;
     }
     if ((!a || !a.ok) && this._fallbackEndpoint)
       try {
@@ -1266,10 +1344,10 @@ class pt {
           body: r
         });
       } catch (c) {
-        n || (n = c);
+        o || (o = c);
       }
     if (!a)
-      throw n || 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 {
@@ -1279,9 +1357,9 @@ class pt {
       }
       throw new Error(c);
     }
-    const o = await a.blob();
+    const n = await a.blob();
     return {
-      dataUrl: await this._blobToDataUrl(o),
+      dataUrl: await this._blobToDataUrl(n),
       model: a.headers.get("X-Model-Used") || "unknown",
       processMs: a.headers.get("X-Process-Ms") || "0"
     };
@@ -1293,10 +1371,10 @@ class pt {
    */
   async _dataUrlToBlob(e) {
     if (e.startsWith("data:")) {
-      const [i, r] = e.split(","), a = i.match(/:(.*?);/), n = a ? a[1] : "image/png", o = atob(r), l = new Uint8Array(o.length);
-      for (let c = 0; c < o.length; c++)
-        l[c] = o.charCodeAt(c);
-      return new Blob([l], { type: n });
+      const [i, r] = e.split(","), a = i.match(/:(.*?);/), o = a ? a[1] : "image/png", n = atob(r), l = new Uint8Array(n.length);
+      for (let c = 0; c < n.length; c++)
+        l[c] = n.charCodeAt(c);
+      return new Blob([l], { type: o });
     }
     return (await fetch(e)).blob();
   }
@@ -1333,7 +1411,7 @@ class pt {
     }
   }
 }
-function p(s, e = {}, ...t) {
+function f(s, e = {}, ...t) {
   const i = document.createElement(s);
   for (const [r, a] of Object.entries(e))
     if (a != null)
@@ -1342,24 +1420,24 @@ function p(s, e = {}, ...t) {
       else if (r === "style" && typeof a == "object")
         Object.assign(i.style, a);
       else if (r.startsWith("on") && typeof a == "function") {
-        const n = r.slice(2).toLowerCase();
-        i.addEventListener(n, a);
+        const o = r.slice(2).toLowerCase();
+        i.addEventListener(o, a);
       } else r === "dataset" && typeof a == "object" ? Object.assign(i.dataset, a) : i.setAttribute(r, a);
   for (const r of t)
     typeof r == "string" ? i.appendChild(document.createTextNode(r)) : r instanceof HTMLElement && i.appendChild(r);
   return i;
 }
-function Ae({ id: s, label: e, min: t = 0, max: i = 1, step: r = 0.01, value: a = 0.5, onChange: n }) {
-  const o = s.includes("-") ? s.split("-").slice(1).join("-") : s, l = p("div", {
+function ze({ id: s, label: e, min: t = 0, max: i = 1, step: r = 0.01, value: a = 0.5, onChange: o }) {
+  const n = s.includes("-") ? s.split("-").slice(1).join("-") : s, l = f("div", {
     className: "slider-control slider-wrapper",
-    "data-control": o,
-    "data-testid": `slider-${o}`
-  }), c = p(
+    "data-control": n,
+    "data-testid": `slider-${n}`
+  }), c = f(
     "div",
     { className: "slider-header" },
-    p("label", { for: s, className: "slider-label" }, e),
-    p("span", { className: "slider-value", id: `${s}-value` }, ee(a))
-  ), d = p("input", {
+    f("label", { for: s, className: "slider-label" }, e),
+    f("span", { className: "slider-value", id: `${s}-value` }, re(a))
+  ), d = f("input", {
     type: "range",
     id: s,
     className: "slider-input",
@@ -1368,56 +1446,56 @@ function Ae({ id: s, label: e, min: t = 0, max: i = 1, step: r = 0.01, value: a
     step: String(r),
     value: String(a),
     onInput: (h) => {
-      const u = parseFloat(h.target.value), f = l.querySelector(".slider-value");
-      f && (f.textContent = ee(u)), n == null || n(u);
+      const u = parseFloat(h.target.value), p = l.querySelector(".slider-value");
+      p && (p.textContent = re(u)), o == null || o(u);
     }
   });
   return l.appendChild(c), l.appendChild(d), l.setValue = (h) => {
     d.value = String(h);
     const u = l.querySelector(".slider-value");
-    u && (u.textContent = ee(h));
+    u && (u.textContent = re(h));
   }, l;
 }
-function ee(s) {
+function re(s) {
   return Number.isInteger(s) ? String(s) : s.toFixed(2);
 }
-function ze({ id: s, label: e, checked: t = !1, onChange: i }) {
-  const r = p("div", { className: "toggle-control" }), a = p("label", { className: "toggle-label", for: s }, e), n = p("input", {
+function Re({ id: s, label: e, checked: t = !1, onChange: i }) {
+  const r = f("div", { className: "toggle-control" }), a = f("label", { className: "toggle-label", for: s }, e), o = f("input", {
     type: "checkbox",
     id: s,
     className: "toggle-input",
     checked: t ? "checked" : void 0,
     onChange: (c) => i == null ? void 0 : i(c.target.checked)
-  }), o = p("div", {
+  }), n = f("div", {
     className: "toggle-switch",
     onClick: (c) => {
-      c.target !== n && (n.checked = !n.checked, i == null || i(n.checked));
+      c.target !== o && (o.checked = !o.checked, i == null || i(o.checked));
     }
-  }), l = p("span", { className: "toggle-slider" });
-  return o.appendChild(n), o.appendChild(l), r.appendChild(a), r.appendChild(o), r.setChecked = (c) => {
-    n.checked = c;
+  }), l = f("span", { className: "toggle-slider" });
+  return n.appendChild(o), n.appendChild(l), r.appendChild(a), r.appendChild(n), r.setChecked = (c) => {
+    o.checked = c;
   }, r;
 }
-function Ne({ id: s, label: e, value: t = "#000000", onChange: i }) {
-  const r = p("div", { className: "color-control" }), a = p("label", { className: "color-label", for: s }, e), n = p("input", {
+function Te({ id: s, label: e, value: t = "#000000", onChange: i }) {
+  const r = f("div", { className: "color-control" }), a = f("label", { className: "color-label", for: s }, e), o = f("input", {
     type: "color",
     id: s,
     className: "color-input",
     value: t,
-    onInput: (o) => i == null ? void 0 : i(o.target.value)
+    onInput: (n) => i == null ? void 0 : i(n.target.value)
   });
-  return r.appendChild(a), r.appendChild(n), r.setValue = (o) => {
-    n.value = o;
+  return r.appendChild(a), r.appendChild(o), r.setValue = (n) => {
+    o.value = n;
   }, r;
 }
-function Re({ id: s, label: e, value: t = "", placeholder: i = "", onCommit: r }) {
-  const a = p("div", {
+function Ee({ id: s, label: e, value: t = "", placeholder: i = "", onCommit: r }) {
+  const a = f("div", {
     className: "text-control",
     "data-control": s,
     "data-testid": `text-${s}`
-  }), n = p("label", { className: "text-label", for: s }, e);
-  let o = t;
-  const l = p("input", {
+  }), o = f("label", { className: "text-label", for: s }, e);
+  let n = t;
+  const l = f("input", {
     type: "text",
     id: s,
     className: "text-input",
@@ -1430,74 +1508,74 @@ function Re({ id: s, label: e, value: t = "", placeholder: i = "", onCommit: r }
   });
   function c() {
     const d = l.value;
-    d !== o && (o = d, r == null || r(d));
+    d !== n && (n = d, r == null || r(d));
   }
-  return a.appendChild(n), a.appendChild(l), a.setValue = (d) => {
+  return a.appendChild(o), a.appendChild(l), a.setValue = (d) => {
     const h = d == null ? "" : String(d);
-    l.value = h, o = h;
+    l.value = h, n = h;
   }, a;
 }
-function Te({ id: s, label: e, options: t = [], value: i, onChange: r }) {
-  const a = p("div", { className: "select-control" }), n = p("label", { className: "select-label", for: s }, e), o = p("select", {
+function Ie({ id: s, label: e, options: t = [], value: i, onChange: r }) {
+  const a = f("div", { className: "select-control" }), o = f("label", { className: "select-label", for: s }, e), n = f("select", {
     id: s,
     className: "select-input",
     onChange: (l) => r == null ? void 0 : r(l.target.value)
   });
   for (const l of t) {
-    const c = p("option", { value: l.value }, l.label);
-    l.value === i && (c.selected = !0), o.appendChild(c);
+    const c = f("option", { value: l.value }, l.label);
+    l.value === i && (c.selected = !0), n.appendChild(c);
   }
-  return a.appendChild(n), a.appendChild(o), a.setValue = (l) => {
-    o.value = l;
+  return a.appendChild(o), a.appendChild(n), a.setValue = (l) => {
+    n.value = l;
   }, a;
 }
-function O({ label: s, className: e = "", onClick: t, icon: i = null, disabled: r = !1 }) {
-  const a = p("button", {
+function E({ label: s, className: e = "", onClick: t, icon: i = null, disabled: r = !1 }) {
+  const a = f("button", {
     type: "button",
     className: `btn ${e}`.trim(),
     onClick: t,
     disabled: r ? "disabled" : void 0
   });
   if (i) {
-    const n = p("span", { className: "btn-icon" });
-    n.innerHTML = i;
-    const o = n.querySelector("svg");
-    o && o.setAttribute("aria-hidden", "true"), a.appendChild(n);
+    const o = f("span", { className: "btn-icon" });
+    o.innerHTML = i;
+    const n = o.querySelector("svg");
+    n && n.setAttribute("aria-hidden", "true"), a.appendChild(o);
   }
   return s && a.appendChild(document.createTextNode(s)), a;
 }
-function z({ icon: s, title: e, className: t = "", onClick: i, disabled: r = !1, testId: a = null, ariaLabel: n = null }) {
-  const o = {
+function N({ icon: s, title: e, className: t = "", onClick: i, disabled: r = !1, testId: a = null, ariaLabel: o = null }) {
+  const n = {
     type: "button",
     className: `icon-btn ${t}`.trim(),
     title: e,
-    "aria-label": n || e,
+    "aria-label": o || e,
     onClick: i,
     disabled: r ? "disabled" : void 0
   };
-  a && (o.dataset = { testid: a });
-  const l = p("button", o);
+  a && (n.dataset = { testid: a });
+  const l = f("button", n);
   l.innerHTML = s;
   const c = l.querySelector("svg");
   return c && c.setAttribute("aria-hidden", "true"), l;
 }
-function ne({ label: s, icon: e, active: t = !1, onClick: i }) {
-  const r = p("button", {
+function ee({ label: s, icon: e, active: t = !1, onClick: i }) {
+  const r = f("button", {
     type: "button",
     className: `chip ${t ? "active" : ""}`.trim(),
     onClick: i
   });
   if (e) {
-    const a = p("span", { className: "chip-icon" });
+    const a = f("span", { className: "chip-icon" });
     a.innerHTML = e;
-    const n = a.querySelector("svg");
-    n && n.setAttribute("aria-hidden", "true"), r.appendChild(a);
+    const o = a.querySelector("svg");
+    o && o.setAttribute("aria-hidden", "true"), r.appendChild(a);
   }
-  return r.appendChild(p("span", { className: "chip-label" }, s)), r.setActive = (a) => {
+  return r.appendChild(f("span", { className: "chip-label" }, s)), r.setActive = (a) => {
     r.classList.toggle("active", a);
   }, r;
 }
-class ft {
+class yt {
   constructor(e, t) {
     this.state = e, this.editor = t, this.element = null, this._unsubscribers = [];
   }
@@ -1506,9 +1584,9 @@ class ft {
    * @returns {HTMLElement}
    */
   render() {
-    this.element = p("div", { className: "editor-toolbar" });
-    const e = p("div", { className: "toolbar-section toolbar-left" }), t = z({
-      icon: st,
+    this.element = f("div", { className: "editor-toolbar" });
+    const e = f("div", { className: "toolbar-section toolbar-left" }), t = N({
+      icon: lt,
       title: "Open Image",
       className: "toolbar-btn",
       testId: "btn-open-image",
@@ -1516,8 +1594,8 @@ class ft {
       onClick: () => this.editor.openFilePicker()
     });
     e.appendChild(t);
-    const i = p("div", { className: "toolbar-section toolbar-center" }), r = z({
-      icon: We,
+    const i = f("div", { className: "toolbar-section toolbar-center" }), r = N({
+      icon: Ge,
       title: "Zoom Out",
       className: "toolbar-btn",
       testId: "btn-zoom-out",
@@ -1527,14 +1605,14 @@ class ft {
         this.editor.setZoom(h - 0.25);
       }
     });
-    this._zoomLabel = p("span", {
+    this._zoomLabel = f("span", {
       className: "zoom-label",
       "aria-live": "polite",
       "aria-atomic": "true",
       role: "status"
     }, "100%");
-    const a = z({
-      icon: $e,
+    const a = N({
+      icon: Ze,
       title: "Zoom In",
       className: "toolbar-btn",
       testId: "btn-zoom-in",
@@ -1543,25 +1621,25 @@ class ft {
         const h = this.state.get("zoom");
         this.editor.setZoom(h + 0.25);
       }
-    }), n = z({
-      icon: Ze,
+    }), o = N({
+      icon: Ke,
       title: "Fit to Screen",
       className: "toolbar-btn",
       testId: "btn-fit-screen",
       ariaLabel: "Fit to screen",
       onClick: () => this.editor.fitToScreen()
     });
-    i.appendChild(r), i.appendChild(this._zoomLabel), i.appendChild(a), i.appendChild(n);
-    const o = p("div", { className: "toolbar-section toolbar-right" });
-    this._themeBtn = z({
-      icon: this.state.get("isDarkMode") ? he : de,
+    i.appendChild(r), i.appendChild(this._zoomLabel), i.appendChild(a), i.appendChild(o);
+    const n = f("div", { className: "toolbar-section toolbar-right" });
+    this._themeBtn = N({
+      icon: this.state.get("isDarkMode") ? ue : pe,
       title: "Toggle Theme",
       className: "toolbar-btn toolbar-btn-theme",
       testId: "btn-toggle-theme",
       ariaLabel: "Toggle theme",
       onClick: () => this.editor.toggleTheme()
-    }), this._cropBtn = z({
-      icon: ke,
+    }), this._cropBtn = N({
+      icon: Ae,
       title: "Crop",
       className: "toolbar-btn toolbar-btn-crop",
       testId: "btn-crop",
@@ -1570,29 +1648,29 @@ class ft {
         this.state.get("mode") === "crop" ? this.editor.setMode("filters") : this.editor.setMode("crop");
       }
     });
-    const l = z({
-      icon: Fe,
+    const l = N({
+      icon: Ne,
       title: "Reset All",
       className: "toolbar-btn",
       testId: "btn-reset-all",
       ariaLabel: "Reset all changes",
       onClick: () => this.editor.resetAll()
-    }), c = z({
-      icon: it,
+    }), c = N({
+      icon: st,
       title: "Save Image",
       className: "toolbar-btn toolbar-btn-primary",
       testId: "btn-save-edit",
       ariaLabel: "Save image",
       onClick: () => this.editor.save()
-    }), d = z({
-      icon: oe,
+    }), d = N({
+      icon: ce,
       title: "Close",
       className: "toolbar-btn",
       testId: "btn-cancel-edit",
       ariaLabel: "Close editor",
       onClick: () => this.editor.close()
     });
-    return o.appendChild(this._themeBtn), o.appendChild(this._cropBtn), o.appendChild(l), o.appendChild(c), o.appendChild(d), this.element.appendChild(e), this.element.appendChild(i), this.element.appendChild(o), this._subscribeToState(), this.element;
+    return n.appendChild(this._themeBtn), n.appendChild(this._cropBtn), n.appendChild(l), n.appendChild(c), n.appendChild(d), this.element.appendChild(e), this.element.appendChild(i), this.element.appendChild(n), this._subscribeToState(), this.element;
   }
   /**
    * Subscribe to state changes
@@ -1603,7 +1681,7 @@ class ft {
     });
     this._unsubscribers.push(e);
     const t = this.state.on("change:isDarkMode", ({ value: r }) => {
-      this._themeBtn.innerHTML = r ? he : de;
+      this._themeBtn.innerHTML = r ? ue : pe;
     });
     this._unsubscribers.push(t);
     const i = this.state.on("change:mode", ({ value: r }) => {
@@ -1626,8 +1704,8 @@ class ft {
     this._unsubscribers.forEach((t) => t()), this._unsubscribers = [], (e = this.element) == null || e.remove(), this.element = null;
   }
 }
-const G = le;
-class mt {
+const Q = he;
+class _t {
   constructor(e, t) {
     this.state = e, this.editor = t, this.element = null, this._chips = /* @__PURE__ */ new Map(), this._scrollIndex = 0, this._unsubscribers = [];
   }
@@ -1637,35 +1715,35 @@ class mt {
    * @returns {HTMLElement}
    */
   render(e) {
-    this._onSelect = e, this.element = p("div", {
+    this._onSelect = e, this.element = f("div", {
       className: "category-carousel-container",
       "data-testid": "category-carousel"
-    }), this._leftBtn = z({
-      icon: Me,
+    }), this._leftBtn = N({
+      icon: Pe,
       title: "Previous categories",
       className: "carousel-nav carousel-nav-left",
       onClick: () => this._scrollLeft()
-    }), this._carousel = p("div", { className: "category-carousel" }), G.forEach((i) => {
-      const r = ne({
+    }), this._carousel = f("div", { className: "category-carousel" }), Q.forEach((i) => {
+      const r = ee({
         label: i.name,
         icon: i.icon,
         active: this.state.get("selectedCategory") === i.id,
         onClick: () => this._selectCategory(i.id)
       });
       r.dataset.categoryId = i.id, r.dataset.category = i.id, r.dataset.testid = `category-${i.id}`, this._chips.set(i.id, r), this._carousel.appendChild(r);
-    }), this._rightBtn = z({
-      icon: Pe,
+    }), this._rightBtn = N({
+      icon: Fe,
       title: "Next categories",
       className: "carousel-nav carousel-nav-right",
       onClick: () => this._scrollRight()
-    }), this._pagination = p("div", {
+    }), this._pagination = f("div", {
       className: "carousel-pagination",
       role: "tablist",
       "aria-label": "Category pages"
     });
-    const t = Math.ceil(G.length / 3);
+    const t = Math.ceil(Q.length / 3);
     for (let i = 0; i < t; i++) {
-      const r = p("button", {
+      const r = f("button", {
         type: "button",
         className: `pagination-dot ${i === 0 ? "active" : ""}`,
         role: "tab",
@@ -1710,7 +1788,7 @@ class mt {
    * Scroll carousel right
    */
   _scrollRight() {
-    this._scrollIndex < G.length - 3 && (this._scrollIndex++, this._scrollCarousel());
+    this._scrollIndex < Q.length - 3 && (this._scrollIndex++, this._scrollCarousel());
   }
   /**
    * Scroll to a specific page
@@ -1737,7 +1815,7 @@ class mt {
    * Update navigation button states
    */
   _updateNavButtons() {
-    this._leftBtn && (this._leftBtn.disabled = this._scrollIndex === 0), this._rightBtn && (this._rightBtn.disabled = this._scrollIndex >= G.length - 3);
+    this._leftBtn && (this._leftBtn.disabled = this._scrollIndex === 0), this._rightBtn && (this._rightBtn.disabled = this._scrollIndex >= Q.length - 3);
   }
   /**
    * Update pagination dot states
@@ -1766,7 +1844,7 @@ class mt {
     this._unsubscribers.forEach((t) => t()), this._unsubscribers = [], this._chips.clear(), (e = this.element) == null || e.remove(), this.element = null;
   }
 }
-class gt {
+class xt {
   constructor(e, t) {
     this.state = e, this.filterManager = t, this.element = null, this._filterCards = /* @__PURE__ */ new Map(), this._scrollIndex = 0, this._unsubscribers = [], this._onToggle = null, this._onSelect = null;
   }
@@ -1776,13 +1854,13 @@ class gt {
    * @returns {HTMLElement}
    */
   render({ onToggle: e, onSelect: t }) {
-    return this._onToggle = e, this._onSelect = t, this.element = p("div", { className: "filter-carousel-container" }), this._leftBtn = z({
-      icon: Me,
+    return this._onToggle = e, this._onSelect = t, this.element = f("div", { className: "filter-carousel-container" }), this._leftBtn = N({
+      icon: Pe,
       title: "Previous filters",
       className: "carousel-nav carousel-nav-left",
       onClick: () => this._scrollLeft()
-    }), this._carousel = p("div", { className: "filter-carousel" }), this._rightBtn = z({
-      icon: Pe,
+    }), this._carousel = f("div", { className: "filter-carousel" }), this._rightBtn = N({
+      icon: Fe,
       title: "Next filters",
       className: "carousel-nav carousel-nav-right",
       onClick: () => this._scrollRight()
@@ -1814,11 +1892,11 @@ class gt {
     if (e === "crop") return;
     const t = this.filterManager.getFiltersByCategory(e), i = this.state.get("activeFilters"), r = this.state.get("selectedFilter");
     t.forEach((a) => {
-      const n = this._createFilterCard(a, {
+      const o = this._createFilterCard(a, {
         isActive: i.has(a.id),
         isSelected: r === a.id
       });
-      this._filterCards.set(a.id, n), this._carousel.appendChild(n);
+      this._filterCards.set(a.id, o), this._carousel.appendChild(o);
     }), this._updateNavButtons();
   }
   /**
@@ -1828,14 +1906,14 @@ class gt {
    * @returns {HTMLElement}
    */
   _createFilterCard(e, { isActive: t, isSelected: i }) {
-    const r = p("div", {
+    const r = f("div", {
       className: `filter-card ${t ? "active" : ""} ${i ? "selected" : ""}`,
       "data-filter": e.id,
       "data-testid": `filter-${e.id}`,
       onClick: () => this._handleCardClick(e.id)
-    }), a = p("div", { className: "filter-preview" }), n = p("span", { className: "filter-preview-text" }, e.name.charAt(0));
-    a.appendChild(n);
-    const o = p("span", { className: "filter-name", title: e.name }, e.name), l = p("button", {
+    }), a = f("div", { className: "filter-preview" }), o = f("span", { className: "filter-preview-text" }, e.name.charAt(0));
+    a.appendChild(o);
+    const n = f("span", { className: "filter-name", title: e.name }, e.name), l = f("button", {
       className: `filter-toggle ${t ? "active" : ""}`,
       onClick: (c) => {
         var u;
@@ -1844,7 +1922,7 @@ class gt {
         this._handleToggle(e.id, h), h && (this.state.set("selectedFilter", e.id), (u = this._onSelect) == null || u.call(this, e.id));
       }
     });
-    return l.innerHTML = t ? se : "", r.appendChild(a), r.appendChild(o), r.appendChild(l), r._toggle = l, r._isActive = t, r;
+    return l.innerHTML = t ? ne : "", r.appendChild(a), r.appendChild(n), r.appendChild(l), r._toggle = l, r._isActive = t, r;
   }
   /**
    * Handle filter card click (select)
@@ -1870,7 +1948,7 @@ class gt {
     const e = this.state.get("activeFilters");
     this._filterCards.forEach((t, i) => {
       const r = e.has(i);
-      t.classList.toggle("active", r), t._toggle.classList.toggle("active", r), t._toggle.innerHTML = r ? se : "", t._isActive = r;
+      t.classList.toggle("active", r), t._toggle.classList.toggle("active", r), t._toggle.innerHTML = r ? ne : "", t._isActive = r;
     });
   }
   /**
@@ -1923,7 +2001,7 @@ class gt {
     this._unsubscribers.forEach((t) => t()), this._unsubscribers = [], this._filterCards.clear(), (e = this.element) == null || e.remove(), this.element = null;
   }
 }
-class bt {
+class Ct {
   constructor(e, t) {
     this.state = e, this.filterManager = t, this.element = null, this._controls = /* @__PURE__ */ new Map(), this._onChange = null, this._onReset = null, this._onAction = null, this._unsubscribers = [];
   }
@@ -1933,7 +2011,7 @@ class bt {
    * @returns {HTMLElement}
    */
   render({ onChange: e, onReset: t, onAction: i }) {
-    return this._onChange = e, this._onReset = t, this._onAction = i, this.element = p("div", { className: "filter-adjustments" }), this._subscribeToState(), this._renderControls(), this.element;
+    return this._onChange = e, this._onReset = t, this._onAction = i, this.element = f("div", { className: "filter-adjustments" }), this._subscribeToState(), this._renderControls(), this.element;
   }
   /**
    * Subscribe to state changes
@@ -1960,36 +2038,36 @@ class bt {
     const e = this.state.get("selectedFilter");
     if (!e) {
       this.element.appendChild(
-        p("div", { className: "no-filter-selected" }, "Select a filter to adjust")
+        f("div", { className: "no-filter-selected" }, "Select a filter to adjust")
       );
       return;
     }
     const t = this.filterManager.getFilterDef(e);
     if (!t) {
       this.element.appendChild(
-        p("div", { className: "no-filter-selected" }, "Filter not found")
+        f("div", { className: "no-filter-selected" }, "Filter not found")
       );
       return;
     }
-    const i = p("div", { className: "adjustments-header" });
-    i.appendChild(p("span", { className: "adjustments-title" }, t.name)), i.appendChild(O({
+    const i = f("div", { className: "adjustments-header" });
+    i.appendChild(f("span", { className: "adjustments-title" }, t.name)), i.appendChild(E({
       label: "Reset",
       className: "btn-text",
       onClick: () => this._handleReset(e)
     })), this.element.appendChild(i);
-    const r = p("div", { className: "adjustments-grid" }), a = this.state.getFilterValues(e);
-    (t.controls || []).forEach((o) => {
-      const l = a[o.id] ?? o.default, c = this._createControl(e, o, l);
-      c && (this._controls.set(o.id, c), r.appendChild(c));
+    const r = f("div", { className: "adjustments-grid" }), a = this.state.getFilterValues(e);
+    (t.controls || []).forEach((n) => {
+      const l = a[n.id] ?? n.default, c = this._createControl(e, n, l);
+      c && (this._controls.set(n.id, c), r.appendChild(c));
     });
-    const n = this.filterManager.getInstance(e);
-    if (n && typeof n.getDynamicControls == "function") {
-      let o = [];
+    const o = this.filterManager.getInstance(e);
+    if (o && typeof o.getDynamicControls == "function") {
+      let n = [];
       try {
-        o = n.getDynamicControls() || [];
+        n = o.getDynamicControls() || [];
       } catch {
       }
-      o.forEach((l) => {
+      n.forEach((l) => {
         const c = l.property || l.id, d = a[c] ?? l.default, h = this._createControl(e, l, d);
         h && (this._controls.set(l.id, h), r.appendChild(h));
       });
@@ -2012,52 +2090,52 @@ class bt {
    */
   _createControl(e, t, i) {
     if (t.hidden) return null;
-    const r = t.label || t.id, a = this._normalizeControlType(t.type), n = t.property || t.id;
+    const r = t.label || t.id, a = this._normalizeControlType(t.type), o = t.property || t.id;
     switch (a) {
       case "slider":
-        return Ae({
+        return ze({
           id: `${e}-${t.id}`,
           label: r,
           min: t.min ?? 0,
           max: t.max ?? 1,
           step: t.step ?? 0.01,
           value: typeof i == "number" ? i : t.default ?? 0,
-          onChange: (c) => this._handleChange(e, n, c)
+          onChange: (c) => this._handleChange(e, o, c)
         });
       case "toggle":
-        return ze({
+        return Re({
           id: `${e}-${t.id}`,
           label: r,
           checked: !!i,
-          onChange: (c) => this._handleChange(e, n, c)
+          onChange: (c) => this._handleChange(e, o, c)
         });
       case "color":
-        return Ne({
+        return Te({
           id: `${e}-${t.id}`,
           label: r,
           value: typeof i == "string" && i.startsWith("#") ? i : t.default || "#000000",
-          onChange: (c) => this._handleChange(e, n, c)
+          onChange: (c) => this._handleChange(e, o, c)
         });
       case "select":
-        const o = this._normalizeOptions(t.options);
-        return Te({
+        const n = this._normalizeOptions(t.options);
+        return Ie({
           id: `${e}-${t.id}`,
           label: r,
-          options: o,
+          options: n,
           value: i ?? t.default,
-          onChange: (c) => this._handleChange(e, n, c)
+          onChange: (c) => this._handleChange(e, o, c)
         });
       case "text":
-        return Re({
+        return Ee({
           id: `${e}-${t.id}`,
           label: r,
           value: typeof i == "string" ? i : t.default ?? "",
           placeholder: t.placeholder || "",
-          onCommit: (c) => this._handleChange(e, n, c)
+          onCommit: (c) => this._handleChange(e, o, c)
         });
       case "button":
-        const l = p("div", { className: "button-control" });
-        return l.appendChild(O({
+        const l = f("div", { className: "button-control" });
+        return l.appendChild(E({
           label: r,
           className: "btn-secondary",
           onClick: () => this._handleAction(e, t.action || t.id)
@@ -2132,8 +2210,8 @@ class bt {
     i && i.controls.forEach((r) => {
       const a = this._controls.get(r.id);
       if (a && typeof a.setValue == "function") {
-        const n = t[r.id] ?? r.default;
-        a.setValue(n);
+        const o = t[r.id] ?? r.default;
+        a.setValue(o);
       }
     });
   }
@@ -2157,7 +2235,7 @@ class bt {
     this._unsubscribers.forEach((t) => t()), this._unsubscribers = [], this._controls.clear(), (e = this.element) == null || e.remove(), this.element = null;
   }
 }
-class yt {
+class wt {
   constructor(e, t) {
     this.state = e, this.filterManager = t, this._drawer = null, this._body = null, this._titleEl = null, this._isOpen = !1, this._currentFilterId = null, this._controls = /* @__PURE__ */ new Map(), this._onChange = null, this._onReset = null, this._onRemove = null, this._onAction = null, this._container = null;
   }
@@ -2167,31 +2245,31 @@ class yt {
    * @param {Object} callbacks - { onChange, onReset, onRemove, onAction }
    */
   build(e, { onChange: t, onReset: i, onRemove: r, onAction: a }) {
-    this._onChange = t, this._onReset = i, this._onRemove = r, this._onAction = a, this._container = e, this._drawer = p("div", { className: "mobile-filter-drawer" });
-    const n = p("div", { className: "drawer-header" });
-    this._titleEl = p("span", { className: "drawer-title" }, "Filter");
-    const o = p("div", { className: "drawer-header-actions" }), l = O({
+    this._onChange = t, this._onReset = i, this._onRemove = r, this._onAction = a, this._container = e, this._drawer = f("div", { className: "mobile-filter-drawer" });
+    const o = f("div", { className: "drawer-header" });
+    this._titleEl = f("span", { className: "drawer-title" }, "Filter");
+    const n = f("div", { className: "drawer-header-actions" }), l = E({
       label: "Reset",
       className: "btn-text",
       onClick: () => {
         var h;
         this._currentFilterId && ((h = this._onReset) == null || h.call(this, this._currentFilterId), this._renderControls());
       }
-    }), c = O({
+    }), c = E({
       label: "Remove",
       className: "btn-text btn-danger",
       onClick: () => {
         var h;
         this._currentFilterId && ((h = this._onRemove) == null || h.call(this, this._currentFilterId), this.close());
       }
-    }), d = z({
-      icon: oe,
+    }), d = N({
+      icon: ce,
       title: "Close",
       className: "btn-icon-sm",
       ariaLabel: "Close drawer",
       onClick: () => this.close()
     });
-    o.appendChild(l), o.appendChild(c), o.appendChild(d), n.appendChild(this._titleEl), n.appendChild(o), this._drawer.appendChild(n), this._body = p("div", { className: "drawer-body" }), this._drawer.appendChild(this._body), e.appendChild(this._drawer);
+    n.appendChild(l), n.appendChild(c), n.appendChild(d), o.appendChild(this._titleEl), o.appendChild(n), this._drawer.appendChild(o), this._body = f("div", { className: "drawer-body" }), this._drawer.appendChild(this._body), e.appendChild(this._drawer);
   }
   /**
    * Open the drawer for a specific filter
@@ -2243,11 +2321,11 @@ class yt {
     const e = this.filterManager.getFilterDef(this._currentFilterId);
     if (!e) return;
     this._titleEl.textContent = e.name;
-    const t = p("div", { className: "adjustments-grid" }), i = this.state.getFilterValues(this._currentFilterId);
+    const t = f("div", { className: "adjustments-grid" }), i = this.state.getFilterValues(this._currentFilterId);
     (e.controls || []).forEach((a) => {
       if (a.hidden) return;
-      const n = this._createControl(this._currentFilterId, a, i[a.id] ?? a.default);
-      n && (this._controls.set(a.id, n), t.appendChild(n));
+      const o = this._createControl(this._currentFilterId, a, i[a.id] ?? a.default);
+      o && (this._controls.set(a.id, o), t.appendChild(o));
     });
     const r = this.filterManager.getInstance(this._currentFilterId);
     if (r && typeof r.getDynamicControls == "function") {
@@ -2256,9 +2334,9 @@ class yt {
         a = r.getDynamicControls() || [];
       } catch {
       }
-      a.forEach((n) => {
-        const o = n.property || n.id, l = i[o] ?? n.default, c = this._createControl(this._currentFilterId, n, l);
-        c && (this._controls.set(n.id, c), t.appendChild(c));
+      a.forEach((o) => {
+        const n = o.property || o.id, l = i[n] ?? o.default, c = this._createControl(this._currentFilterId, o, l);
+        c && (this._controls.set(o.id, c), t.appendChild(c));
       });
     }
     this._body.appendChild(t);
@@ -2273,75 +2351,75 @@ class yt {
    */
   _createControl(e, t, i) {
     if (t.hidden) return null;
-    const r = t.label || t.id, a = this._normalizeControlType(t.type), n = t.property || t.id;
+    const r = t.label || t.id, a = this._normalizeControlType(t.type), o = t.property || t.id;
     switch (a) {
       case "slider":
-        return Ae({
+        return ze({
           id: `drawer-${e}-${t.id}`,
           label: r,
           min: t.min ?? 0,
           max: t.max ?? 1,
           step: t.step ?? 0.01,
           value: typeof i == "number" ? i : t.default ?? 0,
-          onChange: (o) => {
+          onChange: (n) => {
             var l;
-            return (l = this._onChange) == null ? void 0 : l.call(this, e, n, o);
+            return (l = this._onChange) == null ? void 0 : l.call(this, e, o, n);
           }
         });
       case "toggle":
-        return ze({
+        return Re({
           id: `drawer-${e}-${t.id}`,
           label: r,
           checked: !!i,
-          onChange: (o) => {
+          onChange: (n) => {
             var l;
-            return (l = this._onChange) == null ? void 0 : l.call(this, e, n, o);
+            return (l = this._onChange) == null ? void 0 : l.call(this, e, o, n);
           }
         });
       case "color":
-        return Ne({
+        return Te({
           id: `drawer-${e}-${t.id}`,
           label: r,
           value: typeof i == "string" && i.startsWith("#") ? i : t.default || "#000000",
-          onChange: (o) => {
+          onChange: (n) => {
             var l;
-            return (l = this._onChange) == null ? void 0 : l.call(this, e, n, o);
+            return (l = this._onChange) == null ? void 0 : l.call(this, e, o, n);
           }
         });
       case "select": {
-        const o = this._normalizeOptions(t.options);
-        return Te({
+        const n = this._normalizeOptions(t.options);
+        return Ie({
           id: `drawer-${e}-${t.id}`,
           label: r,
-          options: o,
+          options: n,
           value: i ?? t.default,
           onChange: (l) => {
             var c;
-            return (c = this._onChange) == null ? void 0 : c.call(this, e, n, l);
+            return (c = this._onChange) == null ? void 0 : c.call(this, e, o, l);
           }
         });
       }
       case "text":
-        return Re({
+        return Ee({
           id: `drawer-${e}-${t.id}`,
           label: r,
           value: typeof i == "string" ? i : t.default ?? "",
           placeholder: t.placeholder || "",
-          onCommit: (o) => {
+          onCommit: (n) => {
             var l;
-            return (l = this._onChange) == null ? void 0 : l.call(this, e, n, o);
+            return (l = this._onChange) == null ? void 0 : l.call(this, e, o, n);
           }
         });
       case "button": {
-        const o = p("div", { className: "button-control" });
-        return o.appendChild(O({
+        const n = f("div", { className: "button-control" });
+        return n.appendChild(E({
           label: r,
           className: "btn-secondary",
           onClick: () => {
             var l;
             (l = this._onAction) == null || l.call(this, e, t.action || t.id), this._renderControls();
           }
-        })), o;
+        })), n;
       }
       default:
         return null;
@@ -2381,7 +2459,7 @@ class yt {
     this._controls.clear(), (e = this._drawer) == null || e.remove(), this._drawer = null, this._isOpen = !1, this._currentFilterId = null, this._container = null;
   }
 }
-class _t {
+class St {
   constructor(e, t) {
     this.state = e, this.filterManager = t, this.element = null, this._scrollContainer = null, this._chips = /* @__PURE__ */ new Map(), this._unsubscribers = [], this._onToggle = null, this._onSelect = null;
   }
@@ -2390,10 +2468,10 @@ class _t {
    * @returns {HTMLElement}
    */
   render({ onToggle: e, onSelect: t }) {
-    return this._onToggle = e, this._onSelect = t, this.element = p("div", {
+    return this._onToggle = e, this._onSelect = t, this.element = f("div", {
       className: "mobile-active-filters",
       "data-testid": "mobile-active-filters"
-    }), this._scrollContainer = p("div", { className: "mobile-active-filters-scroll" }), this.element.appendChild(this._scrollContainer), this._subscribeToState(), this._renderChips(), this.element;
+    }), this._scrollContainer = f("div", { className: "mobile-active-filters-scroll" }), this.element.appendChild(this._scrollContainer), this._subscribeToState(), this._renderChips(), this.element;
   }
   _subscribeToState() {
     const e = this.state.on("change:activeFilters", () => {
@@ -2409,7 +2487,7 @@ class _t {
     this._scrollContainer.innerHTML = "", this._chips.clear();
     const e = this.state.get("activeFilters");
     if (!e || e.size === 0) {
-      const t = p("div", {
+      const t = f("div", {
         className: "active-filter-placeholder"
       }, "No active filters");
       this._scrollContainer.appendChild(t);
@@ -2423,22 +2501,22 @@ class _t {
     }), this._updateSelectedState();
   }
   _createChip(e, t) {
-    const i = p("div", {
+    const i = f("div", {
       className: "active-filter-chip",
       "data-filter-id": e,
       "data-testid": `active-chip-${e}`
-    }), r = p("span", {
+    }), r = f("span", {
       className: "active-filter-chip-label",
-      onClick: (n) => {
-        var o;
-        n.stopPropagation(), (o = this._onSelect) == null || o.call(this, e);
+      onClick: (o) => {
+        var n;
+        o.stopPropagation(), (n = this._onSelect) == null || n.call(this, e);
       }
-    }, t.name), a = p("button", {
+    }, t.name), a = f("button", {
       className: "active-filter-chip-check",
       "aria-label": `Remove ${t.name} filter`,
-      onClick: (n) => {
-        var o;
-        n.stopPropagation(), (o = this._onToggle) == null || o.call(this, e, !1);
+      onClick: (o) => {
+        var n;
+        o.stopPropagation(), (n = this._onToggle) == null || n.call(this, e, !1);
       }
     });
     return a.innerHTML = '<svg width="10" height="10" viewBox="0 0 12 12"><path d="M2 6l3 3 5-5" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>', i.appendChild(r), i.appendChild(a), i;
@@ -2454,21 +2532,31 @@ class _t {
     this._unsubscribers.forEach((t) => t()), this._unsubscribers = [], this._chips.clear(), (e = this.element) == null || e.remove(), this.element = null;
   }
 }
-const xt = [
-  { id: "free", name: "Free", icon: ot },
-  { id: "square", name: "Square", icon: at },
-  { id: "circle", name: "Circle", icon: nt }
-], Ct = [
+const vt = [
+  { id: "free", name: "Free", icon: dt },
+  { id: "square", name: "Square", icon: ct },
+  { id: "circle", name: "Circle", icon: ht }
+], Mt = [
   { id: "free", name: "Free" },
   { id: "1:1", name: "1:1" },
   { id: "4:3", name: "4:3" },
   { id: "16:9", name: "16:9" },
   { id: "3:2", name: "3:2" },
   { id: "2:3", name: "2:3" }
+], kt = [
+  { id: "0", label: "0°", angle: 0 },
+  { id: "90", label: "90°", angle: 90 },
+  { id: "180", label: "180°", angle: 180 },
+  { id: "270", label: "270°", angle: 270 }
 ];
-class wt {
-  constructor(e, t) {
-    this.state = e, this.cropManager = t, this.element = null, this._shapeChips = /* @__PURE__ */ new Map(), this._aspectChips = /* @__PURE__ */ new Map(), this._unsubscribers = [];
+function q(s) {
+  if (!Number.isFinite(Number(s))) return 0;
+  const e = Number(s) % 360;
+  return e < 0 ? e + 360 : e;
+}
+class Pt {
+  constructor(e, t, i = null) {
+    this.state = e, this.cropManager = t, this.editor = i, this.element = null, this._shapeChips = /* @__PURE__ */ new Map(), this._aspectChips = /* @__PURE__ */ new Map(), this._rotationPresetChips = /* @__PURE__ */ new Map(), this._rotationRange = null, this._rotationNumber = null, this._rotationValue = null, this._unsubscribers = [];
   }
   /**
    * Apply crop and return the editor UI to filter mode.
@@ -2483,62 +2571,182 @@ class wt {
    * @returns {HTMLElement}
    */
   render() {
-    this.element = p("div", {
+    this.element = f("div", {
       className: "crop-controls",
       "data-testid": "crop-controls"
-    });
-    const e = p("div", { className: "crop-section" });
-    e.appendChild(p("label", { className: "section-label" }, "Shape"));
-    const t = p("div", { className: "chip-row" }), i = this.state.get("crop.shape");
-    xt.forEach((c) => {
-      const d = ne({
+    }), this.element.appendChild(this._renderRotationSection());
+    const e = f("div", { className: "crop-section" });
+    e.appendChild(f("label", { className: "section-label" }, "Shape"));
+    const t = f("div", { className: "chip-row" }), i = this.state.get("crop.shape");
+    vt.forEach((c) => {
+      const d = ee({
         label: c.name,
         icon: c.icon,
         active: i === c.id,
         onClick: () => this._selectShape(c.id)
       });
       d.dataset.shape = c.id, d.dataset.testid = `crop-shape-${c.id}`, this._shapeChips.set(c.id, d), t.appendChild(d);
-    }), e.appendChild(t), this.element.appendChild(e), this.state.get("lockCropShape") && (e.style.display = "none"), this._shapeSection = e, this._aspectSection = p("div", { className: "crop-section" }), this._aspectSection.appendChild(p("label", { className: "section-label" }, "Aspect Ratio"));
-    const r = p("div", { className: "chip-row aspect-row" }), a = this.state.get("crop.aspect");
-    Ct.forEach((c) => {
-      const d = ne({
+    }), e.appendChild(t), this.element.appendChild(e), this.state.get("lockCropShape") && (e.style.display = "none"), this._shapeSection = e, this._aspectSection = f("div", { className: "crop-section" }), this._aspectSection.appendChild(f("label", { className: "section-label" }, "Aspect Ratio"));
+    const r = f("div", { className: "chip-row aspect-row" }), a = this.state.get("crop.aspect");
+    Mt.forEach((c) => {
+      const d = ee({
         label: c.name,
         active: a === c.id,
         onClick: () => this._selectAspect(c.id)
       });
       d.dataset.ratio = c.id, d.dataset.testid = `crop-ratio-${c.id}`, this._aspectChips.set(c.id, d), r.appendChild(d);
     }), this._aspectSection.appendChild(r), this.element.appendChild(this._aspectSection), this._updateAspectVisibility();
-    const n = p("div", { className: "crop-actions" }), o = O({
+    const o = f("div", { className: "crop-actions" }), n = E({
       label: "Cancel",
       className: "btn-secondary crop-cancel-btn",
-      icon: oe,
+      icon: ce,
       onClick: () => this.cropManager.cancel()
     });
-    o.dataset.testid = "cancel-crop";
-    const l = O({
+    n.dataset.testid = "cancel-crop";
+    const l = E({
       label: "Apply Crop",
       className: "btn-primary crop-apply-btn",
-      icon: se,
+      icon: ne,
       onClick: () => this._applyCropAndReturnToFilters()
     });
-    return l.dataset.testid = "apply-crop", n.appendChild(o), n.appendChild(l), this.element.appendChild(n), this._subscribeToState(), this.element;
+    return l.dataset.testid = "apply-crop", o.appendChild(n), o.appendChild(l), this.element.appendChild(o), this._subscribeToState(), this.element;
+  }
+  _renderRotationSection() {
+    const e = f("div", { className: "crop-section rotation-section" });
+    e.appendChild(f("label", { className: "section-label" }, "Rotate"));
+    const t = f("div", { className: "rotation-action-row" }), i = E({
+      label: "Left 90°",
+      className: "btn-secondary rotation-action-btn",
+      icon: at,
+      onClick: () => this._rotateBy(-90)
+    });
+    i.dataset.testid = "rotate-left-90";
+    const r = E({
+      label: "Right 90°",
+      className: "btn-secondary rotation-action-btn",
+      icon: ot,
+      onClick: () => this._rotateBy(90)
+    });
+    r.dataset.testid = "rotate-right-90";
+    const a = E({
+      label: "Rotate 180°",
+      className: "btn-secondary rotation-action-btn",
+      onClick: () => this._rotateBy(180)
+    });
+    a.dataset.testid = "rotate-180";
+    const o = E({
+      label: "Rotate 270°",
+      className: "btn-secondary rotation-action-btn",
+      onClick: () => this._rotateBy(270)
+    });
+    o.dataset.testid = "rotate-270", t.appendChild(i), t.appendChild(r), t.appendChild(a), t.appendChild(o), e.appendChild(t);
+    const n = f("div", { className: "chip-row rotation-preset-row" }), l = q(this.state.get("transform.rotation") ?? 0);
+    kt.forEach((p) => {
+      const b = ee({
+        label: p.label,
+        active: Math.round(l) === p.angle,
+        onClick: () => this._setRotation(p.angle)
+      });
+      b.dataset.angle = p.id, b.dataset.testid = `rotation-preset-${p.id}`, this._rotationPresetChips.set(p.id, b), n.appendChild(b);
+    }), e.appendChild(n);
+    const c = f("div", { className: "rotation-arbitrary" }), d = f(
+      "div",
+      { className: "rotation-angle-header" },
+      f("label", { className: "rotation-angle-label", for: "image-editor-rotation-angle" }, "Angle"),
+      f("span", { className: "rotation-angle-value" }, this._formatAngle(l))
+    );
+    this._rotationValue = d.querySelector(".rotation-angle-value"), this._rotationRange = f("input", {
+      id: "image-editor-rotation-angle",
+      type: "range",
+      className: "slider-input rotation-range",
+      min: "0",
+      max: "360",
+      step: "1",
+      value: String(Math.round(l)),
+      "aria-label": "Rotation angle",
+      onInput: (p) => this._previewAngleValue(p.target.value),
+      onChange: (p) => this._setRotation(Number(p.target.value))
+    }), this._rotationNumber = f("input", {
+      type: "number",
+      className: "text-input rotation-number-input",
+      min: "-360",
+      max: "360",
+      step: "1",
+      value: this._formatPlainAngle(l),
+      "aria-label": "Rotation angle in degrees",
+      onKeyDown: (p) => {
+        p.key === "Enter" && (p.preventDefault(), this._setRotation(Number(p.target.value)), p.target.blur());
+      },
+      onBlur: (p) => this._setRotation(Number(p.target.value))
+    });
+    const h = f(
+      "div",
+      { className: "rotation-angle-row" },
+      this._rotationRange,
+      this._rotationNumber
+    );
+    c.appendChild(d), c.appendChild(h);
+    const u = E({
+      label: "Reset rotation",
+      className: "btn-text rotation-reset-btn",
+      onClick: () => this._setRotation(0)
+    });
+    return u.dataset.testid = "reset-rotation", c.appendChild(u), e.appendChild(c), e;
   }
   /**
    * Subscribe to state changes
    */
   _subscribeToState() {
-    const e = this.state.on("change:crop.shape", ({ value: i }) => {
-      this._shapeChips.forEach((r, a) => {
-        r.setActive(a === i);
+    const e = this.state.on("change:crop.shape", ({ value: r }) => {
+      this._shapeChips.forEach((a, o) => {
+        a.setActive(o === r);
       }), this._updateAspectVisibility();
     });
     this._unsubscribers.push(e);
-    const t = this.state.on("change:crop.aspect", ({ value: i }) => {
-      this._aspectChips.forEach((r, a) => {
-        r.setActive(a === i);
+    const t = this.state.on("change:crop.aspect", ({ value: r }) => {
+      this._aspectChips.forEach((a, o) => {
+        a.setActive(o === r);
       });
     });
     this._unsubscribers.push(t);
+    const i = this.state.on("change:transform.rotation", ({ value: r }) => {
+      this._syncRotationControls(r);
+    });
+    this._unsubscribers.push(i);
+  }
+  _rotateBy(e) {
+    var i, r;
+    ((r = (i = this.editor) == null ? void 0 : i.rotateBy) == null ? void 0 : r.call(i, e)) !== !1 && this._syncRotationControls(this.state.get("transform.rotation") ?? 0);
+  }
+  _setRotation(e) {
+    var r, a;
+    const t = q(e);
+    if (((a = (r = this.editor) == null ? void 0 : r.setRotationAngle) == null ? void 0 : a.call(r, t)) === !1) {
+      this._syncRotationControls(this.state.get("transform.rotation") ?? 0);
+      return;
+    }
+    this._syncRotationControls(t);
+  }
+  _previewAngleValue(e) {
+    const t = q(Number(e));
+    this._rotationValue && (this._rotationValue.textContent = this._formatAngle(t)), this._rotationNumber && (this._rotationNumber.value = this._formatPlainAngle(t)), this._refreshPresetChips(t);
+  }
+  _syncRotationControls(e) {
+    const t = q(e);
+    this._rotationValue && (this._rotationValue.textContent = this._formatAngle(t)), this._rotationRange && (this._rotationRange.value = String(Math.round(t))), this._rotationNumber && (this._rotationNumber.value = this._formatPlainAngle(t)), this._refreshPresetChips(t);
+  }
+  _refreshPresetChips(e) {
+    const t = Math.round(q(e)) % 360;
+    this._rotationPresetChips.forEach((i, r) => {
+      i.setActive(Number(r) === t);
+    });
+  }
+  _formatAngle(e) {
+    return `${this._formatPlainAngle(e)}°`;
+  }
+  _formatPlainAngle(e) {
+    const t = q(e);
+    return Number.isInteger(t) ? String(t) : t.toFixed(1);
   }
   /**
    * Select a crop shape
@@ -2578,10 +2786,10 @@ class wt {
    */
   destroy() {
     var e;
-    this._unsubscribers.forEach((t) => t()), this._unsubscribers = [], this._shapeChips.clear(), this._aspectChips.clear(), (e = this.element) == null || e.remove(), this.element = null;
+    this._unsubscribers.forEach((t) => t()), this._unsubscribers = [], this._shapeChips.clear(), this._aspectChips.clear(), this._rotationPresetChips.clear(), (e = this.element) == null || e.remove(), this.element = null;
   }
 }
-class St {
+class Ft {
   constructor(e, t) {
     this.state = e, this.filterManager = t, this.element = null, this._filterItems = /* @__PURE__ */ new Map(), this._unsubscribers = [], this._onRemove = null, this._onReset = null, this._onClearAll = null, this._onUpdateValue = null, this._onSelect = null;
   }
@@ -2591,18 +2799,18 @@ class St {
    * @returns {HTMLElement}
    */
   render({ onRemove: e, onReset: t, onClearAll: i, onUpdateValue: r, onSelect: a }) {
-    this._onRemove = e, this._onReset = t, this._onClearAll = i, this._onUpdateValue = r, this._onSelect = a, this.element = p("div", {
+    this._onRemove = e, this._onReset = t, this._onClearAll = i, this._onUpdateValue = r, this._onSelect = a, this.element = f("div", {
       className: "active-filters-panel",
       "data-testid": "active-filters-panel"
     });
-    const n = p("div", { className: "panel-header" });
-    n.appendChild(p("h3", { className: "panel-title" }, "Active Filters"));
-    const o = O({
+    const o = f("div", { className: "panel-header" });
+    o.appendChild(f("h3", { className: "panel-title" }, "Active Filters"));
+    const n = E({
       label: "Clear All",
       className: "btn-text btn-danger",
       onClick: () => this._handleClearAll()
     });
-    return o.dataset.testid = "clear-all-filters", n.appendChild(o), this.element.appendChild(n), this._listContainer = p("div", { className: "active-filters-list" }), this.element.appendChild(this._listContainer), this._subscribeToState(), this._renderFilterList(), this.element;
+    return n.dataset.testid = "clear-all-filters", o.appendChild(n), this.element.appendChild(o), this._listContainer = f("div", { className: "active-filters-list" }), this.element.appendChild(this._listContainer), this._subscribeToState(), this._renderFilterList(), this.element;
   }
   /**
    * Subscribe to state changes
@@ -2638,7 +2846,7 @@ class St {
     const e = this.state.get("activeFilters");
     if (e.size === 0) {
       this._listContainer.appendChild(
-        p("div", { className: "no-filters-message" }, "No filters active")
+        f("div", { className: "no-filters-message" }, "No filters active")
       );
       return;
     }
@@ -2656,26 +2864,26 @@ class St {
    * @returns {HTMLElement}
    */
   _createFilterItem(e, t) {
-    const r = this.state.get("selectedFilter") === e, a = p("div", {
+    const r = this.state.get("selectedFilter") === e, a = f("div", {
       className: `active-filter-item ${r ? "selected" : ""}`,
       "data-active-filter": e,
       "data-testid": `active-filter-${e}`,
-      onClick: (f) => {
-        f.target.closest(".filter-item-actions") || this._handleSelect(e);
+      onClick: (p) => {
+        p.target.closest(".filter-item-actions") || this._handleSelect(e);
       }
-    }), n = p("div", { className: "filter-item-header" }), o = p("span", { className: "filter-item-name" }, t.name), l = p("div", { className: "filter-item-actions" }), c = z({
-      icon: Fe,
+    }), o = f("div", { className: "filter-item-header" }), n = f("span", { className: "filter-item-name" }, t.name), l = f("div", { className: "filter-item-actions" }), c = N({
+      icon: Ne,
       title: "Reset filter",
       className: "btn-icon-sm",
       onClick: () => this._handleReset(e)
-    }), d = z({
-      icon: rt,
+    }), d = N({
+      icon: nt,
       title: "Remove filter",
       className: "btn-icon-sm btn-danger",
       onClick: () => this._handleRemove(e)
     });
-    l.appendChild(c), l.appendChild(d), n.appendChild(o), n.appendChild(l), a.appendChild(n);
-    const h = this.state.getFilterValues(e), u = p("div", { className: "filter-item-summary" });
+    l.appendChild(c), l.appendChild(d), o.appendChild(n), o.appendChild(l), a.appendChild(o);
+    const h = this.state.getFilterValues(e), u = f("div", { className: "filter-item-summary" });
     return u.textContent = this._getValuesSummary(t, h), a.appendChild(u), a._summaryEl = u, a;
   }
   /**
@@ -2708,8 +2916,8 @@ class St {
     return e.controls.forEach((r) => {
       const a = this._normalizeControlType(r.type);
       if (a === "button") return;
-      const n = r.label || r.id, o = t[r.id] ?? r.default;
-      o !== r.default && (a === "slider" ? i.push(`${n}: ${this._formatValue(o)}`) : a === "toggle" ? o && i.push(n) : a === "color" ? i.push(`${n}: ${o}`) : a === "select" && i.push(`${n}: ${o}`));
+      const o = r.label || r.id, n = t[r.id] ?? r.default;
+      n !== r.default && (a === "slider" ? i.push(`${o}: ${this._formatValue(n)}`) : a === "toggle" ? n && i.push(o) : a === "color" ? i.push(`${o}: ${n}`) : a === "select" && i.push(`${o}: ${n}`));
     }), i.length > 0 ? i.join(", ") : "Default values";
   }
   /**
@@ -2782,7 +2990,7 @@ class St {
     this._unsubscribers.forEach((t) => t()), this._unsubscribers = [], this._filterItems.clear(), (e = this.element) == null || e.remove(), this.element = null;
   }
 }
-const H = {
+const $ = {
   name: "free",
   initialMode: "filters",
   cropShape: "free",
@@ -2794,12 +3002,12 @@ const H = {
   showCropControls: !0,
   maxExportWidth: void 0,
   maxExportHeight: void 0
-}, te = {
+}, se = {
   free: {
-    ...H
+    ...$
   },
   avatar: {
-    ...H,
+    ...$,
     name: "avatar",
     initialMode: "crop",
     cropShape: "circle",
@@ -2809,7 +3017,7 @@ const H = {
     lockAspectRatio: !0
   },
   banner: {
-    ...H,
+    ...$,
     name: "banner",
     initialMode: "crop",
     cropShape: "square",
@@ -2819,7 +3027,7 @@ const H = {
     lockAspectRatio: !0
   },
   cover: {
-    ...H,
+    ...$,
     name: "cover",
     initialMode: "crop",
     cropShape: "free",
@@ -2829,7 +3037,7 @@ const H = {
     lockAspectRatio: !0
   },
   product: {
-    ...H,
+    ...$,
     name: "product",
     initialMode: "filters",
     cropShape: "square",
@@ -2839,26 +3047,35 @@ const H = {
     lockAspectRatio: !1
   }
 };
-function vt(s) {
+function At(s) {
   if (!s)
-    return { ...te.free };
+    return { ...se.free };
   if (typeof s == "object" && s !== null)
-    return { ...H, ...s };
-  const e = te[s];
-  return e ? { ...e } : { ...te.free };
+    return { ...$, ...s };
+  const e = se[s];
+  return e ? { ...e } : { ...se.free };
+}
+function Z(s) {
+  if (!Number.isFinite(Number(s))) return 0;
+  const e = Number(s) % 360;
+  return e < 0 ? e + 360 : e;
 }
-class Si extends W {
+function Nt(s, e) {
+  const t = Z(s);
+  return (Z(e) - t + 540) % 360 - 180;
+}
+class Ai extends G {
   /**
    * Create a new VanillaImageEditor
    * @param {HTMLElement} container - Container element to mount the editor
    * @param {Object} options - Configuration options
    */
   constructor(e, t = {}) {
-    var a, n, o;
+    var a, o, n;
     if (super(), !e)
       throw new Error("VanillaImageEditor: container element is required");
     this._container = e, this._destroyed = !1, this._loadVersion = 0, this._objectUrls = /* @__PURE__ */ new Set();
-    const i = t.preset ? vt(t.preset) : null, r = i ? {
+    const i = t.preset ? At(t.preset) : null, r = i ? {
       initialMode: i.initialMode === "crop" ? "crop" : "adjust",
       cropShape: i.cropShape,
       initialAspectRatio: i.aspectRatio
@@ -2876,9 +3093,9 @@ class Si extends W {
       },
       ...r,
       ...t
-    }, this._preset = i, this._state = qe(), 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 He(), this._filterManager = new ut(this._state, this._renderer), this._cropManager = new ae(this._state, this._renderer), this._removeBgManager = null, ((a = this._options.backgroundRemoval) == null ? void 0 : a.enabled) !== !1 && (this._removeBgManager = new pt({
-      endpoint: (n = this._options.backgroundRemoval) == null ? void 0 : n.endpoint,
-      fallbackEndpoint: (o = this._options.backgroundRemoval) == null ? void 0 : o.fallbackEndpoint
+    }, this._preset = i, this._state = $e(), this._state.set("theme", this._options.theme), this._state.set("crop.shape", this._options.cropShape), this._state.set("crop.aspect", this._options.initialAspectRatio), this._preset && (this._state.set("lockCropShape", !!this._preset.lockCropShape), this._state.set("lockAspectRatio", !!this._preset.lockAspectRatio), this._state.set("showFilters", this._preset.showFilters !== !1), this._state.set("showCropControls", this._preset.showCropControls !== !1), this._state.set("autoZoomOnCropOverflow", !!this._preset.autoZoomOnCropOverflow)), this._renderer = new We(), this._filterManager = new gt(this._state, this._renderer), this._cropManager = new le(this._state, this._renderer), this._removeBgManager = null, ((a = this._options.backgroundRemoval) == null ? void 0 : a.enabled) !== !1 && (this._removeBgManager = new bt({
+      endpoint: (o = this._options.backgroundRemoval) == null ? void 0 : o.endpoint,
+      fallbackEndpoint: (n = this._options.backgroundRemoval) == null ? void 0 : n.fallbackEndpoint
     })), this._loadingOverlay = null, this._isMobile = typeof window < "u" ? window.innerWidth <= 768 : !1, this._toolbar = null, this._categoryCarousel = null, this._filterCarousel = null, this._filterAdjustments = null, this._mobileFilterDrawer = null, this._mobileActiveFilters = null, this._cropControls = null, this._activeFiltersPanel = null, this._editorEl = null, this._canvasContainer = null, this._cropOverlay = null, this._controlsSection = null, this._filterControlsEl = null, this._fileInput = null, this._resizeObserver = null, this._init();
   }
   /**
@@ -2894,13 +3111,13 @@ class Si extends W {
    * Build DOM structure
    */
   _buildDOM() {
-    this._container.innerHTML = "", this._editorEl = p("div", {
+    this._container.innerHTML = "", this._editorEl = f("div", {
       className: `vanilla-image-editor ${this._state.get("isDarkMode") ? "dark" : "light"}`
     });
-    const e = p("div", { className: "editor-toolbar-container" });
+    const e = f("div", { className: "editor-toolbar-container" });
     this._editorEl.appendChild(e), this._toolbarContainer = e;
-    const t = p("div", { className: "editor-content" }), i = p("div", { className: "canvas-section" });
-    this._canvasContainer = p("div", { className: "canvas-container" }), this._cropOverlay = p("canvas", { className: "crop-overlay", "aria-hidden": "true" }), i.appendChild(this._canvasContainer), i.appendChild(this._cropOverlay), t.appendChild(i), this._controlsSection = p("div", { className: "controls-section" }), t.appendChild(this._controlsSection), this._editorEl.appendChild(t), this._fileInput = p("input", {
+    const t = f("div", { className: "editor-content" }), i = f("div", { className: "canvas-section" });
+    this._canvasContainer = f("div", { className: "canvas-container" }), this._cropOverlay = f("canvas", { className: "crop-overlay", "aria-hidden": "true" }), i.appendChild(this._canvasContainer), i.appendChild(this._cropOverlay), t.appendChild(i), this._controlsSection = f("div", { className: "controls-section" }), t.appendChild(this._controlsSection), this._editorEl.appendChild(t), this._fileInput = f("input", {
       type: "file",
       accept: "image/*",
       className: "hidden-file-input",
@@ -2912,32 +3129,32 @@ class Si extends W {
    * Initialize UI components
    */
   _initUI() {
-    this._toolbar = new ft(this._state, this), this._toolbarContainer.appendChild(this._toolbar.render()), this._filterControlsEl = p("div", { className: "filter-controls-container" }), this._categoryCarousel = new mt(this._state, this), this._filterControlsEl.appendChild(this._categoryCarousel.render((r) => {
+    this._toolbar = new yt(this._state, this), this._toolbarContainer.appendChild(this._toolbar.render()), this._filterControlsEl = f("div", { className: "filter-controls-container" }), this._categoryCarousel = new _t(this._state, this), this._filterControlsEl.appendChild(this._categoryCarousel.render((r) => {
     }));
-    const e = p("div", { className: "filter-layout" }), t = p("div", { className: "filter-left-column" });
-    this._filterCarousel = new gt(this._state, this._filterManager), t.appendChild(this._filterCarousel.render({
+    const e = f("div", { className: "filter-layout" }), t = f("div", { className: "filter-left-column" });
+    this._filterCarousel = new xt(this._state, this._filterManager), t.appendChild(this._filterCarousel.render({
       onToggle: (r, a) => this._handleFilterToggle(r, a),
       onSelect: (r) => {
         this._handleFilterSelect(r), this._isMobile && this._mobileFilterDrawer && this._mobileFilterDrawer.open(r);
       }
-    })), this._filterAdjustments = new bt(this._state, this._filterManager), t.appendChild(this._filterAdjustments.render({
-      onChange: (r, a, n) => this._handleFilterChange(r, a, n),
+    })), this._filterAdjustments = new Ct(this._state, this._filterManager), t.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(t);
-    const i = p("div", { className: "filter-right-column" });
-    this._activeFiltersPanel = new St(this._state, this._filterManager), i.appendChild(this._activeFiltersPanel.render({
+    const i = f("div", { className: "filter-right-column" });
+    this._activeFiltersPanel = new Ft(this._state, this._filterManager), i.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(i), this._filterControlsEl.appendChild(e), this._mobileActiveFilters = new _t(this._state, this._filterManager), this._filterControlsEl.appendChild(this._mobileActiveFilters.render({
+    })), e.appendChild(i), this._filterControlsEl.appendChild(e), this._mobileActiveFilters = new St(this._state, this._filterManager), this._filterControlsEl.appendChild(this._mobileActiveFilters.render({
       onToggle: (r, a) => this._handleFilterToggle(r, a),
       onSelect: (r) => {
         this._handleFilterSelect(r), this._isMobile && this._mobileFilterDrawer && this._mobileFilterDrawer.open(r);
       }
-    })), this._cropControls = new wt(this._state, this._cropManager), this._cropControlsEl = this._cropControls.render(), this._cropControlsEl.style.display = "none", this._controlsSection.appendChild(this._filterControlsEl), this._controlsSection.appendChild(this._cropControlsEl), this._mobileFilterDrawer = new yt(this._state, this._filterManager), this._mobileFilterDrawer.build(this._controlsSection, {
-      onChange: (r, a, n) => this._handleFilterChange(r, a, n),
+    })), this._cropControls = new Pt(this._state, this._cropManager, this), this._cropControlsEl = this._cropControls.render(), this._cropControlsEl.style.display = "none", this._controlsSection.appendChild(this._filterControlsEl), this._controlsSection.appendChild(this._cropControlsEl), this._mobileFilterDrawer = new wt(this._state, this._filterManager), this._mobileFilterDrawer.build(this._controlsSection, {
+      onChange: (r, a, o) => this._handleFilterChange(r, a, o),
       onReset: (r) => this._handleFilterReset(r),
       onRemove: (r) => {
         this._handleFilterToggle(r, !1), this._state.set("selectedFilter", null);
@@ -3075,7 +3292,7 @@ class Si extends W {
    * Called at the start of loadImage() to prevent stale state bleed between sessions.
    */
   _resetEditorState() {
-    this._filterManager.resetAll(), this._state.set("crop.rect", null), this._state.set("crop.appliedRect", null), this._state.set("crop.appliedShape", null), this._state.set("crop.appliedAspect", null), this._state.set("crop.shape", this._options.cropShape || "free"), this._state.set("crop.aspect", this._options.initialAspectRatio || "free"), this._state.get("mode") === "crop" && (this._cropManager.disable(), this._state.set("mode", "filters"));
+    this._filterManager.resetAll(), this._state.set("crop.rect", null), this._state.set("crop.appliedRect", null), this._state.set("crop.appliedShape", null), this._state.set("crop.appliedAspect", null), this._state.set("crop.dirty", !1), this._state.set("crop.shape", this._options.cropShape || "free"), this._state.set("crop.aspect", this._options.initialAspectRatio || "free"), this._state.set("transform.rotation", 0), this._state.get("mode") === "crop" && (this._cropManager.disable(), this._state.set("mode", "filters"));
   }
   /**
    * Hydrate editor state from a canonical ImageEditorSessionState object.
@@ -3083,27 +3300,28 @@ class Si extends W {
    * @param {Object} state - ImageEditorSessionState
    */
   _hydrateState(e) {
-    if (!(!e || e.version !== 1)) {
-      if (e.crop) {
-        const t = e.crop.shape || "free", i = e.crop.aspectRatio || "free";
-        e.crop.rect && (this._cropManager.applyFromPixelRect(e.crop.rect, t), this._state.set("crop.appliedRect", { ...e.crop.rect }), this._state.set("crop.appliedShape", t), this._state.set("crop.appliedAspect", i)), this._state.set("crop.shape", t), this._state.set("crop.aspect", i);
-      }
-      if (Array.isArray(e.filters)) {
-        let t = null;
-        for (const i of e.filters)
-          if (i.enabled && (t === null && (t = i.id), this._state.toggleFilter(i.id, !0), this._filterManager.initializeValues(i.id), i.values))
-            for (const [r, a] of Object.entries(i.values))
-              this._state.setFilterValue(i.id, r, a);
-        if (t !== null) {
-          this._state.set("selectedFilter", t);
-          const i = this._filterManager.getFilterDef(t);
-          if (typeof (i == null ? void 0 : i.category) == "string") {
-            const r = ht[i.category] ?? i.category;
-            this._state.set("selectedCategory", r);
-          }
+    var i;
+    if (!e || e.version !== 1) return;
+    const t = Z(((i = e.transform) == null ? void 0 : i.rotation) ?? 0);
+    if (t !== 0 && this._renderer.rotateBy(t) && this._state.set("transform.rotation", t), e.crop) {
+      const r = e.crop.shape || "free", a = e.crop.aspectRatio || "free";
+      e.crop.rect && (this._cropManager.applyFromPixelRect(e.crop.rect, r), this._state.set("crop.appliedRect", { ...e.crop.rect }), this._state.set("crop.appliedShape", r), this._state.set("crop.appliedAspect", a)), this._state.set("crop.shape", r), this._state.set("crop.aspect", a);
+    }
+    if (Array.isArray(e.filters)) {
+      let r = null;
+      for (const a of e.filters)
+        if (a.enabled && (r === null && (r = a.id), this._state.toggleFilter(a.id, !0), this._filterManager.initializeValues(a.id), a.values))
+          for (const [o, n] of Object.entries(a.values))
+            this._state.setFilterValue(a.id, o, n);
+      if (r !== null) {
+        this._state.set("selectedFilter", r);
+        const a = this._filterManager.getFilterDef(r);
+        if (typeof (a == null ? void 0 : a.category) == "string") {
+          const o = ft[a.category] ?? a.category;
+          this._state.set("selectedCategory", o);
         }
-        this._filterManager.applyFilters();
       }
+      this._filterManager.applyFilters();
     }
   }
   /**
@@ -3124,7 +3342,8 @@ class Si extends W {
    * @returns {string|null} Data URL
    */
   exportImage(e = "png", t = 0.92, i = {}) {
-    return this._state.get("crop.rect") && !this._cropManager.apply() ? null : this._renderer.exportImage(
+    const r = this._state.get("crop.rect"), a = this._state.get("crop.dirty") !== !1 || this._state.get("mode") !== "crop";
+    return r && a && !this._cropManager.apply() ? null : this._renderer.exportImage(
       e,
       t,
       i.maxEdge ?? 0,
@@ -3161,12 +3380,12 @@ class Si extends W {
   getSerializableState() {
     const e = this._state.get("activeFilters"), t = [];
     if (e)
-      for (const n of e) {
-        const o = this._state.getFilterValues(n);
+      for (const o of e) {
+        const n = this._state.getFilterValues(o);
         t.push({
-          id: n,
+          id: o,
           enabled: !0,
-          values: { ...o }
+          values: { ...n }
         });
       }
     const i = this._state.get("crop.appliedRect"), r = this._state.get("crop.rect"), a = i || r;
@@ -3177,6 +3396,9 @@ class Si extends W {
         aspectRatio: this._state.get("crop.appliedAspect") || this._state.get("crop.aspect") || "free",
         shape: this._state.get("crop.appliedShape") || this._state.get("crop.shape") || "free"
       },
+      transform: {
+        rotation: Z(this._state.get("transform.rotation") ?? 0)
+      },
       filters: t
     };
   }
@@ -3205,6 +3427,23 @@ class Si extends W {
   resetAll() {
     this._filterManager.resetAll();
   }
+  rotateBy(e) {
+    const t = this._state.get("transform.rotation") ?? 0;
+    return this.setRotationAngle(Number(t) + Number(e));
+  }
+  setRotationAngle(e) {
+    if (!this._state.get("hasImage")) return !1;
+    const t = Z(this._state.get("transform.rotation") ?? 0), i = Z(e), r = Nt(t, i), a = this._state.get("mode") === "crop";
+    if (Math.abs(r) > 1e-3) {
+      if (a && this._cropManager.disable(), !this._renderer.rotateBy(r))
+        return a && this._cropManager.enable(), !1;
+      this._filterManager.applyFilters(), this._state.set("crop.rect", null), this._state.set("crop.dirty", !1), a && this._cropManager.enable();
+    }
+    return this._state.set("transform.rotation", i), this.emit("transformChanged", { rotation: i }), !0;
+  }
+  resetRotation() {
+    return this.setRotationAngle(0);
+  }
   /**
    * Toggle theme
    */
@@ -3281,9 +3520,9 @@ class Si extends W {
   _showLoadingOverlay(e) {
     var i;
     if (!this._loadingOverlay)
-      this._loadingOverlay = p("div", { className: "editor-loading-overlay" }, [
-        p("div", { className: "editor-loading-spinner" }),
-        p("div", { className: "editor-loading-text" }, e)
+      this._loadingOverlay = f("div", { className: "editor-loading-overlay" }, [
+        f("div", { className: "editor-loading-spinner" }),
+        f("div", { className: "editor-loading-text" }, e)
       ]);
     else {
       const r = this._loadingOverlay.querySelector(".editor-loading-text");
@@ -3303,36 +3542,36 @@ class Si extends W {
    * Destroy the editor and clean up
    */
   destroy() {
-    var e, t, i, r, a, n, o, l, c, d;
+    var e, t, i, r, a, o, n, l, c, d;
     this._destroyed = !0;
     for (const h of this._objectUrls)
       try {
         URL.revokeObjectURL(h);
       } catch {
       }
-    this._objectUrls.clear(), (e = this._resizeObserver) == null || e.disconnect(), this._renderer.destroy(), this._cropManager.disable(), this._handleWindowResize && window.removeEventListener("resize", this._handleWindowResize), (t = this._toolbar) == null || t.destroy(), (i = this._categoryCarousel) == null || i.destroy(), (r = this._filterCarousel) == null || r.destroy(), (a = this._filterAdjustments) == null || a.destroy(), (n = this._mobileFilterDrawer) == null || n.destroy(), (o = this._mobileActiveFilters) == null || o.destroy(), (l = this._cropControls) == null || l.destroy(), (c = this._activeFiltersPanel) == null || c.destroy(), (d = this._editorEl) == null || d.remove(), this._container = null, this._state = null, this.emit("destroyed"), this.removeAllListeners();
+    this._objectUrls.clear(), (e = this._resizeObserver) == null || e.disconnect(), this._renderer.destroy(), this._cropManager.disable(), this._handleWindowResize && window.removeEventListener("resize", this._handleWindowResize), (t = this._toolbar) == null || t.destroy(), (i = this._categoryCarousel) == null || i.destroy(), (r = this._filterCarousel) == null || r.destroy(), (a = this._filterAdjustments) == null || a.destroy(), (o = this._mobileFilterDrawer) == null || o.destroy(), (n = this._mobileActiveFilters) == null || n.destroy(), (l = this._cropControls) == null || l.destroy(), (c = this._activeFiltersPanel) == null || c.destroy(), (d = this._editorEl) == null || d.remove(), this._container = null, this._state = null, this.emit("destroyed"), this.removeAllListeners();
   }
 }
-const E = /* @__PURE__ */ new Map(), j = /* @__PURE__ */ new Map();
-function Mt(s, e) {
+const I = /* @__PURE__ */ new Map(), j = /* @__PURE__ */ new Map();
+function zt(s, e) {
   return !Array.isArray(s.mediaTargets) || s.mediaTargets.length === 0 ? !0 : s.mediaTargets.includes(e);
 }
 function m(s) {
   var e;
-  return E.has(s.id), E.set(s.id, s), j.has(s.category) || j.set(s.category, []), (e = j.get(s.category)) == null || e.push(s.id), s;
+  return I.has(s.id), I.set(s.id, s), j.has(s.category) || j.set(s.category, []), (e = j.get(s.category)) == null || e.push(s.id), s;
 }
-function Pt(s) {
-  return E.get(s);
+function Rt(s) {
+  return I.get(s);
 }
-function Q() {
-  return Array.from(E.values());
+function te() {
+  return Array.from(I.values());
 }
-function kt() {
-  Q().map((t) => t.id), Object.entries(b).filter(
+function Tt() {
+  te().map((t) => t.id), Object.entries(y).filter(
     (t) => /Filter$/.test(t[0]) && typeof t[1] == "function"
   ).forEach(([t, i]) => {
     const r = t.replace(/Filter$/, "").replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
-    E.has(r) || m({
+    I.has(r) || m({
       id: r,
       name: t.replace(/Filter$/, ""),
       category: "unlisted",
@@ -3351,20 +3590,20 @@ function kt() {
     });
   });
 }
-function Ft(s) {
-  return (j.get(s) || []).map((t) => E.get(t)).filter(Boolean);
+function Et(s) {
+  return (j.get(s) || []).map((t) => I.get(t)).filter(Boolean);
 }
-function At() {
+function It() {
   return Array.from(j.keys());
 }
-function vi(s) {
-  return E.has(s);
+function Ni(s) {
+  return I.has(s);
 }
-function zt(s) {
-  const e = E.get(s);
+function Bt(s) {
+  const e = I.get(s);
   if (!e)
     return !1;
-  E.delete(s);
+  I.delete(s);
   const t = j.get(e.category);
   if (t) {
     const i = t.indexOf(s);
@@ -3372,12 +3611,12 @@ function zt(s) {
   }
   return !0;
 }
-function Mi(s, e) {
-  const t = E.get(s);
-  return t ? Mt(t, e) : !1;
+function zi(s, e) {
+  const t = I.get(s);
+  return t ? zt(t, e) : !1;
 }
-function Nt() {
-  return Array.from(E.values()).map((s) => ({
+function Xt() {
+  return Array.from(I.values()).map((s) => ({
     id: s.id,
     name: s.name,
     category: s.category,
@@ -3385,17 +3624,17 @@ function Nt() {
   }));
 }
 if (typeof window < "u") {
-  window.__DEBUG_FILTERS_LIST = Array.from(E.keys()), window.getAllFilters = Q, window.getFilter = Pt, window.getFiltersByCategory = Ft, window.getRegisteredFilters = Nt;
+  window.__DEBUG_FILTERS_LIST = Array.from(I.keys()), window.getAllFilters = te, window.getFilter = Rt, window.getFiltersByCategory = Et, window.getRegisteredFilters = Xt;
   const s = m;
   window.registerFilter = (e) => {
     const t = s(e);
-    return window.__DEBUG_FILTERS_LIST = Array.from(E.keys()), t;
+    return window.__DEBUG_FILTERS_LIST = Array.from(I.keys()), t;
   };
 }
 typeof window < "u" && (window.initializeFilterRegistry = window.initializeFilterRegistry || function() {
   return [];
 });
-const { AdjustmentFilter: Rt } = b, { ColorMatrixFilter: Tt } = R, X = {
+const { AdjustmentFilter: Ot } = y, { ColorMatrixFilter: Yt } = R, X = {
   gamma: 1,
   saturation: 1,
   contrast: 1,
@@ -3404,7 +3643,7 @@ const { AdjustmentFilter: Rt } = b, { ColorMatrixFilter: Tt } = R, X = {
   green: 1,
   blue: 1,
   alpha: 1
-}, Et = /* @__PURE__ */ new Set([
+}, Dt = /* @__PURE__ */ new Set([
   "gamma",
   "saturation",
   "contrast",
@@ -3414,7 +3653,7 @@ const { AdjustmentFilter: Rt } = b, { ColorMatrixFilter: Tt } = R, X = {
   "blue",
   "alpha"
 ]);
-function B(s, e) {
+function O(s, e) {
   if (typeof s == "number" && Number.isFinite(s))
     return s;
   if (typeof s == "string") {
@@ -3424,22 +3663,22 @@ function B(s, e) {
   }
   return e;
 }
-function ue(s) {
-  return Et.has(s);
+function fe(s) {
+  return Dt.has(s);
 }
-function It(s) {
+function Lt(s) {
   return {
-    gamma: B(s.gamma, X.gamma),
-    saturation: B(s.saturation, X.saturation),
-    contrast: B(s.contrast, X.contrast),
-    brightness: B(s.brightness, X.brightness),
-    red: B(s.red, X.red),
-    green: B(s.green, X.green),
-    blue: B(s.blue, X.blue),
-    alpha: B(s.alpha, X.alpha)
+    gamma: O(s.gamma, X.gamma),
+    saturation: O(s.saturation, X.saturation),
+    contrast: O(s.contrast, X.contrast),
+    brightness: O(s.brightness, X.brightness),
+    red: O(s.red, X.red),
+    green: O(s.green, X.green),
+    blue: O(s.blue, X.blue),
+    alpha: O(s.alpha, X.alpha)
   };
 }
-function pe(s, e) {
+function me(s, e) {
   s.reset(), s.brightness(e.brightness, !0), s.contrast(e.contrast, !0), s.saturate(e.saturation, !0);
 }
 m({
@@ -3450,28 +3689,28 @@ m({
   // Create an instance of the AdjustmentFilter with the provided parameters
   createFilter: (s) => {
     try {
-      const e = It(s ?? {}), t = { ...e };
+      const e = Lt(s ?? {}), t = { ...e };
       try {
-        const i = new Rt(t), r = i;
-        return r._customParams = { ...e }, r.updateUIParam = function(n, o) {
+        const i = new Ot(t), r = i;
+        return r._customParams = { ...e }, r.updateUIParam = function(o, n) {
           try {
-            if (!ue(n))
+            if (!fe(o))
               return;
-            const l = this._customParams ?? { ...X }, c = B(o, l[n]);
-            l[n] = c, this._customParams = l;
+            const l = this._customParams ?? { ...X }, c = O(n, l[o]);
+            l[o] = c, this._customParams = l;
             const d = this;
-            n in d && (d[n] = c);
+            o in d && (d[o] = c);
           } catch {
           }
         }, i;
       } catch {
-        const r = new Tt(), a = r;
-        return a._customParams = { ...e }, pe(r, e), a.updateUIParam = function(o, l) {
+        const r = new Yt(), a = r;
+        return a._customParams = { ...e }, me(r, e), a.updateUIParam = function(n, l) {
           try {
-            if (!ue(o))
+            if (!fe(n))
               return;
-            const c = this._customParams ?? { ...X }, d = B(l, c[o]);
-            c[o] = d, this._customParams = c, pe(this, c);
+            const c = this._customParams ?? { ...X }, d = O(l, c[n]);
+            c[n] = d, this._customParams = c, me(this, c);
           } catch {
           }
         }, r;
@@ -3575,14 +3814,14 @@ m({
     }
   ]
 });
-const { ColorMatrixFilter: Xt } = R, V = {
+const { ColorMatrixFilter: Vt } = R, V = {
   brightness: 1,
   contrast: 1,
   saturation: 1,
   hue: 0,
   sepia: 0,
   negative: !1
-}, Bt = /* @__PURE__ */ new Set([
+}, Ut = /* @__PURE__ */ new Set([
   "brightness",
   "contrast",
   "saturation",
@@ -3590,10 +3829,10 @@ const { ColorMatrixFilter: Xt } = R, V = {
   "sepia",
   "negative"
 ]);
-function Yt(s) {
-  return Bt.has(s);
+function jt(s) {
+  return Ut.has(s);
 }
-function $(s, e) {
+function W(s, e) {
   if (typeof s == "number" && Number.isFinite(s))
     return s;
   if (typeof s == "string") {
@@ -3603,7 +3842,7 @@ function $(s, e) {
   }
   return e;
 }
-function Ee(s, e) {
+function Be(s, e) {
   if (typeof s == "boolean")
     return s;
   if (typeof s == "string") {
@@ -3614,17 +3853,17 @@ function Ee(s, e) {
   }
   return e;
 }
-function Ot(s) {
+function qt(s) {
   return {
-    brightness: $(s.brightness, V.brightness),
-    contrast: $(s.contrast, V.contrast),
-    saturation: $(s.saturation, V.saturation),
-    hue: $(s.hue, V.hue),
-    sepia: $(s.sepia, V.sepia),
-    negative: Ee(s.negative, V.negative)
+    brightness: W(s.brightness, V.brightness),
+    contrast: W(s.contrast, V.contrast),
+    saturation: W(s.saturation, V.saturation),
+    hue: W(s.hue, V.hue),
+    sepia: W(s.sepia, V.sepia),
+    negative: Be(s.negative, V.negative)
   };
 }
-function fe(s, e) {
+function ge(s, e) {
   s.reset(), e.brightness !== 1 && s.brightness(e.brightness, !0), e.contrast !== 1 && s.contrast(e.contrast, !0), e.saturation !== 1 && s.saturate(e.saturation, !0), e.hue !== 0 && s.hue(e.hue, !0), e.sepia > 0 && s.sepia(!0), e.negative && s.negative(!0);
 }
 m({
@@ -3635,19 +3874,19 @@ m({
   // Create an instance of the ColorMatrixFilter with the provided parameters
   createFilter: (s) => {
     try {
-      const e = Ot(s ?? {}), t = new Xt(), i = t;
-      return i._customParams = { ...e }, fe(t, e), i.updateUIParam = function(a, n) {
+      const e = qt(s ?? {}), t = new Vt(), i = t;
+      return i._customParams = { ...e }, ge(t, e), i.updateUIParam = function(a, o) {
         try {
-          if (!Yt(a))
+          if (!jt(a))
             return;
-          const o = this._customParams ?? { ...V };
+          const n = this._customParams ?? { ...V };
           if (a === "negative")
-            o.negative = Ee(n, o.negative);
+            n.negative = Be(o, n.negative);
           else {
             const l = a;
-            o[l] = $(n, o[l]);
+            n[l] = W(o, n[l]);
           }
-          this._customParams = o, fe(this, o);
+          this._customParams = n, ge(this, n);
         } catch {
         }
       }, t;
@@ -3725,16 +3964,16 @@ m({
     }
   ]
 });
-const me = (s) => Math.max(0, Math.min(1, s));
+const be = (s) => Math.max(0, Math.min(1, s));
 m({
   id: "alpha",
   name: "Alpha",
   category: "adjust",
   description: "Adjust the opacity of the image",
   createFilter: (s) => {
-    const e = me(s.alpha !== void 0 ? Number(s.alpha) : 1), t = new R.AlphaFilter(e);
+    const e = be(s.alpha !== void 0 ? Number(s.alpha) : 1), t = new R.AlphaFilter(e);
     return t.updateUIParam = function(i, r) {
-      i === "alpha" && (this.alpha = me(Number(r)));
+      i === "alpha" && (this.alpha = be(Number(r)));
     }, t;
   },
   defaultParams: {
@@ -3816,10 +4055,10 @@ m({
     }
   ]
 });
-function ge(s, e) {
+function ye(s, e) {
   typeof s.reset == "function" && s.reset(), e.brightness !== 1 && s.brightness(e.brightness, !1), e.contrast !== 1 && s.contrast(e.contrast, !1), e.saturation !== 1 && s.saturate(e.saturation, !1), e.hue !== 0 && s.hue(e.hue, !1), e.sepia && s.sepia(!1), e.negative && s.negative(!1);
 }
-function be(s) {
+function _e(s) {
   return {
     brightness: Number(s.brightness ?? 1),
     contrast: Number(s.contrast ?? 1),
@@ -3837,24 +4076,24 @@ m({
   createFilter: (s) => {
     const e = R.ColorMatrixFilter;
     if (!e) return null;
-    const t = new e(), i = be(s);
-    return t._customParams = { ...i }, ge(t, i), t.updateUIParam = function(r, a) {
-      const n = this._customParams ?? be({});
+    const t = new e(), i = _e(s);
+    return t._customParams = { ...i }, ye(t, i), t.updateUIParam = function(r, a) {
+      const o = this._customParams ?? _e({});
       switch (r) {
         case "brightness":
         case "contrast":
         case "saturation":
         case "hue":
-          n[r] = Number(a);
+          o[r] = Number(a);
           break;
         case "sepia":
         case "negative":
-          n[r] = !!a;
+          o[r] = !!a;
           break;
         default:
           return;
       }
-      this._customParams = n, ge(this, n);
+      this._customParams = o, ye(this, o);
     }, t;
   },
   defaultParams: {
@@ -3924,7 +4163,7 @@ m({
     }
   ]
 });
-const { ColorOverlayFilter: Lt } = b;
+const { ColorOverlayFilter: Ht } = y;
 m({
   id: "colorOverlay",
   name: "Color Overlay",
@@ -3939,7 +4178,7 @@ m({
     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 t = new Lt({
+      const t = new Ht({
         color: e,
         alpha: s.alpha || 0.5
       });
@@ -3947,8 +4186,8 @@ m({
         const a = this._customParams || {};
         switch (this._customParams = a, a[i] = r, i) {
           case "color":
-            let n;
-            typeof r == "string" ? n = parseInt(r.replace("#", "0x"), 16) : n = Number(r), this.color = n, this.uniforms && (this.uniforms.uColor = n);
+            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));
@@ -4000,11 +4239,11 @@ m({
    */
   createFilter: (s) => {
     try {
-      const e = s.color ? s.color.replace("#", "0x") : "0x000000", t = s.distance !== void 0 ? s.distance : 5, i = s.angle !== void 0 ? s.angle : 90, r = s.blur !== void 0 ? s.blur : 2, a = s.quality !== void 0 ? s.quality : 3, n = {
+      const e = s.color ? s.color.replace("#", "0x") : "0x000000", t = s.distance !== void 0 ? s.distance : 5, i = s.angle !== void 0 ? s.angle : 90, r = s.blur !== void 0 ? s.blur : 2, a = s.quality !== void 0 ? s.quality : 3, o = {
         x: t * Math.cos(i * Math.PI / 180),
         y: t * Math.sin(i * Math.PI / 180)
-      }, o = new b.DropShadowFilter({
-        offset: n,
+      }, n = new y.DropShadowFilter({
+        offset: o,
         color: parseInt(e, 16),
         alpha: s.alpha !== void 0 ? s.alpha : 0.5,
         blur: r,
@@ -4014,24 +4253,24 @@ m({
           x: s.pixelSizeX !== void 0 ? s.pixelSizeX : 1,
           y: s.pixelSizeY !== void 0 ? s.pixelSizeY : 1
         }
-      }), l = (h, u, f, _) => {
-        const g = h * u * 2, x = Math.sqrt(f * f + _ * _);
+      }), l = (h, u, p, b) => {
+        const g = h * u * 2, x = Math.sqrt(p * p + b * b);
         return Math.ceil(g + x + 2);
       };
-      o._exportPadding = l(r, a, n.x, n.y), o.padding = Math.max(o.padding ?? 0, o._exportPadding), o._customParams = {
+      n._exportPadding = l(r, a, o.x, o.y), n.padding = Math.max(n.padding ?? 0, n._exportPadding), n._customParams = {
         ...s,
         // Also store the calculated offset for use in updateUIParam
-        _offset: n,
+        _offset: o,
         _distance: t,
         _angle: i
       };
       const c = (h, u) => {
-        const f = Number(h._distance ?? h.distance ?? 5) * u, _ = Number(h._angle ?? h.angle ?? 90), g = Number(h.blur ?? 2) * u, x = Number(h.quality ?? 3), A = {
-          x: f * Math.cos(_ * Math.PI / 180),
-          y: f * Math.sin(_ * Math.PI / 180)
-        }, P = h.color ? String(h.color).replace("#", "0x") : "0x000000", T = new b.DropShadowFilter({
-          offset: A,
-          color: parseInt(P, 16),
+        const p = Number(h._distance ?? h.distance ?? 5) * u, b = Number(h._angle ?? h.angle ?? 90), g = Number(h.blur ?? 2) * u, x = Number(h.quality ?? 3), P = {
+          x: p * Math.cos(b * Math.PI / 180),
+          y: p * Math.sin(b * Math.PI / 180)
+        }, v = h.color ? String(h.color).replace("#", "0x") : "0x000000", T = new y.DropShadowFilter({
+          offset: P,
+          color: parseInt(v, 16),
           alpha: h.alpha !== void 0 ? Number(h.alpha) : 0.5,
           blur: g,
           quality: x,
@@ -4040,24 +4279,24 @@ m({
             x: h.pixelSizeX !== void 0 ? Number(h.pixelSizeX) : 1,
             y: h.pixelSizeY !== void 0 ? Number(h.pixelSizeY) : 1
           }
-        }), N = l(g, x, A.x, A.y);
-        return T._exportPadding = N, T.padding = Math.max(T.padding ?? 0, N), T;
+        }), z = l(g, x, P.x, P.y);
+        return T._exportPadding = z, T.padding = Math.max(T.padding ?? 0, z), T;
       };
-      o.createExportFilter = function(h = {}) {
-        const u = Number.isFinite(h.previewToNativeScale) ? Math.max(1, Number(h.previewToNativeScale)) : 1, f = this._customParams || s;
-        return c(f, u);
-      }, o.getExportPadding = function() {
+      n.createExportFilter = function(h = {}) {
+        const u = Number.isFinite(h.previewToNativeScale) ? Math.max(1, Number(h.previewToNativeScale)) : 1, p = this._customParams || s;
+        return c(p, u);
+      }, n.getExportPadding = function() {
         return Number(this._exportPadding || this.padding || 0);
       };
       const d = (h) => {
         var x;
-        const u = ((x = h._customParams) == null ? void 0 : x._offset) ?? { x: 0, y: 0 }, f = Number(h.blur ?? 0), _ = Number(h.quality ?? 1), g = l(f, _, u.x, u.y);
+        const u = ((x = h._customParams) == null ? void 0 : x._offset) ?? { x: 0, y: 0 }, p = Number(h.blur ?? 0), b = Number(h.quality ?? 1), g = l(p, b, u.x, u.y);
         h._exportPadding = g, h.padding = Math.max(h.padding ?? 0, g);
       };
-      return o.updateUIParam = function(h, u) {
+      return n.updateUIParam = function(h, u) {
         try {
-          const f = this._customParams || {};
-          switch (this._customParams = f, f[h] = u, h) {
+          const p = this._customParams || {};
+          switch (this._customParams = p, p[h] = u, h) {
             case "color":
               typeof u == "string" && (this.color = parseInt(u.replace("#", "0x"), 16));
               break;
@@ -4074,19 +4313,19 @@ m({
               this.shadowOnly = !!u;
               break;
             case "pixelSizeX":
-              this.pixelSizeX = Number(u), f.pixelSizeX = Number(u);
+              this.pixelSizeX = Number(u), p.pixelSizeX = Number(u);
               break;
             case "pixelSizeY":
-              this.pixelSizeY = Number(u), f.pixelSizeY = Number(u);
+              this.pixelSizeY = Number(u), p.pixelSizeY = Number(u);
               break;
             case "distance":
             case "angle": {
-              h === "distance" ? (f._distance = Number(u), f.distance = Number(u)) : (f._angle = Number(u), f.angle = Number(u));
-              const _ = {
-                x: f._distance * Math.cos(f._angle * Math.PI / 180),
-                y: f._distance * Math.sin(f._angle * Math.PI / 180)
+              h === "distance" ? (p._distance = Number(u), p.distance = Number(u)) : (p._angle = Number(u), p.angle = Number(u));
+              const b = {
+                x: p._distance * Math.cos(p._angle * Math.PI / 180),
+                y: p._distance * Math.sin(p._angle * Math.PI / 180)
               };
-              f._offset = _, this.offset = _, d(this);
+              p._offset = b, this.offset = b, d(this);
               break;
             }
             default:
@@ -4097,7 +4336,7 @@ m({
         } catch {
           return this._customParams && (this._customParams[h] = u), !1;
         }
-      }, o;
+      }, n;
     } catch {
       return null;
     }
@@ -4202,7 +4441,7 @@ m({
     }
   ]
 });
-const { ColorMatrixFilter: Dt } = R;
+const { ColorMatrixFilter: $t } = R;
 m({
   id: "grayscale",
   name: "Grayscale",
@@ -4215,14 +4454,14 @@ m({
    */
   createFilter: (s) => {
     try {
-      const e = new Dt();
+      const e = new $t();
       e._customParams = { ...s };
       const t = s.intensity !== void 0 ? s.intensity : 1;
-      return ye(e, t), e.updateUIParam = function(i, r) {
+      return xe(e, t), e.updateUIParam = function(i, r) {
         const a = this._customParams || {};
         switch (this._customParams = a, a[i] = r, i) {
           case "intensity":
-            ye(this, r);
+            xe(this, r);
             break;
           default:
             i in this && (this[i] = r);
@@ -4252,10 +4491,10 @@ m({
     }
   ]
 });
-function ye(s, e) {
+function xe(s, e) {
   s.reset(), s.greyscale(e);
 }
-const { HslAdjustmentFilter: Vt } = b;
+const { HslAdjustmentFilter: Wt } = y;
 m({
   id: "hsl-adjustment",
   name: "HSL Adjustment",
@@ -4267,7 +4506,7 @@ m({
    */
   createFilter: (s) => {
     try {
-      const e = new Vt({
+      const e = new Wt({
         hue: s.hue !== void 0 ? s.hue : 0,
         saturation: s.saturation !== void 0 ? s.saturation : 0,
         lightness: s.lightness !== void 0 ? s.lightness : 0,
@@ -4365,7 +4604,7 @@ m({
     }
   ]
 });
-const { KawaseBlurFilter: Ut } = b;
+const { KawaseBlurFilter: Zt } = y;
 m({
   id: "kawase-blur",
   name: "Kawase Blur",
@@ -4378,7 +4617,7 @@ m({
    */
   createFilter: (s) => {
     try {
-      const e = new Ut({
+      const e = new Zt({
         strength: s.strength || 4,
         quality: s.quality || 3,
         clamp: s.clamp || !1,
@@ -4483,7 +4722,7 @@ m({
     }
   ]
 });
-const { MotionBlurFilter: jt } = b;
+const { MotionBlurFilter: Gt } = y;
 m({
   id: "motion-blur",
   name: "Motion Blur",
@@ -4496,7 +4735,7 @@ m({
    */
   createFilter: (s) => {
     try {
-      const e = new jt({
+      const e = new Gt({
         velocity: {
           x: s.velocityX !== void 0 ? s.velocityX : 0,
           y: s.velocityY !== void 0 ? s.velocityY : 0
@@ -4591,7 +4830,7 @@ m({
     }
   ]
 });
-const { RadialBlurFilter: qt } = b;
+const { RadialBlurFilter: Kt } = y;
 m({
   id: "radial-blur",
   name: "Radial Blur",
@@ -4600,7 +4839,7 @@ m({
   // Create an instance of the RadialBlurFilter with the provided parameters
   createFilter: (s) => {
     try {
-      const e = new qt({
+      const e = new Kt({
         angle: s.angle ?? 20,
         center: { x: s.centerX ?? 0, y: s.centerY ?? 0 },
         kernelSize: s.kernelSize ?? 15,
@@ -4715,7 +4954,7 @@ m({
     }
   ]
 });
-const { TiltShiftFilter: Ht } = b;
+const { TiltShiftFilter: Qt } = y;
 m({
   id: "tilt-shift",
   name: "Tilt Shift",
@@ -4724,20 +4963,20 @@ m({
   // Create an instance of the TiltShiftFilter with the provided parameters
   createFilter: (s) => {
     try {
-      const e = typeof s.blur == "number" ? s.blur : 100, t = typeof s.gradientBlur == "number" ? s.gradientBlur : 600, i = typeof s.startX == "number" ? s.startX : 0, r = typeof s.startY == "number" ? s.startY : 0.5, a = typeof s.endX == "number" ? s.endX : 1, n = typeof s.endY == "number" ? s.endY : 0.5, o = new Ht({
+      const e = typeof s.blur == "number" ? s.blur : 100, t = typeof s.gradientBlur == "number" ? s.gradientBlur : 600, i = typeof s.startX == "number" ? s.startX : 0, r = typeof s.startY == "number" ? s.startY : 0.5, a = typeof s.endX == "number" ? s.endX : 1, o = typeof s.endY == "number" ? s.endY : 0.5, n = new Qt({
         blur: Number(e),
         gradientBlur: Number(t),
         start: { x: Number(i), y: Number(r) },
-        end: { x: Number(a), y: Number(n) }
+        end: { x: Number(a), y: Number(o) }
       });
-      return o._customParams = {
+      return n._customParams = {
         blur: e,
         gradientBlur: t,
         startX: i,
         startY: r,
         endX: a,
-        endY: n
-      }, o.updateUIParam = function(l, c) {
+        endY: o
+      }, n.updateUIParam = function(l, c) {
         try {
           const d = Number(c), h = this._customParams || {};
           switch (this._customParams = h, h[l] = d, l) {
@@ -4765,7 +5004,7 @@ m({
           }
         } catch {
         }
-      }, o;
+      }, n;
     } catch {
       return null;
     }
@@ -4843,7 +5082,7 @@ m({
     }
   ]
 });
-const { ZoomBlurFilter: $t } = b;
+const { ZoomBlurFilter: Jt } = y;
 m({
   id: "zoom-blur",
   name: "Zoom Blur",
@@ -4856,7 +5095,7 @@ m({
    */
   createFilter: (s) => {
     try {
-      const e = new $t({
+      const e = new Jt({
         strength: s.strength || 0.1,
         center: {
           x: s.centerX !== void 0 ? s.centerX : 0.5,
@@ -4970,24 +5209,24 @@ m({
     }
   ]
 });
-const { ColorGradientFilter: _e } = b;
-function Ie(s) {
+const { ColorGradientFilter: Ce } = y;
+function Xe(s) {
   return parseInt(s.replace("#", "0x"), 16);
 }
-function Wt(s) {
+function ei(s) {
   return "#" + s.toString(16).padStart(6, "0");
 }
-function xe(s) {
+function we(s) {
   return {
     offset: Number(s.offset),
-    color: typeof s.color == "string" ? Ie(s.color) : Number(s.color),
+    color: typeof s.color == "string" ? Xe(s.color) : Number(s.color),
     alpha: Number(s.alpha)
   };
 }
-function Ce(s) {
+function Se(s) {
   return {
     offset: s.offset,
-    color: typeof s.color == "number" ? Wt(s.color) : s.color,
+    color: typeof s.color == "number" ? ei(s.color) : s.color,
     alpha: s.alpha
   };
 }
@@ -5000,12 +5239,12 @@ m({
     let t = (s.colorStops || [
       { offset: 0, color: "#ff0000", alpha: 1 },
       { offset: 1, color: "#0000ff", alpha: 1 }
-    ]).map(xe);
+    ]).map(we);
     t.length < 2 && (t = [
       { offset: 0, color: 16711680, alpha: 1 },
       { offset: 1, color: 255, alpha: 1 }
     ]), t.sort((r, a) => r.offset - a.offset);
-    const i = new _e({
+    const i = new Ce({
       type: s.gradientType,
       stops: t,
       angle: s.angle,
@@ -5017,7 +5256,7 @@ m({
       cssGradient: s.cssGradient || ""
     }, i.getSerializableParams = function() {
       var a;
-      const r = Array.isArray(this.stops) ? this.stops.map(Ce) : [];
+      const r = Array.isArray(this.stops) ? this.stops.map(Se) : [];
       return {
         gradientType: this.type,
         colorStops: r,
@@ -5028,41 +5267,41 @@ m({
         cssGradient: ((a = this._customParams) == null ? void 0 : a.cssGradient) ?? ""
       };
     }, i.getColorStopsForUI = function() {
-      return Array.isArray(this.stops) ? this.stops.map(Ce) : [];
+      return Array.isArray(this.stops) ? this.stops.map(Se) : [];
     }, i.getDynamicControls = function() {
       const r = this.getColorStopsForUI(), a = [];
-      return r.forEach((n, o) => {
+      return r.forEach((o, n) => {
         a.push({
-          id: `colorStop-${o}-color`,
+          id: `colorStop-${n}-color`,
           type: "color",
-          label: `Stop ${o + 1} Color`,
-          property: `colorStops[${o}].color`,
-          default: n.color
+          label: `Stop ${n + 1} Color`,
+          property: `colorStops[${n}].color`,
+          default: o.color
         }), a.push({
-          id: `colorStop-${o}-offset`,
+          id: `colorStop-${n}-offset`,
           type: "slider",
-          label: `Stop ${o + 1} Position`,
-          property: `colorStops[${o}].offset`,
+          label: `Stop ${n + 1} Position`,
+          property: `colorStops[${n}].offset`,
           min: 0,
           max: 1,
           step: 0.01,
-          default: n.offset
+          default: o.offset
         }), a.push({
-          id: `colorStop-${o}-alpha`,
+          id: `colorStop-${n}-alpha`,
           type: "slider",
-          label: `Stop ${o + 1} Alpha`,
-          property: `colorStops[${o}].alpha`,
+          label: `Stop ${n + 1} Alpha`,
+          property: `colorStops[${n}].alpha`,
           min: 0,
           max: 1,
           step: 0.01,
-          default: n.alpha
+          default: o.alpha
         });
       }), a;
     }, i.handleButtonAction = function(r) {
       (r === "addColorStop" || r === "removeColorStop") && this.updateUIParam(r, !0);
     }, i.updateUIParam = function(r, a) {
-      const n = this._customParams ?? {};
-      switch (this._customParams = n, r) {
+      const o = this._customParams ?? {};
+      switch (this._customParams = o, r) {
         case "gradientType":
           this.type = Number(a);
           return;
@@ -5075,23 +5314,23 @@ m({
           this.replace = !!a;
           return;
         case "addColorStop": {
-          const o = Array.isArray(this.stops) ? [...this.stops] : [], l = Math.floor(Math.random() * 255) << 16 | Math.floor(Math.random() * 255) << 8 | Math.floor(Math.random() * 255);
-          if (o.length > 0)
-            for (const d of o)
+          const n = Array.isArray(this.stops) ? [...this.stops] : [], l = Math.floor(Math.random() * 255) << 16 | Math.floor(Math.random() * 255) << 8 | Math.floor(Math.random() * 255);
+          if (n.length > 0)
+            for (const d of n)
               d.offset *= 0.8;
-          o.push({ offset: 1, color: l, alpha: 1 }), o.sort((c, d) => c.offset - d.offset), this.stops = o;
+          n.push({ offset: 1, color: l, alpha: 1 }), n.sort((c, d) => c.offset - d.offset), this.stops = n;
           return;
         }
         case "removeColorStop": {
-          const o = Array.isArray(this.stops) ? [...this.stops] : [];
-          o.length > 2 && (o.pop(), this.stops = o);
+          const n = Array.isArray(this.stops) ? [...this.stops] : [];
+          n.length > 2 && (n.pop(), this.stops = n);
           return;
         }
         case "cssGradient": {
-          const o = typeof a == "string" ? a.trim() : "";
-          if (n.cssGradient = o, !o) return;
+          const n = typeof a == "string" ? a.trim() : "";
+          if (o.cssGradient = n, !n) return;
           try {
-            const l = new _e({ css: o });
+            const l = new Ce({ css: n });
             this.type = l.type, this.angle = l.angle, this.stops = [...l.stops];
           } catch {
           }
@@ -5099,16 +5338,16 @@ m({
         }
         case "colorStops": {
           if (!Array.isArray(a)) return;
-          const o = a.map(xe);
-          o.sort((l, c) => l.offset - c.offset), this.stops = o;
+          const n = a.map(we);
+          n.sort((l, c) => l.offset - c.offset), this.stops = n;
           return;
         }
         default: {
-          const o = /^colorStops\[(\d+)\]\.(offset|color|alpha)$/.exec(r);
-          if (o) {
-            const [, l, c] = o, d = Number(l), h = Array.isArray(this.stops) ? [...this.stops] : [];
+          const n = /^colorStops\[(\d+)\]\.(offset|color|alpha)$/.exec(r);
+          if (n) {
+            const [, l, c] = n, d = Number(l), h = Array.isArray(this.stops) ? [...this.stops] : [];
             if (d < 0 || d >= h.length) return;
-            c === "color" ? h[d].color = typeof a == "string" ? Ie(a) : Number(a) : (c === "offset" || c === "alpha") && (h[d][c] = Number(a)), this.stops = h;
+            c === "color" ? h[d].color = typeof a == "string" ? Xe(a) : Number(a) : (c === "offset" || c === "alpha") && (h[d][c] = Number(a)), this.stops = h;
           }
         }
       }
@@ -5206,7 +5445,7 @@ m({
   // Create an instance of the ColorMapFilter with the provided parameters
   createFilter: (s) => {
     try {
-      const e = b.ColorMapFilter;
+      const e = y.ColorMapFilter;
       if (!e)
         return null;
       let t = null;
@@ -5217,8 +5456,8 @@ m({
         mix: s.mix
       });
       return i._customParams = { ...s }, i.updateUIParam = function(r, a) {
-        const n = this._customParams || {};
-        switch (this._customParams = n, n[r] = a, r) {
+        const o = this._customParams || {};
+        switch (this._customParams = o, o[r] = a, r) {
           case "texturePath":
             a && (this.colorMap = R.Texture.from(a));
             break;
@@ -5281,7 +5520,7 @@ m({
     }
   ]
 });
-const Zt = b.ColorReplaceFilter;
+const ti = y.ColorReplaceFilter;
 m({
   id: "color-replace",
   name: "Color Replace",
@@ -5298,14 +5537,14 @@ m({
       s.originalColor && (typeof s.originalColor == "string" ? e = parseInt(s.originalColor.replace("#", "0x"), 16) : typeof s.originalColor == "number" && (e = s.originalColor));
       let t = 255;
       s.targetColor && (typeof s.targetColor == "string" ? t = parseInt(s.targetColor.replace("#", "0x"), 16) : typeof s.targetColor == "number" && (t = s.targetColor));
-      const i = new Zt({
+      const i = new ti({
         originalColor: e,
         targetColor: t,
         tolerance: s.tolerance || 0.4
       });
       return i._customParams = { ...s }, i.updateUIParam = function(r, a) {
-        const n = this._customParams || {};
-        switch (this._customParams = n, n[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;
@@ -5362,7 +5601,7 @@ m({
     }
   ]
 });
-const Gt = b.MultiColorReplaceFilter;
+const ii = y.MultiColorReplaceFilter;
 m({
   id: "multi-color-replace",
   name: "Multi-Color Replace",
@@ -5388,7 +5627,7 @@ m({
         const i = typeof s.originalColor3 == "string" ? parseInt(s.originalColor3.replace("#", "0x"), 16) : s.originalColor3, r = typeof s.targetColor3 == "string" ? parseInt(s.targetColor3.replace("#", "0x"), 16) : s.targetColor3;
         e.push([i, r]);
       }
-      const t = new Gt(
+      const t = new ii(
         e,
         s.tolerance || 0.05,
         3
@@ -5397,20 +5636,20 @@ m({
       return t._customParams = { ...s }, t.updateUIParam = function(i, r) {
         const a = this._customParams || {};
         if (this._customParams = a, a[i] = r, i === "originalColor1" || i === "targetColor1" || i === "originalColor2" || i === "targetColor2" || i === "originalColor3" || i === "targetColor3" || i === "enableThirdPair") {
-          const n = [];
+          const o = [];
           if (a.originalColor1 && a.targetColor1) {
-            const o = typeof a.originalColor1 == "string" ? parseInt(a.originalColor1.replace("#", "0x"), 16) : a.originalColor1, l = typeof a.targetColor1 == "string" ? parseInt(a.targetColor1.replace("#", "0x"), 16) : a.targetColor1;
-            n.push([o, l]);
+            const n = typeof a.originalColor1 == "string" ? parseInt(a.originalColor1.replace("#", "0x"), 16) : a.originalColor1, l = typeof a.targetColor1 == "string" ? parseInt(a.targetColor1.replace("#", "0x"), 16) : a.targetColor1;
+            o.push([n, l]);
           }
           if (a.originalColor2 && a.targetColor2) {
-            const o = typeof a.originalColor2 == "string" ? parseInt(a.originalColor2.replace("#", "0x"), 16) : a.originalColor2, l = typeof a.targetColor2 == "string" ? parseInt(a.targetColor2.replace("#", "0x"), 16) : a.targetColor2;
-            n.push([o, l]);
+            const n = typeof a.originalColor2 == "string" ? parseInt(a.originalColor2.replace("#", "0x"), 16) : a.originalColor2, l = typeof a.targetColor2 == "string" ? parseInt(a.targetColor2.replace("#", "0x"), 16) : a.targetColor2;
+            o.push([n, l]);
           }
           if (a.enableThirdPair && a.originalColor3 && a.targetColor3) {
-            const o = typeof a.originalColor3 == "string" ? parseInt(a.originalColor3.replace("#", "0x"), 16) : a.originalColor3, l = typeof a.targetColor3 == "string" ? parseInt(a.targetColor3.replace("#", "0x"), 16) : a.targetColor3;
-            n.push([o, l]);
+            const n = typeof a.originalColor3 == "string" ? parseInt(a.originalColor3.replace("#", "0x"), 16) : a.originalColor3, l = typeof a.targetColor3 == "string" ? parseInt(a.targetColor3.replace("#", "0x"), 16) : a.targetColor3;
+            o.push([n, l]);
           }
-          this.replacements = n, this.refresh();
+          this.replacements = o, this.refresh();
         } else i === "tolerance" ? this.tolerance = r : i in this && (this[i] = r);
         return !0;
       }, t;
@@ -5499,7 +5738,7 @@ m({
     }
   ]
 });
-const { RGBSplitFilter: Kt } = b;
+const { RGBSplitFilter: ri } = y;
 m({
   id: "rgb-split",
   name: "RGB Split",
@@ -5520,40 +5759,40 @@ m({
       }, i = {
         x: s.blueX !== void 0 ? s.blueX : 0,
         y: s.blueY !== void 0 ? s.blueY : 0
-      }, r = new Kt({
+      }, r = new ri({
         red: e,
         green: t,
         blue: i
       });
-      return r._customParams = { ...s }, r.updateUIParam = function(a, n) {
+      return r._customParams = { ...s }, r.updateUIParam = function(a, o) {
         try {
-          const o = this._customParams || {};
-          switch (this._customParams = o, o[a] = n, a) {
+          const n = this._customParams || {};
+          switch (this._customParams = n, n[a] = o, a) {
             case "redX":
-              this.redX = Number(n);
+              this.redX = Number(o);
               break;
             case "redY":
-              this.redY = Number(n);
+              this.redY = Number(o);
               break;
             case "greenX":
-              this.greenX = Number(n);
+              this.greenX = Number(o);
               break;
             case "greenY":
-              this.greenY = Number(n);
+              this.greenY = Number(o);
               break;
             case "blueX":
-              this.blueX = Number(n);
+              this.blueX = Number(o);
               break;
             case "blueY":
-              this.blueY = Number(n);
+              this.blueY = Number(o);
               break;
             default:
-              a in this && (this[a] = n);
+              a in this && (this[a] = o);
               break;
           }
           return !0;
         } catch {
-          return this._customParams && (this._customParams[a] = n), !1;
+          return this._customParams && (this._customParams[a] = o), !1;
         }
       }, r;
     } catch {
@@ -5633,7 +5872,7 @@ m({
     }
   ]
 });
-const { AdvancedBloomFilter: Qt } = b;
+const { AdvancedBloomFilter: si } = y;
 m({
   id: "advanced-bloom",
   name: "Advanced Bloom",
@@ -5642,7 +5881,7 @@ m({
   // Create an instance of the AdvancedBloomFilter with the provided parameters
   createFilter: (s) => {
     try {
-      const e = new Qt({
+      const e = new si({
         threshold: s.threshold || 0.5,
         bloomScale: s.bloomScale || 1,
         brightness: s.brightness || 1,
@@ -5789,7 +6028,7 @@ m({
     }
   ]
 });
-const Jt = b.AsciiFilter;
+const ai = y.AsciiFilter;
 m({
   id: "ascii",
   name: "ASCII",
@@ -5801,7 +6040,7 @@ m({
       const e = typeof s.size == "number" ? s.size : 8;
       let t = s.color;
       typeof t == "string" && t.startsWith("#") && (t = parseInt(t.replace("#", "0x"), 16));
-      const i = s.replaceColor === !0, r = new Jt({
+      const i = s.replaceColor === !0, r = new ai({
         size: e,
         color: t,
         replaceColor: i
@@ -5810,21 +6049,21 @@ m({
         size: e,
         color: t,
         replaceColor: i
-      }, r.updateUIParam = function(a, n) {
+      }, r.updateUIParam = function(a, o) {
         try {
-          const o = this._customParams || {};
-          switch (this._customParams = o, o[a] = n, a) {
+          const n = this._customParams || {};
+          switch (this._customParams = n, n[a] = o, a) {
             case "size":
-              this.size = Number(n);
+              this.size = Number(o);
               break;
             case "color":
-              typeof n == "string" && n.startsWith("#") ? (o.color = n, this.color = parseInt(n.replace("#", "0x"), 16)) : this.color = n;
+              typeof o == "string" && o.startsWith("#") ? (n.color = o, this.color = parseInt(o.replace("#", "0x"), 16)) : this.color = o;
               break;
             case "replaceColor":
-              this.replaceColor = !!n;
+              this.replaceColor = !!o;
               break;
             default:
-              a in this && (this[a] = n);
+              a in this && (this[a] = o);
               break;
           }
         } catch {
@@ -5868,7 +6107,7 @@ m({
     }
   ]
 });
-const ei = b.BackdropBlurFilter;
+const oi = y.BackdropBlurFilter;
 m({
   id: "backdrop-blur",
   name: "Backdrop Blur",
@@ -5877,7 +6116,7 @@ m({
   // Create an instance of the BackdropBlurFilter with the provided parameters
   createFilter: (s) => {
     try {
-      const e = new ei({
+      const e = new oi({
         // Higher strength values (20-50) make the effect more noticeable
         strength: s.strength || 20,
         quality: s.quality || 4,
@@ -5975,7 +6214,7 @@ m({
     }
   ]
 });
-const { BevelFilter: ti } = b;
+const { BevelFilter: ni } = y;
 m({
   id: "bevel",
   name: "Bevel",
@@ -5987,7 +6226,7 @@ m({
    */
   createFilter: (s) => {
     try {
-      const e = s.lightColor ? s.lightColor.replace("#", "0x") : "0xffffff", t = s.shadowColor ? s.shadowColor.replace("#", "0x") : "0x000000", i = new ti({
+      const e = s.lightColor ? s.lightColor.replace("#", "0x") : "0xffffff", t = s.shadowColor ? s.shadowColor.replace("#", "0x") : "0x000000", i = new ni({
         rotation: s.rotation !== void 0 ? s.rotation : 45,
         thickness: s.thickness !== void 0 ? s.thickness : 2,
         lightColor: parseInt(e, 16),
@@ -5997,8 +6236,8 @@ m({
       });
       return i._customParams = { ...s }, i.updateUIParam = function(r, a) {
         try {
-          const n = this._customParams || {};
-          switch (this._customParams = n, n[r] = a, r) {
+          const o = this._customParams || {};
+          switch (this._customParams = o, o[r] = a, r) {
             case "rotation":
               this.rotation = Number(a);
               break;
@@ -6007,8 +6246,8 @@ m({
               break;
             case "lightColor":
               if (typeof a == "string") {
-                const o = parseInt(a.replace("#", "0x"), 16);
-                this.lightColor = o;
+                const n = parseInt(a.replace("#", "0x"), 16);
+                this.lightColor = n;
               }
               break;
             case "lightAlpha":
@@ -6016,8 +6255,8 @@ m({
               break;
             case "shadowColor":
               if (typeof a == "string") {
-                const o = parseInt(a.replace("#", "0x"), 16);
-                this.shadowColor = o;
+                const n = parseInt(a.replace("#", "0x"), 16);
+                this.shadowColor = n;
               }
               break;
             case "shadowAlpha":
@@ -6103,7 +6342,7 @@ m({
     }
   ]
 });
-const { BloomFilter: ii } = b;
+const { BloomFilter: li } = y;
 m({
   id: "bloom",
   name: "Bloom/Glow",
@@ -6112,7 +6351,7 @@ m({
   // Create an instance of the BloomFilter with the provided parameters
   createFilter: (s) => {
     try {
-      const e = typeof s.strengthX == "number" ? s.strengthX : 2, t = typeof s.strengthY == "number" ? s.strengthY : 2, i = typeof s.quality == "number" ? s.quality : 4, r = typeof s.resolution == "number" ? s.resolution : 1, a = typeof s.kernelSize == "number" ? s.kernelSize : 5, n = new ii({
+      const e = typeof s.strengthX == "number" ? s.strengthX : 2, t = typeof s.strengthY == "number" ? s.strengthY : 2, i = typeof s.quality == "number" ? s.quality : 4, r = typeof s.resolution == "number" ? s.resolution : 1, a = typeof s.kernelSize == "number" ? s.kernelSize : 5, o = new li({
         strength: {
           x: Number(e),
           y: Number(t)
@@ -6121,17 +6360,17 @@ m({
         resolution: Number(r),
         kernelSize: Number(a)
       });
-      return n._customParams = {
+      return o._customParams = {
         strengthX: e,
         strengthY: t,
         quality: i,
         resolution: r,
         kernelSize: a
-      }, n.updateUIParam = function(o, l) {
+      }, o.updateUIParam = function(n, l) {
         var c, d;
         try {
           const h = Number(l), u = this._customParams || {};
-          switch (this._customParams = u, u[o] = h, o) {
+          switch (this._customParams = u, u[n] = h, n) {
             case "strengthX":
               this.strength && typeof this.strength == "object" && (this.strength.x = h, (c = this._updateStrength) == null || c.call(this));
               break;
@@ -6148,12 +6387,12 @@ m({
               this.kernelSize = h;
               break;
             default:
-              o in this && (this[o] = h);
+              n in this && (this[n] = h);
               break;
           }
         } catch {
         }
-      }, n;
+      }, o;
     } catch {
       return null;
     }
@@ -6215,7 +6454,7 @@ m({
     }
   ]
 });
-const { BulgePinchFilter: we } = b, ie = (s) => {
+const { BulgePinchFilter: ve } = y, ae = (s) => {
   const e = Math.max(0, Number(s) || 0);
   return Math.ceil(e + 2);
 };
@@ -6226,15 +6465,15 @@ m({
   description: "Creates a bulge or pinch effect in a circular area",
   createFilter: (s) => {
     try {
-      const e = s.centerX ?? 0.5, t = s.centerY ?? 0.5, i = s.radius ?? 100, r = s.strength ?? 1, a = new we({
+      const e = s.centerX ?? 0.5, t = s.centerY ?? 0.5, i = s.radius ?? 100, r = s.strength ?? 1, a = new ve({
         center: { x: e, y: t },
         radius: i,
         strength: r
-      }), n = ie(i);
-      a.padding = Math.max(a.padding ?? 0, n), a._exportPadding = n, a._customParams = { ...s };
-      const o = (l) => {
+      }), o = ae(i);
+      a.padding = Math.max(a.padding ?? 0, o), a._exportPadding = o, a._customParams = { ...s };
+      const n = (l) => {
         var h;
-        const c = Number(((h = l._customParams) == null ? void 0 : h.radius) ?? l.radius ?? 0), d = ie(c);
+        const c = Number(((h = l._customParams) == null ? void 0 : h.radius) ?? l.radius ?? 0), d = ae(c);
         l._exportPadding = d, l.padding = Math.max(l.padding ?? 0, d);
       };
       return a.updateUIParam = function(l, c) {
@@ -6247,7 +6486,7 @@ m({
             this.center || (this.center = { x: 0.5, y: 0.5 }), this.center.y = c;
             break;
           case "radius":
-            this.radius = Number(c), o(this);
+            this.radius = Number(c), n(this);
             break;
           case "strength":
             this.strength = Number(c);
@@ -6258,15 +6497,15 @@ m({
         }
         return !0;
       }, a.createExportFilter = function(l = {}) {
-        const c = Number.isFinite(l.previewToNativeScale) ? Math.max(1, Number(l.previewToNativeScale)) : 1, d = this._customParams || s, h = Number(d.radius ?? 100) * c, u = new we({
+        const c = Number.isFinite(l.previewToNativeScale) ? Math.max(1, Number(l.previewToNativeScale)) : 1, d = this._customParams || s, h = Number(d.radius ?? 100) * c, u = new ve({
           center: {
             x: Number(d.centerX ?? 0.5),
             y: Number(d.centerY ?? 0.5)
           },
           radius: h,
           strength: Number(d.strength ?? 1)
-        }), f = ie(h);
-        return u._exportPadding = f, u.padding = Math.max(u.padding ?? 0, f), u;
+        }), p = ae(h);
+        return u._exportPadding = p, u.padding = Math.max(u.padding ?? 0, p), u;
       }, a.getExportPadding = function() {
         return Number(this._exportPadding || this.padding || 0);
       }, a;
@@ -6323,7 +6562,7 @@ m({
     }
   ]
 });
-const { ConvolutionFilter: ri } = b, q = {
+const { ConvolutionFilter: ci } = y, H = {
   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],
@@ -6356,25 +6595,25 @@ m({
         ];
       else {
         const i = s.preset;
-        e = q[i] || q.normal;
+        e = H[i] || H.normal;
       }
-      const t = new ri(e, s.width || 200, s.height || 200);
+      const t = new ci(e, s.width || 200, s.height || 200);
       return t._customParams = { ...s }, t.updateUIParam = function(i, r) {
         const a = this._customParams || {};
         switch (this._customParams = a, a[i] = r, i) {
           case "preset":
             if (!a.customMatrix) {
-              const n = r;
-              q[n] && (this.matrix = q[n]);
+              const o = r;
+              H[o] && (this.matrix = H[o]);
             }
             break;
           case "customMatrix":
             if (r) {
-              const n = this.matrix;
-              a.m00 = n[0], a.m01 = n[1], a.m02 = n[2], a.m10 = n[3], a.m11 = n[4], a.m12 = n[5], a.m20 = n[6], a.m21 = n[7], a.m22 = n[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 n = a.preset;
-              this.matrix = q[n] || q.normal;
+              const o = a.preset;
+              this.matrix = H[o] || H.normal;
             }
             break;
           case "m00":
@@ -6387,7 +6626,7 @@ m({
           case "m21":
           case "m22":
             if (a.customMatrix) {
-              const n = [...this.matrix], l = {
+              const o = [...this.matrix], l = {
                 m00: 0,
                 m01: 1,
                 m02: 2,
@@ -6398,7 +6637,7 @@ m({
                 m21: 7,
                 m22: 8
               }[i];
-              l !== void 0 && (n[l] = r, this.matrix = n);
+              l !== void 0 && (o[l] = r, this.matrix = o);
             }
             break;
           case "width":
@@ -6569,7 +6808,7 @@ m({
     }
   ]
 });
-const { CrossHatchFilter: si } = b;
+const { CrossHatchFilter: hi } = y;
 m({
   id: "cross-hatch",
   name: "Cross Hatch",
@@ -6579,7 +6818,7 @@ m({
   // Note: CrossHatchFilter has NO parameters according to PixiJS examples
   createFilter: (s) => {
     try {
-      const e = new si();
+      const e = new hi();
       return e.updateUIParam = function(t, i) {
         return !0;
       }, e;
@@ -6612,7 +6851,7 @@ m({
         vignettingBlur: typeof s.vignettingBlur == "number" ? s.vignettingBlur : 0.3,
         time: typeof s.time == "number" ? s.time : 0,
         seed: typeof s.seed == "number" ? s.seed : Math.random()
-      }, t = new b.CRTFilter(e);
+      }, t = new y.CRTFilter(e);
       return t._customParams = { ...e }, t.updateUIParam = function(i, r) {
         try {
           const a = this._customParams || {};
@@ -6776,7 +7015,7 @@ m({
     }
   ]
 });
-const ai = R.DisplacementFilter, ni = R.Sprite, re = R.Texture;
+const di = R.DisplacementFilter, ui = R.Sprite, oe = R.Texture;
 m({
   id: "displacement",
   // ID must match what the application expects
@@ -6789,41 +7028,41 @@ m({
       const e = s.mapTexture || "/assets/images/displacement_map.png";
       let t;
       try {
-        t = re.from(e), t.source.addressMode = "repeat";
+        t = oe.from(e), t.source.addressMode = "repeat";
       } catch {
-        const n = document.createElement("canvas");
-        n.width = 256, n.height = 256;
-        const o = n.getContext("2d");
-        if (o) {
-          o.fillStyle = "#ffffff", o.fillRect(0, 0, n.width, n.height), o.fillStyle = "#000000";
+        const o = document.createElement("canvas");
+        o.width = 256, o.height = 256;
+        const n = o.getContext("2d");
+        if (n) {
+          n.fillStyle = "#ffffff", n.fillRect(0, 0, o.width, o.height), n.fillStyle = "#000000";
           for (let l = 0; l < 10; l++)
             for (let c = 0; c < 10; c++)
-              (l + c) % 2 === 0 && o.fillRect(l * 25, c * 25, 25, 25);
+              (l + c) % 2 === 0 && n.fillRect(l * 25, c * 25, 25, 25);
         }
-        t = re.from(n);
+        t = oe.from(o);
       }
-      const i = new ni(t), r = new ai(i, s.scale || 50);
-      return r.scale.x = s.scaleX || 50, r.scale.y = s.scaleY || 50, r._customParams = { ...s }, r._displacementSprite = i, r.updateUIParam = function(a, n) {
-        const o = this._customParams || {};
-        switch (this._customParams = o, o[a] = n, a) {
+      const i = new ui(t), r = new di(i, s.scale || 50);
+      return r.scale.x = s.scaleX || 50, r.scale.y = s.scaleY || 50, r._customParams = { ...s }, r._displacementSprite = i, r.updateUIParam = function(a, o) {
+        const n = this._customParams || {};
+        switch (this._customParams = n, n[a] = o, a) {
           case "scaleX":
-            this.scale.x = n;
+            this.scale.x = o;
             break;
           case "scaleY":
-            this.scale.y = n;
+            this.scale.y = o;
             break;
           case "mapTexture":
             try {
               const l = this._displacementSprite;
               if (l) {
-                const c = re.from(n);
+                const c = oe.from(o);
                 c.source.addressMode = "repeat", l.texture = c;
               }
             } catch {
             }
             break;
           default:
-            a in this ? this[a] = n : a in this.scale && (this.scale[a] = n);
+            a in this ? this[a] = o : a in this.scale && (this.scale[a] = o);
             break;
         }
         return !0;
@@ -6887,7 +7126,7 @@ m({
         scale: typeof s.scale == "number" ? s.scale : 1,
         angle: typeof s.angle == "number" ? s.angle : 5,
         grayscale: s.grayscale === !0
-      }, t = new b.DotFilter(e);
+      }, t = new y.DotFilter(e);
       return t._customParams = { ...e }, t.updateUIParam = function(i, r) {
         try {
           const a = this._customParams || {};
@@ -6949,7 +7188,7 @@ m({
     }
   ]
 });
-const { EmbossFilter: oi } = b;
+const { EmbossFilter: pi } = y;
 m({
   id: "emboss",
   name: "Emboss",
@@ -6958,7 +7197,7 @@ m({
   // Create an instance of the Emboss filter with the provided parameters
   createFilter: (s) => {
     try {
-      const e = typeof s.strength == "number" ? s.strength : 5, t = new oi(e);
+      const e = typeof s.strength == "number" ? s.strength : 5, t = new pi(e);
       return t._customParams = {
         strength: e
       }, t.updateUIParam = function(i, r) {
@@ -6966,8 +7205,8 @@ m({
           const a = this._customParams || {};
           switch (this._customParams = a, a[i] = r, i) {
             case "strength":
-              const n = Number(r);
-              a.strength = n, this.strength = n;
+              const o = Number(r);
+              a.strength = o, this.strength = o;
               break;
             default:
               i in this && (this[i] = r);
@@ -6998,7 +7237,7 @@ m({
     }
   ]
 });
-const { GlitchFilter: li } = b, D = {
+const { GlitchFilter: fi } = y, L = {
   TRANSPARENT: 0,
   ORIGINAL: 1,
   LOOP: 2,
@@ -7012,7 +7251,7 @@ m({
   description: "Apply digital distortion and glitch effects",
   createFilter: (s) => {
     try {
-      const e = { x: s.redX, y: s.redY }, t = { x: s.greenX, y: s.greenY }, i = { x: s.blueX, y: s.blueY }, r = new li({
+      const e = { x: s.redX, y: s.redY }, t = { x: s.greenX, y: s.greenY }, i = { x: s.blueX, y: s.blueY }, r = new fi({
         slices: s.slices,
         offset: s.offset,
         direction: s.direction,
@@ -7027,16 +7266,16 @@ m({
       });
       r.animating = s.animating || !1, r._customParams = { ...s }, typeof r.refresh == "function" && r.refresh();
       let a = null;
-      const n = () => {
-        r.animating && (r.seed = Math.random()), a = requestAnimationFrame(n);
+      const o = () => {
+        r.animating && (r.seed = Math.random()), a = requestAnimationFrame(o);
       };
-      return r.animating && (a = requestAnimationFrame(n)), r._stopAnimation = () => {
+      return r.animating && (a = requestAnimationFrame(o)), r._stopAnimation = () => {
         a !== null && (cancelAnimationFrame(a), a = null);
-      }, r.updateUIParam = function(o, l) {
+      }, r.updateUIParam = function(n, l) {
         const c = this._customParams || {};
-        switch (this._customParams = c, c[o] = l, o) {
+        switch (this._customParams = c, c[n] = l, n) {
           case "animating":
-            this.animating = l, l && !a && (a = requestAnimationFrame(n));
+            this.animating = l, l && !a && (a = requestAnimationFrame(o));
             break;
           case "slices":
             this.slices = Math.round(l);
@@ -7044,17 +7283,17 @@ m({
           case "redX":
           case "redY":
             const d = this.red;
-            o === "redX" ? d.x = l : d.y = l, this.red = d;
+            n === "redX" ? d.x = l : d.y = l, this.red = d;
             break;
           case "greenX":
           case "greenY":
             const h = this.green;
-            o === "greenX" ? h.x = l : h.y = l, this.green = h;
+            n === "greenX" ? h.x = l : h.y = l, this.green = h;
             break;
           case "blueX":
           case "blueY":
             const u = this.blue;
-            o === "blueX" ? u.x = l : u.y = l, this.blue = u;
+            n === "blueX" ? u.x = l : u.y = l, this.blue = u;
             break;
           case "seed":
             this.animating || (this.seed = l);
@@ -7075,10 +7314,10 @@ m({
           case "average":
           case "minSize":
           case "sampleSize":
-            o in this && (this[o] = l);
+            n in this && (this[n] = l);
             break;
           default:
-            o in this && (this[o] = l);
+            n in this && (this[n] = l);
             break;
         }
       }, r;
@@ -7090,7 +7329,7 @@ m({
     slices: 10,
     offset: 100,
     direction: 0,
-    fillMode: D.LOOP,
+    fillMode: L.LOOP,
     // LOOP mode looks better for the demo
     seed: 0.5,
     average: !1,
@@ -7153,13 +7392,13 @@ m({
       label: "Fill Mode",
       property: "fillMode",
       options: [
-        { value: D.TRANSPARENT, label: "Transparent" },
-        { value: D.ORIGINAL, label: "Original" },
-        { value: D.LOOP, label: "Loop" },
-        { value: D.CLAMP, label: "Clamp" },
-        { value: D.MIRROR, label: "Mirror" }
+        { value: L.TRANSPARENT, label: "Transparent" },
+        { value: L.ORIGINAL, label: "Original" },
+        { value: L.LOOP, label: "Loop" },
+        { value: L.CLAMP, label: "Clamp" },
+        { value: L.MIRROR, label: "Mirror" }
       ],
-      default: D.LOOP
+      default: L.LOOP
     },
     {
       id: "seed",
@@ -7253,7 +7492,7 @@ m({
     }
   ]
 });
-const { GlowFilter: ci } = b;
+const { GlowFilter: mi } = y;
 m({
   id: "glow",
   name: "Glow",
@@ -7262,7 +7501,7 @@ m({
   // Create an instance of the GlowFilter with the provided parameters
   createFilter: (s) => {
     try {
-      const e = parseInt(s.color.replace("#", "0x"), 16), t = new ci({
+      const e = parseInt(s.color.replace("#", "0x"), 16), t = new mi({
         distance: s.distance || 10,
         outerStrength: s.outerStrength || 4,
         innerStrength: s.innerStrength || 0,
@@ -7388,7 +7627,7 @@ m({
     }
   ]
 });
-const { GodrayFilter: hi } = b;
+const { GodrayFilter: gi } = y;
 m({
   id: "godray",
   name: "Godray",
@@ -7397,7 +7636,7 @@ m({
   // Create an instance of the GodrayFilter with the provided parameters
   createFilter: (s) => {
     try {
-      const e = new hi({
+      const e = new gi({
         angle: s.angle || 30,
         parallel: s.parallel ?? !0,
         center: {
@@ -7550,7 +7789,7 @@ m({
     }
   ]
 });
-const di = b.SimpleLightmapFilter, Se = R.Texture;
+const bi = y.SimpleLightmapFilter, Me = R.Texture;
 m({
   id: "lightmap",
   name: "Lightmap",
@@ -7575,14 +7814,14 @@ m({
         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 n = Se.from(r);
-      let o;
+      const o = Me.from(r);
+      let n;
       try {
-        typeof t == "string" && t.startsWith("#") ? o = parseInt(t.replace("#", "0x"), 16) : o = 0;
+        typeof t == "string" && t.startsWith("#") ? n = parseInt(t.replace("#", "0x"), 16) : n = 0;
       } catch {
-        o = 0;
+        n = 0;
       }
-      const l = new di(n, o, i);
+      const l = new bi(o, n, i);
       return l._customParams = {
         textureType: e,
         color: t,
@@ -7595,21 +7834,21 @@ m({
               h.textureType = d;
               const u = document.createElement("canvas");
               u.width = 256, u.height = 256;
-              const f = u.getContext("2d");
-              if (f) {
+              const p = u.getContext("2d");
+              if (p) {
                 if (d === "spotlight") {
-                  f.fillStyle = "black", f.fillRect(0, 0, 256, 256);
-                  const g = f.createRadialGradient(128, 128, 5, 128, 128, 80);
-                  g.addColorStop(0, "white"), g.addColorStop(0.5, "rgba(255, 255, 255, 0.5)"), g.addColorStop(1, "rgba(0, 0, 0, 0)"), f.fillStyle = g, f.beginPath(), f.arc(128, 128, 100, 0, Math.PI * 2), f.fill();
+                  p.fillStyle = "black", p.fillRect(0, 0, 256, 256);
+                  const g = p.createRadialGradient(128, 128, 5, 128, 128, 80);
+                  g.addColorStop(0, "white"), g.addColorStop(0.5, "rgba(255, 255, 255, 0.5)"), g.addColorStop(1, "rgba(0, 0, 0, 0)"), p.fillStyle = g, p.beginPath(), p.arc(128, 128, 100, 0, Math.PI * 2), p.fill();
                 } else if (d === "softlight") {
-                  const g = f.createLinearGradient(0, 0, 256, 256);
-                  g.addColorStop(0, "white"), g.addColorStop(0.3, "rgba(220, 220, 220, 1)"), g.addColorStop(0.7, "rgba(150, 150, 150, 1)"), g.addColorStop(1, "rgba(80, 80, 80, 1)"), f.fillStyle = g, f.fillRect(0, 0, 256, 256);
+                  const g = p.createLinearGradient(0, 0, 256, 256);
+                  g.addColorStop(0, "white"), g.addColorStop(0.3, "rgba(220, 220, 220, 1)"), g.addColorStop(0.7, "rgba(150, 150, 150, 1)"), g.addColorStop(1, "rgba(80, 80, 80, 1)"), p.fillStyle = g, p.fillRect(0, 0, 256, 256);
                 } else {
-                  const g = f.createRadialGradient(128, 128, 10, 128, 128, 160);
-                  g.addColorStop(0, "white"), g.addColorStop(0.3, "rgba(220, 220, 220, 1)"), g.addColorStop(0.6, "rgba(150, 150, 150, 1)"), g.addColorStop(1, "black"), f.fillStyle = g, f.fillRect(0, 0, 256, 256);
+                  const g = p.createRadialGradient(128, 128, 10, 128, 128, 160);
+                  g.addColorStop(0, "white"), g.addColorStop(0.3, "rgba(220, 220, 220, 1)"), g.addColorStop(0.6, "rgba(150, 150, 150, 1)"), g.addColorStop(1, "black"), p.fillStyle = g, p.fillRect(0, 0, 256, 256);
                 }
-                const _ = Se.from(u);
-                if (this.lightMap = _, this.enabled !== void 0) {
+                const b = Me.from(u);
+                if (this.lightMap = b, this.enabled !== void 0) {
                   const g = this.enabled;
                   this.enabled = !1, setTimeout(() => {
                     this.enabled = g;
@@ -7681,7 +7920,7 @@ m({
     }
   ]
 });
-const { NoiseFilter: ui } = R;
+const { NoiseFilter: yi } = R;
 m({
   id: "noise",
   name: "Noise",
@@ -7689,7 +7928,7 @@ m({
   description: "Add random noise to the image",
   createFilter: (s) => {
     try {
-      const e = new ui({
+      const e = new yi({
         noise: s.noise || 0.5,
         seed: s.seed || Math.random()
       });
@@ -7701,8 +7940,8 @@ m({
       return e.animating && (t = requestAnimationFrame(i)), e._stopAnimation = () => {
         t !== null && (cancelAnimationFrame(t), t = null);
       }, e.updateUIParam = function(r, a) {
-        const n = this._customParams || {};
-        switch (this._customParams = n, n[r] = a, r) {
+        const o = this._customParams || {};
+        switch (this._customParams = o, o[r] = a, r) {
           case "animating":
             this.animating = a, a && !t && (t = requestAnimationFrame(i));
             break;
@@ -7766,7 +8005,7 @@ m({
     }
   ]
 });
-const { OldFilmFilter: pi } = b;
+const { OldFilmFilter: _i } = y;
 m({
   id: "old-film",
   name: "Old Film",
@@ -7774,7 +8013,7 @@ m({
   description: "Apply a vintage film effect with scratches and grain",
   createFilter: (s) => {
     try {
-      const e = new pi({
+      const e = new _i({
         sepia: s.sepia,
         noise: s.noise,
         noiseSize: s.noiseSize,
@@ -7794,8 +8033,8 @@ m({
       return e.animating && (t = requestAnimationFrame(i)), e._stopAnimation = () => {
         t !== null && (cancelAnimationFrame(t), t = null);
       }, e.updateUIParam = function(r, a) {
-        const n = this._customParams || {};
-        switch (this._customParams = n, n[r] = a, r) {
+        const o = this._customParams || {};
+        switch (this._customParams = o, o[r] = a, r) {
           case "animating":
             this.animating = a, a && !t && (t = requestAnimationFrame(i));
             break;
@@ -7955,7 +8194,7 @@ m({
     }
   ]
 });
-const { OutlineFilter: fi } = b;
+const { OutlineFilter: xi } = y;
 m({
   id: "outline",
   name: "Outline",
@@ -7965,7 +8204,7 @@ m({
     try {
       let e = s.color;
       typeof e == "string" && (e = parseInt(e.replace("#", "0x"), 16));
-      const t = new fi({
+      const t = new xi({
         thickness: s.thickness || 4,
         color: e,
         alpha: s.alpha || 1,
@@ -8055,7 +8294,7 @@ m({
     }
   ]
 });
-const { PixelateFilter: mi } = b;
+const { PixelateFilter: Ci } = y;
 m({
   id: "pixelate",
   name: "Pixelate",
@@ -8063,7 +8302,7 @@ m({
   description: "Create a pixelated or mosaic effect",
   createFilter: (s) => {
     try {
-      const e = new mi(
+      const e = new Ci(
         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(t, i) {
@@ -8146,7 +8385,7 @@ m({
     }
   ]
 });
-const { ReflectionFilter: gi } = b;
+const { ReflectionFilter: wi } = y;
 m({
   id: "reflection",
   // ID must match what the application expects
@@ -8163,7 +8402,7 @@ m({
         waveLength: new Float32Array([s.wavelengthStart ?? 30, s.wavelengthEnd ?? 100]),
         alpha: new Float32Array([s.alphaStart ?? 1, s.alphaEnd ?? 1]),
         time: s.time ?? 0
-      }, t = new gi(e);
+      }, t = new wi(e);
       return t._customParams = { ...s }, t.animating = s.animating ?? !1, t.updateUIParam = function(i, r) {
         const a = this._customParams || {};
         switch (this._customParams = a, a[i] = r, i) {
@@ -8314,7 +8553,7 @@ m({
     }
   ]
 });
-const { ShockwaveFilter: bi } = b;
+const { ShockwaveFilter: Si } = y;
 m({
   id: "shockwave",
   // ID must match what the application expects
@@ -8324,18 +8563,18 @@ m({
   // Create an instance of the ShockwaveFilter with the provided parameters
   createFilter: (s) => {
     try {
-      const e = s.centerX ?? 0.5, t = s.centerY ?? 0.5, i = { x: e, y: t }, r = s.amplitude ?? 30, a = s.wavelength ?? 160, n = s.speed ?? 500, o = s.brightness ?? 1, l = s.radius ?? -1, c = s.time ?? 0, d = new bi({
+      const e = s.centerX ?? 0.5, t = s.centerY ?? 0.5, i = { x: e, y: t }, r = s.amplitude ?? 30, a = s.wavelength ?? 160, o = s.speed ?? 500, n = s.brightness ?? 1, l = s.radius ?? -1, c = s.time ?? 0, d = new Si({
         center: i,
         amplitude: r,
         wavelength: a,
-        speed: n,
-        brightness: o,
+        speed: o,
+        brightness: n,
         radius: l,
         time: c
       });
       return d._customParams = { ...s }, d.animating = s.animating ?? !1, d.updateUIParam = function(h, u) {
-        const f = this._customParams || {};
-        switch (this._customParams = f, f[h] = u, h) {
+        const p = this._customParams || {};
+        switch (this._customParams = p, p[h] = u, h) {
           case "centerX":
             this.center || (this.center = { x: 0.5, y: 0.5 }), this.center.x = u;
             break;
@@ -8466,7 +8705,7 @@ m({
     }
   ]
 });
-const { SimplexNoiseFilter: yi } = b;
+const { SimplexNoiseFilter: vi } = y;
 m({
   id: "simplex-noise",
   name: "Simplex Noise",
@@ -8474,7 +8713,7 @@ m({
   description: "Apply procedural noise to create texture effects",
   createFilter: (s) => {
     try {
-      const e = s.animating ? 0 : s.offsetZ || 0, t = new yi({
+      const e = s.animating ? 0 : s.offsetZ || 0, t = new vi({
         strength: s.strength,
         noiseScale: s.noiseScale,
         offsetX: s.offsetX,
@@ -8489,20 +8728,20 @@ m({
       };
       return t.animating && (i = requestAnimationFrame(a)), t._stopAnimation = () => {
         i !== null && (cancelAnimationFrame(i), i = null);
-      }, t.updateUIParam = function(n, o) {
+      }, t.updateUIParam = function(o, n) {
         const l = this._customParams || {};
-        switch (this._customParams = l, l[n] = o, n) {
+        switch (this._customParams = l, l[o] = n, o) {
           case "animating":
-            this.animating = o, o && !i && (i = requestAnimationFrame(a));
+            this.animating = n, n && !i && (i = requestAnimationFrame(a));
             break;
           case "animationSpeed":
-            this.animationSpeed = o;
+            this.animationSpeed = n;
             break;
           case "offsetZ":
-            this.animating || (this.offsetZ = o);
+            this.animating || (this.offsetZ = n);
             break;
           case "randomizeSeed":
-            if (o) {
+            if (n) {
               const c = () => Math.random() * 100 - 50;
               this.offsetX = c(), this.offsetY = c(), this.offsetZ = c(), l.offsetX = this.offsetX, l.offsetY = this.offsetY, l.offsetZ = this.offsetZ;
             }
@@ -8512,10 +8751,10 @@ m({
           case "offsetX":
           case "offsetY":
           case "step":
-            n in this && (this[n] = o);
+            o in this && (this[o] = n);
             break;
           default:
-            n in this && (this[n] = o);
+            o in this && (this[o] = n);
             break;
         }
       }, t;
@@ -8621,13 +8860,13 @@ m({
     }
   ]
 });
-const { TwistFilter: _i } = b, Xe = (s) => Math.ceil(Math.max(0, Number(s) || 0) + 2), ve = (s, e = 1) => {
-  const t = Math.max(1, Number(s._sourceWidth ?? 0)), i = Math.max(1, Number(s._sourceHeight ?? 0)), r = Math.min(t, i), a = Number(s.centerX ?? 0.5), n = Number(s.centerY ?? 0.5), o = Number(s.radius ?? 0.25), l = Number(s.angle ?? 4), c = a * t * e, d = n * i * e, h = o * r * e, u = new _i({
+const { TwistFilter: Mi } = y, Oe = (s) => Math.ceil(Math.max(0, Number(s) || 0) + 2), ke = (s, e = 1) => {
+  const t = Math.max(1, Number(s._sourceWidth ?? 0)), i = Math.max(1, Number(s._sourceHeight ?? 0)), r = Math.min(t, i), a = Number(s.centerX ?? 0.5), o = Number(s.centerY ?? 0.5), n = Number(s.radius ?? 0.25), l = Number(s.angle ?? 4), c = a * t * e, d = o * i * e, h = n * r * e, u = new Mi({
     offset: { x: c, y: d },
     radius: h,
     angle: l
-  }), f = Xe(h);
-  return u.padding = Math.max(u.padding ?? 0, f), u._exportPadding = f, u;
+  }), p = Oe(h);
+  return u.padding = Math.max(u.padding ?? 0, p), u._exportPadding = p, u;
 };
 m({
   id: "twist",
@@ -8643,17 +8882,17 @@ m({
         angle: s.angle ?? 4,
         _sourceWidth: s._sourceWidth,
         _sourceHeight: s._sourceHeight
-      }, t = ve(e, 1);
+      }, t = ke(e, 1);
       return t._customParams = { ...e }, t.updateUIParam = function(i, r) {
         const a = this._customParams || {};
         this._customParams = a, a[i] = r;
-        const n = Math.max(1, Number(a._sourceWidth ?? 0)), o = Math.max(1, Number(a._sourceHeight ?? 0)), l = Math.min(n, o), c = Number(a.centerX ?? 0.5), d = Number(a.centerY ?? 0.5), h = Number(a.radius ?? 0.25), u = Number(a.angle ?? 4);
-        this.offset && (this.offset.x = c * n, this.offset.y = d * o), this.radius = h * l, this.angle = u;
-        const f = Xe(this.radius);
-        return this._exportPadding = f, this.padding = Math.max(this.padding ?? 0, f), !0;
+        const o = Math.max(1, Number(a._sourceWidth ?? 0)), n = Math.max(1, Number(a._sourceHeight ?? 0)), l = Math.min(o, n), c = Number(a.centerX ?? 0.5), d = Number(a.centerY ?? 0.5), h = Number(a.radius ?? 0.25), u = Number(a.angle ?? 4);
+        this.offset && (this.offset.x = c * o, this.offset.y = d * n), this.radius = h * l, this.angle = u;
+        const p = Oe(this.radius);
+        return this._exportPadding = p, this.padding = Math.max(this.padding ?? 0, p), !0;
       }, t.createExportFilter = function(i = {}) {
         const r = Number.isFinite(i.previewToNativeScale) ? Math.max(1, Number(i.previewToNativeScale)) : 1, a = this._customParams || e;
-        return ve(a, r);
+        return ke(a, r);
       }, t.getExportPadding = function() {
         return Number(this._exportPadding || this.padding || 0);
       }, t;
@@ -8715,8 +8954,8 @@ m({
     }
   ]
 });
-const { AdjustmentFilter: xi } = b;
-function K(s) {
+const { AdjustmentFilter: ki } = y;
+function J(s) {
   const e = typeof s == "string" ? parseInt(s.replace("#", "0x"), 16) : s;
   return [
     (e >> 16 & 255) / 255,
@@ -8724,14 +8963,14 @@ function K(s) {
     (e & 255) / 255
   ];
 }
-class Ci extends xi {
+class Pi extends ki {
   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 = K(e.color)) : (this._colorValue = "#" + e.color.toString(16).padStart(6, "0"), this._colorRgb = K(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 = J(e.color)) : (this._colorValue = "#" + e.color.toString(16).padStart(6, "0"), this._colorRgb = J(e.color))), this.updateVignette();
   }
   /**
    * Updates the filter parameters to simulate a vignette effect
@@ -8757,7 +8996,7 @@ class Ci extends xi {
     return this._colorValue;
   }
   set color(e) {
-    typeof e == "string" ? (this._colorValue = e, this._colorRgb = K(e)) : (this._colorValue = "#" + e.toString(16).padStart(6, "0"), this._colorRgb = K(e)), this.updateVignette();
+    typeof e == "string" ? (this._colorValue = e, this._colorRgb = J(e)) : (this._colorValue = "#" + e.toString(16).padStart(6, "0"), this._colorRgb = J(e)), this.updateVignette();
   }
 }
 m({
@@ -8767,7 +9006,7 @@ m({
   description: "Add a classic darkened border effect to the image",
   createFilter: (s) => {
     try {
-      const e = new Ci({
+      const e = new Pi({
         radius: s.radius || 0.8,
         strength: s.strength || 1,
         color: s.color || "#000000"
@@ -8831,22 +9070,22 @@ m({
     }
   ]
 });
-function Pi(s) {
+function Ri(s) {
   try {
     let e = [], t = [];
     try {
-      e = Q(), e.length === 0 && kt();
+      e = te(), e.length === 0 && Tt();
     } catch {
     }
     const i = s == null ? void 0 : s.disabled;
     if (Array.isArray(i) && i.length > 0) {
       let r = 0;
       for (const a of i)
-        zt(a) && r++;
+        Bt(a) && r++;
       r > 0;
     }
     try {
-      e = Q(), t = At();
+      e = te(), t = It();
     } catch {
       e || (e = []), t || (t = []);
     }
@@ -8856,38 +9095,38 @@ function Pi(s) {
   }
 }
 export {
-  ae as C,
-  le as E,
-  ut as F,
-  He as P,
-  pt as R,
-  ft as T,
-  Si as V,
-  Pt as a,
-  Ft as b,
-  At as c,
-  se as d,
-  p as e,
-  Pe as f,
-  Q as g,
-  vi as h,
-  Pi as i,
-  O as j,
-  Re as k,
-  Te as l,
-  Ne as m,
-  ze as n,
-  Ae as o,
-  oe as p,
-  Me as q,
+  le as C,
+  he as E,
+  gt as F,
+  We as P,
+  bt as R,
+  yt as T,
+  Ai as V,
+  Rt as a,
+  Et as b,
+  It as c,
+  ne as d,
+  f as e,
+  Fe as f,
+  te as g,
+  Ni as h,
+  Ri as i,
+  E as j,
+  Ee as k,
+  Ie as l,
+  Te as m,
+  Re as n,
+  ze as o,
+  ce as p,
+  Pe as q,
   m as r,
-  W as s,
-  vt as t,
-  qe as u,
-  wt as v,
-  ht as w,
-  kt as x,
-  Mi as y,
-  Nt as z
+  G as s,
+  At as t,
+  $e as u,
+  Pt as v,
+  ft as w,
+  Tt as x,
+  zi as y,
+  Xt as z
 };
-//# sourceMappingURL=editor-CYj5y5bp.js.map
+//# sourceMappingURL=editor-Bj9-m03S.js.map