@codingfactory/mediables-vue 2.19.3 → 2.21.0

package/dist/editor-CcfSL2dI.js

@@ -1,4322 +0,0 @@
-var Me = Object.defineProperty;
-var Fe = (g, e, t) => e in g ? Me(g, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : g[e] = t;
-var ae = (g, e, t) => Fe(g, typeof e != "symbol" ? e + "" : e, t);
-import { E as ne, d as Se } from "./index-Dae8SHT7.js";
-const Re = Object.freeze(["normal", "multiply", "screen", "overlay"]), E = Object.freeze({
-  stroke: Object.freeze({ enabled: !1, color: "#000000", width: 0 }),
-  shadow: Object.freeze({ enabled: !1, color: "#000000", alpha: 0.5, blur: 0, distance: 0, angle: 45 }),
-  glow: Object.freeze({ enabled: !1, color: "#ffffff", alpha: 0.5, blur: 0 }),
-  backdrop: Object.freeze({ enabled: !1, color: "#000000", opacity: 0.5, padding: 0, radius: 0, blur: 0 })
-});
-class Te extends ne {
-  constructor() {
-    super(), this.app = null, this.sprite = null, this.originalTexture = null, this.baseTexture = null, this.fitScale = 1, this.zoom = 1, this._container = null, this._lastExportDimensions = null, this._mountPromise = null, this._mountToken = 0, this._destroyed = !1, this._layerDocument = null, this._layerDisplayObjects = /* @__PURE__ */ new Map(), this._renderableLayerIds = [], this._loadedTextureUrl = null, this._layerRenderToken = 0, this._layerFilterFactory = null;
-  }
-  /**
-   * Whether the renderer is fully initialized and ready for use.
-   * @returns {boolean}
-   */
-  get isReady() {
-    var e;
-    return !!((e = this.app) != null && e.renderer);
-  }
-  /**
-   * Get CSS size of the canvas (for proper coordinate mapping).
-   * Accesses renderer.canvas directly to avoid PIXI Application's
-   * canvas getter which throws when renderer is undefined.
-   */
-  _getCssSize() {
-    var s, r, o, n, a, l;
-    const e = (r = (s = this.app) == null ? void 0 : s.renderer) == null ? void 0 : r.canvas, t = (e == null ? void 0 : e.clientWidth) ?? ((n = (o = this.app) == null ? void 0 : o.screen) == null ? void 0 : n.width) ?? 0, i = (e == null ? void 0 : e.clientHeight) ?? ((l = (a = this.app) == null ? void 0 : a.screen) == null ? void 0 : l.height) ?? 0;
-    return { w: t, h: i };
-  }
-  /**
-   * Force render the stage
-   */
-  render() {
-    var e, t;
-    try {
-      (e = this.app) != null && e.renderer && ((t = this.app) != null && t.stage) && this.app.renderer.render(this.app.stage);
-    } catch {
-    }
-  }
-  /**
-   * Wait for the next animation frame, with a timeout fallback for environments
-   * where the frame callback never arrives while the editor is open.
-   * @param {number} timeoutMs
-   * @returns {Promise<void>}
-   */
-  _waitForNextFrame(e = 32) {
-    return new Promise((t) => {
-      if (typeof window > "u") {
-        t();
-        return;
-      }
-      let i = !1, s = 0;
-      const r = () => {
-        i || (i = !0, window.clearTimeout(s), t());
-      };
-      if (s = window.setTimeout(r, e), typeof window.requestAnimationFrame == "function") {
-        window.requestAnimationFrame(() => r());
-        return;
-      }
-      r();
-    });
-  }
-  /**
-   * Calculate fit scale for a texture
-   * @param {PIXI.Texture} tex
-   * @returns {number}
-   */
-  getFitScaleFor(e) {
-    if (!this.app || !e) return 1;
-    const { w: t, h: i } = this._getCssSize();
-    if (t <= 1 || i <= 1) return 1;
-    let s = Math.min(t / e.width, i / e.height) * 0.9;
-    return (!Number.isFinite(s) || s <= 0) && (s = 1), s;
-  }
-  /**
-   * Apply view transform (position and scale) to sprite
-   */
-  applyViewTransform(e = {}) {
-    if (!this.app || !this.sprite || !this.originalTexture) return;
-    const t = this.fitScale * this.zoom, { w: i, h: s } = this._getCssSize(), r = e.keepCenter ? { x: this.sprite.x + this.sprite.width / 2, y: this.sprite.y + this.sprite.height / 2 } : e.center ?? { x: i / 2, y: s / 2 };
-    this.sprite.width = this.originalTexture.width * t, this.sprite.height = this.originalTexture.height * t, this.sprite.x = r.x - this.sprite.width / 2, this.sprite.y = r.y - this.sprite.height / 2, this._syncLayerDisplayObjects(), this.render();
-  }
-  /**
-   * Set zoom level
-   * @param {number} z - Zoom level (0.1 to 8)
-   * @param {Object} opts - Options
-   */
-  setZoom(e, t = {}) {
-    this.zoom = Math.max(0.1, Math.min(8, e)), this.applyViewTransform({ keepCenter: t.keepCenter ?? !0 }), this.emit("zoomChange", this.zoom);
-  }
-  /**
-   * Fit image to screen
-   */
-  fitToScreen() {
-    this.originalTexture && (this.fitScale = this.getFitScaleFor(this.originalTexture), this.setZoom(1, { keepCenter: !1 }));
-  }
-  /**
-   * Mount PIXI application to container
-   * @param {HTMLElement} container
-   * @param {number} backgroundColor
-   * @param {Object} [options]
-   * @param {number} [options.backgroundAlpha=1] - 0 makes the canvas transparent
-   *   so a host-rendered background (e.g. CSS checkerboard) shows through.
-   */
-  async mount(e, t = 16777215, i = {}) {
-    if (!e) return;
-    this._destroyed = !1, this._container = e;
-    const s = ++this._mountToken, r = async () => {
-      var p;
-      const o = window.PIXI;
-      if (!o)
-        throw new Error("PIXI.js not found. Please ensure PIXI is loaded globally.");
-      (p = o.Assets) != null && p.setPreferences && o.Assets.setPreferences({ crossOrigin: "anonymous" });
-      const n = e.clientWidth || 600, a = e.clientHeight || 400, l = typeof i.backgroundAlpha == "number" ? i.backgroundAlpha : 1, h = new o.Application();
-      if (this.app = h, await h.init({
-        width: n,
-        height: a,
-        backgroundColor: t,
-        backgroundAlpha: l,
-        antialias: !0,
-        autoDensity: !0,
-        resolution: window.devicePixelRatio || 1
-      }), this._destroyed || this._mountToken !== s || this.app !== h) {
-        try {
-          h.destroy(!0, { children: !0, texture: !0 });
-        } catch {
-        }
-        return !1;
-      }
-      e.appendChild(h.canvas);
-      const c = h.canvas;
-      return c.classList.add("pixi-canvas"), c.style.width = "100%", c.style.height = "100%", c.style.transform = "translateZ(0)", c.style.willChange = "transform", c.setAttribute("role", "img"), c.setAttribute("aria-label", "Image editor canvas — use toolbar controls to edit the image"), this.emit("mounted", { width: n, height: a }), !0;
-    };
-    return this._mountPromise = r(), await this._mountPromise;
-  }
-  /**
-   * Load an image texture
-   * @param {string} imageUrl - URL, data URL, or blob URL of the image
-   * @param {Object} [options]
-   * @param {() => boolean} [options.isCurrent] - Returns false when this load
-   *   has been superseded and must not mutate the renderer.
-   */
-  async loadTexture(e, t = {}) {
-    var h, c, p;
-    const i = () => typeof t.isCurrent != "function" || t.isCurrent() !== !1;
-    if (this._mountPromise && await this._mountPromise, !((h = this.app) != null && h.renderer) || !i()) return !1;
-    const s = window.PIXI, r = await this._loadImageElement(e);
-    if (!r || !((c = this.app) != null && c.renderer) || !i() || (await this._waitForNextFrame(), !((p = this.app) != null && p.renderer) || !i())) return !1;
-    const o = s.Texture.from(r);
-    if (!o)
-      return !1;
-    this.originalTexture = o, this.baseTexture = o, this._loadedTextureUrl = typeof e == "string" ? e : null, this.sprite && (this.app.stage.removeChild(this.sprite), this.sprite.destroy()), this.sprite = new s.Sprite(o), this.app.stage.addChild(this.sprite), this.fitScale = this.getFitScaleFor(o), this.zoom = 1;
-    const { w: n, h: a } = this._getCssSize();
-    this.applyViewTransform({ center: { x: n / 2, y: a / 2 } });
-    const l = this.getFitScaleFor(o);
-    return Math.abs(l - this.fitScale) / Math.max(1e-6, l) > 0.02 && (this.fitScale = l, this.applyViewTransform({ center: { x: n / 2, y: a / 2 } })), this.render(), this.emit("textureLoaded", { width: o.width, height: o.height }), !0;
-  }
-  /**
-   * Render a v2 layer document in preview order. The existing subject sprite
-   * remains the filter/crop target; auxiliary layers are synced to its preview
-   * geometry until arbitrary per-layer transforms are introduced.
-   * @param {Object|null} document
-   * @returns {Promise<boolean>}
-   */
-  async renderLayerDocument(e) {
-    var o;
-    if (!((o = this.app) != null && o.stage) || !this.sprite || !e || !Array.isArray(e.layers))
-      return !1;
-    const t = window.PIXI;
-    if (!t) return !1;
-    const i = ++this._layerRenderToken, s = () => i === this._layerRenderToken;
-    this._destroyLayerDisplayObjects(), this._layerDocument = JSON.parse(JSON.stringify(e)), this._renderableLayerIds = [];
-    try {
-      this.app.stage.removeChild(this.sprite);
-    } catch {
-    }
-    let r = !1;
-    for (const n of this._layerDocument.layers) {
-      if (!n || n.visible === !1) {
-        (n == null ? void 0 : n.role) === "subject" && (this.sprite.visible = !1, this.sprite.__layerId = n.id, r = !0);
-        continue;
-      }
-      if (this._isSubjectLayer(n)) {
-        const l = await this._createSubjectDisplayObjectForLayer(t, n);
-        if (!s())
-          return this._destroyTransientDisplayObject(l), !1;
-        if (l) {
-          this.sprite.visible = !1, l.__layerId = n.id, l.visible = !0, l.alpha = this._layerOpacity(n), this._layerDisplayObjects.set(n.id, { layer: n, displayObject: l }), this._syncLayerDisplayObject(n, l), this.app.stage.addChild(l), this._renderableLayerIds.push(n.id), r = !0;
-          continue;
-        }
-        this.sprite.__layerId = n.id, this.sprite.visible = !0, this.sprite.alpha = this._layerOpacity(n), this._applyLayerFilterInstances(this.sprite, n), this.app.stage.addChild(this.sprite), this._renderableLayerIds.push(n.id), r = !0;
-        continue;
-      }
-      const a = await this._createDisplayObjectForLayer(t, n);
-      if (!s())
-        return this._destroyTransientDisplayObject(a), !1;
-      a && (a.__layerId = n.id, a.visible = !0, a.alpha = this._layerOpacity(n), this._layerDisplayObjects.set(n.id, { layer: n, displayObject: a }), this._syncLayerDisplayObject(n, a), this.app.stage.addChild(a), this._renderableLayerIds.push(n.id));
-    }
-    return r || (this.sprite.visible = !1), s() ? (this.render(), !0) : !1;
-  }
-  getRenderableLayerIds() {
-    return [...this._renderableLayerIds];
-  }
-  setLayerFilterFactory(e) {
-    this._layerFilterFactory = typeof e == "function" ? e : null;
-  }
-  applyLayerFilters(e = this._layerDocument) {
-    var t;
-    if (!e || !Array.isArray(e.layers)) return !1;
-    this._layerDocument = JSON.parse(JSON.stringify(e));
-    for (const i of this._layerDocument.layers) {
-      if (!i) continue;
-      const s = this._layerDisplayObjects.get(i.id) || null;
-      s && (s.layer = i);
-      let r = (s == null ? void 0 : s.displayObject) || null;
-      !r && this._isSubjectLayer(i) && ((t = this.sprite) == null ? void 0 : t.__layerId) === i.id && (r = this.sprite), r && this._applyLayerFilterInstances(r, i);
-    }
-    return this.render(), !0;
-  }
-  _isSubjectLayer(e) {
-    return (e == null ? void 0 : e.role) === "subject" || (e == null ? void 0 : e.id) === "subject-layer";
-  }
-  _layerSupportsImageFilters(e) {
-    var t;
-    return !e || typeof e != "object" ? !1 : e.type === "image" ? !0 : e.type === "background" || e.role === "background" ? ((t = e.fill) == null ? void 0 : t.kind) === "media" : !1;
-  }
-  _layerOpacity(e) {
-    const t = Number(e == null ? void 0 : e.opacity);
-    return Number.isFinite(t) ? Math.max(0, Math.min(1, t)) : 1;
-  }
-  _applyLayerFilterInstances(e, t, i = {}) {
-    if (!e || !this._layerSupportsImageFilters(t)) return;
-    let s = [];
-    if (this._layerFilterFactory)
-      try {
-        s = this._layerFilterFactory(t, {
-          displayObject: e,
-          forExport: i.forExport === !0,
-          previewToNativeScale: i.previewToNativeScale || 1,
-          sourceWidth: i.sourceWidth,
-          sourceHeight: i.sourceHeight
-        }) || [];
-      } catch {
-        s = [];
-      }
-    const r = Array.isArray(s) ? s.filter(Boolean) : [];
-    for (const a of r)
-      if (!(!a || typeof a != "object" && typeof a != "function"))
-        try {
-          Object.defineProperty(a, "__mediablesLayerImageFilter", {
-            value: !0,
-            configurable: !0
-          });
-        } catch {
-          try {
-            a.__mediablesLayerImageFilter = !0;
-          } catch {
-          }
-        }
-    const n = [...Array.isArray(e.filters) ? e.filters.filter((a) => (a == null ? void 0 : a.__mediablesLayerImageFilter) !== !0) : [], ...r];
-    e.filters = n.length > 0 ? n : null;
-  }
-  async _createDisplayObjectForLayer(e, t) {
-    var o, n;
-    const i = this._createTextDisplayObjectForLayer(e, t);
-    if (i) return i;
-    const s = await this._createImageDisplayObjectForLayer(e, t);
-    if (s) return s;
-    const r = this._backgroundFillForLayer(t);
-    if ((r == null ? void 0 : r.kind) === "media") {
-      const a = await this._textureForLayerSource(e, r.source);
-      if (!a) return null;
-      const l = this._createBackgroundSprite(e, a, r.fit);
-      return l.__sourceWidth = Number((o = r.source) == null ? void 0 : o.originalWidth) || a.width || 1, l.__sourceHeight = Number((n = r.source) == null ? void 0 : n.originalHeight) || a.height || 1, this._applyLayerEffects(e, l, t), this._applyLayerFilterInstances(l, t), l;
-    }
-    if ((r == null ? void 0 : r.kind) === "gradient") {
-      const a = this._createGradientTexture(e, r, 512, 512);
-      if (!a || typeof e.Sprite != "function") return null;
-      const l = new e.Sprite(a);
-      return l.__ownsTexture = !0, l.__sourceWidth = 512, l.__sourceHeight = 512, this._applyLayerEffects(e, l, t), l;
-    }
-    if (this._backgroundColorForLayer(t) && typeof e.Graphics == "function") {
-      const a = new e.Graphics();
-      return this._applyLayerEffects(e, a, t), a;
-    }
-    return null;
-  }
-  _isTextLayer(e) {
-    return (e == null ? void 0 : e.type) === "text" || (e == null ? void 0 : e.role) === "text";
-  }
-  _normalizeTextBox(e) {
-    var i;
-    const t = (i = e == null ? void 0 : e.text) != null && i.box && typeof e.text.box == "object" ? e.text.box : {};
-    return {
-      x: this._clampNumber(t.x, 0, 1, 0.2),
-      y: this._clampNumber(t.y, 0, 1, 0.2),
-      width: this._clampNumber(t.width, 0.05, 1, 0.6),
-      height: this._clampNumber(t.height, 0.05, 1, 0.18)
-    };
-  }
-  _clampNumber(e, t, i, s) {
-    const r = Number(e);
-    return Number.isFinite(r) ? Math.max(t, Math.min(i, r)) : s;
-  }
-  _supportedTextFontFamily(e) {
-    const t = ["Inter", "Arial", "Helvetica", "Georgia", "Times New Roman", "Courier New", "Verdana"], i = typeof e == "string" ? e.trim() : "";
-    return t.includes(i) ? i : "Inter";
-  }
-  _supportedTextColor(e, t = "#000000") {
-    return typeof e == "string" && /^#[0-9a-f]{6}$/i.test(e) ? e : t;
-  }
-  _textBlendMode(e) {
-    const t = e == null ? void 0 : e.blendMode;
-    return Re.includes(t) ? t : "normal";
-  }
-  _textContentForLayer(e) {
-    var i;
-    const t = (i = e == null ? void 0 : e.text) == null ? void 0 : i.content;
-    return t == null ? "" : String(t);
-  }
-  _textStyleForLayer(e, t = 1, i = 1, s = {}) {
-    var m;
-    const r = (m = e == null ? void 0 : e.text) != null && m.style && typeof e.text.style == "object" ? e.text.style : {}, o = this._textEffectsForLayer(e), n = this._clampNumber(r.fontSize, 8, 400, 64), a = this._clampNumber(r.lineHeight, 0.8, 3, 1.2), l = this._clampNumber(r.letterSpacing, -100, 100, 0), h = this._normalizeTextFontWeight(r.fontWeight), c = ["normal", "italic"].includes(r.fontStyle) ? r.fontStyle : "normal", p = ["left", "center", "right"].includes(r.align) ? r.align : "center", u = s.fill || (typeof r.fill == "string" && /^#[0-9a-f]{6}$/i.test(r.fill) ? r.fill : "#ffffff"), f = {
-      fontFamily: this._supportedTextFontFamily(r.fontFamily),
-      fontSize: n * t,
-      fontWeight: h,
-      fontStyle: c,
-      fill: u,
-      align: p,
-      lineHeight: n * a * t,
-      letterSpacing: l * t,
-      wordWrap: !0,
-      wordWrapWidth: Math.max(1, i),
-      breakWords: !0
-    };
-    return s.stroke !== !1 && o.stroke.enabled && o.stroke.width > 0 && (f.stroke = {
-      color: o.stroke.color,
-      width: o.stroke.width * t
-    }), f;
-  }
-  _normalizeTextFontWeight(e) {
-    if (e === "normal") return 400;
-    if (e === "bold") return 700;
-    const t = Number(e);
-    return !Number.isFinite(t) || t < 100 || t > 900 || t % 100 !== 0 ? 700 : t;
-  }
-  _textEffectsForLayer(e) {
-    var n;
-    const t = (n = e == null ? void 0 : e.text) != null && n.effects && typeof e.text.effects == "object" ? e.text.effects : {}, i = t.stroke && typeof t.stroke == "object" ? t.stroke : {}, s = t.shadow && typeof t.shadow == "object" ? t.shadow : {}, r = t.glow && typeof t.glow == "object" ? t.glow : {}, o = t.backdrop && typeof t.backdrop == "object" ? t.backdrop : {};
-    return {
-      stroke: {
-        enabled: i.enabled === !0,
-        color: this._supportedTextColor(i.color, E.stroke.color),
-        width: this._clampNumber(i.width, 0, 80, E.stroke.width)
-      },
-      shadow: {
-        enabled: s.enabled === !0,
-        color: this._supportedTextColor(s.color, E.shadow.color),
-        alpha: this._clampNumber(s.alpha, 0, 1, E.shadow.alpha),
-        blur: this._clampNumber(s.blur, 0, 120, E.shadow.blur),
-        distance: this._clampNumber(s.distance, 0, 200, E.shadow.distance),
-        angle: this._normalizeDegrees(s.angle ?? E.shadow.angle)
-      },
-      glow: {
-        enabled: r.enabled === !0,
-        color: this._supportedTextColor(r.color, E.glow.color),
-        alpha: this._clampNumber(r.alpha, 0, 1, E.glow.alpha),
-        blur: this._clampNumber(r.blur, 0, 120, E.glow.blur)
-      },
-      backdrop: {
-        enabled: o.enabled === !0,
-        color: this._supportedTextColor(o.color, E.backdrop.color),
-        opacity: this._clampNumber(o.opacity, 0, 1, E.backdrop.opacity),
-        padding: this._clampNumber(o.padding, 0, 200, E.backdrop.padding),
-        radius: this._clampNumber(o.radius, 0, 200, E.backdrop.radius),
-        blur: this._clampNumber(o.blur, 0, 80, E.backdrop.blur)
-      }
-    };
-  }
-  _createTextBlurFilter(e, t) {
-    if (t <= 0 || typeof (e == null ? void 0 : e.BlurFilter) != "function") return null;
-    try {
-      let i;
-      try {
-        i = new e.BlurFilter({ strength: t, quality: 4 });
-      } catch {
-        i = new e.BlurFilter(t);
-      }
-      return typeof i.blur == "number" && (i.blur = t), typeof i.strength == "number" && (i.strength = t), i.padding = Math.max(Number(i.padding) || 0, Math.ceil(t * 2)), i;
-    } catch {
-      return null;
-    }
-  }
-  _textEffectPadding(e, t) {
-    const i = e.stroke.enabled ? e.stroke.width * t : 0, s = e.shadow.enabled ? (e.shadow.distance + e.shadow.blur * 2) * t : 0, r = e.glow.enabled ? e.glow.blur * 2 * t : 0, o = e.backdrop.enabled ? (e.backdrop.padding + e.backdrop.blur * 2) * t : 0;
-    return Math.ceil(Math.max(i, s, r, o, 0));
-  }
-  _createTextDisplayObjectForLayer(e, t) {
-    if (!this._isTextLayer(t) || typeof (e == null ? void 0 : e.Text) != "function") return null;
-    const i = this._createTextPrimitive(e, t);
-    if (!i) return null;
-    if (typeof e.Container != "function" || typeof e.Graphics != "function")
-      return i;
-    const s = new e.Container(), r = new e.Graphics(), o = new e.Graphics(), n = new e.Graphics(), a = this._createTextPrimitive(e, t), l = this._createTextPrimitive(e, t);
-    return s.__isTextLayerContainer = !0, s.__textObject = i, s.__textMask = r, s.__textEffectMask = o, s.__textBackdrop = n, s.__textShadow = a, s.__textGlow = l, n.visible = !1, a && (a.visible = !1), l && (l.visible = !1), i.mask = r, s.addChild(n), a && s.addChild(a), l && s.addChild(l), s.addChild(i), s.addChild(o), s.addChild(r), s;
-  }
-  _createTextPrimitive(e, t) {
-    try {
-      return new e.Text({
-        text: this._textContentForLayer(t),
-        style: this._textStyleForLayer(t)
-      });
-    } catch {
-      try {
-        return new e.Text(this._textContentForLayer(t), this._textStyleForLayer(t));
-      } catch {
-        return null;
-      }
-    }
-  }
-  async _createSubjectDisplayObjectForLayer(e, t) {
-    const i = this._sourceUrlForLayerSource(t == null ? void 0 : t.source);
-    return !i || i === this._loadedTextureUrl ? null : this._createImageDisplayObjectForLayer(e, t);
-  }
-  async _createImageDisplayObjectForLayer(e, t) {
-    var r, o;
-    if ((t == null ? void 0 : t.type) !== "image") return null;
-    const i = await this._textureForLayerSource(e, t.source);
-    if (!i || typeof e.Sprite != "function") return null;
-    const s = new e.Sprite(i);
-    return s.__sourceWidth = Number((r = t.source) == null ? void 0 : r.originalWidth) || i.width || 1, s.__sourceHeight = Number((o = t.source) == null ? void 0 : o.originalHeight) || i.height || 1, this._applyLayerEffects(e, s, t), this._applyLayerFilterInstances(s, t), s;
-  }
-  _backgroundFillForLayer(e) {
-    const t = e == null ? void 0 : e.fill;
-    if (t && typeof t == "object") return t;
-    const i = e == null ? void 0 : e.source;
-    return (i == null ? void 0 : i.kind) === "color" && typeof i.color == "string" ? { kind: "color", value: i.color } : null;
-  }
-  _backgroundColorForLayer(e) {
-    const t = e == null ? void 0 : e.source;
-    if ((t == null ? void 0 : t.kind) === "color" && typeof t.color == "string")
-      return t.color;
-    const i = e == null ? void 0 : e.fill;
-    return (i == null ? void 0 : i.kind) === "color" && typeof i.value == "string" ? i.value : null;
-  }
-  _sourceUrlForLayerSource(e) {
-    if (!e || typeof e != "object") return null;
-    for (const t of ["previewUrl", "sourceUrl", "url"]) {
-      const i = e[t];
-      if (typeof i == "string" && i.trim() !== "")
-        return i;
-    }
-    return null;
-  }
-  async _textureForLayerSource(e, t) {
-    const i = this._sourceUrlForLayerSource(t);
-    if (!i) return null;
-    const s = await this._loadImageElement(i);
-    return s ? e.Texture.from(s) : null;
-  }
-  _createBackgroundSprite(e, t, i = "cover") {
-    if (i === "tile" && typeof e.TilingSprite == "function")
-      try {
-        const s = new e.TilingSprite({ texture: t, width: 1, height: 1 });
-        return s.__isTilingBackground = !0, s;
-      } catch {
-        try {
-          const r = new e.TilingSprite(t, 1, 1);
-          return r.__isTilingBackground = !0, r;
-        } catch {
-        }
-      }
-    return new e.Sprite(t);
-  }
-  _createGradientTexture(e, t, i, s) {
-    var l;
-    if (typeof document > "u" || !((l = e == null ? void 0 : e.Texture) != null && l.from)) return null;
-    const r = document.createElement("canvas");
-    r.width = Math.max(1, Math.round(i)), r.height = Math.max(1, Math.round(s));
-    const o = r.getContext("2d");
-    if (!o) return null;
-    const n = Array.isArray(t == null ? void 0 : t.stops) && t.stops.length > 0 ? t.stops : [
-      { offset: 0, color: "#111827" },
-      { offset: 1, color: "#f59e0b" }
-    ];
-    let a;
-    if ((t == null ? void 0 : t.gradientType) === "radial") {
-      const h = Math.max(r.width, r.height) / 2;
-      a = o.createRadialGradient(
-        r.width / 2,
-        r.height / 2,
-        0,
-        r.width / 2,
-        r.height / 2,
-        h
-      );
-    } else {
-      const h = (Number(t == null ? void 0 : t.angle) || 0) * Math.PI / 180, c = r.width / 2, p = r.height / 2, u = Math.sqrt(r.width ** 2 + r.height ** 2) / 2, f = Math.cos(h) * u, m = Math.sin(h) * u;
-      a = o.createLinearGradient(c - f, p - m, c + f, p + m);
-    }
-    for (const h of n) {
-      if (!h || typeof h.color != "string") continue;
-      const c = Number.isFinite(Number(h.offset)) ? Math.max(0, Math.min(1, Number(h.offset))) : 0;
-      a.addColorStop(c, h.color);
-    }
-    return o.fillStyle = a, o.fillRect(0, 0, r.width, r.height), e.Texture.from(r);
-  }
-  _backgroundBlurAmount(e) {
-    var r;
-    const i = (Array.isArray(e == null ? void 0 : e.effects) ? e.effects : []).find((o) => (o == null ? void 0 : o.id) === "background-blur" || (o == null ? void 0 : o.type) === "blur"), s = Number((r = i == null ? void 0 : i.params) == null ? void 0 : r.amount);
-    return Number.isFinite(s) ? Math.max(0, s) : 0;
-  }
-  _applyLayerEffects(e, t, i) {
-    const s = this._backgroundBlurAmount(i);
-    if (!(s <= 0 || typeof (e == null ? void 0 : e.BlurFilter) != "function"))
-      try {
-        let r;
-        try {
-          r = new e.BlurFilter({ strength: s, quality: 4 });
-        } catch {
-          r = new e.BlurFilter(s);
-        }
-        typeof r.blur == "number" && (r.blur = s), typeof r.strength == "number" && (r.strength = s), r.padding = Math.max(Number(r.padding) || 0, Math.ceil(s * 2)), t.filters = Array.isArray(t.filters) ? [...t.filters, r] : [r];
-      } catch {
-      }
-  }
-  _syncLayerDisplayObjects() {
-    if (this.sprite)
-      for (const { layer: e, displayObject: t } of this._layerDisplayObjects.values())
-        this._syncLayerDisplayObject(e, t);
-  }
-  _syncLayerDisplayObject(e, t) {
-    if (!this.sprite || !t) return;
-    if (this._isTextLayer(e)) {
-      this._fitTextDisplayObjectToRect(t, e, {
-        x: this.sprite.x,
-        y: this.sprite.y,
-        width: this.sprite.width,
-        height: this.sprite.height
-      });
-      return;
-    }
-    const i = this._backgroundColorForLayer(e);
-    if (i && typeof t.clear == "function") {
-      t.clear(), t.rect(this.sprite.x, this.sprite.y, this.sprite.width, this.sprite.height).fill(i);
-      return;
-    }
-    this._fitDisplayObjectToRect(t, e, {
-      x: this.sprite.x,
-      y: this.sprite.y,
-      width: this.sprite.width,
-      height: this.sprite.height
-    });
-  }
-  _fillTextEffectGraphics(e, t, i = 1) {
-    if (!(!e || typeof e.fill != "function"))
-      try {
-        e.fill({ color: t, alpha: i });
-      } catch {
-        e.fill(t), e.alpha = i;
-      }
-  }
-  _syncTextEffectPrimitive(e, t, i, s, r, o, n, a) {
-    if (!t) return;
-    const l = s[r];
-    if (t.visible = (l == null ? void 0 : l.enabled) === !0, t.filters = null, t.mask = t.visible ? a : null, !!t.visible) {
-      if (t.text = this._textContentForLayer(i), t.rotation = 0, r === "shadow") {
-        const h = l.angle * Math.PI / 180;
-        t.x = Math.cos(h) * l.distance * o, t.y = Math.sin(h) * l.distance * o, t.alpha = l.alpha, t.style = this._textStyleForLayer(i, o, n, {
-          fill: l.color,
-          stroke: !1
-        });
-        const c = this._createTextBlurFilter(e, l.blur * o);
-        t.filters = c ? [c] : null;
-        return;
-      }
-      if (r === "glow") {
-        t.x = 0, t.y = 0, t.alpha = l.alpha, t.style = this._textStyleForLayer(i, o, n, {
-          fill: l.color,
-          stroke: !1
-        });
-        const h = this._createTextBlurFilter(e, l.blur * o);
-        t.filters = h ? [h] : null;
-      }
-    }
-  }
-  _syncTextBackdrop(e, t, i, s, r, o, n) {
-    if (!t) return;
-    const a = i.backdrop;
-    if (t.visible = a.enabled === !0, t.filters = null, t.mask = t.visible ? n : null, t.alpha = 1, typeof t.clear == "function" && t.clear(), !t.visible) return;
-    const l = a.padding * s, h = a.radius * s, c = -l, p = -l, u = r + l * 2, f = o + l * 2;
-    h > 0 && typeof t.roundRect == "function" ? t.roundRect(c, p, u, f, h) : typeof t.rect == "function" && t.rect(c, p, u, f), this._fillTextEffectGraphics(t, a.color, a.opacity);
-    const m = this._createTextBlurFilter(e, a.blur * s);
-    t.filters = m ? [m] : null;
-  }
-  _fitTextDisplayObjectToRect(e, t, i) {
-    var m, b;
-    const s = this._normalizeTextBox(t), r = i.x + s.x * i.width, o = i.y + s.y * i.height, n = s.width * i.width, a = s.height * i.height, l = Number((m = this.originalTexture) == null ? void 0 : m.width) || i.width, h = l > 0 ? i.width / l : 1, c = this._textEffectsForLayer(t);
-    e.x = r, e.y = o, e.rotation = this._normalizeDegrees(Number((b = t == null ? void 0 : t.transform) == null ? void 0 : b.rotation) || 0) * Math.PI / 180, e.blendMode = this._textBlendMode(t), e.__textBox = s, e.__textLayout = { x: r, y: o, width: n, height: a, scale: h };
-    const p = e.__textObject || e, u = e.__textMask || null, f = e.__textEffectMask || null;
-    if (p.text = this._textContentForLayer(t), p.style = this._textStyleForLayer(t, h, n), p.x = 0, p.y = 0, p.rotation = 0, u && typeof u.clear == "function" && typeof u.rect == "function" && typeof u.fill == "function" && (u.clear(), u.rect(0, 0, n, a).fill(16777215), p.mask = u), f && typeof f.clear == "function" && typeof f.rect == "function" && typeof f.fill == "function") {
-      const k = this._textEffectPadding(c, h);
-      f.clear(), f.rect(-k, -k, n + k * 2, a + k * 2).fill(16777215);
-    }
-    this._syncTextBackdrop(window.PIXI, e.__textBackdrop, c, h, n, a, f), this._syncTextEffectPrimitive(window.PIXI, e.__textShadow, t, c, "shadow", h, n, f), this._syncTextEffectPrimitive(window.PIXI, e.__textGlow, t, c, "glow", h, n, f);
-  }
-  _fitDisplayObjectToRect(e, t, i) {
-    var c, p, u, f, m, b, k, x;
-    const s = this._backgroundFillForLayer(t), r = (s == null ? void 0 : s.fit) || "cover";
-    if (e.__isTilingBackground) {
-      e.x = i.x, e.y = i.y, e.width = i.width, e.height = i.height, (p = (c = e.tilePosition) == null ? void 0 : c.set) == null || p.call(c, 0, 0), (f = (u = e.tileScale) == null ? void 0 : u.set) == null || f.call(u, 1, 1);
-      return;
-    }
-    if (r === "stretch" || (s == null ? void 0 : s.kind) === "gradient" || (s == null ? void 0 : s.kind) === "color") {
-      e.x = i.x, e.y = i.y, e.width = i.width, e.height = i.height;
-      return;
-    }
-    const o = Number(e.__sourceWidth || ((m = s == null ? void 0 : s.source) == null ? void 0 : m.originalWidth) || ((b = e.texture) == null ? void 0 : b.width) || i.width), n = Number(e.__sourceHeight || ((k = s == null ? void 0 : s.source) == null ? void 0 : k.originalHeight) || ((x = e.texture) == null ? void 0 : x.height) || i.height);
-    if (!Number.isFinite(o) || !Number.isFinite(n) || o <= 0 || n <= 0) {
-      e.x = i.x, e.y = i.y, e.width = i.width, e.height = i.height;
-      return;
-    }
-    const a = r === "contain" ? Math.min(i.width / o, i.height / n) : Math.max(i.width / o, i.height / n), l = o * a, h = n * a;
-    e.x = i.x + (i.width - l) / 2, e.y = i.y + (i.height - h) / 2, e.width = l, e.height = h;
-  }
-  _destroyLayerDisplayObjects() {
-    var e, t, i, s, r;
-    if ((e = this._layerDisplayObjects) != null && e.size) {
-      for (const { displayObject: o } of this._layerDisplayObjects.values()) {
-        try {
-          (s = (i = (t = this.app) == null ? void 0 : t.stage) == null ? void 0 : i.removeChild) == null || s.call(i, o);
-        } catch {
-        }
-        const n = (o == null ? void 0 : o.__ownsTexture) === !0;
-        (r = o == null ? void 0 : o.destroy) == null || r.call(o, { children: !0, texture: n, textureSource: n });
-      }
-      this._layerDisplayObjects.clear(), this._renderableLayerIds = [];
-    }
-  }
-  _destroyTransientDisplayObject(e) {
-    var i, s, r, o;
-    if (!e) return;
-    try {
-      (r = (s = (i = this.app) == null ? void 0 : i.stage) == null ? void 0 : s.removeChild) == null || r.call(s, e);
-    } catch {
-    }
-    const t = (e == null ? void 0 : e.__ownsTexture) === !0;
-    (o = e == null ? void 0 : e.destroy) == null || o.call(e, { children: !0, texture: t, textureSource: t });
-  }
-  /**
-   * Normalize degrees to the 0..360 range.
-   * @param {number} degrees
-   * @returns {number}
-   */
-  _normalizeDegrees(e) {
-    if (!Number.isFinite(e)) return 0;
-    const t = e % 360;
-    return t < 0 ? t + 360 : t;
-  }
-  /**
-   * Calculate the axis-aligned bounds for a rotated rectangle.
-   * @param {number} width
-   * @param {number} height
-   * @param {number} degrees
-   * @returns {{ width: number, height: number }}
-   */
-  getRotatedBounds(e, t, i) {
-    const s = this._normalizeDegrees(i);
-    if (s === 0)
-      return {
-        width: Math.max(1, Math.round(e)),
-        height: Math.max(1, Math.round(t))
-      };
-    const r = s * Math.PI / 180, o = Math.abs(Math.cos(r)), n = Math.abs(Math.sin(r)), a = o < 1e-10 ? 0 : o, l = n < 1e-10 ? 0 : n;
-    return {
-      width: Math.max(1, Math.ceil(e * a + t * l)),
-      height: Math.max(1, Math.ceil(e * l + t * a))
-    };
-  }
-  /**
-   * Permanently rotate the working texture. This keeps crop math simple:
-   * after rotation, sprite coordinates and texture dimensions both describe
-   * the visible image exactly.
-   *
-   * @param {number} degrees Clockwise degrees to add to the working texture.
-   * @returns {boolean}
-   */
-  rotateBy(e) {
-    var m, b, k;
-    const t = this._normalizeDegrees(e);
-    if (t === 0) return !0;
-    if (!((m = this.app) != null && m.renderer) || !this.originalTexture || !this.sprite)
-      return !1;
-    const i = window.PIXI, s = Math.round(this.originalTexture.width), r = Math.round(this.originalTexture.height);
-    if (s <= 0 || r <= 0) return !1;
-    const { width: o, height: n } = this.getRotatedBounds(s, r, t), a = t * Math.PI / 180, l = new i.Container(), h = new i.Sprite(this.originalTexture);
-    (k = (b = h.anchor) == null ? void 0 : b.set) == null || k.call(b, 0.5), h.x = o / 2, h.y = n / 2, h.rotation = a, l.addChild(h);
-    const c = i.RenderTexture.create({ width: o, height: n, resolution: 1 });
-    try {
-      this.app.renderer.render({
-        container: l,
-        target: c,
-        clear: !0,
-        clearColor: [0, 0, 0, 0]
-      });
-    } catch {
-      return c.destroy(!0), !1;
-    } finally {
-      l.removeChildren(), h.destroy({ children: !1, texture: !1, textureSource: !1 }), l.destroy({ children: !1 });
-    }
-    const p = this.originalTexture, u = Array.isArray(this.sprite.filters) ? [...this.sprite.filters] : null;
-    p && p !== this.baseTexture && p.destroy(!0), this.originalTexture = c, this._lastExportDimensions = null, this.app.stage.removeChild(this.sprite), this.sprite.destroy({ children: !1, texture: !1, textureSource: !1 });
-    const f = new i.Sprite(c);
-    return u != null && u.length && (f.filters = u), this.app.stage.addChild(f), this.sprite = f, this.fitScale = this.getFitScaleFor(c), this.zoom = 1, this.applyViewTransform({ keepCenter: !1 }), this.render(), this.emit("textureRotated", { width: o, height: n, degrees: t }), !0;
-  }
-  /**
-   * Export the current image with filters applied.
-   *
-   * @param {string} format - 'png' or 'jpeg'
-   * @param {number} quality - Quality for jpeg (0-1)
-   * @param {number} maxEdge - Maximum edge size in pixels (0 for original)
-   * @param {boolean} dontUpscale - Don't upscale smaller images
-   * @param {number} [maxPixels=0] - Max total pixel count (width*height). 0 disables.
-   *   Backend API often limits payload size (blowglass caps at 8M pixels); set this
-   *   to keep the export under that cap while preserving aspect ratio.
-   * @returns {string|null} Data URL
-   */
-  exportImage(e = "png", t = 0.92, i = 0, s = !0, r = 0) {
-    var S;
-    if (!((S = this.app) != null && S.renderer) || !this.originalTexture || !this.sprite)
-      return null;
-    const o = window.PIXI, n = Math.round(this.originalTexture.width), a = Math.round(this.originalTexture.height);
-    if (n <= 0 || a <= 0)
-      return null;
-    const l = this.sprite.width, h = this.sprite.height;
-    if (l <= 0 || h <= 0)
-      return null;
-    const c = l / n, p = c > 0 ? 1 / c : 1, u = this._layerDocument, f = u && Array.isArray(u.layers), m = [];
-    if (!f && Array.isArray(this.sprite.filters)) {
-      for (const y of this.sprite.filters)
-        if (y)
-          if (typeof y.createExportFilter == "function") {
-            const w = y.createExportFilter({ previewToNativeScale: p });
-            w && m.push(w);
-          } else
-            m.push(y);
-    }
-    let b = 0;
-    for (const y of m) {
-      const w = typeof y.getExportPadding == "function" ? Number(y.getExportPadding()) || 0 : typeof y._exportPadding == "number" ? y._exportPadding : typeof y.padding == "number" ? y.padding : 0;
-      w > 0 && (b += w);
-    }
-    const k = Math.max(Math.ceil(b), 64), x = (y) => {
-      var Q, X, L, ee;
-      const w = Math.ceil(n + 2 * y), R = Math.ceil(a + 2 * y), M = new o.Container(), N = [], z = (_ = null) => {
-        const v = new o.Sprite(this.originalTexture);
-        v.x = y, v.y = y, v.scale.set(1, 1), v.alpha = _ ? this._layerOpacity(_) : 1, _ && this._applyLayerFilterInstances(v, _, {
-          forExport: !0,
-          previewToNativeScale: p,
-          sourceWidth: n,
-          sourceHeight: a
-        }), m.length > 0 && (v.filters = m, v.filterArea = new o.Rectangle(0, 0, n, a)), M.addChild(v), N.push(v);
-      }, F = (_) => {
-        var Y, P, U;
-        const v = (Y = this._layerDisplayObjects.get(_.id)) == null ? void 0 : Y.displayObject, H = this._isSubjectLayer(_), I = (v == null ? void 0 : v.texture) || (H ? this.originalTexture : null);
-        if (!I || typeof o.Sprite != "function") return !1;
-        const C = new o.Sprite(I), te = (v == null ? void 0 : v.__sourceWidth) || (H ? null : (P = _.source) == null ? void 0 : P.originalWidth) || I.width || n, ie = (v == null ? void 0 : v.__sourceHeight) || (H ? null : (U = _.source) == null ? void 0 : U.originalHeight) || I.height || a;
-        return C.__sourceWidth = Number(te), C.__sourceHeight = Number(ie), this._fitDisplayObjectToRect(C, _, { x: y, y, width: n, height: a }), C.alpha = this._layerOpacity(_), !f && H && m.length > 0 && (C.filters = m, C.filterArea = new o.Rectangle(0, 0, n, a)), this._applyLayerEffects(o, C, _), this._applyLayerFilterInstances(C, _, {
-          forExport: !0,
-          previewToNativeScale: p,
-          sourceWidth: n,
-          sourceHeight: a
-        }), M.addChild(C), N.push(C), !0;
-      }, T = (_) => {
-        var te, ie, Y;
-        const v = this._backgroundFillForLayer(_), H = this._backgroundColorForLayer(_), I = { x: y, y, width: n, height: a };
-        let C = null;
-        if (H && typeof o.Graphics == "function")
-          C = new o.Graphics(), C.rect(y, y, n, a).fill(H);
-        else if ((v == null ? void 0 : v.kind) === "gradient" && typeof o.Sprite == "function") {
-          const P = this._createGradientTexture(o, v, n, a);
-          if (!P) return !1;
-          C = new o.Sprite(P), C.__ownsTexture = !0, C.__sourceWidth = n, C.__sourceHeight = a, this._fitDisplayObjectToRect(C, _, I);
-        } else if ((v == null ? void 0 : v.kind) === "media") {
-          const P = (te = this._layerDisplayObjects.get(_.id)) == null ? void 0 : te.displayObject, U = P == null ? void 0 : P.texture;
-          if (!U) return !1;
-          C = this._createBackgroundSprite(o, U, v.fit), C.__sourceWidth = Number(((ie = v.source) == null ? void 0 : ie.originalWidth) || P.__sourceWidth || U.width || 1), C.__sourceHeight = Number(((Y = v.source) == null ? void 0 : Y.originalHeight) || P.__sourceHeight || U.height || 1), this._fitDisplayObjectToRect(C, _, I);
-        }
-        return C ? (C.alpha = this._layerOpacity(_), this._applyLayerEffects(o, C, _), this._applyLayerFilterInstances(C, _, {
-          forExport: !0,
-          previewToNativeScale: p,
-          sourceWidth: n,
-          sourceHeight: a
-        }), M.addChild(C), N.push(C), !0) : !1;
-      }, O = (_) => {
-        const v = this._createTextDisplayObjectForLayer(o, _);
-        return v ? (this._fitTextDisplayObjectToRect(v, _, { x: y, y, width: n, height: a }), v.alpha = this._layerOpacity(_), M.addChild(v), N.push(v), !0) : !1;
-      }, W = u, G = f;
-      if (G) {
-        for (const _ of W.layers)
-          if (!(!_ || _.visible === !1)) {
-            if (this._isTextLayer(_)) {
-              O(_);
-              continue;
-            }
-            if (_.type === "image") {
-              !F(_) && this._isSubjectLayer(_) && z(_);
-              continue;
-            }
-            if (this._isSubjectLayer(_)) {
-              F(_) || z(_);
-              continue;
-            }
-            T(_);
-          }
-      } else
-        z();
-      !G && ((Q = M.children) == null ? void 0 : Q.length) === 0 && z();
-      const K = o.RenderTexture.create({
-        width: w,
-        height: R,
-        resolution: 1
-      }), oe = ((X = M.children) == null ? void 0 : X.length) ?? 0;
-      try {
-        this.app.renderer.render({
-          container: M,
-          target: K,
-          clear: !0,
-          clearColor: [0, 0, 0, 0]
-        });
-        const _ = (ee = (L = this.app.renderer.extract) == null ? void 0 : L.canvas) == null ? void 0 : ee.call(L, K);
-        return _ ? { canvas: _, width: w, height: R, margin: y, childCount: oe } : null;
-      } finally {
-        for (const _ of N)
-          _.filters = null;
-        M.removeChildren();
-        for (const _ of N) {
-          const v = (_ == null ? void 0 : _.__ownsTexture) === !0;
-          _.destroy({ children: !1, texture: v, textureSource: v });
-        }
-        M.destroy({ children: !1 }), K.destroy(!0);
-      }
-    }, B = (y, w, R) => {
-      const M = typeof y.getContext == "function" ? y.getContext("2d") : null;
-      if (!M) return null;
-      let N;
-      try {
-        N = M.getImageData(0, 0, w, R).data;
-      } catch {
-        return null;
-      }
-      const z = 1;
-      let F = w, T = R, O = -1, W = -1;
-      const G = 4, K = w * G;
-      for (let L = 0; L < R; L++) {
-        const ee = L * K;
-        for (let _ = 0; _ < w; _++)
-          N[ee + _ * G + 3] >= z && (_ < F && (F = _), _ > O && (O = _), L < T && (T = L), L > W && (W = L));
-      }
-      if (O < 0) return null;
-      const oe = O - F + 1, Q = W - T + 1, X = F === 0 || T === 0 || O === w - 1 || W === R - 1;
-      return { x: F, y: T, width: oe, height: Q, touchesEdge: X };
-    };
-    let A = null;
-    try {
-      let y = x(k);
-      if (!y)
-        return null;
-      let w = B(y.canvas, y.width, y.height);
-      if (!w)
-        if (f && y.childCount === 0)
-          w = {
-            x: y.margin,
-            y: y.margin,
-            width: n,
-            height: a,
-            touchesEdge: !1
-          };
-        else
-          return null;
-      if (w.touchesEdge && k < n && k < a) {
-        const F = Math.max(k * 4, 256), T = x(F);
-        if (T) {
-          const O = B(T.canvas, T.width, T.height);
-          O && !O.touchesEdge ? (y = T, w = O) : (y = T, w = O ?? w);
-        }
-      }
-      let R = w.width, M = w.height;
-      if (i > 0) {
-        const F = Math.max(R, M);
-        let T = i / F;
-        s && (T = Math.min(1, T)), R = Math.max(1, Math.round(R * T)), M = Math.max(1, Math.round(M * T));
-      }
-      if (r > 0 && R * M > r) {
-        const F = Math.sqrt(r / (R * M));
-        R = Math.max(1, Math.floor(R * F)), M = Math.max(1, Math.floor(M * F));
-      }
-      const N = document.createElement("canvas");
-      N.width = R, N.height = M;
-      const z = N.getContext("2d");
-      return z ? (z.drawImage(
-        y.canvas,
-        w.x,
-        w.y,
-        w.width,
-        w.height,
-        0,
-        0,
-        R,
-        M
-      ), A = N.toDataURL(`image/${e}`, t), this._lastExportDimensions = { width: R, height: M }, A || null) : null;
-    } catch {
-      return null;
-    }
-  }
-  /**
-   * Get the actual export dimensions at the current filter state.
-   *
-   * When an export has been performed, returns the exact trimmed dimensions
-   * from that export. Otherwise falls back to source texture size plus a
-   * rough filter-padding estimate — the real dimensions are only known for
-   * certain after exportImage() runs the bbox scan.
-   *
-   * @returns {{ width: number, height: number }}
-   */
-  getExportDimensions() {
-    var o;
-    if (this._lastExportDimensions)
-      return { ...this._lastExportDimensions };
-    const e = this.originalTexture, t = Math.round((e == null ? void 0 : e.width) || 0), i = Math.round((e == null ? void 0 : e.height) || 0);
-    let s = 0;
-    const r = (o = this.sprite) == null ? void 0 : o.filters;
-    if (Array.isArray(r))
-      for (const n of r) {
-        if (!n) continue;
-        const a = typeof n._exportPadding == "number" ? n._exportPadding : typeof n.padding == "number" ? n.padding : 0;
-        a > s && (s = a);
-      }
-    return {
-      width: t + 2 * s,
-      height: i + 2 * s
-    };
-  }
-  /**
-   * Export the current image as a Blob with correct dimensions.
-   * @param {string} format - 'png' or 'jpeg'
-   * @param {number} quality - Quality for jpeg (0-1)
-   * @param {{ maxPixels?: number, maxEdge?: number, dontUpscale?: boolean }} [options]
-   * @returns {Promise<{ blob: Blob, width: number, height: number } | null>}
-   */
-  async exportBlob(e = "png", t = 0.92, i = {}) {
-    const s = this.exportImage(
-      e,
-      t,
-      i.maxEdge ?? 0,
-      i.dontUpscale !== !1,
-      i.maxPixels ?? 0
-    );
-    if (!s) return null;
-    const o = await (await fetch(s)).blob(), n = this.getExportDimensions();
-    return { blob: o, width: n.width, height: n.height };
-  }
-  /**
-   * Resize renderer to container
-   * @param {HTMLElement} container
-   */
-  resizeTo(e) {
-    var s;
-    if (!((s = this.app) != null && s.renderer) || !e) return;
-    const t = e.clientWidth, i = e.clientHeight;
-    if (!(t === Math.round(this.app.screen.width) && i === Math.round(this.app.screen.height)) && !(t <= 0 || i <= 0) && (this.app.renderer.resize(t, i), this.originalTexture && this.sprite)) {
-      const r = {
-        x: this.sprite.x + this.sprite.width / 2,
-        y: this.sprite.y + this.sprite.height / 2
-      };
-      this.fitScale = this.getFitScaleFor(this.originalTexture), this.applyViewTransform({ center: r });
-    }
-  }
-  /**
-   * Set background color
-   * @param {number} color - Hex color
-   */
-  setBackgroundColor(e) {
-    var t, i;
-    (i = (t = this.app) == null ? void 0 : t.renderer) != null && i.background && (this.app.renderer.background.color = e);
-  }
-  /**
-   * Load an image URL into an HTMLImageElement.
-   * Handles blob:, data:, and http(s): URLs.
-   * @param {string} url
-   * @returns {Promise<HTMLImageElement|null>}
-   */
-  _loadImageElement(e) {
-    return new Promise((t) => {
-      const i = new Image();
-      typeof e == "string" && /^https?:\/\//.test(e) && (i.crossOrigin = "anonymous"), i.onload = () => t(i), i.onerror = () => {
-        t(null);
-      }, i.src = e;
-    });
-  }
-  /**
-   * Clean up and destroy
-   */
-  destroy() {
-    if (this._destroyed = !0, this._mountToken += 1, this._mountPromise = null, this._destroyLayerDisplayObjects(), this.app) {
-      try {
-        this.app.destroy(!0, { children: !0, texture: !0 });
-      } catch {
-      }
-      this.app = null;
-    }
-    this.sprite = null, this.originalTexture = null, this.baseTexture = null, this._container = null, this.removeAllListeners();
-  }
-}
-const _e = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="48" d="M328 112L184 256l144 144"/></svg>', me = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="48" d="M184 112l144 144-144 144"/></svg>', gt = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="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>', _t = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M221.09 64a157.09 157.09 0 10157.09 157.09A157.1 157.1 0 00221.09 64z"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M338.29 338.29L448 448M184 221h74"/></svg>', mt = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M432 320v112H320M80 192V80h112M320 80h112v112M192 432H80V320"/></svg>', 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="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>', Be = '<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>', 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="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>', Le = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M176 112l80-80 80 80M255.98 32l.02 448M176 400l80 80 80-80M400 176l80 80-80 80M112 176l-80 80 80 80M32 256h448"/></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="M452.37 59.63h0a40.49 40.49 0 00-57.26 0L184 294.74c23.08 4.7 46.12 27.29 49.26 49.26l219.11-227.11a40.49 40.49 0 000-57.26z"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M138 336c-29.88 0-54 24.5-54 54.86 0 23.95-20.67 36.57-34 44.78 15.08 8.08 32.23 12.36 50 12.36 48.49 0 88-38.89 88-88 0-30.36-24.12-54-50-54z"/></svg>', je = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="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>', 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="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>', 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="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>', 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="M368 368L144 144M368 144L144 368"/></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="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>', 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="M176 112l-64 64 64 64"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M112 176h176a112 112 0 110 224H160"/></svg>', 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="M336 112l64 64-64 64"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M400 176H224a112 112 0 100 224h128"/></svg>', He = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="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>', 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="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>', ce = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M416 128L192 384l-96-96"/></svg>', Ue = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32" d="M48 256l208 112 208-112-208-112L48 256z"/><path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32" d="M48 336l208 112 208-112M48 176L256 64l208 112"/></svg>', bt = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32" d="M48 256s80-144 208-144 208 144 208 144-80 144-208 144S48 256 48 256z"/><circle cx="256" cy="256" r="64" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32"/></svg>', yt = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M432 448L80 64M160 160c-67.2 36.8-112 96-112 96s80 144 208 144c35.8 0 68.4-11.3 96-28.1M224.4 113.8A199.6 199.6 0 01256 112c128 0 208 144 208 144a334.2 334.2 0 01-65.1 78.6"/><path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32" d="M213.3 213.3A64 64 0 10298.7 298.7"/></svg>', vt = '<svg viewBox="0 0 512 512" width="20" height="20"><rect x="96" y="208" width="320" height="240" rx="32" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M160 208v-64a96 96 0 01192 0v64"/></svg>', wt = '<svg viewBox="0 0 512 512" width="20" height="20"><rect x="96" y="208" width="320" height="240" rx="32" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M160 208v-64a96 96 0 01168-63.7"/></svg>', xt = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32" d="M96 352l-32 96 96-32L421.5 154.5a45.3 45.3 0 000-64h0a45.3 45.3 0 00-64 0L96 352z"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M320 128l64 64"/></svg>', Ct = '<svg viewBox="0 0 512 512" width="20" height="20"><rect x="144" y="144" width="288" height="288" rx="32" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32"/><path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32" d="M80 368V112a32 32 0 0132-32h256"/></svg>', 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="M96 112V80h320v32M256 80v352M184 432h144"/></svg>', We = '<svg viewBox="0 0 512 512" width="20" height="20"><rect x="64" y="64" width="384" height="384" rx="48" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32"/></svg>', $e = '<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>', 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="M80 96h64l64 320h64l64-160h96"/></svg>', fe = '<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>', ge = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="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>', qe = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="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>', Ge = '<svg viewBox="0 0 512 512" width="20" height="20"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M344 144c-3.92 52.87-44 96-88 96s-84.15-43.12-88-96c-4-55 35-96 88-96s92 42 88 96z"/><path fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32" d="M256 304c-87 0-175.3 48-191.64 138.6C62.39 453.52 68.57 464 80 464h352c11.44 0 17.62-10.48 15.65-21.4C431.3 352 343 304 256 304z"/></svg>', pe = [
-  {
-    id: "adjust",
-    name: "Adjust",
-    icon: Ae,
-    registryCategories: ["adjust", "advanced"]
-    // adjustment, adjustmentAdvanced, alpha, colorMatrix
-  },
-  {
-    id: "blur",
-    name: "Blur",
-    icon: Ne,
-    registryCategories: ["blur"]
-  },
-  {
-    id: "color",
-    name: "Color",
-    icon: Be,
-    registryCategories: ["color"]
-  },
-  {
-    id: "effects",
-    name: "Effects",
-    icon: Ee,
-    registryCategories: ["effects"]
-  },
-  {
-    id: "distortion",
-    name: "Distortion",
-    icon: Le,
-    registryCategories: ["distortion"]
-  },
-  {
-    id: "light",
-    name: "Light",
-    icon: je,
-    registryCategories: ["light"]
-  },
-  {
-    id: "stylize",
-    name: "Stylize",
-    icon: qe,
-    registryCategories: ["stylize"]
-  },
-  {
-    id: "text",
-    name: "Text",
-    icon: Ve
-  },
-  {
-    id: "background",
-    name: "Background",
-    icon: De
-  },
-  {
-    id: "layers",
-    name: "Layers",
-    icon: Ue
-  },
-  {
-    id: "crop",
-    name: "Crop",
-    icon: be
-  }
-], Ke = Object.fromEntries(
-  pe.filter((g) => Array.isArray(g.registryCategories) && g.registryCategories.length > 0).map((g) => [g.id, g.registryCategories])
-), Ye = Object.fromEntries(
-  pe.filter((g) => Array.isArray(g.registryCategories)).flatMap((g) => g.registryCategories.map((e) => [e, g.id]))
-);
-function Je(g) {
-  return Ke[g] || [g];
-}
-class Qe extends ne {
-  constructor(e, t) {
-    super(), this.state = e, this.renderer = t, this.instances = {}, this._filterRegistry = null;
-  }
-  /**
-   * Set the filter registry (from mediables/filters)
-   * @param {Object} registry - { getFilter, getAllFilters, getFiltersByCategory }
-   */
-  setRegistry(e) {
-    var t, i;
-    this._filterRegistry = e, (i = (t = this.renderer) == null ? void 0 : t.setLayerFilterFactory) == null || i.call(t, (s, r) => this.createFiltersForLayer(s, r));
-  }
-  /**
-   * Get filter definition by ID
-   * @param {string} filterId
-   * @returns {Object|null}
-   */
-  getFilterDef(e) {
-    return this._filterRegistry ? this._filterRegistry.getFilter(e) : null;
-  }
-  /**
-   * Get all filters
-   * @returns {Array}
-   */
-  getAllFilters() {
-    var e;
-    return ((e = this._filterRegistry) == null ? void 0 : e.getAllFilters()) || [];
-  }
-  /**
-   * Get filters by category
-   * Maps UI category names to registry category names
-   * @param {string} category - UI category ID
-   * @returns {Array}
-   */
-  getFiltersByCategory(e) {
-    if (!this._filterRegistry) return [];
-    const t = Je(e), i = [], s = /* @__PURE__ */ new Set();
-    for (const r of t) {
-      const o = this._filterRegistry.getFiltersByCategory(r) || [];
-      for (const n of o)
-        s.has(n.id) || (s.add(n.id), i.push(n));
-    }
-    return i;
-  }
-  /**
-   * Normalize UI values from various input types
-   * @param {*} value
-   * @returns {*}
-   */
-  _normalizeValue(e) {
-    return Array.isArray(e) ? e.length > 0 && typeof e[0] == "object" ? e : Number(e[0] ?? 0) : typeof e == "string" ? e.startsWith("#") ? e : e.trim() === "" ? 0 : Number(e) : e;
-  }
-  /**
-   * Get a deep property from an object.
-   * Returns undefined if any segment along the path is missing.
-   * @param {Object} target
-   * @param {string} path
-   * @returns {*}
-   */
-  _getDeepProp(e, t) {
-    if (!e || !t) return;
-    if (!t.includes(".") && !t.includes("["))
-      return e[t];
-    const i = t.replace(/\[(\d+)\]/g, ".$1").split(".").filter(Boolean);
-    let s = e;
-    for (const r of i) {
-      if (s == null) return;
-      s = s[r];
-    }
-    return s;
-  }
-  /**
-   * Set a deep property on an object
-   * @param {Object} target
-   * @param {string} path
-   * @param {*} value
-   */
-  _setDeepProp(e, t, i) {
-    if (!e || !t) return;
-    if (!t.includes(".") && !t.includes("[")) {
-      e[t] = i;
-      return;
-    }
-    const s = t.replace(/\[(\d+)\]/g, ".$1").split(".").filter(Boolean);
-    let r = e;
-    for (let n = 0; n < s.length - 1; n++) {
-      const a = s[n];
-      if (!(a in r) || (r = r[a], r == null)) return;
-    }
-    const o = s[s.length - 1];
-    r[o] = i;
-  }
-  /**
-   * Initialize filter values from definition defaults.
-   * Seeds BOTH defaultParams (e.g. colorStops) and control defaults so that
-   * filters with dynamic parameters not backed by a static control still have
-   * their state populated.
-   * @param {string} filterId
-   */
-  initializeValues(e, t = void 0) {
-    const i = this.getFilterDef(e);
-    if (!i) return;
-    const s = this.state.getFilterValues(e), r = new Set((i.controls || []).map((o) => o.id));
-    if (i.defaultParams)
-      for (const [o, n] of Object.entries(i.defaultParams))
-        !r.has(o) && !(o in s) && this.state.setFilterValue(e, o, n, t);
-    i.controls && i.controls.forEach((o) => {
-      o.id in s || this.state.setFilterValue(e, o.id, o.default, t);
-    });
-  }
-  /**
-   * Reset all filter values to their defaults (unconditionally).
-   * Resets BOTH defaultParams and control defaults.
-   * @param {string} filterId
-   */
-  resetValues(e, t = void 0) {
-    const i = this.getFilterDef(e);
-    if (!i) return;
-    const s = new Set((i.controls || []).map((r) => r.id));
-    if (i.defaultParams)
-      for (const [r, o] of Object.entries(i.defaultParams))
-        s.has(r) || this.state.setFilterValue(e, r, o, t);
-    i.controls && i.controls.forEach((r) => {
-      this.state.setFilterValue(e, r.id, r.default, t);
-    });
-  }
-  /**
-   * Toggle a filter on/off
-   * @param {string} filterId
-   * @param {boolean} enabled
-   */
-  toggle(e, t, i = void 0) {
-    return this.state.toggleFilter(e, t, i) === !1 ? !1 : (t ? this.initializeValues(e, i) : delete this.instances[e], this.applyFilters(), this.emit("filterToggled", { filterId: e, enabled: t }), !0);
-  }
-  /**
-   * Update a filter control value.
-   *
-   * The `controlId` may be either a static control id (from def.controls) or a
-   * dynamic path (e.g. 'colorStops[0].color') produced by a filter's
-   * getDynamicControls(). Static control ids are stored in state keyed by the
-   * control id. Dynamic paths are NOT stored as flat path keys — instead, we
-   * apply them to the live instance and then sync the filter's serializable
-   * params back into state, so recreation via applyFilters() rebuilds from
-   * the canonical shape (e.g. a colorStops array, not 'colorStops[0].color').
-   *
-   * Returns true when the filter was updated in-place. Returns false when the
-   * caller should invoke applyFilters() to recreate the filter from state —
-   * this happens when the property target is a method (which would be
-   * silently corrupted by a direct write) or when the property doesn't exist.
-   *
-   * @param {string} filterId
-   * @param {string} controlId - Static control id or dynamic property path
-   * @param {*} value
-   * @returns {boolean} True if updated in-place, false if caller must recreate
-   */
-  updateValue(e, t, i, s = void 0) {
-    const r = this._normalizeValue(i);
-    if (!this._matchesExpectedFilterLayer(s)) return !1;
-    const o = this.getFilterDef(e), n = o == null ? void 0 : o.controls.find((p) => p.id === t), a = !n && (t.includes("[") || t.includes("."));
-    if (!a && this.state.setFilterValue(e, t, r, s) === !1)
-      return !1;
-    const l = this.instances[e];
-    if (!l) return !1;
-    const h = (n == null ? void 0 : n.property) || t;
-    if (typeof l.updateUIParam == "function") {
-      if (l.updateUIParam(h, r), a && typeof l.getSerializableParams == "function") {
-        const p = l.getSerializableParams();
-        for (const [u, f] of Object.entries(p))
-          this.state.setFilterValue(e, u, f, s);
-      }
-      return !0;
-    }
-    const c = this._getDeepProp(l, h);
-    return typeof c == "function" ? !1 : l.uniforms && h in l.uniforms ? (l.uniforms[h] = r, !0) : c !== void 0 ? (this._setDeepProp(l, h, r), !0) : !1;
-  }
-  /**
-   * Perform a filter action (e.g. addColorStop, removeColorStop) and sync
-   * any resulting state changes back into State.js before recreating the
-   * filter. Without this sync, recreation via applyFilters() would rebuild
-   * from stale state and undo the action.
-   *
-   * @param {string} filterId
-   * @param {string} action - Action name understood by filter.updateUIParam
-   */
-  performFilterAction(e, t, i = void 0) {
-    if (!this._matchesExpectedFilterLayer(i)) return !1;
-    const s = this.instances[e];
-    if (!s || typeof s.updateUIParam != "function") return !1;
-    if (s.updateUIParam(t, !0), typeof s.getSerializableParams == "function") {
-      const r = s.getSerializableParams();
-      for (const [o, n] of Object.entries(r))
-        this.state.setFilterValue(e, o, n, i);
-    }
-    return this.applyFilters(), this.emit("filterActionPerformed", { filterId: e, action: t }), !0;
-  }
-  _matchesExpectedFilterLayer(e) {
-    if (e === void 0 || !this._layerDocument()) return !0;
-    if (e === null)
-      return typeof this.state.getActiveFilterLayerId == "function" ? this.state.getActiveFilterLayerId() === null : this.state.get("activeLayerId") === null;
-    const i = typeof e == "string" ? e.trim() : "";
-    return i === "" ? !1 : typeof this.state.getActiveFilterLayerId == "function" ? this.state.getActiveFilterLayerId() === i : this.state.get("activeLayerId") === i;
-  }
-  _layerDocument() {
-    var t, i;
-    const e = (i = (t = this.state).getSerializableDocument) == null ? void 0 : i.call(t);
-    return e && e.version === 2 && Array.isArray(e.layers) ? e : null;
-  }
-  _sourceDimensionsForLayer(e, t = {}) {
-    var s, r, o, n, a, l, h, c, p;
-    const i = (e == null ? void 0 : e.source) || ((s = e == null ? void 0 : e.fill) == null ? void 0 : s.source) || null;
-    return {
-      width: Math.round(Number(t.sourceWidth || (i == null ? void 0 : i.originalWidth) || ((o = (r = this.renderer) == null ? void 0 : r.originalTexture) == null ? void 0 : o.width) || ((a = (n = this.renderer) == null ? void 0 : n.sprite) == null ? void 0 : a.width) || 0)),
-      height: Math.round(Number(t.sourceHeight || (i == null ? void 0 : i.originalHeight) || ((h = (l = this.renderer) == null ? void 0 : l.originalTexture) == null ? void 0 : h.height) || ((p = (c = this.renderer) == null ? void 0 : c.sprite) == null ? void 0 : p.height) || 0))
-    };
-  }
-  _paramsForFilterState(e, t, i) {
-    const s = t != null && t.values && typeof t.values == "object" ? t.values : {}, r = e.defaultParams ? { ...e.defaultParams } : {};
-    e.controls && Array.isArray(e.controls) && e.controls.forEach((n) => {
-      const a = n.property || n.id;
-      r[a] = s[n.id] ?? n.default;
-    });
-    const o = new Set((e.controls || []).map((n) => n.id));
-    for (const [n, a] of Object.entries(s))
-      o.has(n) || (r[n] = a);
-    return r._sourceWidth = i.width, r._sourceHeight = i.height, r;
-  }
-  createFiltersForLayer(e, t = {}) {
-    if (!Array.isArray(e == null ? void 0 : e.filters) || e.filters.length === 0) return [];
-    const i = [], s = this.state.get("activeLayerId"), r = e.id === s && t.forExport !== !0, o = this._sourceDimensionsForLayer(e, t);
-    for (const n of e.filters)
-      if (!(!n || n.enabled === !1 || typeof n.id != "string"))
-        try {
-          const a = this.getFilterDef(n.id);
-          if (!(a != null && a.createFilter) || typeof a.createFilter != "function") continue;
-          const l = a.createFilter(this._paramsForFilterState(a, n, o));
-          if (!l) continue;
-          let h = l;
-          t.forExport === !0 && typeof l.createExportFilter == "function" && (h = l.createExportFilter({
-            previewToNativeScale: t.previewToNativeScale || 1
-          }) || l), i.push(h), r && (this.instances[n.id] = l);
-        } catch {
-        }
-    return i;
-  }
-  /**
-   * Apply all active filters to the sprite
-   *
-   * This method recreates all filter instances on each call to ensure
-   * PIXI v8's filter pipeline correctly processes changes.
-   */
-  applyFilters() {
-    var o, n, a, l, h, c, p;
-    const e = this._layerDocument();
-    if (e) {
-      for (const f in this.instances)
-        delete this.instances[f];
-      (n = (o = this.renderer) == null ? void 0 : o.setLayerFilterFactory) == null || n.call(o, (f, m) => this.createFiltersForLayer(f, m));
-      const u = (l = (a = this.renderer) == null ? void 0 : a.applyLayerFilters) == null ? void 0 : l.call(a, e);
-      this.emit("filtersApplied", {
-        count: ((h = this.state.get("activeFilters")) == null ? void 0 : h.size) ?? 0,
-        failed: [],
-        scopedToLayer: !0
-      }), u || (p = (c = this.renderer) == null ? void 0 : c.render) == null || p.call(c);
-      return;
-    }
-    const t = this.renderer.sprite;
-    if (!t) return;
-    for (const u in this.instances)
-      delete this.instances[u];
-    const i = [], s = [];
-    this.state.get("activeFilters").forEach((u) => {
-      try {
-        const f = this.getFilterDef(u);
-        if (!f || !f.createFilter || typeof f.createFilter != "function")
-          return;
-        const m = this.state.getFilterValues(u), b = f.defaultParams ? { ...f.defaultParams } : {};
-        f.controls && Array.isArray(f.controls) && f.controls.forEach((S) => {
-          const J = S.property || S.id;
-          b[J] = m[S.id] ?? S.default;
-        });
-        const k = new Set((f.controls || []).map((S) => S.id));
-        for (const [S, J] of Object.entries(m))
-          k.has(S) || (b[S] = J);
-        const x = this.renderer.sprite, B = this.renderer.originalTexture;
-        b._sourceWidth = Math.round((B == null ? void 0 : B.width) || (x == null ? void 0 : x.width) || 0), b._sourceHeight = Math.round((B == null ? void 0 : B.height) || (x == null ? void 0 : x.height) || 0);
-        const A = f.createFilter(b);
-        A && (i.push(A), this.instances[u] = A);
-      } catch {
-        s.push(u);
-      }
-    });
-    try {
-      t.filters = null, t.filters = i.length ? i : null, this.renderer.render(), this.emit("filtersApplied", { count: i.length, failed: s });
-    } catch (u) {
-      try {
-        t.filters = null, this.renderer.render();
-      } catch {
-      }
-      this.emit("filtersError", { error: u, failedFilters: s });
-    }
-    s.length > 0;
-  }
-  /**
-   * 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(e = void 0) {
-    for (const s in this.instances)
-      delete this.instances[s];
-    return this.state.resetFilters(e) === !1 ? !1 : this._layerDocument() ? (this.applyFilters(), this.emit("filtersReset"), !0) : (this.renderer.sprite && (this.renderer.sprite.filters = null), this.renderer.render(), this.emit("filtersReset"), !0);
-  }
-  /**
-   * Get a filter instance
-   * @param {string} filterId
-   * @returns {Object|null}
-   */
-  getInstance(e) {
-    return this.instances[e] || null;
-  }
-}
-const V = class V extends ne {
-  constructor(e, t) {
-    super(), this.state = e, this.renderer = t, this._overlayCanvas = null, this._isDragging = !1, this._dragStart = null, this._dragMode = null, this._startRect = null, this._hoverMode = null, this._lastAutoZoomCheck = 0, this.HANDLE_SIZE = 14, this.EDGE_HIT_PAD = 10, this._onPointerDown = this._handlePointerDown.bind(this), this._onPointerMove = this._handlePointerMove.bind(this), this._onPointerUp = this._handlePointerUp.bind(this);
-  }
-  /**
-   * Set the overlay canvas element
-   * @param {HTMLCanvasElement} canvas
-   */
-  setOverlayCanvas(e) {
-    this._overlayCanvas = e;
-  }
-  /**
-   * Get aspect ratio value from string
-   * @param {string} aspect
-   * @returns {number|null}
-   */
-  _getAspectRatio(e) {
-    if (!e || e === "free") return null;
-    const t = {
-      "1:1": 1,
-      "4:3": 4 / 3,
-      "16:9": 16 / 9,
-      "3:2": 3 / 2,
-      "2:3": 2 / 3
-    };
-    if (t[e] !== void 0) return t[e];
-    const i = e.split(":");
-    if (i.length === 2) {
-      const s = parseFloat(i[0]), r = parseFloat(i[1]);
-      if (Number.isFinite(s) && Number.isFinite(r) && r > 0)
-        return s / r;
-    }
-    return null;
-  }
-  /**
-   * Return the numeric aspect ratio that the crop rect must obey, accounting
-   * for both the shape (circle/square force 1:1) and the explicit aspect
-   * setting. Returns null when the crop is free-form.
-   */
-  _getEffectiveTargetAspect() {
-    const e = this.state.get("crop.shape");
-    if (e === "circle" || e === "square") return 1;
-    const t = this.state.get("crop.aspect");
-    return !t || t === "free" ? null : this._getAspectRatio(t);
-  }
-  /**
-   * Apply aspect ratio constraint to crop rect. Honours shape (circle/square
-   * force 1:1) so the post-drag correction agrees with the effective ratio
-   * the edge-handle drag code targets.
-   */
-  applyAspectRatio() {
-    const e = this.state.get("crop.rect");
-    if (!e) return;
-    const t = this._getEffectiveTargetAspect();
-    if (!t) return;
-    const i = e.width / e.height;
-    Math.abs(i - t) < 0.01 || (i > t ? e.width = e.height * t : e.height = e.width / t, this.state.set("crop.rect", e));
-  }
-  /**
-   * Constrain crop rect to bounds
-   */
-  constrainCropRect() {
-    const e = this.state.get("crop.rect");
-    if (!e) return;
-    const t = this.renderer.sprite, i = this.renderer.app;
-    if (!t || !i) return;
-    const s = this.state.get("crop.shape"), r = { x: 0, y: 0, w: i.screen.width, h: i.screen.height };
-    if (e.x = Math.max(r.x, Math.min(e.x, r.x + r.w - e.width)), e.y = Math.max(r.y, Math.min(e.y, r.y + r.h - e.height)), e.width = Math.min(e.width, r.w), e.height = Math.min(e.height, r.h), s !== "free" || this.state.get("crop.aspect") === "1:1") {
-      const o = Math.min(e.width, e.height);
-      e.width = o, e.height = o;
-    }
-    this.state.set("crop.rect", e);
-  }
-  /**
-   * Calculate the target zoom level for auto-zoom when crop exceeds image bounds.
-   * Pure function — returns the new zoom level, or null if no adjustment is needed.
-   *
-   * @param {{ width: number, height: number }} cropRect - Current crop dimensions
-   * @param {number} spriteWidth - Current sprite width on screen
-   * @param {number} spriteHeight - Current sprite height on screen
-   * @param {number} texWidth - Original texture width (pixels)
-   * @param {number} texHeight - Original texture height (pixels)
-   * @param {number} fitScale - Current fit-to-screen scale
-   * @param {number} currentZoom - Current zoom level
-   * @returns {number|null} Target zoom level, or null if no zoom needed
-   */
-  static calcAutoZoom(e, t, i, s, r, o, n) {
-    if (!e || !s || !r || !o) return null;
-    const a = e.width > t, l = e.height > i;
-    if (!a && !l) return null;
-    const h = V.AUTO_ZOOM_PADDING;
-    let c = n;
-    if (a) {
-      const p = e.width / (h * s * o);
-      c = Math.min(c, p);
-    }
-    if (l) {
-      const p = e.height / (h * r * o);
-      c = Math.min(c, p);
-    }
-    return c = Math.max(0.1, c), c >= n - 0.01 ? null : c;
-  }
-  /**
-   * Check if auto-zoom is needed and apply it (throttled).
-   * Called during crop resize drags when autoZoomOnCropOverflow is enabled.
-   */
-  _checkAutoZoom() {
-    if (!this.state.get("autoZoomOnCropOverflow")) return;
-    const e = Date.now();
-    if (e - this._lastAutoZoomCheck < V.AUTO_ZOOM_THROTTLE_MS) return;
-    this._lastAutoZoomCheck = e;
-    const t = this.state.get("crop.rect"), i = this.renderer.sprite, s = this.renderer.originalTexture;
-    if (!t || !i || !s) return;
-    const r = V.calcAutoZoom(
-      t,
-      i.width,
-      i.height,
-      s.width,
-      s.height,
-      this.renderer.fitScale,
-      this.renderer.zoom
-    );
-    r !== null && this.renderer.setZoom(r, { keepCenter: !0 });
-  }
-  /**
-   * Draw crop overlay on canvas
-   */
-  drawOverlay() {
-    const e = this._overlayCanvas;
-    if (!e) return;
-    const t = this.renderer.app;
-    if (!t) return;
-    const i = t.canvas, s = i.clientWidth, r = i.clientHeight, o = window.devicePixelRatio || 1;
-    (e.width !== Math.max(1, Math.floor(s * o)) || e.height !== Math.max(1, Math.floor(r * o))) && (e.width = Math.max(1, Math.floor(s * o)), e.height = Math.max(1, Math.floor(r * o)), e.style.width = s + "px", e.style.height = r + "px");
-    const n = e.getContext("2d");
-    if (!n) return;
-    n.setTransform(o, 0, 0, o, 0, 0), n.clearRect(0, 0, s, r), n.fillStyle = "rgba(0, 0, 0, 0.5)", n.fillRect(0, 0, s, r);
-    const a = this.state.get("crop.rect");
-    if (!a) return;
-    const l = this.state.get("crop.shape");
-    if (n.save(), l === "circle") {
-      const b = a.x + a.width / 2, k = a.y + a.height / 2, x = Math.min(a.width, a.height) / 2;
-      n.beginPath(), n.arc(b, k, x, 0, Math.PI * 2), n.clip();
-    } else
-      n.beginPath(), n.rect(a.x, a.y, a.width, a.height), n.clip();
-    n.clearRect(a.x, a.y, a.width, a.height), n.restore(), n.strokeStyle = "#ffffff", n.lineWidth = 2, n.setLineDash([5, 5]), l === "circle" ? (n.beginPath(), n.arc(
-      a.x + a.width / 2,
-      a.y + a.height / 2,
-      Math.min(a.width, a.height) / 2,
-      0,
-      Math.PI * 2
-    ), n.stroke()) : n.strokeRect(a.x, a.y, a.width, a.height), n.setLineDash([]), n.strokeStyle = "rgba(255,255,255,0.3)", n.lineWidth = 1;
-    const h = a.width / 3, c = a.height / 3;
-    for (let b = 1; b <= 2; b++)
-      n.beginPath(), n.moveTo(a.x + h * b, a.y), n.lineTo(a.x + h * b, a.y + a.height), n.stroke(), n.beginPath(), n.moveTo(a.x, a.y + c * b), n.lineTo(a.x + a.width, a.y + c * b), n.stroke();
-    const p = this.HANDLE_SIZE, u = [
-      { x: a.x, y: a.y, m: "resize-nw" },
-      { x: a.x + a.width, y: a.y, m: "resize-ne" },
-      { x: a.x, y: a.y + a.height, m: "resize-sw" },
-      { x: a.x + a.width, y: a.y + a.height, m: "resize-se" }
-    ], f = [
-      { x: a.x + a.width / 2, y: a.y, m: "n" },
-      { x: a.x + a.width / 2, y: a.y + a.height, m: "s" },
-      { x: a.x, y: a.y + a.height / 2, m: "w" },
-      { x: a.x + a.width, y: a.y + a.height / 2, m: "e" }
-    ], m = [...u, ...f];
-    for (const b of m) {
-      const k = this._hoverMode === b.m, x = k ? p + 4 : p;
-      n.beginPath(), n.rect(b.x - x / 2, b.y - x / 2, x, x), n.fillStyle = k ? "#4da3ff" : "#ffffff", n.strokeStyle = "rgba(0,0,0,0.6)", n.lineWidth = 1, n.fill(), n.stroke();
-    }
-  }
-  /**
-   * Hit test for handles
-   * @param {number} px
-   * @param {number} py
-   * @returns {string|null}
-   */
-  _hitHandle(e, t) {
-    const i = this.state.get("crop.rect");
-    if (!i) return null;
-    const s = (r, o, n, a, l) => Math.abs(r - n) <= l && Math.abs(o - a) <= l;
-    return s(e, t, i.x, i.y, this.HANDLE_SIZE) ? "resize-nw" : s(e, t, i.x + i.width, i.y, this.HANDLE_SIZE) ? "resize-ne" : s(e, t, i.x, i.y + i.height, this.HANDLE_SIZE) ? "resize-sw" : s(e, t, i.x + i.width, i.y + i.height, this.HANDLE_SIZE) ? "resize-se" : Math.abs(t - i.y) <= this.EDGE_HIT_PAD && e >= i.x && e <= i.x + i.width ? "n" : Math.abs(t - (i.y + i.height)) <= this.EDGE_HIT_PAD && e >= i.x && e <= i.x + i.width ? "s" : Math.abs(e - i.x) <= this.EDGE_HIT_PAD && t >= i.y && t <= i.y + i.height ? "w" : Math.abs(e - (i.x + i.width)) <= this.EDGE_HIT_PAD && t >= i.y && t <= i.y + i.height ? "e" : e >= i.x && e <= i.x + i.width && t >= i.y && t <= i.y + i.height ? "move" : null;
-  }
-  /**
-   * Handle pointer down event
-   */
-  _handlePointerDown(e) {
-    const t = this.state.get("crop.rect");
-    if (!t) return;
-    const i = e.global;
-    this._dragMode = this._hitHandle(i.x, i.y), this._dragMode && (this._isDragging = !0, this._dragStart = { x: i.x, y: i.y }, this._startRect = { ...t }, this._lastAutoZoomCheck = 0);
-  }
-  /**
-   * Handle pointer move event
-   */
-  _handlePointerMove(e) {
-    var l, h, c, p;
-    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") || (h = this._hoverMode) != null && h.endsWith("se") ? "nwse-resize" : (c = this._hoverMode) != null && c.endsWith("ne") || (p = this._hoverMode) != null && p.endsWith("sw") ? "nesw-resize" : "crosshair", this.drawOverlay();
-      return;
-    }
-    const s = this.state.get("crop.rect");
-    if (!s) return;
-    const r = i.x - this._dragStart.x, o = i.y - this._dragStart.y, n = this._getEffectiveTargetAspect();
-    switch (this._dragMode) {
-      case "move":
-        s.x = this._startRect.x + r, s.y = this._startRect.y + o;
-        break;
-      case "n": {
-        const u = this._startRect.height - o;
-        if (s.y = this._startRect.y + o, s.height = u, n) {
-          const f = u * n;
-          s.x = this._startRect.x + (this._startRect.width - f) / 2, s.width = f;
-        }
-        break;
-      }
-      case "s": {
-        const u = this._startRect.height + o;
-        if (s.height = u, n) {
-          const f = u * n;
-          s.x = this._startRect.x + (this._startRect.width - f) / 2, s.width = f;
-        }
-        break;
-      }
-      case "w": {
-        const u = this._startRect.width - r;
-        if (s.x = this._startRect.x + r, s.width = u, n) {
-          const f = u / n;
-          s.y = this._startRect.y + (this._startRect.height - f) / 2, s.height = f;
-        }
-        break;
-      }
-      case "e": {
-        const u = this._startRect.width + r;
-        if (s.width = u, n) {
-          const f = u / n;
-          s.y = this._startRect.y + (this._startRect.height - f) / 2, s.height = f;
-        }
-        break;
-      }
-      case "resize-nw":
-        s.x = this._startRect.x + r, s.y = this._startRect.y + o, s.width = this._startRect.width - r, s.height = this._startRect.height - o;
-        break;
-      case "resize-ne":
-        s.y = this._startRect.y + o, s.width = this._startRect.width + r, s.height = this._startRect.height - o;
-        break;
-      case "resize-sw":
-        s.x = this._startRect.x + r, s.width = this._startRect.width - r, s.height = this._startRect.height + o;
-        break;
-      case "resize-se":
-        s.width = this._startRect.width + r, s.height = this._startRect.height + o;
-        break;
-    }
-    s.width = Math.max(50, s.width), s.height = Math.max(50, s.height), this.state.set("crop.rect", s), this.state.set("crop.dirty", !0), this.state.get("crop.shape") === "circle" && this.state.get("crop.aspect") !== "1:1" && this.state.set("crop.aspect", "1:1"), this.applyAspectRatio(), this._dragMode !== "move" && this._checkAutoZoom(), this.constrainCropRect(), this.drawOverlay();
-  }
-  /**
-   * Handle pointer up event
-   */
-  _handlePointerUp() {
-    this._isDragging = !1, this._dragMode = null, this._dragStart = null, this._startRect = null;
-  }
-  /**
-   * Enable crop mode
-   */
-  enable() {
-    const e = this.renderer.app, t = this.renderer.sprite;
-    if (!e || !t) return;
-    let i = this.state.get("crop.rect");
-    if (!i) {
-      this.state.get("crop.shape") === "circle" && this.state.set("crop.aspect", "1:1");
-      const o = this.state.get("crop.aspect"), n = this._getAspectRatio(o);
-      let a, l;
-      if (n) {
-        const p = t.width * 0.9, u = t.height * 0.9;
-        p / u > n ? (l = u, a = l * n) : (a = p, l = a / n);
-      } else {
-        const p = Math.min(e.screen.width, e.screen.height) * 0.7;
-        a = p, l = p;
-      }
-      const h = t.x + (t.width - a) / 2, c = t.y + (t.height - l) / 2;
-      i = { x: h, y: c, width: a, height: l }, this.state.set("crop.rect", i), o !== "free" && this.constrainCropRect();
-    }
-    this.state.set("crop.dirty", !1);
-    const s = e.stage;
-    s.eventMode = "static", s.hitArea = e.screen, s.cursor = "crosshair", s.on("pointerdown", this._onPointerDown), s.on("pointermove", this._onPointerMove), s.on("pointerup", this._onPointerUp), s.on("pointerupoutside", this._onPointerUp), this.state.set("mode", "crop"), this.drawOverlay(), this.emit("enabled");
-  }
-  /**
-   * Disable crop mode
-   */
-  disable() {
-    const e = this.renderer.app;
-    if (!e) return;
-    const t = e.stage;
-    if (t.off("pointerdown", this._onPointerDown), t.off("pointermove", this._onPointerMove), t.off("pointerup", this._onPointerUp), t.off("pointerupoutside", this._onPointerUp), t.eventMode = "auto", t.cursor = "default", this.state.set("crop.rect", null), this.state.set("crop.dirty", !1), this._overlayCanvas) {
-      const i = this._overlayCanvas.getContext("2d");
-      i == null || i.clearRect(0, 0, this._overlayCanvas.width, this._overlayCanvas.height);
-    }
-    this.state.set("mode", "filters"), this.emit("disabled");
-  }
-  /**
-   * Apply the crop
-   * @returns {{ texture: PIXI.Texture, preservedZoom: number }|null}
-   */
-  apply() {
-    const e = this.renderer.app, t = this.renderer.sprite, i = this.renderer.originalTexture, s = this.state.get("crop.rect");
-    if (!s || !t || !e || !i) return null;
-    const r = window.PIXI, o = this.renderer.zoom, n = i.width / t.width, a = i.height / t.height, l = (s.x - t.x) * n, h = (s.y - t.y) * a;
-    let c = Math.round(Math.max(1, s.width * n)), p = Math.round(Math.max(1, s.height * a)), u = Math.round(l), f = Math.round(h);
-    if (c <= 0 || p <= 0) return null;
-    const m = new r.Container(), b = new r.Sprite(i);
-    if (this.state.get("crop.shape") === "circle") {
-      const M = Math.round(Math.max(c, p)), N = u + c / 2, z = f + p / 2;
-      u = Math.round(N - M / 2), f = Math.round(z - M / 2), c = p = M;
-      const F = new r.Graphics();
-      typeof F.circle == "function" && typeof F.fill == "function" ? F.circle(c / 2, p / 2, c / 2).fill(16777215) : (F.beginFill(16777215, 1), F.drawCircle(c / 2, p / 2, c / 2), F.endFill()), b.mask = F, m.addChild(F);
-    }
-    b.x = -u, b.y = -f, m.addChild(b);
-    const x = r.RenderTexture.create({ width: c, height: p });
-    e.renderer.render({
-      container: m,
-      target: x,
-      clear: !0
-    }), m.destroy({ children: !0 });
-    const B = this.renderer.originalTexture;
-    B && B !== this.renderer.baseTexture && B.destroy(!0), this.renderer.originalTexture = x, e.stage.removeChild(t), t.destroy();
-    const A = new r.Sprite(x);
-    e.stage.addChild(A), this.renderer.sprite = A, this.renderer.fitScale = this.renderer.getFitScaleFor(x), this.renderer.setZoom(o, { keepCenter: !1 }), this.renderer.applyViewTransform(), this.renderer.render();
-    const S = this.state.get("crop.appliedRect"), y = S && Number.isFinite(S.x) && Number.isFinite(S.y) && Number.isFinite(S.width) && Number.isFinite(S.height) ? {
-      x: Math.round(S.x + u),
-      y: Math.round(S.y + f),
-      width: c,
-      height: p
-    } : { x: u, y: f, width: c, height: p }, w = this.state.get("crop.shape") || "free", R = this.state.get("crop.aspect") || "free";
-    return this.disable(), this.state.set("crop.appliedRect", y), this.state.set("crop.appliedShape", w), this.state.set("crop.appliedAspect", R), this.state.set("crop.dirty", !1), this.emit("applied", { width: c, height: p }), { texture: x, preservedZoom: o };
-  }
-  /**
-   * Apply a crop from saved texture-pixel coordinates (for state rehydration).
-   * Unlike apply(), this does not read from crop.rect or require the interactive overlay.
-   * @param {{ x: number, y: number, width: number, height: number }} pixelRect
-   * @param {'free'|'circle'} shape
-   * @returns {{ texture: Object, preservedZoom: number }|null}
-   */
-  applyFromPixelRect(e, t = "free") {
-    const i = this.renderer.app, s = this.renderer.sprite, r = this.renderer.originalTexture;
-    if (!e || !s || !i || !r) return null;
-    const o = window.PIXI, n = this.renderer.zoom;
-    let a = Math.round(Math.max(1, e.width)), l = Math.round(Math.max(1, e.height)), h = Math.round(e.x), c = Math.round(e.y);
-    if (a <= 0 || l <= 0) return null;
-    const p = new o.Container(), u = new o.Sprite(r);
-    if (t === "circle") {
-      const k = Math.round(Math.max(a, l)), x = h + a / 2, B = c + l / 2;
-      h = Math.round(x - k / 2), c = Math.round(B - k / 2), a = l = k;
-      const A = new o.Graphics();
-      typeof A.circle == "function" && typeof A.fill == "function" ? A.circle(a / 2, l / 2, a / 2).fill(16777215) : (A.beginFill(16777215, 1), A.drawCircle(a / 2, l / 2, a / 2), A.endFill()), u.mask = A, p.addChild(A);
-    }
-    u.x = -h, u.y = -c, p.addChild(u);
-    const f = o.RenderTexture.create({ width: a, height: l });
-    i.renderer.render({ container: p, target: f, clear: !0 }), p.destroy({ children: !0 });
-    const m = this.renderer.originalTexture;
-    m && m !== this.renderer.baseTexture && m.destroy(!0), this.renderer.originalTexture = f, i.stage.removeChild(s), s.destroy();
-    const b = new o.Sprite(f);
-    return i.stage.addChild(b), this.renderer.sprite = b, this.renderer.fitScale = this.renderer.getFitScaleFor(f), this.renderer.setZoom(n, { keepCenter: !1 }), this.renderer.applyViewTransform(), this.renderer.render(), { texture: f, preservedZoom: n };
-  }
-  /**
-   * Cancel crop
-   */
-  cancel() {
-    this.disable(), this.emit("cancelled");
-  }
-  /**
-   * Set crop shape
-   * @param {'free'|'square'|'circle'} shape
-   */
-  setShape(e) {
-    this.state.get("lockCropShape") || (this.state.set("crop.shape", e), this.state.set("crop.dirty", !0), (e === "circle" || e === "square") && this.state.set("crop.aspect", "1:1"), this.applyAspectRatio(), this.constrainCropRect(), this.drawOverlay());
-  }
-  /**
-   * Set aspect ratio
-   * @param {'free'|'1:1'|'4:3'|'16:9'|'3:2'|'2:3'|string} aspect
-   */
-  setAspect(e) {
-    if (this.state.get("lockAspectRatio")) return;
-    if (this.state.get("crop.shape") !== "free") {
-      if (this.state.get("lockCropShape")) return;
-      this.state.set("crop.shape", "free");
-    }
-    this.state.set("crop.aspect", e), this.state.set("crop.dirty", !0), this.applyAspectRatio(), this.constrainCropRect(), this.drawOverlay();
-  }
-};
-/**
- * Padding factor for auto-zoom: image will be ~91% of crop size (1/1.1).
- * Higher values = more aggressive zoom-out, more padding around image.
- */
-ae(V, "AUTO_ZOOM_PADDING", 1.1), /**
- * Minimum interval (ms) between auto-zoom adjustments during drag.
- */
-ae(V, "AUTO_ZOOM_THROTTLE_MS", 100);
-let de = V;
-class Xe {
-  /**
-   * Create a new RemoveBgManager
-   * @param {Object} options
-   * @param {string} [options.endpoint] - API endpoint for uploaded preview background removal
-   * @param {string} [options.optionsEndpoint] - API endpoint for background-removal capability/options
-   * @param {string} [options.savedEndpoint] - API endpoint template for saved-media removal
-   * @param {string} [options.fallbackEndpoint] - Fallback endpoint if primary fails
-   */
-  constructor(e = {}) {
-    this._endpoint = e.endpoint || "/api/v1/media/background-removal/preview", this._optionsEndpoint = e.optionsEndpoint || "/api/v1/media/background-removal/options", this._savedEndpoint = e.savedEndpoint || "/api/v1/media/{media}/background-removal", this._fallbackEndpoint = e.fallbackEndpoint || null, this._activeControllers = /* @__PURE__ */ new Set();
-  }
-  _createAbortController() {
-    if (typeof AbortController > "u")
-      return null;
-    const e = new AbortController();
-    return this._activeControllers.add(e), e;
-  }
-  _releaseAbortController(e) {
-    e && this._activeControllers.delete(e);
-  }
-  cancelActiveRequests(e = "cancelled") {
-    const t = Array.from(this._activeControllers);
-    this._activeControllers.clear();
-    for (const i of t)
-      i.signal.aborted || i.abort(e);
-    return t.length;
-  }
-  /**
-   * Build a stable preview request so callers can stale-guard the response.
-   * @param {string|Blob} imageData
-   * @param {Object} options
-   * @returns {Promise<Object>}
-   */
-  async preparePreviewRequest(e, t = {}) {
-    const i = typeof e == "string" ? await this._dataUrlToBlob(e) : e;
-    return {
-      ...t,
-      blob: i,
-      operationId: t.operationId || this._uuid(),
-      sessionKey: t.sessionKey || this._uuid(),
-      sourceHash: t.sourceHash || await this._sha256Hex(i),
-      targetRef: t.targetRef || null,
-      tier: t.tier || "balanced"
-    };
-  }
-  /**
-   * @param {string|Blob} imageData
-   * @returns {Promise<string>}
-   */
-  async computeImageDataHash(e) {
-    const t = typeof e == "string" ? await this._dataUrlToBlob(e) : e;
-    return this._sha256Hex(t);
-  }
-  /**
-   * Remove background from an image
-   * @param {string} imageData - Data URL or Blob of the image
-   * @param {Object} options
-   * @param {string} [options.tier='balanced'] - Quality tier: 'fast', 'balanced', 'best'
-   * @param {string} [options.model] - Explicit model name (overrides tier)
-   * @param {boolean} [options.alpha_matting=false] - Enable alpha matting for edge refinement
-   * @param {number} [options.alpha_f=10] - Alpha matting foreground threshold
-   * @param {number} [options.alpha_fr=15] - Alpha matting foreground radius
-   * @param {number} [options.alpha_erode_size=10] - Alpha matting erode size
-   * @returns {Promise<{dataUrl: string, model: string, processMs: string}>}
-   */
-  async removeBackground(e, t = {}) {
-    const i = typeof Blob < "u" && t.blob instanceof Blob ? t : await this.preparePreviewRequest(e, t), s = i.blob, r = i.operationId, o = i.sessionKey, n = i.sourceHash, a = new FormData();
-    a.append("image_file", s, "image.png"), a.append("operation_id", r), a.append("session_key", o), a.append("source_hash", n), a.append("tier", i.tier || "balanced"), i.targetRef && a.append("target_ref", i.targetRef), i.model && a.append("model", i.model), i.alpha_matting && (a.append("alpha_matting", "true"), a.append("alpha_f", String(i.alpha_f ?? 10)), a.append("alpha_fr", String(i.alpha_fr ?? 15)), a.append("alpha_erode_size", String(i.alpha_erode_size ?? 10))), i.max_megapixels !== void 0 && a.append("max_megapixels", String(i.max_megapixels));
-    let l, h;
-    const c = this._createAbortController(), p = (u) => c ? { ...u, signal: c.signal } : u;
-    try {
-      try {
-        l = await fetch(this._endpoint, p({
-          method: "POST",
-          body: a,
-          credentials: "include"
-          // For Sanctum auth
-        }));
-      } catch (m) {
-        if (c != null && c.signal.aborted)
-          throw m;
-        h = m;
-      }
-      if ((!l || !l.ok) && this._fallbackEndpoint)
-        try {
-          l = await fetch(this._fallbackEndpoint, p({
-            method: "POST",
-            body: a
-          }));
-        } catch (m) {
-          if (c != null && c.signal.aborted)
-            throw m;
-          h || (h = m);
-        }
-      if (!l)
-        throw h || new Error("Network error: Unable to connect to background removal service");
-      if (!l.ok) {
-        let m = `Background removal failed (HTTP ${l.status})`;
-        try {
-          const b = await l.text();
-          b && (m += `: ${b}`);
-        } catch {
-        }
-        throw new Error(m);
-      }
-      const u = await l.blob();
-      return {
-        dataUrl: await this._blobToDataUrl(u),
-        model: l.headers.get("X-Model-Used") || "unknown",
-        processMs: l.headers.get("X-Process-Ms") || "0",
-        operationId: l.headers.get("X-Operation-Id") || r,
-        sessionKey: l.headers.get("X-Session-Key") || o,
-        sourceHash: l.headers.get("X-Source-Hash") || n,
-        targetRef: l.headers.get("X-Target-Ref") || i.targetRef || null
-      };
-    } finally {
-      this._releaseAbortController(c);
-    }
-  }
-  /**
-   * Remove the background from a persisted editor-document layer.
-   * @param {Object} options
-   * @param {string} options.targetMediaUuid
-   * @param {string} options.operationId
-   * @param {string} options.documentId
-   * @param {string} options.documentRevisionId
-   * @param {string} options.targetLayerId
-   * @param {string} options.expectedSourceHash
-   * @param {string} [options.tier]
-   * @returns {Promise<Object>}
-   */
-  async removeSavedMediaBackground(e) {
-    const t = this._savedEndpoint.replace("{media}", encodeURIComponent(e.targetMediaUuid)), i = {
-      operation_id: e.operationId,
-      document_id: e.documentId,
-      document_revision_id: e.documentRevisionId,
-      target_layer_id: e.targetLayerId,
-      expected_source_hash: e.expectedSourceHash,
-      tier: e.tier || "balanced"
-    };
-    e.model && (i.model = e.model), e.alpha_matting !== void 0 && (i.alpha_matting = !!e.alpha_matting), e.max_megapixels !== void 0 && (i.max_megapixels = Number(e.max_megapixels));
-    const s = this._createAbortController();
-    let r;
-    try {
-      if (r = await fetch(t, {
-        method: "POST",
-        body: JSON.stringify(i),
-        credentials: "include",
-        headers: {
-          Accept: "application/json",
-          "Content-Type": "application/json"
-        },
-        ...s ? { signal: s.signal } : {}
-      }), !r.ok) {
-        let o = `Background removal failed (HTTP ${r.status})`;
-        try {
-          const n = await r.json();
-          n != null && n.message && (o += `: ${n.message}`);
-        } catch {
-        }
-        throw new Error(o);
-      }
-      return await r.json();
-    } finally {
-      this._releaseAbortController(s);
-    }
-  }
-  /**
-   * Convert a data URL to a Blob
-   * @param {string} dataUrl
-   * @returns {Promise<Blob>}
-   */
-  async _dataUrlToBlob(e) {
-    if (e.startsWith("data:")) {
-      const [i, s] = e.split(","), r = i.match(/:(.*?);/), o = r ? r[1] : "image/png", n = atob(s), a = new Uint8Array(n.length);
-      for (let l = 0; l < n.length; l++)
-        a[l] = n.charCodeAt(l);
-      return new Blob([a], { type: o });
-    }
-    return (await fetch(e)).blob();
-  }
-  /**
-   * Convert a Blob to a data URL
-   * @param {Blob} blob
-   * @returns {Promise<string>}
-   */
-  _blobToDataUrl(e) {
-    return new Promise((t, i) => {
-      const s = new FileReader();
-      s.onload = () => t(s.result), s.onerror = () => i(new Error("Failed to read blob as data URL")), s.readAsDataURL(e);
-    });
-  }
-  /**
-   * Check if the background removal service is available
-   * @returns {Promise<boolean>}
-   */
-  async isAvailable() {
-    var t;
-    const e = await this.getOptions();
-    return e.enabled === !0 && ((t = e.service) == null ? void 0 : t.available) === !0;
-  }
-  /**
-   * @returns {Promise<Object>}
-   */
-  async getOptions() {
-    try {
-      const e = await fetch(this._optionsEndpoint, {
-        method: "GET",
-        credentials: "include"
-      });
-      if (!e.ok)
-        return { enabled: !1, service: { available: !1 } };
-      const t = await e.json();
-      return t && typeof t == "object" ? t : { enabled: !1, service: { available: !1 } };
-    } catch {
-      if (this._fallbackEndpoint)
-        try {
-          const t = await fetch(this._fallbackEndpoint, {
-            method: "OPTIONS"
-          });
-          return {
-            enabled: t.ok,
-            service: { available: t.ok }
-          };
-        } catch {
-        }
-      return { enabled: !1, service: { available: !1 } };
-    }
-  }
-  _uuid() {
-    var e;
-    return (e = globalThis.crypto) != null && e.randomUUID ? globalThis.crypto.randomUUID() : "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (t) => {
-      const i = Math.floor(Math.random() * 16);
-      return (t === "x" ? i : i & 3 | 8).toString(16);
-    });
-  }
-  async _sha256Hex(e) {
-    const t = await e.arrayBuffer(), i = await globalThis.crypto.subtle.digest("SHA-256", t);
-    return [...new Uint8Array(i)].map((s) => s.toString(16).padStart(2, "0")).join("");
-  }
-}
-function d(g, e = {}, ...t) {
-  const i = document.createElement(g);
-  for (const [s, r] of Object.entries(e))
-    if (r != null)
-      if (s === "className")
-        i.className = r;
-      else if (s === "style" && typeof r == "object")
-        Object.assign(i.style, r);
-      else if (s.startsWith("on") && typeof r == "function") {
-        const o = s.slice(2).toLowerCase();
-        i.addEventListener(o, r);
-      } else s === "dataset" && typeof r == "object" ? Object.assign(i.dataset, r) : i.setAttribute(s, r);
-  for (const s of t)
-    typeof s == "string" ? i.appendChild(document.createTextNode(s)) : s instanceof HTMLElement && i.appendChild(s);
-  return i;
-}
-function ve({ id: g, label: e, min: t = 0, max: i = 1, step: s = 0.01, value: r = 0.5, onChange: o }) {
-  const n = g.includes("-") ? g.split("-").slice(1).join("-") : g, a = d("div", {
-    className: "slider-control slider-wrapper",
-    "data-control": n,
-    "data-testid": `slider-${n}`
-  }), l = d(
-    "div",
-    { className: "slider-header" },
-    d("label", { for: g, className: "slider-label" }, e),
-    d("span", { className: "slider-value", id: `${g}-value` }, le(r))
-  ), h = d("input", {
-    type: "range",
-    id: g,
-    className: "slider-input",
-    min: String(t),
-    max: String(i),
-    step: String(s),
-    value: String(r),
-    onInput: (c) => {
-      const p = parseFloat(c.target.value), u = a.querySelector(".slider-value");
-      u && (u.textContent = le(p)), o == null || o(p);
-    }
-  });
-  return a.appendChild(l), a.appendChild(h), a.setValue = (c) => {
-    h.value = String(c);
-    const p = a.querySelector(".slider-value");
-    p && (p.textContent = le(c));
-  }, a;
-}
-function le(g) {
-  return Number.isInteger(g) ? String(g) : g.toFixed(2);
-}
-function we({ id: g, label: e, checked: t = !1, onChange: i }) {
-  const s = d("div", { className: "toggle-control" }), r = d("label", { className: "toggle-label", for: g }, e), o = d("input", {
-    type: "checkbox",
-    id: g,
-    className: "toggle-input",
-    checked: t ? "checked" : void 0,
-    onChange: (l) => i == null ? void 0 : i(l.target.checked)
-  }), n = d("div", {
-    className: "toggle-switch",
-    onClick: (l) => {
-      l.target !== o && (o.checked = !o.checked, i == null || i(o.checked));
-    }
-  }), a = d("span", { className: "toggle-slider" });
-  return n.appendChild(o), n.appendChild(a), s.appendChild(r), s.appendChild(n), s.setChecked = (l) => {
-    o.checked = l;
-  }, s;
-}
-function xe({ id: g, label: e, value: t = "#000000", onChange: i }) {
-  const s = d("div", { className: "color-control" }), r = d("label", { className: "color-label", for: g }, e), o = d("input", {
-    type: "color",
-    id: g,
-    className: "color-input",
-    value: t,
-    onInput: (n) => i == null ? void 0 : i(n.target.value)
-  });
-  return s.appendChild(r), s.appendChild(o), s.setValue = (n) => {
-    o.value = n;
-  }, s;
-}
-function Ce({ id: g, label: e, value: t = "", placeholder: i = "", onCommit: s }) {
-  const r = d("div", {
-    className: "text-control",
-    "data-control": g,
-    "data-testid": `text-${g}`
-  }), o = d("label", { className: "text-label", for: g }, e);
-  let n = t;
-  const a = d("input", {
-    type: "text",
-    id: g,
-    className: "text-input",
-    value: t,
-    placeholder: i,
-    onKeyDown: (h) => {
-      h.key === "Enter" && (h.preventDefault(), l(), a.blur());
-    },
-    onBlur: () => l()
-  });
-  function l() {
-    const h = a.value;
-    h !== n && (n = h, s == null || s(h));
-  }
-  return r.appendChild(o), r.appendChild(a), r.setValue = (h) => {
-    const c = h == null ? "" : String(h);
-    a.value = c, n = c;
-  }, r;
-}
-function ke({ id: g, label: e, options: t = [], value: i, onChange: s }) {
-  const r = d("div", { className: "select-control" }), o = d("label", { className: "select-label", for: g }, e), n = d("select", {
-    id: g,
-    className: "select-input",
-    onChange: (a) => s == null ? void 0 : s(a.target.value)
-  });
-  for (const a of t) {
-    const l = d("option", { value: a.value }, a.label);
-    a.value === i && (l.selected = !0), n.appendChild(l);
-  }
-  return r.appendChild(o), r.appendChild(n), r.setValue = (a) => {
-    n.value = a;
-  }, r;
-}
-function D({ label: g, className: e = "", onClick: t, icon: i = null, disabled: s = !1 }) {
-  const r = d("button", {
-    type: "button",
-    className: `btn ${e}`.trim(),
-    onClick: t,
-    disabled: s ? "disabled" : void 0
-  });
-  if (i) {
-    const o = d("span", { className: "btn-icon" });
-    o.innerHTML = i;
-    const n = o.querySelector("svg");
-    n && n.setAttribute("aria-hidden", "true"), r.appendChild(o);
-  }
-  return g && r.appendChild(document.createTextNode(g)), r;
-}
-function j({ icon: g, title: e, className: t = "", onClick: i, disabled: s = !1, testId: r = null, ariaLabel: o = null }) {
-  const n = {
-    type: "button",
-    className: `icon-btn ${t}`.trim(),
-    title: e,
-    "aria-label": o || e,
-    onClick: i,
-    disabled: s ? "disabled" : void 0
-  };
-  r && (n.dataset = { testid: r });
-  const a = d("button", n);
-  a.innerHTML = g;
-  const l = a.querySelector("svg");
-  return l && l.setAttribute("aria-hidden", "true"), a;
-}
-function re({ label: g, icon: e, active: t = !1, onClick: i }) {
-  const s = d("button", {
-    type: "button",
-    className: `chip ${t ? "active" : ""}`.trim(),
-    onClick: i
-  });
-  if (e) {
-    const r = d("span", { className: "chip-icon" });
-    r.innerHTML = e;
-    const o = r.querySelector("svg");
-    o && o.setAttribute("aria-hidden", "true"), s.appendChild(r);
-  }
-  return s.appendChild(d("span", { className: "chip-label" }, g)), s.setActive = (r) => {
-    s.classList.toggle("active", r);
-  }, s;
-}
-class et {
-  constructor(e, t) {
-    this.state = e, this.editor = t, this.element = null, this._removeBgBtn = null, this._removeBgTierSelect = null, this._removeBgStatus = null, this._removeBgTier = "balanced", this._unsubscribers = [];
-  }
-  /**
-   * Create and render the toolbar
-   * @returns {HTMLElement}
-   */
-  render() {
-    this.element = d("div", { className: "editor-toolbar" });
-    const e = d("div", { className: "toolbar-section toolbar-left" }), t = j({
-      icon: Ie,
-      title: "Open Image",
-      className: "toolbar-btn",
-      testId: "btn-open-image",
-      ariaLabel: "Open image file",
-      onClick: () => this.editor.openFilePicker()
-    });
-    e.appendChild(t);
-    const i = d("div", { className: "toolbar-section toolbar-right" });
-    this._themeBtn = j({
-      icon: this.state.get("isDarkMode") ? fe : ge,
-      title: "Toggle Theme",
-      className: "toolbar-btn toolbar-btn-theme",
-      testId: "btn-toggle-theme",
-      ariaLabel: "Toggle theme",
-      onClick: () => this.editor.toggleTheme()
-    }), this._cropBtn = j({
-      icon: be,
-      title: "Crop",
-      className: "toolbar-btn toolbar-btn-crop",
-      testId: "btn-crop",
-      ariaLabel: "Crop image",
-      onClick: () => {
-        this.state.get("mode") === "crop" ? this.editor.setMode("filters") : this.editor.setMode("crop");
-      }
-    });
-    const s = d("div", { className: "remove-bg-control" });
-    this._removeBgTierSelect = d("select", {
-      className: "remove-bg-tier-select",
-      title: "Background removal quality",
-      "aria-label": "Background removal quality",
-      dataset: { testid: "select-remove-background-tier" },
-      onChange: (h) => {
-        this._removeBgTier = h.target.value;
-      }
-    });
-    for (const h of [
-      ["fast", "Fast"],
-      ["balanced", "Balanced"],
-      ["best", "Best"]
-    ]) {
-      const c = d("option", { value: h[0] }, h[1]);
-      h[0] === this._removeBgTier && (c.selected = !0), this._removeBgTierSelect.appendChild(c);
-    }
-    this._removeBgBtn = j({
-      icon: Ge,
-      title: "Remove Background",
-      className: "toolbar-btn toolbar-btn-remove-bg",
-      testId: "btn-remove-background",
-      ariaLabel: "Remove background",
-      disabled: !this._canRemoveBackground(),
-      onClick: async () => {
-        if (this._canRemoveBackground()) {
-          this._setRemoveBgStatus("Removing background...");
-          try {
-            await this.editor.removeBackground({ tier: this._removeBgTier }), this._setRemoveBgStatus("Background removed");
-          } catch {
-            this._setRemoveBgStatus("Background removal failed");
-          } finally {
-            this._updateRemoveBgButton();
-          }
-        }
-      }
-    }), this._removeBgStatus = d("span", {
-      className: "sr-only",
-      role: "status",
-      "aria-live": "polite",
-      "aria-atomic": "true"
-    }), s.appendChild(this._removeBgTierSelect), s.appendChild(this._removeBgBtn), s.appendChild(this._removeBgStatus);
-    const r = j({
-      icon: ye,
-      title: "Reset All",
-      className: "toolbar-btn",
-      testId: "btn-reset-all",
-      ariaLabel: "Reset all changes",
-      onClick: () => this.editor.resetAll()
-    }), o = d("button", {
-      type: "button",
-      className: "icon-btn toolbar-btn toolbar-btn-primary toolbar-save-labeled",
-      title: "Save Image",
-      "aria-label": "Save image",
-      dataset: { testid: "btn-save-edit" },
-      onClick: () => this.editor.save()
-    }), n = d("span", { className: "btn-icon" });
-    n.innerHTML = Oe;
-    const a = n.querySelector("svg");
-    a && a.setAttribute("aria-hidden", "true"), o.appendChild(n), o.appendChild(d("span", { className: "toolbar-save-label" }, "Save"));
-    const l = j({
-      icon: ue,
-      title: "Close",
-      className: "toolbar-btn",
-      testId: "btn-cancel-edit",
-      ariaLabel: "Close editor",
-      onClick: () => this.editor.close()
-    });
-    return i.appendChild(this._themeBtn), i.appendChild(this._cropBtn), i.appendChild(s), i.appendChild(r), i.appendChild(o), i.appendChild(l), this.element.appendChild(e), this.element.appendChild(i), this._subscribeToState(), this.element;
-  }
-  /**
-   * Subscribe to state changes
-   */
-  _subscribeToState() {
-    const e = this.state.on("change:isDarkMode", ({ value: l }) => {
-      this._themeBtn.innerHTML = l ? fe : ge;
-    });
-    this._unsubscribers.push(e);
-    const t = this.state.on("change:mode", ({ value: l }) => {
-      this._cropBtn && this._cropBtn.classList.toggle("toolbar-btn-primary", l === "crop");
-    });
-    this._unsubscribers.push(t);
-    const i = this.state.on("change:hasImage", () => this._updateRemoveBgButton());
-    this._unsubscribers.push(i);
-    const s = this.state.on("change:isProcessing", () => this._updateRemoveBgButton());
-    this._unsubscribers.push(s);
-    const r = this.state.on("change:backgroundRemovalAvailable", () => this._updateRemoveBgButton());
-    this._unsubscribers.push(r);
-    const o = this.state.on("change:editorDocument", () => this._updateRemoveBgButton());
-    this._unsubscribers.push(o);
-    const n = this.state.on("change:layers", () => this._updateRemoveBgButton());
-    this._unsubscribers.push(n);
-    const a = this.state.on("change:activeLayerId", () => this._updateRemoveBgButton());
-    this._unsubscribers.push(a);
-  }
-  _canRemoveBackground() {
-    return typeof this.editor.canRemoveBackground == "function" ? this.editor.canRemoveBackground() : !!this.state.get("hasImage") && typeof this.editor.removeBackground == "function";
-  }
-  _updateRemoveBgButton() {
-    if (!this._removeBgBtn) return;
-    const e = this.state.get("isProcessing") === !0, t = !this._canRemoveBackground() || e;
-    this._removeBgBtn.disabled = t, this._removeBgBtn.setAttribute("aria-disabled", t ? "true" : "false"), this._removeBgBtn.setAttribute("aria-busy", e ? "true" : "false"), this._removeBgTierSelect && (this._removeBgTierSelect.disabled = t, this._removeBgTierSelect.setAttribute("aria-disabled", t ? "true" : "false"));
-  }
-  _setRemoveBgStatus(e) {
-    this._removeBgStatus && (this._removeBgStatus.textContent = e);
-  }
-  /**
-   * Clean up
-   */
-  destroy() {
-    var e;
-    this._unsubscribers.forEach((t) => t()), this._unsubscribers = [], (e = this.element) == null || e.remove(), this.element = null;
-  }
-}
-const se = pe;
-class tt {
-  constructor(e, t) {
-    this.state = e, this.editor = t, this.element = null, this._chips = /* @__PURE__ */ new Map(), this._scrollIndex = 0, this._unsubscribers = [];
-  }
-  /**
-   * Create and render the category carousel
-   * @param {Function} onSelect - Callback when category is selected
-   * @returns {HTMLElement}
-   */
-  render(e) {
-    this._onSelect = e, this.element = d("div", {
-      className: "category-carousel-container",
-      "data-testid": "category-carousel"
-    }), this._leftBtn = j({
-      icon: _e,
-      title: "Previous categories",
-      className: "carousel-nav carousel-nav-left",
-      onClick: () => this._scrollLeft()
-    }), this._carousel = d("div", { className: "category-carousel" }), se.forEach((i) => {
-      const s = re({
-        label: i.name,
-        icon: i.icon,
-        active: this.state.get("selectedCategory") === i.id,
-        onClick: () => this._selectCategory(i.id)
-      });
-      s.dataset.categoryId = i.id, s.dataset.category = i.id, s.dataset.testid = `category-${i.id}`, this._chips.set(i.id, s), this._carousel.appendChild(s);
-    }), this._rightBtn = j({
-      icon: me,
-      title: "Next categories",
-      className: "carousel-nav carousel-nav-right",
-      onClick: () => this._scrollRight()
-    }), this._pagination = d("div", {
-      className: "carousel-pagination",
-      role: "tablist",
-      "aria-label": "Category pages"
-    });
-    const t = Math.ceil(se.length / 3);
-    for (let i = 0; i < t; i++) {
-      const s = d("button", {
-        type: "button",
-        className: `pagination-dot ${i === 0 ? "active" : ""}`,
-        role: "tab",
-        "aria-label": `Page ${i + 1} of ${t}`,
-        "aria-selected": i === 0 ? "true" : "false",
-        onClick: () => this._scrollToPage(i)
-      });
-      this._pagination.appendChild(s);
-    }
-    return this.element.appendChild(this._leftBtn), this.element.appendChild(this._carousel), this.element.appendChild(this._rightBtn), this.element.appendChild(this._pagination), this._subscribeToState(), this._updateNavButtons(), this.element;
-  }
-  /**
-   * Subscribe to state changes
-   */
-  _subscribeToState() {
-    const e = this.state.on("change:selectedCategory", ({ value: t }) => {
-      this._chips.forEach((i, s) => {
-        i.setActive(s === t);
-      });
-    });
-    this._unsubscribers.push(e);
-  }
-  /**
-   * Select a category
-   * @param {string} categoryId
-   */
-  _selectCategory(e) {
-    var s;
-    this.state.set("selectedCategory", e);
-    const t = this.state.get("mode");
-    e === "crop" ? t !== "crop" && this.editor.setMode("crop") : t !== "filters" && this.editor.setMode("filters");
-    const i = this._chips.get(e);
-    i && this._carousel && i.scrollIntoView({ behavior: "smooth", inline: "center", block: "nearest" }), (s = this._onSelect) == null || s.call(this, e);
-  }
-  /**
-   * Scroll carousel left
-   */
-  _scrollLeft() {
-    this._scrollIndex > 0 && (this._scrollIndex--, this._scrollCarousel());
-  }
-  /**
-   * Scroll carousel right
-   */
-  _scrollRight() {
-    this._scrollIndex < se.length - 3 && (this._scrollIndex++, this._scrollCarousel());
-  }
-  /**
-   * Scroll to a specific page
-   * @param {number} pageIndex
-   */
-  _scrollToPage(e) {
-    this._scrollIndex = e * 3, this._scrollCarousel();
-  }
-  /**
-   * Animate carousel scroll
-   */
-  _scrollCarousel() {
-    if (this._carousel) {
-      const e = this._carousel.querySelector(".chip"), t = (e == null ? void 0 : e.clientWidth) || 100;
-      this._carousel.scrollTo({
-        left: this._scrollIndex * (t + 8),
-        // 8px gap
-        behavior: "smooth"
-      });
-    }
-    this._updateNavButtons(), this._updatePagination();
-  }
-  /**
-   * Update navigation button states
-   */
-  _updateNavButtons() {
-    this._leftBtn && (this._leftBtn.disabled = this._scrollIndex === 0), this._rightBtn && (this._rightBtn.disabled = this._scrollIndex >= se.length - 3);
-  }
-  /**
-   * Update pagination dot states
-   */
-  _updatePagination() {
-    if (this._pagination) {
-      const e = this._pagination.querySelectorAll(".pagination-dot"), t = Math.floor(this._scrollIndex / 3);
-      e.forEach((i, s) => {
-        const r = s === t;
-        i.classList.toggle("active", r), i.setAttribute("aria-selected", r ? "true" : "false");
-      });
-    }
-  }
-  /**
-   * Set the selected category
-   * @param {string} categoryId
-   */
-  setSelected(e) {
-    this._selectCategory(e);
-  }
-  /**
-   * Clean up
-   */
-  destroy() {
-    var e;
-    this._unsubscribers.forEach((t) => t()), this._unsubscribers = [], this._chips.clear(), (e = this.element) == null || e.remove(), this.element = null;
-  }
-}
-class it {
-  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;
-  }
-  /**
-   * Create and render the filter carousel
-   * @param {Object} options - { onToggle, onSelect }
-   * @returns {HTMLElement}
-   */
-  render({ onToggle: e, onSelect: t }) {
-    return this._onToggle = e, this._onSelect = t, this.element = d("div", { className: "filter-carousel-container" }), this._leftBtn = j({
-      icon: _e,
-      title: "Previous filters",
-      className: "carousel-nav carousel-nav-left",
-      onClick: () => this._scrollLeft()
-    }), this._carousel = d("div", { className: "filter-carousel" }), this._rightBtn = j({
-      icon: me,
-      title: "Next filters",
-      className: "carousel-nav carousel-nav-right",
-      onClick: () => this._scrollRight()
-    }), this.element.appendChild(this._leftBtn), this.element.appendChild(this._carousel), this.element.appendChild(this._rightBtn), this._subscribeToState(), this._renderFilters(), this.element;
-  }
-  /**
-   * Subscribe to state changes
-   */
-  _subscribeToState() {
-    const e = this.state.on("change:selectedCategory", () => {
-      this._renderFilters();
-    });
-    this._unsubscribers.push(e);
-    const t = this.state.on("change:activeFilters", () => {
-      this._updateActiveStates();
-    });
-    this._unsubscribers.push(t);
-    const i = this.state.on("change:selectedFilter", () => {
-      this._updateSelectedState();
-    });
-    this._unsubscribers.push(i);
-  }
-  /**
-   * Render filters for current category
-   */
-  _renderFilters() {
-    this._carousel.innerHTML = "", this._filterCards.clear(), this._scrollIndex = 0;
-    const e = this.state.get("selectedCategory");
-    if (e === "crop") return;
-    const t = this.filterManager.getFiltersByCategory(e), i = this.state.get("activeFilters"), s = this.state.get("selectedFilter");
-    t.forEach((r) => {
-      const o = this._createFilterCard(r, {
-        isActive: i.has(r.id),
-        isSelected: s === r.id
-      });
-      this._filterCards.set(r.id, o), this._carousel.appendChild(o);
-    }), this._updateNavButtons();
-  }
-  /**
-   * Create a filter card
-   * @param {Object} filter
-   * @param {Object} options
-   * @returns {HTMLElement}
-   */
-  _createFilterCard(e, { isActive: t, isSelected: i }) {
-    const s = d("div", {
-      className: `filter-card ${t ? "active" : ""} ${i ? "selected" : ""}`,
-      "data-filter": e.id,
-      "data-testid": `filter-${e.id}`,
-      onClick: () => this._handleCardClick(e.id)
-    }), r = d("div", { className: "filter-preview" }), o = d("span", { className: "filter-preview-text" }, e.name.charAt(0));
-    r.appendChild(o);
-    const n = d("span", { className: "filter-name", title: e.name }, e.name), a = d("button", {
-      className: `filter-toggle ${t ? "active" : ""}`,
-      onClick: (l) => {
-        var p;
-        l.stopPropagation();
-        const c = !this.state.get("activeFilters").has(e.id);
-        this._handleToggle(e.id, c), c && (this.state.set("selectedFilter", e.id), (p = this._onSelect) == null || p.call(this, e.id));
-      }
-    });
-    return a.innerHTML = t ? ce : "", s.appendChild(r), s.appendChild(n), s.appendChild(a), s._toggle = a, s._isActive = t, s;
-  }
-  /**
-   * Handle filter card click (select)
-   * @param {string} filterId
-   */
-  _handleCardClick(e) {
-    var i;
-    this.state.get("activeFilters").has(e) || this._handleToggle(e, !0), this.state.set("selectedFilter", e), (i = this._onSelect) == null || i.call(this, e);
-  }
-  /**
-   * Handle filter toggle
-   * @param {string} filterId
-   * @param {boolean} enabled
-   */
-  _handleToggle(e, t) {
-    var i;
-    (i = this._onToggle) == null || i.call(this, e, t);
-  }
-  /**
-   * Update active states based on state
-   */
-  _updateActiveStates() {
-    const e = this.state.get("activeFilters");
-    this._filterCards.forEach((t, i) => {
-      const s = e.has(i);
-      t.classList.toggle("active", s), t._toggle.classList.toggle("active", s), t._toggle.innerHTML = s ? ce : "", t._isActive = s;
-    });
-  }
-  /**
-   * Update selected state based on state
-   */
-  _updateSelectedState() {
-    const e = this.state.get("selectedFilter");
-    this._filterCards.forEach((t, i) => {
-      t.classList.toggle("selected", i === e);
-    });
-  }
-  /**
-   * Scroll carousel left
-   */
-  _scrollLeft() {
-    this._scrollIndex > 0 && (this._scrollIndex--, this._scrollCarousel());
-  }
-  /**
-   * Scroll carousel right
-   */
-  _scrollRight() {
-    const e = Math.max(0, this._filterCards.size - 3);
-    this._scrollIndex < e && (this._scrollIndex++, this._scrollCarousel());
-  }
-  /**
-   * Animate carousel scroll
-   */
-  _scrollCarousel() {
-    if (this._carousel) {
-      const e = this._carousel.querySelector(".filter-card"), t = (e == null ? void 0 : e.clientWidth) || 120;
-      this._carousel.scrollTo({
-        left: this._scrollIndex * (t + 8),
-        behavior: "smooth"
-      });
-    }
-    this._updateNavButtons();
-  }
-  /**
-   * Update navigation button states
-   */
-  _updateNavButtons() {
-    const e = Math.max(0, this._filterCards.size - 3);
-    this._leftBtn && (this._leftBtn.disabled = this._scrollIndex === 0), this._rightBtn && (this._rightBtn.disabled = this._scrollIndex >= e);
-  }
-  /**
-   * Clean up
-   */
-  destroy() {
-    var e;
-    this._unsubscribers.forEach((t) => t()), this._unsubscribers = [], this._filterCards.clear(), (e = this.element) == null || e.remove(), this.element = null;
-  }
-}
-class st {
-  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 = [];
-  }
-  /**
-   * Create and render the filter adjustments panel
-   * @param {Object} options - { onChange, onReset, onAction }
-   * @returns {HTMLElement}
-   */
-  render({ onChange: e, onReset: t, onAction: i }) {
-    return this._onChange = e, this._onReset = t, this._onAction = i, this.element = d("div", { className: "filter-adjustments" }), this._subscribeToState(), this._renderControls(), this.element;
-  }
-  /**
-   * Subscribe to state changes
-   */
-  _subscribeToState() {
-    const e = this.state.on("change:selectedFilter", () => {
-      this._renderControls();
-    });
-    this._unsubscribers.push(e);
-    const t = this.state.on("change:filterValues", () => {
-      this._updateValues();
-    });
-    this._unsubscribers.push(t);
-  }
-  /**
-   * Render controls for the selected filter.
-   *
-   * Renders both the static controls from def.controls and any dynamic
-   * controls the filter instance exposes via getDynamicControls() (e.g.
-   * per-stop color/offset/alpha rows for Color Gradient).
-   */
-  _renderControls() {
-    this.element.innerHTML = "", this._controls.clear();
-    const e = this.state.get("selectedFilter");
-    if (!e) {
-      this.element.appendChild(
-        d("div", { className: "no-filter-selected" }, "Select a filter to adjust")
-      );
-      return;
-    }
-    const t = this.filterManager.getFilterDef(e);
-    if (!t) {
-      this.element.appendChild(
-        d("div", { className: "no-filter-selected" }, "Filter not found")
-      );
-      return;
-    }
-    const i = d("div", { className: "adjustments-header" });
-    i.appendChild(d("span", { className: "adjustments-title" }, t.name)), i.appendChild(D({
-      label: "Reset",
-      className: "btn-text",
-      onClick: () => this._handleReset(e)
-    })), this.element.appendChild(i);
-    const s = d("div", { className: "adjustments-grid" }), r = this.state.getFilterValues(e);
-    (t.controls || []).forEach((n) => {
-      const a = r[n.id] ?? n.default, l = this._createControl(e, n, a);
-      l && (this._controls.set(n.id, l), s.appendChild(l));
-    });
-    const o = this.filterManager.getInstance(e);
-    if (o && typeof o.getDynamicControls == "function") {
-      let n = [];
-      try {
-        n = o.getDynamicControls() || [];
-      } catch {
-      }
-      n.forEach((a) => {
-        const l = a.property || a.id, h = r[l] ?? a.default, c = this._createControl(e, a, h);
-        c && (this._controls.set(a.id, c), s.appendChild(c));
-      });
-    }
-    this.element.appendChild(s);
-  }
-  /**
-   * Create a control element based on type.
-   *
-   * The update key passed to _handleChange is `ctl.property || ctl.id`.
-   * Dynamic controls (e.g. from getDynamicControls) use their property
-   * path (e.g. 'colorStops[0].color') so FilterManager.updateValue can
-   * route the write correctly. Static controls without a property fall
-   * back to the control id, matching the legacy contract.
-   *
-   * @param {string} filterId
-   * @param {Object} ctl - Control definition
-   * @param {*} value - Current value
-   * @returns {HTMLElement|null}
-   */
-  _createControl(e, t, i) {
-    if (t.hidden) return null;
-    const s = t.label || t.id, r = this._normalizeControlType(t.type), o = t.property || t.id;
-    switch (r) {
-      case "slider":
-        return ve({
-          id: `${e}-${t.id}`,
-          label: s,
-          min: t.min ?? 0,
-          max: t.max ?? 1,
-          step: t.step ?? 0.01,
-          value: typeof i == "number" ? i : t.default ?? 0,
-          onChange: (l) => this._handleChange(e, o, l)
-        });
-      case "toggle":
-        return we({
-          id: `${e}-${t.id}`,
-          label: s,
-          checked: !!i,
-          onChange: (l) => this._handleChange(e, o, l)
-        });
-      case "color":
-        return xe({
-          id: `${e}-${t.id}`,
-          label: s,
-          value: typeof i == "string" && i.startsWith("#") ? i : t.default || "#000000",
-          onChange: (l) => this._handleChange(e, o, l)
-        });
-      case "select":
-        const n = this._normalizeOptions(t.options);
-        return ke({
-          id: `${e}-${t.id}`,
-          label: s,
-          options: n,
-          value: i ?? t.default,
-          onChange: (l) => this._handleChange(e, o, l)
-        });
-      case "text":
-        return Ce({
-          id: `${e}-${t.id}`,
-          label: s,
-          value: typeof i == "string" ? i : t.default ?? "",
-          placeholder: t.placeholder || "",
-          onCommit: (l) => this._handleChange(e, o, l)
-        });
-      case "button":
-        const a = d("div", { className: "button-control" });
-        return a.appendChild(D({
-          label: s,
-          className: "btn-secondary",
-          onClick: () => this._handleAction(e, t.action || t.id)
-        })), a;
-      default:
-        return null;
-    }
-  }
-  /**
-   * Normalize control type (handle aliases)
-   * @param {string} type
-   * @returns {string}
-   */
-  _normalizeControlType(e) {
-    return {
-      slider: "slider",
-      range: "slider",
-      toggle: "toggle",
-      checkbox: "toggle",
-      color: "color",
-      select: "select",
-      dropdown: "select",
-      button: "button",
-      text: "text"
-    }[e] || e;
-  }
-  /**
-   * Normalize options array format
-   * @param {Array} options
-   * @returns {Array}
-   */
-  _normalizeOptions(e) {
-    return !e || !Array.isArray(e) ? [] : e.map((t) => typeof t == "object" && t.value !== void 0 ? { value: t.value, label: t.label || String(t.value) } : typeof t == "string" ? { value: t, label: t } : typeof t == "number" ? { value: t, label: String(t) } : { value: t, label: String(t) });
-  }
-  /**
-   * Handle control value change
-   * @param {string} filterId
-   * @param {string} controlId
-   * @param {*} value
-   */
-  _handleChange(e, t, i) {
-    var s;
-    (s = this._onChange) == null || s.call(this, e, t, i);
-  }
-  /**
-   * Handle reset button
-   * @param {string} filterId
-   */
-  _handleReset(e) {
-    var t;
-    (t = this._onReset) == null || t.call(this, e), this._renderControls();
-  }
-  /**
-   * Handle button action. Dynamic controls (e.g. color stop rows) depend on
-   * filter state that can change as a result of the action (add/remove stop),
-   * so re-render after the action completes.
-   *
-   * @param {string} filterId
-   * @param {string} action
-   */
-  _handleAction(e, t) {
-    var i;
-    (i = this._onAction) == null || i.call(this, e, t), this._renderControls();
-  }
-  /**
-   * Update control values from state
-   */
-  _updateValues() {
-    const e = this.state.get("selectedFilter");
-    if (!e) return;
-    const t = this.state.getFilterValues(e), i = this.filterManager.getFilterDef(e);
-    i && i.controls.forEach((s) => {
-      const r = this._controls.get(s.id);
-      if (r && typeof r.setValue == "function") {
-        const o = t[s.id] ?? s.default;
-        r.setValue(o);
-      }
-    });
-  }
-  /**
-   * Show panel
-   */
-  show() {
-    this.element && (this.element.style.display = "");
-  }
-  /**
-   * Hide panel
-   */
-  hide() {
-    this.element && (this.element.style.display = "none");
-  }
-  /**
-   * Clean up
-   */
-  destroy() {
-    var e;
-    this._unsubscribers.forEach((t) => t()), this._unsubscribers = [], this._controls.clear(), (e = this.element) == null || e.remove(), this.element = null;
-  }
-}
-class rt {
-  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;
-  }
-  /**
-   * Build the drawer DOM and append to container (should be the controls section)
-   * @param {HTMLElement} container - Parent element (controls-section)
-   * @param {Object} callbacks - { onChange, onReset, onRemove, onAction }
-   */
-  build(e, { onChange: t, onReset: i, onRemove: s, onAction: r }) {
-    this._onChange = t, this._onReset = i, this._onRemove = s, this._onAction = r, 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" }), a = D({
-      label: "Reset",
-      className: "btn-text",
-      onClick: () => {
-        var c;
-        this._currentFilterId && ((c = this._onReset) == null || c.call(this, this._currentFilterId), this._renderControls());
-      }
-    }), l = D({
-      label: "Remove",
-      className: "btn-text btn-danger",
-      onClick: () => {
-        var c;
-        this._currentFilterId && ((c = this._onRemove) == null || c.call(this, this._currentFilterId), this.close());
-      }
-    }), h = j({
-      icon: ue,
-      title: "Close",
-      className: "btn-icon-sm",
-      ariaLabel: "Close drawer",
-      onClick: () => this.close()
-    });
-    n.appendChild(a), n.appendChild(l), n.appendChild(h), 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
-   * @param {string} filterId
-   */
-  open(e) {
-    this._isOpen && this._currentFilterId === e || (this._currentFilterId = e, this._renderControls(), this._isOpen || (this._isOpen = !0, this._sizeToContainer(), this._animateOpen()));
-  }
-  /**
-   * Close the drawer
-   */
-  close() {
-    this._isOpen && (this._isOpen = !1, this._animateClose(), this._currentFilterId = null);
-  }
-  /**
-   * Check if drawer is open
-   * @returns {boolean}
-   */
-  get isOpen() {
-    return this._isOpen;
-  }
-  /**
-   * Size the drawer to match the container (controls section) height
-   */
-  _sizeToContainer() {
-    if (!this._container || !this._drawer) return;
-    const e = this._container.offsetHeight;
-    e > 0 && (this._drawer.style.height = e + "px");
-  }
-  /**
-   * Animate drawer open (CSS transition)
-   */
-  _animateOpen() {
-    this._drawer.style.transition = "none", this._drawer.style.transform = "translateY(100%)", this._drawer.offsetHeight, this._drawer.style.transition = "transform 0.25s cubic-bezier(0.33, 1, 0.68, 1)", this._drawer.style.transform = "translateY(0)";
-  }
-  /**
-   * Animate drawer close (CSS transition)
-   */
-  _animateClose() {
-    this._drawer.style.transition = "transform 0.2s cubic-bezier(0.32, 0, 0.67, 0)", this._drawer.style.transform = "translateY(100%)";
-  }
-  /**
-   * Render controls for the current filter.
-   * Renders both static (def.controls) and dynamic (instance.getDynamicControls)
-   * controls so filters like Color Gradient show per-stop rows.
-   */
-  _renderControls() {
-    if (this._body.innerHTML = "", this._controls.clear(), !this._currentFilterId) return;
-    const e = this.filterManager.getFilterDef(this._currentFilterId);
-    if (!e) return;
-    this._titleEl.textContent = e.name;
-    const t = d("div", { className: "adjustments-grid" }), i = this.state.getFilterValues(this._currentFilterId);
-    (e.controls || []).forEach((r) => {
-      if (r.hidden) return;
-      const o = this._createControl(this._currentFilterId, r, i[r.id] ?? r.default);
-      o && (this._controls.set(r.id, o), t.appendChild(o));
-    });
-    const s = this.filterManager.getInstance(this._currentFilterId);
-    if (s && typeof s.getDynamicControls == "function") {
-      let r = [];
-      try {
-        r = s.getDynamicControls() || [];
-      } catch {
-      }
-      r.forEach((o) => {
-        const n = o.property || o.id, a = i[n] ?? o.default, l = this._createControl(this._currentFilterId, o, a);
-        l && (this._controls.set(o.id, l), t.appendChild(l));
-      });
-    }
-    this._body.appendChild(t);
-  }
-  /**
-   * Create a control element based on type. See FilterAdjustments._createControl
-   * for the update-key contract (property path for dynamic controls, id for static).
-   * @param {string} filterId
-   * @param {Object} ctl
-   * @param {*} value
-   * @returns {HTMLElement|null}
-   */
-  _createControl(e, t, i) {
-    if (t.hidden) return null;
-    const s = t.label || t.id, r = this._normalizeControlType(t.type), o = t.property || t.id;
-    switch (r) {
-      case "slider":
-        return ve({
-          id: `drawer-${e}-${t.id}`,
-          label: s,
-          min: t.min ?? 0,
-          max: t.max ?? 1,
-          step: t.step ?? 0.01,
-          value: typeof i == "number" ? i : t.default ?? 0,
-          onChange: (n) => {
-            var a;
-            return (a = this._onChange) == null ? void 0 : a.call(this, e, o, n);
-          }
-        });
-      case "toggle":
-        return we({
-          id: `drawer-${e}-${t.id}`,
-          label: s,
-          checked: !!i,
-          onChange: (n) => {
-            var a;
-            return (a = this._onChange) == null ? void 0 : a.call(this, e, o, n);
-          }
-        });
-      case "color":
-        return xe({
-          id: `drawer-${e}-${t.id}`,
-          label: s,
-          value: typeof i == "string" && i.startsWith("#") ? i : t.default || "#000000",
-          onChange: (n) => {
-            var a;
-            return (a = this._onChange) == null ? void 0 : a.call(this, e, o, n);
-          }
-        });
-      case "select": {
-        const n = this._normalizeOptions(t.options);
-        return ke({
-          id: `drawer-${e}-${t.id}`,
-          label: s,
-          options: n,
-          value: i ?? t.default,
-          onChange: (a) => {
-            var l;
-            return (l = this._onChange) == null ? void 0 : l.call(this, e, o, a);
-          }
-        });
-      }
-      case "text":
-        return Ce({
-          id: `drawer-${e}-${t.id}`,
-          label: s,
-          value: typeof i == "string" ? i : t.default ?? "",
-          placeholder: t.placeholder || "",
-          onCommit: (n) => {
-            var a;
-            return (a = this._onChange) == null ? void 0 : a.call(this, e, o, n);
-          }
-        });
-      case "button": {
-        const n = d("div", { className: "button-control" });
-        return n.appendChild(D({
-          label: s,
-          className: "btn-secondary",
-          onClick: () => {
-            var a;
-            (a = this._onAction) == null || a.call(this, e, t.action || t.id), this._renderControls();
-          }
-        })), n;
-      }
-      default:
-        return null;
-    }
-  }
-  /**
-   * Normalize control type
-   * @param {string} type
-   * @returns {string}
-   */
-  _normalizeControlType(e) {
-    return {
-      slider: "slider",
-      range: "slider",
-      toggle: "toggle",
-      checkbox: "toggle",
-      color: "color",
-      select: "select",
-      dropdown: "select",
-      button: "button",
-      text: "text"
-    }[e] || e;
-  }
-  /**
-   * Normalize options array
-   * @param {Array} options
-   * @returns {Array}
-   */
-  _normalizeOptions(e) {
-    return !e || !Array.isArray(e) ? [] : e.map((t) => typeof t == "object" && t.value !== void 0 ? { value: t.value, label: t.label || String(t.value) } : typeof t == "string" ? { value: t, label: t } : typeof t == "number" ? { value: t, label: String(t) } : { value: t, label: String(t) });
-  }
-  /**
-   * Clean up
-   */
-  destroy() {
-    var e;
-    this._controls.clear(), (e = this._drawer) == null || e.remove(), this._drawer = null, this._isOpen = !1, this._currentFilterId = null, this._container = null;
-  }
-}
-class nt {
-  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;
-  }
-  /**
-   * @param {Object} callbacks - { onToggle(filterId, enabled), onSelect(filterId) }
-   * @returns {HTMLElement}
-   */
-  render({ onToggle: e, onSelect: t }) {
-    return this._onToggle = e, this._onSelect = t, this.element = d("div", {
-      className: "mobile-active-filters",
-      "data-testid": "mobile-active-filters"
-    }), this._scrollContainer = d("div", { className: "mobile-active-filters-scroll" }), this.element.appendChild(this._scrollContainer), this._subscribeToState(), this._renderChips(), this.element;
-  }
-  _subscribeToState() {
-    const e = this.state.on("change:activeFilters", () => {
-      this._renderChips();
-    });
-    this._unsubscribers.push(e);
-    const t = this.state.on("change:selectedFilter", () => {
-      this._updateSelectedState();
-    });
-    this._unsubscribers.push(t);
-  }
-  _renderChips() {
-    this._scrollContainer.innerHTML = "", this._chips.clear();
-    const e = this.state.get("activeFilters");
-    if (!e || e.size === 0) {
-      const t = d("div", {
-        className: "active-filter-placeholder"
-      }, "No active filters");
-      this._scrollContainer.appendChild(t);
-      return;
-    }
-    e.forEach((t) => {
-      const i = this.filterManager.getFilterDef(t);
-      if (!i) return;
-      const s = this._createChip(t, i);
-      this._chips.set(t, s), this._scrollContainer.appendChild(s);
-    }), this._updateSelectedState();
-  }
-  _createChip(e, t) {
-    const i = d("div", {
-      className: "active-filter-chip",
-      "data-filter-id": e,
-      "data-testid": `active-chip-${e}`
-    }), s = d("span", {
-      className: "active-filter-chip-label",
-      onClick: (o) => {
-        var n;
-        o.stopPropagation(), (n = this._onSelect) == null || n.call(this, e);
-      }
-    }, t.name), r = d("button", {
-      className: "active-filter-chip-check",
-      "aria-label": `Remove ${t.name} filter`,
-      onClick: (o) => {
-        var n;
-        o.stopPropagation(), (n = this._onToggle) == null || n.call(this, e, !1);
-      }
-    });
-    return r.innerHTML = '<svg width="10" height="10" viewBox="0 0 12 12"><path d="M2 6l3 3 5-5" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>', i.appendChild(s), i.appendChild(r), i;
-  }
-  _updateSelectedState() {
-    const e = this.state.get("selectedFilter");
-    this._chips.forEach((t, i) => {
-      t.classList.toggle("selected", i === e);
-    });
-  }
-  destroy() {
-    var e;
-    this._unsubscribers.forEach((t) => t()), this._unsubscribers = [], this._chips.clear(), (e = this.element) == null || e.remove(), this.element = null;
-  }
-}
-const ot = [
-  { id: "free", name: "Free", icon: Ze },
-  { id: "square", name: "Square", icon: We },
-  { id: "circle", name: "Circle", icon: $e }
-], at = [
-  { id: "free", name: "Free" },
-  { id: "1:1", name: "1:1" },
-  { id: "4:3", name: "4:3" },
-  { id: "16:9", name: "16:9" },
-  { id: "3:2", name: "3:2" },
-  { id: "2:3", name: "2:3" }
-], lt = [
-  { id: "0", label: "0°", angle: 0 },
-  { id: "90", label: "90°", angle: 90 },
-  { id: "180", label: "180°", angle: 180 },
-  { id: "270", label: "270°", angle: 270 }
-];
-function $(g) {
-  if (!Number.isFinite(Number(g))) return 0;
-  const e = Number(g) % 360;
-  return e < 0 ? e + 360 : e;
-}
-class ht {
-  constructor(e, t, i = null) {
-    this.state = e, this.cropManager = t, this.editor = i, this.element = null, this._shapeChips = /* @__PURE__ */ new Map(), this._aspectChips = /* @__PURE__ */ new Map(), this._rotationPresetChips = /* @__PURE__ */ new Map(), this._rotationRange = null, this._rotationNumber = null, this._rotationValue = null, this._unsubscribers = [];
-  }
-  /**
-   * Apply crop and return the editor UI to filter mode.
-   * 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 = d("div", {
-      className: "crop-controls",
-      "data-testid": "crop-controls"
-    }), this.element.appendChild(this._renderRotationSection());
-    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");
-    ot.forEach((l) => {
-      const h = re({
-        label: l.name,
-        icon: l.icon,
-        active: i === l.id,
-        onClick: () => this._selectShape(l.id)
-      });
-      h.dataset.shape = l.id, h.dataset.testid = `crop-shape-${l.id}`, this._shapeChips.set(l.id, h), t.appendChild(h);
-    }), 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 s = d("div", { className: "chip-row aspect-row" }), r = this.state.get("crop.aspect");
-    at.forEach((l) => {
-      const h = re({
-        label: l.name,
-        active: r === l.id,
-        onClick: () => this._selectAspect(l.id)
-      });
-      h.dataset.ratio = l.id, h.dataset.testid = `crop-ratio-${l.id}`, this._aspectChips.set(l.id, h), s.appendChild(h);
-    }), this._aspectSection.appendChild(s), this.element.appendChild(this._aspectSection), this._updateAspectVisibility();
-    const o = d("div", { className: "crop-actions" }), n = D({
-      label: "Cancel",
-      className: "btn-secondary crop-cancel-btn",
-      icon: ue,
-      onClick: () => this.cropManager.cancel()
-    });
-    n.dataset.testid = "cancel-crop";
-    const a = D({
-      label: "Apply Crop",
-      className: "btn-primary crop-apply-btn",
-      icon: ce,
-      onClick: () => this._applyCropAndReturnToFilters()
-    });
-    return a.dataset.testid = "apply-crop", o.appendChild(n), o.appendChild(a), this.element.appendChild(o), this._subscribeToState(), this.element;
-  }
-  _renderRotationSection() {
-    const e = d("div", { className: "crop-section rotation-section" });
-    e.appendChild(d("label", { className: "section-label" }, "Rotate"));
-    const t = d("div", { className: "rotation-action-row" }), i = D({
-      label: "Left 90°",
-      className: "btn-secondary rotation-action-btn",
-      icon: ze,
-      onClick: () => this._rotateBy(-90)
-    });
-    i.dataset.testid = "rotate-left-90";
-    const s = D({
-      label: "Right 90°",
-      className: "btn-secondary rotation-action-btn",
-      icon: Pe,
-      onClick: () => this._rotateBy(90)
-    });
-    s.dataset.testid = "rotate-right-90";
-    const r = D({
-      label: "Rotate 180°",
-      className: "btn-secondary rotation-action-btn",
-      onClick: () => this._rotateBy(180)
-    });
-    r.dataset.testid = "rotate-180";
-    const o = D({
-      label: "Rotate 270°",
-      className: "btn-secondary rotation-action-btn",
-      onClick: () => this._rotateBy(270)
-    });
-    o.dataset.testid = "rotate-270", t.appendChild(i), t.appendChild(s), t.appendChild(r), t.appendChild(o), e.appendChild(t);
-    const n = d("div", { className: "chip-row rotation-preset-row" }), a = $(this.state.get("transform.rotation") ?? 0);
-    lt.forEach((u) => {
-      const f = re({
-        label: u.label,
-        active: Math.round(a) === u.angle,
-        onClick: () => this._setRotation(u.angle)
-      });
-      f.dataset.angle = u.id, f.dataset.testid = `rotation-preset-${u.id}`, this._rotationPresetChips.set(u.id, f), n.appendChild(f);
-    }), e.appendChild(n);
-    const l = d("div", { className: "rotation-arbitrary" }), h = d(
-      "div",
-      { className: "rotation-angle-header" },
-      d("label", { className: "rotation-angle-label", for: "image-editor-rotation-angle" }, "Angle"),
-      d("span", { className: "rotation-angle-value" }, this._formatAngle(a))
-    );
-    this._rotationValue = h.querySelector(".rotation-angle-value"), this._rotationRange = d("input", {
-      id: "image-editor-rotation-angle",
-      type: "range",
-      className: "slider-input rotation-range",
-      min: "0",
-      max: "360",
-      step: "1",
-      value: String(Math.round(a)),
-      "aria-label": "Rotation angle",
-      onInput: (u) => this._previewAngleValue(u.target.value),
-      onChange: (u) => this._setRotation(Number(u.target.value))
-    }), this._rotationNumber = d("input", {
-      type: "number",
-      className: "text-input rotation-number-input",
-      min: "-360",
-      max: "360",
-      step: "1",
-      value: this._formatPlainAngle(a),
-      "aria-label": "Rotation angle in degrees",
-      onKeyDown: (u) => {
-        u.key === "Enter" && (u.preventDefault(), this._setRotation(Number(u.target.value)), u.target.blur());
-      },
-      onBlur: (u) => this._setRotation(Number(u.target.value))
-    });
-    const c = d(
-      "div",
-      { className: "rotation-angle-row" },
-      this._rotationRange,
-      this._rotationNumber
-    );
-    l.appendChild(h), l.appendChild(c);
-    const p = D({
-      label: "Reset rotation",
-      className: "btn-text rotation-reset-btn",
-      onClick: () => this._setRotation(0)
-    });
-    return p.dataset.testid = "reset-rotation", l.appendChild(p), e.appendChild(l), e;
-  }
-  /**
-   * Subscribe to state changes
-   */
-  _subscribeToState() {
-    const e = this.state.on("change:crop.shape", ({ value: s }) => {
-      this._shapeChips.forEach((r, o) => {
-        r.setActive(o === s);
-      }), this._updateAspectVisibility();
-    });
-    this._unsubscribers.push(e);
-    const t = this.state.on("change:crop.aspect", ({ value: s }) => {
-      this._aspectChips.forEach((r, o) => {
-        r.setActive(o === s);
-      });
-    });
-    this._unsubscribers.push(t);
-    const i = this.state.on("change:transform.rotation", ({ value: s }) => {
-      this._syncRotationControls(s);
-    });
-    this._unsubscribers.push(i);
-  }
-  _rotateBy(e) {
-    var i, s;
-    ((s = (i = this.editor) == null ? void 0 : i.rotateBy) == null ? void 0 : s.call(i, e)) !== !1 && this._syncRotationControls(this.state.get("transform.rotation") ?? 0);
-  }
-  _setRotation(e) {
-    var s, r;
-    const t = $(e);
-    if (((r = (s = this.editor) == null ? void 0 : s.setRotationAngle) == null ? void 0 : r.call(s, t)) === !1) {
-      this._syncRotationControls(this.state.get("transform.rotation") ?? 0);
-      return;
-    }
-    this._syncRotationControls(t);
-  }
-  _previewAngleValue(e) {
-    const t = $(Number(e));
-    this._rotationValue && (this._rotationValue.textContent = this._formatAngle(t)), this._rotationNumber && (this._rotationNumber.value = this._formatPlainAngle(t)), this._refreshPresetChips(t);
-  }
-  _syncRotationControls(e) {
-    const t = $(e);
-    this._rotationValue && (this._rotationValue.textContent = this._formatAngle(t)), this._rotationRange && (this._rotationRange.value = String(Math.round(t))), this._rotationNumber && (this._rotationNumber.value = this._formatPlainAngle(t)), this._refreshPresetChips(t);
-  }
-  _refreshPresetChips(e) {
-    const t = Math.round($(e)) % 360;
-    this._rotationPresetChips.forEach((i, s) => {
-      i.setActive(Number(s) === t);
-    });
-  }
-  _formatAngle(e) {
-    return `${this._formatPlainAngle(e)}°`;
-  }
-  _formatPlainAngle(e) {
-    const t = $(e);
-    return Number.isInteger(t) ? String(t) : t.toFixed(1);
-  }
-  /**
-   * Select a crop shape
-   * @param {string} shapeId
-   */
-  _selectShape(e) {
-    this.cropManager.setShape(e);
-  }
-  /**
-   * Select an aspect ratio
-   * @param {string} aspectId
-   */
-  _selectAspect(e) {
-    this.cropManager.setAspect(e);
-  }
-  /**
-   * Update aspect ratio section visibility
-   */
-  _updateAspectVisibility() {
-    const e = this.state.get("crop.shape"), t = this.state.get("lockAspectRatio");
-    this._aspectSection && (this._aspectSection.style.display = e === "free" && !t ? "" : "none");
-  }
-  /**
-   * Show controls
-   */
-  show() {
-    this.element && (this.element.style.display = "");
-  }
-  /**
-   * Hide controls
-   */
-  hide() {
-    this.element && (this.element.style.display = "none");
-  }
-  /**
-   * Clean up
-   */
-  destroy() {
-    var e;
-    this._unsubscribers.forEach((t) => t()), this._unsubscribers = [], this._shapeChips.clear(), this._aspectChips.clear(), this._rotationPresetChips.clear(), (e = this.element) == null || e.remove(), this.element = null;
-  }
-}
-class ct {
-  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;
-  }
-  /**
-   * Create and render the active filters panel
-   * @param {Object} options - { onRemove, onReset, onClearAll, onUpdateValue, onSelect }
-   * @returns {HTMLElement}
-   */
-  render({ onRemove: e, onReset: t, onClearAll: i, onUpdateValue: s, onSelect: r }) {
-    this._onRemove = e, this._onReset = t, this._onClearAll = i, this._onUpdateValue = s, this._onSelect = r, this.element = d("div", {
-      className: "active-filters-panel",
-      "data-testid": "active-filters-panel"
-    });
-    const o = d("div", { className: "panel-header" });
-    o.appendChild(d("h3", { className: "panel-title" }, "Active Filters"));
-    const n = D({
-      label: "Clear All",
-      className: "btn-text btn-danger",
-      onClick: () => this._handleClearAll()
-    });
-    return n.dataset.testid = "clear-all-filters", o.appendChild(n), this.element.appendChild(o), this._listContainer = d("div", { className: "active-filters-list" }), this.element.appendChild(this._listContainer), this._subscribeToState(), this._renderFilterList(), this.element;
-  }
-  /**
-   * Subscribe to state changes
-   */
-  _subscribeToState() {
-    const e = this.state.on("change:activeFilters", () => {
-      this._renderFilterList();
-    });
-    this._unsubscribers.push(e);
-    const t = this.state.on("change:filterValues", () => {
-      this._updateValuesDisplay();
-    });
-    this._unsubscribers.push(t);
-    const i = this.state.on("change:selectedFilter", () => {
-      this._updateSelectedState();
-    });
-    this._unsubscribers.push(i);
-  }
-  /**
-   * Update selected state for all items
-   */
-  _updateSelectedState() {
-    const e = this.state.get("selectedFilter");
-    this._filterItems.forEach((t, i) => {
-      t.classList.toggle("selected", i === e);
-    });
-  }
-  /**
-   * Render the filter list
-   */
-  _renderFilterList() {
-    this._listContainer.innerHTML = "", this._filterItems.clear();
-    const e = this.state.get("activeFilters");
-    if (e.size === 0) {
-      this._listContainer.appendChild(
-        d("div", { className: "no-filters-message" }, "No filters active")
-      );
-      return;
-    }
-    e.forEach((t) => {
-      const i = this.filterManager.getFilterDef(t);
-      if (!i) return;
-      const s = this._createFilterItem(t, i);
-      this._filterItems.set(t, s), this._listContainer.appendChild(s);
-    });
-  }
-  /**
-   * Create a filter item
-   * @param {string} filterId
-   * @param {Object} def - Filter definition
-   * @returns {HTMLElement}
-   */
-  _createFilterItem(e, t) {
-    const s = this.state.get("selectedFilter") === e, r = d("div", {
-      className: `active-filter-item ${s ? "selected" : ""}`,
-      "data-active-filter": e,
-      "data-testid": `active-filter-${e}`,
-      onClick: (u) => {
-        u.target.closest(".filter-item-actions") || this._handleSelect(e);
-      }
-    }), o = d("div", { className: "filter-item-header" }), n = d("span", { className: "filter-item-name" }, t.name), a = d("div", { className: "filter-item-actions" }), l = j({
-      icon: ye,
-      title: "Reset filter",
-      className: "btn-icon-sm",
-      onClick: () => this._handleReset(e)
-    }), h = j({
-      icon: He,
-      title: "Remove filter",
-      className: "btn-icon-sm btn-danger",
-      onClick: () => this._handleRemove(e)
-    });
-    a.appendChild(l), a.appendChild(h), o.appendChild(n), o.appendChild(a), r.appendChild(o);
-    const c = this.state.getFilterValues(e), p = d("div", { className: "filter-item-summary" });
-    return p.textContent = this._getValuesSummary(t, c), r.appendChild(p), r._summaryEl = p, r;
-  }
-  /**
-   * Normalize control type (handle aliases)
-   * @param {string} type
-   * @returns {string}
-   */
-  _normalizeControlType(e) {
-    return {
-      slider: "slider",
-      range: "slider",
-      toggle: "toggle",
-      checkbox: "toggle",
-      color: "color",
-      select: "select",
-      dropdown: "select",
-      button: "button"
-    }[e] || e;
-  }
-  /**
-   * Get a summary of filter values
-   * @param {Object} def - Filter definition
-   * @param {Object} values - Current values
-   * @returns {string}
-   */
-  _getValuesSummary(e, t) {
-    if (!e.controls || !Array.isArray(e.controls))
-      return "Default values";
-    const i = [];
-    return e.controls.forEach((s) => {
-      const r = this._normalizeControlType(s.type);
-      if (r === "button") return;
-      const o = s.label || s.id, n = t[s.id] ?? s.default;
-      n !== s.default && (r === "slider" ? i.push(`${o}: ${this._formatValue(n)}`) : r === "toggle" ? n && i.push(o) : r === "color" ? i.push(`${o}: ${n}`) : r === "select" && i.push(`${o}: ${n}`));
-    }), i.length > 0 ? i.join(", ") : "Default values";
-  }
-  /**
-   * Format a numeric value for display
-   * @param {number} value
-   * @returns {string}
-   */
-  _formatValue(e) {
-    return typeof e != "number" || Number.isInteger(e) ? String(e) : e.toFixed(2);
-  }
-  /**
-   * Update values display for all items
-   */
-  _updateValuesDisplay() {
-    this._filterItems.forEach((e, t) => {
-      const i = this.filterManager.getFilterDef(t);
-      if (!i || !e._summaryEl) return;
-      const s = this.state.getFilterValues(t);
-      e._summaryEl.textContent = this._getValuesSummary(i, s);
-    });
-  }
-  /**
-   * Handle filter removal
-   * @param {string} filterId
-   */
-  _handleRemove(e) {
-    var t;
-    (t = this._onRemove) == null || t.call(this, e);
-  }
-  /**
-   * Handle filter reset
-   * @param {string} filterId
-   */
-  _handleReset(e) {
-    var t;
-    (t = this._onReset) == null || t.call(this, e);
-  }
-  /**
-   * Handle clear all
-   */
-  _handleClearAll() {
-    var e;
-    (e = this._onClearAll) == null || e.call(this);
-  }
-  /**
-   * Handle filter selection
-   * @param {string} filterId
-   */
-  _handleSelect(e) {
-    var t;
-    this.state.set("selectedFilter", e), (t = this._onSelect) == null || t.call(this, e);
-  }
-  /**
-   * Show panel
-   */
-  show() {
-    this.element && (this.element.style.display = "");
-  }
-  /**
-   * Hide panel
-   */
-  hide() {
-    this.element && (this.element.style.display = "none");
-  }
-  /**
-   * Clean up
-   */
-  destroy() {
-    var e;
-    this._unsubscribers.forEach((t) => t()), this._unsubscribers = [], this._filterItems.clear(), (e = this.element) == null || e.remove(), this.element = null;
-  }
-}
-const Z = {
-  name: "free",
-  initialMode: "filters",
-  cropShape: "free",
-  aspectRatio: "free",
-  autoZoomOnCropOverflow: !1,
-  lockCropShape: !1,
-  lockAspectRatio: !1,
-  showFilters: !0,
-  showCropControls: !0,
-  maxExportWidth: void 0,
-  maxExportHeight: void 0
-}, he = {
-  free: {
-    ...Z
-  },
-  avatar: {
-    ...Z,
-    name: "avatar",
-    initialMode: "crop",
-    cropShape: "circle",
-    aspectRatio: "1:1",
-    autoZoomOnCropOverflow: !0,
-    lockCropShape: !0,
-    lockAspectRatio: !0
-  },
-  banner: {
-    ...Z,
-    name: "banner",
-    initialMode: "crop",
-    cropShape: "square",
-    aspectRatio: "16:9",
-    autoZoomOnCropOverflow: !1,
-    lockCropShape: !1,
-    lockAspectRatio: !0
-  },
-  cover: {
-    ...Z,
-    name: "cover",
-    initialMode: "crop",
-    cropShape: "free",
-    aspectRatio: "24:5",
-    autoZoomOnCropOverflow: !0,
-    lockCropShape: !0,
-    lockAspectRatio: !0
-  },
-  product: {
-    ...Z,
-    name: "product",
-    initialMode: "filters",
-    cropShape: "square",
-    aspectRatio: "1:1",
-    autoZoomOnCropOverflow: !1,
-    lockCropShape: !1,
-    lockAspectRatio: !1
-  }
-};
-function dt(g) {
-  if (!g)
-    return { ...he.free };
-  if (typeof g == "object" && g !== null)
-    return { ...Z, ...g };
-  const e = he[g];
-  return e ? { ...e } : { ...he.free };
-}
-function q(g) {
-  if (!Number.isFinite(Number(g))) return 0;
-  const e = Number(g) % 360;
-  return e < 0 ? e + 360 : e;
-}
-function ut(g, e) {
-  const t = q(g);
-  return (q(e) - t + 540) % 360 - 180;
-}
-class kt extends ne {
-  /**
-   * Create a new VanillaImageEditor
-   * @param {HTMLElement} container - Container element to mount the editor
-   * @param {Object} options - Configuration options
-   */
-  constructor(e, t = {}) {
-    var r, o, n, a;
-    if (super(), !e)
-      throw new Error("VanillaImageEditor: container element is required");
-    this._container = e, this._destroyed = !1, this._loadVersion = 0, this._objectUrls = /* @__PURE__ */ new Set(), this._activeObjectUrl = null;
-    const i = t.preset ? dt(t.preset) : null, s = i ? {
-      initialMode: i.initialMode === "crop" ? "crop" : "adjust",
-      cropShape: i.cropShape,
-      initialAspectRatio: i.aspectRatio
-    } : {};
-    this._options = {
-      theme: "auto",
-      initialImage: null,
-      initialMode: "adjust",
-      cropShape: "free",
-      initialAspectRatio: "free",
-      backgroundRemoval: {
-        enabled: !0,
-        endpoint: "/api/v1/media/background-removal/preview",
-        optionsEndpoint: "/api/v1/media/background-removal/options",
-        fallbackEndpoint: null
-      },
-      ...s,
-      ...t
-    }, 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 Te(), this._filterManager = new Qe(this._state, this._renderer), this._cropManager = new de(this._state, this._renderer), this._removeBgManager = null, this._backgroundRemovalAvailable = !1, ((r = this._options.backgroundRemoval) == null ? void 0 : r.enabled) !== !1 && (this._removeBgManager = new Xe({
-      endpoint: (o = this._options.backgroundRemoval) == null ? void 0 : o.endpoint,
-      optionsEndpoint: (n = this._options.backgroundRemoval) == null ? void 0 : n.optionsEndpoint,
-      fallbackEndpoint: (a = this._options.backgroundRemoval) == null ? void 0 : a.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._initPromise = Promise.resolve(this._init()).catch((l) => {
-      this._destroyed || this.emit("error", l instanceof Error ? l : new Error(String(l)));
-    });
-  }
-  /**
-   * Initialize the editor
-   */
-  async _init() {
-    this._state.detectTheme(), this._buildDOM(), !(!await this._renderer.mount(
-      this._canvasContainer,
-      this._state.get("isDarkMode") ? 657930 : 16777215
-    ) || this._destroyed) && (this._cropManager.setOverlayCanvas(this._cropOverlay), this._initUI(), this._setupResizeObserver(), this._setupWindowResize(), this._subscribeToState(), this._refreshBackgroundRemovalAvailability(), this._options.initialImage && await this.loadImage(this._options.initialImage), this.emit("ready"));
-  }
-  /**
-   * Build DOM structure
-   */
-  _buildDOM() {
-    this._container.innerHTML = "", this._editorEl = d("div", {
-      className: `vanilla-image-editor ${this._state.get("isDarkMode") ? "dark" : "light"}`
-    });
-    const e = d("div", { className: "editor-toolbar-container" });
-    this._editorEl.appendChild(e), this._toolbarContainer = e;
-    const t = d("div", { className: "editor-content" }), i = d("div", { className: "canvas-section" });
-    this._canvasContainer = d("div", { className: "canvas-container" }), this._cropOverlay = d("canvas", { className: "crop-overlay", "aria-hidden": "true" }), i.appendChild(this._canvasContainer), i.appendChild(this._cropOverlay), t.appendChild(i), this._controlsSection = d("div", { className: "controls-section" }), t.appendChild(this._controlsSection), this._editorEl.appendChild(t), this._fileInput = d("input", {
-      type: "file",
-      accept: "image/*",
-      className: "hidden-file-input",
-      "aria-label": "Choose image file to edit",
-      onChange: (s) => this._handleFileSelect(s)
-    }), this._editorEl.appendChild(this._fileInput), this._container.appendChild(this._editorEl);
-  }
-  /**
-   * Initialize UI components
-   */
-  _initUI() {
-    this._toolbar = new et(this._state, this), this._toolbarContainer.appendChild(this._toolbar.render()), this._filterControlsEl = d("div", { className: "filter-controls-container" }), this._categoryCarousel = new tt(this._state, this), this._filterControlsEl.appendChild(this._categoryCarousel.render((s) => {
-    }));
-    const e = d("div", { className: "filter-layout" }), t = d("div", { className: "filter-left-column" });
-    this._filterCarousel = new it(this._state, this._filterManager), t.appendChild(this._filterCarousel.render({
-      onToggle: (s, r) => this._handleFilterToggle(s, r),
-      onSelect: (s) => {
-        this._handleFilterSelect(s), this._isMobile && this._mobileFilterDrawer && this._mobileFilterDrawer.open(s);
-      }
-    })), this._filterAdjustments = new st(this._state, this._filterManager), t.appendChild(this._filterAdjustments.render({
-      onChange: (s, r, o) => this._handleFilterChange(s, r, o),
-      onReset: (s) => this._handleFilterReset(s),
-      onAction: (s, r) => this._handleFilterAction(s, r)
-    })), e.appendChild(t);
-    const i = d("div", { className: "filter-right-column" });
-    this._activeFiltersPanel = new ct(this._state, this._filterManager), i.appendChild(this._activeFiltersPanel.render({
-      onRemove: (s) => this._handleFilterToggle(s, !1),
-      onReset: (s) => this._handleFilterReset(s),
-      onClearAll: () => this.resetAll(),
-      onSelect: (s) => this._handleFilterSelect(s)
-    })), e.appendChild(i), this._filterControlsEl.appendChild(e), this._mobileActiveFilters = new nt(this._state, this._filterManager), this._filterControlsEl.appendChild(this._mobileActiveFilters.render({
-      onToggle: (s, r) => this._handleFilterToggle(s, r),
-      onSelect: (s) => {
-        this._handleFilterSelect(s), this._isMobile && this._mobileFilterDrawer && this._mobileFilterDrawer.open(s);
-      }
-    })), this._cropControls = new ht(this._state, this._cropManager, this), this._cropControlsEl = this._cropControls.render(), this._cropControlsEl.style.display = "none", this._controlsSection.appendChild(this._filterControlsEl), this._controlsSection.appendChild(this._cropControlsEl), this._mobileFilterDrawer = new rt(this._state, this._filterManager), this._mobileFilterDrawer.build(this._controlsSection, {
-      onChange: (s, r, o) => this._handleFilterChange(s, r, o),
-      onReset: (s) => this._handleFilterReset(s),
-      onRemove: (s) => {
-        this._handleFilterToggle(s, !1), this._state.set("selectedFilter", null);
-      },
-      onAction: (s, r) => this._handleFilterAction(s, r)
-    });
-  }
-  /**
-   * Set up resize observer with debounce to prevent infinite loops.
-   * Without debounce, PIXI renderer.resize() changes the canvas buffer
-   * which triggers another ResizeObserver notification, causing a loop
-   * that floods the console with "ResizeObserver loop completed" errors
-   * and prevents the image from rendering (gray canvas).
-   */
-  _setupResizeObserver() {
-    let e = null;
-    this._resizeObserver = new ResizeObserver(() => {
-      clearTimeout(e), e = setTimeout(() => {
-        this._canvasContainer && (this._renderer.resizeTo(this._canvasContainer), this._state.get("mode") === "crop" && this._cropManager.drawOverlay());
-      }, 50);
-    }), this._resizeObserver.observe(this._canvasContainer);
-  }
-  /**
-   * Set up window resize listener for mobile detection
-   */
-  _setupWindowResize() {
-    this._handleWindowResize = () => {
-      var e;
-      this._isMobile = window.innerWidth <= 768, !this._isMobile && ((e = this._mobileFilterDrawer) != null && e.isOpen) && this._mobileFilterDrawer.close();
-    }, window.addEventListener("resize", this._handleWindowResize);
-  }
-  /**
-   * Subscribe to state changes
-   */
-  _subscribeToState() {
-    this._state.on("change:mode", ({ value: e }) => {
-      this._updateModeUI(e), e === "filters" && this._filterManager.applyFilters();
-    }), this._state.on("change:isDarkMode", ({ value: e }) => {
-      this._editorEl.classList.toggle("dark", e), this._editorEl.classList.toggle("light", !e), this._renderer.setBackgroundColor(e ? 657930 : 16777215);
-    }), this._state.on("change:hasImage", ({ value: e }) => {
-      this._editorEl.classList.toggle("has-image", e);
-    }), this._renderer.on("zoomChange", (e) => {
-      this._state.set("zoom", e);
-    });
-  }
-  /**
-   * Update UI based on mode
-   * @param {string} mode
-   */
-  _updateModeUI(e) {
-    var t;
-    e === "crop" ? (this._filterControlsEl.style.display = "none", this._cropControlsEl.style.display = "", (t = this._mobileFilterDrawer) != null && t.isOpen && this._mobileFilterDrawer.close()) : (this._filterControlsEl.style.display = "", this._cropControlsEl.style.display = "none");
-  }
-  /**
-   * Handle file selection
-   * @param {Event} event
-   */
-  async _handleFileSelect(e) {
-    var i;
-    const t = (i = e.target.files) == null ? void 0 : i[0];
-    t && await this.loadImage(t), this._fileInput.value = "";
-  }
-  /**
-   * Handle filter toggle
-   * @param {string} filterId
-   * @param {boolean} enabled
-   */
-  _handleFilterToggle(e, t) {
-    this._filterManager.toggle(e, t);
-  }
-  /**
-   * Handle filter select
-   * @param {string} filterId
-   */
-  _handleFilterSelect(e) {
-    this._state.set("selectedFilter", e);
-  }
-  /**
-   * Handle filter value change
-   * @param {string} filterId
-   * @param {string} controlId
-   * @param {*} value
-   */
-  _handleFilterChange(e, t, i) {
-    this._filterManager.updateValue(e, t, i) || this._filterManager.applyFilters(), this._renderer.render();
-  }
-  /**
-   * Handle filter reset
-   * @param {string} filterId
-   */
-  _handleFilterReset(e) {
-    this._filterManager.resetValues(e), this._filterManager.applyFilters();
-  }
-  /**
-   * Handle filter action (button click).
-   * Delegates to FilterManager.performFilterAction which syncs state after
-   * the action so the result survives filter recreation.
-   * @param {string} filterId
-   * @param {string} action
-   */
-  _handleFilterAction(e, t) {
-    this._filterManager.performFilterAction(e, t);
-  }
-  _revokeObjectUrl(e) {
-    !e || !this._objectUrls.has(e) || (URL.revokeObjectURL(e), this._objectUrls.delete(e), this._activeObjectUrl === e && (this._activeObjectUrl = null));
-  }
-  _replaceActiveObjectUrl(e) {
-    const t = this._activeObjectUrl;
-    this._activeObjectUrl = e, this._objectUrls.add(e), t && t !== e && this._revokeObjectUrl(t);
-  }
-  _clearActiveObjectUrl() {
-    this._activeObjectUrl && this._revokeObjectUrl(this._activeObjectUrl);
-  }
-  // ==================== Public API ====================
-  /**
-   * Set the filter registry (from mediables/filters)
-   * @param {Object} registry - { getFilter, getAllFilters, getFiltersByCategory }
-   */
-  setFilterRegistry(e) {
-    this._filterManager.setRegistry(e);
-  }
-  /**
-   * Load an image into the editor
-   * @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, t = {}) {
-    var n, a;
-    if (this._destroyed) return;
-    (a = (n = this._removeBgManager) == null ? void 0 : n.cancelActiveRequests) == null || a.call(n, "image-load");
-    const i = ++this._loadVersion;
-    let s = e, r = null;
-    this._resetEditorState(), this._state.set("hasImage", !1), this._state.set("imageUrl", null), e instanceof Blob && (s = URL.createObjectURL(e), r = s, this._objectUrls.add(s));
-    const o = await this._renderer.loadTexture(s, {
-      isCurrent: () => !this._destroyed && this._loadVersion === i
-    });
-    if (this._destroyed || this._loadVersion !== i) {
-      this._revokeObjectUrl(r);
-      return;
-    }
-    if (!o) {
-      this._revokeObjectUrl(r), this.emit("error", new Error("Failed to load image"));
-      return;
-    }
-    r ? this._replaceActiveObjectUrl(r) : this._clearActiveObjectUrl(), this._state.set("hasImage", !0), this._state.set("imageUrl", s), t.state && this._hydrateState(t.state), this._options.initialMode === "crop" && this.setMode("crop"), this.emit("imageLoaded", { url: s });
-  }
-  /**
-   * Reset all editor state (filters + crop) to a clean baseline.
-   * Called at the start of loadImage() to prevent stale state bleed between sessions.
-   */
-  _resetEditorState() {
-    this._filterManager.resetAll(), this._state.set("crop.rect", null), this._state.set("crop.appliedRect", null), this._state.set("crop.appliedShape", null), this._state.set("crop.appliedAspect", null), this._state.set("crop.dirty", !1), this._state.set("crop.shape", this._options.cropShape || "free"), this._state.set("crop.aspect", this._options.initialAspectRatio || "free"), this._state.set("transform.rotation", 0), this._state.get("mode") === "crop" && (this._cropManager.disable(), this._state.set("mode", "filters"));
-  }
-  /**
-   * Hydrate editor state from a canonical ImageEditorSessionState object.
-   * Restores filter stack + values and crop metadata (shape, aspect, rect).
-   * @param {Object} state - ImageEditorSessionState
-   */
-  _hydrateState(e) {
-    var i;
-    if (!e || e.version !== 1) return;
-    const t = q(((i = e.transform) == null ? void 0 : i.rotation) ?? 0);
-    if (t !== 0 && this._renderer.rotateBy(t) && this._state.set("transform.rotation", t), e.crop) {
-      const s = e.crop.shape || "free", r = e.crop.aspectRatio || "free";
-      e.crop.rect && (this._cropManager.applyFromPixelRect(e.crop.rect, s), this._state.set("crop.appliedRect", { ...e.crop.rect }), this._state.set("crop.appliedShape", s), this._state.set("crop.appliedAspect", r)), this._state.set("crop.shape", s), this._state.set("crop.aspect", r);
-    }
-    if (Array.isArray(e.filters)) {
-      let s = null;
-      for (const r of e.filters)
-        if (r.enabled && (s === null && (s = r.id), this._state.toggleFilter(r.id, !0), this._filterManager.initializeValues(r.id), r.values))
-          for (const [o, n] of Object.entries(r.values))
-            this._state.setFilterValue(r.id, o, n);
-      if (s !== null) {
-        this._state.set("selectedFilter", s);
-        const r = this._filterManager.getFilterDef(s);
-        if (typeof (r == null ? void 0 : r.category) == "string") {
-          const o = Ye[r.category] ?? r.category;
-          this._state.set("selectedCategory", o);
-        }
-      }
-      this._filterManager.applyFilters();
-    }
-  }
-  /**
-   * Open the file picker dialog
-   */
-  openFilePicker() {
-    var e;
-    (e = this._fileInput) == null || e.click();
-  }
-  /**
-   * Export the current image.
-   *
-   * @param {string} format - 'png' or 'jpeg'
-   * @param {number} quality - Quality for jpeg (0-1)
-   * @param {Object} [options]
-   * @param {number} [options.maxEdge] - Cap the longest edge to this pixel count
-   * @param {number} [options.maxPixels] - Cap total pixel count (width*height)
-   * @returns {string|null} Data URL
-   */
-  exportImage(e = "png", t = 0.92, i = {}) {
-    return !this._state.get("hasImage") || !this._applyPendingCropBeforeExport("VanillaImageEditor.exportImage") ? null : this._renderer.exportImage(
-      e,
-      t,
-      i.maxEdge ?? 0,
-      i.dontUpscale !== !1,
-      i.maxPixels ?? 0
-    );
-  }
-  /**
-   * Export the current image as a Blob after finalizing pending crop edits.
-   *
-   * @param {string} format - 'png' or 'jpeg'
-   * @param {number} quality - Quality for jpeg (0-1)
-   * @param {Object} [options]
-   * @returns {Promise<{blob: Blob, width: number, height: number}|null>}
-   */
-  async exportBlob(e = "png", t = 0.92, i = {}) {
-    return !this._state.get("hasImage") || !this._applyPendingCropBeforeExport("VanillaImageEditor.exportBlob") ? null : this._renderer.exportBlob(e, t, i);
-  }
-  _applyPendingCropBeforeExport(e) {
-    return !(this._state.get("crop.rect") && !this._cropManager.apply());
-  }
-  /**
-   * Save the image (triggers download and emits 'save' event)
-   */
-  async save() {
-    if (!this._state.get("hasImage")) return;
-    this._state.set("isSaving", !0);
-    let e = null;
-    try {
-      const t = await this.exportBlob("png", 0.92);
-      if (!t) throw new Error("Failed to export image");
-      const i = document.createElement("a");
-      e = URL.createObjectURL(t.blob), i.href = e, i.download = `edited-image-${Date.now()}.png`, document.body.appendChild(i), i.click(), document.body.removeChild(i), this.emit("save", {
-        blob: t.blob,
-        mimeType: t.blob.type || "image/png",
-        dimensions: { width: t.width, height: t.height },
-        state: this.getSerializableState()
-      });
-    } catch (t) {
-      this.emit("error", { error: t });
-    } finally {
-      e && URL.revokeObjectURL(e), 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"), s = this._state.get("crop.rect"), r = i || s;
-    return {
-      version: 1,
-      crop: {
-        rect: r ? { ...r } : 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"
-      },
-      transform: {
-        rotation: q(this._state.get("transform.rotation") ?? 0)
-      },
-      filters: t
-    };
-  }
-  /**
-   * Close the editor (emits 'cancel' event)
-   */
-  close() {
-    this.emit("cancel");
-  }
-  /**
-   * Set zoom level
-   * @param {number} zoom
-   */
-  setZoom(e) {
-    this._renderer.setZoom(e);
-  }
-  /**
-   * Fit image to screen
-   */
-  fitToScreen() {
-    this._renderer.fitToScreen();
-  }
-  /**
-   * Reset all filters
-   */
-  resetAll() {
-    this._filterManager.resetAll();
-  }
-  rotateBy(e) {
-    const t = this._state.get("transform.rotation") ?? 0;
-    return this.setRotationAngle(Number(t) + Number(e));
-  }
-  setRotationAngle(e) {
-    if (!this._state.get("hasImage")) return !1;
-    const t = q(this._state.get("transform.rotation") ?? 0), i = q(e), s = ut(t, i), r = this._state.get("mode") === "crop";
-    if (Math.abs(s) > 1e-3) {
-      if (r && this._cropManager.disable(), !this._renderer.rotateBy(s))
-        return r && this._cropManager.enable(), !1;
-      this._filterManager.applyFilters(), this._state.set("crop.rect", null), this._state.set("crop.dirty", !1), r && this._cropManager.enable();
-    }
-    return this._state.set("transform.rotation", i), this.emit("transformChanged", { rotation: i }), !0;
-  }
-  resetRotation() {
-    return this.setRotationAngle(0);
-  }
-  /**
-   * Toggle theme
-   */
-  toggleTheme() {
-    const e = this._state.get("isDarkMode");
-    this._state.set("isDarkMode", !e);
-  }
-  /**
-   * Set theme
-   * @param {'light'|'dark'|'auto'} theme
-   */
-  setTheme(e) {
-    this._state.set("theme", e), this._state.detectTheme();
-  }
-  /**
-   * Set editor mode
-   * @param {'filters'|'crop'} mode
-   */
-  setMode(e) {
-    e === "crop" ? this._cropManager.enable() : this._cropManager.disable(), this._state.set("mode", e);
-  }
-  /**
-   * Get current state (for debugging)
-   * @returns {Object}
-   */
-  getState() {
-    return this._state.getAll();
-  }
-  // ==================== Background Removal ====================
-  /**
-   * Remove the background from the current image
-   * @param {Object} options
-   * @param {string} [options.tier='balanced'] - Quality tier: 'fast', 'balanced', 'best'
-   * @param {string} [options.model] - Explicit model name (overrides tier)
-   * @param {boolean} [options.alpha_matting=false] - Enable alpha matting for edge refinement
-   * @returns {Promise<{model: string, processMs: string}>}
-   */
-  async removeBackground(e = {}) {
-    var t, i;
-    if (!this._removeBgManager)
-      throw new Error("Background removal is not enabled");
-    if (!this._state.get("hasImage"))
-      throw new Error("No image loaded");
-    if (!this.canRemoveBackground())
-      throw new Error("Background removal is not available for the current editor state");
-    this._state.set("isProcessing", !0), this._showLoadingOverlay("Removing background...");
-    try {
-      const s = this.exportImage("png");
-      if (!s)
-        throw new Error("Failed to export image for background removal");
-      const r = await this._removeBgManager.preparePreviewRequest(s, e), o = this._buildPreviewBackgroundRemovalContext(r), n = await this._removeBgManager.removeBackground(r.blob, r);
-      return await this._isCurrentPreviewBackgroundRemovalContext(o, n) ? (await this.loadImage(n.dataUrl), this.emit("background-removed", {
-        model: n.model,
-        processMs: n.processMs
-      }), {
-        model: n.model,
-        processMs: n.processMs
-      }) : (this.emit("background-removal-stale", {
-        operationId: o.operationId,
-        sourceHash: o.sourceHash
-      }), { stale: !0 });
-    } catch (s) {
-      throw this.emit("error", { error: s, context: "background-removal" }), s;
-    } finally {
-      (i = (t = this._state) == null ? void 0 : t.set) == null || i.call(t, "isProcessing", !1), this._hideLoadingOverlay();
-    }
-  }
-  /**
-   * Check if background removal is available
-   * @returns {Promise<boolean>}
-   */
-  async isBackgroundRemovalAvailable() {
-    return this._removeBgManager ? this._refreshBackgroundRemovalAvailability() : !1;
-  }
-  canRemoveBackground() {
-    return !!this._removeBgManager && this._state.get("hasImage") === !0 && this._backgroundRemovalAvailable === !0;
-  }
-  async _refreshBackgroundRemovalAvailability() {
-    if (!this._removeBgManager)
-      return this._backgroundRemovalAvailable = !1, this._state.set("backgroundRemovalAvailable", !1), !1;
-    const e = await this._removeBgManager.isAvailable();
-    return this._destroyed ? !1 : (this._backgroundRemovalAvailable = e, this._state.set("backgroundRemovalAvailable", e), e);
-  }
-  _buildPreviewBackgroundRemovalContext(e) {
-    return {
-      loadVersion: this._loadVersion,
-      imageUrl: this._state.get("imageUrl") ?? null,
-      operationId: e.operationId,
-      sessionKey: e.sessionKey,
-      sourceHash: e.sourceHash,
-      targetRef: e.targetRef ?? null
-    };
-  }
-  async _isCurrentPreviewBackgroundRemovalContext(e, t = null) {
-    if (this._destroyed || this._loadVersion !== e.loadVersion || this._state.get("hasImage") !== !0 || (this._state.get("imageUrl") ?? null) !== e.imageUrl || t && (t.operationId && t.operationId !== e.operationId || t.sessionKey && t.sessionKey !== e.sessionKey || t.sourceHash && t.sourceHash !== e.sourceHash || t.targetRef && e.targetRef && t.targetRef !== e.targetRef))
-      return !1;
-    const i = this.exportImage("png");
-    return i ? await this._removeBgManager.computeImageDataHash(i) === e.sourceHash : !1;
-  }
-  // ==================== Loading Overlay ====================
-  /**
-   * Show the loading overlay
-   * @param {string} message - Message to display
-   */
-  _showLoadingOverlay(e) {
-    var i;
-    if (!this._loadingOverlay)
-      this._loadingOverlay = d("div", { className: "editor-loading-overlay" }, [
-        d("div", { className: "editor-loading-spinner" }),
-        d("div", { className: "editor-loading-text" }, e)
-      ]);
-    else {
-      const s = this._loadingOverlay.querySelector(".editor-loading-text");
-      s && (s.textContent = e);
-    }
-    const t = (i = this._canvasContainer) == null ? void 0 : i.parentElement;
-    t && !this._loadingOverlay.parentElement && t.appendChild(this._loadingOverlay);
-  }
-  /**
-   * Hide the loading overlay
-   */
-  _hideLoadingOverlay() {
-    var e;
-    (e = this._loadingOverlay) == null || e.remove();
-  }
-  /**
-   * Destroy the editor and clean up
-   */
-  destroy() {
-    var e, t, i, s, r, o, n, a, l, h, c, p;
-    this._destroyed = !0, (t = (e = this._removeBgManager) == null ? void 0 : e.cancelActiveRequests) == null || t.call(e, "editor-destroy");
-    for (const u of this._objectUrls)
-      try {
-        URL.revokeObjectURL(u);
-      } catch {
-      }
-    this._objectUrls.clear(), this._activeObjectUrl = null, (i = this._resizeObserver) == null || i.disconnect(), this._renderer.destroy(), this._cropManager.disable(), this._handleWindowResize && window.removeEventListener("resize", this._handleWindowResize), (s = this._toolbar) == null || s.destroy(), (r = this._categoryCarousel) == null || r.destroy(), (o = this._filterCarousel) == null || o.destroy(), (n = this._filterAdjustments) == null || n.destroy(), (a = this._mobileFilterDrawer) == null || a.destroy(), (l = this._mobileActiveFilters) == null || l.destroy(), (h = this._cropControls) == null || h.destroy(), (c = this._activeFiltersPanel) == null || c.destroy(), (p = this._editorEl) == null || p.remove(), this._container = null, this._state = null, this.emit("destroyed"), this.removeAllListeners();
-  }
-}
-export {
-  Ye as A,
-  Oe as B,
-  de as C,
-  pe as E,
-  Qe as F,
-  Te as P,
-  Xe as R,
-  et as T,
-  kt as V,
-  me as a,
-  D as b,
-  ce as c,
-  Ce as d,
-  d as e,
-  ke as f,
-  xe as g,
-  we as h,
-  ve as i,
-  ue as j,
-  bt as k,
-  yt as l,
-  vt as m,
-  wt as n,
-  _e as o,
-  xt as p,
-  Ct as q,
-  Ue as r,
-  Le as s,
-  He as t,
-  j as u,
-  gt as v,
-  mt as w,
-  dt as x,
-  ht as y,
-  _t as z
-};
-//# sourceMappingURL=editor-CcfSL2dI.js.map