@codingfactory/mediables-vue 2.18.1 → 2.18.3

package/dist/{editor-OIsQEaJg.js → editor-DAJxTvzM.js}

@@ -2,7 +2,7 @@ var nt = Object.defineProperty;
 var ot = (a, e, t) => e in a ? nt(a, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : a[e] = t;
 var ve = (a, e, t) => ot(a, typeof e != "symbol" ? e + "" : e, t);
 import * as v from "pixi-filters";
-import * as D from "pixi.js";
+import * as I from "pixi.js";
 class de {
   constructor() {
     this._events = /* @__PURE__ */ new Map();
@@ -41,7 +41,7 @@ const lt = Object.freeze([
   "Times New Roman",
   "Courier New",
   "Verdana"
-]), Te = Object.freeze(["normal", "multiply", "screen", "overlay"]), he = Object.freeze({ x: 0.2, y: 0.2, width: 0.6, height: 0.18 }), H = Object.freeze({
+]), ze = Object.freeze(["normal", "multiply", "screen", "overlay"]), he = Object.freeze({ x: 0.2, y: 0.2, width: 0.6, height: 0.18 }), H = Object.freeze({
   fontFamily: "Inter",
   fontSize: 64,
   fontWeight: 700,
@@ -50,7 +50,7 @@ const lt = Object.freeze([
   align: "center",
   lineHeight: 1.2,
   letterSpacing: 0
-}), E = Object.freeze({
+}), B = Object.freeze({
   stroke: Object.freeze({ enabled: !1, color: "#000000", width: 0 }),
   shadow: Object.freeze({ enabled: !1, color: "#000000", alpha: 0.5, blur: 0, distance: 0, angle: 45 }),
   glow: Object.freeze({ enabled: !1, color: "#ffffff", alpha: 0.5, blur: 0 }),
@@ -405,7 +405,7 @@ class ct extends de {
    * @returns {string}
    */
   _normalizeBlendMode(e, t = "normal") {
-    return Te.includes(e) ? e : Te.includes(t) ? t : "normal";
+    return ze.includes(e) ? e : ze.includes(t) ? t : "normal";
   }
   /**
    * @param {*} value
@@ -468,38 +468,38 @@ class ct extends de {
    */
   _normalizeTextEffects(e, t = null) {
     const r = e && typeof e == "object" ? e : {}, i = t && typeof t == "object" ? t : {}, s = {
-      stroke: { ...E.stroke, ...i.stroke && typeof i.stroke == "object" ? i.stroke : {} },
-      shadow: { ...E.shadow, ...i.shadow && typeof i.shadow == "object" ? i.shadow : {} },
-      glow: { ...E.glow, ...i.glow && typeof i.glow == "object" ? i.glow : {} },
-      backdrop: { ...E.backdrop, ...i.backdrop && typeof i.backdrop == "object" ? i.backdrop : {} }
+      stroke: { ...B.stroke, ...i.stroke && typeof i.stroke == "object" ? i.stroke : {} },
+      shadow: { ...B.shadow, ...i.shadow && typeof i.shadow == "object" ? i.shadow : {} },
+      glow: { ...B.glow, ...i.glow && typeof i.glow == "object" ? i.glow : {} },
+      backdrop: { ...B.backdrop, ...i.backdrop && typeof i.backdrop == "object" ? i.backdrop : {} }
     }, n = r.stroke && typeof r.stroke == "object" ? r.stroke : {}, o = r.shadow && typeof r.shadow == "object" ? r.shadow : {}, l = r.glow && typeof r.glow == "object" ? r.glow : {}, c = r.backdrop && typeof r.backdrop == "object" ? r.backdrop : {};
     return {
       stroke: {
         enabled: this._normalizeBoolean(n.enabled, s.stroke.enabled),
         color: this._normalizeTextColor(n.color, s.stroke.color),
-        width: this._clampNumber(n.width, 0, 80, this._clampNumber(s.stroke.width, 0, 80, E.stroke.width))
+        width: this._clampNumber(n.width, 0, 80, this._clampNumber(s.stroke.width, 0, 80, B.stroke.width))
       },
       shadow: {
         enabled: this._normalizeBoolean(o.enabled, s.shadow.enabled),
         color: this._normalizeTextColor(o.color, s.shadow.color),
-        alpha: this._clampNumber(o.alpha, 0, 1, this._clampNumber(s.shadow.alpha, 0, 1, E.shadow.alpha)),
-        blur: this._clampNumber(o.blur, 0, 120, this._clampNumber(s.shadow.blur, 0, 120, E.shadow.blur)),
-        distance: this._clampNumber(o.distance, 0, 200, this._clampNumber(s.shadow.distance, 0, 200, E.shadow.distance)),
-        angle: this._normalizeDegrees(o.angle ?? s.shadow.angle ?? E.shadow.angle)
+        alpha: this._clampNumber(o.alpha, 0, 1, this._clampNumber(s.shadow.alpha, 0, 1, B.shadow.alpha)),
+        blur: this._clampNumber(o.blur, 0, 120, this._clampNumber(s.shadow.blur, 0, 120, B.shadow.blur)),
+        distance: this._clampNumber(o.distance, 0, 200, this._clampNumber(s.shadow.distance, 0, 200, B.shadow.distance)),
+        angle: this._normalizeDegrees(o.angle ?? s.shadow.angle ?? B.shadow.angle)
       },
       glow: {
         enabled: this._normalizeBoolean(l.enabled, s.glow.enabled),
         color: this._normalizeTextColor(l.color, s.glow.color),
-        alpha: this._clampNumber(l.alpha, 0, 1, this._clampNumber(s.glow.alpha, 0, 1, E.glow.alpha)),
-        blur: this._clampNumber(l.blur, 0, 120, this._clampNumber(s.glow.blur, 0, 120, E.glow.blur))
+        alpha: this._clampNumber(l.alpha, 0, 1, this._clampNumber(s.glow.alpha, 0, 1, B.glow.alpha)),
+        blur: this._clampNumber(l.blur, 0, 120, this._clampNumber(s.glow.blur, 0, 120, B.glow.blur))
       },
       backdrop: {
         enabled: this._normalizeBoolean(c.enabled, s.backdrop.enabled),
         color: this._normalizeTextColor(c.color, s.backdrop.color),
-        opacity: this._clampNumber(c.opacity, 0, 1, this._clampNumber(s.backdrop.opacity, 0, 1, E.backdrop.opacity)),
-        padding: this._clampNumber(c.padding, 0, 200, this._clampNumber(s.backdrop.padding, 0, 200, E.backdrop.padding)),
-        radius: this._clampNumber(c.radius, 0, 200, this._clampNumber(s.backdrop.radius, 0, 200, E.backdrop.radius)),
-        blur: this._clampNumber(c.blur, 0, 80, this._clampNumber(s.backdrop.blur, 0, 80, E.backdrop.blur))
+        opacity: this._clampNumber(c.opacity, 0, 1, this._clampNumber(s.backdrop.opacity, 0, 1, B.backdrop.opacity)),
+        padding: this._clampNumber(c.padding, 0, 200, this._clampNumber(s.backdrop.padding, 0, 200, B.backdrop.padding)),
+        radius: this._clampNumber(c.radius, 0, 200, this._clampNumber(s.backdrop.radius, 0, 200, B.backdrop.radius)),
+        blur: this._clampNumber(c.blur, 0, 80, this._clampNumber(s.backdrop.blur, 0, 80, B.backdrop.blur))
       }
     };
   }
@@ -998,7 +998,7 @@ class ct extends de {
 function ht() {
   return new ct();
 }
-const dt = Object.freeze(["normal", "multiply", "screen", "overlay"]), I = Object.freeze({
+const dt = Object.freeze(["normal", "multiply", "screen", "overlay"]), E = Object.freeze({
   stroke: Object.freeze({ enabled: !1, color: "#000000", width: 0 }),
   shadow: Object.freeze({ enabled: !1, color: "#000000", alpha: 0.5, blur: 0, distance: 0, angle: 45 }),
   glow: Object.freeze({ enabled: !1, color: "#ffffff", alpha: 0.5, blur: 0 }),
@@ -1349,30 +1349,30 @@ class ut extends de {
     return {
       stroke: {
         enabled: r.enabled === !0,
-        color: this._supportedTextColor(r.color, I.stroke.color),
-        width: this._clampNumber(r.width, 0, 80, I.stroke.width)
+        color: this._supportedTextColor(r.color, E.stroke.color),
+        width: this._clampNumber(r.width, 0, 80, E.stroke.width)
       },
       shadow: {
         enabled: i.enabled === !0,
-        color: this._supportedTextColor(i.color, I.shadow.color),
-        alpha: this._clampNumber(i.alpha, 0, 1, I.shadow.alpha),
-        blur: this._clampNumber(i.blur, 0, 120, I.shadow.blur),
-        distance: this._clampNumber(i.distance, 0, 200, I.shadow.distance),
-        angle: this._normalizeDegrees(i.angle ?? I.shadow.angle)
+        color: this._supportedTextColor(i.color, E.shadow.color),
+        alpha: this._clampNumber(i.alpha, 0, 1, E.shadow.alpha),
+        blur: this._clampNumber(i.blur, 0, 120, E.shadow.blur),
+        distance: this._clampNumber(i.distance, 0, 200, E.shadow.distance),
+        angle: this._normalizeDegrees(i.angle ?? E.shadow.angle)
       },
       glow: {
         enabled: s.enabled === !0,
-        color: this._supportedTextColor(s.color, I.glow.color),
-        alpha: this._clampNumber(s.alpha, 0, 1, I.glow.alpha),
-        blur: this._clampNumber(s.blur, 0, 120, I.glow.blur)
+        color: this._supportedTextColor(s.color, E.glow.color),
+        alpha: this._clampNumber(s.alpha, 0, 1, E.glow.alpha),
+        blur: this._clampNumber(s.blur, 0, 120, E.glow.blur)
       },
       backdrop: {
         enabled: n.enabled === !0,
-        color: this._supportedTextColor(n.color, I.backdrop.color),
-        opacity: this._clampNumber(n.opacity, 0, 1, I.backdrop.opacity),
-        padding: this._clampNumber(n.padding, 0, 200, I.backdrop.padding),
-        radius: this._clampNumber(n.radius, 0, 200, I.backdrop.radius),
-        blur: this._clampNumber(n.blur, 0, 80, I.backdrop.blur)
+        color: this._supportedTextColor(n.color, E.backdrop.color),
+        opacity: this._clampNumber(n.opacity, 0, 1, E.backdrop.opacity),
+        padding: this._clampNumber(n.padding, 0, 200, E.backdrop.padding),
+        radius: this._clampNumber(n.radius, 0, 200, E.backdrop.radius),
+        blur: this._clampNumber(n.blur, 0, 80, E.backdrop.blur)
       }
     };
   }
@@ -1750,50 +1750,50 @@ class ut extends de {
       S > 0 && (_ += S);
     }
     const C = Math.max(Math.ceil(_), 64), k = (x) => {
-      var pe, fe, O, me;
-      const S = Math.ceil(o + 2 * x), z = Math.ceil(l + 2 * x), F = new n.Container(), B = [], V = (b = null) => {
+      var pe, fe, D, me;
+      const S = Math.ceil(o + 2 * x), T = Math.ceil(l + 2 * x), F = new n.Container(), L = [], V = (b = null) => {
         const w = new n.Sprite(this.originalTexture);
         w.x = x, w.y = x, w.scale.set(1, 1), w.alpha = b ? this._layerOpacity(b) : 1, b && this._applyLayerFilterInstances(w, b, {
           forExport: !0,
           previewToNativeScale: u,
           sourceWidth: o,
           sourceHeight: l
-        }), g.length > 0 && (w.filters = g, w.filterArea = new n.Rectangle(0, 0, o, l)), F.addChild(w), B.push(w);
+        }), g.length > 0 && (w.filters = g, w.filterArea = new n.Rectangle(0, 0, o, l)), F.addChild(w), L.push(w);
       }, M = (b) => {
-        var T, le, ce;
-        const w = (T = this._layerDisplayObjects.get(b.id)) == null ? void 0 : T.displayObject, G = (w == null ? void 0 : w.texture) || (this._isSubjectLayer(b) ? this.originalTexture : null);
+        var z, le, ce;
+        const w = (z = this._layerDisplayObjects.get(b.id)) == null ? void 0 : z.displayObject, G = (w == null ? void 0 : w.texture) || (this._isSubjectLayer(b) ? this.originalTexture : null);
         if (!G || typeof n.Sprite != "function") return !1;
-        const j = new n.Sprite(G);
-        return j.__sourceWidth = Number(((le = b.source) == null ? void 0 : le.originalWidth) || (w == null ? void 0 : w.__sourceWidth) || G.width || o), j.__sourceHeight = Number(((ce = b.source) == null ? void 0 : ce.originalHeight) || (w == null ? void 0 : w.__sourceHeight) || G.height || l), this._fitDisplayObjectToRect(j, b, { x, y: x, width: o, height: l }), j.alpha = this._layerOpacity(b), !m && this._isSubjectLayer(b) && g.length > 0 && (j.filters = g, j.filterArea = new n.Rectangle(0, 0, o, l)), this._applyLayerEffects(n, j, b), this._applyLayerFilterInstances(j, b, {
+        const O = new n.Sprite(G);
+        return O.__sourceWidth = Number(((le = b.source) == null ? void 0 : le.originalWidth) || (w == null ? void 0 : w.__sourceWidth) || G.width || o), O.__sourceHeight = Number(((ce = b.source) == null ? void 0 : ce.originalHeight) || (w == null ? void 0 : w.__sourceHeight) || G.height || l), this._fitDisplayObjectToRect(O, b, { x, y: x, width: o, height: l }), O.alpha = this._layerOpacity(b), !m && this._isSubjectLayer(b) && g.length > 0 && (O.filters = g, O.filterArea = new n.Rectangle(0, 0, o, l)), this._applyLayerEffects(n, O, b), this._applyLayerFilterInstances(O, b, {
           forExport: !0,
           previewToNativeScale: u,
           sourceWidth: o,
           sourceHeight: l
-        }), F.addChild(j), B.push(j), !0;
-      }, L = (b) => {
-        var le, ce, ze;
-        const w = this._backgroundFillForLayer(b), G = this._backgroundColorForLayer(b), j = { x, y: x, width: o, height: l };
-        let T = null;
+        }), F.addChild(O), L.push(O), !0;
+      }, R = (b) => {
+        var le, ce, Te;
+        const w = this._backgroundFillForLayer(b), G = this._backgroundColorForLayer(b), O = { x, y: x, width: o, height: l };
+        let z = null;
         if (G && typeof n.Graphics == "function")
-          T = new n.Graphics(), T.rect(x, x, o, l).fill(G);
+          z = new n.Graphics(), z.rect(x, x, o, l).fill(G);
         else if ((w == null ? void 0 : w.kind) === "gradient" && typeof n.Sprite == "function") {
           const $ = this._createGradientTexture(n, w, o, l);
           if (!$) return !1;
-          T = new n.Sprite($), T.__ownsTexture = !0, T.__sourceWidth = o, T.__sourceHeight = l, this._fitDisplayObjectToRect(T, b, j);
+          z = new n.Sprite($), z.__ownsTexture = !0, z.__sourceWidth = o, z.__sourceHeight = l, this._fitDisplayObjectToRect(z, b, O);
         } else if ((w == null ? void 0 : w.kind) === "media") {
           const $ = (le = this._layerDisplayObjects.get(b.id)) == null ? void 0 : le.displayObject, ge = $ == null ? void 0 : $.texture;
           if (!ge) return !1;
-          T = this._createBackgroundSprite(n, ge, w.fit), T.__sourceWidth = Number(((ce = w.source) == null ? void 0 : ce.originalWidth) || $.__sourceWidth || ge.width || 1), T.__sourceHeight = Number(((ze = w.source) == null ? void 0 : ze.originalHeight) || $.__sourceHeight || ge.height || 1), this._fitDisplayObjectToRect(T, b, j);
+          z = this._createBackgroundSprite(n, ge, w.fit), z.__sourceWidth = Number(((ce = w.source) == null ? void 0 : ce.originalWidth) || $.__sourceWidth || ge.width || 1), z.__sourceHeight = Number(((Te = w.source) == null ? void 0 : Te.originalHeight) || $.__sourceHeight || ge.height || 1), this._fitDisplayObjectToRect(z, b, O);
         }
-        return T ? (T.alpha = this._layerOpacity(b), this._applyLayerEffects(n, T, b), this._applyLayerFilterInstances(T, b, {
+        return z ? (z.alpha = this._layerOpacity(b), this._applyLayerEffects(n, z, b), this._applyLayerFilterInstances(z, b, {
           forExport: !0,
           previewToNativeScale: u,
           sourceWidth: o,
           sourceHeight: l
-        }), F.addChild(T), B.push(T), !0) : !1;
+        }), F.addChild(z), L.push(z), !0) : !1;
       }, X = (b) => {
         const w = this._createTextDisplayObjectForLayer(n, b);
-        return w ? (this._fitTextDisplayObjectToRect(w, b, { x, y: x, width: o, height: l }), w.alpha = this._layerOpacity(b), F.addChild(w), B.push(w), !0) : !1;
+        return w ? (this._fitTextDisplayObjectToRect(w, b, { x, y: x, width: o, height: l }), w.alpha = this._layerOpacity(b), F.addChild(w), L.push(w), !0) : !1;
       }, ee = p, ne = m;
       if (ne) {
         for (const b of ee.layers)
@@ -1810,14 +1810,14 @@ class ut extends de {
               M(b) || V(b);
               continue;
             }
-            L(b);
+            R(b);
           }
       } else
         V();
       !ne && ((pe = F.children) == null ? void 0 : pe.length) === 0 && V();
       const oe = n.RenderTexture.create({
         width: S,
-        height: z,
+        height: T,
         resolution: 1
       }), we = ((fe = F.children) == null ? void 0 : fe.length) ?? 0;
       try {
@@ -1827,45 +1827,45 @@ class ut extends de {
           clear: !0,
           clearColor: [0, 0, 0, 0]
         });
-        const b = (me = (O = this.app.renderer.extract) == null ? void 0 : O.canvas) == null ? void 0 : me.call(O, oe);
-        return b ? { canvas: b, width: S, height: z, margin: x, childCount: we } : null;
+        const b = (me = (D = this.app.renderer.extract) == null ? void 0 : D.canvas) == null ? void 0 : me.call(D, oe);
+        return b ? { canvas: b, width: S, height: T, margin: x, childCount: we } : null;
       } finally {
-        for (const b of B)
+        for (const b of L)
           b.filters = null;
         F.removeChildren();
-        for (const b of B) {
+        for (const b of L) {
           const w = (b == null ? void 0 : b.__ownsTexture) === !0;
           b.destroy({ children: !1, texture: w, textureSource: w });
         }
         F.destroy({ children: !1 }), oe.destroy(!0);
       }
-    }, A = (x, S, z) => {
+    }, P = (x, S, T) => {
       const F = typeof x.getContext == "function" ? x.getContext("2d") : null;
       if (!F) return null;
-      let B;
+      let L;
       try {
-        B = F.getImageData(0, 0, S, z).data;
+        L = F.getImageData(0, 0, S, T).data;
       } catch {
         return null;
       }
       const V = 1;
-      let M = S, L = z, X = -1, ee = -1;
+      let M = S, R = T, X = -1, ee = -1;
       const ne = 4, oe = S * ne;
-      for (let O = 0; O < z; O++) {
-        const me = O * oe;
+      for (let D = 0; D < T; D++) {
+        const me = D * oe;
         for (let b = 0; b < S; b++)
-          B[me + b * ne + 3] >= V && (b < M && (M = b), b > X && (X = b), O < L && (L = O), O > ee && (ee = O));
+          L[me + b * ne + 3] >= V && (b < M && (M = b), b > X && (X = b), D < R && (R = D), D > ee && (ee = D));
       }
       if (X < 0) return null;
-      const we = X - M + 1, pe = ee - L + 1, fe = M === 0 || L === 0 || X === S - 1 || ee === z - 1;
-      return { x: M, y: L, width: we, height: pe, touchesEdge: fe };
+      const we = X - M + 1, pe = ee - R + 1, fe = M === 0 || R === 0 || X === S - 1 || ee === T - 1;
+      return { x: M, y: R, width: we, height: pe, touchesEdge: fe };
     };
-    let P = null;
+    let A = null;
     try {
       let x = k(C);
       if (!x)
         return null;
-      let S = A(x.canvas, x.width, x.height);
+      let S = P(x.canvas, x.width, x.height);
       if (!S)
         if (m && x.childCount === 0)
           S = {
@@ -1878,25 +1878,25 @@ class ut extends de {
         else
           return null;
       if (S.touchesEdge && C < o && C < l) {
-        const M = Math.max(C * 4, 256), L = k(M);
-        if (L) {
-          const X = A(L.canvas, L.width, L.height);
-          X && !X.touchesEdge ? (x = L, S = X) : (x = L, S = X ?? S);
+        const M = Math.max(C * 4, 256), R = k(M);
+        if (R) {
+          const X = P(R.canvas, R.width, R.height);
+          X && !X.touchesEdge ? (x = R, S = X) : (x = R, S = X ?? S);
         }
       }
-      let z = S.width, F = S.height;
+      let T = S.width, F = S.height;
       if (r > 0) {
-        const M = Math.max(z, F);
-        let L = r / M;
-        i && (L = Math.min(1, L)), z = Math.max(1, Math.round(z * L)), F = Math.max(1, Math.round(F * L));
+        const M = Math.max(T, F);
+        let R = r / M;
+        i && (R = Math.min(1, R)), T = Math.max(1, Math.round(T * R)), F = Math.max(1, Math.round(F * R));
       }
-      if (s > 0 && z * F > s) {
-        const M = Math.sqrt(s / (z * F));
-        z = Math.max(1, Math.floor(z * M)), F = Math.max(1, Math.floor(F * M));
+      if (s > 0 && T * F > s) {
+        const M = Math.sqrt(s / (T * F));
+        T = Math.max(1, Math.floor(T * M)), F = Math.max(1, Math.floor(F * M));
       }
-      const B = document.createElement("canvas");
-      B.width = z, B.height = F;
-      const V = B.getContext("2d");
+      const L = document.createElement("canvas");
+      L.width = T, L.height = F;
+      const V = L.getContext("2d");
       return V ? (V.drawImage(
         x.canvas,
         S.x,
@@ -1905,9 +1905,9 @@ class ut extends de {
         S.height,
         0,
         0,
-        z,
+        T,
         F
-      ), P = B.toDataURL(`image/${e}`, t), this._lastExportDimensions = { width: z, height: F }, P || null) : null;
+      ), A = L.toDataURL(`image/${e}`, t), this._lastExportDimensions = { width: T, height: F }, A || null) : null;
     } catch {
       return null;
     }
@@ -2011,79 +2011,79 @@ class ut extends de {
     this.sprite = null, this.originalTexture = null, this.baseTexture = null, this._container = null, this.removeAllListeners();
   }
 }
-const $e = '<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>', Ge = '<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>', pt = '<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>', ft = '<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>', mt = '<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>', gt = '<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>', bt = '<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>', _t = '<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>', yt = '<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>', xt = '<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>', wt = '<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="M452.37 59.63h0a40.49 40.49 0 00-57.26 0L184 294.74c23.08 4.7 46.12 27.29 49.26 49.26l219.11-227.11a40.49 40.49 0 000-57.26z"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M138 336c-29.88 0-54 24.5-54 54.86 0 23.95-20.67 36.57-34 44.78 15.08 8.08 32.23 12.36 50 12.36 48.49 0 88-38.89 88-88 0-30.36-24.12-54-50-54z"/></svg>', vt = '<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>', 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="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>', Ct = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M380.93 57.37A32 32 0 00358.3 48H94.22A46.21 46.21 0 0048 94.22v323.56A46.21 46.21 0 0094.22 464h323.56A46.36 46.36 0 00464 417.78V153.7a32 32 0 00-9.37-22.63zM256 416a64 64 0 1164-64 63.92 63.92 0 01-64 64zm48-224H112a16 16 0 01-16-16v-64a16 16 0 0116-16h192a16 16 0 0116 16v64a16 16 0 01-16 16z"/></svg>', Ae = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M368 368L144 144M368 144L144 368"/></svg>', 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="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>', kt = '<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>', 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="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>', Ft = '<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>', Mt = '<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>', Me = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M416 128L192 384l-96-96"/></svg>', Pt = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32" d="M48 256l208 112 208-112-208-112L48 256z"/><path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32" d="M48 336l208 112 208-112M48 176L256 64l208 112"/></svg>', Kr = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32" d="M48 256s80-144 208-144 208 144 208 144-80 144-208 144S48 256 48 256z"/><circle cx="256" cy="256" r="64" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32"/></svg>', Jr = '<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 448L80 64M160 160c-67.2 36.8-112 96-112 96s80 144 208 144c35.8 0 68.4-11.3 96-28.1M224.4 113.8A199.6 199.6 0 01256 112c128 0 208 144 208 144a334.2 334.2 0 01-65.1 78.6"/><path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32" d="M213.3 213.3A64 64 0 10298.7 298.7"/></svg>', Qr = '<svg viewBox="0 0 512 512" width="20" height="20"><rect x="96" y="208" width="320" height="240" rx="32" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M160 208v-64a96 96 0 01192 0v64"/></svg>', ei = '<svg viewBox="0 0 512 512" width="20" height="20"><rect x="96" y="208" width="320" height="240" rx="32" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M160 208v-64a96 96 0 01168-63.7"/></svg>', ti = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32" d="M96 352l-32 96 96-32L421.5 154.5a45.3 45.3 0 000-64h0a45.3 45.3 0 00-64 0L96 352z"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M320 128l64 64"/></svg>', ri = '<svg viewBox="0 0 512 512" width="20" height="20"><rect x="144" y="144" width="288" height="288" rx="32" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32"/><path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32" d="M80 368V112a32 32 0 0132-32h256"/></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="M96 112V80h320v32M256 80v352M184 432h144"/></svg>', Nt = '<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>', zt = '<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>', 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="M80 96h64l64 320h64l64-160h96"/></svg>', Le = '<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>', Re = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="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>', 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="M344 144c-3.92 52.87-44 96-88 96s-84.15-43.12-88-96c-4-55 35-96 88-96s92 42 88 96z"/><path fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32" d="M256 304c-87 0-175.3 48-191.64 138.6C62.39 453.52 68.57 464 80 464h352c11.44 0 17.62-10.48 15.65-21.4C431.3 352 343 304 256 304z"/></svg>', Ne = [
+const $e = '<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>', Ge = '<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>', $r = '<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>', Gr = '<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>', Zr = '<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>', pt = '<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>', ft = '<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>', mt = '<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>', gt = '<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>', bt = '<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>', _t = '<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="M452.37 59.63h0a40.49 40.49 0 00-57.26 0L184 294.74c23.08 4.7 46.12 27.29 49.26 49.26l219.11-227.11a40.49 40.49 0 000-57.26z"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M138 336c-29.88 0-54 24.5-54 54.86 0 23.95-20.67 36.57-34 44.78 15.08 8.08 32.23 12.36 50 12.36 48.49 0 88-38.89 88-88 0-30.36-24.12-54-50-54z"/></svg>', yt = '<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>', 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="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>', xt = '<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>', 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="M368 368L144 144M368 144L144 368"/></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="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>', wt = '<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>', vt = '<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>', Ct = '<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>', kt = '<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>', Me = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M416 128L192 384l-96-96"/></svg>', St = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32" d="M48 256l208 112 208-112-208-112L48 256z"/><path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32" d="M48 336l208 112 208-112M48 176L256 64l208 112"/></svg>', Kr = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32" d="M48 256s80-144 208-144 208 144 208 144-80 144-208 144S48 256 48 256z"/><circle cx="256" cy="256" r="64" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32"/></svg>', Jr = '<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 448L80 64M160 160c-67.2 36.8-112 96-112 96s80 144 208 144c35.8 0 68.4-11.3 96-28.1M224.4 113.8A199.6 199.6 0 01256 112c128 0 208 144 208 144a334.2 334.2 0 01-65.1 78.6"/><path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32" d="M213.3 213.3A64 64 0 10298.7 298.7"/></svg>', Qr = '<svg viewBox="0 0 512 512" width="20" height="20"><rect x="96" y="208" width="320" height="240" rx="32" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M160 208v-64a96 96 0 01192 0v64"/></svg>', ei = '<svg viewBox="0 0 512 512" width="20" height="20"><rect x="96" y="208" width="320" height="240" rx="32" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M160 208v-64a96 96 0 01168-63.7"/></svg>', ti = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32" d="M96 352l-32 96 96-32L421.5 154.5a45.3 45.3 0 000-64h0a45.3 45.3 0 00-64 0L96 352z"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M320 128l64 64"/></svg>', ri = '<svg viewBox="0 0 512 512" width="20" height="20"><rect x="144" y="144" width="288" height="288" rx="32" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32"/><path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32" d="M80 368V112a32 32 0 0132-32h256"/></svg>', Ft = '<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="M96 112V80h320v32M256 80v352M184 432h144"/></svg>', Mt = '<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>', At = '<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>', Pt = '<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>', Re = '<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>', Le = '<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>', 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="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>', 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="M344 144c-3.92 52.87-44 96-88 96s-84.15-43.12-88-96c-4-55 35-96 88-96s92 42 88 96z"/><path fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32" d="M256 304c-87 0-175.3 48-191.64 138.6C62.39 453.52 68.57 464 80 464h352c11.44 0 17.62-10.48 15.65-21.4C431.3 352 343 304 256 304z"/></svg>', Ne = [
   {
     id: "adjust",
     name: "Adjust",
-    icon: gt,
+    icon: pt,
     registryCategories: ["adjust", "advanced"]
     // adjustment, adjustmentAdvanced, alpha, colorMatrix
   },
   {
     id: "blur",
     name: "Blur",
-    icon: bt,
+    icon: ft,
     registryCategories: ["blur"]
   },
   {
     id: "color",
     name: "Color",
-    icon: _t,
+    icon: mt,
     registryCategories: ["color"]
   },
   {
     id: "effects",
     name: "Effects",
-    icon: yt,
+    icon: gt,
     registryCategories: ["effects"]
   },
   {
     id: "distortion",
     name: "Distortion",
-    icon: xt,
+    icon: bt,
     registryCategories: ["distortion"]
   },
   {
     id: "light",
     name: "Light",
-    icon: vt,
+    icon: yt,
     registryCategories: ["light"]
   },
   {
     id: "stylize",
     name: "Stylize",
-    icon: Lt,
+    icon: Nt,
     registryCategories: ["stylize"]
   },
   {
     id: "text",
     name: "Text",
-    icon: At
+    icon: Ft
   },
   {
     id: "background",
     name: "Background",
-    icon: wt
+    icon: _t
   },
   {
     id: "layers",
     name: "Layers",
-    icon: Pt
+    icon: St
   },
   {
     id: "crop",
     name: "Crop",
     icon: Ze
   }
-], Bt = Object.fromEntries(
+], zt = Object.fromEntries(
   Ne.filter((a) => Array.isArray(a.registryCategories) && a.registryCategories.length > 0).map((a) => [a.id, a.registryCategories])
-), Et = Object.fromEntries(
+), Rt = Object.fromEntries(
   Ne.filter((a) => Array.isArray(a.registryCategories)).flatMap((a) => a.registryCategories.map((e) => [e, a.id]))
 );
-function It(a) {
-  return Bt[a] || [a];
+function Lt(a) {
+  return zt[a] || [a];
 }
-class Dt extends de {
+class Bt extends de {
   constructor(e, t) {
     super(), this.state = e, this.renderer = t, this.instances = {}, this._filterRegistry = null;
   }
@@ -2119,7 +2119,7 @@ class Dt extends de {
    */
   getFiltersByCategory(e) {
     if (!this._filterRegistry) return [];
-    const t = It(e), r = [], i = /* @__PURE__ */ new Set();
+    const t = Lt(e), r = [], i = /* @__PURE__ */ new Set();
     for (const s of t) {
       const n = this._filterRegistry.getFiltersByCategory(s) || [];
       for (const o of n)
@@ -2366,10 +2366,10 @@ class Dt extends de {
         const C = new Set((m.controls || []).map((N) => N.id));
         for (const [N, ue] of Object.entries(g))
           C.has(N) || (_[N] = ue);
-        const k = this.renderer.sprite, A = this.renderer.originalTexture;
-        _._sourceWidth = Math.round((A == null ? void 0 : A.width) || (k == null ? void 0 : k.width) || 0), _._sourceHeight = Math.round((A == null ? void 0 : A.height) || (k == null ? void 0 : k.height) || 0);
-        const P = m.createFilter(_);
-        P && (r.push(P), this.instances[p] = P);
+        const k = this.renderer.sprite, P = this.renderer.originalTexture;
+        _._sourceWidth = Math.round((P == null ? void 0 : P.width) || (k == null ? void 0 : k.width) || 0), _._sourceHeight = Math.round((P == null ? void 0 : P.height) || (k == null ? void 0 : k.height) || 0);
+        const A = m.createFilter(_);
+        A && (r.push(A), this.instances[p] = A);
       } catch {
         i.push(p);
       }
@@ -2440,15 +2440,28 @@ const J = class J extends de {
     return null;
   }
   /**
-   * Apply aspect ratio constraint to crop rect
+   * Return the numeric aspect ratio that the crop rect must obey, accounting
+   * for both the shape (circle/square force 1:1) and the explicit aspect
+   * setting. Returns null when the crop is free-form.
+   */
+  _getEffectiveTargetAspect() {
+    const e = this.state.get("crop.shape");
+    if (e === "circle" || e === "square") return 1;
+    const t = this.state.get("crop.aspect");
+    return !t || t === "free" ? null : this._getAspectRatio(t);
+  }
+  /**
+   * Apply aspect ratio constraint to crop rect. Honours shape (circle/square
+   * force 1:1) so the post-drag correction agrees with the effective ratio
+   * the edge-handle drag code targets.
    */
   applyAspectRatio() {
-    const e = this.state.get("crop.rect"), t = this.state.get("crop.aspect");
-    if (!e || t === "free") return;
-    const r = this._getAspectRatio(t);
-    if (!r) return;
-    const i = e.width / e.height;
-    Math.abs(i - r) < 0.01 || (i > r ? e.width = e.height * r : e.height = e.width / r, this.state.set("crop.rect", e));
+    const e = this.state.get("crop.rect");
+    if (!e) return;
+    const t = this._getEffectiveTargetAspect();
+    if (!t) return;
+    const r = e.width / e.height;
+    Math.abs(r - t) < 0.01 || (r > t ? e.width = e.height * t : e.height = e.width / t, this.state.set("crop.rect", e));
   }
   /**
    * Constrain crop rect to bounds
@@ -2588,33 +2601,53 @@ const J = class J extends de {
    * Handle pointer move event
    */
   _handlePointerMove(e) {
-    var l, c, d, h;
+    var c, d, h, u;
     const t = this.renderer.app;
     if (!t) return;
     const r = e.global;
     if (!this._isDragging || !this._dragStart || !this._startRect) {
-      this._hoverMode = this._hitHandle(r.x, r.y), t.stage.cursor = this._hoverMode === "move" ? "move" : this._hoverMode === "n" || this._hoverMode === "s" ? "ns-resize" : this._hoverMode === "e" || this._hoverMode === "w" ? "ew-resize" : (l = this._hoverMode) != null && l.endsWith("nw") || (c = this._hoverMode) != null && c.endsWith("se") ? "nwse-resize" : (d = this._hoverMode) != null && d.endsWith("ne") || (h = this._hoverMode) != null && h.endsWith("sw") ? "nesw-resize" : "crosshair", this.drawOverlay();
+      this._hoverMode = this._hitHandle(r.x, r.y), t.stage.cursor = this._hoverMode === "move" ? "move" : this._hoverMode === "n" || this._hoverMode === "s" ? "ns-resize" : this._hoverMode === "e" || this._hoverMode === "w" ? "ew-resize" : (c = this._hoverMode) != null && c.endsWith("nw") || (d = this._hoverMode) != null && d.endsWith("se") ? "nwse-resize" : (h = this._hoverMode) != null && h.endsWith("ne") || (u = this._hoverMode) != null && u.endsWith("sw") ? "nesw-resize" : "crosshair", this.drawOverlay();
       return;
     }
     const i = this.state.get("crop.rect");
     if (!i) return;
-    const s = r.x - this._dragStart.x, n = r.y - this._dragStart.y;
+    const s = r.x - this._dragStart.x, n = r.y - this._dragStart.y, o = this._getEffectiveTargetAspect();
     switch (this._dragMode) {
       case "move":
         i.x = this._startRect.x + s, i.y = this._startRect.y + n;
         break;
-      case "n":
-        i.y = this._startRect.y + n, i.height = this._startRect.height - n;
+      case "n": {
+        const p = this._startRect.height - n;
+        if (i.y = this._startRect.y + n, i.height = p, o) {
+          const m = p * o;
+          i.x = this._startRect.x + (this._startRect.width - m) / 2, i.width = m;
+        }
         break;
-      case "s":
-        i.height = this._startRect.height + n;
+      }
+      case "s": {
+        const p = this._startRect.height + n;
+        if (i.height = p, o) {
+          const m = p * o;
+          i.x = this._startRect.x + (this._startRect.width - m) / 2, i.width = m;
+        }
         break;
-      case "w":
-        i.x = this._startRect.x + s, i.width = this._startRect.width - s;
+      }
+      case "w": {
+        const p = this._startRect.width - s;
+        if (i.x = this._startRect.x + s, i.width = p, o) {
+          const m = p / o;
+          i.y = this._startRect.y + (this._startRect.height - m) / 2, i.height = m;
+        }
         break;
-      case "e":
-        i.width = this._startRect.width + s;
+      }
+      case "e": {
+        const p = this._startRect.width + s;
+        if (i.width = p, o) {
+          const m = p / o;
+          i.y = this._startRect.y + (this._startRect.height - m) / 2, i.height = m;
+        }
         break;
+      }
       case "resize-nw":
         i.x = this._startRect.x + s, i.y = this._startRect.y + n, i.width = this._startRect.width - s, i.height = this._startRect.height - n;
         break;
@@ -2686,8 +2719,8 @@ const J = class J extends de {
     if (h <= 0 || u <= 0) return null;
     const g = new s.Container(), _ = new s.Sprite(r);
     if (this.state.get("crop.shape") === "circle") {
-      const F = Math.round(Math.max(h, u)), B = p + h / 2, V = m + u / 2;
-      p = Math.round(B - F / 2), m = Math.round(V - F / 2), h = u = F;
+      const F = Math.round(Math.max(h, u)), L = p + h / 2, V = m + u / 2;
+      p = Math.round(L - F / 2), m = Math.round(V - F / 2), h = u = F;
       const M = new s.Graphics();
       typeof M.circle == "function" && typeof M.fill == "function" ? M.circle(h / 2, u / 2, h / 2).fill(16777215) : (M.beginFill(16777215, 1), M.drawCircle(h / 2, u / 2, h / 2), M.endFill()), _.mask = M, g.addChild(M);
     }
@@ -2698,17 +2731,17 @@ const J = class J extends de {
       target: k,
       clear: !0
     }), g.destroy({ children: !0 });
-    const A = this.renderer.originalTexture;
-    A && A !== this.renderer.baseTexture && A.destroy(!0), this.renderer.originalTexture = k, e.stage.removeChild(t), t.destroy();
-    const P = new s.Sprite(k);
-    e.stage.addChild(P), this.renderer.sprite = P, this.renderer.fitScale = this.renderer.getFitScaleFor(k), this.renderer.setZoom(n, { keepCenter: !1 }), this.renderer.applyViewTransform(), this.renderer.render();
+    const P = this.renderer.originalTexture;
+    P && P !== this.renderer.baseTexture && P.destroy(!0), this.renderer.originalTexture = k, e.stage.removeChild(t), t.destroy();
+    const A = new s.Sprite(k);
+    e.stage.addChild(A), this.renderer.sprite = A, this.renderer.fitScale = this.renderer.getFitScaleFor(k), this.renderer.setZoom(n, { keepCenter: !1 }), this.renderer.applyViewTransform(), this.renderer.render();
     const N = this.state.get("crop.appliedRect"), x = N && Number.isFinite(N.x) && Number.isFinite(N.y) && Number.isFinite(N.width) && Number.isFinite(N.height) ? {
       x: Math.round(N.x + p),
       y: Math.round(N.y + m),
       width: h,
       height: u
-    } : { x: p, y: m, width: h, height: u }, S = this.state.get("crop.shape") || "free", z = this.state.get("crop.aspect") || "free";
-    return this.disable(), this.state.set("crop.appliedRect", x), this.state.set("crop.appliedShape", S), this.state.set("crop.appliedAspect", z), this.state.set("crop.dirty", !1), this.emit("applied", { width: h, height: u }), { texture: k, preservedZoom: n };
+    } : { x: p, y: m, width: h, height: u }, S = this.state.get("crop.shape") || "free", T = this.state.get("crop.aspect") || "free";
+    return this.disable(), this.state.set("crop.appliedRect", x), this.state.set("crop.appliedShape", S), this.state.set("crop.appliedAspect", T), this.state.set("crop.dirty", !1), this.emit("applied", { width: h, height: u }), { texture: k, preservedZoom: n };
   }
   /**
    * Apply a crop from saved texture-pixel coordinates (for state rehydration).
@@ -2725,10 +2758,10 @@ const J = class J extends de {
     if (l <= 0 || c <= 0) return null;
     const u = new n.Container(), p = new n.Sprite(s);
     if (t === "circle") {
-      const C = Math.round(Math.max(l, c)), k = d + l / 2, A = h + c / 2;
-      d = Math.round(k - C / 2), h = Math.round(A - C / 2), l = c = C;
-      const P = new n.Graphics();
-      typeof P.circle == "function" && typeof P.fill == "function" ? P.circle(l / 2, c / 2, l / 2).fill(16777215) : (P.beginFill(16777215, 1), P.drawCircle(l / 2, c / 2, l / 2), P.endFill()), p.mask = P, u.addChild(P);
+      const C = Math.round(Math.max(l, c)), k = d + l / 2, P = h + c / 2;
+      d = Math.round(k - C / 2), h = Math.round(P - C / 2), l = c = C;
+      const A = new n.Graphics();
+      typeof A.circle == "function" && typeof A.fill == "function" ? A.circle(l / 2, c / 2, l / 2).fill(16777215) : (A.beginFill(16777215, 1), A.drawCircle(l / 2, c / 2, l / 2), A.endFill()), p.mask = A, u.addChild(A);
     }
     p.x = -d, p.y = -h, u.addChild(p);
     const m = n.RenderTexture.create({ width: l, height: c });
@@ -2772,8 +2805,8 @@ ve(J, "AUTO_ZOOM_PADDING", 1.1), /**
  * Minimum interval (ms) between auto-zoom adjustments during drag.
  */
 ve(J, "AUTO_ZOOM_THROTTLE_MS", 100);
-let Pe = J;
-class Ot {
+let Ae = J;
+class Et {
   /**
    * Create a new RemoveBgManager
    * @param {Object} options
@@ -3133,7 +3166,7 @@ function rt({ id: a, label: e, options: t = [], value: r, onChange: i }) {
     o.value = l;
   }, s;
 }
-function Y({ label: a, className: e = "", onClick: t, icon: r = null, disabled: i = !1 }) {
+function j({ label: a, className: e = "", onClick: t, icon: r = null, disabled: i = !1 }) {
   const s = f("button", {
     type: "button",
     className: `btn ${e}`.trim(),
@@ -3148,7 +3181,7 @@ function Y({ label: a, className: e = "", onClick: t, icon: r = null, disabled:
   }
   return a && s.appendChild(document.createTextNode(a)), s;
 }
-function R({ icon: a, title: e, className: t = "", onClick: r, disabled: i = !1, testId: s = null, ariaLabel: n = null }) {
+function Y({ icon: a, title: e, className: t = "", onClick: r, disabled: i = !1, testId: s = null, ariaLabel: n = null }) {
   const o = {
     type: "button",
     className: `icon-btn ${t}`.trim(),
@@ -3179,7 +3212,7 @@ function ye({ label: a, icon: e, active: t = !1, onClick: r }) {
     i.classList.toggle("active", s);
   }, i;
 }
-class jt {
+class It {
   constructor(e, t) {
     this.state = e, this.editor = t, this.element = null, this._removeBgBtn = null, this._removeBgTierSelect = null, this._removeBgStatus = null, this._removeBgTier = "balanced", this._unsubscribers = [];
   }
@@ -3189,8 +3222,8 @@ class jt {
    */
   render() {
     this.element = f("div", { className: "editor-toolbar" });
-    const e = f("div", { className: "toolbar-section toolbar-left" }), t = R({
-      icon: Mt,
+    const e = f("div", { className: "toolbar-section toolbar-left" }), t = Y({
+      icon: kt,
       title: "Open Image",
       className: "toolbar-btn",
       testId: "btn-open-image",
@@ -3198,51 +3231,15 @@ class jt {
       onClick: () => this.editor.openFilePicker()
     });
     e.appendChild(t);
-    const r = f("div", { className: "toolbar-section toolbar-center" }), i = R({
-      icon: ft,
-      title: "Zoom Out",
-      className: "toolbar-btn",
-      testId: "btn-zoom-out",
-      ariaLabel: "Zoom out",
-      onClick: () => {
-        const u = this.state.get("zoom");
-        this.editor.setZoom(u - 0.25);
-      }
-    });
-    this._zoomLabel = f("span", {
-      className: "zoom-label",
-      "aria-live": "polite",
-      "aria-atomic": "true",
-      role: "status"
-    }, "100%");
-    const s = R({
-      icon: pt,
-      title: "Zoom In",
-      className: "toolbar-btn",
-      testId: "btn-zoom-in",
-      ariaLabel: "Zoom in",
-      onClick: () => {
-        const u = this.state.get("zoom");
-        this.editor.setZoom(u + 0.25);
-      }
-    }), n = R({
-      icon: mt,
-      title: "Fit to Screen",
-      className: "toolbar-btn",
-      testId: "btn-fit-screen",
-      ariaLabel: "Fit to screen",
-      onClick: () => this.editor.fitToScreen()
-    });
-    r.appendChild(i), r.appendChild(this._zoomLabel), r.appendChild(s), r.appendChild(n);
-    const o = f("div", { className: "toolbar-section toolbar-right" });
-    this._themeBtn = R({
-      icon: this.state.get("isDarkMode") ? Le : Re,
+    const r = f("div", { className: "toolbar-section toolbar-right" });
+    this._themeBtn = Y({
+      icon: this.state.get("isDarkMode") ? Re : Le,
       title: "Toggle Theme",
       className: "toolbar-btn toolbar-btn-theme",
       testId: "btn-toggle-theme",
       ariaLabel: "Toggle theme",
       onClick: () => this.editor.toggleTheme()
-    }), this._cropBtn = R({
+    }), this._cropBtn = Y({
       icon: Ze,
       title: "Crop",
       className: "toolbar-btn toolbar-btn-crop",
@@ -3252,26 +3249,26 @@ class jt {
         this.state.get("mode") === "crop" ? this.editor.setMode("filters") : this.editor.setMode("crop");
       }
     });
-    const l = f("div", { className: "remove-bg-control" });
+    const i = f("div", { className: "remove-bg-control" });
     this._removeBgTierSelect = f("select", {
       className: "remove-bg-tier-select",
       title: "Background removal quality",
       "aria-label": "Background removal quality",
       dataset: { testid: "select-remove-background-tier" },
-      onChange: (u) => {
-        this._removeBgTier = u.target.value;
+      onChange: (d) => {
+        this._removeBgTier = d.target.value;
       }
     });
-    for (const u of [
+    for (const d of [
       ["fast", "Fast"],
       ["balanced", "Balanced"],
       ["best", "Best"]
     ]) {
-      const p = f("option", { value: u[0] }, u[1]);
-      u[0] === this._removeBgTier && (p.selected = !0), this._removeBgTierSelect.appendChild(p);
+      const h = f("option", { value: d[0] }, d[1]);
+      d[0] === this._removeBgTier && (h.selected = !0), this._removeBgTierSelect.appendChild(h);
     }
-    this._removeBgBtn = R({
-      icon: Rt,
+    this._removeBgBtn = Y({
+      icon: Tt,
       title: "Remove Background",
       className: "toolbar-btn toolbar-btn-remove-bg",
       testId: "btn-remove-background",
@@ -3294,59 +3291,59 @@ class jt {
       role: "status",
       "aria-live": "polite",
       "aria-atomic": "true"
-    }), l.appendChild(this._removeBgTierSelect), l.appendChild(this._removeBgBtn), l.appendChild(this._removeBgStatus);
-    const c = R({
+    }), i.appendChild(this._removeBgTierSelect), i.appendChild(this._removeBgBtn), i.appendChild(this._removeBgStatus);
+    const s = Y({
       icon: Ke,
       title: "Reset All",
       className: "toolbar-btn",
       testId: "btn-reset-all",
       ariaLabel: "Reset all changes",
       onClick: () => this.editor.resetAll()
-    }), d = R({
-      icon: Ct,
+    }), n = f("button", {
+      type: "button",
+      className: "icon-btn toolbar-btn toolbar-btn-primary toolbar-save-labeled",
       title: "Save Image",
-      className: "toolbar-btn toolbar-btn-primary",
-      testId: "btn-save-edit",
-      ariaLabel: "Save image",
+      "aria-label": "Save image",
+      dataset: { testid: "btn-save-edit" },
       onClick: () => this.editor.save()
-    }), h = R({
-      icon: Ae,
+    }), o = f("span", { className: "btn-icon" });
+    o.innerHTML = xt;
+    const l = o.querySelector("svg");
+    l && l.setAttribute("aria-hidden", "true"), n.appendChild(o), n.appendChild(f("span", { className: "toolbar-save-label" }, "Save"));
+    const c = Y({
+      icon: Pe,
       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), o.appendChild(h), this.element.appendChild(e), this.element.appendChild(r), this.element.appendChild(o), this._subscribeToState(), this.element;
+    return r.appendChild(this._themeBtn), r.appendChild(this._cropBtn), r.appendChild(i), r.appendChild(s), r.appendChild(n), r.appendChild(c), this.element.appendChild(e), this.element.appendChild(r), this._subscribeToState(), this.element;
   }
   /**
    * Subscribe to state changes
    */
   _subscribeToState() {
-    const e = this.state.on("change:zoom", ({ value: d }) => {
-      this._zoomLabel.textContent = `${Math.round(d * 100)}%`;
+    const e = this.state.on("change:isDarkMode", ({ value: c }) => {
+      this._themeBtn.innerHTML = c ? Re : Le;
     });
     this._unsubscribers.push(e);
-    const t = this.state.on("change:isDarkMode", ({ value: d }) => {
-      this._themeBtn.innerHTML = d ? Le : Re;
+    const t = this.state.on("change:mode", ({ value: c }) => {
+      this._cropBtn && this._cropBtn.classList.toggle("toolbar-btn-primary", c === "crop");
     });
     this._unsubscribers.push(t);
-    const r = this.state.on("change:mode", ({ value: d }) => {
-      this._cropBtn && this._cropBtn.classList.toggle("toolbar-btn-primary", d === "crop");
-    });
+    const r = this.state.on("change:hasImage", () => this._updateRemoveBgButton());
     this._unsubscribers.push(r);
-    const i = this.state.on("change:hasImage", () => this._updateRemoveBgButton());
+    const i = this.state.on("change:isProcessing", () => this._updateRemoveBgButton());
     this._unsubscribers.push(i);
-    const s = this.state.on("change:isProcessing", () => this._updateRemoveBgButton());
+    const s = this.state.on("change:backgroundRemovalAvailable", () => this._updateRemoveBgButton());
     this._unsubscribers.push(s);
-    const n = this.state.on("change:backgroundRemovalAvailable", () => this._updateRemoveBgButton());
+    const n = this.state.on("change:editorDocument", () => this._updateRemoveBgButton());
     this._unsubscribers.push(n);
-    const o = this.state.on("change:editorDocument", () => this._updateRemoveBgButton());
+    const o = this.state.on("change:layers", () => this._updateRemoveBgButton());
     this._unsubscribers.push(o);
-    const l = this.state.on("change:layers", () => this._updateRemoveBgButton());
+    const l = this.state.on("change:activeLayerId", () => this._updateRemoveBgButton());
     this._unsubscribers.push(l);
-    const c = this.state.on("change:activeLayerId", () => this._updateRemoveBgButton());
-    this._unsubscribers.push(c);
   }
   _canRemoveBackground() {
     return typeof this.editor.canRemoveBackground == "function" ? this.editor.canRemoveBackground() : !!this.state.get("hasImage") && typeof this.editor.removeBackground == "function";
@@ -3359,13 +3356,6 @@ class jt {
   _setRemoveBgStatus(e) {
     this._removeBgStatus && (this._removeBgStatus.textContent = e);
   }
-  /**
-   * Update zoom display
-   * @param {number} zoom
-   */
-  updateZoom(e) {
-    this._zoomLabel && (this._zoomLabel.textContent = `${Math.round(e * 100)}%`);
-  }
   /**
    * Clean up
    */
@@ -3375,7 +3365,7 @@ class jt {
   }
 }
 const be = Ne;
-class Yt {
+class Dt {
   constructor(e, t) {
     this.state = e, this.editor = t, this.element = null, this._chips = /* @__PURE__ */ new Map(), this._scrollIndex = 0, this._unsubscribers = [];
   }
@@ -3388,7 +3378,7 @@ class Yt {
     this._onSelect = e, this.element = f("div", {
       className: "category-carousel-container",
       "data-testid": "category-carousel"
-    }), this._leftBtn = R({
+    }), this._leftBtn = Y({
       icon: $e,
       title: "Previous categories",
       className: "carousel-nav carousel-nav-left",
@@ -3401,7 +3391,7 @@ class Yt {
         onClick: () => this._selectCategory(r.id)
       });
       i.dataset.categoryId = r.id, i.dataset.category = r.id, i.dataset.testid = `category-${r.id}`, this._chips.set(r.id, i), this._carousel.appendChild(i);
-    }), this._rightBtn = R({
+    }), this._rightBtn = Y({
       icon: Ge,
       title: "Next categories",
       className: "carousel-nav carousel-nav-right",
@@ -3514,7 +3504,7 @@ class Yt {
     this._unsubscribers.forEach((t) => t()), this._unsubscribers = [], this._chips.clear(), (e = this.element) == null || e.remove(), this.element = null;
   }
 }
-class Ut {
+class Ot {
   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;
   }
@@ -3524,12 +3514,12 @@ class Ut {
    * @returns {HTMLElement}
    */
   render({ onToggle: e, onSelect: t }) {
-    return this._onToggle = e, this._onSelect = t, this.element = f("div", { className: "filter-carousel-container" }), this._leftBtn = R({
+    return this._onToggle = e, this._onSelect = t, this.element = f("div", { className: "filter-carousel-container" }), this._leftBtn = Y({
       icon: $e,
       title: "Previous filters",
       className: "carousel-nav carousel-nav-left",
       onClick: () => this._scrollLeft()
-    }), this._carousel = f("div", { className: "filter-carousel" }), this._rightBtn = R({
+    }), this._carousel = f("div", { className: "filter-carousel" }), this._rightBtn = Y({
       icon: Ge,
       title: "Next filters",
       className: "carousel-nav carousel-nav-right",
@@ -3671,7 +3661,7 @@ class Ut {
     this._unsubscribers.forEach((t) => t()), this._unsubscribers = [], this._filterCards.clear(), (e = this.element) == null || e.remove(), this.element = null;
   }
 }
-class Xt {
+class jt {
   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 = [];
   }
@@ -3720,7 +3710,7 @@ class Xt {
       return;
     }
     const r = f("div", { className: "adjustments-header" });
-    r.appendChild(f("span", { className: "adjustments-title" }, t.name)), r.appendChild(Y({
+    r.appendChild(f("span", { className: "adjustments-title" }, t.name)), r.appendChild(j({
       label: "Reset",
       className: "btn-text",
       onClick: () => this._handleReset(e)
@@ -3805,7 +3795,7 @@ class Xt {
         });
       case "button":
         const l = f("div", { className: "button-control" });
-        return l.appendChild(Y({
+        return l.appendChild(j({
           label: i,
           className: "btn-secondary",
           onClick: () => this._handleAction(e, t.action || t.id)
@@ -3905,7 +3895,7 @@ class Xt {
     this._unsubscribers.forEach((t) => t()), this._unsubscribers = [], this._controls.clear(), (e = this.element) == null || e.remove(), this.element = null;
   }
 }
-class Vt {
+class Yt {
   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;
   }
@@ -3918,22 +3908,22 @@ class Vt {
     this._onChange = t, this._onReset = r, this._onRemove = i, this._onAction = s, this._container = e, this._drawer = f("div", { className: "mobile-filter-drawer" });
     const n = f("div", { className: "drawer-header" });
     this._titleEl = f("span", { className: "drawer-title" }, "Filter");
-    const o = f("div", { className: "drawer-header-actions" }), l = Y({
+    const o = f("div", { className: "drawer-header-actions" }), l = j({
       label: "Reset",
       className: "btn-text",
       onClick: () => {
         var h;
         this._currentFilterId && ((h = this._onReset) == null || h.call(this, this._currentFilterId), this._renderControls());
       }
-    }), c = Y({
+    }), c = j({
       label: "Remove",
       className: "btn-text btn-danger",
       onClick: () => {
         var h;
         this._currentFilterId && ((h = this._onRemove) == null || h.call(this, this._currentFilterId), this.close());
       }
-    }), d = R({
-      icon: Ae,
+    }), d = Y({
+      icon: Pe,
       title: "Close",
       className: "btn-icon-sm",
       ariaLabel: "Close drawer",
@@ -4082,7 +4072,7 @@ class Vt {
         });
       case "button": {
         const o = f("div", { className: "button-control" });
-        return o.appendChild(Y({
+        return o.appendChild(j({
           label: i,
           className: "btn-secondary",
           onClick: () => {
@@ -4129,7 +4119,7 @@ class Vt {
     this._controls.clear(), (e = this._drawer) == null || e.remove(), this._drawer = null, this._isOpen = !1, this._currentFilterId = null, this._container = null;
   }
 }
-class Ht {
+class Ut {
   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;
   }
@@ -4202,18 +4192,18 @@ class Ht {
     this._unsubscribers.forEach((t) => t()), this._unsubscribers = [], this._chips.clear(), (e = this.element) == null || e.remove(), this.element = null;
   }
 }
-const Wt = [
-  { id: "free", name: "Free", icon: Tt },
-  { id: "square", name: "Square", icon: Nt },
-  { id: "circle", name: "Circle", icon: zt }
-], qt = [
+const Xt = [
+  { id: "free", name: "Free", icon: Pt },
+  { id: "square", name: "Square", icon: Mt },
+  { id: "circle", name: "Circle", icon: At }
+], Vt = [
   { 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" }
-], $t = [
+], Ht = [
   { id: "0", label: "0°", angle: 0 },
   { id: "90", label: "90°", angle: 90 },
   { id: "180", label: "180°", angle: 180 },
@@ -4224,7 +4214,7 @@ function te(a) {
   const e = Number(a) % 360;
   return e < 0 ? e + 360 : e;
 }
-class Gt {
+class Wt {
   constructor(e, t, r = null) {
     this.state = e, this.cropManager = t, this.editor = r, 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 = [];
   }
@@ -4248,7 +4238,7 @@ class Gt {
     const e = f("div", { className: "crop-section" });
     e.appendChild(f("label", { className: "section-label" }, "Shape"));
     const t = f("div", { className: "chip-row" }), r = this.state.get("crop.shape");
-    Wt.forEach((c) => {
+    Xt.forEach((c) => {
       const d = ye({
         label: c.name,
         icon: c.icon,
@@ -4258,7 +4248,7 @@ class Gt {
       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 = f("div", { className: "crop-section" }), this._aspectSection.appendChild(f("label", { className: "section-label" }, "Aspect Ratio"));
     const i = f("div", { className: "chip-row aspect-row" }), s = this.state.get("crop.aspect");
-    qt.forEach((c) => {
+    Vt.forEach((c) => {
       const d = ye({
         label: c.name,
         active: s === c.id,
@@ -4266,14 +4256,14 @@ class Gt {
       });
       d.dataset.ratio = c.id, d.dataset.testid = `crop-ratio-${c.id}`, this._aspectChips.set(c.id, d), i.appendChild(d);
     }), this._aspectSection.appendChild(i), this.element.appendChild(this._aspectSection), this._updateAspectVisibility();
-    const n = f("div", { className: "crop-actions" }), o = Y({
+    const n = f("div", { className: "crop-actions" }), o = j({
       label: "Cancel",
       className: "btn-secondary crop-cancel-btn",
-      icon: Ae,
+      icon: Pe,
       onClick: () => this.cropManager.cancel()
     });
     o.dataset.testid = "cancel-crop";
-    const l = Y({
+    const l = j({
       label: "Apply Crop",
       className: "btn-primary crop-apply-btn",
       icon: Me,
@@ -4284,34 +4274,34 @@ class Gt {
   _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" }), r = Y({
+    const t = f("div", { className: "rotation-action-row" }), r = j({
       label: "Left 90°",
       className: "btn-secondary rotation-action-btn",
-      icon: kt,
+      icon: wt,
       onClick: () => this._rotateBy(-90)
     });
     r.dataset.testid = "rotate-left-90";
-    const i = Y({
+    const i = j({
       label: "Right 90°",
       className: "btn-secondary rotation-action-btn",
-      icon: St,
+      icon: vt,
       onClick: () => this._rotateBy(90)
     });
     i.dataset.testid = "rotate-right-90";
-    const s = Y({
+    const s = j({
       label: "Rotate 180°",
       className: "btn-secondary rotation-action-btn",
       onClick: () => this._rotateBy(180)
     });
     s.dataset.testid = "rotate-180";
-    const n = Y({
+    const n = j({
       label: "Rotate 270°",
       className: "btn-secondary rotation-action-btn",
       onClick: () => this._rotateBy(270)
     });
     n.dataset.testid = "rotate-270", t.appendChild(r), t.appendChild(i), t.appendChild(s), t.appendChild(n), e.appendChild(t);
     const o = f("div", { className: "chip-row rotation-preset-row" }), l = te(this.state.get("transform.rotation") ?? 0);
-    $t.forEach((p) => {
+    Ht.forEach((p) => {
       const m = ye({
         label: p.label,
         active: Math.round(l) === p.angle,
@@ -4356,7 +4346,7 @@ class Gt {
       this._rotationNumber
     );
     c.appendChild(d), c.appendChild(h);
-    const u = Y({
+    const u = j({
       label: "Reset rotation",
       className: "btn-text rotation-reset-btn",
       onClick: () => this._setRotation(0)
@@ -4459,7 +4449,7 @@ class Gt {
     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 Zt {
+class qt {
   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;
   }
@@ -4475,7 +4465,7 @@ class Zt {
     });
     const n = f("div", { className: "panel-header" });
     n.appendChild(f("h3", { className: "panel-title" }, "Active Filters"));
-    const o = Y({
+    const o = j({
       label: "Clear All",
       className: "btn-text btn-danger",
       onClick: () => this._handleClearAll()
@@ -4541,13 +4531,13 @@ class Zt {
       onClick: (p) => {
         p.target.closest(".filter-item-actions") || this._handleSelect(e);
       }
-    }), n = f("div", { className: "filter-item-header" }), o = f("span", { className: "filter-item-name" }, t.name), l = f("div", { className: "filter-item-actions" }), c = R({
+    }), n = f("div", { className: "filter-item-header" }), o = f("span", { className: "filter-item-name" }, t.name), l = f("div", { className: "filter-item-actions" }), c = Y({
       icon: Ke,
       title: "Reset filter",
       className: "btn-icon-sm",
       onClick: () => this._handleReset(e)
-    }), d = R({
-      icon: Ft,
+    }), d = Y({
+      icon: Ct,
       title: "Remove filter",
       className: "btn-icon-sm btn-danger",
       onClick: () => this._handleRemove(e)
@@ -4717,7 +4707,7 @@ const ie = {
     lockAspectRatio: !1
   }
 };
-function Kt(a) {
+function $t(a) {
   if (!a)
     return { ...ke.free };
   if (typeof a == "object" && a !== null)
@@ -4730,7 +4720,7 @@ function ae(a) {
   const e = Number(a) % 360;
   return e < 0 ? e + 360 : e;
 }
-function Jt(a, e) {
+function Gt(a, e) {
   const t = ae(a);
   return (ae(e) - t + 540) % 360 - 180;
 }
@@ -4745,7 +4735,7 @@ class ii extends de {
     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(), this._activeObjectUrl = null;
-    const r = t.preset ? Kt(t.preset) : null, i = r ? {
+    const r = t.preset ? $t(t.preset) : null, i = r ? {
       initialMode: r.initialMode === "crop" ? "crop" : "adjust",
       cropShape: r.cropShape,
       initialAspectRatio: r.aspectRatio
@@ -4764,7 +4754,7 @@ class ii extends de {
       },
       ...i,
       ...t
-    }, this._preset = r, this._state = ht(), 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 ut(), this._filterManager = new Dt(this._state, this._renderer), this._cropManager = new Pe(this._state, this._renderer), this._removeBgManager = null, this._backgroundRemovalAvailable = !1, ((s = this._options.backgroundRemoval) == null ? void 0 : s.enabled) !== !1 && (this._removeBgManager = new Ot({
+    }, this._preset = r, this._state = ht(), 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 ut(), this._filterManager = new Bt(this._state, this._renderer), this._cropManager = new Ae(this._state, this._renderer), this._removeBgManager = null, this._backgroundRemovalAvailable = !1, ((s = this._options.backgroundRemoval) == null ? void 0 : s.enabled) !== !1 && (this._removeBgManager = new Et({
       endpoint: (n = this._options.backgroundRemoval) == null ? void 0 : n.endpoint,
       optionsEndpoint: (o = this._options.backgroundRemoval) == null ? void 0 : o.optionsEndpoint,
       fallbackEndpoint: (l = this._options.backgroundRemoval) == null ? void 0 : l.fallbackEndpoint
@@ -4803,31 +4793,31 @@ class ii extends de {
    * Initialize UI components
    */
   _initUI() {
-    this._toolbar = new jt(this._state, this), this._toolbarContainer.appendChild(this._toolbar.render()), this._filterControlsEl = f("div", { className: "filter-controls-container" }), this._categoryCarousel = new Yt(this._state, this), this._filterControlsEl.appendChild(this._categoryCarousel.render((i) => {
+    this._toolbar = new It(this._state, this), this._toolbarContainer.appendChild(this._toolbar.render()), this._filterControlsEl = f("div", { className: "filter-controls-container" }), this._categoryCarousel = new Dt(this._state, this), this._filterControlsEl.appendChild(this._categoryCarousel.render((i) => {
     }));
     const e = f("div", { className: "filter-layout" }), t = f("div", { className: "filter-left-column" });
-    this._filterCarousel = new Ut(this._state, this._filterManager), t.appendChild(this._filterCarousel.render({
+    this._filterCarousel = new Ot(this._state, this._filterManager), t.appendChild(this._filterCarousel.render({
       onToggle: (i, s) => this._handleFilterToggle(i, s),
       onSelect: (i) => {
         this._handleFilterSelect(i), this._isMobile && this._mobileFilterDrawer && this._mobileFilterDrawer.open(i);
       }
-    })), this._filterAdjustments = new Xt(this._state, this._filterManager), t.appendChild(this._filterAdjustments.render({
+    })), this._filterAdjustments = new jt(this._state, this._filterManager), t.appendChild(this._filterAdjustments.render({
       onChange: (i, s, n) => this._handleFilterChange(i, s, n),
       onReset: (i) => this._handleFilterReset(i),
       onAction: (i, s) => this._handleFilterAction(i, s)
     })), e.appendChild(t);
     const r = f("div", { className: "filter-right-column" });
-    this._activeFiltersPanel = new Zt(this._state, this._filterManager), r.appendChild(this._activeFiltersPanel.render({
+    this._activeFiltersPanel = new qt(this._state, this._filterManager), r.appendChild(this._activeFiltersPanel.render({
       onRemove: (i) => this._handleFilterToggle(i, !1),
       onReset: (i) => this._handleFilterReset(i),
       onClearAll: () => this.resetAll(),
       onSelect: (i) => this._handleFilterSelect(i)
-    })), e.appendChild(r), this._filterControlsEl.appendChild(e), this._mobileActiveFilters = new Ht(this._state, this._filterManager), this._filterControlsEl.appendChild(this._mobileActiveFilters.render({
+    })), e.appendChild(r), this._filterControlsEl.appendChild(e), this._mobileActiveFilters = new Ut(this._state, this._filterManager), this._filterControlsEl.appendChild(this._mobileActiveFilters.render({
       onToggle: (i, s) => this._handleFilterToggle(i, s),
       onSelect: (i) => {
         this._handleFilterSelect(i), this._isMobile && this._mobileFilterDrawer && this._mobileFilterDrawer.open(i);
       }
-    })), this._cropControls = new Gt(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 Vt(this._state, this._filterManager), this._mobileFilterDrawer.build(this._controlsSection, {
+    })), this._cropControls = new Wt(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 Yt(this._state, this._filterManager), this._mobileFilterDrawer.build(this._controlsSection, {
       onChange: (i, s, n) => this._handleFilterChange(i, s, n),
       onReset: (i) => this._handleFilterReset(i),
       onRemove: (i) => {
@@ -5007,7 +4997,7 @@ class ii extends de {
         this._state.set("selectedFilter", i);
         const s = this._filterManager.getFilterDef(i);
         if (typeof (s == null ? void 0 : s.category) == "string") {
-          const n = Et[s.category] ?? s.category;
+          const n = Rt[s.category] ?? s.category;
           this._state.set("selectedCategory", n);
         }
       }
@@ -5138,7 +5128,7 @@ class ii extends de {
   }
   setRotationAngle(e) {
     if (!this._state.get("hasImage")) return !1;
-    const t = ae(this._state.get("transform.rotation") ?? 0), r = ae(e), i = Jt(t, r), s = this._state.get("mode") === "crop";
+    const t = ae(this._state.get("transform.rotation") ?? 0), r = ae(e), i = Gt(t, r), s = this._state.get("mode") === "crop";
     if (Math.abs(i) > 1e-3) {
       if (s && this._cropManager.disable(), !this._renderer.rotateBy(i))
         return s && this._cropManager.enable(), !1;
@@ -5289,20 +5279,20 @@ class ii extends de {
   }
 }
 const U = /* @__PURE__ */ new Map(), Q = /* @__PURE__ */ new Map();
-function Qt(a, e) {
+function Zt(a, e) {
   return !Array.isArray(a.mediaTargets) || a.mediaTargets.length === 0 ? !0 : a.mediaTargets.includes(e);
 }
 function y(a) {
   var e;
   return U.has(a.id), U.set(a.id, a), Q.has(a.category) || Q.set(a.category, []), (e = Q.get(a.category)) == null || e.push(a.id), a;
 }
-function er(a) {
+function Kt(a) {
   return U.get(a);
 }
 function xe() {
   return Array.from(U.values());
 }
-function tr() {
+function Jt() {
   xe().map((t) => t.id), Object.entries(v).filter(
     (t) => /Filter$/.test(t[0]) && typeof t[1] == "function"
   ).forEach(([t, r]) => {
@@ -5326,16 +5316,16 @@ function tr() {
     });
   });
 }
-function rr(a) {
+function Qt(a) {
   return (Q.get(a) || []).map((t) => U.get(t)).filter(Boolean);
 }
-function ir() {
+function er() {
   return Array.from(Q.keys());
 }
 function si(a) {
   return U.has(a);
 }
-function sr(a) {
+function tr(a) {
   const e = U.get(a);
   if (!e)
     return !1;
@@ -5349,9 +5339,9 @@ function sr(a) {
 }
 function ai(a, e) {
   const t = U.get(a);
-  return t ? Qt(t, e) : !1;
+  return t ? Zt(t, e) : !1;
 }
-function ar() {
+function rr() {
   return Array.from(U.values()).map((a) => ({
     id: a.id,
     name: a.name,
@@ -5360,7 +5350,7 @@ function ar() {
   }));
 }
 if (typeof window < "u") {
-  window.__DEBUG_FILTERS_LIST = Array.from(U.keys()), window.getAllFilters = xe, window.getFilter = er, window.getFiltersByCategory = rr, window.getRegisteredFilters = ar;
+  window.__DEBUG_FILTERS_LIST = Array.from(U.keys()), window.getAllFilters = xe, window.getFilter = Kt, window.getFiltersByCategory = Qt, window.getRegisteredFilters = rr;
   const a = y;
   window.registerFilter = (e) => {
     const t = a(e);
@@ -5370,7 +5360,7 @@ if (typeof window < "u") {
 typeof window < "u" && (window.initializeFilterRegistry = window.initializeFilterRegistry || function() {
   return [];
 });
-const { AdjustmentFilter: nr } = v, { ColorMatrixFilter: or } = D, W = {
+const { AdjustmentFilter: ir } = v, { ColorMatrixFilter: sr } = I, W = {
   gamma: 1,
   saturation: 1,
   contrast: 1,
@@ -5379,7 +5369,7 @@ const { AdjustmentFilter: nr } = v, { ColorMatrixFilter: or } = D, W = {
   green: 1,
   blue: 1,
   alpha: 1
-}, lr = /* @__PURE__ */ new Set([
+}, ar = /* @__PURE__ */ new Set([
   "gamma",
   "saturation",
   "contrast",
@@ -5400,9 +5390,9 @@ function q(a, e) {
   return e;
 }
 function Be(a) {
-  return lr.has(a);
+  return ar.has(a);
 }
-function cr(a) {
+function nr(a) {
   return {
     gamma: q(a.gamma, W.gamma),
     saturation: q(a.saturation, W.saturation),
@@ -5425,9 +5415,9 @@ y({
   // Create an instance of the AdjustmentFilter with the provided parameters
   createFilter: (a) => {
     try {
-      const e = cr(a ?? {}), t = { ...e };
+      const e = nr(a ?? {}), t = { ...e };
       try {
-        const r = new nr(t), i = r;
+        const r = new ir(t), i = r;
         return i._customParams = { ...e }, i.updateUIParam = function(n, o) {
           try {
             if (!Be(n))
@@ -5440,7 +5430,7 @@ y({
           }
         }, r;
       } catch {
-        const i = new or(), s = i;
+        const i = new sr(), s = i;
         return s._customParams = { ...e }, Ee(i, e), s.updateUIParam = function(o, l) {
           try {
             if (!Be(o))
@@ -5550,14 +5540,14 @@ y({
     }
   ]
 });
-const { ColorMatrixFilter: hr } = D, K = {
+const { ColorMatrixFilter: or } = I, K = {
   brightness: 1,
   contrast: 1,
   saturation: 1,
   hue: 0,
   sepia: 0,
   negative: !1
-}, dr = /* @__PURE__ */ new Set([
+}, lr = /* @__PURE__ */ new Set([
   "brightness",
   "contrast",
   "saturation",
@@ -5565,8 +5555,8 @@ const { ColorMatrixFilter: hr } = D, K = {
   "sepia",
   "negative"
 ]);
-function ur(a) {
-  return dr.has(a);
+function cr(a) {
+  return lr.has(a);
 }
 function se(a, e) {
   if (typeof a == "number" && Number.isFinite(a))
@@ -5589,7 +5579,7 @@ function it(a, e) {
   }
   return e;
 }
-function pr(a) {
+function hr(a) {
   return {
     brightness: se(a.brightness, K.brightness),
     contrast: se(a.contrast, K.contrast),
@@ -5610,10 +5600,10 @@ y({
   // Create an instance of the ColorMatrixFilter with the provided parameters
   createFilter: (a) => {
     try {
-      const e = pr(a ?? {}), t = new hr(), r = t;
+      const e = hr(a ?? {}), t = new or(), r = t;
       return r._customParams = { ...e }, Ie(t, e), r.updateUIParam = function(s, n) {
         try {
-          if (!ur(s))
+          if (!cr(s))
             return;
           const o = this._customParams ?? { ...K };
           if (s === "negative")
@@ -5707,7 +5697,7 @@ y({
   category: "adjust",
   description: "Adjust the opacity of the image",
   createFilter: (a) => {
-    const e = De(a.alpha !== void 0 ? Number(a.alpha) : 1), t = new D.AlphaFilter(e);
+    const e = De(a.alpha !== void 0 ? Number(a.alpha) : 1), t = new I.AlphaFilter(e);
     return t.updateUIParam = function(r, i) {
       r === "alpha" && (this.alpha = De(Number(i)));
     }, t;
@@ -5739,7 +5729,7 @@ y({
    */
   createFilter: (a) => {
     try {
-      const e = new D.BlurFilter({
+      const e = new I.BlurFilter({
         strength: a.blur || 8,
         quality: a.quality || 4
       });
@@ -5810,7 +5800,7 @@ y({
   category: "advanced",
   description: "Advanced color adjustments including sepia, hue rotation, and negative",
   createFilter: (a) => {
-    const e = D.ColorMatrixFilter;
+    const e = I.ColorMatrixFilter;
     if (!e) return null;
     const t = new e(), r = je(a);
     return t._customParams = { ...r }, Oe(t, r), t.updateUIParam = function(i, s) {
@@ -5899,7 +5889,7 @@ y({
     }
   ]
 });
-const { ColorOverlayFilter: fr } = v;
+const { ColorOverlayFilter: dr } = v;
 y({
   id: "colorOverlay",
   name: "Color Overlay",
@@ -5914,7 +5904,7 @@ y({
     try {
       let e = 16711680;
       a.color && (typeof a.color == "string" ? e = parseInt(a.color.replace("#", "0x"), 16) : typeof a.color == "number" && (e = a.color));
-      const t = new fr({
+      const t = new dr({
         color: e,
         alpha: a.alpha || 0.5
       });
@@ -6004,7 +5994,7 @@ y({
         const p = Number(h._distance ?? h.distance ?? 5) * u, m = Number(h._angle ?? h.angle ?? 90), g = Number(h.blur ?? 2) * u, _ = Number(h.quality ?? 3), C = {
           x: p * Math.cos(m * Math.PI / 180),
           y: p * Math.sin(m * Math.PI / 180)
-        }, k = h.color ? String(h.color).replace("#", "0x") : "0x000000", A = new v.DropShadowFilter({
+        }, k = h.color ? String(h.color).replace("#", "0x") : "0x000000", P = new v.DropShadowFilter({
           offset: C,
           color: parseInt(k, 16),
           alpha: h.alpha !== void 0 ? Number(h.alpha) : 0.5,
@@ -6015,8 +6005,8 @@ y({
             x: h.pixelSizeX !== void 0 ? Number(h.pixelSizeX) : 1,
             y: h.pixelSizeY !== void 0 ? Number(h.pixelSizeY) : 1
           }
-        }), P = l(g, _, C.x, C.y);
-        return A._exportPadding = P, A.padding = Math.max(A.padding ?? 0, P), A;
+        }), A = l(g, _, C.x, C.y);
+        return P._exportPadding = A, P.padding = Math.max(P.padding ?? 0, A), P;
       };
       o.createExportFilter = function(h = {}) {
         const u = Number.isFinite(h.previewToNativeScale) ? Math.max(1, Number(h.previewToNativeScale)) : 1, p = this._customParams || a;
@@ -6177,7 +6167,7 @@ y({
     }
   ]
 });
-const { ColorMatrixFilter: mr } = D;
+const { ColorMatrixFilter: ur } = I;
 y({
   id: "grayscale",
   name: "Grayscale",
@@ -6190,7 +6180,7 @@ y({
    */
   createFilter: (a) => {
     try {
-      const e = new mr();
+      const e = new ur();
       e._customParams = { ...a };
       const t = a.intensity !== void 0 ? a.intensity : 1;
       return Ye(e, t), e.updateUIParam = function(r, i) {
@@ -6230,7 +6220,7 @@ y({
 function Ye(a, e) {
   a.reset(), a.greyscale(e);
 }
-const { HslAdjustmentFilter: gr } = v;
+const { HslAdjustmentFilter: pr } = v;
 y({
   id: "hsl-adjustment",
   name: "HSL Adjustment",
@@ -6242,7 +6232,7 @@ y({
    */
   createFilter: (a) => {
     try {
-      const e = new gr({
+      const e = new pr({
         hue: a.hue !== void 0 ? a.hue : 0,
         saturation: a.saturation !== void 0 ? a.saturation : 0,
         lightness: a.lightness !== void 0 ? a.lightness : 0,
@@ -6340,7 +6330,7 @@ y({
     }
   ]
 });
-const { KawaseBlurFilter: br } = v;
+const { KawaseBlurFilter: fr } = v;
 y({
   id: "kawase-blur",
   name: "Kawase Blur",
@@ -6353,7 +6343,7 @@ y({
    */
   createFilter: (a) => {
     try {
-      const e = new br({
+      const e = new fr({
         strength: a.strength || 4,
         quality: a.quality || 3,
         clamp: a.clamp || !1,
@@ -6458,7 +6448,7 @@ y({
     }
   ]
 });
-const { MotionBlurFilter: _r } = v;
+const { MotionBlurFilter: mr } = v;
 y({
   id: "motion-blur",
   name: "Motion Blur",
@@ -6471,7 +6461,7 @@ y({
    */
   createFilter: (a) => {
     try {
-      const e = new _r({
+      const e = new mr({
         velocity: {
           x: a.velocityX !== void 0 ? a.velocityX : 0,
           y: a.velocityY !== void 0 ? a.velocityY : 0
@@ -6566,7 +6556,7 @@ y({
     }
   ]
 });
-const { RadialBlurFilter: yr } = v;
+const { RadialBlurFilter: gr } = v;
 y({
   id: "radial-blur",
   name: "Radial Blur",
@@ -6575,7 +6565,7 @@ y({
   // Create an instance of the RadialBlurFilter with the provided parameters
   createFilter: (a) => {
     try {
-      const e = new yr({
+      const e = new gr({
         angle: a.angle ?? 20,
         center: { x: a.centerX ?? 0, y: a.centerY ?? 0 },
         kernelSize: a.kernelSize ?? 15,
@@ -6690,7 +6680,7 @@ y({
     }
   ]
 });
-const { TiltShiftFilter: xr } = v;
+const { TiltShiftFilter: br } = v;
 y({
   id: "tilt-shift",
   name: "Tilt Shift",
@@ -6699,7 +6689,7 @@ y({
   // Create an instance of the TiltShiftFilter with the provided parameters
   createFilter: (a) => {
     try {
-      const e = typeof a.blur == "number" ? a.blur : 100, t = typeof a.gradientBlur == "number" ? a.gradientBlur : 600, r = typeof a.startX == "number" ? a.startX : 0, i = typeof a.startY == "number" ? a.startY : 0.5, s = typeof a.endX == "number" ? a.endX : 1, n = typeof a.endY == "number" ? a.endY : 0.5, o = new xr({
+      const e = typeof a.blur == "number" ? a.blur : 100, t = typeof a.gradientBlur == "number" ? a.gradientBlur : 600, r = typeof a.startX == "number" ? a.startX : 0, i = typeof a.startY == "number" ? a.startY : 0.5, s = typeof a.endX == "number" ? a.endX : 1, n = typeof a.endY == "number" ? a.endY : 0.5, o = new br({
         blur: Number(e),
         gradientBlur: Number(t),
         start: { x: Number(r), y: Number(i) },
@@ -6818,7 +6808,7 @@ y({
     }
   ]
 });
-const { ZoomBlurFilter: wr } = v;
+const { ZoomBlurFilter: _r } = v;
 y({
   id: "zoom-blur",
   name: "Zoom Blur",
@@ -6831,7 +6821,7 @@ y({
    */
   createFilter: (a) => {
     try {
-      const e = new wr({
+      const e = new _r({
         strength: a.strength || 0.1,
         center: {
           x: a.centerX !== void 0 ? a.centerX : 0.5,
@@ -6949,7 +6939,7 @@ const { ColorGradientFilter: Ue } = v;
 function st(a) {
   return parseInt(a.replace("#", "0x"), 16);
 }
-function vr(a) {
+function yr(a) {
   return "#" + a.toString(16).padStart(6, "0");
 }
 function Xe(a) {
@@ -6962,7 +6952,7 @@ function Xe(a) {
 function Ve(a) {
   return {
     offset: a.offset,
-    color: typeof a.color == "number" ? vr(a.color) : a.color,
+    color: typeof a.color == "number" ? yr(a.color) : a.color,
     alpha: a.alpha
   };
 }
@@ -7185,7 +7175,7 @@ y({
       if (!e)
         return null;
       let t = null;
-      a.texturePath ? t = D.Texture.from(a.texturePath) : t = D.Texture.from("/examples/filters-main/examples/images/colormap.png");
+      a.texturePath ? t = I.Texture.from(a.texturePath) : t = I.Texture.from("/examples/filters-main/examples/images/colormap.png");
       const r = new e({
         colorMap: t,
         nearest: a.nearest,
@@ -7195,7 +7185,7 @@ y({
         const n = this._customParams || {};
         switch (this._customParams = n, n[i] = s, i) {
           case "texturePath":
-            s && (this.colorMap = D.Texture.from(s));
+            s && (this.colorMap = I.Texture.from(s));
             break;
           case "mix":
             this.mix = s;
@@ -7256,7 +7246,7 @@ y({
     }
   ]
 });
-const Cr = v.ColorReplaceFilter;
+const xr = v.ColorReplaceFilter;
 y({
   id: "color-replace",
   name: "Color Replace",
@@ -7273,7 +7263,7 @@ y({
       a.originalColor && (typeof a.originalColor == "string" ? e = parseInt(a.originalColor.replace("#", "0x"), 16) : typeof a.originalColor == "number" && (e = a.originalColor));
       let t = 255;
       a.targetColor && (typeof a.targetColor == "string" ? t = parseInt(a.targetColor.replace("#", "0x"), 16) : typeof a.targetColor == "number" && (t = a.targetColor));
-      const r = new Cr({
+      const r = new xr({
         originalColor: e,
         targetColor: t,
         tolerance: a.tolerance || 0.4
@@ -7337,7 +7327,7 @@ y({
     }
   ]
 });
-const kr = v.MultiColorReplaceFilter;
+const wr = v.MultiColorReplaceFilter;
 y({
   id: "multi-color-replace",
   name: "Multi-Color Replace",
@@ -7363,7 +7353,7 @@ y({
         const r = typeof a.originalColor3 == "string" ? parseInt(a.originalColor3.replace("#", "0x"), 16) : a.originalColor3, i = typeof a.targetColor3 == "string" ? parseInt(a.targetColor3.replace("#", "0x"), 16) : a.targetColor3;
         e.push([r, i]);
       }
-      const t = new kr(
+      const t = new wr(
         e,
         a.tolerance || 0.05,
         3
@@ -7474,7 +7464,7 @@ y({
     }
   ]
 });
-const { RGBSplitFilter: Sr } = v;
+const { RGBSplitFilter: vr } = v;
 y({
   id: "rgb-split",
   name: "RGB Split",
@@ -7495,7 +7485,7 @@ y({
       }, r = {
         x: a.blueX !== void 0 ? a.blueX : 0,
         y: a.blueY !== void 0 ? a.blueY : 0
-      }, i = new Sr({
+      }, i = new vr({
         red: e,
         green: t,
         blue: r
@@ -7608,7 +7598,7 @@ y({
     }
   ]
 });
-const { AdvancedBloomFilter: Fr } = v;
+const { AdvancedBloomFilter: Cr } = v;
 y({
   id: "advanced-bloom",
   name: "Advanced Bloom",
@@ -7617,7 +7607,7 @@ y({
   // Create an instance of the AdvancedBloomFilter with the provided parameters
   createFilter: (a) => {
     try {
-      const e = new Fr({
+      const e = new Cr({
         threshold: a.threshold || 0.5,
         bloomScale: a.bloomScale || 1,
         brightness: a.brightness || 1,
@@ -7764,7 +7754,7 @@ y({
     }
   ]
 });
-const Mr = v.AsciiFilter;
+const kr = v.AsciiFilter;
 y({
   id: "ascii",
   name: "ASCII",
@@ -7776,7 +7766,7 @@ y({
       const e = typeof a.size == "number" ? a.size : 8;
       let t = a.color;
       typeof t == "string" && t.startsWith("#") && (t = parseInt(t.replace("#", "0x"), 16));
-      const r = a.replaceColor === !0, i = new Mr({
+      const r = a.replaceColor === !0, i = new kr({
         size: e,
         color: t,
         replaceColor: r
@@ -7843,7 +7833,7 @@ y({
     }
   ]
 });
-const Pr = v.BackdropBlurFilter;
+const Sr = v.BackdropBlurFilter;
 y({
   id: "backdrop-blur",
   name: "Backdrop Blur",
@@ -7852,7 +7842,7 @@ y({
   // Create an instance of the BackdropBlurFilter with the provided parameters
   createFilter: (a) => {
     try {
-      const e = new Pr({
+      const e = new Sr({
         // Higher strength values (20-50) make the effect more noticeable
         strength: a.strength || 20,
         quality: a.quality || 4,
@@ -7950,7 +7940,7 @@ y({
     }
   ]
 });
-const { BevelFilter: Ar } = v;
+const { BevelFilter: Fr } = v;
 y({
   id: "bevel",
   name: "Bevel",
@@ -7962,7 +7952,7 @@ y({
    */
   createFilter: (a) => {
     try {
-      const e = a.lightColor ? a.lightColor.replace("#", "0x") : "0xffffff", t = a.shadowColor ? a.shadowColor.replace("#", "0x") : "0x000000", r = new Ar({
+      const e = a.lightColor ? a.lightColor.replace("#", "0x") : "0xffffff", t = a.shadowColor ? a.shadowColor.replace("#", "0x") : "0x000000", r = new Fr({
         rotation: a.rotation !== void 0 ? a.rotation : 45,
         thickness: a.thickness !== void 0 ? a.thickness : 2,
         lightColor: parseInt(e, 16),
@@ -8078,7 +8068,7 @@ y({
     }
   ]
 });
-const { BloomFilter: Nr } = v;
+const { BloomFilter: Mr } = v;
 y({
   id: "bloom",
   name: "Bloom/Glow",
@@ -8087,7 +8077,7 @@ y({
   // Create an instance of the BloomFilter with the provided parameters
   createFilter: (a) => {
     try {
-      const e = typeof a.strengthX == "number" ? a.strengthX : 2, t = typeof a.strengthY == "number" ? a.strengthY : 2, r = typeof a.quality == "number" ? a.quality : 4, i = typeof a.resolution == "number" ? a.resolution : 1, s = typeof a.kernelSize == "number" ? a.kernelSize : 5, n = new Nr({
+      const e = typeof a.strengthX == "number" ? a.strengthX : 2, t = typeof a.strengthY == "number" ? a.strengthY : 2, r = typeof a.quality == "number" ? a.quality : 4, i = typeof a.resolution == "number" ? a.resolution : 1, s = typeof a.kernelSize == "number" ? a.kernelSize : 5, n = new Mr({
         strength: {
           x: Number(e),
           y: Number(t)
@@ -8298,7 +8288,7 @@ y({
     }
   ]
 });
-const { ConvolutionFilter: zr } = v, re = {
+const { ConvolutionFilter: Ar } = v, re = {
   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],
@@ -8333,7 +8323,7 @@ y({
         const r = a.preset;
         e = re[r] || re.normal;
       }
-      const t = new zr(e, a.width || 200, a.height || 200);
+      const t = new Ar(e, a.width || 200, a.height || 200);
       return t._customParams = { ...a }, t.updateUIParam = function(r, i) {
         const s = this._customParams || {};
         switch (this._customParams = s, s[r] = i, r) {
@@ -8544,7 +8534,7 @@ y({
     }
   ]
 });
-const { CrossHatchFilter: Tr } = v;
+const { CrossHatchFilter: Pr } = v;
 y({
   id: "cross-hatch",
   name: "Cross Hatch",
@@ -8554,7 +8544,7 @@ y({
   // Note: CrossHatchFilter has NO parameters according to PixiJS examples
   createFilter: (a) => {
     try {
-      const e = new Tr();
+      const e = new Pr();
       return e.updateUIParam = function(t, r) {
         return !0;
       }, e;
@@ -8751,7 +8741,7 @@ y({
     }
   ]
 });
-const Lr = D.DisplacementFilter, Rr = D.Sprite, Fe = D.Texture;
+const Nr = I.DisplacementFilter, Tr = I.Sprite, Fe = I.Texture;
 y({
   id: "displacement",
   // ID must match what the application expects
@@ -8777,7 +8767,7 @@ y({
         }
         t = Fe.from(n);
       }
-      const r = new Rr(t), i = new Lr(r, a.scale || 50);
+      const r = new Tr(t), i = new Nr(r, a.scale || 50);
       return i.scale.x = a.scaleX || 50, i.scale.y = a.scaleY || 50, i._customParams = { ...a }, i._displacementSprite = r, i.updateUIParam = function(s, n) {
         const o = this._customParams || {};
         switch (this._customParams = o, o[s] = n, s) {
@@ -8924,7 +8914,7 @@ y({
     }
   ]
 });
-const { EmbossFilter: Br } = v;
+const { EmbossFilter: zr } = v;
 y({
   id: "emboss",
   name: "Emboss",
@@ -8933,7 +8923,7 @@ y({
   // Create an instance of the Emboss filter with the provided parameters
   createFilter: (a) => {
     try {
-      const e = typeof a.strength == "number" ? a.strength : 5, t = new Br(e);
+      const e = typeof a.strength == "number" ? a.strength : 5, t = new zr(e);
       return t._customParams = {
         strength: e
       }, t.updateUIParam = function(r, i) {
@@ -8973,7 +8963,7 @@ y({
     }
   ]
 });
-const { GlitchFilter: Er } = v, Z = {
+const { GlitchFilter: Rr } = v, Z = {
   TRANSPARENT: 0,
   ORIGINAL: 1,
   LOOP: 2,
@@ -8987,7 +8977,7 @@ y({
   description: "Apply digital distortion and glitch effects",
   createFilter: (a) => {
     try {
-      const e = { x: a.redX, y: a.redY }, t = { x: a.greenX, y: a.greenY }, r = { x: a.blueX, y: a.blueY }, i = new Er({
+      const e = { x: a.redX, y: a.redY }, t = { x: a.greenX, y: a.greenY }, r = { x: a.blueX, y: a.blueY }, i = new Rr({
         slices: a.slices,
         offset: a.offset,
         direction: a.direction,
@@ -9228,7 +9218,7 @@ y({
     }
   ]
 });
-const { GlowFilter: Ir } = v;
+const { GlowFilter: Lr } = v;
 y({
   id: "glow",
   name: "Glow",
@@ -9237,7 +9227,7 @@ y({
   // Create an instance of the GlowFilter with the provided parameters
   createFilter: (a) => {
     try {
-      const e = parseInt(a.color.replace("#", "0x"), 16), t = new Ir({
+      const e = parseInt(a.color.replace("#", "0x"), 16), t = new Lr({
         distance: a.distance || 10,
         outerStrength: a.outerStrength || 4,
         innerStrength: a.innerStrength || 0,
@@ -9363,7 +9353,7 @@ y({
     }
   ]
 });
-const { GodrayFilter: Dr } = v;
+const { GodrayFilter: Br } = v;
 y({
   id: "godray",
   name: "Godray",
@@ -9372,7 +9362,7 @@ y({
   // Create an instance of the GodrayFilter with the provided parameters
   createFilter: (a) => {
     try {
-      const e = new Dr({
+      const e = new Br({
         angle: a.angle || 30,
         parallel: a.parallel ?? !0,
         center: {
@@ -9525,7 +9515,7 @@ y({
     }
   ]
 });
-const Or = v.SimpleLightmapFilter, We = D.Texture;
+const Er = v.SimpleLightmapFilter, We = I.Texture;
 y({
   id: "lightmap",
   name: "Lightmap",
@@ -9557,7 +9547,7 @@ y({
       } catch {
         o = 0;
       }
-      const l = new Or(n, o, r);
+      const l = new Er(n, o, r);
       return l._customParams = {
         textureType: e,
         color: t,
@@ -9656,7 +9646,7 @@ y({
     }
   ]
 });
-const { NoiseFilter: jr } = D;
+const { NoiseFilter: Ir } = I;
 y({
   id: "noise",
   name: "Noise",
@@ -9664,7 +9654,7 @@ y({
   description: "Add random noise to the image",
   createFilter: (a) => {
     try {
-      const e = new jr({
+      const e = new Ir({
         noise: a.noise || 0.5,
         seed: a.seed || Math.random()
       });
@@ -9741,7 +9731,7 @@ y({
     }
   ]
 });
-const { OldFilmFilter: Yr } = v;
+const { OldFilmFilter: Dr } = v;
 y({
   id: "old-film",
   name: "Old Film",
@@ -9749,7 +9739,7 @@ y({
   description: "Apply a vintage film effect with scratches and grain",
   createFilter: (a) => {
     try {
-      const e = new Yr({
+      const e = new Dr({
         sepia: a.sepia,
         noise: a.noise,
         noiseSize: a.noiseSize,
@@ -9930,7 +9920,7 @@ y({
     }
   ]
 });
-const { OutlineFilter: Ur } = v;
+const { OutlineFilter: Or } = v;
 y({
   id: "outline",
   name: "Outline",
@@ -9940,7 +9930,7 @@ y({
     try {
       let e = a.color;
       typeof e == "string" && (e = parseInt(e.replace("#", "0x"), 16));
-      const t = new Ur({
+      const t = new Or({
         thickness: a.thickness || 4,
         color: e,
         alpha: a.alpha || 1,
@@ -10030,7 +10020,7 @@ y({
     }
   ]
 });
-const { PixelateFilter: Xr } = v;
+const { PixelateFilter: jr } = v;
 y({
   id: "pixelate",
   name: "Pixelate",
@@ -10038,7 +10028,7 @@ y({
   description: "Create a pixelated or mosaic effect",
   createFilter: (a) => {
     try {
-      const e = new Xr(
+      const e = new jr(
         a.useUniform ? Math.max(4, a.size || 10) : [Math.max(4, a.sizeX || 10), Math.max(4, a.sizeY || 10)]
       );
       return e._customParams = { ...a }, e.updateUIParam = function(t, r) {
@@ -10121,7 +10111,7 @@ y({
     }
   ]
 });
-const { ReflectionFilter: Vr } = v;
+const { ReflectionFilter: Yr } = v;
 y({
   id: "reflection",
   // ID must match what the application expects
@@ -10138,7 +10128,7 @@ y({
         waveLength: new Float32Array([a.wavelengthStart ?? 30, a.wavelengthEnd ?? 100]),
         alpha: new Float32Array([a.alphaStart ?? 1, a.alphaEnd ?? 1]),
         time: a.time ?? 0
-      }, t = new Vr(e);
+      }, t = new Yr(e);
       return t._customParams = { ...a }, t.animating = a.animating ?? !1, t.updateUIParam = function(r, i) {
         const s = this._customParams || {};
         switch (this._customParams = s, s[r] = i, r) {
@@ -10289,7 +10279,7 @@ y({
     }
   ]
 });
-const { ShockwaveFilter: Hr } = v;
+const { ShockwaveFilter: Ur } = v;
 y({
   id: "shockwave",
   // ID must match what the application expects
@@ -10299,7 +10289,7 @@ y({
   // Create an instance of the ShockwaveFilter with the provided parameters
   createFilter: (a) => {
     try {
-      const e = a.centerX ?? 0.5, t = a.centerY ?? 0.5, r = { x: e, y: t }, i = a.amplitude ?? 30, s = a.wavelength ?? 160, n = a.speed ?? 500, o = a.brightness ?? 1, l = a.radius ?? -1, c = a.time ?? 0, d = new Hr({
+      const e = a.centerX ?? 0.5, t = a.centerY ?? 0.5, r = { x: e, y: t }, i = a.amplitude ?? 30, s = a.wavelength ?? 160, n = a.speed ?? 500, o = a.brightness ?? 1, l = a.radius ?? -1, c = a.time ?? 0, d = new Ur({
         center: r,
         amplitude: i,
         wavelength: s,
@@ -10441,7 +10431,7 @@ y({
     }
   ]
 });
-const { SimplexNoiseFilter: Wr } = v;
+const { SimplexNoiseFilter: Xr } = v;
 y({
   id: "simplex-noise",
   name: "Simplex Noise",
@@ -10449,7 +10439,7 @@ y({
   description: "Apply procedural noise to create texture effects",
   createFilter: (a) => {
     try {
-      const e = a.animating ? 0 : a.offsetZ || 0, t = new Wr({
+      const e = a.animating ? 0 : a.offsetZ || 0, t = new Xr({
         strength: a.strength,
         noiseScale: a.noiseScale,
         offsetX: a.offsetX,
@@ -10596,8 +10586,8 @@ y({
     }
   ]
 });
-const { TwistFilter: qr } = v, at = (a) => Math.ceil(Math.max(0, Number(a) || 0) + 2), qe = (a, e = 1) => {
-  const t = Math.max(1, Number(a._sourceWidth ?? 0)), r = Math.max(1, Number(a._sourceHeight ?? 0)), i = Math.min(t, r), s = Number(a.centerX ?? 0.5), n = Number(a.centerY ?? 0.5), o = Number(a.radius ?? 0.25), l = Number(a.angle ?? 4), c = s * t * e, d = n * r * e, h = o * i * e, u = new qr({
+const { TwistFilter: Vr } = v, at = (a) => Math.ceil(Math.max(0, Number(a) || 0) + 2), qe = (a, e = 1) => {
+  const t = Math.max(1, Number(a._sourceWidth ?? 0)), r = Math.max(1, Number(a._sourceHeight ?? 0)), i = Math.min(t, r), s = Number(a.centerX ?? 0.5), n = Number(a.centerY ?? 0.5), o = Number(a.radius ?? 0.25), l = Number(a.angle ?? 4), c = s * t * e, d = n * r * e, h = o * i * e, u = new Vr({
     offset: { x: c, y: d },
     radius: h,
     angle: l
@@ -10690,7 +10680,7 @@ y({
     }
   ]
 });
-const { AdjustmentFilter: $r } = v;
+const { AdjustmentFilter: Hr } = v;
 function _e(a) {
   const e = typeof a == "string" ? parseInt(a.replace("#", "0x"), 16) : a;
   return [
@@ -10699,7 +10689,7 @@ function _e(a) {
     (e & 255) / 255
   ];
 }
-class Gr extends $r {
+class Wr extends Hr {
   constructor(e = {}) {
     super({
       brightness: 1,
@@ -10742,7 +10732,7 @@ y({
   description: "Add a classic darkened border effect to the image",
   createFilter: (a) => {
     try {
-      const e = new Gr({
+      const e = new Wr({
         radius: a.radius || 0.8,
         strength: a.strength || 1,
         color: a.color || "#000000"
@@ -10810,18 +10800,18 @@ function ni(a) {
   try {
     let e = [], t = [];
     try {
-      e = xe(), e.length === 0 && tr();
+      e = xe(), e.length === 0 && Jt();
     } catch {
     }
     const r = a == null ? void 0 : a.disabled;
     if (Array.isArray(r) && r.length > 0) {
       let i = 0;
       for (const s of r)
-        sr(s) && i++;
+        tr(s) && i++;
       i > 0;
     }
     try {
-      e = xe(), t = ir();
+      e = xe(), t = er();
     } catch {
       e || (e = []), t || (t = []);
     }
@@ -10831,39 +10821,44 @@ function ni(a) {
   }
 }
 export {
-  xt as A,
-  de as B,
-  Kt as C,
-  ht as D,
+  bt as A,
+  Y as B,
+  Gr as C,
+  $r as D,
   Ne as E,
-  Dt as F,
-  Pe as G,
-  jt as H,
-  Gt as I,
-  Et as J,
-  tr as K,
-  ai as L,
-  ar as M,
+  Zr as F,
+  de as G,
+  $t as H,
+  ht as I,
+  Bt as J,
+  Ae as K,
+  It as L,
+  Wt as M,
+  Rt as N,
+  xt as O,
   ut as P,
-  Ot as R,
+  Jt as Q,
+  Et as R,
+  ai as S,
   lt as T,
+  rr as U,
   ii as V,
-  er as a,
-  rr as b,
-  ir as c,
+  Kt as a,
+  Qt as b,
+  er as c,
   Me as d,
   f as e,
   Ge as f,
   xe as g,
   si as h,
   ni as i,
-  Y as j,
+  j,
   tt as k,
   rt as l,
   et as m,
   Qe as n,
   Je as o,
-  Ae as p,
+  Pe as p,
   Kr as q,
   y as r,
   Jr as s,
@@ -10872,7 +10867,7 @@ export {
   $e as v,
   ti as w,
   ri as x,
-  Ft as y,
-  Pt as z
+  Ct as y,
+  St as z
 };
-//# sourceMappingURL=editor-OIsQEaJg.js.map
+//# sourceMappingURL=editor-DAJxTvzM.js.map