@codingfactory/mediables-vue 2.4.1 → 2.4.3

package/dist/{editor-DiiyShiW.js → editor-Cw08D0SQ.js}

@@ -1,8 +1,8 @@
 var _e = Object.defineProperty;
 var xe = (s, e, t) => e in s ? _e(s, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[e] = t;
 var j = (s, e, t) => xe(s, typeof e != "symbol" ? e + "" : e, t);
-import * as g from "pixi-filters";
-import * as w from "pixi.js";
+import * as b from "pixi-filters";
+import * as S from "pixi.js";
 import { GlProgram as Ce } from "pixi.js";
 class B {
   constructor() {
@@ -291,7 +291,7 @@ class ve extends B {
    * @param {string} imageUrl - URL, data URL, or blob URL of the image
    */
   async loadTexture(e) {
-    var l, c, u;
+    var l, c, d;
     if (this._mountPromise && await this._mountPromise, !((l = this.app) != null && l.renderer)) return !1;
     const t = window.PIXI, i = await this._loadImageElement(e);
     if (!i || !((c = this.app) != null && c.renderer)) return !1;
@@ -300,7 +300,7 @@ class ve extends B {
       return !1;
     this.originalTexture = r, this.baseTexture = r, this.sprite && (this.app.stage.removeChild(this.sprite), this.sprite.destroy()), this.sprite = new t.Sprite(r), this.app.stage.addChild(this.sprite), this.fitScale = this.getFitScaleFor(r), this.zoom = 1;
     const { w: a, h: o } = this._getCssSize();
-    if (this.applyViewTransform({ center: { x: a / 2, y: o / 2 } }), await new Promise(requestAnimationFrame), !((u = this.app) != null && u.renderer)) return !1;
+    if (this.applyViewTransform({ center: { x: a / 2, y: o / 2 } }), await new Promise(requestAnimationFrame), !((d = this.app) != null && d.renderer)) return !1;
     const n = this.getFitScaleFor(r);
     return Math.abs(n - this.fitScale) / Math.max(1e-6, n) > 0.02 && (this.fitScale = n, this.applyViewTransform({ center: { x: a / 2, y: o / 2 } })), this.render(), this.emit("textureLoaded", { width: r.width, height: r.height }), !0;
   }
@@ -325,35 +325,35 @@ class ve extends B {
       let v = i / _;
       r && (v = Math.min(1, v)), l = Math.round(o * v);
     }
-    const c = this.sprite, u = c.x, h = c.y, p = c.width, m = c.height;
+    const c = this.sprite, d = c.x, h = c.y, p = c.width, m = c.height;
     if (p <= 0 || m <= 0)
       return null;
-    const C = l / p;
-    let b = null;
+    const x = l / p;
+    let g = null;
     try {
-      if (c.x = 0, c.y = 0, b = a.RenderTexture.create({
+      if (c.x = 0, c.y = 0, g = a.RenderTexture.create({
         width: Math.ceil(p),
         height: Math.ceil(m),
-        resolution: C
-      }), this.app.renderer.render({ container: this.app.stage, target: b }), !this.app.renderer.extract)
+        resolution: x
+      }), this.app.renderer.render({ container: this.app.stage, target: g }), !this.app.renderer.extract)
         return null;
-      const _ = this.app.renderer.extract.canvas(b);
+      const _ = this.app.renderer.extract.canvas(g);
       if (!_)
         return null;
       let v = null;
       if (typeof _.toDataURL == "function")
         v = _.toDataURL(`image/${e}`, t);
       else if (typeof _.getContext == "function") {
-        const z = document.createElement("canvas");
-        z.width = _.width, z.height = _.height;
-        const O = z.getContext("2d");
-        O && (O.drawImage(_, 0, 0), v = z.toDataURL(`image/${e}`, t));
+        const C = document.createElement("canvas");
+        C.width = _.width, C.height = _.height;
+        const O = C.getContext("2d");
+        O && (O.drawImage(_, 0, 0), v = C.toDataURL(`image/${e}`, t));
       }
       return v || null;
     } catch {
       return null;
     } finally {
-      c.x = u, c.y = h, b && b.destroy(!0);
+      c.x = d, c.y = h, g && g.destroy(!0);
     }
   }
   /**
@@ -583,9 +583,9 @@ class Pe extends B {
         if (!o || !o.createFilter || typeof o.createFilter != "function")
           return;
         const n = this.state.getFilterValues(a), l = o.defaultParams ? { ...o.defaultParams } : {};
-        o.controls && Array.isArray(o.controls) && o.controls.forEach((u) => {
-          const h = u.property || u.id;
-          l[h] = n[u.id] ?? u.default;
+        o.controls && Array.isArray(o.controls) && o.controls.forEach((d) => {
+          const h = d.property || d.id;
+          l[h] = n[d.id] ?? d.default;
         });
         const c = o.createFilter(l);
         c && (t.push(c), this.instances[a] = c);
@@ -701,14 +701,14 @@ const T = class T extends B {
     if (!e || !r || !a || !o) return null;
     const l = e.width > t, c = e.height > i;
     if (!l && !c) return null;
-    const u = T.AUTO_ZOOM_PADDING;
+    const d = T.AUTO_ZOOM_PADDING;
     let h = n;
     if (l) {
-      const p = e.width / (u * r * o);
+      const p = e.width / (d * r * o);
       h = Math.min(h, p);
     }
     if (c) {
-      const p = e.height / (u * a * o);
+      const p = e.height / (d * a * o);
       h = Math.min(h, p);
     }
     return h = Math.max(0.1, h), h >= n - 0.01 ? null : h;
@@ -752,8 +752,8 @@ const T = class T extends B {
     if (!l) return;
     const c = this.state.get("crop.shape");
     if (n.save(), c === "circle") {
-      const y = l.x + l.width / 2, A = l.y + l.height / 2, _ = Math.min(l.width, l.height) / 2;
-      n.beginPath(), n.arc(y, A, _, 0, Math.PI * 2), n.clip();
+      const y = l.x + l.width / 2, P = l.y + l.height / 2, _ = Math.min(l.width, l.height) / 2;
+      n.beginPath(), n.arc(y, P, _, 0, Math.PI * 2), n.clip();
     } else
       n.beginPath(), n.rect(l.x, l.y, l.width, l.height), n.clip();
     n.clearRect(l.x, l.y, l.width, l.height), n.restore(), n.strokeStyle = "#ffffff", n.lineWidth = 2, n.setLineDash([5, 5]), c === "circle" ? (n.beginPath(), n.arc(
@@ -763,23 +763,23 @@ const T = class T extends B {
       0,
       Math.PI * 2
     ), n.stroke()) : n.strokeRect(l.x, l.y, l.width, l.height), n.setLineDash([]), n.strokeStyle = "rgba(255,255,255,0.3)", n.lineWidth = 1;
-    const u = l.width / 3, h = l.height / 3;
+    const d = l.width / 3, h = l.height / 3;
     for (let y = 1; y <= 2; y++)
-      n.beginPath(), n.moveTo(l.x + u * y, l.y), n.lineTo(l.x + u * y, l.y + l.height), n.stroke(), n.beginPath(), n.moveTo(l.x, l.y + h * y), n.lineTo(l.x + l.width, l.y + h * y), n.stroke();
+      n.beginPath(), n.moveTo(l.x + d * y, l.y), n.lineTo(l.x + d * y, l.y + l.height), n.stroke(), n.beginPath(), n.moveTo(l.x, l.y + h * y), n.lineTo(l.x + l.width, l.y + h * y), n.stroke();
     const p = this.HANDLE_SIZE, m = [
       { x: l.x, y: l.y, m: "resize-nw" },
       { x: l.x + l.width, y: l.y, m: "resize-ne" },
       { x: l.x, y: l.y + l.height, m: "resize-sw" },
       { x: l.x + l.width, y: l.y + l.height, m: "resize-se" }
-    ], C = [
+    ], x = [
       { x: l.x + l.width / 2, y: l.y, m: "n" },
       { x: l.x + l.width / 2, y: l.y + l.height, m: "s" },
       { x: l.x, y: l.y + l.height / 2, m: "w" },
       { x: l.x + l.width, y: l.y + l.height / 2, m: "e" }
-    ], b = [...m, ...C];
-    for (const y of b) {
-      const A = this._hoverMode === y.m, _ = A ? p + 4 : p;
-      n.beginPath(), n.rect(y.x - _ / 2, y.y - _ / 2, _, _), n.fillStyle = A ? "#4da3ff" : "#ffffff", n.strokeStyle = "rgba(0,0,0,0.6)", n.lineWidth = 1, n.fill(), n.stroke();
+    ], g = [...m, ...x];
+    for (const y of g) {
+      const P = this._hoverMode === y.m, _ = P ? p + 4 : p;
+      n.beginPath(), n.rect(y.x - _ / 2, y.y - _ / 2, _, _), n.fillStyle = P ? "#4da3ff" : "#ffffff", n.strokeStyle = "rgba(0,0,0,0.6)", n.lineWidth = 1, n.fill(), n.stroke();
     }
   }
   /**
@@ -807,12 +807,12 @@ const T = class T extends B {
    * Handle pointer move event
    */
   _handlePointerMove(e) {
-    var l, c, u, h;
+    var l, c, d, h;
     const t = this.renderer.app;
     if (!t) return;
     const i = e.global;
     if (!this._isDragging || !this._dragStart || !this._startRect) {
-      this._hoverMode = this._hitHandle(i.x, i.y), t.stage.cursor = this._hoverMode === "move" ? "move" : this._hoverMode === "n" || this._hoverMode === "s" ? "ns-resize" : this._hoverMode === "e" || this._hoverMode === "w" ? "ew-resize" : (l = this._hoverMode) != null && l.endsWith("nw") || (c = this._hoverMode) != null && c.endsWith("se") ? "nwse-resize" : (u = this._hoverMode) != null && u.endsWith("ne") || (h = this._hoverMode) != null && h.endsWith("sw") ? "nesw-resize" : "crosshair", this.drawOverlay();
+      this._hoverMode = this._hitHandle(i.x, i.y), t.stage.cursor = this._hoverMode === "move" ? "move" : this._hoverMode === "n" || this._hoverMode === "s" ? "ns-resize" : this._hoverMode === "e" || this._hoverMode === "w" ? "ew-resize" : (l = this._hoverMode) != null && l.endsWith("nw") || (c = this._hoverMode) != null && c.endsWith("se") ? "nwse-resize" : (d = this._hoverMode) != null && d.endsWith("ne") || (h = this._hoverMode) != null && h.endsWith("sw") ? "nesw-resize" : "crosshair", this.drawOverlay();
       return;
     }
     const r = this.state.get("crop.rect");
@@ -889,30 +889,58 @@ const T = class T extends B {
   apply() {
     const e = this.renderer.app, t = this.renderer.sprite, i = this.renderer.originalTexture, r = this.state.get("crop.rect");
     if (!r || !t || !e || !i) return null;
-    const a = window.PIXI, o = this.renderer.zoom, n = i.width / t.width, l = i.height / t.height, c = (r.x - t.x) * n, u = (r.y - t.y) * l;
-    let h = Math.round(Math.max(1, r.width * n)), p = Math.round(Math.max(1, r.height * l)), m = Math.round(c), C = Math.round(u);
+    const a = window.PIXI, o = this.renderer.zoom, n = i.width / t.width, l = i.height / t.height, c = (r.x - t.x) * n, d = (r.y - t.y) * l;
+    let h = Math.round(Math.max(1, r.width * n)), p = Math.round(Math.max(1, r.height * l)), m = Math.round(c), x = Math.round(d);
     if (h <= 0 || p <= 0) return null;
-    const b = new a.Container(), y = new a.Sprite(i);
+    const g = new a.Container(), y = new a.Sprite(i);
     if (this.state.get("crop.shape") === "circle") {
-      const V = Math.round(Math.max(h, p)), be = m + h / 2, ye = C + p / 2;
-      m = Math.round(be - V / 2), C = Math.round(ye - V / 2), h = p = V;
-      const M = new a.Graphics();
-      typeof M.circle == "function" && typeof M.fill == "function" ? M.circle(h / 2, p / 2, h / 2).fill(16777215) : (M.beginFill(16777215, 1), M.drawCircle(h / 2, p / 2, h / 2), M.endFill()), y.mask = M, b.addChild(M);
+      const V = Math.round(Math.max(h, p)), be = m + h / 2, ye = x + p / 2;
+      m = Math.round(be - V / 2), x = Math.round(ye - V / 2), h = p = V;
+      const A = new a.Graphics();
+      typeof A.circle == "function" && typeof A.fill == "function" ? A.circle(h / 2, p / 2, h / 2).fill(16777215) : (A.beginFill(16777215, 1), A.drawCircle(h / 2, p / 2, h / 2), A.endFill()), y.mask = A, g.addChild(A);
     }
-    y.x = -m, y.y = -C, b.addChild(y);
+    y.x = -m, y.y = -x, g.addChild(y);
     const _ = a.RenderTexture.create({ width: h, height: p });
     e.renderer.render({
-      container: b,
+      container: g,
       target: _,
       clear: !0
-    }), b.destroy({ children: !0 });
+    }), g.destroy({ children: !0 });
     const v = this.renderer.originalTexture;
     v && v !== this.renderer.baseTexture && v.destroy(!0), this.renderer.originalTexture = _, e.stage.removeChild(t), t.destroy();
-    const z = new a.Sprite(_);
-    e.stage.addChild(z), this.renderer.sprite = z, this.renderer.fitScale = this.renderer.getFitScaleFor(_), this.renderer.setZoom(o, { keepCenter: !1 }), this.renderer.applyViewTransform(), this.renderer.render();
-    const O = { x: r.x, y: r.y, width: r.width, height: r.height }, me = this.state.get("crop.shape") || "free", ge = this.state.get("crop.aspect") || "free";
+    const C = new a.Sprite(_);
+    e.stage.addChild(C), this.renderer.sprite = C, this.renderer.fitScale = this.renderer.getFitScaleFor(_), this.renderer.setZoom(o, { keepCenter: !1 }), this.renderer.applyViewTransform(), this.renderer.render();
+    const O = { x: m, y: x, width: h, height: p }, me = this.state.get("crop.shape") || "free", ge = this.state.get("crop.aspect") || "free";
     return this.disable(), this.state.set("crop.appliedRect", O), this.state.set("crop.appliedShape", me), this.state.set("crop.appliedAspect", ge), this.emit("applied", { width: h, height: p }), { texture: _, preservedZoom: o };
   }
+  /**
+   * Apply a crop from saved texture-pixel coordinates (for state rehydration).
+   * Unlike apply(), this does not read from crop.rect or require the interactive overlay.
+   * @param {{ x: number, y: number, width: number, height: number }} pixelRect
+   * @param {'free'|'circle'} shape
+   * @returns {{ texture: Object, preservedZoom: number }|null}
+   */
+  applyFromPixelRect(e, t = "free") {
+    const i = this.renderer.app, r = this.renderer.sprite, a = this.renderer.originalTexture;
+    if (!e || !r || !i || !a) return null;
+    const o = window.PIXI, n = this.renderer.zoom;
+    let l = Math.round(Math.max(1, e.width)), c = Math.round(Math.max(1, e.height)), d = Math.round(e.x), h = Math.round(e.y);
+    if (l <= 0 || c <= 0) return null;
+    const p = new o.Container(), m = new o.Sprite(a);
+    if (t === "circle") {
+      const P = Math.round(Math.max(l, c)), _ = d + l / 2, v = h + c / 2;
+      d = Math.round(_ - P / 2), h = Math.round(v - P / 2), l = c = P;
+      const C = new o.Graphics();
+      typeof C.circle == "function" && typeof C.fill == "function" ? C.circle(l / 2, c / 2, l / 2).fill(16777215) : (C.beginFill(16777215, 1), C.drawCircle(l / 2, c / 2, l / 2), C.endFill()), m.mask = C, p.addChild(C);
+    }
+    m.x = -d, m.y = -h, p.addChild(m);
+    const x = o.RenderTexture.create({ width: l, height: c });
+    i.renderer.render({ container: p, target: x, clear: !0 }), p.destroy({ children: !0 });
+    const g = this.renderer.originalTexture;
+    g && g !== this.renderer.baseTexture && g.destroy(!0), this.renderer.originalTexture = x, i.stage.removeChild(r), r.destroy();
+    const y = new o.Sprite(x);
+    return i.stage.addChild(y), this.renderer.sprite = y, this.renderer.fitScale = this.renderer.getFitScaleFor(x), this.renderer.setZoom(n, { keepCenter: !1 }), this.renderer.applyViewTransform(), this.renderer.render(), { texture: x, preservedZoom: n };
+  }
   /**
    * Cancel crop
    */
@@ -993,8 +1021,8 @@ class Me {
     if (!a.ok) {
       let c = `Background removal failed (HTTP ${a.status})`;
       try {
-        const u = await a.text();
-        u && (c += `: ${u}`);
+        const d = await a.text();
+        d && (c += `: ${d}`);
       } catch {
       }
       throw new Error(c);
@@ -1053,7 +1081,7 @@ class Me {
     }
   }
 }
-function d(s, e = {}, ...t) {
+function u(s, e = {}, ...t) {
   const i = document.createElement(s);
   for (const [r, a] of Object.entries(e))
     if (a != null)
@@ -1070,16 +1098,16 @@ function d(s, e = {}, ...t) {
   return i;
 }
 function oe({ id: s, label: e, min: t = 0, max: i = 1, step: r = 0.01, value: a = 0.5, onChange: o }) {
-  const n = s.includes("-") ? s.split("-").slice(1).join("-") : s, l = d("div", {
+  const n = s.includes("-") ? s.split("-").slice(1).join("-") : s, l = u("div", {
     className: "slider-control slider-wrapper",
     "data-control": n,
     "data-testid": `slider-${n}`
-  }), c = d(
+  }), c = u(
     "div",
     { className: "slider-header" },
-    d("label", { for: s, className: "slider-label" }, e),
-    d("span", { className: "slider-value", id: `${s}-value` }, q(a))
-  ), u = d("input", {
+    u("label", { for: s, className: "slider-label" }, e),
+    u("span", { className: "slider-value", id: `${s}-value` }, q(a))
+  ), d = u("input", {
     type: "range",
     id: s,
     className: "slider-input",
@@ -1092,8 +1120,8 @@ function oe({ id: s, label: e, min: t = 0, max: i = 1, step: r = 0.01, value: a
       m && (m.textContent = q(p)), o == null || o(p);
     }
   });
-  return l.appendChild(c), l.appendChild(u), l.setValue = (h) => {
-    u.value = String(h);
+  return l.appendChild(c), l.appendChild(d), l.setValue = (h) => {
+    d.value = String(h);
     const p = l.querySelector(".slider-value");
     p && (p.textContent = q(h));
   }, l;
@@ -1102,24 +1130,24 @@ function q(s) {
   return Number.isInteger(s) ? String(s) : s.toFixed(2);
 }
 function ne({ id: s, label: e, checked: t = !1, onChange: i }) {
-  const r = d("div", { className: "toggle-control" }), a = d("label", { className: "toggle-label", for: s }, e), o = d("input", {
+  const r = u("div", { className: "toggle-control" }), a = u("label", { className: "toggle-label", for: s }, e), o = u("input", {
     type: "checkbox",
     id: s,
     className: "toggle-input",
     checked: t ? "checked" : void 0,
     onChange: (c) => i == null ? void 0 : i(c.target.checked)
-  }), n = d("div", {
+  }), n = u("div", {
     className: "toggle-switch",
     onClick: (c) => {
       c.target !== o && (o.checked = !o.checked, i == null || i(o.checked));
     }
-  }), l = d("span", { className: "toggle-slider" });
+  }), l = u("span", { className: "toggle-slider" });
   return n.appendChild(o), n.appendChild(l), r.appendChild(a), r.appendChild(n), r.setChecked = (c) => {
     o.checked = c;
   }, r;
 }
 function le({ id: s, label: e, value: t = "#000000", onChange: i }) {
-  const r = d("div", { className: "color-control" }), a = d("label", { className: "color-label", for: s }, e), o = d("input", {
+  const r = u("div", { className: "color-control" }), a = u("label", { className: "color-label", for: s }, e), o = u("input", {
     type: "color",
     id: s,
     className: "color-input",
@@ -1131,35 +1159,35 @@ function le({ id: s, label: e, value: t = "#000000", onChange: i }) {
   }, r;
 }
 function ce({ id: s, label: e, options: t = [], value: i, onChange: r }) {
-  const a = d("div", { className: "select-control" }), o = d("label", { className: "select-label", for: s }, e), n = d("select", {
+  const a = u("div", { className: "select-control" }), o = u("label", { className: "select-label", for: s }, e), n = u("select", {
     id: s,
     className: "select-input",
     onChange: (l) => r == null ? void 0 : r(l.target.value)
   });
   for (const l of t) {
-    const c = d("option", { value: l.value }, l.label);
+    const c = u("option", { value: l.value }, l.label);
     l.value === i && (c.selected = !0), n.appendChild(c);
   }
   return a.appendChild(o), a.appendChild(n), a.setValue = (l) => {
     n.value = l;
   }, a;
 }
-function F({ label: s, className: e = "", onClick: t, icon: i = null, disabled: r = !1 }) {
-  const a = d("button", {
+function z({ label: s, className: e = "", onClick: t, icon: i = null, disabled: r = !1 }) {
+  const a = u("button", {
     type: "button",
     className: `btn ${e}`.trim(),
     onClick: t,
     disabled: r ? "disabled" : void 0
   });
   if (i) {
-    const o = d("span", { className: "btn-icon" });
+    const o = u("span", { className: "btn-icon" });
     o.innerHTML = i;
     const n = o.querySelector("svg");
     n && n.setAttribute("aria-hidden", "true"), a.appendChild(o);
   }
   return s && a.appendChild(document.createTextNode(s)), a;
 }
-function x({ icon: s, title: e, className: t = "", onClick: i, disabled: r = !1, testId: a = null, ariaLabel: o = null }) {
+function w({ icon: s, title: e, className: t = "", onClick: i, disabled: r = !1, testId: a = null, ariaLabel: o = null }) {
   const n = {
     type: "button",
     className: `icon-btn ${t}`.trim(),
@@ -1169,24 +1197,24 @@ function x({ icon: s, title: e, className: t = "", onClick: i, disabled: r = !1,
     disabled: r ? "disabled" : void 0
   };
   a && (n.dataset = { testid: a });
-  const l = d("button", n);
+  const l = u("button", n);
   l.innerHTML = s;
   const c = l.querySelector("svg");
   return c && c.setAttribute("aria-hidden", "true"), l;
 }
 function Z({ label: s, icon: e, active: t = !1, onClick: i }) {
-  const r = d("button", {
+  const r = u("button", {
     type: "button",
     className: `chip ${t ? "active" : ""}`.trim(),
     onClick: i
   });
   if (e) {
-    const a = d("span", { className: "chip-icon" });
+    const a = u("span", { className: "chip-icon" });
     a.innerHTML = e;
     const o = a.querySelector("svg");
     o && o.setAttribute("aria-hidden", "true"), r.appendChild(a);
   }
-  return r.appendChild(d("span", { className: "chip-label" }, s)), r.setActive = (a) => {
+  return r.appendChild(u("span", { className: "chip-label" }, s)), r.setActive = (a) => {
     r.classList.toggle("active", a);
   }, r;
 }
@@ -1200,8 +1228,8 @@ class je {
    * @returns {HTMLElement}
    */
   render() {
-    this.element = d("div", { className: "editor-toolbar" });
-    const e = d("div", { className: "toolbar-section toolbar-left" }), t = x({
+    this.element = u("div", { className: "editor-toolbar" });
+    const e = u("div", { className: "toolbar-section toolbar-left" }), t = w({
       icon: Oe,
       title: "Open Image",
       className: "toolbar-btn",
@@ -1210,7 +1238,7 @@ class je {
       onClick: () => this.editor.openFilePicker()
     });
     e.appendChild(t);
-    const i = d("div", { className: "toolbar-section toolbar-center" }), r = x({
+    const i = u("div", { className: "toolbar-section toolbar-center" }), r = w({
       icon: Ae,
       title: "Zoom Out",
       className: "toolbar-btn",
@@ -1221,13 +1249,13 @@ class je {
         this.editor.setZoom(h - 0.25);
       }
     });
-    this._zoomLabel = d("span", {
+    this._zoomLabel = u("span", {
       className: "zoom-label",
       "aria-live": "polite",
       "aria-atomic": "true",
       role: "status"
     }, "100%");
-    const a = x({
+    const a = w({
       icon: Fe,
       title: "Zoom In",
       className: "toolbar-btn",
@@ -1237,7 +1265,7 @@ class je {
         const h = this.state.get("zoom");
         this.editor.setZoom(h + 0.25);
       }
-    }), o = x({
+    }), o = w({
       icon: ze,
       title: "Fit to Screen",
       className: "toolbar-btn",
@@ -1246,15 +1274,15 @@ class je {
       onClick: () => this.editor.fitToScreen()
     });
     i.appendChild(r), i.appendChild(this._zoomLabel), i.appendChild(a), i.appendChild(o);
-    const n = d("div", { className: "toolbar-section toolbar-right" });
-    this._themeBtn = x({
+    const n = u("div", { className: "toolbar-section toolbar-right" });
+    this._themeBtn = w({
       icon: this.state.get("isDarkMode") ? Q : J,
       title: "Toggle Theme",
       className: "toolbar-btn toolbar-btn-theme",
       testId: "btn-toggle-theme",
       ariaLabel: "Toggle theme",
       onClick: () => this.editor.toggleTheme()
-    }), this._cropBtn = x({
+    }), this._cropBtn = w({
       icon: ue,
       title: "Crop",
       className: "toolbar-btn toolbar-btn-crop",
@@ -1264,21 +1292,21 @@ class je {
         this.state.get("mode") === "crop" ? this.editor.setMode("filters") : this.editor.setMode("crop");
       }
     });
-    const l = x({
+    const l = w({
       icon: pe,
       title: "Reset All",
       className: "toolbar-btn",
       testId: "btn-reset-all",
       ariaLabel: "Reset all changes",
       onClick: () => this.editor.resetAll()
-    }), c = x({
+    }), c = w({
       icon: Ye,
       title: "Save Image",
       className: "toolbar-btn toolbar-btn-primary",
       testId: "btn-save-edit",
       ariaLabel: "Save image",
       onClick: () => this.editor.save()
-    }), u = x({
+    }), d = w({
       icon: K,
       title: "Close",
       className: "toolbar-btn",
@@ -1286,7 +1314,7 @@ class je {
       ariaLabel: "Close editor",
       onClick: () => this.editor.close()
     });
-    return n.appendChild(this._themeBtn), n.appendChild(this._cropBtn), n.appendChild(l), n.appendChild(c), n.appendChild(u), this.element.appendChild(e), this.element.appendChild(i), this.element.appendChild(n), this._subscribeToState(), this.element;
+    return n.appendChild(this._themeBtn), n.appendChild(this._cropBtn), n.appendChild(l), n.appendChild(c), n.appendChild(d), this.element.appendChild(e), this.element.appendChild(i), this.element.appendChild(n), this._subscribeToState(), this.element;
   }
   /**
    * Subscribe to state changes
@@ -1347,15 +1375,15 @@ class qe {
    * @returns {HTMLElement}
    */
   render(e) {
-    this._onSelect = e, this.element = d("div", {
+    this._onSelect = e, this.element = u("div", {
       className: "category-carousel-container",
       "data-testid": "category-carousel"
-    }), this._leftBtn = x({
+    }), this._leftBtn = w({
       icon: he,
       title: "Previous categories",
       className: "carousel-nav carousel-nav-left",
       onClick: () => this._scrollLeft()
-    }), this._carousel = d("div", { className: "category-carousel" }), L.forEach((i) => {
+    }), this._carousel = u("div", { className: "category-carousel" }), L.forEach((i) => {
       const r = Z({
         label: i.name,
         icon: i.icon,
@@ -1363,19 +1391,19 @@ class qe {
         onClick: () => this._selectCategory(i.id)
       });
       r.dataset.categoryId = i.id, r.dataset.category = i.id, r.dataset.testid = `category-${i.id}`, this._chips.set(i.id, r), this._carousel.appendChild(r);
-    }), this._rightBtn = x({
+    }), this._rightBtn = w({
       icon: de,
       title: "Next categories",
       className: "carousel-nav carousel-nav-right",
       onClick: () => this._scrollRight()
-    }), this._pagination = d("div", {
+    }), this._pagination = u("div", {
       className: "carousel-pagination",
       role: "tablist",
       "aria-label": "Category pages"
     });
     const t = Math.ceil(L.length / 3);
     for (let i = 0; i < t; i++) {
-      const r = d("button", {
+      const r = u("button", {
         type: "button",
         className: `pagination-dot ${i === 0 ? "active" : ""}`,
         role: "tab",
@@ -1482,12 +1510,12 @@ class He {
    * @returns {HTMLElement}
    */
   render({ onToggle: e, onSelect: t }) {
-    return this._onToggle = e, this._onSelect = t, this.element = d("div", { className: "filter-carousel-container" }), this._leftBtn = x({
+    return this._onToggle = e, this._onSelect = t, this.element = u("div", { className: "filter-carousel-container" }), this._leftBtn = w({
       icon: he,
       title: "Previous filters",
       className: "carousel-nav carousel-nav-left",
       onClick: () => this._scrollLeft()
-    }), this._carousel = d("div", { className: "filter-carousel" }), this._rightBtn = x({
+    }), this._carousel = u("div", { className: "filter-carousel" }), this._rightBtn = w({
       icon: de,
       title: "Next filters",
       className: "carousel-nav carousel-nav-right",
@@ -1534,14 +1562,14 @@ class He {
    * @returns {HTMLElement}
    */
   _createFilterCard(e, { isActive: t, isSelected: i }) {
-    const r = d("div", {
+    const r = u("div", {
       className: `filter-card ${t ? "active" : ""} ${i ? "selected" : ""}`,
       "data-filter": e.id,
       "data-testid": `filter-${e.id}`,
       onClick: () => this._handleCardClick(e.id)
-    }), a = d("div", { className: "filter-preview" }), o = d("span", { className: "filter-preview-text" }, e.name.charAt(0));
+    }), a = u("div", { className: "filter-preview" }), o = u("span", { className: "filter-preview-text" }, e.name.charAt(0));
     a.appendChild(o);
-    const n = d("span", { className: "filter-name", title: e.name }, e.name), l = d("button", {
+    const n = u("span", { className: "filter-name", title: e.name }, e.name), l = u("button", {
       className: `filter-toggle ${t ? "active" : ""}`,
       onClick: (c) => {
         var p;
@@ -1639,7 +1667,7 @@ class $e {
    * @returns {HTMLElement}
    */
   render({ onChange: e, onReset: t, onAction: i }) {
-    return this._onChange = e, this._onReset = t, this._onAction = i, this.element = d("div", { className: "filter-adjustments" }), this._subscribeToState(), this._renderControls(), this.element;
+    return this._onChange = e, this._onReset = t, this._onAction = i, this.element = u("div", { className: "filter-adjustments" }), this._subscribeToState(), this._renderControls(), this.element;
   }
   /**
    * Subscribe to state changes
@@ -1662,24 +1690,24 @@ class $e {
     const e = this.state.get("selectedFilter");
     if (!e) {
       this.element.appendChild(
-        d("div", { className: "no-filter-selected" }, "Select a filter to adjust")
+        u("div", { className: "no-filter-selected" }, "Select a filter to adjust")
       );
       return;
     }
     const t = this.filterManager.getFilterDef(e);
     if (!t) {
       this.element.appendChild(
-        d("div", { className: "no-filter-selected" }, "Filter not found")
+        u("div", { className: "no-filter-selected" }, "Filter not found")
       );
       return;
     }
-    const i = d("div", { className: "adjustments-header" });
-    i.appendChild(d("span", { className: "adjustments-title" }, t.name)), i.appendChild(F({
+    const i = u("div", { className: "adjustments-header" });
+    i.appendChild(u("span", { className: "adjustments-title" }, t.name)), i.appendChild(z({
       label: "Reset",
       className: "btn-text",
       onClick: () => this._handleReset(e)
     })), this.element.appendChild(i);
-    const r = d("div", { className: "adjustments-grid" }), a = this.state.getFilterValues(e);
+    const r = u("div", { className: "adjustments-grid" }), a = this.state.getFilterValues(e);
     t.controls.forEach((o) => {
       const n = this._createControl(e, o, a[o.id] ?? o.default);
       n && (this._controls.set(o.id, n), r.appendChild(n));
@@ -1730,8 +1758,8 @@ class $e {
           onChange: (l) => this._handleChange(e, t.id, l)
         });
       case "button":
-        const n = d("div", { className: "button-control" });
-        return n.appendChild(F({
+        const n = u("div", { className: "button-control" });
+        return n.appendChild(z({
           label: r,
           className: "btn-secondary",
           onClick: () => this._handleAction(e, t.action || t.id)
@@ -1842,31 +1870,31 @@ class We {
    * @param {Object} callbacks - { onChange, onReset, onRemove, onAction }
    */
   build(e, { onChange: t, onReset: i, onRemove: r, onAction: a }) {
-    this._onChange = t, this._onReset = i, this._onRemove = r, this._onAction = a, this._container = e, this._drawer = d("div", { className: "mobile-filter-drawer" });
-    const o = d("div", { className: "drawer-header" });
-    this._titleEl = d("span", { className: "drawer-title" }, "Filter");
-    const n = d("div", { className: "drawer-header-actions" }), l = F({
+    this._onChange = t, this._onReset = i, this._onRemove = r, this._onAction = a, this._container = e, this._drawer = u("div", { className: "mobile-filter-drawer" });
+    const o = u("div", { className: "drawer-header" });
+    this._titleEl = u("span", { className: "drawer-title" }, "Filter");
+    const n = u("div", { className: "drawer-header-actions" }), l = z({
       label: "Reset",
       className: "btn-text",
       onClick: () => {
         var h;
         this._currentFilterId && ((h = this._onReset) == null || h.call(this, this._currentFilterId), this._renderControls());
       }
-    }), c = F({
+    }), c = z({
       label: "Remove",
       className: "btn-text btn-danger",
       onClick: () => {
         var h;
         this._currentFilterId && ((h = this._onRemove) == null || h.call(this, this._currentFilterId), this.close());
       }
-    }), u = x({
+    }), d = w({
       icon: K,
       title: "Close",
       className: "btn-icon-sm",
       ariaLabel: "Close drawer",
       onClick: () => this.close()
     });
-    n.appendChild(l), n.appendChild(c), n.appendChild(u), o.appendChild(this._titleEl), o.appendChild(n), this._drawer.appendChild(o), this._body = d("div", { className: "drawer-body" }), this._drawer.appendChild(this._body), e.appendChild(this._drawer);
+    n.appendChild(l), n.appendChild(c), n.appendChild(d), o.appendChild(this._titleEl), o.appendChild(n), this._drawer.appendChild(o), this._body = u("div", { className: "drawer-body" }), this._drawer.appendChild(this._body), e.appendChild(this._drawer);
   }
   /**
    * Open the drawer for a specific filter
@@ -1916,7 +1944,7 @@ class We {
     const e = this.filterManager.getFilterDef(this._currentFilterId);
     if (!e) return;
     this._titleEl.textContent = e.name;
-    const t = d("div", { className: "adjustments-grid" }), i = this.state.getFilterValues(this._currentFilterId);
+    const t = u("div", { className: "adjustments-grid" }), i = this.state.getFilterValues(this._currentFilterId);
     e.controls.forEach((r) => {
       if (r.hidden) return;
       const a = this._createControl(this._currentFilterId, r, i[r.id] ?? r.default);
@@ -1980,8 +2008,8 @@ class We {
         });
       }
       case "button": {
-        const o = d("div", { className: "button-control" });
-        return o.appendChild(F({
+        const o = u("div", { className: "button-control" });
+        return o.appendChild(z({
           label: r,
           className: "btn-secondary",
           onClick: () => {
@@ -2037,10 +2065,10 @@ class Ze {
    * @returns {HTMLElement}
    */
   render({ onToggle: e, onSelect: t }) {
-    return this._onToggle = e, this._onSelect = t, this.element = d("div", {
+    return this._onToggle = e, this._onSelect = t, this.element = u("div", {
       className: "mobile-active-filters",
       "data-testid": "mobile-active-filters"
-    }), this._scrollContainer = d("div", { className: "mobile-active-filters-scroll" }), this.element.appendChild(this._scrollContainer), this._subscribeToState(), this._renderChips(), this.element;
+    }), this._scrollContainer = u("div", { className: "mobile-active-filters-scroll" }), this.element.appendChild(this._scrollContainer), this._subscribeToState(), this._renderChips(), this.element;
   }
   _subscribeToState() {
     const e = this.state.on("change:activeFilters", () => {
@@ -2056,7 +2084,7 @@ class Ze {
     this._scrollContainer.innerHTML = "", this._chips.clear();
     const e = this.state.get("activeFilters");
     if (!e || e.size === 0) {
-      const t = d("div", {
+      const t = u("div", {
         className: "active-filter-placeholder"
       }, "No active filters");
       this._scrollContainer.appendChild(t);
@@ -2070,17 +2098,17 @@ class Ze {
     }), this._updateSelectedState();
   }
   _createChip(e, t) {
-    const i = d("div", {
+    const i = u("div", {
       className: "active-filter-chip",
       "data-filter-id": e,
       "data-testid": `active-chip-${e}`
-    }), r = d("span", {
+    }), r = u("span", {
       className: "active-filter-chip-label",
       onClick: (o) => {
         var n;
         o.stopPropagation(), (n = this._onSelect) == null || n.call(this, e);
       }
-    }, t.name), a = d("button", {
+    }, t.name), a = u("button", {
       className: "active-filter-chip-check",
       "aria-label": `Remove ${t.name} filter`,
       onClick: (o) => {
@@ -2130,39 +2158,39 @@ class Qe {
    * @returns {HTMLElement}
    */
   render() {
-    this.element = d("div", {
+    this.element = u("div", {
       className: "crop-controls",
       "data-testid": "crop-controls"
     });
-    const e = d("div", { className: "crop-section" });
-    e.appendChild(d("label", { className: "section-label" }, "Shape"));
-    const t = d("div", { className: "chip-row" }), i = this.state.get("crop.shape");
+    const e = u("div", { className: "crop-section" });
+    e.appendChild(u("label", { className: "section-label" }, "Shape"));
+    const t = u("div", { className: "chip-row" }), i = this.state.get("crop.shape");
     Ge.forEach((c) => {
-      const u = Z({
+      const d = Z({
         label: c.name,
         icon: c.icon,
         active: i === c.id,
         onClick: () => this._selectShape(c.id)
       });
-      u.dataset.shape = c.id, u.dataset.testid = `crop-shape-${c.id}`, this._shapeChips.set(c.id, u), t.appendChild(u);
-    }), e.appendChild(t), this.element.appendChild(e), this.state.get("lockCropShape") && (e.style.display = "none"), this._shapeSection = e, this._aspectSection = d("div", { className: "crop-section" }), this._aspectSection.appendChild(d("label", { className: "section-label" }, "Aspect Ratio"));
-    const r = d("div", { className: "chip-row aspect-row" }), a = this.state.get("crop.aspect");
+      d.dataset.shape = c.id, d.dataset.testid = `crop-shape-${c.id}`, this._shapeChips.set(c.id, d), t.appendChild(d);
+    }), e.appendChild(t), this.element.appendChild(e), this.state.get("lockCropShape") && (e.style.display = "none"), this._shapeSection = e, this._aspectSection = u("div", { className: "crop-section" }), this._aspectSection.appendChild(u("label", { className: "section-label" }, "Aspect Ratio"));
+    const r = u("div", { className: "chip-row aspect-row" }), a = this.state.get("crop.aspect");
     Ke.forEach((c) => {
-      const u = Z({
+      const d = Z({
         label: c.name,
         active: a === c.id,
         onClick: () => this._selectAspect(c.id)
       });
-      u.dataset.ratio = c.id, u.dataset.testid = `crop-ratio-${c.id}`, this._aspectChips.set(c.id, u), r.appendChild(u);
+      d.dataset.ratio = c.id, d.dataset.testid = `crop-ratio-${c.id}`, this._aspectChips.set(c.id, d), r.appendChild(d);
     }), this._aspectSection.appendChild(r), this.element.appendChild(this._aspectSection), this._updateAspectVisibility();
-    const o = d("div", { className: "crop-actions" }), n = F({
+    const o = u("div", { className: "crop-actions" }), n = z({
       label: "Cancel",
       className: "btn-secondary crop-cancel-btn",
       icon: K,
       onClick: () => this.cropManager.cancel()
     });
     n.dataset.testid = "cancel-crop";
-    const l = F({
+    const l = z({
       label: "Apply Crop",
       className: "btn-primary crop-apply-btn",
       icon: G,
@@ -2238,18 +2266,18 @@ class Je {
    * @returns {HTMLElement}
    */
   render({ onRemove: e, onReset: t, onClearAll: i, onUpdateValue: r, onSelect: a }) {
-    this._onRemove = e, this._onReset = t, this._onClearAll = i, this._onUpdateValue = r, this._onSelect = a, this.element = d("div", {
+    this._onRemove = e, this._onReset = t, this._onClearAll = i, this._onUpdateValue = r, this._onSelect = a, this.element = u("div", {
       className: "active-filters-panel",
       "data-testid": "active-filters-panel"
     });
-    const o = d("div", { className: "panel-header" });
-    o.appendChild(d("h3", { className: "panel-title" }, "Active Filters"));
-    const n = F({
+    const o = u("div", { className: "panel-header" });
+    o.appendChild(u("h3", { className: "panel-title" }, "Active Filters"));
+    const n = z({
       label: "Clear All",
       className: "btn-text btn-danger",
       onClick: () => this._handleClearAll()
     });
-    return n.dataset.testid = "clear-all-filters", o.appendChild(n), this.element.appendChild(o), this._listContainer = d("div", { className: "active-filters-list" }), this.element.appendChild(this._listContainer), this._subscribeToState(), this._renderFilterList(), this.element;
+    return n.dataset.testid = "clear-all-filters", o.appendChild(n), this.element.appendChild(o), this._listContainer = u("div", { className: "active-filters-list" }), this.element.appendChild(this._listContainer), this._subscribeToState(), this._renderFilterList(), this.element;
   }
   /**
    * Subscribe to state changes
@@ -2285,7 +2313,7 @@ class Je {
     const e = this.state.get("activeFilters");
     if (e.size === 0) {
       this._listContainer.appendChild(
-        d("div", { className: "no-filters-message" }, "No filters active")
+        u("div", { className: "no-filters-message" }, "No filters active")
       );
       return;
     }
@@ -2303,26 +2331,26 @@ class Je {
    * @returns {HTMLElement}
    */
   _createFilterItem(e, t) {
-    const r = this.state.get("selectedFilter") === e, a = d("div", {
+    const r = this.state.get("selectedFilter") === e, a = u("div", {
       className: `active-filter-item ${r ? "selected" : ""}`,
       "data-active-filter": e,
       "data-testid": `active-filter-${e}`,
       onClick: (m) => {
         m.target.closest(".filter-item-actions") || this._handleSelect(e);
       }
-    }), o = d("div", { className: "filter-item-header" }), n = d("span", { className: "filter-item-name" }, t.name), l = d("div", { className: "filter-item-actions" }), c = x({
+    }), o = u("div", { className: "filter-item-header" }), n = u("span", { className: "filter-item-name" }, t.name), l = u("div", { className: "filter-item-actions" }), c = w({
       icon: pe,
       title: "Reset filter",
       className: "btn-icon-sm",
       onClick: () => this._handleReset(e)
-    }), u = x({
+    }), d = w({
       icon: Be,
       title: "Remove filter",
       className: "btn-icon-sm btn-danger",
       onClick: () => this._handleRemove(e)
     });
-    l.appendChild(c), l.appendChild(u), o.appendChild(n), o.appendChild(l), a.appendChild(o);
-    const h = this.state.getFilterValues(e), p = d("div", { className: "filter-item-summary" });
+    l.appendChild(c), l.appendChild(d), o.appendChild(n), o.appendChild(l), a.appendChild(o);
+    const h = this.state.getFilterValues(e), p = u("div", { className: "filter-item-summary" });
     return p.textContent = this._getValuesSummary(t, h), a.appendChild(p), a._summaryEl = p, a;
   }
   /**
@@ -2531,13 +2559,13 @@ class ei extends B {
    * Build DOM structure
    */
   _buildDOM() {
-    this._container.innerHTML = "", this._editorEl = d("div", {
+    this._container.innerHTML = "", this._editorEl = u("div", {
       className: `vanilla-image-editor ${this._state.get("isDarkMode") ? "dark" : "light"}`
     });
-    const e = d("div", { className: "editor-toolbar-container" });
+    const e = u("div", { className: "editor-toolbar-container" });
     this._editorEl.appendChild(e), this._toolbarContainer = e;
-    const t = d("div", { className: "editor-content" }), i = d("div", { className: "canvas-section" });
-    this._canvasContainer = d("div", { className: "canvas-container" }), this._cropOverlay = d("canvas", { className: "crop-overlay", "aria-hidden": "true" }), i.appendChild(this._canvasContainer), i.appendChild(this._cropOverlay), t.appendChild(i), this._controlsSection = d("div", { className: "controls-section" }), t.appendChild(this._controlsSection), this._editorEl.appendChild(t), this._fileInput = d("input", {
+    const t = u("div", { className: "editor-content" }), i = u("div", { className: "canvas-section" });
+    this._canvasContainer = u("div", { className: "canvas-container" }), this._cropOverlay = u("canvas", { className: "crop-overlay", "aria-hidden": "true" }), i.appendChild(this._canvasContainer), i.appendChild(this._cropOverlay), t.appendChild(i), this._controlsSection = u("div", { className: "controls-section" }), t.appendChild(this._controlsSection), this._editorEl.appendChild(t), this._fileInput = u("input", {
       type: "file",
       accept: "image/*",
       className: "hidden-file-input",
@@ -2549,9 +2577,9 @@ class ei extends B {
    * Initialize UI components
    */
   _initUI() {
-    this._toolbar = new je(this._state, this), this._toolbarContainer.appendChild(this._toolbar.render()), this._filterControlsEl = d("div", { className: "filter-controls-container" }), this._categoryCarousel = new qe(this._state, this), this._filterControlsEl.appendChild(this._categoryCarousel.render((r) => {
+    this._toolbar = new je(this._state, this), this._toolbarContainer.appendChild(this._toolbar.render()), this._filterControlsEl = u("div", { className: "filter-controls-container" }), this._categoryCarousel = new qe(this._state, this), this._filterControlsEl.appendChild(this._categoryCarousel.render((r) => {
     }));
-    const e = d("div", { className: "filter-layout" }), t = d("div", { className: "filter-left-column" });
+    const e = u("div", { className: "filter-layout" }), t = u("div", { className: "filter-left-column" });
     this._filterCarousel = new He(this._state, this._filterManager), t.appendChild(this._filterCarousel.render({
       onToggle: (r, a) => this._handleFilterToggle(r, a),
       onSelect: (r) => {
@@ -2562,7 +2590,7 @@ class ei extends B {
       onReset: (r) => this._handleFilterReset(r),
       onAction: (r, a) => this._handleFilterAction(r, a)
     })), e.appendChild(t);
-    const i = d("div", { className: "filter-right-column" });
+    const i = u("div", { className: "filter-right-column" });
     this._activeFiltersPanel = new Je(this._state, this._filterManager), i.appendChild(this._activeFiltersPanel.render({
       onRemove: (r) => this._handleFilterToggle(r, !1),
       onReset: (r) => this._handleFilterReset(r),
@@ -2719,12 +2747,18 @@ class ei extends B {
    * @param {Object} state - ImageEditorSessionState
    */
   _hydrateState(e) {
-    if (!(!e || e.version !== 1) && (e.crop && (e.crop.rect && this._state.set("crop.rect", { ...e.crop.rect }), e.crop.shape && this._state.set("crop.shape", e.crop.shape), e.crop.aspectRatio && this._state.set("crop.aspect", e.crop.aspectRatio)), Array.isArray(e.filters))) {
-      for (const t of e.filters)
-        if (t.enabled && (this._state.toggleFilter(t.id, !0), this._filterManager.initializeValues(t.id), t.values))
-          for (const [i, r] of Object.entries(t.values))
-            this._state.setFilterValue(t.id, i, r);
-      this._filterManager.applyFilters();
+    if (!(!e || e.version !== 1)) {
+      if (e.crop) {
+        const t = e.crop.shape || "free", i = e.crop.aspectRatio || "free";
+        e.crop.rect && (this._cropManager.applyFromPixelRect(e.crop.rect, t), this._state.set("crop.appliedRect", { ...e.crop.rect }), this._state.set("crop.appliedShape", t), this._state.set("crop.appliedAspect", i)), this._state.set("crop.shape", t), this._state.set("crop.aspect", i);
+      }
+      if (Array.isArray(e.filters)) {
+        for (const t of e.filters)
+          if (t.enabled && (this._state.toggleFilter(t.id, !0), this._filterManager.initializeValues(t.id), t.values))
+            for (const [i, r] of Object.entries(t.values))
+              this._state.setFilterValue(t.id, i, r);
+        this._filterManager.applyFilters();
+      }
     }
   }
   /**
@@ -2892,9 +2926,9 @@ class ei extends B {
   _showLoadingOverlay(e) {
     var i;
     if (!this._loadingOverlay)
-      this._loadingOverlay = d("div", { className: "editor-loading-overlay" }, [
-        d("div", { className: "editor-loading-spinner" }),
-        d("div", { className: "editor-loading-text" }, e)
+      this._loadingOverlay = u("div", { className: "editor-loading-overlay" }, [
+        u("div", { className: "editor-loading-spinner" }),
+        u("div", { className: "editor-loading-text" }, e)
       ]);
     else {
       const r = this._loadingOverlay.querySelector(".editor-loading-text");
@@ -2914,36 +2948,36 @@ class ei extends B {
    * Destroy the editor and clean up
    */
   destroy() {
-    var e, t, i, r, a, o, n, l, c, u;
+    var e, t, i, r, a, o, n, l, c, d;
     this._destroyed = !0;
     for (const h of this._objectUrls)
       try {
         URL.revokeObjectURL(h);
       } catch {
       }
-    this._objectUrls.clear(), (e = this._resizeObserver) == null || e.disconnect(), this._renderer.destroy(), this._cropManager.disable(), this._handleWindowResize && window.removeEventListener("resize", this._handleWindowResize), (t = this._toolbar) == null || t.destroy(), (i = this._categoryCarousel) == null || i.destroy(), (r = this._filterCarousel) == null || r.destroy(), (a = this._filterAdjustments) == null || a.destroy(), (o = this._mobileFilterDrawer) == null || o.destroy(), (n = this._mobileActiveFilters) == null || n.destroy(), (l = this._cropControls) == null || l.destroy(), (c = this._activeFiltersPanel) == null || c.destroy(), (u = this._editorEl) == null || u.remove(), this._container = null, this._state = null, this.emit("destroyed"), this.removeAllListeners();
+    this._objectUrls.clear(), (e = this._resizeObserver) == null || e.disconnect(), this._renderer.destroy(), this._cropManager.disable(), this._handleWindowResize && window.removeEventListener("resize", this._handleWindowResize), (t = this._toolbar) == null || t.destroy(), (i = this._categoryCarousel) == null || i.destroy(), (r = this._filterCarousel) == null || r.destroy(), (a = this._filterAdjustments) == null || a.destroy(), (o = this._mobileFilterDrawer) == null || o.destroy(), (n = this._mobileActiveFilters) == null || n.destroy(), (l = this._cropControls) == null || l.destroy(), (c = this._activeFiltersPanel) == null || c.destroy(), (d = this._editorEl) == null || d.remove(), this._container = null, this._state = null, this.emit("destroyed"), this.removeAllListeners();
   }
 }
-const S = /* @__PURE__ */ new Map(), I = /* @__PURE__ */ new Map();
+const k = /* @__PURE__ */ new Map(), I = /* @__PURE__ */ new Map();
 function tt(s, e) {
   return !Array.isArray(s.mediaTargets) || s.mediaTargets.length === 0 ? !0 : s.mediaTargets.includes(e);
 }
 function f(s) {
   var e;
-  return S.has(s.id), S.set(s.id, s), I.has(s.category) || I.set(s.category, []), (e = I.get(s.category)) == null || e.push(s.id), s;
+  return k.has(s.id), k.set(s.id, s), I.has(s.category) || I.set(s.category, []), (e = I.get(s.category)) == null || e.push(s.id), s;
 }
 function it(s) {
-  return S.get(s);
+  return k.get(s);
 }
 function U() {
-  return Array.from(S.values());
+  return Array.from(k.values());
 }
 function rt() {
-  U().map((t) => t.id), Object.entries(g).filter(
+  U().map((t) => t.id), Object.entries(b).filter(
     (t) => /Filter$/.test(t[0]) && typeof t[1] == "function"
   ).forEach(([t, i]) => {
     const r = t.replace(/Filter$/, "").replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
-    S.has(r) || f({
+    k.has(r) || f({
       id: r,
       name: t.replace(/Filter$/, ""),
       category: "unlisted",
@@ -2963,19 +2997,19 @@ function rt() {
   });
 }
 function st(s) {
-  return (I.get(s) || []).map((t) => S.get(t)).filter(Boolean);
+  return (I.get(s) || []).map((t) => k.get(t)).filter(Boolean);
 }
 function at() {
   return Array.from(I.keys());
 }
 function ti(s) {
-  return S.has(s);
+  return k.has(s);
 }
 function ot(s) {
-  const e = S.get(s);
+  const e = k.get(s);
   if (!e)
     return !1;
-  S.delete(s);
+  k.delete(s);
   const t = I.get(e.category);
   if (t) {
     const i = t.indexOf(s);
@@ -2984,11 +3018,11 @@ function ot(s) {
   return !0;
 }
 function ii(s, e) {
-  const t = S.get(s);
+  const t = k.get(s);
   return t ? tt(t, e) : !1;
 }
 function nt() {
-  return Array.from(S.values()).map((s) => ({
+  return Array.from(k.values()).map((s) => ({
     id: s.id,
     name: s.name,
     category: s.category,
@@ -2996,17 +3030,17 @@ function nt() {
   }));
 }
 if (typeof window < "u") {
-  window.__DEBUG_FILTERS_LIST = Array.from(S.keys()), window.getAllFilters = U, window.getFilter = it, window.getFiltersByCategory = st, window.getRegisteredFilters = nt;
+  window.__DEBUG_FILTERS_LIST = Array.from(k.keys()), window.getAllFilters = U, window.getFilter = it, window.getFiltersByCategory = st, window.getRegisteredFilters = nt;
   const s = f;
   window.registerFilter = (e) => {
     const t = s(e);
-    return window.__DEBUG_FILTERS_LIST = Array.from(S.keys()), t;
+    return window.__DEBUG_FILTERS_LIST = Array.from(k.keys()), t;
   };
 }
 typeof window < "u" && (window.initializeFilterRegistry = window.initializeFilterRegistry || function() {
   return [];
 });
-const { AdjustmentFilter: lt } = g, { ColorMatrixFilter: ct } = w, k = {
+const { AdjustmentFilter: lt } = b, { ColorMatrixFilter: ct } = S, M = {
   gamma: 1,
   saturation: 1,
   contrast: 1,
@@ -3025,7 +3059,7 @@ const { AdjustmentFilter: lt } = g, { ColorMatrixFilter: ct } = w, k = {
   "blue",
   "alpha"
 ]);
-function P(s, e) {
+function F(s, e) {
   if (typeof s == "number" && Number.isFinite(s))
     return s;
   if (typeof s == "string") {
@@ -3040,14 +3074,14 @@ function ee(s) {
 }
 function dt(s) {
   return {
-    gamma: P(s.gamma, k.gamma),
-    saturation: P(s.saturation, k.saturation),
-    contrast: P(s.contrast, k.contrast),
-    brightness: P(s.brightness, k.brightness),
-    red: P(s.red, k.red),
-    green: P(s.green, k.green),
-    blue: P(s.blue, k.blue),
-    alpha: P(s.alpha, k.alpha)
+    gamma: F(s.gamma, M.gamma),
+    saturation: F(s.saturation, M.saturation),
+    contrast: F(s.contrast, M.contrast),
+    brightness: F(s.brightness, M.brightness),
+    red: F(s.red, M.red),
+    green: F(s.green, M.green),
+    blue: F(s.blue, M.blue),
+    alpha: F(s.alpha, M.alpha)
   };
 }
 function te(s, e) {
@@ -3068,10 +3102,10 @@ f({
           try {
             if (!ee(o))
               return;
-            const l = this._customParams ?? { ...k }, c = P(n, l[o]);
+            const l = this._customParams ?? { ...M }, c = F(n, l[o]);
             l[o] = c, this._customParams = l;
-            const u = this;
-            o in u && (u[o] = c);
+            const d = this;
+            o in d && (d[o] = c);
           } catch {
           }
         }, i;
@@ -3081,8 +3115,8 @@ f({
           try {
             if (!ee(n))
               return;
-            const c = this._customParams ?? { ...k }, u = P(l, c[n]);
-            c[n] = u, this._customParams = c, te(this, c);
+            const c = this._customParams ?? { ...M }, d = F(l, c[n]);
+            c[n] = d, this._customParams = c, te(this, c);
           } catch {
           }
         }, r;
@@ -3186,7 +3220,7 @@ f({
     }
   ]
 });
-const { ColorMatrixFilter: ut } = w, N = {
+const { ColorMatrixFilter: ut } = S, N = {
   brightness: 1,
   contrast: 1,
   saturation: 1,
@@ -3344,7 +3378,7 @@ f({
   // Create an instance of the ColorMatrixFilter with alpha adjustment
   createFilter: (s) => {
     try {
-      const e = s.alpha !== void 0 ? s.alpha : 1, t = new w.ColorMatrixFilter();
+      const e = s.alpha !== void 0 ? s.alpha : 1, t = new S.ColorMatrixFilter();
       return t.alpha = e, t._customParams = {
         alpha: e
       }, t.updateUIParam = function(i, r) {
@@ -3391,7 +3425,7 @@ f({
    */
   createFilter: (s) => {
     try {
-      const e = new w.BlurFilter({
+      const e = new S.BlurFilter({
         strength: s.blur || 8,
         quality: s.quality || 4
       });
@@ -3450,7 +3484,7 @@ f({
   description: "Advanced color adjustments including sepia, hue rotation, and more",
   // Create an instance of the ColorMatrixFilter with the provided parameters
   createFilter: (s) => {
-    const e = w.ColorMatrixFilter;
+    const e = S.ColorMatrixFilter;
     if (!e)
       return null;
     const t = new e();
@@ -3530,7 +3564,7 @@ f({
     }
   ]
 });
-const { ColorOverlayFilter: gt } = g;
+const { ColorOverlayFilter: gt } = b;
 f({
   id: "colorOverlay",
   name: "Color Overlay",
@@ -3609,7 +3643,7 @@ f({
       const e = s.color ? s.color.replace("#", "0x") : "0x000000", t = s.distance !== void 0 ? s.distance : 5, i = s.angle !== void 0 ? s.angle : 90, r = {
         x: t * Math.cos(i * Math.PI / 180),
         y: t * Math.sin(i * Math.PI / 180)
-      }, a = new g.DropShadowFilter({
+      }, a = new b.DropShadowFilter({
         offset: r,
         color: parseInt(e, 16),
         alpha: s.alpha !== void 0 ? s.alpha : 0.5,
@@ -3633,8 +3667,8 @@ f({
           switch (this._customParams = l, l[o] = n, o) {
             case "color":
               if (typeof n == "string") {
-                const u = parseInt(n.replace("#", "0x"), 16);
-                this.color = u;
+                const d = parseInt(n.replace("#", "0x"), 16);
+                this.color = d;
               }
               break;
             case "alpha":
@@ -3777,7 +3811,7 @@ f({
     }
   ]
 });
-const { ColorMatrixFilter: bt } = w;
+const { ColorMatrixFilter: bt } = S;
 f({
   id: "grayscale",
   name: "Grayscale",
@@ -3830,7 +3864,7 @@ f({
 function re(s, e) {
   s.reset(), s.greyscale(e);
 }
-const { HslAdjustmentFilter: yt } = g;
+const { HslAdjustmentFilter: yt } = b;
 f({
   id: "hsl-adjustment",
   name: "HSL Adjustment",
@@ -3940,7 +3974,7 @@ f({
     }
   ]
 });
-const { KawaseBlurFilter: _t } = g;
+const { KawaseBlurFilter: _t } = b;
 f({
   id: "kawase-blur",
   name: "Kawase Blur",
@@ -4058,7 +4092,7 @@ f({
     }
   ]
 });
-const { MotionBlurFilter: xt } = g;
+const { MotionBlurFilter: xt } = b;
 f({
   id: "motion-blur",
   name: "Motion Blur",
@@ -4166,7 +4200,7 @@ f({
     }
   ]
 });
-const { RadialBlurFilter: Ct } = g;
+const { RadialBlurFilter: Ct } = b;
 f({
   id: "radial-blur",
   name: "Radial Blur",
@@ -4290,7 +4324,7 @@ f({
     }
   ]
 });
-const { TiltShiftFilter: wt } = g;
+const { TiltShiftFilter: wt } = b;
 f({
   id: "tilt-shift",
   name: "Tilt Shift",
@@ -4314,28 +4348,28 @@ f({
         endY: o
       }, n.updateUIParam = function(l, c) {
         try {
-          const u = Number(c), h = this._customParams || {};
-          switch (this._customParams = h, h[l] = u, l) {
+          const d = Number(c), h = this._customParams || {};
+          switch (this._customParams = h, h[l] = d, l) {
             case "blur":
-              this.blur = u;
+              this.blur = d;
               break;
             case "gradientBlur":
-              this.gradientBlur = u;
+              this.gradientBlur = d;
               break;
             case "startX":
-              this.start && typeof this.start == "object" && (this.start.x = u);
+              this.start && typeof this.start == "object" && (this.start.x = d);
               break;
             case "startY":
-              this.start && typeof this.start == "object" && (this.start.y = u);
+              this.start && typeof this.start == "object" && (this.start.y = d);
               break;
             case "endX":
-              this.end && typeof this.end == "object" && (this.end.x = u);
+              this.end && typeof this.end == "object" && (this.end.x = d);
               break;
             case "endY":
-              this.end && typeof this.end == "object" && (this.end.y = u);
+              this.end && typeof this.end == "object" && (this.end.y = d);
               break;
             default:
-              l in this && (this[l] = u);
+              l in this && (this[l] = d);
               break;
           }
         } catch {
@@ -4418,7 +4452,7 @@ f({
     }
   ]
 });
-const { ZoomBlurFilter: St } = g;
+const { ZoomBlurFilter: St } = b;
 f({
   id: "zoom-blur",
   name: "Zoom Blur",
@@ -4545,7 +4579,7 @@ f({
     }
   ]
 });
-const { ColorGradientFilter: se } = g;
+const { ColorGradientFilter: se } = b;
 f({
   id: "color-gradient",
   name: "Color Gradient",
@@ -4649,8 +4683,8 @@ f({
             }));
             break;
           case "removeColorStop":
-            const u = [...this.stops];
-            u.length > 2 && (u.pop(), this.stops = u, a.colorStops = this.stops.map((h) => ({
+            const d = [...this.stops];
+            d.length > 2 && (d.pop(), this.stops = d, a.colorStops = this.stops.map((h) => ({
               offset: h.offset,
               color: typeof h.color == "number" ? "#" + h.color.toString(16).padStart(6, "0") : h.color,
               alpha: h.alpha
@@ -4682,9 +4716,9 @@ f({
             if (/colorStops\[\d+\]\..*/.test(i)) {
               const h = i.match(/colorStops\[(\d+)\]\.(.*)/);
               if (h) {
-                const [p, m, C] = h, b = parseInt(m), y = [...this.stops];
-                if (b >= 0 && b < y.length)
-                  return C === "color" && typeof r == "string" ? y[b].color = parseInt(r.replace("#", "0x")) : (C === "offset" || C === "alpha") && (y[b][C] = r), this.stops = y, this.stops.sort((A, _) => A.offset - _.offset), a.colorStops = this.getColorStopsForUI(), !0;
+                const [p, m, x] = h, g = parseInt(m), y = [...this.stops];
+                if (g >= 0 && g < y.length)
+                  return x === "color" && typeof r == "string" ? y[g].color = parseInt(r.replace("#", "0x")) : (x === "offset" || x === "alpha") && (y[g][x] = r), this.stops = y, this.stops.sort((P, _) => P.offset - _.offset), a.colorStops = this.getColorStopsForUI(), !0;
               }
             } else i in this && (this[i] = r);
             break;
@@ -4797,11 +4831,11 @@ f({
   // Create an instance of the ColorMapFilter with the provided parameters
   createFilter: (s) => {
     try {
-      const e = g.ColorMapFilter;
+      const e = b.ColorMapFilter;
       if (!e)
         return null;
       let t = null;
-      s.texturePath ? t = w.Texture.from(s.texturePath) : t = w.Texture.from("/examples/filters-main/examples/images/colormap.png");
+      s.texturePath ? t = S.Texture.from(s.texturePath) : t = S.Texture.from("/examples/filters-main/examples/images/colormap.png");
       const i = new e({
         colorMap: t,
         nearest: s.nearest,
@@ -4811,7 +4845,7 @@ f({
         const o = this._customParams || {};
         switch (this._customParams = o, o[r] = a, r) {
           case "texturePath":
-            a && (this.colorMap = w.Texture.from(a));
+            a && (this.colorMap = S.Texture.from(a));
             break;
           case "mix":
             this.mix = a;
@@ -4872,7 +4906,7 @@ f({
     }
   ]
 });
-const vt = g.ColorReplaceFilter;
+const vt = b.ColorReplaceFilter;
 f({
   id: "color-replace",
   name: "Color Replace",
@@ -4953,7 +4987,7 @@ f({
     }
   ]
 });
-const kt = g.MultiColorReplaceFilter;
+const kt = b.MultiColorReplaceFilter;
 f({
   id: "multi-color-replace",
   name: "Multi-Color Replace",
@@ -5090,7 +5124,7 @@ f({
     }
   ]
 });
-const { RGBSplitFilter: Pt } = g;
+const { RGBSplitFilter: Pt } = b;
 f({
   id: "rgb-split",
   name: "RGB Split",
@@ -5224,7 +5258,7 @@ f({
     }
   ]
 });
-const { AdvancedBloomFilter: Mt } = g;
+const { AdvancedBloomFilter: Mt } = b;
 f({
   id: "advanced-bloom",
   name: "Advanced Bloom",
@@ -5380,7 +5414,7 @@ f({
     }
   ]
 });
-const Ft = g.AsciiFilter;
+const Ft = b.AsciiFilter;
 f({
   id: "ascii",
   name: "ASCII",
@@ -5459,7 +5493,7 @@ f({
     }
   ]
 });
-const At = g.BackdropBlurFilter;
+const At = b.BackdropBlurFilter;
 f({
   id: "backdrop-blur",
   name: "Backdrop Blur",
@@ -5566,7 +5600,7 @@ f({
     }
   ]
 });
-const { BevelFilter: zt } = g;
+const { BevelFilter: zt } = b;
 f({
   id: "bevel",
   name: "Bevel",
@@ -5694,7 +5728,7 @@ f({
     }
   ]
 });
-const { BloomFilter: Rt } = g;
+const { BloomFilter: Rt } = b;
 f({
   id: "bloom",
   name: "Bloom/Glow",
@@ -5719,7 +5753,7 @@ f({
         resolution: r,
         kernelSize: a
       }, o.updateUIParam = function(n, l) {
-        var c, u;
+        var c, d;
         try {
           const h = Number(l), p = this._customParams || {};
           switch (this._customParams = p, p[n] = h, n) {
@@ -5727,7 +5761,7 @@ f({
               this.strength && typeof this.strength == "object" && (this.strength.x = h, (c = this._updateStrength) == null || c.call(this));
               break;
             case "strengthY":
-              this.strength && typeof this.strength == "object" && (this.strength.y = h, (u = this._updateStrength) == null || u.call(this));
+              this.strength && typeof this.strength == "object" && (this.strength.y = h, (d = this._updateStrength) == null || d.call(this));
               break;
             case "quality":
               this.quality = h;
@@ -5806,7 +5840,7 @@ f({
     }
   ]
 });
-const { BulgePinchFilter: Nt } = g;
+const { BulgePinchFilter: Nt } = b;
 f({
   id: "bulge-pinch",
   // ID must match what the application expects
@@ -5898,7 +5932,7 @@ f({
     }
   ]
 });
-const { ConvolutionFilter: Tt } = g, E = {
+const { ConvolutionFilter: Tt } = b, E = {
   normal: [0, 0, 0, 0, 1, 0, 0, 0, 0],
   gaussianBlur: [0.045, 0.122, 0.045, 0.122, 0.332, 0.122, 0.045, 0.122, 0.045],
   boxBlur: [1 / 9, 1 / 9, 1 / 9, 1 / 9, 1 / 9, 1 / 9, 1 / 9, 1 / 9, 1 / 9],
@@ -6144,7 +6178,7 @@ f({
     }
   ]
 });
-const { CrossHatchFilter: It } = g;
+const { CrossHatchFilter: It } = b;
 f({
   id: "cross-hatch",
   name: "Cross Hatch",
@@ -6187,7 +6221,7 @@ f({
         vignettingBlur: typeof s.vignettingBlur == "number" ? s.vignettingBlur : 0.3,
         time: typeof s.time == "number" ? s.time : 0,
         seed: typeof s.seed == "number" ? s.seed : Math.random()
-      }, t = new g.CRTFilter(e);
+      }, t = new b.CRTFilter(e);
       return t._customParams = { ...e }, t.updateUIParam = function(i, r) {
         try {
           const a = this._customParams || {};
@@ -6351,7 +6385,7 @@ f({
     }
   ]
 });
-const Et = w.DisplacementFilter, Xt = w.Sprite, $ = w.Texture;
+const Et = S.DisplacementFilter, Xt = S.Sprite, $ = S.Texture;
 f({
   id: "displacement",
   // ID must match what the application expects
@@ -6462,7 +6496,7 @@ f({
         scale: typeof s.scale == "number" ? s.scale : 1,
         angle: typeof s.angle == "number" ? s.angle : 5,
         grayscale: s.grayscale === !0
-      }, t = new g.DotFilter(e);
+      }, t = new b.DotFilter(e);
       return t._customParams = { ...e }, t.updateUIParam = function(i, r) {
         try {
           const a = this._customParams || {};
@@ -6524,7 +6558,7 @@ f({
     }
   ]
 });
-const { EmbossFilter: Yt } = g;
+const { EmbossFilter: Yt } = b;
 f({
   id: "emboss",
   name: "Emboss",
@@ -6573,7 +6607,7 @@ f({
     }
   ]
 });
-const { GlitchFilter: Bt } = g, R = {
+const { GlitchFilter: Bt } = b, R = {
   TRANSPARENT: 0,
   ORIGINAL: 1,
   LOOP: 2,
@@ -6618,8 +6652,8 @@ f({
             break;
           case "redX":
           case "redY":
-            const u = this.red;
-            n === "redX" ? u.x = l : u.y = l, this.red = u;
+            const d = this.red;
+            n === "redX" ? d.x = l : d.y = l, this.red = d;
             break;
           case "greenX":
           case "greenY":
@@ -6828,7 +6862,7 @@ f({
     }
   ]
 });
-const { GlowFilter: Ot } = g;
+const { GlowFilter: Ot } = b;
 f({
   id: "glow",
   name: "Glow",
@@ -6963,7 +6997,7 @@ f({
     }
   ]
 });
-const { GodrayFilter: Lt } = g;
+const { GodrayFilter: Lt } = b;
 f({
   id: "godray",
   name: "Godray",
@@ -7125,7 +7159,7 @@ f({
     }
   ]
 });
-const Dt = g.SimpleLightmapFilter, ae = w.Texture;
+const Dt = b.SimpleLightmapFilter, ae = S.Texture;
 f({
   id: "lightmap",
   name: "Lightmap",
@@ -7162,49 +7196,49 @@ f({
         textureType: e,
         color: t,
         alpha: i
-      }, l.updateUIParam = function(c, u) {
+      }, l.updateUIParam = function(c, d) {
         try {
           const h = this._customParams || {};
-          switch (this._customParams = h, h[c] = u, c) {
+          switch (this._customParams = h, h[c] = d, c) {
             case "textureType":
-              h.textureType = u;
+              h.textureType = d;
               const p = document.createElement("canvas");
               p.width = 256, p.height = 256;
               const m = p.getContext("2d");
               if (m) {
-                if (u === "spotlight") {
+                if (d === "spotlight") {
                   m.fillStyle = "black", m.fillRect(0, 0, 256, 256);
-                  const b = m.createRadialGradient(128, 128, 5, 128, 128, 80);
-                  b.addColorStop(0, "white"), b.addColorStop(0.5, "rgba(255, 255, 255, 0.5)"), b.addColorStop(1, "rgba(0, 0, 0, 0)"), m.fillStyle = b, m.beginPath(), m.arc(128, 128, 100, 0, Math.PI * 2), m.fill();
-                } else if (u === "softlight") {
-                  const b = m.createLinearGradient(0, 0, 256, 256);
-                  b.addColorStop(0, "white"), b.addColorStop(0.3, "rgba(220, 220, 220, 1)"), b.addColorStop(0.7, "rgba(150, 150, 150, 1)"), b.addColorStop(1, "rgba(80, 80, 80, 1)"), m.fillStyle = b, m.fillRect(0, 0, 256, 256);
+                  const g = m.createRadialGradient(128, 128, 5, 128, 128, 80);
+                  g.addColorStop(0, "white"), g.addColorStop(0.5, "rgba(255, 255, 255, 0.5)"), g.addColorStop(1, "rgba(0, 0, 0, 0)"), m.fillStyle = g, m.beginPath(), m.arc(128, 128, 100, 0, Math.PI * 2), m.fill();
+                } else if (d === "softlight") {
+                  const g = m.createLinearGradient(0, 0, 256, 256);
+                  g.addColorStop(0, "white"), g.addColorStop(0.3, "rgba(220, 220, 220, 1)"), g.addColorStop(0.7, "rgba(150, 150, 150, 1)"), g.addColorStop(1, "rgba(80, 80, 80, 1)"), m.fillStyle = g, m.fillRect(0, 0, 256, 256);
                 } else {
-                  const b = m.createRadialGradient(128, 128, 10, 128, 128, 160);
-                  b.addColorStop(0, "white"), b.addColorStop(0.3, "rgba(220, 220, 220, 1)"), b.addColorStop(0.6, "rgba(150, 150, 150, 1)"), b.addColorStop(1, "black"), m.fillStyle = b, m.fillRect(0, 0, 256, 256);
+                  const g = m.createRadialGradient(128, 128, 10, 128, 128, 160);
+                  g.addColorStop(0, "white"), g.addColorStop(0.3, "rgba(220, 220, 220, 1)"), g.addColorStop(0.6, "rgba(150, 150, 150, 1)"), g.addColorStop(1, "black"), m.fillStyle = g, m.fillRect(0, 0, 256, 256);
                 }
-                const C = ae.from(p);
-                if (this.lightMap = C, this.enabled !== void 0) {
-                  const b = this.enabled;
+                const x = ae.from(p);
+                if (this.lightMap = x, this.enabled !== void 0) {
+                  const g = this.enabled;
                   this.enabled = !1, setTimeout(() => {
-                    this.enabled = b;
+                    this.enabled = g;
                   }, 0);
                 }
               }
               break;
             case "color":
-              h.color = u;
+              h.color = d;
               try {
-                typeof u == "string" && u.startsWith("#") ? this.color = parseInt(u.replace("#", "0x"), 16) : this.color = 0;
+                typeof d == "string" && d.startsWith("#") ? this.color = parseInt(d.replace("#", "0x"), 16) : this.color = 0;
               } catch {
                 this.color = 0;
               }
               break;
             case "alpha":
-              this.alpha = Number(u);
+              this.alpha = Number(d);
               break;
             default:
-              c in this && (this[c] = u);
+              c in this && (this[c] = d);
               break;
           }
         } catch {
@@ -7256,7 +7290,7 @@ f({
     }
   ]
 });
-const { NoiseFilter: Ut } = w;
+const { NoiseFilter: Ut } = S;
 f({
   id: "noise",
   name: "Noise",
@@ -7341,7 +7375,7 @@ f({
     }
   ]
 });
-const { OldFilmFilter: Vt } = g;
+const { OldFilmFilter: Vt } = b;
 f({
   id: "old-film",
   name: "Old Film",
@@ -7530,7 +7564,7 @@ f({
     }
   ]
 });
-const { OutlineFilter: jt } = g;
+const { OutlineFilter: jt } = b;
 f({
   id: "outline",
   name: "Outline",
@@ -7630,7 +7664,7 @@ f({
     }
   ]
 });
-const { PixelateFilter: qt } = g;
+const { PixelateFilter: qt } = b;
 f({
   id: "pixelate",
   name: "Pixelate",
@@ -7721,7 +7755,7 @@ f({
     }
   ]
 });
-const { ReflectionFilter: Ht } = g;
+const { ReflectionFilter: Ht } = b;
 f({
   id: "reflection",
   // ID must match what the application expects
@@ -7889,7 +7923,7 @@ f({
     }
   ]
 });
-const { ShockwaveFilter: $t } = g;
+const { ShockwaveFilter: $t } = b;
 f({
   id: "shockwave",
   // ID must match what the application expects
@@ -7899,7 +7933,7 @@ f({
   // Create an instance of the ShockwaveFilter with the provided parameters
   createFilter: (s) => {
     try {
-      const e = s.centerX ?? 0.5, t = s.centerY ?? 0.5, i = { x: e, y: t }, r = s.amplitude ?? 30, a = s.wavelength ?? 160, o = s.speed ?? 500, n = s.brightness ?? 1, l = s.radius ?? -1, c = s.time ?? 0, u = new $t({
+      const e = s.centerX ?? 0.5, t = s.centerY ?? 0.5, i = { x: e, y: t }, r = s.amplitude ?? 30, a = s.wavelength ?? 160, o = s.speed ?? 500, n = s.brightness ?? 1, l = s.radius ?? -1, c = s.time ?? 0, d = new $t({
         center: i,
         amplitude: r,
         wavelength: a,
@@ -7908,7 +7942,7 @@ f({
         radius: l,
         time: c
       });
-      return u._customParams = { ...s }, u.animating = s.animating ?? !1, u.updateUIParam = function(h, p) {
+      return d._customParams = { ...s }, d.animating = s.animating ?? !1, d.updateUIParam = function(h, p) {
         const m = this._customParams || {};
         switch (this._customParams = m, m[h] = p, h) {
           case "centerX":
@@ -7933,7 +7967,7 @@ f({
             break;
         }
         return !0;
-      }, u;
+      }, d;
     } catch {
       return null;
     }
@@ -8041,7 +8075,7 @@ f({
     }
   ]
 });
-const { SimplexNoiseFilter: Wt } = g;
+const { SimplexNoiseFilter: Wt } = b;
 f({
   id: "simplex-noise",
   name: "Simplex Noise",
@@ -8196,7 +8230,7 @@ f({
     }
   ]
 });
-class Zt extends w.Filter {
+class Zt extends S.Filter {
   constructor(e) {
     const t = Ce.from({
       vertex: `
@@ -8377,7 +8411,7 @@ f({
     }
   ]
 });
-const { AdjustmentFilter: Gt } = g;
+const { AdjustmentFilter: Gt } = b;
 function D(s) {
   const e = typeof s == "string" ? parseInt(s.replace("#", "0x"), 16) : s;
   return [
@@ -8530,4 +8564,4 @@ export {
   ri as i,
   f as r
 };
-//# sourceMappingURL=editor-DiiyShiW.js.map
+//# sourceMappingURL=editor-Cw08D0SQ.js.map