@codingfactory/mediables-vue 2.3.5 → 2.4.0

package/dist/{editor-BgjKZltI.js → editor-624YYYUE.js}

@@ -1,9 +1,9 @@
-var me = Object.defineProperty;
-var ge = (s, e, t) => e in s ? me(s, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[e] = t;
-var V = (s, e, t) => ge(s, typeof e != "symbol" ? e + "" : e, t);
+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 { GlProgram as be } from "pixi.js";
+import { GlProgram as Ce } from "pixi.js";
 class B {
   constructor() {
     this._events = /* @__PURE__ */ new Map();
@@ -34,7 +34,7 @@ class B {
     e ? this._events.delete(e) : this._events.clear();
   }
 }
-class ye extends B {
+class we extends B {
   constructor() {
     super(), this._state = {
       // Image state
@@ -102,11 +102,40 @@ class ye extends B {
     this.emit(`change:${e}`, { value: t, old: i }), this.emit("change", { key: e, value: t, old: i });
   }
   /**
-   * Get the entire state object (for debugging)
+   * Get the entire state object (for debugging).
+   * WARNING: Shallow copy only — nested objects are live references.
+   * For persistence, use getSerializableState() instead.
    */
   getAll() {
     return { ...this._state };
   }
+  /**
+   * Get a deep, serializable snapshot of the editor state.
+   * Safe for persistence — no mutable references leak out.
+   * @returns {Object} ImageEditorSessionState-compatible object
+   */
+  getSerializableState() {
+    const e = [];
+    if (this._state.activeFilters)
+      for (const i of this._state.activeFilters) {
+        const r = this._state.filterValues[i];
+        e.push({
+          id: i,
+          enabled: !0,
+          values: r ? { ...r } : {}
+        });
+      }
+    const t = this._state.crop;
+    return {
+      version: 1,
+      crop: {
+        rect: t != null && t.rect ? { ...t.rect } : null,
+        aspectRatio: (t == null ? void 0 : t.aspect) || "free",
+        shape: (t == null ? void 0 : t.shape) || "free"
+      },
+      filters: e
+    };
+  }
   /**
    * Toggle a filter in the active filters set
    * @param {string} filterId
@@ -160,10 +189,10 @@ class ye extends B {
       this.set("isDarkMode", this._state.theme === "dark");
   }
 }
-function _e() {
-  return new ye();
+function Se() {
+  return new we();
 }
-class xe extends B {
+class ve extends B {
   constructor() {
     super(), this.app = null, this.sprite = null, this.originalTexture = null, this.baseTexture = null, this.fitScale = 1, this.zoom = 1, this._container = null, this._mountPromise = null;
   }
@@ -262,7 +291,7 @@ class xe extends B {
    * @param {string} imageUrl - URL, data URL, or blob URL of the image
    */
   async loadTexture(e) {
-    var l, c, d;
+    var l, c, u;
     if (this._mountPromise && await this._mountPromise, !((l = this.app) != null && l.renderer)) return;
     const t = window.PIXI, i = await this._loadImageElement(e);
     if (!i || !((c = this.app) != null && c.renderer)) return;
@@ -271,7 +300,7 @@ class xe extends B {
       return;
     this.originalTexture = r, this.baseTexture = r, this.sprite && (this.app.stage.removeChild(this.sprite), this.sprite.destroy()), this.sprite = new t.Sprite(r), this.app.stage.addChild(this.sprite), this.fitScale = this.getFitScaleFor(r), this.zoom = 1;
     const { w: a, h: o } = this._getCssSize();
-    if (this.applyViewTransform({ center: { x: a / 2, y: o / 2 } }), await new Promise(requestAnimationFrame), !((d = this.app) != null && d.renderer)) return;
+    if (this.applyViewTransform({ center: { x: a / 2, y: o / 2 } }), await new Promise(requestAnimationFrame), !((u = this.app) != null && u.renderer)) return;
     const n = this.getFitScaleFor(r);
     Math.abs(n - this.fitScale) / Math.max(1e-6, n) > 0.02 && (this.fitScale = n, this.applyViewTransform({ center: { x: a / 2, y: o / 2 } })), this.render(), this.emit("textureLoaded", { width: r.width, height: r.height });
   }
@@ -290,16 +319,23 @@ class xe extends B {
     const a = window.PIXI, o = Math.round(this.originalTexture.width), n = Math.round(this.originalTexture.height);
     if (o <= 0 || n <= 0)
       return null;
-    let l = o, c = n;
+    let l = o;
     if (i > 0) {
       const _ = Math.max(o, n);
       let v = i / _;
-      r && (v = Math.min(1, v)), l = Math.round(o * v), c = Math.round(n * v);
+      r && (v = Math.min(1, v)), l = Math.round(o * v);
     }
-    const d = this.sprite, h = d.x, p = d.y, m = d.scale.x, C = d.scale.y;
+    const c = this.sprite, u = 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;
     try {
-      if (d.x = 0, d.y = 0, d.scale.set(l / o, c / n), b = a.RenderTexture.create({ width: l, height: c }), this.app.renderer.render({ container: this.app.stage, target: b }), !this.app.renderer.extract)
+      if (c.x = 0, c.y = 0, b = 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)
         return null;
       const _ = this.app.renderer.extract.canvas(b);
       if (!_)
@@ -308,18 +344,41 @@ class xe extends B {
       if (typeof _.toDataURL == "function")
         v = _.toDataURL(`image/${e}`, t);
       else if (typeof _.getContext == "function") {
-        const M = document.createElement("canvas");
-        M.width = _.width, M.height = _.height;
-        const O = M.getContext("2d");
-        O && (O.drawImage(_, 0, 0), v = M.toDataURL(`image/${e}`, t));
+        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));
       }
       return v || null;
     } catch {
       return null;
     } finally {
-      d.x = h, d.y = p, d.scale.set(m, C), b && b.destroy(!0);
+      c.x = u, c.y = h, b && b.destroy(!0);
     }
   }
+  /**
+   * Get the actual export dimensions (texture size, not display size).
+   * @returns {{ width: number, height: number }}
+   */
+  getExportDimensions() {
+    const e = this.originalTexture;
+    return {
+      width: Math.round((e == null ? void 0 : e.width) || 0),
+      height: Math.round((e == null ? void 0 : e.height) || 0)
+    };
+  }
+  /**
+   * Export the current image as a Blob with correct dimensions.
+   * @param {string} format - 'png' or 'jpeg'
+   * @param {number} quality - Quality for jpeg (0-1)
+   * @returns {Promise<{ blob: Blob, width: number, height: number } | null>}
+   */
+  async exportBlob(e = "png", t = 0.92) {
+    const i = this.exportImage(e, t);
+    if (!i) return null;
+    const a = await (await fetch(i)).blob(), o = this.getExportDimensions();
+    return { blob: a, width: o.width, height: o.height };
+  }
   /**
    * Resize renderer to container
    * @param {HTMLElement} container
@@ -372,7 +431,7 @@ class xe extends B {
     this.sprite = null, this.originalTexture = null, this.baseTexture = null, this._container = null, this.removeAllListeners();
   }
 }
-const Ce = {
+const ke = {
   adjust: ["adjust", "advanced"],
   // adjustment, adjustmentAdvanced, alpha, colorMatrix
   blur: ["blur"],
@@ -388,7 +447,7 @@ const Ce = {
   stylize: ["stylize"]
   // ascii, crt, crossHatch, dot, emboss
 };
-class we extends B {
+class Pe extends B {
   constructor(e, t) {
     super(), this.state = e, this.renderer = t, this.instances = {}, this._filterRegistry = null;
   }
@@ -423,7 +482,7 @@ class we extends B {
    */
   getFiltersByCategory(e) {
     if (!this._filterRegistry) return [];
-    const t = Ce[e] || [e], i = [], r = /* @__PURE__ */ new Set();
+    const t = ke[e] || [e], i = [], r = /* @__PURE__ */ new Set();
     for (const a of t) {
       const o = this._filterRegistry.getFiltersByCategory(a) || [];
       for (const n of o)
@@ -524,9 +583,9 @@ class we 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((d) => {
-          const h = d.property || d.id;
-          l[h] = n[d.id] ?? d.default;
+        o.controls && Array.isArray(o.controls) && o.controls.forEach((u) => {
+          const h = u.property || u.id;
+          l[h] = n[u.id] ?? u.default;
         });
         const c = o.createFilter(l);
         c && (t.push(c), this.instances[a] = c);
@@ -546,18 +605,15 @@ class we extends B {
     i.length > 0;
   }
   /**
-   * Reset all filters
+   * Reset all filters.
+   * IMPORTANT: Only clears filter instances and sprite.filters.
+   * Does NOT touch baseTexture/originalTexture/sprite — that would
+   * destroy any applied crop, which is a separate concern.
    */
   resetAll() {
     for (const e in this.instances)
       delete this.instances[e];
-    if (this.state.resetFilters(), this.renderer.sprite && (this.renderer.sprite.filters = null), this.renderer.baseTexture && this.renderer.originalTexture !== this.renderer.baseTexture && this.renderer.sprite && this.renderer.app) {
-      const e = window.PIXI;
-      this.renderer.originalTexture = this.renderer.baseTexture, this.renderer.app.stage.removeChild(this.renderer.sprite), this.renderer.sprite.destroy();
-      const t = new e.Sprite(this.renderer.originalTexture);
-      this.renderer.app.stage.addChild(t), this.renderer.sprite = t, this.renderer.fitScale = this.renderer.getFitScaleFor(this.renderer.originalTexture), this.renderer.setZoom(1, { keepCenter: !1 }), this.renderer.applyViewTransform();
-    }
-    this.renderer.render(), this.emit("filtersReset");
+    this.state.resetFilters(), this.renderer.sprite && (this.renderer.sprite.filters = null), this.renderer.render(), this.emit("filtersReset");
   }
   /**
    * Get a filter instance
@@ -645,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 d = T.AUTO_ZOOM_PADDING;
+    const u = T.AUTO_ZOOM_PADDING;
     let h = n;
     if (l) {
-      const p = e.width / (d * r * o);
+      const p = e.width / (u * r * o);
       h = Math.min(h, p);
     }
     if (c) {
-      const p = e.height / (d * a * o);
+      const p = e.height / (u * a * o);
       h = Math.min(h, p);
     }
     return h = Math.max(0.1, h), h >= n - 0.01 ? null : h;
@@ -696,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, z = l.y + l.height / 2, _ = Math.min(l.width, l.height) / 2;
-      n.beginPath(), n.arc(y, z, _, 0, Math.PI * 2), n.clip();
+      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();
     } 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(
@@ -707,9 +763,9 @@ 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 d = l.width / 3, h = l.height / 3;
+    const u = l.width / 3, h = l.height / 3;
     for (let y = 1; y <= 2; y++)
-      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();
+      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();
     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" },
@@ -722,8 +778,8 @@ const T = class T extends B {
       { x: l.x + l.width, y: l.y + l.height / 2, m: "e" }
     ], b = [...m, ...C];
     for (const y of b) {
-      const z = this._hoverMode === y.m, _ = z ? p + 4 : p;
-      n.beginPath(), n.rect(y.x - _ / 2, y.y - _ / 2, _, _), n.fillStyle = z ? "#4da3ff" : "#ffffff", n.strokeStyle = "rgba(0,0,0,0.6)", n.lineWidth = 1, n.fill(), n.stroke();
+      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();
     }
   }
   /**
@@ -751,12 +807,12 @@ const T = class T extends B {
    * Handle pointer move event
    */
   _handlePointerMove(e) {
-    var l, c, d, h;
+    var l, c, u, 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" : (d = this._hoverMode) != null && d.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" : (u = this._hoverMode) != null && u.endsWith("ne") || (h = this._hoverMode) != null && h.endsWith("sw") ? "nesw-resize" : "crosshair", this.drawOverlay();
       return;
     }
     const r = this.state.get("crop.rect");
@@ -833,15 +889,15 @@ 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, 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), C = Math.round(d);
+    const a = window.PIXI, o = this.renderer.zoom, n = i.width / t.width, l = i.height / t.height, c = (r.x - t.x) * n, 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);
     if (h <= 0 || p <= 0) return null;
     const b = new a.Container(), y = new a.Sprite(i);
     if (this.state.get("crop.shape") === "circle") {
-      const M = Math.round(Math.max(h, p)), O = m + h / 2, fe = C + p / 2;
-      m = Math.round(O - M / 2), C = Math.round(fe - M / 2), h = p = M;
-      const F = new a.Graphics();
-      typeof F.circle == "function" && typeof F.fill == "function" ? F.circle(h / 2, p / 2, h / 2).fill(16777215) : (F.beginFill(16777215, 1), F.drawCircle(h / 2, p / 2, h / 2), F.endFill()), y.mask = F, b.addChild(F);
+      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);
     }
     y.x = -m, y.y = -C, b.addChild(y);
     const _ = a.RenderTexture.create({ width: h, height: p });
@@ -849,9 +905,13 @@ const T = class T extends B {
       container: b,
       target: _,
       clear: !0
-    }), b.destroy({ children: !0 }), this.renderer.originalTexture = _, e.stage.removeChild(t), t.destroy();
-    const v = new a.Sprite(_);
-    return e.stage.addChild(v), this.renderer.sprite = v, this.renderer.fitScale = this.renderer.getFitScaleFor(_), this.renderer.setZoom(o, { keepCenter: !1 }), this.renderer.applyViewTransform(), this.renderer.render(), this.disable(), this.emit("applied", { width: h, height: p }), { texture: _, preservedZoom: o };
+    }), b.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";
+    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 };
   }
   /**
    * Cancel crop
@@ -878,12 +938,12 @@ const T = class T extends B {
  * Padding factor for auto-zoom: image will be ~91% of crop size (1/1.1).
  * Higher values = more aggressive zoom-out, more padding around image.
  */
-V(T, "AUTO_ZOOM_PADDING", 1.1), /**
+j(T, "AUTO_ZOOM_PADDING", 1.1), /**
  * Minimum interval (ms) between auto-zoom adjustments during drag.
  */
-V(T, "AUTO_ZOOM_THROTTLE_MS", 100);
-let $ = T;
-class Se {
+j(T, "AUTO_ZOOM_THROTTLE_MS", 100);
+let W = T;
+class Me {
   /**
    * Create a new RemoveBgManager
    * @param {Object} options
@@ -933,8 +993,8 @@ class Se {
     if (!a.ok) {
       let c = `Background removal failed (HTTP ${a.status})`;
       try {
-        const d = await a.text();
-        d && (c += `: ${d}`);
+        const u = await a.text();
+        u && (c += `: ${u}`);
       } catch {
       }
       throw new Error(c);
@@ -993,7 +1053,7 @@ class Se {
     }
   }
 }
-function u(s, e = {}, ...t) {
+function d(s, e = {}, ...t) {
   const i = document.createElement(s);
   for (const [r, a] of Object.entries(e))
     if (a != null)
@@ -1009,17 +1069,17 @@ function u(s, e = {}, ...t) {
     typeof r == "string" ? i.appendChild(document.createTextNode(r)) : r instanceof HTMLElement && i.appendChild(r);
   return i;
 }
-function ae({ id: s, label: e, min: t = 0, max: i = 1, step: r = 0.01, value: a = 0.5, onChange: o }) {
-  const n = s.includes("-") ? s.split("-").slice(1).join("-") : s, l = u("div", {
+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", {
     className: "slider-control slider-wrapper",
     "data-control": n,
     "data-testid": `slider-${n}`
-  }), c = u(
+  }), c = d(
     "div",
     { className: "slider-header" },
-    u("label", { for: s, className: "slider-label" }, e),
-    u("span", { className: "slider-value", id: `${s}-value` }, j(a))
-  ), d = u("input", {
+    d("label", { for: s, className: "slider-label" }, e),
+    d("span", { className: "slider-value", id: `${s}-value` }, q(a))
+  ), u = d("input", {
     type: "range",
     id: s,
     className: "slider-input",
@@ -1029,37 +1089,37 @@ function ae({ id: s, label: e, min: t = 0, max: i = 1, step: r = 0.01, value: a
     value: String(a),
     onInput: (h) => {
       const p = parseFloat(h.target.value), m = l.querySelector(".slider-value");
-      m && (m.textContent = j(p)), o == null || o(p);
+      m && (m.textContent = q(p)), o == null || o(p);
     }
   });
-  return l.appendChild(c), l.appendChild(d), l.setValue = (h) => {
-    d.value = String(h);
+  return l.appendChild(c), l.appendChild(u), l.setValue = (h) => {
+    u.value = String(h);
     const p = l.querySelector(".slider-value");
-    p && (p.textContent = j(h));
+    p && (p.textContent = q(h));
   }, l;
 }
-function j(s) {
+function q(s) {
   return Number.isInteger(s) ? String(s) : s.toFixed(2);
 }
-function oe({ id: s, label: e, checked: t = !1, onChange: i }) {
-  const r = u("div", { className: "toggle-control" }), a = u("label", { className: "toggle-label", for: s }, e), o = u("input", {
+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", {
     type: "checkbox",
     id: s,
     className: "toggle-input",
     checked: t ? "checked" : void 0,
     onChange: (c) => i == null ? void 0 : i(c.target.checked)
-  }), n = u("div", {
+  }), n = d("div", {
     className: "toggle-switch",
     onClick: (c) => {
       c.target !== o && (o.checked = !o.checked, i == null || i(o.checked));
     }
-  }), l = u("span", { className: "toggle-slider" });
+  }), l = d("span", { className: "toggle-slider" });
   return n.appendChild(o), n.appendChild(l), r.appendChild(a), r.appendChild(n), r.setChecked = (c) => {
     o.checked = c;
   }, r;
 }
-function ne({ id: s, label: e, value: t = "#000000", onChange: i }) {
-  const r = u("div", { className: "color-control" }), a = u("label", { className: "color-label", for: s }, e), o = u("input", {
+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", {
     type: "color",
     id: s,
     className: "color-input",
@@ -1070,29 +1130,29 @@ function ne({ id: s, label: e, value: t = "#000000", onChange: i }) {
     o.value = n;
   }, r;
 }
-function le({ id: s, label: e, options: t = [], value: i, onChange: r }) {
-  const a = u("div", { className: "select-control" }), o = u("label", { className: "select-label", for: s }, e), n = u("select", {
+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", {
     id: s,
     className: "select-input",
     onChange: (l) => r == null ? void 0 : r(l.target.value)
   });
   for (const l of t) {
-    const c = u("option", { value: l.value }, l.label);
+    const c = d("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 A({ label: s, className: e = "", onClick: t, icon: i = null, disabled: r = !1 }) {
-  const a = u("button", {
+function F({ label: s, className: e = "", onClick: t, icon: i = null, disabled: r = !1 }) {
+  const a = d("button", {
     type: "button",
     className: `btn ${e}`.trim(),
     onClick: t,
     disabled: r ? "disabled" : void 0
   });
   if (i) {
-    const o = u("span", { className: "btn-icon" });
+    const o = d("span", { className: "btn-icon" });
     o.innerHTML = i;
     const n = o.querySelector("svg");
     n && n.setAttribute("aria-hidden", "true"), a.appendChild(o);
@@ -1109,29 +1169,29 @@ 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 = u("button", n);
+  const l = d("button", n);
   l.innerHTML = s;
   const c = l.querySelector("svg");
   return c && c.setAttribute("aria-hidden", "true"), l;
 }
-function W({ label: s, icon: e, active: t = !1, onClick: i }) {
-  const r = u("button", {
+function Z({ label: s, icon: e, active: t = !1, onClick: i }) {
+  const r = d("button", {
     type: "button",
     className: `chip ${t ? "active" : ""}`.trim(),
     onClick: i
   });
   if (e) {
-    const a = u("span", { className: "chip-icon" });
+    const a = d("span", { className: "chip-icon" });
     a.innerHTML = e;
     const o = a.querySelector("svg");
     o && o.setAttribute("aria-hidden", "true"), r.appendChild(a);
   }
-  return r.appendChild(u("span", { className: "chip-label" }, s)), r.setActive = (a) => {
+  return r.appendChild(d("span", { className: "chip-label" }, s)), r.setActive = (a) => {
     r.classList.toggle("active", a);
   }, r;
 }
-const ce = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="48" d="M328 112L184 256l144 144"/></svg>', he = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="48" d="M184 112l144 144-144 144"/></svg>', ve = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M221.09 64a157.09 157.09 0 10157.09 157.09A157.1 157.1 0 00221.09 64z"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M338.29 338.29L448 448M256 184v74m-37-37h74"/></svg>', ke = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M221.09 64a157.09 157.09 0 10157.09 157.09A157.1 157.1 0 00221.09 64z"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M338.29 338.29L448 448M184 221h74"/></svg>', Pe = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M432 320v112H320M80 192V80h112M320 80h112v112M192 432H80V320"/></svg>', Me = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M262.29 192.31a64 64 0 1057.4 57.4 64.13 64.13 0 00-57.4-57.4z"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M416.39 256a154.34 154.34 0 01-1.53 20.79l45.21 35.46a10.81 10.81 0 012.45 13.75l-42.77 74a10.81 10.81 0 01-13.14 4.59l-44.9-18.08a16.11 16.11 0 00-15.17 1.75A164.48 164.48 0 01325 400.8a15.94 15.94 0 00-8.82 12.14l-6.73 47.89a11.08 11.08 0 01-10.68 9.17h-85.54a11.11 11.11 0 01-10.69-8.87l-6.72-47.82a16.07 16.07 0 00-9-12.22 155.3 155.3 0 01-21.46-12.57 16 16 0 00-15.11-1.71l-44.89 18.07a10.81 10.81 0 01-13.14-4.58l-42.77-74a10.8 10.8 0 012.45-13.75l38.21-30a16.05 16.05 0 006-14.08c-.36-4.17-.58-8.33-.58-12.5s.21-8.27.58-12.35a16 16 0 00-6.07-13.94l-38.19-30A10.81 10.81 0 0149.48 186l42.77-74a10.81 10.81 0 0113.14-4.59l44.9 18.08a16.11 16.11 0 0015.17-1.75A164.48 164.48 0 01187 111.2a15.94 15.94 0 008.82-12.14l6.73-47.89A11.08 11.08 0 01213.23 42h85.54a11.11 11.11 0 0110.69 8.87l6.72 47.82a16.07 16.07 0 009 12.22 155.3 155.3 0 0121.46 12.57 16 16 0 0015.11 1.71l44.89-18.07a10.81 10.81 0 0113.14 4.58l42.77 74a10.8 10.8 0 01-2.45 13.75l-38.21 30a16.05 16.05 0 00-6.05 14.08c.33 4.14.55 8.3.55 12.47z"/></svg>', Fe = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M400 320c0 88.37-55.63 144-144 144s-144-55.63-144-144c0-94.83 103.23-222.85 134.89-259.88a12 12 0 0118.23 0C296.77 97.15 400 225.17 400 320z"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M344 328a72 72 0 01-72 72"/></svg>', Ae = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32" d="M430.11 347.9c-6.6-6.1-16.3-7.6-24.6-9-11.5-1.9-15.9-4-22.6-10-14.3-12.7-14.3-31.1 0-43.8l30.3-26.9c46.4-41 46.4-108.2 0-149.2-34.2-30.1-80.1-45-127.8-45-55.7 0-113.9 20.3-158.8 60.1-83.5 73.8-83.5 194.7 0 268.5 41.5 36.7 97.5 55 152.9 55.4h1.7c55.4 0 110-17.9 148.8-52.4 14.4-12.7 11.99-36.6.1-47.7z"/><circle cx="144" cy="208" r="32"/><circle cx="152" cy="311" r="32"/><circle cx="224" cy="144" r="32"/><circle cx="256" cy="367" r="32"/><circle cx="328" cy="144" r="32"/></svg>', ze = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M259.92 262.91L216.4 149.77a9 9 0 00-16.8 0l-43.52 113.14a9 9 0 01-5.17 5.17L37.77 311.6a9 9 0 000 16.8l113.14 43.52a9 9 0 015.17 5.17l43.52 113.14a9 9 0 0016.8 0l43.52-113.14a9 9 0 015.17-5.17l113.14-43.52a9 9 0 000-16.8l-113.14-43.52a9 9 0 01-5.17-5.17zM108 68L88 16 68 68 16 88l52 20 20 52 20-52 52-20-52-20zM426.67 117.33L400 48l-26.67 69.33L304 144l69.33 26.67L400 240l26.67-69.33L496 144l-69.33-26.67z"/></svg>', Ne = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M176 112l80-80 80 80M255.98 32l.02 448M176 400l80 80 80-80M400 176l80 80-80 80M112 176l-80 80 80 80M32 256h448"/></svg>', Re = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M315.27 33L96 304h128l-31.51 173.23a2.36 2.36 0 002.33 2.77h0a2.36 2.36 0 001.89-.95L416 208H288l31.66-173.25a2.45 2.45 0 00-2.44-2.75h0a2.42 2.42 0 00-1.95 1z"/></svg>', de = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M144 48v272a48 48 0 0048 48h272"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M368 464V192a48 48 0 00-48-48H48"/></svg>', Te = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M380.93 57.37A32 32 0 00358.3 48H94.22A46.21 46.21 0 0048 94.22v323.56A46.21 46.21 0 0094.22 464h323.56A46.36 46.36 0 00464 417.78V153.7a32 32 0 00-9.37-22.63zM256 416a64 64 0 1164-64 63.92 63.92 0 01-64 64zm48-224H112a16 16 0 01-16-16v-64a16 16 0 0116-16h192a16 16 0 0116 16v64a16 16 0 01-16 16z"/></svg>', G = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M368 368L144 144M368 144L144 368"/></svg>', ue = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M320 146s24.36-12-64-12a160 160 0 10160 160"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M256 58l80 80-80 80"/></svg>', Ie = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M112 112l20 320c.95 18.49 14.4 32 32 32h184c17.67 0 30.87-13.51 32-32l20-320"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="32" d="M80 112h352"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M192 112V72h0a23.93 23.93 0 0124-24h80a23.93 23.93 0 0124 24h0v40M256 176v224M184 176l8 224M328 176l-8 224"/></svg>', Ee = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M64 192v-72a40 40 0 0140-40h75.89a40 40 0 0122.19 6.72l27.84 18.56a40 40 0 0022.19 6.72H408a40 40 0 0140 40v40"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M479.9 226.55L463.68 392a40 40 0 01-39.93 40H88.25a40 40 0 01-39.93-40L32.1 226.55A32 32 0 0164 192h384.1a32 32 0 0131.8 34.55z"/></svg>', Z = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M416 128L192 384l-96-96"/></svg>', Xe = '<svg viewBox="0 0 512 512" width="20" height="20"><rect x="64" y="64" width="384" height="384" rx="48" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32"/></svg>', Ye = '<svg viewBox="0 0 512 512" width="20" height="20"><circle cx="256" cy="256" r="208" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/></svg>', Be = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M80 96h64l64 320h64l64-160h96"/></svg>', K = '<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>', Q = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M160 136c0-30.62 4.51-61.61 16-88C99.57 81.27 48 159.32 48 248c0 119.29 96.71 216 216 216 88.68 0 166.73-51.57 200-128-26.39 11.49-57.38 16-88 16-119.29 0-216-96.71-216-216z"/></svg>', Oe = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M436 80H76a44.05 44.05 0 00-44 44v264a44.05 44.05 0 0044 44h360a44.05 44.05 0 0044-44V124a44.05 44.05 0 00-44-44z"/><circle cx="256" cy="256" r="80" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M220 80v56M292 80v56M220 376v56M292 376v56M80 144h56M80 224h56M80 304h56M376 144h56M376 224h56M376 304h56"/></svg>';
-class Le {
+const he = '<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>', de = '<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>', Fe = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="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>', 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="M221.09 64a157.09 157.09 0 10157.09 157.09A157.1 157.1 0 00221.09 64z"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M338.29 338.29L448 448M184 221h74"/></svg>', ze = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M432 320v112H320M80 192V80h112M320 80h112v112M192 432H80V320"/></svg>', 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="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>', Ne = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="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>', Te = '<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>', Ie = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="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>', Ee = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M176 112l80-80 80 80M255.98 32l.02 448M176 400l80 80 80-80M400 176l80 80-80 80M112 176l-80 80 80 80M32 256h448"/></svg>', Xe = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="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>', ue = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="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>', Ye = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="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>', K = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M368 368L144 144M368 144L144 368"/></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="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>', Be = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="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>', Oe = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="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>', G = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M416 128L192 384l-96-96"/></svg>', Le = '<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>', De = '<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>', Ue = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M80 96h64l64 320h64l64-160h96"/></svg>', Q = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="32" d="M256 48v48M256 416v48M403.08 108.92l-33.94 33.94M142.86 369.14l-33.94 33.94M464 256h-48M96 256H48M403.08 403.08l-33.94-33.94M142.86 142.86l-33.94-33.94"/><circle cx="256" cy="256" r="80" fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="32"/></svg>', J = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M160 136c0-30.62 4.51-61.61 16-88C99.57 81.27 48 159.32 48 248c0 119.29 96.71 216 216 216 88.68 0 166.73-51.57 200-128-26.39 11.49-57.38 16-88 16-119.29 0-216-96.71-216-216z"/></svg>', Ve = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M436 80H76a44.05 44.05 0 00-44 44v264a44.05 44.05 0 0044 44h360a44.05 44.05 0 0044-44V124a44.05 44.05 0 00-44-44z"/><circle cx="256" cy="256" r="80" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M220 80v56M292 80v56M220 376v56M292 376v56M80 144h56M80 224h56M80 304h56M376 144h56M376 224h56M376 304h56"/></svg>';
+class je {
   constructor(e, t) {
     this.state = e, this.editor = t, this.element = null, this._unsubscribers = [];
   }
@@ -1140,9 +1200,9 @@ class Le {
    * @returns {HTMLElement}
    */
   render() {
-    this.element = u("div", { className: "editor-toolbar" });
-    const e = u("div", { className: "toolbar-section toolbar-left" }), t = x({
-      icon: Ee,
+    this.element = d("div", { className: "editor-toolbar" });
+    const e = d("div", { className: "toolbar-section toolbar-left" }), t = x({
+      icon: Oe,
       title: "Open Image",
       className: "toolbar-btn",
       testId: "btn-open-image",
@@ -1150,8 +1210,8 @@ class Le {
       onClick: () => this.editor.openFilePicker()
     });
     e.appendChild(t);
-    const i = u("div", { className: "toolbar-section toolbar-center" }), r = x({
-      icon: ke,
+    const i = d("div", { className: "toolbar-section toolbar-center" }), r = x({
+      icon: Ae,
       title: "Zoom Out",
       className: "toolbar-btn",
       testId: "btn-zoom-out",
@@ -1161,14 +1221,14 @@ class Le {
         this.editor.setZoom(h - 0.25);
       }
     });
-    this._zoomLabel = u("span", {
+    this._zoomLabel = d("span", {
       className: "zoom-label",
       "aria-live": "polite",
       "aria-atomic": "true",
       role: "status"
     }, "100%");
     const a = x({
-      icon: ve,
+      icon: Fe,
       title: "Zoom In",
       className: "toolbar-btn",
       testId: "btn-zoom-in",
@@ -1178,7 +1238,7 @@ class Le {
         this.editor.setZoom(h + 0.25);
       }
     }), o = x({
-      icon: Pe,
+      icon: ze,
       title: "Fit to Screen",
       className: "toolbar-btn",
       testId: "btn-fit-screen",
@@ -1186,16 +1246,16 @@ class Le {
       onClick: () => this.editor.fitToScreen()
     });
     i.appendChild(r), i.appendChild(this._zoomLabel), i.appendChild(a), i.appendChild(o);
-    const n = u("div", { className: "toolbar-section toolbar-right" });
+    const n = d("div", { className: "toolbar-section toolbar-right" });
     this._themeBtn = x({
-      icon: this.state.get("isDarkMode") ? K : Q,
+      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({
-      icon: de,
+      icon: ue,
       title: "Crop",
       className: "toolbar-btn toolbar-btn-crop",
       testId: "btn-crop",
@@ -1205,28 +1265,28 @@ class Le {
       }
     });
     const l = x({
-      icon: ue,
+      icon: pe,
       title: "Reset All",
       className: "toolbar-btn",
       testId: "btn-reset-all",
       ariaLabel: "Reset all changes",
       onClick: () => this.editor.resetAll()
     }), c = x({
-      icon: Te,
+      icon: Ye,
       title: "Save Image",
       className: "toolbar-btn toolbar-btn-primary",
       testId: "btn-save-edit",
       ariaLabel: "Save image",
       onClick: () => this.editor.save()
-    }), d = x({
-      icon: G,
+    }), u = x({
+      icon: K,
       title: "Close",
       className: "toolbar-btn",
       testId: "btn-cancel-edit",
       ariaLabel: "Close editor",
       onClick: () => this.editor.close()
     });
-    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;
+    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;
   }
   /**
    * Subscribe to state changes
@@ -1237,7 +1297,7 @@ class Le {
     });
     this._unsubscribers.push(e);
     const t = this.state.on("change:isDarkMode", ({ value: r }) => {
-      this._themeBtn.innerHTML = r ? K : Q;
+      this._themeBtn.innerHTML = r ? Q : J;
     });
     this._unsubscribers.push(t);
     const i = this.state.on("change:mode", ({ value: r }) => {
@@ -1261,23 +1321,23 @@ class Le {
   }
 }
 const L = [
-  { id: "adjust", name: "Adjust", icon: Me },
+  { id: "adjust", name: "Adjust", icon: Re },
   // adjustment, adjustmentAdvanced, alpha
-  { id: "blur", name: "Blur", icon: Fe },
+  { id: "blur", name: "Blur", icon: Ne },
   // blur, kawaseBlur, motionBlur, radialBlur, etc.
-  { id: "color", name: "Color", icon: Ae },
+  { id: "color", name: "Color", icon: Te },
   // colorOverlay, grayscale, hslAdjustment, etc.
-  { id: "effects", name: "Effects", icon: ze },
+  { id: "effects", name: "Effects", icon: Ie },
   // noise, vignette, pixelate, dropShadow, etc.
-  { id: "distortion", name: "Distortion", icon: Ne },
+  { id: "distortion", name: "Distortion", icon: Ee },
   // twist, bulgePinch, displacement, etc.
-  { id: "light", name: "Light", icon: Re },
+  { id: "light", name: "Light", icon: Xe },
   // bloom, glow, godray, advancedBloom
-  { id: "stylize", name: "Stylize", icon: Oe },
+  { id: "stylize", name: "Stylize", icon: Ve },
   // ascii, crt, crossHatch, dot, emboss
-  { id: "crop", name: "Crop", icon: de }
+  { id: "crop", name: "Crop", icon: ue }
 ];
-class De {
+class qe {
   constructor(e, t) {
     this.state = e, this.editor = t, this.element = null, this._chips = /* @__PURE__ */ new Map(), this._scrollIndex = 0, this._unsubscribers = [];
   }
@@ -1287,16 +1347,16 @@ class De {
    * @returns {HTMLElement}
    */
   render(e) {
-    this._onSelect = e, this.element = u("div", {
+    this._onSelect = e, this.element = d("div", {
       className: "category-carousel-container",
       "data-testid": "category-carousel"
     }), this._leftBtn = x({
-      icon: ce,
+      icon: he,
       title: "Previous categories",
       className: "carousel-nav carousel-nav-left",
       onClick: () => this._scrollLeft()
-    }), this._carousel = u("div", { className: "category-carousel" }), L.forEach((i) => {
-      const r = W({
+    }), this._carousel = d("div", { className: "category-carousel" }), L.forEach((i) => {
+      const r = Z({
         label: i.name,
         icon: i.icon,
         active: this.state.get("selectedCategory") === i.id,
@@ -1304,18 +1364,18 @@ class De {
       });
       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({
-      icon: he,
+      icon: de,
       title: "Next categories",
       className: "carousel-nav carousel-nav-right",
       onClick: () => this._scrollRight()
-    }), this._pagination = u("div", {
+    }), this._pagination = d("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 = u("button", {
+      const r = d("button", {
         type: "button",
         className: `pagination-dot ${i === 0 ? "active" : ""}`,
         role: "tab",
@@ -1412,7 +1472,7 @@ class De {
     this._unsubscribers.forEach((t) => t()), this._unsubscribers = [], this._chips.clear(), (e = this.element) == null || e.remove(), this.element = null;
   }
 }
-class Ue {
+class He {
   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;
   }
@@ -1422,13 +1482,13 @@ class Ue {
    * @returns {HTMLElement}
    */
   render({ onToggle: e, onSelect: t }) {
-    return this._onToggle = e, this._onSelect = t, this.element = u("div", { className: "filter-carousel-container" }), this._leftBtn = x({
-      icon: ce,
+    return this._onToggle = e, this._onSelect = t, this.element = d("div", { className: "filter-carousel-container" }), this._leftBtn = x({
+      icon: he,
       title: "Previous filters",
       className: "carousel-nav carousel-nav-left",
       onClick: () => this._scrollLeft()
-    }), this._carousel = u("div", { className: "filter-carousel" }), this._rightBtn = x({
-      icon: he,
+    }), this._carousel = d("div", { className: "filter-carousel" }), this._rightBtn = x({
+      icon: de,
       title: "Next filters",
       className: "carousel-nav carousel-nav-right",
       onClick: () => this._scrollRight()
@@ -1474,14 +1534,14 @@ class Ue {
    * @returns {HTMLElement}
    */
   _createFilterCard(e, { isActive: t, isSelected: i }) {
-    const r = u("div", {
+    const r = d("div", {
       className: `filter-card ${t ? "active" : ""} ${i ? "selected" : ""}`,
       "data-filter": e.id,
       "data-testid": `filter-${e.id}`,
       onClick: () => this._handleCardClick(e.id)
-    }), a = u("div", { className: "filter-preview" }), o = u("span", { className: "filter-preview-text" }, e.name.charAt(0));
+    }), a = d("div", { className: "filter-preview" }), o = d("span", { className: "filter-preview-text" }, e.name.charAt(0));
     a.appendChild(o);
-    const n = u("span", { className: "filter-name", title: e.name }, e.name), l = u("button", {
+    const n = d("span", { className: "filter-name", title: e.name }, e.name), l = d("button", {
       className: `filter-toggle ${t ? "active" : ""}`,
       onClick: (c) => {
         var p;
@@ -1490,7 +1550,7 @@ class Ue {
         this._handleToggle(e.id, h), h && (this.state.set("selectedFilter", e.id), (p = this._onSelect) == null || p.call(this, e.id));
       }
     });
-    return l.innerHTML = t ? Z : "", r.appendChild(a), r.appendChild(n), r.appendChild(l), r._toggle = l, r._isActive = t, r;
+    return l.innerHTML = t ? G : "", r.appendChild(a), r.appendChild(n), r.appendChild(l), r._toggle = l, r._isActive = t, r;
   }
   /**
    * Handle filter card click (select)
@@ -1516,7 +1576,7 @@ class Ue {
     const e = this.state.get("activeFilters");
     this._filterCards.forEach((t, i) => {
       const r = e.has(i);
-      t.classList.toggle("active", r), t._toggle.classList.toggle("active", r), t._toggle.innerHTML = r ? Z : "", t._isActive = r;
+      t.classList.toggle("active", r), t._toggle.classList.toggle("active", r), t._toggle.innerHTML = r ? G : "", t._isActive = r;
     });
   }
   /**
@@ -1569,7 +1629,7 @@ class Ue {
     this._unsubscribers.forEach((t) => t()), this._unsubscribers = [], this._filterCards.clear(), (e = this.element) == null || e.remove(), this.element = null;
   }
 }
-class Ve {
+class $e {
   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 = [];
   }
@@ -1579,7 +1639,7 @@ class Ve {
    * @returns {HTMLElement}
    */
   render({ onChange: e, onReset: t, onAction: i }) {
-    return this._onChange = e, this._onReset = t, this._onAction = i, this.element = u("div", { className: "filter-adjustments" }), this._subscribeToState(), this._renderControls(), this.element;
+    return this._onChange = e, this._onReset = t, this._onAction = i, this.element = d("div", { className: "filter-adjustments" }), this._subscribeToState(), this._renderControls(), this.element;
   }
   /**
    * Subscribe to state changes
@@ -1602,24 +1662,24 @@ class Ve {
     const e = this.state.get("selectedFilter");
     if (!e) {
       this.element.appendChild(
-        u("div", { className: "no-filter-selected" }, "Select a filter to adjust")
+        d("div", { className: "no-filter-selected" }, "Select a filter to adjust")
       );
       return;
     }
     const t = this.filterManager.getFilterDef(e);
     if (!t) {
       this.element.appendChild(
-        u("div", { className: "no-filter-selected" }, "Filter not found")
+        d("div", { className: "no-filter-selected" }, "Filter not found")
       );
       return;
     }
-    const i = u("div", { className: "adjustments-header" });
-    i.appendChild(u("span", { className: "adjustments-title" }, t.name)), i.appendChild(A({
+    const i = d("div", { className: "adjustments-header" });
+    i.appendChild(d("span", { className: "adjustments-title" }, t.name)), i.appendChild(F({
       label: "Reset",
       className: "btn-text",
       onClick: () => this._handleReset(e)
     })), this.element.appendChild(i);
-    const r = u("div", { className: "adjustments-grid" }), a = this.state.getFilterValues(e);
+    const r = d("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));
@@ -1637,7 +1697,7 @@ class Ve {
     const r = t.label || t.id;
     switch (this._normalizeControlType(t.type)) {
       case "slider":
-        return ae({
+        return oe({
           id: `${e}-${t.id}`,
           label: r,
           min: t.min ?? 0,
@@ -1647,14 +1707,14 @@ class Ve {
           onChange: (l) => this._handleChange(e, t.id, l)
         });
       case "toggle":
-        return oe({
+        return ne({
           id: `${e}-${t.id}`,
           label: r,
           checked: !!i,
           onChange: (l) => this._handleChange(e, t.id, l)
         });
       case "color":
-        return ne({
+        return le({
           id: `${e}-${t.id}`,
           label: r,
           value: typeof i == "string" && i.startsWith("#") ? i : t.default || "#000000",
@@ -1662,7 +1722,7 @@ class Ve {
         });
       case "select":
         const o = this._normalizeOptions(t.options);
-        return le({
+        return ce({
           id: `${e}-${t.id}`,
           label: r,
           options: o,
@@ -1670,8 +1730,8 @@ class Ve {
           onChange: (l) => this._handleChange(e, t.id, l)
         });
       case "button":
-        const n = u("div", { className: "button-control" });
-        return n.appendChild(A({
+        const n = d("div", { className: "button-control" });
+        return n.appendChild(F({
           label: r,
           className: "btn-secondary",
           onClick: () => this._handleAction(e, t.action || t.id)
@@ -1772,7 +1832,7 @@ class Ve {
     this._unsubscribers.forEach((t) => t()), this._unsubscribers = [], this._controls.clear(), (e = this.element) == null || e.remove(), this.element = null;
   }
 }
-class je {
+class We {
   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;
   }
@@ -1782,31 +1842,31 @@ class je {
    * @param {Object} callbacks - { onChange, onReset, onRemove, onAction }
    */
   build(e, { onChange: t, onReset: i, onRemove: r, onAction: a }) {
-    this._onChange = t, this._onReset = i, this._onRemove = r, this._onAction = a, this._container = e, this._drawer = u("div", { className: "mobile-filter-drawer" });
-    const o = u("div", { className: "drawer-header" });
-    this._titleEl = u("span", { className: "drawer-title" }, "Filter");
-    const n = u("div", { className: "drawer-header-actions" }), l = 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({
       label: "Reset",
       className: "btn-text",
       onClick: () => {
         var h;
         this._currentFilterId && ((h = this._onReset) == null || h.call(this, this._currentFilterId), this._renderControls());
       }
-    }), c = A({
+    }), c = F({
       label: "Remove",
       className: "btn-text btn-danger",
       onClick: () => {
         var h;
         this._currentFilterId && ((h = this._onRemove) == null || h.call(this, this._currentFilterId), this.close());
       }
-    }), d = x({
-      icon: G,
+    }), u = x({
+      icon: K,
       title: "Close",
       className: "btn-icon-sm",
       ariaLabel: "Close drawer",
       onClick: () => this.close()
     });
-    n.appendChild(l), n.appendChild(c), n.appendChild(d), o.appendChild(this._titleEl), o.appendChild(n), this._drawer.appendChild(o), this._body = u("div", { className: "drawer-body" }), this._drawer.appendChild(this._body), e.appendChild(this._drawer);
+    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);
   }
   /**
    * Open the drawer for a specific filter
@@ -1856,7 +1916,7 @@ class je {
     const e = this.filterManager.getFilterDef(this._currentFilterId);
     if (!e) return;
     this._titleEl.textContent = e.name;
-    const t = u("div", { className: "adjustments-grid" }), i = this.state.getFilterValues(this._currentFilterId);
+    const t = d("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);
@@ -1874,7 +1934,7 @@ class je {
     const r = t.label || t.id;
     switch (this._normalizeControlType(t.type)) {
       case "slider":
-        return ae({
+        return oe({
           id: `drawer-${e}-${t.id}`,
           label: r,
           min: t.min ?? 0,
@@ -1887,7 +1947,7 @@ class je {
           }
         });
       case "toggle":
-        return oe({
+        return ne({
           id: `drawer-${e}-${t.id}`,
           label: r,
           checked: !!i,
@@ -1897,7 +1957,7 @@ class je {
           }
         });
       case "color":
-        return ne({
+        return le({
           id: `drawer-${e}-${t.id}`,
           label: r,
           value: typeof i == "string" && i.startsWith("#") ? i : t.default || "#000000",
@@ -1908,7 +1968,7 @@ class je {
         });
       case "select": {
         const o = this._normalizeOptions(t.options);
-        return le({
+        return ce({
           id: `drawer-${e}-${t.id}`,
           label: r,
           options: o,
@@ -1920,8 +1980,8 @@ class je {
         });
       }
       case "button": {
-        const o = u("div", { className: "button-control" });
-        return o.appendChild(A({
+        const o = d("div", { className: "button-control" });
+        return o.appendChild(F({
           label: r,
           className: "btn-secondary",
           onClick: () => {
@@ -1968,7 +2028,7 @@ class je {
     this._controls.clear(), (e = this._drawer) == null || e.remove(), this._drawer = null, this._isOpen = !1, this._currentFilterId = null, this._container = null;
   }
 }
-class qe {
+class Ze {
   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;
   }
@@ -1977,10 +2037,10 @@ class qe {
    * @returns {HTMLElement}
    */
   render({ onToggle: e, onSelect: t }) {
-    return this._onToggle = e, this._onSelect = t, this.element = u("div", {
+    return this._onToggle = e, this._onSelect = t, this.element = d("div", {
       className: "mobile-active-filters",
       "data-testid": "mobile-active-filters"
-    }), this._scrollContainer = u("div", { className: "mobile-active-filters-scroll" }), this.element.appendChild(this._scrollContainer), this._subscribeToState(), this._renderChips(), this.element;
+    }), this._scrollContainer = d("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", () => {
@@ -1996,7 +2056,7 @@ class qe {
     this._scrollContainer.innerHTML = "", this._chips.clear();
     const e = this.state.get("activeFilters");
     if (!e || e.size === 0) {
-      const t = u("div", {
+      const t = d("div", {
         className: "active-filter-placeholder"
       }, "No active filters");
       this._scrollContainer.appendChild(t);
@@ -2010,17 +2070,17 @@ class qe {
     }), this._updateSelectedState();
   }
   _createChip(e, t) {
-    const i = u("div", {
+    const i = d("div", {
       className: "active-filter-chip",
       "data-filter-id": e,
       "data-testid": `active-chip-${e}`
-    }), r = u("span", {
+    }), r = d("span", {
       className: "active-filter-chip-label",
       onClick: (o) => {
         var n;
         o.stopPropagation(), (n = this._onSelect) == null || n.call(this, e);
       }
-    }, t.name), a = u("button", {
+    }, t.name), a = d("button", {
       className: "active-filter-chip-check",
       "aria-label": `Remove ${t.name} filter`,
       onClick: (o) => {
@@ -2041,11 +2101,11 @@ class qe {
     this._unsubscribers.forEach((t) => t()), this._unsubscribers = [], this._chips.clear(), (e = this.element) == null || e.remove(), this.element = null;
   }
 }
-const He = [
-  { id: "free", name: "Free", icon: Be },
-  { id: "square", name: "Square", icon: Xe },
-  { id: "circle", name: "Circle", icon: Ye }
-], $e = [
+const Ge = [
+  { id: "free", name: "Free", icon: Ue },
+  { id: "square", name: "Square", icon: Le },
+  { id: "circle", name: "Circle", icon: De }
+], Ke = [
   { id: "free", name: "Free" },
   { id: "1:1", name: "1:1" },
   { id: "4:3", name: "4:3" },
@@ -2053,52 +2113,60 @@ const He = [
   { id: "3:2", name: "3:2" },
   { id: "2:3", name: "2:3" }
 ];
-class We {
+class Qe {
   constructor(e, t) {
     this.state = e, this.cropManager = t, this.element = null, this._shapeChips = /* @__PURE__ */ new Map(), this._aspectChips = /* @__PURE__ */ new Map(), this._unsubscribers = [];
   }
+  /**
+   * Apply crop and return the editor UI to filter mode.
+   * If crop application cannot complete, force-disable crop mode to avoid
+   * leaving the editor stuck in crop controls.
+   */
+  _applyCropAndReturnToFilters() {
+    this.cropManager.apply() === null && typeof this.cropManager.disable == "function" && this.cropManager.disable(), this.state.set("selectedCategory", "adjust");
+  }
   /**
    * Create and render the crop controls
    * @returns {HTMLElement}
    */
   render() {
-    this.element = u("div", {
+    this.element = d("div", {
       className: "crop-controls",
       "data-testid": "crop-controls"
     });
-    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");
-    He.forEach((c) => {
-      const d = W({
+    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");
+    Ge.forEach((c) => {
+      const u = Z({
         label: c.name,
         icon: c.icon,
         active: i === c.id,
         onClick: () => this._selectShape(c.id)
       });
-      d.dataset.shape = c.id, d.dataset.testid = `crop-shape-${c.id}`, this._shapeChips.set(c.id, d), t.appendChild(d);
-    }), e.appendChild(t), this.element.appendChild(e), this.state.get("lockCropShape") && (e.style.display = "none"), this._shapeSection = e, this._aspectSection = 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");
-    $e.forEach((c) => {
-      const d = W({
+      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");
+    Ke.forEach((c) => {
+      const u = Z({
         label: c.name,
         active: a === c.id,
         onClick: () => this._selectAspect(c.id)
       });
-      d.dataset.ratio = c.id, d.dataset.testid = `crop-ratio-${c.id}`, this._aspectChips.set(c.id, d), r.appendChild(d);
+      u.dataset.ratio = c.id, u.dataset.testid = `crop-ratio-${c.id}`, this._aspectChips.set(c.id, u), r.appendChild(u);
     }), this._aspectSection.appendChild(r), this.element.appendChild(this._aspectSection), this._updateAspectVisibility();
-    const o = u("div", { className: "crop-actions" }), n = A({
+    const o = d("div", { className: "crop-actions" }), n = F({
       label: "Cancel",
       className: "btn-secondary crop-cancel-btn",
-      icon: G,
+      icon: K,
       onClick: () => this.cropManager.cancel()
     });
     n.dataset.testid = "cancel-crop";
-    const l = A({
+    const l = F({
       label: "Apply Crop",
       className: "btn-primary crop-apply-btn",
-      icon: Z,
-      onClick: () => this.cropManager.apply()
+      icon: G,
+      onClick: () => this._applyCropAndReturnToFilters()
     });
     return l.dataset.testid = "apply-crop", o.appendChild(n), o.appendChild(l), this.element.appendChild(o), this._subscribeToState(), this.element;
   }
@@ -2160,7 +2228,7 @@ class We {
     this._unsubscribers.forEach((t) => t()), this._unsubscribers = [], this._shapeChips.clear(), this._aspectChips.clear(), (e = this.element) == null || e.remove(), this.element = null;
   }
 }
-class Ze {
+class Je {
   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;
   }
@@ -2170,18 +2238,18 @@ class Ze {
    * @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 = u("div", {
+    this._onRemove = e, this._onReset = t, this._onClearAll = i, this._onUpdateValue = r, this._onSelect = a, this.element = d("div", {
       className: "active-filters-panel",
       "data-testid": "active-filters-panel"
     });
-    const o = u("div", { className: "panel-header" });
-    o.appendChild(u("h3", { className: "panel-title" }, "Active Filters"));
-    const n = A({
+    const o = d("div", { className: "panel-header" });
+    o.appendChild(d("h3", { className: "panel-title" }, "Active Filters"));
+    const n = F({
       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 = u("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 = d("div", { className: "active-filters-list" }), this.element.appendChild(this._listContainer), this._subscribeToState(), this._renderFilterList(), this.element;
   }
   /**
    * Subscribe to state changes
@@ -2217,7 +2285,7 @@ class Ze {
     const e = this.state.get("activeFilters");
     if (e.size === 0) {
       this._listContainer.appendChild(
-        u("div", { className: "no-filters-message" }, "No filters active")
+        d("div", { className: "no-filters-message" }, "No filters active")
       );
       return;
     }
@@ -2235,26 +2303,26 @@ class Ze {
    * @returns {HTMLElement}
    */
   _createFilterItem(e, t) {
-    const r = this.state.get("selectedFilter") === e, a = u("div", {
+    const r = this.state.get("selectedFilter") === e, a = d("div", {
       className: `active-filter-item ${r ? "selected" : ""}`,
       "data-active-filter": e,
       "data-testid": `active-filter-${e}`,
       onClick: (m) => {
         m.target.closest(".filter-item-actions") || this._handleSelect(e);
       }
-    }), o = u("div", { className: "filter-item-header" }), n = u("span", { className: "filter-item-name" }, t.name), l = u("div", { className: "filter-item-actions" }), c = x({
-      icon: ue,
+    }), 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({
+      icon: pe,
       title: "Reset filter",
       className: "btn-icon-sm",
       onClick: () => this._handleReset(e)
-    }), d = x({
-      icon: Ie,
+    }), u = x({
+      icon: Be,
       title: "Remove filter",
       className: "btn-icon-sm btn-danger",
       onClick: () => this._handleRemove(e)
     });
-    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" });
+    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" });
     return p.textContent = this._getValuesSummary(t, h), a.appendChild(p), a._summaryEl = p, a;
   }
   /**
@@ -2373,7 +2441,7 @@ const Y = {
   showCropControls: !0,
   maxExportWidth: void 0,
   maxExportHeight: void 0
-}, q = {
+}, H = {
   free: {
     ...Y
   },
@@ -2408,15 +2476,15 @@ const Y = {
     lockAspectRatio: !1
   }
 };
-function Ge(s) {
+function et(s) {
   if (!s)
-    return { ...q.free };
+    return { ...H.free };
   if (typeof s == "object" && s !== null)
     return { ...Y, ...s };
-  const e = q[s];
-  return e ? { ...e } : { ...q.free };
+  const e = H[s];
+  return e ? { ...e } : { ...H.free };
 }
-class Gt extends B {
+class ei extends B {
   /**
    * Create a new VanillaImageEditor
    * @param {HTMLElement} container - Container element to mount the editor
@@ -2426,8 +2494,8 @@ class Gt extends B {
     var a, o, n;
     if (super(), !e)
       throw new Error("VanillaImageEditor: container element is required");
-    this._container = e;
-    const i = t.preset ? Ge(t.preset) : null, r = i ? {
+    this._container = e, this._destroyed = !1, this._loadVersion = 0, this._objectUrls = /* @__PURE__ */ new Set();
+    const i = t.preset ? et(t.preset) : null, r = i ? {
       initialMode: i.initialMode === "crop" ? "crop" : "adjust",
       cropShape: i.cropShape,
       initialAspectRatio: i.aspectRatio
@@ -2445,7 +2513,7 @@ class Gt extends B {
       },
       ...r,
       ...t
-    }, this._preset = i, this._state = _e(), this._state.set("theme", this._options.theme), this._state.set("crop.shape", this._options.cropShape), this._state.set("crop.aspect", this._options.initialAspectRatio), this._preset && (this._state.set("lockCropShape", !!this._preset.lockCropShape), this._state.set("lockAspectRatio", !!this._preset.lockAspectRatio), this._state.set("showFilters", this._preset.showFilters !== !1), this._state.set("showCropControls", this._preset.showCropControls !== !1), this._state.set("autoZoomOnCropOverflow", !!this._preset.autoZoomOnCropOverflow)), this._renderer = new xe(), this._filterManager = new we(this._state, this._renderer), this._cropManager = new $(this._state, this._renderer), this._removeBgManager = null, ((a = this._options.backgroundRemoval) == null ? void 0 : a.enabled) !== !1 && (this._removeBgManager = new Se({
+    }, this._preset = i, this._state = Se(), 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 ve(), this._filterManager = new Pe(this._state, this._renderer), this._cropManager = new W(this._state, this._renderer), this._removeBgManager = null, ((a = this._options.backgroundRemoval) == null ? void 0 : a.enabled) !== !1 && (this._removeBgManager = new Me({
       endpoint: (o = this._options.backgroundRemoval) == null ? void 0 : o.endpoint,
       fallbackEndpoint: (n = this._options.backgroundRemoval) == null ? void 0 : n.fallbackEndpoint
     })), this._loadingOverlay = null, this._isMobile = typeof window < "u" ? window.innerWidth <= 768 : !1, this._toolbar = null, this._categoryCarousel = null, this._filterCarousel = null, this._filterAdjustments = null, this._mobileFilterDrawer = null, this._mobileActiveFilters = null, this._cropControls = null, this._activeFiltersPanel = null, this._editorEl = null, this._canvasContainer = null, this._cropOverlay = null, this._controlsSection = null, this._filterControlsEl = null, this._fileInput = null, this._resizeObserver = null, this._init();
@@ -2463,13 +2531,13 @@ class Gt extends B {
    * Build DOM structure
    */
   _buildDOM() {
-    this._container.innerHTML = "", this._editorEl = u("div", {
+    this._container.innerHTML = "", this._editorEl = d("div", {
       className: `vanilla-image-editor ${this._state.get("isDarkMode") ? "dark" : "light"}`
     });
-    const e = u("div", { className: "editor-toolbar-container" });
+    const e = d("div", { className: "editor-toolbar-container" });
     this._editorEl.appendChild(e), this._toolbarContainer = e;
-    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", {
+    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", {
       type: "file",
       accept: "image/*",
       className: "hidden-file-input",
@@ -2481,31 +2549,31 @@ class Gt extends B {
    * Initialize UI components
    */
   _initUI() {
-    this._toolbar = new Le(this._state, this), this._toolbarContainer.appendChild(this._toolbar.render()), this._filterControlsEl = u("div", { className: "filter-controls-container" }), this._categoryCarousel = new De(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 = d("div", { className: "filter-controls-container" }), this._categoryCarousel = new qe(this._state, this), this._filterControlsEl.appendChild(this._categoryCarousel.render((r) => {
     }));
-    const e = u("div", { className: "filter-layout" }), t = u("div", { className: "filter-left-column" });
-    this._filterCarousel = new Ue(this._state, this._filterManager), t.appendChild(this._filterCarousel.render({
+    const e = d("div", { className: "filter-layout" }), t = d("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) => {
         this._handleFilterSelect(r), this._isMobile && this._mobileFilterDrawer && this._mobileFilterDrawer.open(r);
       }
-    })), this._filterAdjustments = new Ve(this._state, this._filterManager), t.appendChild(this._filterAdjustments.render({
+    })), this._filterAdjustments = new $e(this._state, this._filterManager), t.appendChild(this._filterAdjustments.render({
       onChange: (r, a, o) => this._handleFilterChange(r, a, o),
       onReset: (r) => this._handleFilterReset(r),
       onAction: (r, a) => this._handleFilterAction(r, a)
     })), e.appendChild(t);
-    const i = u("div", { className: "filter-right-column" });
-    this._activeFiltersPanel = new Ze(this._state, this._filterManager), i.appendChild(this._activeFiltersPanel.render({
+    const i = d("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),
       onClearAll: () => this.resetAll(),
       onSelect: (r) => this._handleFilterSelect(r)
-    })), e.appendChild(i), this._filterControlsEl.appendChild(e), this._mobileActiveFilters = new qe(this._state, this._filterManager), this._filterControlsEl.appendChild(this._mobileActiveFilters.render({
+    })), e.appendChild(i), this._filterControlsEl.appendChild(e), this._mobileActiveFilters = new Ze(this._state, this._filterManager), this._filterControlsEl.appendChild(this._mobileActiveFilters.render({
       onToggle: (r, a) => this._handleFilterToggle(r, a),
       onSelect: (r) => {
         this._handleFilterSelect(r), this._isMobile && this._mobileFilterDrawer && this._mobileFilterDrawer.open(r);
       }
-    })), this._cropControls = new We(this._state, this._cropManager), this._cropControlsEl = this._cropControls.render(), this._cropControlsEl.style.display = "none", this._controlsSection.appendChild(this._filterControlsEl), this._controlsSection.appendChild(this._cropControlsEl), this._mobileFilterDrawer = new je(this._state, this._filterManager), this._mobileFilterDrawer.build(this._controlsSection, {
+    })), this._cropControls = new Qe(this._state, this._cropManager), this._cropControlsEl = this._cropControls.render(), this._cropControlsEl.style.display = "none", this._controlsSection.appendChild(this._filterControlsEl), this._controlsSection.appendChild(this._cropControlsEl), this._mobileFilterDrawer = new We(this._state, this._filterManager), this._mobileFilterDrawer.build(this._controlsSection, {
       onChange: (r, a, o) => this._handleFilterChange(r, a, o),
       onReset: (r) => this._handleFilterReset(r),
       onRemove: (r) => {
@@ -2619,22 +2687,37 @@ class Gt extends B {
   }
   /**
    * Load an image into the editor
-   * @param {string|File} imageSource - URL, data URL, or File object
+   * @param {string|Blob|File} imageSource - URL, data URL, Blob, or File object
+   * @param {Object} [options] - Load options
+   * @param {Object|null} [options.state] - ImageEditorSessionState to restore
+   * @param {string|number} [options.sessionKey] - Session boundary identifier
    */
-  async loadImage(e) {
-    let t = e;
-    e instanceof File && (t = await this._fileToDataUrl(e)), await this._renderer.loadTexture(t), this._state.set("hasImage", !0), this._state.set("imageUrl", t), this._options.initialMode === "crop" && this.setMode("crop"), this.emit("imageLoaded", { url: t });
+  async loadImage(e, t = {}) {
+    if (this._destroyed) return;
+    const i = ++this._loadVersion;
+    let r = e;
+    this._resetEditorState(), e instanceof Blob && (r = URL.createObjectURL(e), this._objectUrls.add(r)), await this._renderer.loadTexture(r), !(this._destroyed || this._loadVersion !== i) && (this._state.set("hasImage", !0), this._state.set("imageUrl", r), t.state && this._hydrateState(t.state), this._options.initialMode === "crop" && this.setMode("crop"), this.emit("imageLoaded", { url: r }));
   }
   /**
-   * Convert a File to data URL
-   * @param {File} file
-   * @returns {Promise<string>}
+   * Reset all editor state (filters + crop) to a clean baseline.
+   * Called at the start of loadImage() to prevent stale state bleed between sessions.
    */
-  _fileToDataUrl(e) {
-    return new Promise((t, i) => {
-      const r = new FileReader();
-      r.onload = () => t(r.result), r.onerror = i, r.readAsDataURL(e);
-    });
+  _resetEditorState() {
+    this._filterManager.resetAll(), this._state.set("crop.rect", null), this._state.set("crop.appliedRect", null), this._state.set("crop.appliedShape", null), this._state.set("crop.appliedAspect", null), this._state.set("crop.shape", this._options.cropShape || "free"), this._state.set("crop.aspect", this._options.initialAspectRatio || "free"), this._state.get("mode") === "crop" && (this._cropManager.disable(), this._state.set("mode", "filters"));
+  }
+  /**
+   * Hydrate editor state from a canonical ImageEditorSessionState object.
+   * Restores filter stack + values and crop metadata (shape, aspect, rect).
+   * @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();
+    }
   }
   /**
    * Open the file picker dialog
@@ -2656,24 +2739,50 @@ class Gt extends B {
    * Save the image (triggers download and emits 'save' event)
    */
   save() {
-    var e, t;
     if (this._state.get("hasImage")) {
       this._state.set("isSaving", !0);
       try {
-        const i = this.exportImage("png", 0.92);
-        if (!i) throw new Error("Failed to export image");
-        const r = {
-          width: Math.round(((e = this._renderer.sprite) == null ? void 0 : e.width) || 0),
-          height: Math.round(((t = this._renderer.sprite) == null ? void 0 : t.height) || 0)
-        }, a = document.createElement("a");
-        a.href = i, a.download = `edited-image-${Date.now()}.png`, document.body.appendChild(a), a.click(), document.body.removeChild(a), this.emit("save", { imageData: i, dimensions: r });
-      } catch (i) {
-        this.emit("error", { error: i });
+        const e = this.exportImage("png", 0.92);
+        if (!e) throw new Error("Failed to export image");
+        const t = this._renderer.originalTexture, i = {
+          width: Math.round((t == null ? void 0 : t.width) || 0),
+          height: Math.round((t == null ? void 0 : t.height) || 0)
+        }, r = document.createElement("a");
+        r.href = e, r.download = `edited-image-${Date.now()}.png`, document.body.appendChild(r), r.click(), document.body.removeChild(r), this.emit("save", { imageData: e, dimensions: i, state: this.getSerializableState() });
+      } catch (e) {
+        this.emit("error", { error: e });
       } finally {
         this._state.set("isSaving", !1);
       }
     }
   }
+  /**
+   * Get a canonical, serializable snapshot of the current editor state.
+   * Safe for persistence — returns a deep copy with no mutable references.
+   * @returns {Object} ImageEditorSessionState
+   */
+  getSerializableState() {
+    const e = this._state.get("activeFilters"), t = [];
+    if (e)
+      for (const o of e) {
+        const n = this._state.getFilterValues(o);
+        t.push({
+          id: o,
+          enabled: !0,
+          values: { ...n }
+        });
+      }
+    const i = this._state.get("crop.appliedRect"), r = this._state.get("crop.rect"), a = i || r;
+    return {
+      version: 1,
+      crop: {
+        rect: a ? { ...a } : null,
+        aspectRatio: this._state.get("crop.appliedAspect") || this._state.get("crop.aspect") || "free",
+        shape: this._state.get("crop.appliedShape") || this._state.get("crop.shape") || "free"
+      },
+      filters: t
+    };
+  }
   /**
    * Close the editor (emits 'cancel' event)
    */
@@ -2775,9 +2884,9 @@ class Gt extends B {
   _showLoadingOverlay(e) {
     var i;
     if (!this._loadingOverlay)
-      this._loadingOverlay = u("div", { className: "editor-loading-overlay" }, [
-        u("div", { className: "editor-loading-spinner" }),
-        u("div", { className: "editor-loading-text" }, e)
+      this._loadingOverlay = d("div", { className: "editor-loading-overlay" }, [
+        d("div", { className: "editor-loading-spinner" }),
+        d("div", { className: "editor-loading-text" }, e)
       ]);
     else {
       const r = this._loadingOverlay.querySelector(".editor-loading-text");
@@ -2797,25 +2906,31 @@ class Gt extends B {
    * Destroy the editor and clean up
    */
   destroy() {
-    var e, t, i, r, a, o, n, l, c, d;
-    (e = this._resizeObserver) == null || e.disconnect(), this._renderer.destroy(), this._cropManager.disable(), this._handleWindowResize && window.removeEventListener("resize", this._handleWindowResize), (t = this._toolbar) == null || t.destroy(), (i = this._categoryCarousel) == null || i.destroy(), (r = this._filterCarousel) == null || r.destroy(), (a = this._filterAdjustments) == null || a.destroy(), (o = this._mobileFilterDrawer) == null || o.destroy(), (n = this._mobileActiveFilters) == null || n.destroy(), (l = this._cropControls) == null || l.destroy(), (c = this._activeFiltersPanel) == null || c.destroy(), (d = this._editorEl) == null || d.remove(), this._container = null, this._state = null, this.emit("destroyed"), this.removeAllListeners();
+    var e, t, i, r, a, o, n, l, c, u;
+    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();
   }
 }
 const S = /* @__PURE__ */ new Map(), I = /* @__PURE__ */ new Map();
-function Ke(s, e) {
+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;
 }
-function Qe(s) {
+function it(s) {
   return S.get(s);
 }
 function U() {
   return Array.from(S.values());
 }
-function Je() {
+function rt() {
   U().map((t) => t.id), Object.entries(g).filter(
     (t) => /Filter$/.test(t[0]) && typeof t[1] == "function"
   ).forEach(([t, i]) => {
@@ -2839,16 +2954,16 @@ function Je() {
     });
   });
 }
-function et(s) {
+function st(s) {
   return (I.get(s) || []).map((t) => S.get(t)).filter(Boolean);
 }
-function tt() {
+function at() {
   return Array.from(I.keys());
 }
-function Kt(s) {
+function ti(s) {
   return S.has(s);
 }
-function it(s) {
+function ot(s) {
   const e = S.get(s);
   if (!e)
     return !1;
@@ -2860,11 +2975,11 @@ function it(s) {
   }
   return !0;
 }
-function Qt(s, e) {
+function ii(s, e) {
   const t = S.get(s);
-  return t ? Ke(t, e) : !1;
+  return t ? tt(t, e) : !1;
 }
-function rt() {
+function nt() {
   return Array.from(S.values()).map((s) => ({
     id: s.id,
     name: s.name,
@@ -2873,7 +2988,7 @@ function rt() {
   }));
 }
 if (typeof window < "u") {
-  window.__DEBUG_FILTERS_LIST = Array.from(S.keys()), window.getAllFilters = U, window.getFilter = Qe, window.getFiltersByCategory = et, window.getRegisteredFilters = rt;
+  window.__DEBUG_FILTERS_LIST = Array.from(S.keys()), window.getAllFilters = U, window.getFilter = it, window.getFiltersByCategory = st, window.getRegisteredFilters = nt;
   const s = f;
   window.registerFilter = (e) => {
     const t = s(e);
@@ -2883,7 +2998,7 @@ if (typeof window < "u") {
 typeof window < "u" && (window.initializeFilterRegistry = window.initializeFilterRegistry || function() {
   return [];
 });
-const { AdjustmentFilter: st } = g, { ColorMatrixFilter: at } = w, k = {
+const { AdjustmentFilter: lt } = g, { ColorMatrixFilter: ct } = w, k = {
   gamma: 1,
   saturation: 1,
   contrast: 1,
@@ -2892,7 +3007,7 @@ const { AdjustmentFilter: st } = g, { ColorMatrixFilter: at } = w, k = {
   green: 1,
   blue: 1,
   alpha: 1
-}, ot = /* @__PURE__ */ new Set([
+}, ht = /* @__PURE__ */ new Set([
   "gamma",
   "saturation",
   "contrast",
@@ -2912,10 +3027,10 @@ function P(s, e) {
   }
   return e;
 }
-function J(s) {
-  return ot.has(s);
+function ee(s) {
+  return ht.has(s);
 }
-function nt(s) {
+function dt(s) {
   return {
     gamma: P(s.gamma, k.gamma),
     saturation: P(s.saturation, k.saturation),
@@ -2927,7 +3042,7 @@ function nt(s) {
     alpha: P(s.alpha, k.alpha)
   };
 }
-function ee(s, e) {
+function te(s, e) {
   s.reset(), s.brightness(e.brightness, !0), s.contrast(e.contrast, !0), s.saturate(e.saturation, !0);
 }
 f({
@@ -2938,28 +3053,28 @@ f({
   // Create an instance of the AdjustmentFilter with the provided parameters
   createFilter: (s) => {
     try {
-      const e = nt(s ?? {}), t = { ...e };
+      const e = dt(s ?? {}), t = { ...e };
       try {
-        const i = new st(t), r = i;
+        const i = new lt(t), r = i;
         return r._customParams = { ...e }, r.updateUIParam = function(o, n) {
           try {
-            if (!J(o))
+            if (!ee(o))
               return;
             const l = this._customParams ?? { ...k }, c = P(n, l[o]);
             l[o] = c, this._customParams = l;
-            const d = this;
-            o in d && (d[o] = c);
+            const u = this;
+            o in u && (u[o] = c);
           } catch {
           }
         }, i;
       } catch {
-        const r = new at(), a = r;
-        return a._customParams = { ...e }, ee(r, e), a.updateUIParam = function(n, l) {
+        const r = new ct(), a = r;
+        return a._customParams = { ...e }, te(r, e), a.updateUIParam = function(n, l) {
           try {
-            if (!J(n))
+            if (!ee(n))
               return;
-            const c = this._customParams ?? { ...k }, d = P(l, c[n]);
-            c[n] = d, this._customParams = c, ee(this, c);
+            const c = this._customParams ?? { ...k }, u = P(l, c[n]);
+            c[n] = u, this._customParams = c, te(this, c);
           } catch {
           }
         }, r;
@@ -3063,14 +3178,14 @@ f({
     }
   ]
 });
-const { ColorMatrixFilter: lt } = w, R = {
+const { ColorMatrixFilter: ut } = w, N = {
   brightness: 1,
   contrast: 1,
   saturation: 1,
   hue: 0,
   sepia: 0,
   negative: !1
-}, ct = /* @__PURE__ */ new Set([
+}, pt = /* @__PURE__ */ new Set([
   "brightness",
   "contrast",
   "saturation",
@@ -3078,8 +3193,8 @@ const { ColorMatrixFilter: lt } = w, R = {
   "sepia",
   "negative"
 ]);
-function ht(s) {
-  return ct.has(s);
+function ft(s) {
+  return pt.has(s);
 }
 function X(s, e) {
   if (typeof s == "number" && Number.isFinite(s))
@@ -3091,7 +3206,7 @@ function X(s, e) {
   }
   return e;
 }
-function pe(s, e) {
+function fe(s, e) {
   if (typeof s == "boolean")
     return s;
   if (typeof s == "string") {
@@ -3102,17 +3217,17 @@ function pe(s, e) {
   }
   return e;
 }
-function dt(s) {
+function mt(s) {
   return {
-    brightness: X(s.brightness, R.brightness),
-    contrast: X(s.contrast, R.contrast),
-    saturation: X(s.saturation, R.saturation),
-    hue: X(s.hue, R.hue),
-    sepia: X(s.sepia, R.sepia),
-    negative: pe(s.negative, R.negative)
+    brightness: X(s.brightness, N.brightness),
+    contrast: X(s.contrast, N.contrast),
+    saturation: X(s.saturation, N.saturation),
+    hue: X(s.hue, N.hue),
+    sepia: X(s.sepia, N.sepia),
+    negative: fe(s.negative, N.negative)
   };
 }
-function te(s, e) {
+function ie(s, e) {
   s.reset(), e.brightness !== 1 && s.brightness(e.brightness, !0), e.contrast !== 1 && s.contrast(e.contrast, !0), e.saturation !== 1 && s.saturate(e.saturation, !0), e.hue !== 0 && s.hue(e.hue, !0), e.sepia > 0 && s.sepia(!0), e.negative && s.negative(!0);
 }
 f({
@@ -3123,19 +3238,19 @@ f({
   // Create an instance of the ColorMatrixFilter with the provided parameters
   createFilter: (s) => {
     try {
-      const e = dt(s ?? {}), t = new lt(), i = t;
-      return i._customParams = { ...e }, te(t, e), i.updateUIParam = function(a, o) {
+      const e = mt(s ?? {}), t = new ut(), i = t;
+      return i._customParams = { ...e }, ie(t, e), i.updateUIParam = function(a, o) {
         try {
-          if (!ht(a))
+          if (!ft(a))
             return;
-          const n = this._customParams ?? { ...R };
+          const n = this._customParams ?? { ...N };
           if (a === "negative")
-            n.negative = pe(o, n.negative);
+            n.negative = fe(o, n.negative);
           else {
             const l = a;
             n[l] = X(o, n[l]);
           }
-          this._customParams = n, te(this, n);
+          this._customParams = n, ie(this, n);
         } catch {
         }
       }, t;
@@ -3407,7 +3522,7 @@ f({
     }
   ]
 });
-const { ColorOverlayFilter: ut } = g;
+const { ColorOverlayFilter: gt } = g;
 f({
   id: "colorOverlay",
   name: "Color Overlay",
@@ -3422,7 +3537,7 @@ f({
     try {
       let e = 16711680;
       s.color && (typeof s.color == "string" ? e = parseInt(s.color.replace("#", "0x"), 16) : typeof s.color == "number" && (e = s.color));
-      const t = new ut({
+      const t = new gt({
         color: e,
         alpha: s.alpha || 0.5
       });
@@ -3510,8 +3625,8 @@ f({
           switch (this._customParams = l, l[o] = n, o) {
             case "color":
               if (typeof n == "string") {
-                const d = parseInt(n.replace("#", "0x"), 16);
-                this.color = d;
+                const u = parseInt(n.replace("#", "0x"), 16);
+                this.color = u;
               }
               break;
             case "alpha":
@@ -3654,7 +3769,7 @@ f({
     }
   ]
 });
-const { ColorMatrixFilter: pt } = w;
+const { ColorMatrixFilter: bt } = w;
 f({
   id: "grayscale",
   name: "Grayscale",
@@ -3667,14 +3782,14 @@ f({
    */
   createFilter: (s) => {
     try {
-      const e = new pt();
+      const e = new bt();
       e._customParams = { ...s };
       const t = s.intensity !== void 0 ? s.intensity : 1;
-      return ie(e, t), e.updateUIParam = function(i, r) {
+      return re(e, t), e.updateUIParam = function(i, r) {
         const a = this._customParams || {};
         switch (this._customParams = a, a[i] = r, i) {
           case "intensity":
-            ie(this, r);
+            re(this, r);
             break;
           default:
             i in this && (this[i] = r);
@@ -3704,10 +3819,10 @@ f({
     }
   ]
 });
-function ie(s, e) {
+function re(s, e) {
   s.reset(), s.greyscale(e);
 }
-const { HslAdjustmentFilter: ft } = g;
+const { HslAdjustmentFilter: yt } = g;
 f({
   id: "hsl-adjustment",
   name: "HSL Adjustment",
@@ -3719,7 +3834,7 @@ f({
    */
   createFilter: (s) => {
     try {
-      const e = new ft({
+      const e = new yt({
         hue: s.hue !== void 0 ? s.hue : 0,
         saturation: s.saturation !== void 0 ? s.saturation : 0,
         lightness: s.lightness !== void 0 ? s.lightness : 0,
@@ -3817,7 +3932,7 @@ f({
     }
   ]
 });
-const { KawaseBlurFilter: mt } = g;
+const { KawaseBlurFilter: _t } = g;
 f({
   id: "kawase-blur",
   name: "Kawase Blur",
@@ -3830,7 +3945,7 @@ f({
    */
   createFilter: (s) => {
     try {
-      const e = new mt({
+      const e = new _t({
         strength: s.strength || 4,
         quality: s.quality || 3,
         clamp: s.clamp || !1,
@@ -3935,7 +4050,7 @@ f({
     }
   ]
 });
-const { MotionBlurFilter: gt } = g;
+const { MotionBlurFilter: xt } = g;
 f({
   id: "motion-blur",
   name: "Motion Blur",
@@ -3948,7 +4063,7 @@ f({
    */
   createFilter: (s) => {
     try {
-      const e = new gt({
+      const e = new xt({
         velocity: {
           x: s.velocityX !== void 0 ? s.velocityX : 0,
           y: s.velocityY !== void 0 ? s.velocityY : 0
@@ -4043,7 +4158,7 @@ f({
     }
   ]
 });
-const { RadialBlurFilter: bt } = g;
+const { RadialBlurFilter: Ct } = g;
 f({
   id: "radial-blur",
   name: "Radial Blur",
@@ -4052,7 +4167,7 @@ f({
   // Create an instance of the RadialBlurFilter with the provided parameters
   createFilter: (s) => {
     try {
-      const e = new bt({
+      const e = new Ct({
         angle: s.angle ?? 20,
         center: { x: s.centerX ?? 0, y: s.centerY ?? 0 },
         kernelSize: s.kernelSize ?? 15,
@@ -4167,7 +4282,7 @@ f({
     }
   ]
 });
-const { TiltShiftFilter: yt } = g;
+const { TiltShiftFilter: wt } = g;
 f({
   id: "tilt-shift",
   name: "Tilt Shift",
@@ -4176,7 +4291,7 @@ f({
   // Create an instance of the TiltShiftFilter with the provided parameters
   createFilter: (s) => {
     try {
-      const e = typeof s.blur == "number" ? s.blur : 100, t = typeof s.gradientBlur == "number" ? s.gradientBlur : 600, i = typeof s.startX == "number" ? s.startX : 0, r = typeof s.startY == "number" ? s.startY : 0.5, a = typeof s.endX == "number" ? s.endX : 1, o = typeof s.endY == "number" ? s.endY : 0.5, n = new yt({
+      const e = typeof s.blur == "number" ? s.blur : 100, t = typeof s.gradientBlur == "number" ? s.gradientBlur : 600, i = typeof s.startX == "number" ? s.startX : 0, r = typeof s.startY == "number" ? s.startY : 0.5, a = typeof s.endX == "number" ? s.endX : 1, o = typeof s.endY == "number" ? s.endY : 0.5, n = new wt({
         blur: Number(e),
         gradientBlur: Number(t),
         start: { x: Number(i), y: Number(r) },
@@ -4191,28 +4306,28 @@ f({
         endY: o
       }, n.updateUIParam = function(l, c) {
         try {
-          const d = Number(c), h = this._customParams || {};
-          switch (this._customParams = h, h[l] = d, l) {
+          const u = Number(c), h = this._customParams || {};
+          switch (this._customParams = h, h[l] = u, l) {
             case "blur":
-              this.blur = d;
+              this.blur = u;
               break;
             case "gradientBlur":
-              this.gradientBlur = d;
+              this.gradientBlur = u;
               break;
             case "startX":
-              this.start && typeof this.start == "object" && (this.start.x = d);
+              this.start && typeof this.start == "object" && (this.start.x = u);
               break;
             case "startY":
-              this.start && typeof this.start == "object" && (this.start.y = d);
+              this.start && typeof this.start == "object" && (this.start.y = u);
               break;
             case "endX":
-              this.end && typeof this.end == "object" && (this.end.x = d);
+              this.end && typeof this.end == "object" && (this.end.x = u);
               break;
             case "endY":
-              this.end && typeof this.end == "object" && (this.end.y = d);
+              this.end && typeof this.end == "object" && (this.end.y = u);
               break;
             default:
-              l in this && (this[l] = d);
+              l in this && (this[l] = u);
               break;
           }
         } catch {
@@ -4295,7 +4410,7 @@ f({
     }
   ]
 });
-const { ZoomBlurFilter: _t } = g;
+const { ZoomBlurFilter: St } = g;
 f({
   id: "zoom-blur",
   name: "Zoom Blur",
@@ -4308,7 +4423,7 @@ f({
    */
   createFilter: (s) => {
     try {
-      const e = new _t({
+      const e = new St({
         strength: s.strength || 0.1,
         center: {
           x: s.centerX !== void 0 ? s.centerX : 0.5,
@@ -4422,7 +4537,7 @@ f({
     }
   ]
 });
-const { ColorGradientFilter: re } = g;
+const { ColorGradientFilter: se } = g;
 f({
   id: "color-gradient",
   name: "Color Gradient",
@@ -4446,7 +4561,7 @@ f({
         { offset: 0, color: 16711680, alpha: 1 },
         { offset: 1, color: 255, alpha: 1 }
       ]), e.sort((i, r) => i.offset - r.offset);
-      const t = new re({
+      const t = new se({
         type: s.gradientType,
         // 0: linear, 1: radial, 2: conic
         stops: e,
@@ -4526,8 +4641,8 @@ f({
             }));
             break;
           case "removeColorStop":
-            const d = [...this.stops];
-            d.length > 2 && (d.pop(), this.stops = d, a.colorStops = this.stops.map((h) => ({
+            const u = [...this.stops];
+            u.length > 2 && (u.pop(), this.stops = u, 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
@@ -4536,7 +4651,7 @@ f({
           case "cssGradient":
             if (r && typeof r == "string" && r.trim() !== "")
               try {
-                const h = new re({ css: r });
+                const h = new se({ css: r });
                 this.type = h.type, this.angle = h.angle, this.stops = [...h.stops], a.colorStops = this.stops.map((p) => ({
                   offset: p.offset,
                   color: typeof p.color == "number" ? "#" + p.color.toString(16).padStart(6, "0") : p.color,
@@ -4561,7 +4676,7 @@ f({
               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((z, _) => z.offset - _.offset), a.colorStops = this.getColorStopsForUI(), !0;
+                  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;
               }
             } else i in this && (this[i] = r);
             break;
@@ -4749,7 +4864,7 @@ f({
     }
   ]
 });
-const xt = g.ColorReplaceFilter;
+const vt = g.ColorReplaceFilter;
 f({
   id: "color-replace",
   name: "Color Replace",
@@ -4766,7 +4881,7 @@ f({
       s.originalColor && (typeof s.originalColor == "string" ? e = parseInt(s.originalColor.replace("#", "0x"), 16) : typeof s.originalColor == "number" && (e = s.originalColor));
       let t = 255;
       s.targetColor && (typeof s.targetColor == "string" ? t = parseInt(s.targetColor.replace("#", "0x"), 16) : typeof s.targetColor == "number" && (t = s.targetColor));
-      const i = new xt({
+      const i = new vt({
         originalColor: e,
         targetColor: t,
         tolerance: s.tolerance || 0.4
@@ -4830,7 +4945,7 @@ f({
     }
   ]
 });
-const Ct = g.MultiColorReplaceFilter;
+const kt = g.MultiColorReplaceFilter;
 f({
   id: "multi-color-replace",
   name: "Multi-Color Replace",
@@ -4856,7 +4971,7 @@ f({
         const i = typeof s.originalColor3 == "string" ? parseInt(s.originalColor3.replace("#", "0x"), 16) : s.originalColor3, r = typeof s.targetColor3 == "string" ? parseInt(s.targetColor3.replace("#", "0x"), 16) : s.targetColor3;
         e.push([i, r]);
       }
-      const t = new Ct(
+      const t = new kt(
         e,
         s.tolerance || 0.05,
         3
@@ -4967,7 +5082,7 @@ f({
     }
   ]
 });
-const { RGBSplitFilter: wt } = g;
+const { RGBSplitFilter: Pt } = g;
 f({
   id: "rgb-split",
   name: "RGB Split",
@@ -4988,7 +5103,7 @@ f({
       }, i = {
         x: s.blueX !== void 0 ? s.blueX : 0,
         y: s.blueY !== void 0 ? s.blueY : 0
-      }, r = new wt({
+      }, r = new Pt({
         red: e,
         green: t,
         blue: i
@@ -5101,7 +5216,7 @@ f({
     }
   ]
 });
-const { AdvancedBloomFilter: St } = g;
+const { AdvancedBloomFilter: Mt } = g;
 f({
   id: "advanced-bloom",
   name: "Advanced Bloom",
@@ -5110,7 +5225,7 @@ f({
   // Create an instance of the AdvancedBloomFilter with the provided parameters
   createFilter: (s) => {
     try {
-      const e = new St({
+      const e = new Mt({
         threshold: s.threshold || 0.5,
         bloomScale: s.bloomScale || 1,
         brightness: s.brightness || 1,
@@ -5257,7 +5372,7 @@ f({
     }
   ]
 });
-const vt = g.AsciiFilter;
+const Ft = g.AsciiFilter;
 f({
   id: "ascii",
   name: "ASCII",
@@ -5269,7 +5384,7 @@ f({
       const e = typeof s.size == "number" ? s.size : 8;
       let t = s.color;
       typeof t == "string" && t.startsWith("#") && (t = parseInt(t.replace("#", "0x"), 16));
-      const i = s.replaceColor === !0, r = new vt({
+      const i = s.replaceColor === !0, r = new Ft({
         size: e,
         color: t,
         replaceColor: i
@@ -5336,7 +5451,7 @@ f({
     }
   ]
 });
-const kt = g.BackdropBlurFilter;
+const At = g.BackdropBlurFilter;
 f({
   id: "backdrop-blur",
   name: "Backdrop Blur",
@@ -5345,7 +5460,7 @@ f({
   // Create an instance of the BackdropBlurFilter with the provided parameters
   createFilter: (s) => {
     try {
-      const e = new kt({
+      const e = new At({
         // Higher strength values (20-50) make the effect more noticeable
         strength: s.strength || 20,
         quality: s.quality || 4,
@@ -5443,7 +5558,7 @@ f({
     }
   ]
 });
-const { BevelFilter: Pt } = g;
+const { BevelFilter: zt } = g;
 f({
   id: "bevel",
   name: "Bevel",
@@ -5455,7 +5570,7 @@ f({
    */
   createFilter: (s) => {
     try {
-      const e = s.lightColor ? s.lightColor.replace("#", "0x") : "0xffffff", t = s.shadowColor ? s.shadowColor.replace("#", "0x") : "0x000000", i = new Pt({
+      const e = s.lightColor ? s.lightColor.replace("#", "0x") : "0xffffff", t = s.shadowColor ? s.shadowColor.replace("#", "0x") : "0x000000", i = new zt({
         rotation: s.rotation !== void 0 ? s.rotation : 45,
         thickness: s.thickness !== void 0 ? s.thickness : 2,
         lightColor: parseInt(e, 16),
@@ -5571,7 +5686,7 @@ f({
     }
   ]
 });
-const { BloomFilter: Mt } = g;
+const { BloomFilter: Rt } = g;
 f({
   id: "bloom",
   name: "Bloom/Glow",
@@ -5580,7 +5695,7 @@ f({
   // Create an instance of the BloomFilter with the provided parameters
   createFilter: (s) => {
     try {
-      const e = typeof s.strengthX == "number" ? s.strengthX : 2, t = typeof s.strengthY == "number" ? s.strengthY : 2, i = typeof s.quality == "number" ? s.quality : 4, r = typeof s.resolution == "number" ? s.resolution : 1, a = typeof s.kernelSize == "number" ? s.kernelSize : 5, o = new Mt({
+      const e = typeof s.strengthX == "number" ? s.strengthX : 2, t = typeof s.strengthY == "number" ? s.strengthY : 2, i = typeof s.quality == "number" ? s.quality : 4, r = typeof s.resolution == "number" ? s.resolution : 1, a = typeof s.kernelSize == "number" ? s.kernelSize : 5, o = new Rt({
         strength: {
           x: Number(e),
           y: Number(t)
@@ -5596,7 +5711,7 @@ f({
         resolution: r,
         kernelSize: a
       }, o.updateUIParam = function(n, l) {
-        var c, d;
+        var c, u;
         try {
           const h = Number(l), p = this._customParams || {};
           switch (this._customParams = p, p[n] = h, n) {
@@ -5604,7 +5719,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, (d = this._updateStrength) == null || d.call(this));
+              this.strength && typeof this.strength == "object" && (this.strength.y = h, (u = this._updateStrength) == null || u.call(this));
               break;
             case "quality":
               this.quality = h;
@@ -5683,7 +5798,7 @@ f({
     }
   ]
 });
-const { BulgePinchFilter: Ft } = g;
+const { BulgePinchFilter: Nt } = g;
 f({
   id: "bulge-pinch",
   // ID must match what the application expects
@@ -5693,7 +5808,7 @@ f({
   // Create an instance of the BulgePinchFilter with the provided parameters
   createFilter: (s) => {
     try {
-      const e = s.centerX ?? 0.5, t = s.centerY ?? 0.5, i = s.radius ?? 100, r = s.strength ?? 1, a = new Ft({
+      const e = s.centerX ?? 0.5, t = s.centerY ?? 0.5, i = s.radius ?? 100, r = s.strength ?? 1, a = new Nt({
         center: {
           x: e,
           y: t
@@ -5775,7 +5890,7 @@ f({
     }
   ]
 });
-const { ConvolutionFilter: At } = g, E = {
+const { ConvolutionFilter: Tt } = g, E = {
   normal: [0, 0, 0, 0, 1, 0, 0, 0, 0],
   gaussianBlur: [0.045, 0.122, 0.045, 0.122, 0.332, 0.122, 0.045, 0.122, 0.045],
   boxBlur: [1 / 9, 1 / 9, 1 / 9, 1 / 9, 1 / 9, 1 / 9, 1 / 9, 1 / 9, 1 / 9],
@@ -5810,7 +5925,7 @@ f({
         const i = s.preset;
         e = E[i] || E.normal;
       }
-      const t = new At(e, s.width || 200, s.height || 200);
+      const t = new Tt(e, s.width || 200, s.height || 200);
       return t._customParams = { ...s }, t.updateUIParam = function(i, r) {
         const a = this._customParams || {};
         switch (this._customParams = a, a[i] = r, i) {
@@ -6021,7 +6136,7 @@ f({
     }
   ]
 });
-const { CrossHatchFilter: zt } = g;
+const { CrossHatchFilter: It } = g;
 f({
   id: "cross-hatch",
   name: "Cross Hatch",
@@ -6031,7 +6146,7 @@ f({
   // Note: CrossHatchFilter has NO parameters according to PixiJS examples
   createFilter: (s) => {
     try {
-      const e = new zt();
+      const e = new It();
       return e.updateUIParam = function(t, i) {
         return !0;
       }, e;
@@ -6228,7 +6343,7 @@ f({
     }
   ]
 });
-const Nt = w.DisplacementFilter, Rt = w.Sprite, H = w.Texture;
+const Et = w.DisplacementFilter, Xt = w.Sprite, $ = w.Texture;
 f({
   id: "displacement",
   // ID must match what the application expects
@@ -6241,7 +6356,7 @@ f({
       const e = s.mapTexture || "/assets/images/displacement_map.png";
       let t;
       try {
-        t = H.from(e), t.source.addressMode = "repeat";
+        t = $.from(e), t.source.addressMode = "repeat";
       } catch {
         const o = document.createElement("canvas");
         o.width = 256, o.height = 256;
@@ -6252,9 +6367,9 @@ f({
             for (let c = 0; c < 10; c++)
               (l + c) % 2 === 0 && n.fillRect(l * 25, c * 25, 25, 25);
         }
-        t = H.from(o);
+        t = $.from(o);
       }
-      const i = new Rt(t), r = new Nt(i, s.scale || 50);
+      const i = new Xt(t), r = new Et(i, s.scale || 50);
       return r.scale.x = s.scaleX || 50, r.scale.y = s.scaleY || 50, r._customParams = { ...s }, r._displacementSprite = i, r.updateUIParam = function(a, o) {
         const n = this._customParams || {};
         switch (this._customParams = n, n[a] = o, a) {
@@ -6268,7 +6383,7 @@ f({
             try {
               const l = this._displacementSprite;
               if (l) {
-                const c = H.from(o);
+                const c = $.from(o);
                 c.source.addressMode = "repeat", l.texture = c;
               }
             } catch {
@@ -6401,7 +6516,7 @@ f({
     }
   ]
 });
-const { EmbossFilter: Tt } = g;
+const { EmbossFilter: Yt } = g;
 f({
   id: "emboss",
   name: "Emboss",
@@ -6410,7 +6525,7 @@ f({
   // Create an instance of the Emboss filter with the provided parameters
   createFilter: (s) => {
     try {
-      const e = typeof s.strength == "number" ? s.strength : 5, t = new Tt(e);
+      const e = typeof s.strength == "number" ? s.strength : 5, t = new Yt(e);
       return t._customParams = {
         strength: e
       }, t.updateUIParam = function(i, r) {
@@ -6450,7 +6565,7 @@ f({
     }
   ]
 });
-const { GlitchFilter: It } = g, N = {
+const { GlitchFilter: Bt } = g, R = {
   TRANSPARENT: 0,
   ORIGINAL: 1,
   LOOP: 2,
@@ -6464,7 +6579,7 @@ f({
   description: "Apply digital distortion and glitch effects",
   createFilter: (s) => {
     try {
-      const e = { x: s.redX, y: s.redY }, t = { x: s.greenX, y: s.greenY }, i = { x: s.blueX, y: s.blueY }, r = new It({
+      const e = { x: s.redX, y: s.redY }, t = { x: s.greenX, y: s.greenY }, i = { x: s.blueX, y: s.blueY }, r = new Bt({
         slices: s.slices,
         offset: s.offset,
         direction: s.direction,
@@ -6495,8 +6610,8 @@ f({
             break;
           case "redX":
           case "redY":
-            const d = this.red;
-            n === "redX" ? d.x = l : d.y = l, this.red = d;
+            const u = this.red;
+            n === "redX" ? u.x = l : u.y = l, this.red = u;
             break;
           case "greenX":
           case "greenY":
@@ -6542,7 +6657,7 @@ f({
     slices: 10,
     offset: 100,
     direction: 0,
-    fillMode: N.LOOP,
+    fillMode: R.LOOP,
     // LOOP mode looks better for the demo
     seed: 0.5,
     average: !1,
@@ -6605,13 +6720,13 @@ f({
       label: "Fill Mode",
       property: "fillMode",
       options: [
-        { value: N.TRANSPARENT, label: "Transparent" },
-        { value: N.ORIGINAL, label: "Original" },
-        { value: N.LOOP, label: "Loop" },
-        { value: N.CLAMP, label: "Clamp" },
-        { value: N.MIRROR, label: "Mirror" }
+        { value: R.TRANSPARENT, label: "Transparent" },
+        { value: R.ORIGINAL, label: "Original" },
+        { value: R.LOOP, label: "Loop" },
+        { value: R.CLAMP, label: "Clamp" },
+        { value: R.MIRROR, label: "Mirror" }
       ],
-      default: N.LOOP
+      default: R.LOOP
     },
     {
       id: "seed",
@@ -6705,7 +6820,7 @@ f({
     }
   ]
 });
-const { GlowFilter: Et } = g;
+const { GlowFilter: Ot } = g;
 f({
   id: "glow",
   name: "Glow",
@@ -6714,7 +6829,7 @@ f({
   // Create an instance of the GlowFilter with the provided parameters
   createFilter: (s) => {
     try {
-      const e = parseInt(s.color.replace("#", "0x"), 16), t = new Et({
+      const e = parseInt(s.color.replace("#", "0x"), 16), t = new Ot({
         distance: s.distance || 10,
         outerStrength: s.outerStrength || 4,
         innerStrength: s.innerStrength || 0,
@@ -6840,7 +6955,7 @@ f({
     }
   ]
 });
-const { GodrayFilter: Xt } = g;
+const { GodrayFilter: Lt } = g;
 f({
   id: "godray",
   name: "Godray",
@@ -6849,7 +6964,7 @@ f({
   // Create an instance of the GodrayFilter with the provided parameters
   createFilter: (s) => {
     try {
-      const e = new Xt({
+      const e = new Lt({
         angle: s.angle || 30,
         parallel: s.parallel ?? !0,
         center: {
@@ -7002,7 +7117,7 @@ f({
     }
   ]
 });
-const Yt = g.SimpleLightmapFilter, se = w.Texture;
+const Dt = g.SimpleLightmapFilter, ae = w.Texture;
 f({
   id: "lightmap",
   name: "Lightmap",
@@ -7027,40 +7142,40 @@ f({
         const c = a.createRadialGradient(128, 128, 10, 128, 128, 160);
         c.addColorStop(0, "white"), c.addColorStop(0.3, "rgba(220, 220, 220, 1)"), c.addColorStop(0.6, "rgba(150, 150, 150, 1)"), c.addColorStop(1, "black"), a.fillStyle = c, a.fillRect(0, 0, 256, 256);
       }
-      const o = se.from(r);
+      const o = ae.from(r);
       let n;
       try {
         typeof t == "string" && t.startsWith("#") ? n = parseInt(t.replace("#", "0x"), 16) : n = 0;
       } catch {
         n = 0;
       }
-      const l = new Yt(o, n, i);
+      const l = new Dt(o, n, i);
       return l._customParams = {
         textureType: e,
         color: t,
         alpha: i
-      }, l.updateUIParam = function(c, d) {
+      }, l.updateUIParam = function(c, u) {
         try {
           const h = this._customParams || {};
-          switch (this._customParams = h, h[c] = d, c) {
+          switch (this._customParams = h, h[c] = u, c) {
             case "textureType":
-              h.textureType = d;
+              h.textureType = u;
               const p = document.createElement("canvas");
               p.width = 256, p.height = 256;
               const m = p.getContext("2d");
               if (m) {
-                if (d === "spotlight") {
+                if (u === "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 (d === "softlight") {
+                } 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);
                 } 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 C = se.from(p);
+                const C = ae.from(p);
                 if (this.lightMap = C, this.enabled !== void 0) {
                   const b = this.enabled;
                   this.enabled = !1, setTimeout(() => {
@@ -7070,18 +7185,18 @@ f({
               }
               break;
             case "color":
-              h.color = d;
+              h.color = u;
               try {
-                typeof d == "string" && d.startsWith("#") ? this.color = parseInt(d.replace("#", "0x"), 16) : this.color = 0;
+                typeof u == "string" && u.startsWith("#") ? this.color = parseInt(u.replace("#", "0x"), 16) : this.color = 0;
               } catch {
                 this.color = 0;
               }
               break;
             case "alpha":
-              this.alpha = Number(d);
+              this.alpha = Number(u);
               break;
             default:
-              c in this && (this[c] = d);
+              c in this && (this[c] = u);
               break;
           }
         } catch {
@@ -7133,7 +7248,7 @@ f({
     }
   ]
 });
-const { NoiseFilter: Bt } = w;
+const { NoiseFilter: Ut } = w;
 f({
   id: "noise",
   name: "Noise",
@@ -7141,7 +7256,7 @@ f({
   description: "Add random noise to the image",
   createFilter: (s) => {
     try {
-      const e = new Bt({
+      const e = new Ut({
         noise: s.noise || 0.5,
         seed: s.seed || Math.random()
       });
@@ -7218,7 +7333,7 @@ f({
     }
   ]
 });
-const { OldFilmFilter: Ot } = g;
+const { OldFilmFilter: Vt } = g;
 f({
   id: "old-film",
   name: "Old Film",
@@ -7226,7 +7341,7 @@ f({
   description: "Apply a vintage film effect with scratches and grain",
   createFilter: (s) => {
     try {
-      const e = new Ot({
+      const e = new Vt({
         sepia: s.sepia,
         noise: s.noise,
         noiseSize: s.noiseSize,
@@ -7407,7 +7522,7 @@ f({
     }
   ]
 });
-const { OutlineFilter: Lt } = g;
+const { OutlineFilter: jt } = g;
 f({
   id: "outline",
   name: "Outline",
@@ -7417,7 +7532,7 @@ f({
     try {
       let e = s.color;
       typeof e == "string" && (e = parseInt(e.replace("#", "0x"), 16));
-      const t = new Lt({
+      const t = new jt({
         thickness: s.thickness || 4,
         color: e,
         alpha: s.alpha || 1,
@@ -7507,7 +7622,7 @@ f({
     }
   ]
 });
-const { PixelateFilter: Dt } = g;
+const { PixelateFilter: qt } = g;
 f({
   id: "pixelate",
   name: "Pixelate",
@@ -7515,7 +7630,7 @@ f({
   description: "Create a pixelated or mosaic effect",
   createFilter: (s) => {
     try {
-      const e = new Dt(
+      const e = new qt(
         s.useUniform ? Math.max(4, s.size || 10) : [Math.max(4, s.sizeX || 10), Math.max(4, s.sizeY || 10)]
       );
       return e._customParams = { ...s }, e.updateUIParam = function(t, i) {
@@ -7598,7 +7713,7 @@ f({
     }
   ]
 });
-const { ReflectionFilter: Ut } = g;
+const { ReflectionFilter: Ht } = g;
 f({
   id: "reflection",
   // ID must match what the application expects
@@ -7615,7 +7730,7 @@ f({
         waveLength: new Float32Array([s.wavelengthStart ?? 30, s.wavelengthEnd ?? 100]),
         alpha: new Float32Array([s.alphaStart ?? 1, s.alphaEnd ?? 1]),
         time: s.time ?? 0
-      }, t = new Ut(e);
+      }, t = new Ht(e);
       return t._customParams = { ...s }, t.animating = s.animating ?? !1, t.updateUIParam = function(i, r) {
         const a = this._customParams || {};
         switch (this._customParams = a, a[i] = r, i) {
@@ -7766,7 +7881,7 @@ f({
     }
   ]
 });
-const { ShockwaveFilter: Vt } = g;
+const { ShockwaveFilter: $t } = g;
 f({
   id: "shockwave",
   // ID must match what the application expects
@@ -7776,7 +7891,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, d = new Vt({
+      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({
         center: i,
         amplitude: r,
         wavelength: a,
@@ -7785,7 +7900,7 @@ f({
         radius: l,
         time: c
       });
-      return d._customParams = { ...s }, d.animating = s.animating ?? !1, d.updateUIParam = function(h, p) {
+      return u._customParams = { ...s }, u.animating = s.animating ?? !1, u.updateUIParam = function(h, p) {
         const m = this._customParams || {};
         switch (this._customParams = m, m[h] = p, h) {
           case "centerX":
@@ -7810,7 +7925,7 @@ f({
             break;
         }
         return !0;
-      }, d;
+      }, u;
     } catch {
       return null;
     }
@@ -7918,7 +8033,7 @@ f({
     }
   ]
 });
-const { SimplexNoiseFilter: jt } = g;
+const { SimplexNoiseFilter: Wt } = g;
 f({
   id: "simplex-noise",
   name: "Simplex Noise",
@@ -7926,7 +8041,7 @@ f({
   description: "Apply procedural noise to create texture effects",
   createFilter: (s) => {
     try {
-      const e = s.animating ? 0 : s.offsetZ || 0, t = new jt({
+      const e = s.animating ? 0 : s.offsetZ || 0, t = new Wt({
         strength: s.strength,
         noiseScale: s.noiseScale,
         offsetX: s.offsetX,
@@ -8073,9 +8188,9 @@ f({
     }
   ]
 });
-class qt extends w.Filter {
+class Zt extends w.Filter {
   constructor(e) {
-    const t = be.from({
+    const t = Ce.from({
       vertex: `
         attribute vec2 aPosition;
         varying vec2 vTextureCoord;
@@ -8184,7 +8299,7 @@ f({
   description: "Creates a twisting distortion effect around a central point",
   createFilter: (s) => {
     try {
-      const e = new qt({
+      const e = new Zt({
         centerX: s.centerX ?? 0.5,
         centerY: s.centerY ?? 0.5,
         radius: s.radius ?? 0.25,
@@ -8254,7 +8369,7 @@ f({
     }
   ]
 });
-const { AdjustmentFilter: Ht } = g;
+const { AdjustmentFilter: Gt } = g;
 function D(s) {
   const e = typeof s == "string" ? parseInt(s.replace("#", "0x"), 16) : s;
   return [
@@ -8263,7 +8378,7 @@ function D(s) {
     (e & 255) / 255
   ];
 }
-class $t extends Ht {
+class Kt extends Gt {
   constructor(e = {}) {
     super({
       brightness: 1,
@@ -8306,7 +8421,7 @@ f({
   description: "Add a classic darkened border effect to the image",
   createFilter: (s) => {
     try {
-      const e = new $t({
+      const e = new Kt({
         radius: s.radius || 0.8,
         strength: s.strength || 1,
         color: s.color || "#000000"
@@ -8370,22 +8485,22 @@ f({
     }
   ]
 });
-function Jt(s) {
+function ri(s) {
   try {
     let e = [], t = [];
     try {
-      e = U(), e.length === 0 && Je();
+      e = U(), e.length === 0 && rt();
     } catch {
     }
     const i = s == null ? void 0 : s.disabled;
     if (Array.isArray(i) && i.length > 0) {
       let r = 0;
       for (const a of i)
-        it(a) && r++;
+        ot(a) && r++;
       r > 0;
     }
     try {
-      e = U(), t = tt();
+      e = U(), t = at();
     } catch {
       e || (e = []), t || (t = []);
     }
@@ -8395,16 +8510,16 @@ function Jt(s) {
   }
 }
 export {
-  Gt as V,
-  Qe as a,
-  et as b,
-  tt as c,
-  Je as d,
-  Qt as e,
-  rt as f,
+  ei as V,
+  it as a,
+  st as b,
+  at as c,
+  rt as d,
+  ii as e,
+  nt as f,
   U as g,
-  Kt as h,
-  Jt as i,
+  ti as h,
+  ri as i,
   f as r
 };
-//# sourceMappingURL=editor-BgjKZltI.js.map
+//# sourceMappingURL=editor-624YYYUE.js.map