vuedit-image-editor 0.1.0

package/dist/vuedit-image-editor.es.js

@@ -0,0 +1,3412 @@
+import { reactive as Oe, ref as F, shallowRef as Be, computed as V, readonly as qe, provide as We, inject as Q, toRaw as Xe, markRaw as Ye, defineComponent as Y, openBlock as C, createElementBlock as $, normalizeClass as U, renderSlot as Ue, createCommentVNode as Z, toDisplayString as q, createElementVNode as m, createVNode as O, unref as S, withCtx as J, onMounted as ce, watch as ne, onBeforeUnmount as ue, withModifiers as le, createBlock as re, resolveDynamicComponent as be, onUpdated as Ne, Fragment as X, renderList as N, Transition as _e, normalizeStyle as se, onUnmounted as Ze, nextTick as Je, Teleport as Ge, withKeys as Se } from "vue";
+function ge() {
+  return {
+    crop: {
+      x: 0,
+      y: 0,
+      width: 1,
+      height: 1,
+      aspectRatio: null,
+      rotation: 0,
+      flipX: !1,
+      flipY: !1
+    },
+    finetune: {
+      brightness: 0,
+      contrast: 0,
+      saturation: 0,
+      exposure: 0,
+      temperature: 0,
+      gamma: 1,
+      clarity: 0,
+      vignette: 0
+    },
+    filter: {
+      id: null,
+      intensity: 1
+    },
+    stickers: [],
+    frame: {
+      style: null,
+      size: 0.025,
+      color: [1, 1, 1, 1],
+      radius: 0
+    },
+    resize: {
+      fit: "contain",
+      upscale: !1
+    },
+    backgroundColor: [0, 0, 0, 1]
+  };
+}
+function de(a) {
+  return JSON.parse(JSON.stringify(a));
+}
+class Qe {
+  constructor(e = 50) {
+    this.states = [], this.pointer = -1, this.maxSize = e;
+  }
+  /** Push a new state snapshot. Truncates any future (redo) states. */
+  push(e) {
+    this.states = this.states.slice(0, this.pointer + 1), this.states.push(de(e)), this.states.length > this.maxSize && this.states.shift(), this.pointer = this.states.length - 1;
+  }
+  /** Undo: return the previous state, or null if at the beginning. */
+  undo() {
+    return this.pointer <= 0 ? null : (this.pointer--, de(this.states[this.pointer]));
+  }
+  /** Redo: return the next state, or null if at the end. */
+  redo() {
+    return this.pointer >= this.states.length - 1 ? null : (this.pointer++, de(this.states[this.pointer]));
+  }
+  /** Reset history with a single initial state. */
+  reset(e) {
+    this.states = [de(e)], this.pointer = 0;
+  }
+  get canUndo() {
+    return this.pointer > 0;
+  }
+  get canRedo() {
+    return this.pointer < this.states.length - 1;
+  }
+  get currentIndex() {
+    return this.pointer;
+  }
+  get length() {
+    return this.states.length;
+  }
+}
+async function et(a) {
+  const e = await tt(a);
+  return new Promise((n, t) => {
+    const o = new Image();
+    o.crossOrigin = "anonymous", o.onload = () => {
+      typeof a != "string" && URL.revokeObjectURL(e), n(o);
+    }, o.onerror = () => {
+      typeof a != "string" && URL.revokeObjectURL(e), t(new Error(`Failed to load image: ${typeof a == "string" ? a : "Blob/File"}`));
+    }, o.src = e;
+  });
+}
+async function tt(a) {
+  return typeof a == "string" ? a : URL.createObjectURL(a);
+}
+const Ke = Symbol("vuedit-image-editor"), ee = Symbol("vuedit-locale");
+function he(a) {
+  return JSON.parse(JSON.stringify(Xe(a)));
+}
+function nt(a) {
+  const e = Oe(
+    a.initialState ? { ...ge(), ...JSON.parse(JSON.stringify(a.initialState)) } : ge()
+  ), n = he(e), t = new Qe(50);
+  t.reset(he(e));
+  const o = F(null), d = F(!1), u = F(null);
+  let r = 0;
+  const i = Be([]), h = F(null), s = F(1), l = F(null), y = F({ x: 0, y: 0 }), c = F(0), p = V(() => h.value && i.value.find((P) => P.id === h.value) || null), w = V(() => (c.value, t.canUndo)), M = V(() => (c.value, t.canRedo)), k = V(() => (c.value, t.currentIndex > 0));
+  async function v(P) {
+    const j = ++r;
+    d.value = !0, u.value = null;
+    try {
+      const _ = await et(P);
+      if (j !== r) return;
+      o.value = _, W();
+    } catch (_) {
+      if (j !== r) return;
+      u.value = _ instanceof Error ? _.message : "Failed to load image";
+    } finally {
+      j === r && (d.value = !1);
+    }
+  }
+  function f(P) {
+    if (!P.id || !P.controls) {
+      console.warn("[VueditImageEditor] Plugin missing required fields (id, controls):", P);
+      return;
+    }
+    i.value.some((j) => j.id === P.id) || (i.value = [...i.value, Ye(P)], h.value || (h.value = P.id));
+  }
+  function g(P) {
+    var j;
+    i.value = i.value.filter((_) => _.id !== P), h.value === P && (h.value = ((j = i.value[0]) == null ? void 0 : j.id) || null);
+  }
+  function b(P) {
+    const j = p.value;
+    j != null && j.onDeactivate && j.onDeactivate(), h.value = P;
+    const _ = i.value.find((A) => A.id === P);
+    _ != null && _.onActivate && _.onActivate(), W();
+  }
+  function I(P) {
+    P(e), t.push(he(e)), c.value++, W();
+  }
+  function H() {
+    const P = t.undo();
+    P && (Object.assign(e, P), c.value++, W());
+  }
+  function T() {
+    const P = t.redo();
+    P && (Object.assign(e, P), c.value++, W());
+  }
+  function K() {
+    const P = p.value;
+    P != null && P.onDeactivate && P.onDeactivate(), Object.assign(e, JSON.parse(JSON.stringify(n))), t.reset(he(e)), c.value++, P != null && P.onActivate && P.onActivate(), W();
+  }
+  function D(P) {
+    s.value = Math.max(0.1, Math.min(10, P)), W();
+  }
+  function W() {
+    l.value && l.value();
+  }
+  return {
+    state: e,
+    readonlyState: qe(e),
+    sourceImage: o,
+    loading: d,
+    error: u,
+    plugins: i,
+    activePluginId: h,
+    activePlugin: p,
+    hasEdits: k,
+    canUndo: w,
+    canRedo: M,
+    zoom: s,
+    options: a,
+    load: v,
+    registerPlugin: f,
+    unregisterPlugin: g,
+    setActivePlugin: b,
+    updateState: I,
+    undo: H,
+    redo: T,
+    revert: K,
+    setZoom: D,
+    requestRender: W,
+    onRender: l,
+    cropDragPan: y
+  };
+}
+function it(a) {
+  We(Ke, a);
+}
+function G() {
+  const a = Q(Ke);
+  if (!a)
+    throw new Error("[VueditImageEditor] useEditor() called outside of editor context. Make sure to use it inside <EditorShell> or <ImageEditorModal>.");
+  return a;
+}
+const xe = [
+  1,
+  0,
+  0,
+  0,
+  0,
+  0,
+  1,
+  0,
+  0,
+  0,
+  0,
+  0,
+  1,
+  0,
+  0,
+  0,
+  0,
+  0,
+  1,
+  0
+];
+function ot(a, e) {
+  const n = new Array(20).fill(0);
+  for (let t = 0; t < 4; t++)
+    for (let o = 0; o < 5; o++) {
+      let d = 0;
+      for (let u = 0; u < 4; u++)
+        d += a[t * 5 + u] * e[u * 5 + o];
+      o === 4 && (d += a[t * 5 + 4]), n[t * 5 + o] = d;
+    }
+  return n;
+}
+function De(...a) {
+  if (a.length === 0) return [...xe];
+  let e = a[0];
+  for (let n = 1; n < a.length; n++)
+    e = ot(a[n], e);
+  return e;
+}
+function Ae(a) {
+  return [
+    1,
+    0,
+    0,
+    0,
+    a,
+    0,
+    1,
+    0,
+    0,
+    a,
+    0,
+    0,
+    1,
+    0,
+    a,
+    0,
+    0,
+    0,
+    1,
+    0
+  ];
+}
+function Le(a) {
+  const e = a + 1, n = -0.5 * e + 0.5;
+  return [
+    e,
+    0,
+    0,
+    0,
+    n,
+    0,
+    e,
+    0,
+    0,
+    n,
+    0,
+    0,
+    e,
+    0,
+    n,
+    0,
+    0,
+    0,
+    1,
+    0
+  ];
+}
+function Fe(a) {
+  const e = a + 1, n = 1 - e, t = 0.2126 * n, o = 0.7152 * n, d = 0.0722 * n;
+  return [
+    t + e,
+    o,
+    d,
+    0,
+    0,
+    t,
+    o + e,
+    d,
+    0,
+    0,
+    t,
+    o,
+    d + e,
+    0,
+    0,
+    0,
+    0,
+    0,
+    1,
+    0
+  ];
+}
+function He(a) {
+  const e = Math.pow(2, a);
+  return [
+    e,
+    0,
+    0,
+    0,
+    0,
+    0,
+    e,
+    0,
+    0,
+    0,
+    0,
+    0,
+    e,
+    0,
+    0,
+    0,
+    0,
+    0,
+    1,
+    0
+  ];
+}
+function Ve(a) {
+  return [
+    1 + a,
+    0,
+    0,
+    0,
+    0,
+    0,
+    1,
+    0,
+    0,
+    0,
+    0,
+    0,
+    1 - a,
+    0,
+    0,
+    0,
+    0,
+    0,
+    1,
+    0
+  ];
+}
+function Ce(a, e) {
+  const n = a.data, t = n.length, o = e[0], d = e[1], u = e[2], r = e[3], i = e[4] * 255, h = e[5], s = e[6], l = e[7], y = e[8], c = e[9] * 255, p = e[10], w = e[11], M = e[12], k = e[13], v = e[14] * 255, f = e[15], g = e[16], b = e[17], I = e[18], H = e[19] * 255;
+  for (let T = 0; T < t; T += 4) {
+    const K = n[T], D = n[T + 1], W = n[T + 2], P = n[T + 3];
+    n[T] = ie(K * o + D * d + W * u + P * r + i), n[T + 1] = ie(K * h + D * s + W * l + P * y + c), n[T + 2] = ie(K * p + D * w + W * M + P * k + v), n[T + 3] = ie(K * f + D * g + W * b + P * I + H);
+  }
+}
+function ye(a, e) {
+  if (e === 1) return;
+  const n = a.data, t = 1 / e, o = new Uint8Array(256);
+  for (let d = 0; d < 256; d++)
+    o[d] = ie(Math.pow(d / 255, t) * 255);
+  for (let d = 0; d < n.length; d += 4)
+    n[d] = o[n[d]], n[d + 1] = o[n[d + 1]], n[d + 2] = o[n[d + 2]];
+}
+function we(a, e, n, t) {
+  if (e === 0) return;
+  const o = a.data, d = n / 2, u = t / 2, r = Math.sqrt(d * d + u * u);
+  for (let i = 0; i < t; i++)
+    for (let h = 0; h < n; h++) {
+      const s = (i * n + h) * 4, l = h - d, y = i - u, c = Math.sqrt(l * l + y * y) / r, p = 1 - e * c * c;
+      o[s] = ie(o[s] * p), o[s + 1] = ie(o[s + 1] * p), o[s + 2] = ie(o[s + 2] * p);
+    }
+}
+function ke(a, e) {
+  if (e === 0) return;
+  const { data: n, width: t, height: o } = a, d = e * 4, u = new Uint8ClampedArray(n);
+  for (let r = 1; r < o - 1; r++)
+    for (let i = 1; i < t - 1; i++) {
+      const h = (r * t + i) * 4;
+      for (let s = 0; s < 3; s++) {
+        const l = u[h + s], y = l * 4 - u[((r - 1) * t + i) * 4 + s] - u[((r + 1) * t + i) * 4 + s] - u[(r * t + (i - 1)) * 4 + s] - u[(r * t + (i + 1)) * 4 + s], c = l + d * y;
+        n[h + s] = c < 0 ? 0 : c > 255 ? 255 : c + 0.5 | 0;
+      }
+    }
+}
+function ie(a) {
+  return a < 0 ? 0 : a > 255 ? 255 : a + 0.5 | 0;
+}
+const at = 16777216;
+class st {
+  /**
+   * Process image at FULL RESOLUTION.
+   * Applies all transformations and exports as Blob.
+   */
+  async process(e, n, t = {}) {
+    const {
+      mimeType: o = "image/jpeg",
+      quality: d = 0.92,
+      maxCanvasPixels: u = at
+    } = t, r = n.crop, i = n.finetune;
+    let h = Math.round(r.x * e.naturalWidth), s = Math.round(r.y * e.naturalHeight), l = Math.round(r.width * e.naturalWidth), y = Math.round(r.height * e.naturalHeight);
+    h = Math.max(0, Math.min(h, e.naturalWidth)), s = Math.max(0, Math.min(s, e.naturalHeight)), l = Math.min(l, e.naturalWidth - h), y = Math.min(y, e.naturalHeight - s);
+    let c = l, p = y;
+    if (n.resize.width || n.resize.height) {
+      const T = n.resize.width, K = n.resize.height, D = n.resize.fit;
+      if (T && K)
+        if (D === "force")
+          c = T, p = K;
+        else if (D === "cover") {
+          const W = Math.max(T / l, K / y);
+          c = Math.round(l * W), p = Math.round(y * W);
+        } else {
+          const W = Math.min(T / l, K / y);
+          c = Math.round(l * W), p = Math.round(y * W);
+        }
+      else if (T) {
+        const W = T / l;
+        c = T, p = Math.round(y * W);
+      } else if (K) {
+        const W = K / y;
+        c = Math.round(l * W), p = K;
+      }
+      n.resize.upscale || (c = Math.min(c, l), p = Math.min(p, y));
+    }
+    const w = c * p;
+    if (w > u) {
+      const T = Math.sqrt(u / w);
+      c = Math.floor(c * T), p = Math.floor(p * T);
+    }
+    c = Math.max(1, c), p = Math.max(1, p);
+    const M = Math.abs(r.rotation);
+    let k = c, v = p;
+    if (M > 1e-3) {
+      const T = Math.abs(Math.cos(r.rotation)), K = Math.abs(Math.sin(r.rotation));
+      k = Math.ceil(c * T + p * K), v = Math.ceil(c * K + p * T);
+    }
+    const f = document.createElement("canvas");
+    f.width = k, f.height = v;
+    const g = f.getContext("2d"), b = n.backgroundColor;
+    b[3] > 0 && (g.fillStyle = `rgba(${Math.round(b[0] * 255)}, ${Math.round(b[1] * 255)}, ${Math.round(b[2] * 255)}, ${b[3]})`, g.fillRect(0, 0, k, v)), g.save(), g.translate(k / 2, v / 2), g.rotate(r.rotation), g.scale(r.flipX ? -1 : 1, r.flipY ? -1 : 1), g.drawImage(
+      e,
+      h,
+      s,
+      l,
+      y,
+      -c / 2,
+      -p / 2,
+      c,
+      p
+    ), g.restore();
+    const I = [];
+    if (i.brightness !== 0 && I.push(Ae(i.brightness)), i.contrast !== 0 && I.push(Le(i.contrast)), i.saturation !== 0 && I.push(Fe(i.saturation)), i.exposure !== 0 && I.push(He(i.exposure)), i.temperature !== 0 && I.push(Ve(i.temperature)), n.filter.matrix)
+      if (n.filter.intensity < 1) {
+        const T = n.filter.matrix, K = n.filter.intensity, D = xe.map((W, P) => W * (1 - K) + T[P] * K);
+        I.push(D);
+      } else
+        I.push(n.filter.matrix);
+    if (I.length > 0) {
+      const T = De(...I), K = g.getImageData(0, 0, k, v);
+      Ce(K, T), i.gamma !== 1 && ye(K, i.gamma), i.clarity !== 0 && ke(K, i.clarity), i.vignette !== 0 && we(K, i.vignette, k, v), g.putImageData(K, 0, 0);
+    } else if (i.gamma !== 1 || i.clarity !== 0 || i.vignette !== 0) {
+      const T = g.getImageData(0, 0, k, v);
+      i.gamma !== 1 && ye(T, i.gamma), i.clarity !== 0 && ke(T, i.clarity), i.vignette !== 0 && we(T, i.vignette, k, v), g.putImageData(T, 0, 0);
+    }
+    n.frame.style && rt(g, n.frame.style, n.frame.size, n.frame.color, n.frame.radius, k, v);
+    for (const T of n.stickers)
+      await ct(g, T, k, v);
+    return {
+      blob: await new Promise((T, K) => {
+        f.toBlob(
+          (D) => D ? T(D) : K(new Error("Failed to encode image")),
+          o,
+          d
+        );
+      }),
+      imageState: JSON.parse(JSON.stringify(n))
+    };
+  }
+}
+function rt(a, e, n, t, o, d, u) {
+  const r = Math.round(Math.max(d, u) * n), i = Math.round(o), h = `rgba(${Math.round(t[0] * 255)}, ${Math.round(t[1] * 255)}, ${Math.round(t[2] * 255)}, ${t[3]})`;
+  switch (a.strokeStyle = h, a.fillStyle = h, e) {
+    case "solidSharp":
+      a.lineWidth = r, a.strokeRect(r / 2, r / 2, d - r, u - r);
+      break;
+    case "solidRound":
+      a.lineWidth = r, lt(a, r / 2, r / 2, d - r, u - r, i + r / 2), a.stroke();
+      break;
+    case "lineSingle": {
+      const s = r * 2;
+      a.lineWidth = 1, a.strokeRect(s, s, d - s * 2, u - s * 2);
+      break;
+    }
+    case "lineMultiple": {
+      a.lineWidth = 1;
+      for (let s = 1; s <= 3; s++) {
+        const l = r * s;
+        a.strokeRect(l, l, d - l * 2, u - l * 2);
+      }
+      break;
+    }
+    case "hook": {
+      const s = Math.min(d, u) * 0.1;
+      a.lineWidth = r * 0.5;
+      const l = r;
+      a.beginPath(), a.moveTo(l, l + s), a.lineTo(l, l), a.lineTo(l + s, l), a.stroke(), a.beginPath(), a.moveTo(d - l - s, l), a.lineTo(d - l, l), a.lineTo(d - l, l + s), a.stroke(), a.beginPath(), a.moveTo(l, u - l - s), a.lineTo(l, u - l), a.lineTo(l + s, u - l), a.stroke(), a.beginPath(), a.moveTo(d - l - s, u - l), a.lineTo(d - l, u - l), a.lineTo(d - l, u - l - s), a.stroke();
+      break;
+    }
+    case "polaroid": {
+      const s = r, l = r * 4;
+      a.fillRect(0, 0, d, s), a.fillRect(0, 0, s, u), a.fillRect(d - s, 0, s, u), a.fillRect(0, u - l, d, l);
+      break;
+    }
+    default:
+      a.lineWidth = r * 0.5, a.strokeRect(r, r, d - r * 2, u - r * 2);
+      break;
+  }
+}
+function lt(a, e, n, t, o, d) {
+  a.beginPath(), a.moveTo(e + d, n), a.lineTo(e + t - d, n), a.arcTo(e + t, n, e + t, n + d, d), a.lineTo(e + t, n + o - d), a.arcTo(e + t, n + o, e + t - d, n + o, d), a.lineTo(e + d, n + o), a.arcTo(e, n + o, e, n + o - d, d), a.lineTo(e, n + d), a.arcTo(e, n, e + d, n, d), a.closePath();
+}
+async function ct(a, e, n, t) {
+  const o = e.x * n, d = e.y * t, u = e.width * n, r = e.height * t;
+  if (a.save(), a.globalAlpha = e.opacity, a.translate(o + u / 2, d + r / 2), a.rotate(e.rotation), a.scale(e.flipX ? -1 : 1, e.flipY ? -1 : 1), !e.src.startsWith("http") && !e.src.startsWith("data:") && !e.src.startsWith("blob:") && !e.src.startsWith("/") && !e.src.startsWith(".")) {
+    const i = Math.min(u, r) * 0.8;
+    a.font = `${i}px sans-serif`, a.textAlign = "center", a.textBaseline = "middle", a.fillText(e.src, 0, 0);
+  } else
+    try {
+      const i = new Image();
+      i.crossOrigin = "anonymous", await new Promise((h, s) => {
+        i.onload = () => h(), i.onerror = () => s(), i.src = e.src;
+      }), a.drawImage(i, -u / 2, -r / 2, u, r);
+    } catch {
+    }
+  a.restore();
+}
+const ut = {
+  // Toolbar
+  undo: "Undo",
+  redo: "Redo",
+  revert: "Revert",
+  zoomIn: "Zoom In",
+  zoomOut: "Zoom Out",
+  zoomToFit: "Zoom to Fit",
+  done: "Done",
+  cancel: "Cancel",
+  export: "Export",
+  close: "Close",
+  // Plugin tabs
+  crop: "Crop",
+  filter: "Filter",
+  finetune: "Finetune",
+  sticker: "Sticker",
+  frame: "Frame",
+  resize: "Resize",
+  // Crop controls
+  aspectRatio: "Aspect Ratio",
+  custom: "Custom",
+  square: "Square",
+  landscape: "Landscape",
+  portrait: "Portrait",
+  rotation: "Rotation",
+  rotateLeft: "Rotate Left",
+  rotateRight: "Rotate Right",
+  flipHorizontal: "Flip Horizontal",
+  flipVertical: "Flip Vertical",
+  // Finetune labels
+  brightness: "Brightness",
+  contrast: "Contrast",
+  saturation: "Saturation",
+  exposure: "Exposure",
+  temperature: "Temperature",
+  gamma: "Gamma",
+  clarity: "Clarity",
+  vignette: "Vignette",
+  // Filter labels
+  original: "Original",
+  intensity: "Intensity",
+  chrome: "Chrome",
+  fade: "Fade",
+  pastel: "Pastel",
+  cold: "Cold",
+  warm: "Warm",
+  mono: "Mono",
+  noir: "Noir",
+  wash: "Wash",
+  stark: "Stark",
+  sepia: "Sepia",
+  rust: "Rust",
+  blues: "Blues",
+  color: "Color",
+  // Frame style labels
+  solidSharp: "Solid Sharp",
+  solidRound: "Solid Round",
+  lineSingle: "Line Single",
+  lineMultiple: "Line Multiple",
+  hook: "Hook",
+  polaroid: "Polaroid",
+  edgeSeparate: "Edge Separate",
+  edgeCross: "Edge Cross",
+  edgeOverlap: "Edge Overlap",
+  // Fill labels
+  fill: "Fill",
+  transparent: "Transparent",
+  // Sticker labels
+  emoji: "Emoji",
+  shapes: "Shapes",
+  // Frame labels
+  none: "None",
+  frameSize: "Frame Size",
+  frameColor: "Frame Color",
+  // Resize labels
+  width: "Width",
+  height: "Height",
+  lockAspectRatio: "Lock Aspect Ratio",
+  // Loading/error
+  loading: "Loading image...",
+  loadError: "Failed to load image",
+  processing: "Processing...",
+  // Crop overlay
+  cropApply: "Apply",
+  // Confirmation
+  unsavedChanges: "You have unsaved changes. Are you sure you want to close?",
+  confirm: "Confirm"
+}, dt = {
+  // Toolbar
+  undo: "تراجع",
+  redo: "إعادة",
+  revert: "استعادة",
+  zoomIn: "تكبير",
+  zoomOut: "تصغير",
+  zoomToFit: "ملاءمة العرض",
+  done: "تم",
+  cancel: "إلغاء",
+  export: "تصدير",
+  close: "إغلاق",
+  // Plugin tabs
+  crop: "قص",
+  filter: "فلتر",
+  finetune: "ضبط دقيق",
+  sticker: "ملصق",
+  frame: "إطار",
+  resize: "تغيير الحجم",
+  // Crop controls
+  aspectRatio: "نسبة العرض إلى الارتفاع",
+  custom: "مخصص",
+  square: "مربع",
+  landscape: "أفقي",
+  portrait: "عمودي",
+  rotation: "دوران",
+  rotateLeft: "تدوير لليسار",
+  rotateRight: "تدوير لليمين",
+  flipHorizontal: "قلب أفقي",
+  flipVertical: "قلب عمودي",
+  // Finetune labels
+  brightness: "السطوع",
+  contrast: "التباين",
+  saturation: "التشبع",
+  exposure: "التعريض",
+  temperature: "درجة الحرارة",
+  gamma: "جاما",
+  clarity: "الوضوح",
+  vignette: "تظليل الأطراف",
+  // Filter labels
+  original: "الأصلي",
+  intensity: "الكثافة",
+  chrome: "كروم",
+  fade: "باهت",
+  pastel: "باستيل",
+  cold: "بارد",
+  warm: "دافئ",
+  mono: "أحادي",
+  noir: "نوار",
+  wash: "مغسول",
+  stark: "حاد",
+  sepia: "بني داكن",
+  rust: "صدأ",
+  blues: "أزرق",
+  color: "ملون",
+  // Frame style labels
+  solidSharp: "صلب حاد",
+  solidRound: "صلب مستدير",
+  lineSingle: "خط واحد",
+  lineMultiple: "خطوط متعددة",
+  hook: "خطاف",
+  polaroid: "بولارويد",
+  edgeSeparate: "حواف منفصلة",
+  edgeCross: "حواف متقاطعة",
+  edgeOverlap: "حواف متداخلة",
+  // Fill labels
+  fill: "تعبئة",
+  transparent: "شفاف",
+  // Sticker labels
+  emoji: "رموز تعبيرية",
+  shapes: "أشكال",
+  // Frame labels
+  none: "بدون",
+  frameSize: "حجم الإطار",
+  frameColor: "لون الإطار",
+  // Resize labels
+  width: "العرض",
+  height: "الارتفاع",
+  lockAspectRatio: "قفل نسبة العرض إلى الارتفاع",
+  // Loading/error
+  loading: "جاري تحميل الصورة...",
+  loadError: "فشل تحميل الصورة",
+  processing: "جاري المعالجة...",
+  // Crop overlay
+  cropApply: "تطبيق",
+  // Confirmation
+  unsavedChanges: "لديك تغييرات غير محفوظة. هل أنت متأكد أنك تريد الإغلاق؟",
+  confirm: "تأكيد"
+}, ht = ["disabled", "title"], vt = {
+  key: 0,
+  class: "vie-icon-btn__icon"
+}, pt = {
+  key: 1,
+  class: "vie-icon-btn__label"
+}, te = /* @__PURE__ */ Y({
+  __name: "IconButton",
+  props: {
+    title: {},
+    label: {},
+    disabled: { type: Boolean },
+    variant: {}
+  },
+  emits: ["click"],
+  setup(a) {
+    return (e, n) => (C(), $("button", {
+      class: U([
+        "vie-icon-btn",
+        { "vie-icon-btn--accent": a.variant === "accent" }
+      ]),
+      disabled: a.disabled,
+      title: a.title,
+      onClick: n[0] || (n[0] = (t) => e.$emit("click", t))
+    }, [
+      e.$slots.default ? (C(), $("span", vt, [
+        Ue(e.$slots, "default")
+      ])) : Z("", !0),
+      a.label ? (C(), $("span", pt, q(a.label), 1)) : Z("", !0)
+    ], 10, ht));
+  }
+}), ft = { class: "vie-toolbar" }, mt = { class: "vie-toolbar-group" }, gt = { class: "vie-toolbar-group" }, yt = ["title"], wt = { class: "vie-toolbar-group" }, kt = {
+  key: 0,
+  class: "vie-spinner",
+  style: { width: "16px", height: "16px", "border-width": "2px" }
+}, bt = {
+  key: 1,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-width": "2.5",
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round"
+}, $e = /* @__PURE__ */ Y({
+  __name: "EditorToolbar",
+  props: {
+    processing: { type: Boolean }
+  },
+  emits: ["done"],
+  setup(a) {
+    const e = Q(ee, (t) => t), n = G();
+    return (t, o) => (C(), $("div", ft, [
+      m("div", mt, [
+        O(te, {
+          title: S(e)("undo"),
+          disabled: !S(n).canUndo.value,
+          onClick: o[0] || (o[0] = (d) => S(n).undo())
+        }, {
+          default: J(() => [...o[7] || (o[7] = [
+            m("svg", {
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              "stroke-width": "2",
+              "stroke-linecap": "round",
+              "stroke-linejoin": "round"
+            }, [
+              m("path", { d: "M3 10h10a5 5 0 0 1 0 10H9" }),
+              m("path", { d: "M3 10l4-4" }),
+              m("path", { d: "M3 10l4 4" })
+            ], -1)
+          ])]),
+          _: 1
+        }, 8, ["title", "disabled"]),
+        O(te, {
+          title: S(e)("redo"),
+          disabled: !S(n).canRedo.value,
+          onClick: o[1] || (o[1] = (d) => S(n).redo())
+        }, {
+          default: J(() => [...o[8] || (o[8] = [
+            m("svg", {
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              "stroke-width": "2",
+              "stroke-linecap": "round",
+              "stroke-linejoin": "round"
+            }, [
+              m("path", { d: "M21 10H11a5 5 0 0 0 0 10h4" }),
+              m("path", { d: "M21 10l-4-4" }),
+              m("path", { d: "M21 10l-4 4" })
+            ], -1)
+          ])]),
+          _: 1
+        }, 8, ["title", "disabled"]),
+        O(te, {
+          title: S(e)("revert"),
+          disabled: !S(n).hasEdits.value,
+          onClick: o[2] || (o[2] = (d) => S(n).revert())
+        }, {
+          default: J(() => [...o[9] || (o[9] = [
+            m("svg", {
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              "stroke-width": "2",
+              "stroke-linecap": "round",
+              "stroke-linejoin": "round"
+            }, [
+              m("path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }),
+              m("path", { d: "M3 3v5h5" })
+            ], -1)
+          ])]),
+          _: 1
+        }, 8, ["title", "disabled"])
+      ]),
+      m("div", gt, [
+        O(te, {
+          title: S(e)("zoomOut"),
+          onClick: o[3] || (o[3] = (d) => S(n).setZoom(S(n).zoom.value - 0.1))
+        }, {
+          default: J(() => [...o[10] || (o[10] = [
+            m("svg", {
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              "stroke-width": "2",
+              "stroke-linecap": "round"
+            }, [
+              m("circle", {
+                cx: "11",
+                cy: "11",
+                r: "8"
+              }),
+              m("path", { d: "M8 11h6" })
+            ], -1)
+          ])]),
+          _: 1
+        }, 8, ["title"]),
+        m("button", {
+          class: "vie-zoom-label",
+          title: S(e)("zoomToFit"),
+          onClick: o[4] || (o[4] = (d) => S(n).setZoom(1))
+        }, q(Math.round(S(n).zoom.value * 100)) + "% ", 9, yt),
+        O(te, {
+          title: S(e)("zoomIn"),
+          onClick: o[5] || (o[5] = (d) => S(n).setZoom(S(n).zoom.value + 0.1))
+        }, {
+          default: J(() => [...o[11] || (o[11] = [
+            m("svg", {
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              "stroke-width": "2",
+              "stroke-linecap": "round"
+            }, [
+              m("circle", {
+                cx: "11",
+                cy: "11",
+                r: "8"
+              }),
+              m("path", { d: "M8 11h6" }),
+              m("path", { d: "M11 8v6" })
+            ], -1)
+          ])]),
+          _: 1
+        }, 8, ["title"])
+      ]),
+      m("div", wt, [
+        O(te, {
+          variant: "accent",
+          label: a.processing ? S(e)("processing") : S(e)("done"),
+          disabled: a.processing,
+          onClick: o[6] || (o[6] = (d) => t.$emit("done"))
+        }, {
+          default: J(() => [
+            a.processing ? (C(), $("span", kt)) : (C(), $("svg", bt, [...o[12] || (o[12] = [
+              m("polyline", { points: "20 6 9 17 4 12" }, null, -1)
+            ])]))
+          ]),
+          _: 1
+        }, 8, ["label", "disabled"])
+      ])
+    ]));
+  }
+});
+class _t {
+  constructor(e) {
+    this.sourceImage = null, this.animFrameId = null, this.needsRender = !0, this.viewport = { zoom: 1, panX: 0, panY: 0 }, this.activePluginId = null, this.fullImageRect = { x: 0, y: 0, width: 0, height: 0 }, this.previewCanvas = null, this.previewCtx = null, this.previewCacheKey = "", this.previewMaxSize = 1024, this.stickerImageCache = /* @__PURE__ */ new Map(), this.afterRender = null, this.getState = null, this.canvas = e;
+    const n = e.getContext("2d");
+    if (!n) throw new Error("Failed to get 2D rendering context");
+    this.ctx = n;
+  }
+  setSource(e) {
+    this.sourceImage = e, this.previewCacheKey = "", this.previewCanvas = null, this.previewCtx = null, this.needsRender = !0;
+  }
+  /** Resize canvas to match container (handles DPR) */
+  resize(e, n) {
+    const t = window.devicePixelRatio || 1;
+    this.canvas.width = e * t, this.canvas.height = n * t, this.canvas.style.width = `${e}px`, this.canvas.style.height = `${n}px`, this.ctx.setTransform(t, 0, 0, t, 0, 0), this.needsRender = !0;
+  }
+  /** Request a render on the next animation frame */
+  requestRender() {
+    this.needsRender = !0, this.scheduleRender();
+  }
+  /** Start the render loop */
+  startRenderLoop(e) {
+    this.getState = e, this.scheduleRender();
+  }
+  /** Schedule a single render frame (only when needed) */
+  scheduleRender() {
+    this.animFrameId === null && (this.animFrameId = requestAnimationFrame(() => {
+      this.animFrameId = null, this.needsRender && this.getState && (this.render(this.getState()), this.needsRender = !1);
+    }));
+  }
+  /** Stop the render loop */
+  stopRenderLoop() {
+    this.animFrameId !== null && (cancelAnimationFrame(this.animFrameId), this.animFrameId = null);
+  }
+  /**
+   * Build a cache key from the finetune + filter state.
+   * Only regenerates the preview canvas when these values change.
+   */
+  buildEffectsCacheKey(e, n) {
+    return `${e.brightness},${e.contrast},${e.saturation},${e.exposure},${e.temperature},${e.gamma},${e.clarity},${e.vignette},${n.id},${n.intensity},${n.matrix ? "M" : "N"}`;
+  }
+  /**
+   * Check if any color effects are active.
+   */
+  hasColorEffects(e, n) {
+    return e.brightness !== 0 || e.contrast !== 0 || e.saturation !== 0 || e.exposure !== 0 || e.temperature !== 0 || e.gamma !== 1 || e.clarity !== 0 || e.vignette !== 0 || n.matrix != null;
+  }
+  /**
+   * Get a color-adjusted preview image.
+   * Returns the source image if no effects are active,
+   * otherwise returns a cached offscreen canvas with effects applied.
+   */
+  getPreviewSource(e) {
+    const n = this.sourceImage, { finetune: t, filter: o } = e;
+    if (!this.hasColorEffects(t, o))
+      return n;
+    const d = this.buildEffectsCacheKey(t, o);
+    if (d === this.previewCacheKey && this.previewCanvas)
+      return this.previewCanvas;
+    const u = Math.min(
+      this.previewMaxSize / n.naturalWidth,
+      this.previewMaxSize / n.naturalHeight,
+      1
+    ), r = Math.round(n.naturalWidth * u), i = Math.round(n.naturalHeight * u);
+    (!this.previewCanvas || this.previewCanvas.width !== r || this.previewCanvas.height !== i) && (this.previewCanvas = document.createElement("canvas"), this.previewCanvas.width = r, this.previewCanvas.height = i, this.previewCtx = this.previewCanvas.getContext("2d"));
+    const h = this.previewCtx;
+    h.drawImage(n, 0, 0, r, i);
+    const s = [];
+    if (t.brightness !== 0 && s.push(Ae(t.brightness)), t.contrast !== 0 && s.push(Le(t.contrast)), t.saturation !== 0 && s.push(Fe(t.saturation)), t.exposure !== 0 && s.push(He(t.exposure)), t.temperature !== 0 && s.push(Ve(t.temperature)), o.matrix)
+      if (o.intensity < 1) {
+        const y = o.matrix, c = o.intensity;
+        s.push(xe.map((p, w) => p * (1 - c) + y[w] * c));
+      } else
+        s.push(o.matrix);
+    const l = h.getImageData(0, 0, r, i);
+    return s.length > 0 && Ce(l, De(...s)), t.gamma !== 1 && ye(l, t.gamma), t.clarity !== 0 && ke(l, t.clarity), t.vignette !== 0 && we(l, t.vignette, r, i), h.putImageData(l, 0, 0), this.previewCacheKey = d, this.previewCanvas;
+  }
+  /** Check if crop is not at full-image defaults */
+  isCropActive(e) {
+    return e.x > 1e-3 || e.y > 1e-3 || e.width < 0.999 || e.height < 0.999;
+  }
+  /**
+   * Main render method.
+   * Draws the image with color adjustments fitted to the canvas.
+   * On crop tab: renders full image (CropOverlay handles crop visualization).
+   * On other tabs: renders only the cropped region fitted to canvas.
+   */
+  render(e) {
+    const n = this.ctx, t = this.canvas, o = window.devicePixelRatio || 1, d = t.width / o, u = t.height / o;
+    if (n.clearRect(0, 0, d, u), !this.sourceImage) return;
+    const r = this.sourceImage, i = e.crop, h = 40, s = d - h * 2, l = u - h * 2, y = this.activePluginId !== "crop" && this.isCropActive(i), c = this.getPreviewSource(e);
+    y ? this.renderCroppedView(n, e, c, d, u, s, l) : this.renderFullView(n, e, c, r, d, u, s, l), this.afterRender && this.afterRender(n, e, this.fullImageRect);
+  }
+  /**
+   * Render full image view (used on the crop tab).
+   */
+  renderFullView(e, n, t, o, d, u, r, i) {
+    const h = n.crop, s = Math.min(r / o.naturalWidth, i / o.naturalHeight), l = o.naturalWidth * s, y = o.naturalHeight * s, c = (d - l) / 2, p = (u - y) / 2;
+    this.fullImageRect = { x: c, y: p, width: l, height: y }, e.save();
+    const w = this.viewport;
+    e.translate(d / 2 + w.panX, u / 2 + w.panY), e.scale(w.zoom, w.zoom), e.translate(-d / 2, -u / 2);
+    const M = c + l / 2, k = p + y / 2;
+    e.translate(M, k), e.rotate(h.rotation), e.scale(h.flipX ? -1 : 1, h.flipY ? -1 : 1), e.translate(-M, -k);
+    const v = n.backgroundColor;
+    v[3] > 0 && (e.fillStyle = `rgba(${Math.round(v[0] * 255)}, ${Math.round(v[1] * 255)}, ${Math.round(v[2] * 255)}, ${v[3]})`, e.fillRect(c, p, l, y)), e.drawImage(t, c, p, l, y), n.frame.style && this.renderFramePreview(e, n, c, p, l, y), n.stickers.length > 0 && this.renderStickers(e, n.stickers, c, p, l, y), e.restore();
+  }
+  /**
+   * Render cropped view (used on non-crop tabs).
+   * Shows only the crop region fitted to the canvas.
+   */
+  renderCroppedView(e, n, t, o, d, u, r) {
+    const i = this.sourceImage, h = n.crop, s = i.naturalWidth * h.width, l = i.naturalHeight * h.height, y = Math.min(u / s, r / l), c = s * y, p = l * y, w = (o - c) / 2, M = (d - p) / 2;
+    this.fullImageRect = { x: w, y: M, width: c, height: p };
+    const k = t instanceof HTMLImageElement ? t.naturalWidth : t.width, v = t instanceof HTMLImageElement ? t.naturalHeight : t.height;
+    e.save();
+    const f = this.viewport;
+    e.translate(o / 2 + f.panX, d / 2 + f.panY), e.scale(f.zoom, f.zoom), e.translate(-o / 2, -d / 2);
+    const g = w + c / 2, b = M + p / 2;
+    e.translate(g, b), e.rotate(h.rotation), e.scale(h.flipX ? -1 : 1, h.flipY ? -1 : 1), e.translate(-g, -b);
+    const I = n.backgroundColor;
+    I[3] > 0 && (e.fillStyle = `rgba(${Math.round(I[0] * 255)}, ${Math.round(I[1] * 255)}, ${Math.round(I[2] * 255)}, ${I[3]})`, e.fillRect(w, M, c, p)), e.drawImage(
+      t,
+      h.x * k,
+      h.y * v,
+      // source x, y
+      h.width * k,
+      h.height * v,
+      // source w, h
+      w,
+      M,
+      c,
+      p
+      // dest x, y, w, h
+    ), n.frame.style && this.renderFramePreview(e, n, w, M, c, p), n.stickers.length > 0 && this.renderStickersInCrop(e, n.stickers, h, w, M, c, p), e.restore();
+  }
+  /**
+   * Render frame preview overlay on the canvas.
+   */
+  renderFramePreview(e, n, t, o, d, u) {
+    const r = n.frame, i = Math.round(Math.max(d, u) * r.size), h = r.color, s = `rgba(${Math.round(h[0] * 255)}, ${Math.round(h[1] * 255)}, ${Math.round(h[2] * 255)}, ${h[3]})`, l = Math.round(r.radius);
+    switch (e.strokeStyle = s, e.fillStyle = s, r.style) {
+      case "solidSharp":
+        e.lineWidth = i, e.strokeRect(t + i / 2, o + i / 2, d - i, u - i);
+        break;
+      case "solidRound":
+        e.lineWidth = i, e.beginPath(), e.roundRect(t + i / 2, o + i / 2, d - i, u - i, l + i / 2), e.stroke();
+        break;
+      case "lineSingle": {
+        const y = i * 2;
+        e.lineWidth = 1, e.strokeRect(t + y, o + y, d - y * 2, u - y * 2);
+        break;
+      }
+      case "lineMultiple":
+        e.lineWidth = 1;
+        for (let y = 1; y <= 3; y++) {
+          const c = i * y;
+          e.strokeRect(t + c, o + c, d - c * 2, u - c * 2);
+        }
+        break;
+      case "hook": {
+        const y = Math.min(d, u) * 0.1;
+        e.lineWidth = i * 0.5;
+        const c = i;
+        e.beginPath(), e.moveTo(t + c, o + c + y), e.lineTo(t + c, o + c), e.lineTo(t + c + y, o + c), e.stroke(), e.beginPath(), e.moveTo(t + d - c - y, o + c), e.lineTo(t + d - c, o + c), e.lineTo(t + d - c, o + c + y), e.stroke(), e.beginPath(), e.moveTo(t + c, o + u - c - y), e.lineTo(t + c, o + u - c), e.lineTo(t + c + y, o + u - c), e.stroke(), e.beginPath(), e.moveTo(t + d - c - y, o + u - c), e.lineTo(t + d - c, o + u - c), e.lineTo(t + d - c, o + u - c - y), e.stroke();
+        break;
+      }
+      case "polaroid": {
+        const y = i, c = i * 4;
+        e.fillRect(t, o, d, y), e.fillRect(t, o, y, u), e.fillRect(t + d - y, o, y, u), e.fillRect(t, o + u - c, d, c);
+        break;
+      }
+      default:
+        e.lineWidth = i * 0.5, e.strokeRect(t + i, o + i, d - i * 2, u - i * 2);
+        break;
+    }
+  }
+  /**
+   * Get the full image display rect in CSS pixels.
+   * The CropOverlay uses this to position crop handles correctly.
+   */
+  getImageRect() {
+    return { ...this.fullImageRect };
+  }
+  /**
+   * Render stickers on the canvas viewport.
+   */
+  renderStickers(e, n, t, o, d, u) {
+    for (const r of n) {
+      const i = t + r.x * d, h = o + r.y * u, s = r.width * d, l = r.height * u;
+      if (e.save(), e.globalAlpha = r.opacity, e.translate(i + s / 2, h + l / 2), e.rotate(r.rotation), e.scale(r.flipX ? -1 : 1, r.flipY ? -1 : 1), !r.src.startsWith("http") && !r.src.startsWith("data:") && !r.src.startsWith("blob:") && !r.src.startsWith("/") && !r.src.startsWith(".")) {
+        const c = Math.min(s, l) * 0.8;
+        e.font = `${c}px sans-serif`, e.textAlign = "center", e.textBaseline = "middle", e.fillText(r.src, 0, 0);
+      } else {
+        let c = this.stickerImageCache.get(r.src);
+        if (!c) {
+          if (this.stickerImageCache.size >= 50) {
+            const p = this.stickerImageCache.keys().next().value;
+            this.stickerImageCache.delete(p);
+          }
+          c = new Image(), c.crossOrigin = "anonymous", c.src = r.src, this.stickerImageCache.set(r.src, c), c.onload = () => {
+            this.requestRender();
+          }, c.onerror = () => {
+            this.stickerImageCache.delete(r.src);
+          };
+        }
+        c.complete && c.naturalWidth > 0 && e.drawImage(c, -s / 2, -l / 2, s, l);
+      }
+      e.restore();
+    }
+  }
+  /**
+   * Render stickers with positions remapped relative to the crop region.
+   */
+  renderStickersInCrop(e, n, t, o, d, u, r) {
+    if (!(t.width <= 0 || t.height <= 0))
+      for (const i of n) {
+        const h = (i.x - t.x) / t.width, s = (i.y - t.y) / t.height, l = i.width / t.width, y = i.height / t.height;
+        if (h + l < 0 || h > 1 || s + y < 0 || s > 1) continue;
+        const c = o + h * u, p = d + s * r, w = l * u, M = y * r;
+        if (e.save(), e.globalAlpha = i.opacity, e.translate(c + w / 2, p + M / 2), e.rotate(i.rotation), e.scale(i.flipX ? -1 : 1, i.flipY ? -1 : 1), !i.src.startsWith("http") && !i.src.startsWith("data:") && !i.src.startsWith("blob:") && !i.src.startsWith("/") && !i.src.startsWith(".")) {
+          const v = Math.min(w, M) * 0.8;
+          e.font = `${v}px sans-serif`, e.textAlign = "center", e.textBaseline = "middle", e.fillText(i.src, 0, 0);
+        } else {
+          let v = this.stickerImageCache.get(i.src);
+          if (!v) {
+            if (this.stickerImageCache.size >= 50) {
+              const f = this.stickerImageCache.keys().next().value;
+              this.stickerImageCache.delete(f);
+            }
+            v = new Image(), v.crossOrigin = "anonymous", v.src = i.src, this.stickerImageCache.set(i.src, v), v.onload = () => {
+              this.requestRender();
+            }, v.onerror = () => {
+              this.stickerImageCache.delete(i.src);
+            };
+          }
+          v.complete && v.naturalWidth > 0 && e.drawImage(v, -w / 2, -M / 2, w, M);
+        }
+        e.restore();
+      }
+  }
+  destroy() {
+    this.stopRenderLoop(), this.sourceImage = null, this.previewCanvas = null, this.previewCtx = null, this.stickerImageCache.clear();
+  }
+}
+const xt = {
+  key: 0,
+  class: "vie-canvas-overlay vie-canvas-overlay--interactive"
+}, Ct = {
+  key: 1,
+  class: "vie-canvas-loading"
+}, Mt = {
+  key: 2,
+  class: "vie-canvas-loading",
+  style: { color: "var(--vie-danger)" }
+}, Re = /* @__PURE__ */ Y({
+  __name: "EditorCanvas",
+  setup(a, { expose: e }) {
+    const n = Q(ee, (R) => R), t = G(), o = F(null), d = F(null), u = F({ x: 0, y: 0, width: 0, height: 0 }), r = F({ width: 0, height: 0 });
+    let i = null, h = null, s = null, l = null;
+    function y() {
+      i && (u.value = i.getImageRect());
+    }
+    ce(() => {
+      if (!d.value || !o.value) return;
+      i = new _t(d.value), h = new ResizeObserver((x) => {
+        for (const E of x) {
+          const { width: L, height: B } = E.contentRect;
+          L > 0 && B > 0 && (r.value = { width: L, height: B }, i == null || i.resize(L, B), i == null || i.requestRender(), requestAnimationFrame(y));
+        }
+      }), h.observe(o.value);
+      function R() {
+        s == null || s.removeEventListener("change", l);
+        const x = window.devicePixelRatio || 1;
+        s = window.matchMedia(`(resolution: ${x}dppx)`), l = () => {
+          const { width: E, height: L } = r.value;
+          E > 0 && L > 0 && (i == null || i.resize(E, L), i == null || i.requestRender()), R();
+        }, s.addEventListener("change", l);
+      }
+      R();
+      const z = o.value.getBoundingClientRect();
+      r.value = { width: z.width, height: z.height }, i.resize(z.width, z.height), i.startRenderLoop(() => t.state), i.afterRender = (x, E, L) => {
+        const B = t.activePlugin.value;
+        B != null && B.onRender && B.onRender({ ctx: x, state: E, imageRect: L });
+      }, t.onRender.value = () => {
+        i == null || i.requestRender(), requestAnimationFrame(y);
+      }, i.activePluginId = t.activePluginId.value, c = t.zoom.value, p = t.zoom.value, M = 0, k = 0, v = 0, f = 0, t.options.src && t.load(t.options.src);
+    }), ne(() => t.sourceImage.value, (R) => {
+      i && R && (i.setSource(R), i.requestRender(), requestAnimationFrame(() => requestAnimationFrame(y)));
+    }), ne(() => t.zoom.value, (R) => {
+      i && (i.viewport.zoom = R, i.requestRender(), requestAnimationFrame(y)), w || (c = R, p = R, R <= 1.005 && (M = 0, k = 0, v = 0, f = 0, g()));
+    }), ne(() => t.activePluginId.value, (R) => {
+      i && (i.activePluginId = R, i.requestRender(), requestAnimationFrame(y));
+    }), ne(() => t.cropDragPan.value, (R) => {
+      i && (i.viewport.panX = v + R.x, i.viewport.panY = f + R.y, i.requestRender());
+    }, { deep: !0 });
+    let c = 1, p = 1, w = !1, M = 0, k = 0, v = 0, f = 0;
+    function g() {
+      i && (i.viewport.panX = v, i.viewport.panY = f, i.requestRender(), requestAnimationFrame(y));
+    }
+    function b(R) {
+      const z = R.deltaY > 0 ? 0.95 : 1.05, x = Math.max(0.1, Math.min(10, c * z)), E = o.value.getBoundingClientRect(), L = R.clientX - E.left - E.width / 2, B = R.clientY - E.top - E.height / 2, oe = x / c;
+      M = L - (L - M) * oe, k = B - (B - k) * oe, c = x, c <= 1.005 && (M = 0, k = 0), w || (w = !0, I());
+    }
+    function I() {
+      const R = c - p, z = M - v, x = k - f;
+      if (Math.abs(R) < 1e-3 && Math.abs(z) < 0.5 && Math.abs(x) < 0.5) {
+        p = c, v = M, f = k, t.setZoom(p), g(), w = !1;
+        return;
+      }
+      const L = 0.15;
+      p += R * L, v += z * L, f += x * L, t.setZoom(p), g(), requestAnimationFrame(I);
+    }
+    const H = F(!1), T = V(() => t.zoom.value > 1.005 && t.activePluginId.value !== "crop");
+    function K(R) {
+      if (R.button !== 0 || !T.value || R.target !== o.value && R.target !== d.value) return;
+      R.preventDefault(), H.value = !0;
+      const z = R.clientX, x = R.clientY, E = M, L = k, B = (Me) => {
+        M = E + (Me.clientX - z), k = L + (Me.clientY - x), v = M, f = k, g();
+      }, oe = () => {
+        H.value = !1, window.removeEventListener("mousemove", B), window.removeEventListener("mouseup", oe);
+      };
+      window.addEventListener("mousemove", B), window.addEventListener("mouseup", oe);
+    }
+    let D = 0, W = 1;
+    function P(R, z) {
+      const x = R.clientX - z.clientX, E = R.clientY - z.clientY;
+      return Math.sqrt(x * x + E * E);
+    }
+    function j(R) {
+      R.touches.length === 2 && (D = P(R.touches[0], R.touches[1]), W = t.zoom.value);
+    }
+    function _(R) {
+      if (R.touches.length === 2) {
+        const z = P(R.touches[0], R.touches[1]);
+        if (D > 0) {
+          const x = z / D;
+          t.setZoom(W * x);
+        }
+      }
+    }
+    function A(R) {
+      D = 0;
+    }
+    return ue(() => {
+      h == null || h.disconnect(), s == null || s.removeEventListener("change", l), s = null, i == null || i.destroy(), i = null, t.onRender.value = null;
+    }), e({
+      getRenderer: () => i
+    }), (R, z) => {
+      var x;
+      return C(), $("div", {
+        class: U(["vie-canvas-wrapper", { "vie-canvas-wrapper--grab": T.value, "vie-canvas-wrapper--grabbing": H.value }]),
+        ref_key: "wrapperRef",
+        ref: o,
+        onWheel: le(b, ["prevent"]),
+        onMousedown: K,
+        onTouchstartPassive: j,
+        onTouchmove: le(_, ["prevent"]),
+        onTouchendPassive: A
+      }, [
+        m("canvas", {
+          ref_key: "canvasRef",
+          ref: d,
+          class: "vie-canvas"
+        }, null, 512),
+        (x = S(t).activePlugin.value) != null && x.overlay ? (C(), $("div", xt, [
+          (C(), re(be(S(t).activePlugin.value.overlay), {
+            "canvas-rect": u.value,
+            "wrapper-size": r.value
+          }, null, 8, ["canvas-rect", "wrapper-size"]))
+        ])) : Z("", !0),
+        S(t).loading.value ? (C(), $("div", Ct, [
+          z[0] || (z[0] = m("span", { class: "vie-spinner" }, null, -1)),
+          m("span", null, q(S(n)("loading")), 1)
+        ])) : Z("", !0),
+        S(t).error.value ? (C(), $("div", Mt, q(S(n)("loadError")), 1)) : Z("", !0)
+      ], 34);
+    };
+  }
+}), St = {
+  class: "vie-tab-bar",
+  role: "tablist"
+}, $t = ["aria-selected", "onClick"], Rt = { class: "vie-tab__label" }, Ie = /* @__PURE__ */ Y({
+  __name: "EditorTabs",
+  setup(a) {
+    const e = Q(ee, (i) => i), n = G(), t = F([]), o = /* @__PURE__ */ new Set([
+      "svg",
+      "path",
+      "circle",
+      "rect",
+      "line",
+      "polyline",
+      "polygon",
+      "ellipse",
+      "g",
+      "defs",
+      "clippath",
+      "mask",
+      "use",
+      "text",
+      "tspan"
+    ]), d = /* @__PURE__ */ new Set([
+      "viewbox",
+      "width",
+      "height",
+      "fill",
+      "stroke",
+      "stroke-width",
+      "stroke-linecap",
+      "stroke-linejoin",
+      "d",
+      "cx",
+      "cy",
+      "r",
+      "rx",
+      "ry",
+      "x",
+      "y",
+      "x1",
+      "y1",
+      "x2",
+      "y2",
+      "points",
+      "transform",
+      "opacity",
+      "class",
+      "id",
+      "clip-path",
+      "clip-rule",
+      "fill-rule",
+      "fill-opacity",
+      "stroke-opacity",
+      "stroke-dasharray",
+      "stroke-dashoffset"
+    ]);
+    function u(i) {
+      const l = new DOMParser().parseFromString(i, "image/svg+xml").documentElement;
+      function y(c) {
+        const p = Array.from(c.children);
+        for (const w of p)
+          if (!o.has(w.tagName.toLowerCase()))
+            w.remove();
+          else {
+            for (const M of Array.from(w.attributes))
+              d.has(M.name.toLowerCase()) || w.removeAttribute(M.name);
+            y(w);
+          }
+      }
+      return y(l), l.outerHTML;
+    }
+    function r() {
+      const i = n.plugins.value.filter((h) => typeof h.icon == "string");
+      t.value.forEach((h, s) => {
+        h && i[s] && (h.innerHTML = u(i[s].icon));
+      });
+    }
+    return ce(r), Ne(r), (i, h) => (C(), $("div", St, [
+      (C(!0), $(X, null, N(S(n).plugins.value, (s) => (C(), $("button", {
+        key: s.id,
+        role: "tab",
+        "aria-selected": s.id === S(n).activePluginId.value,
+        class: U([
+          "vie-tab",
+          { "vie-tab--active": s.id === S(n).activePluginId.value }
+        ]),
+        onClick: (l) => S(n).setActivePlugin(s.id)
+      }, [
+        typeof s.icon == "string" ? (C(), $("span", {
+          key: 0,
+          class: "vie-tab__icon",
+          ref_for: !0,
+          ref_key: "iconRefs",
+          ref: t
+        }, null, 512)) : (C(), re(be(s.icon), {
+          key: 1,
+          class: "vie-tab__icon"
+        })),
+        m("span", Rt, q(S(e)(s.labelKey)), 1)
+      ], 10, $t))), 128))
+    ]));
+  }
+}), It = {
+  key: 0,
+  class: "vie-control-panel"
+}, ze = /* @__PURE__ */ Y({
+  __name: "EditorControlPanel",
+  setup(a) {
+    const e = G();
+    return (n, t) => {
+      var o;
+      return (o = S(e).activePlugin.value) != null && o.controls ? (C(), $("div", It, [
+        O(_e, {
+          name: "vie-panel",
+          mode: "out-in"
+        }, {
+          default: J(() => [
+            (C(), re(be(S(e).activePlugin.value.controls), {
+              key: S(e).activePluginId.value
+            }))
+          ]),
+          _: 1
+        })
+      ])) : Z("", !0);
+    };
+  }
+}), zt = ["aria-valuemin", "aria-valuemax", "aria-valuenow", "aria-labelledby"], Pt = { class: "vie-slider__track" }, Et = {
+  key: 0,
+  class: "vie-slider__tooltip"
+}, Tt = { class: "vie-slider__value" }, ve = /* @__PURE__ */ Y({
+  __name: "Slider",
+  props: {
+    modelValue: {},
+    min: { default: 0 },
+    max: { default: 1 },
+    step: { default: 0.01 },
+    base: { default: 0 },
+    label: {},
+    format: { default: "percent" },
+    ticks: {}
+  },
+  emits: ["update:modelValue"],
+  setup(a, { emit: e }) {
+    const n = `vie-slider-${Math.random().toString(36).slice(2, 9)}`, t = a, o = e, d = F(null), u = F(!1), r = V(() => (t.modelValue - t.min) / (t.max - t.min)), i = V(() => (t.base - t.min) / (t.max - t.min)), h = V(() => t.ticks ? t.ticks.map((k) => (k - t.min) / (t.max - t.min)) : []), s = V(() => r.value * 100), l = V(() => {
+      const k = Math.min(i.value, r.value), v = Math.max(i.value, r.value);
+      return {
+        left: k * 100 + "%",
+        width: (v - k) * 100 + "%"
+      };
+    }), y = V(() => t.format === "percent" ? Math.round(t.modelValue * 100) + "%" : t.modelValue.toFixed(2));
+    function c(k) {
+      if (!d.value) return t.modelValue;
+      const v = d.value.getBoundingClientRect(), f = getComputedStyle(d.value).direction === "rtl";
+      let g;
+      f ? g = (v.right - k.clientX) / v.width : g = (k.clientX - v.left) / v.width, g = Math.max(0, Math.min(1, g));
+      let b = t.min + g * (t.max - t.min);
+      return b = Math.round(b / t.step) * t.step, Math.max(t.min, Math.min(t.max, b));
+    }
+    function p(k) {
+      if (k.button !== 0) return;
+      u.value = !0, o("update:modelValue", c(k));
+      const v = (g) => {
+        o("update:modelValue", c(g));
+      }, f = () => {
+        u.value = !1, window.removeEventListener("pointermove", v), window.removeEventListener("pointerup", f);
+      };
+      window.addEventListener("pointermove", v), window.addEventListener("pointerup", f);
+    }
+    function w() {
+      o("update:modelValue", t.base);
+    }
+    function M(k) {
+      let v = t.modelValue;
+      switch (k.key) {
+        case "ArrowRight":
+        case "ArrowUp":
+          v = Math.min(t.max, t.modelValue + t.step);
+          break;
+        case "ArrowLeft":
+        case "ArrowDown":
+          v = Math.max(t.min, t.modelValue - t.step);
+          break;
+        case "Home":
+          v = t.min;
+          break;
+        case "End":
+          v = t.max;
+          break;
+        default:
+          return;
+      }
+      k.preventDefault(), o("update:modelValue", Math.round(v / t.step) * t.step);
+    }
+    return (k, v) => (C(), $("div", {
+      class: U(["vie-slider", { "vie-slider--dragging": u.value }])
+    }, [
+      a.label ? (C(), $("span", {
+        key: 0,
+        class: "vie-slider__label",
+        id: n
+      }, q(a.label), 1)) : Z("", !0),
+      m("div", {
+        ref_key: "trackRef",
+        ref: d,
+        class: "vie-slider__track-wrapper",
+        role: "slider",
+        tabindex: "0",
+        "aria-valuemin": a.min,
+        "aria-valuemax": a.max,
+        "aria-valuenow": a.modelValue,
+        "aria-labelledby": a.label ? n : void 0,
+        onPointerdown: p,
+        onDblclick: w,
+        onKeydown: M
+      }, [
+        m("div", Pt, [
+          m("div", {
+            class: "vie-slider__base-mark",
+            style: se({ left: i.value * 100 + "%" })
+          }, null, 4),
+          (C(!0), $(X, null, N(h.value, (f, g) => (C(), $("div", {
+            key: g,
+            class: "vie-slider__tick",
+            style: se({ left: f * 100 + "%" })
+          }, null, 4))), 128)),
+          m("div", {
+            class: "vie-slider__fill",
+            style: se(l.value)
+          }, null, 4),
+          m("div", {
+            class: "vie-slider__thumb",
+            style: se({ left: s.value + "%" })
+          }, [
+            v[0] || (v[0] = m("span", { class: "vie-slider__thumb-dot" }, null, -1)),
+            u.value ? (C(), $("span", Et, q(y.value), 1)) : Z("", !0)
+          ], 4)
+        ])
+      ], 40, zt),
+      m("span", Tt, q(y.value), 1)
+    ], 2));
+  }
+}), Wt = ["aria-expanded"], Kt = {
+  key: 0,
+  class: "vie-dropdown__menu",
+  role: "listbox"
+}, Dt = ["aria-selected", "onClick"], At = /* @__PURE__ */ Y({
+  __name: "Dropdown",
+  props: {
+    modelValue: {},
+    options: {}
+  },
+  emits: ["update:modelValue"],
+  setup(a, { emit: e }) {
+    const n = a, t = e, o = F(!1), d = F(null), u = V(() => {
+      const h = n.options.find((s) => s.value === n.modelValue);
+      return h ? h.label : "";
+    });
+    function r(h) {
+      t("update:modelValue", h), o.value = !1;
+    }
+    function i(h) {
+      d.value && !d.value.contains(h.target) && (o.value = !1);
+    }
+    return ne(o, (h) => {
+      h ? document.addEventListener("click", i) : document.removeEventListener("click", i);
+    }), ue(() => {
+      document.removeEventListener("click", i);
+    }), (h, s) => (C(), $("div", {
+      class: "vie-dropdown",
+      ref_key: "dropdownRef",
+      ref: d
+    }, [
+      m("button", {
+        class: "vie-dropdown__trigger",
+        role: "combobox",
+        "aria-expanded": o.value,
+        "aria-haspopup": "listbox",
+        onClick: s[0] || (s[0] = (l) => o.value = !o.value)
+      }, [
+        m("span", null, q(u.value), 1),
+        s[1] || (s[1] = m("svg", {
+          class: "vie-dropdown__chevron",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          "stroke-width": "2"
+        }, [
+          m("path", { d: "M6 9l6 6 6-6" })
+        ], -1))
+      ], 8, Wt),
+      O(_e, { name: "vie-dropdown" }, {
+        default: J(() => [
+          o.value ? (C(), $("div", Kt, [
+            (C(!0), $(X, null, N(a.options, (l) => (C(), $("button", {
+              key: l.value,
+              role: "option",
+              "aria-selected": l.value === a.modelValue,
+              class: U([
+                "vie-dropdown__item",
+                { "vie-dropdown__item--active": l.value === a.modelValue }
+              ]),
+              onClick: (y) => r(l.value)
+            }, q(l.label), 11, Dt))), 128))
+          ])) : Z("", !0)
+        ]),
+        _: 1
+      })
+    ], 512));
+  }
+}), Lt = [
+  { labelKey: "custom", value: null },
+  { labelKey: "square", value: 1 },
+  { labelKey: "landscape", value: 4 / 3 },
+  { labelKey: "landscape", value: 16 / 9 },
+  { labelKey: "portrait", value: 3 / 4 },
+  { labelKey: "portrait", value: 9 / 16 }
+];
+function Ft(a, e) {
+  if (a.value === null) return e("custom");
+  if (a.value === 1) return e("square") + " 1:1";
+  const t = {
+    [4 / 3]: "4:3",
+    [16 / 9]: "16:9",
+    [3 / 4]: "3:4",
+    [9 / 16]: "9:16"
+  }[a.value] || `${a.value.toFixed(2)}`, o = a.value > 1 ? "landscape" : "portrait";
+  return `${e(o)} ${t}`;
+}
+const Ht = { class: "vie-crop-controls" }, Vt = { class: "vie-crop-controls__section" }, jt = { class: "vie-crop-controls__section" }, Ot = { class: "vie-crop-controls__section" }, Bt = { class: "vie-crop-controls__rotation" }, qt = /* @__PURE__ */ Y({
+  __name: "CropControls",
+  setup(a) {
+    const e = Q(ee, (c) => c), n = G();
+    let t = !1;
+    ne(() => n.sourceImage.value, (c) => {
+      if (!c || t) return;
+      const p = n.state.crop;
+      if (!(p.x === 0 && p.y === 0 && p.width === 1 && p.height === 1 && p.aspectRatio === null && p.rotation === 0 && !p.flipX && !p.flipY)) return;
+      t = !0;
+      const M = c.naturalWidth / c.naturalHeight;
+      if (M >= 1) {
+        const k = 1 / M;
+        n.updateState((v) => {
+          v.crop.x = (1 - k) / 2, v.crop.y = 0, v.crop.width = k, v.crop.height = 1, v.crop.aspectRatio = 1;
+        });
+      } else {
+        const k = M;
+        n.updateState((v) => {
+          v.crop.x = 0, v.crop.y = (1 - k) / 2, v.crop.width = 1, v.crop.height = k, v.crop.aspectRatio = 1;
+        });
+      }
+    }, { immediate: !0 });
+    const o = V(
+      () => Lt.map((c) => ({
+        label: Ft(c, e),
+        value: c.value == null ? "custom" : c.value
+      }))
+    ), d = V(() => {
+      const c = n.state.crop.aspectRatio;
+      return c === null ? "custom" : c;
+    });
+    function u(c) {
+      const p = c === "custom" ? null : Number(c);
+      n.updateState((w) => {
+        if (w.crop.aspectRatio = p, p !== null) {
+          const M = w.crop.width, k = w.crop.height;
+          if (M / k > p) {
+            const f = k * p;
+            w.crop.x += (M - f) / 2, w.crop.width = f;
+          } else {
+            const f = M / p;
+            w.crop.y += (k - f) / 2, w.crop.height = f;
+          }
+        }
+      });
+    }
+    const r = V(() => n.state.crop.rotation * 180 / Math.PI);
+    function i(c) {
+      n.updateState((p) => {
+        p.crop.rotation = c * Math.PI / 180;
+      });
+    }
+    function h() {
+      n.updateState((c) => {
+        c.crop.rotation -= Math.PI / 2;
+      });
+    }
+    function s() {
+      n.updateState((c) => {
+        c.crop.rotation += Math.PI / 2;
+      });
+    }
+    function l() {
+      n.updateState((c) => {
+        c.crop.flipX = !c.crop.flipX;
+      });
+    }
+    function y() {
+      n.updateState((c) => {
+        c.crop.flipY = !c.crop.flipY;
+      });
+    }
+    return (c, p) => (C(), $("div", Ht, [
+      m("div", Vt, [
+        O(At, {
+          "model-value": d.value,
+          options: o.value,
+          "onUpdate:modelValue": u
+        }, null, 8, ["model-value", "options"])
+      ]),
+      p[4] || (p[4] = m("div", { class: "vie-crop-controls__divider" }, null, -1)),
+      m("div", jt, [
+        O(te, {
+          title: S(e)("rotateLeft"),
+          onClick: h
+        }, {
+          default: J(() => [...p[0] || (p[0] = [
+            m("svg", {
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              "stroke-width": "2",
+              "stroke-linecap": "round",
+              "stroke-linejoin": "round"
+            }, [
+              m("path", { d: "M2.5 2v6h6" }),
+              m("path", { d: "M2.5 8C5 4 9 2 13 2a9 9 0 1 1-6 15.7" })
+            ], -1)
+          ])]),
+          _: 1
+        }, 8, ["title"]),
+        O(te, {
+          title: S(e)("rotateRight"),
+          onClick: s
+        }, {
+          default: J(() => [...p[1] || (p[1] = [
+            m("svg", {
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              "stroke-width": "2",
+              "stroke-linecap": "round",
+              "stroke-linejoin": "round"
+            }, [
+              m("path", { d: "M21.5 2v6h-6" }),
+              m("path", { d: "M21.5 8C19 4 15 2 11 2a9 9 0 1 0 6 15.7" })
+            ], -1)
+          ])]),
+          _: 1
+        }, 8, ["title"])
+      ]),
+      p[5] || (p[5] = m("div", { class: "vie-crop-controls__divider" }, null, -1)),
+      m("div", Ot, [
+        O(te, {
+          title: S(e)("flipHorizontal"),
+          onClick: l
+        }, {
+          default: J(() => [...p[2] || (p[2] = [
+            m("svg", {
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              "stroke-width": "2",
+              "stroke-linecap": "round"
+            }, [
+              m("path", { d: "M12 3v18" }),
+              m("path", { d: "M16 7l4 5-4 5" }),
+              m("path", { d: "M8 7L4 12l4 5" })
+            ], -1)
+          ])]),
+          _: 1
+        }, 8, ["title"]),
+        O(te, {
+          title: S(e)("flipVertical"),
+          onClick: y
+        }, {
+          default: J(() => [...p[3] || (p[3] = [
+            m("svg", {
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              "stroke-width": "2",
+              "stroke-linecap": "round"
+            }, [
+              m("path", { d: "M3 12h18" }),
+              m("path", { d: "M7 8L12 4l5 4" }),
+              m("path", { d: "M7 16l5 4 5-4" })
+            ], -1)
+          ])]),
+          _: 1
+        }, 8, ["title"])
+      ]),
+      p[6] || (p[6] = m("div", { class: "vie-crop-controls__divider" }, null, -1)),
+      m("div", Bt, [
+        O(ve, {
+          label: S(e)("rotation"),
+          "model-value": r.value,
+          min: -45,
+          max: 45,
+          step: 0.5,
+          base: 0,
+          format: "number",
+          ticks: [-45, -30, -15, 0, 15, 30, 45],
+          "onUpdate:modelValue": i
+        }, null, 8, ["label", "model-value"])
+      ])
+    ]));
+  }
+}), Xt = ["viewBox", "width", "height"], Yt = ["width", "height"], Ut = ["x", "y", "width", "height"], Nt = ["width", "height", "mask"], Zt = ["x", "y", "width", "height"], Jt = {
+  key: 0,
+  class: "vie-crop-grid"
+}, Gt = ["x1", "y1", "x2", "y2"], Qt = ["x1", "y1", "x2", "y2"], en = ["x", "y", "width", "height"], tn = ["x", "y", "data-handle"], nn = ["x", "y", "width", "height", "data-handle"], on = ["x", "y"], an = {
+  xmlns: "http://www.w3.org/1999/xhtml",
+  style: { display: "flex", "justify-content": "center", "pointer-events": "none" }
+}, ae = 12, sn = 8, rn = 32, ln = /* @__PURE__ */ Y({
+  __name: "CropOverlay",
+  props: {
+    canvasRect: {},
+    wrapperSize: {}
+  },
+  setup(a) {
+    const e = `vie-crop-mask-${Math.random().toString(36).slice(2, 9)}`, n = a, t = G(), o = Q(ee, (f) => f), d = V(() => n.wrapperSize.width || 800), u = V(() => n.wrapperSize.height || 600), r = V(() => {
+      const f = n.canvasRect, g = t.state.crop;
+      return {
+        x: f.x + g.x * f.width,
+        y: f.y + g.y * f.height,
+        width: g.width * f.width,
+        height: g.height * f.height
+      };
+    }), i = V(() => {
+      const f = r.value, b = ae / 2;
+      return [
+        { id: "nw", x: f.x - b, y: f.y - b },
+        { id: "ne", x: f.x + f.width - b, y: f.y - b },
+        { id: "sw", x: f.x - b, y: f.y + f.height - b },
+        { id: "se", x: f.x + f.width - b, y: f.y + f.height - b }
+      ];
+    }), h = V(() => {
+      const f = r.value, g = Math.min(rn, f.width * 0.3, f.height * 0.3), b = sn;
+      return [
+        { id: "n", x: f.x + (f.width - g) / 2, y: f.y - b / 2, w: g, h: b },
+        { id: "s", x: f.x + (f.width - g) / 2, y: f.y + f.height - b / 2, w: g, h: b },
+        { id: "w", x: f.x - b / 2, y: f.y + (f.height - g) / 2, w: b, h: g },
+        { id: "e", x: f.x + f.width - b / 2, y: f.y + (f.height - g) / 2, w: b, h: g }
+      ];
+    }), s = F(null), l = F({ x: 0, y: 0 }), y = F({ x: 0, y: 0, width: 0, height: 0 }), c = F(!1);
+    let p = null;
+    function w(f) {
+      const g = f.target, b = g.getAttribute("data-handle");
+      if (!b) return;
+      f.preventDefault();
+      const I = g.ownerSVGElement || g;
+      I.setPointerCapture(f.pointerId), s.value = b, l.value = { x: f.clientX, y: f.clientY }, y.value = { ...t.state.crop };
+      const H = (D) => {
+        if (!s.value) return;
+        const W = n.canvasRect;
+        if (W.width === 0 || W.height === 0) return;
+        const P = (D.clientX - l.value.x) / W.width, j = (D.clientY - l.value.y) / W.height, _ = y.value, A = t.state.crop, R = A.aspectRatio;
+        switch (s.value) {
+          case "move": {
+            const z = D.clientX - l.value.x, x = D.clientY - l.value.y, E = v(_.x - z / W.width, 0, 1 - A.width), L = v(_.y - x / W.height, 0, 1 - A.height), B = (_.x - E) * W.width, oe = (_.y - L) * W.height;
+            t.cropDragPan.value = { x: B, y: oe };
+            break;
+          }
+          case "nw": {
+            let z = v(_.x + P), x = v(_.y + j), E = _.x + _.width - z, L = _.y + _.height - x;
+            R && (L = E / R, x = _.y + _.height - L, x < 0 && (x = 0, L = _.y + _.height, E = L * R, z = _.x + _.width - E)), E > 0.02 && L > 0.02 && z >= 0 && x >= 0 && (A.x = z, A.y = x, A.width = E, A.height = L);
+            break;
+          }
+          case "ne": {
+            let z = v(_.width + P, 0.02, 1 - _.x), x = _.y + j, E = _.y + _.height - x;
+            R && (E = z / R, x = _.y + _.height - E, x < 0 && (x = 0, E = _.y + _.height, z = E * R)), z > 0.02 && E > 0.02 && x >= 0 && _.x + z <= 1 && (A.y = x, A.width = z, A.height = E);
+            break;
+          }
+          case "sw": {
+            let z = v(_.x + P), x = _.x + _.width - z, E = v(_.height + j, 0.02, 1 - _.y);
+            R && (x = E * R, z = _.x + _.width - x, z < 0 && (z = 0, x = _.x + _.width, E = x / R)), x > 0.02 && E > 0.02 && z >= 0 && _.y + E <= 1 && (A.x = z, A.width = x, A.height = E);
+            break;
+          }
+          case "se": {
+            let z = v(_.width + P, 0.02, 1 - _.x), x = v(_.height + j, 0.02, 1 - _.y);
+            R && (x = z / R, _.y + x > 1 && (x = 1 - _.y, z = x * R)), z > 0.02 && x > 0.02 && _.x + z <= 1 && _.y + x <= 1 && (A.width = z, A.height = x);
+            break;
+          }
+          case "n": {
+            let z = v(_.y + j), x = _.y + _.height - z;
+            if (R) {
+              const E = x * R, L = E - _.width, B = v(_.x - L / 2, 0, 1 - E);
+              E > 0.02 && B >= 0 && B + E <= 1 && (A.x = B, A.width = E);
+            }
+            x > 0.02 && z >= 0 && (A.y = z, A.height = x);
+            break;
+          }
+          case "s": {
+            let z = v(_.height + j, 0.02, 1 - _.y);
+            if (R) {
+              const x = z * R, E = x - _.width, L = v(_.x - E / 2, 0, 1 - x);
+              x > 0.02 && L >= 0 && L + x <= 1 && (A.x = L, A.width = x);
+            }
+            z > 0.02 && _.y + z <= 1 && (A.height = z);
+            break;
+          }
+          case "w": {
+            let z = v(_.x + P), x = _.x + _.width - z;
+            if (R) {
+              const E = x / R, L = E - _.height, B = v(_.y - L / 2, 0, 1 - E);
+              E > 0.02 && B >= 0 && B + E <= 1 && (A.y = B, A.height = E);
+            }
+            x > 0.02 && z >= 0 && (A.x = z, A.width = x);
+            break;
+          }
+          case "e": {
+            let z = v(_.width + P, 0.02, 1 - _.x);
+            if (R) {
+              const x = z / R, E = x - _.height, L = v(_.y - E / 2, 0, 1 - x);
+              x > 0.02 && L >= 0 && L + x <= 1 && (A.y = L, A.height = x);
+            }
+            z > 0.02 && _.x + z <= 1 && (A.width = z);
+            break;
+          }
+        }
+        t.requestRender();
+      }, T = () => {
+        window.removeEventListener("pointermove", H), window.removeEventListener("pointerup", K), p = null;
+      }, K = (D) => {
+        if (s.value === "move") {
+          const W = D.clientX - l.value.x, P = D.clientY - l.value.y, j = n.canvasRect, _ = y.value, A = t.state.crop;
+          A.x = v(_.x - W / j.width, 0, 1 - A.width), A.y = v(_.y - P / j.height, 0, 1 - A.height), t.cropDragPan.value = { x: 0, y: 0 };
+        }
+        s.value && (s.value !== "move" && (c.value = !0), t.updateState(() => {
+        })), s.value = null;
+        try {
+          I.releasePointerCapture(D.pointerId);
+        } catch {
+        }
+        T();
+      };
+      window.addEventListener("pointermove", H), window.addEventListener("pointerup", K), p = T;
+    }
+    ue(() => {
+      p == null || p(), t.cropDragPan.value = { x: 0, y: 0 };
+    });
+    const M = V(() => {
+      const f = t.state.crop;
+      return c.value && !s.value && r.value.width > 60 && r.value.height > 60 && (f.x > 1e-3 || f.y > 1e-3 || f.width < 0.999 || f.height < 0.999);
+    });
+    ne(() => t.state.crop.aspectRatio, () => {
+      c.value = !1;
+    });
+    function k() {
+      const f = t.plugins.value, g = f.findIndex((b) => b.id === t.activePluginId.value);
+      g >= 0 && g < f.length - 1 && t.setActivePlugin(f[g + 1].id);
+    }
+    function v(f, g = 0, b = 1) {
+      return Math.max(g, Math.min(b, f));
+    }
+    return (f, g) => (C(), $("svg", {
+      class: U(["vie-crop-overlay", { "vie-crop-overlay--dragging": s.value }]),
+      role: "application",
+      "aria-label": "Crop region",
+      viewBox: `0 0 ${d.value} ${u.value}`,
+      width: d.value,
+      height: u.value,
+      style: { "touch-action": "none" },
+      onPointerdown: w
+    }, [
+      m("defs", null, [
+        m("mask", { id: e }, [
+          m("rect", {
+            x: "0",
+            y: "0",
+            width: d.value,
+            height: u.value,
+            fill: "white"
+          }, null, 8, Yt),
+          m("rect", {
+            x: r.value.x,
+            y: r.value.y,
+            width: Math.max(0, r.value.width),
+            height: Math.max(0, r.value.height),
+            fill: "black"
+          }, null, 8, Ut)
+        ])
+      ]),
+      m("rect", {
+        x: "0",
+        y: "0",
+        width: d.value,
+        height: u.value,
+        class: "vie-crop-mask",
+        mask: `url(#${e})`
+      }, null, 8, Nt),
+      m("rect", {
+        x: r.value.x,
+        y: r.value.y,
+        width: Math.max(0, r.value.width),
+        height: Math.max(0, r.value.height),
+        class: "vie-crop-border"
+      }, null, 8, Zt),
+      r.value.width > 10 && r.value.height > 10 ? (C(), $("g", Jt, [
+        (C(), $(X, null, N(2, (b) => m("line", {
+          key: "h" + b,
+          x1: r.value.x,
+          y1: r.value.y + r.value.height * (b / 3),
+          x2: r.value.x + r.value.width,
+          y2: r.value.y + r.value.height * (b / 3)
+        }, null, 8, Gt)), 64)),
+        (C(), $(X, null, N(2, (b) => m("line", {
+          key: "v" + b,
+          x1: r.value.x + r.value.width * (b / 3),
+          y1: r.value.y,
+          x2: r.value.x + r.value.width * (b / 3),
+          y2: r.value.y + r.value.height
+        }, null, 8, Qt)), 64))
+      ])) : Z("", !0),
+      m("rect", {
+        x: r.value.x + ae,
+        y: r.value.y + ae,
+        width: Math.max(0, r.value.width - ae * 2),
+        height: Math.max(0, r.value.height - ae * 2),
+        class: "vie-crop-move",
+        "data-handle": "move"
+      }, null, 8, en),
+      (C(!0), $(X, null, N(i.value, (b) => (C(), $("rect", {
+        key: b.id,
+        x: b.x,
+        y: b.y,
+        width: ae,
+        height: ae,
+        class: U(["vie-crop-handle", `vie-crop-handle--${b.id}`]),
+        "data-handle": b.id,
+        rx: "2"
+      }, null, 10, tn))), 128)),
+      (C(!0), $(X, null, N(h.value, (b) => (C(), $("rect", {
+        key: b.id,
+        x: b.x,
+        y: b.y,
+        width: b.w,
+        height: b.h,
+        class: U(["vie-crop-handle", `vie-crop-handle--${b.id}`]),
+        "data-handle": b.id,
+        rx: "2"
+      }, null, 10, nn))), 128)),
+      M.value ? (C(), $("foreignObject", {
+        key: 1,
+        x: r.value.x + (r.value.width - 100) / 2,
+        y: r.value.y + r.value.height - 14,
+        width: "100",
+        height: "36",
+        style: { "pointer-events": "none", overflow: "visible" }
+      }, [
+        m("div", an, [
+          m("button", {
+            class: "vie-crop-confirm-pill",
+            onPointerdown: g[0] || (g[0] = le(() => {
+            }, ["stop"])),
+            onClick: le(k, ["stop"])
+          }, [
+            g[1] || (g[1] = m("svg", {
+              viewBox: "0 0 24 24",
+              width: "14",
+              height: "14",
+              fill: "none",
+              stroke: "currentColor",
+              "stroke-width": "3",
+              "stroke-linecap": "round",
+              "stroke-linejoin": "round"
+            }, [
+              m("polyline", { points: "20 6 9 17 4 12" })
+            ], -1)),
+            m("span", null, q(S(o)("cropApply")), 1)
+          ], 32)
+        ])
+      ], 8, on)) : Z("", !0)
+    ], 42, Xt));
+  }
+}), cn = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M6 2v4" />
+  <path d="M6 6h12a2 2 0 0 1 2 2v8" />
+  <path d="M18 22v-4" />
+  <path d="M18 18H6a2 2 0 0 1-2-2V8" />
+</svg>`;
+function un() {
+  return {
+    id: "crop",
+    icon: cn,
+    labelKey: "crop",
+    controls: qt,
+    overlay: ln
+  };
+}
+const dn = [
+  { key: "brightness", labelKey: "brightness", min: -0.25, max: 0.25, base: 0, step: 0.01 },
+  { key: "contrast", labelKey: "contrast", min: -0.25, max: 0.25, base: 0, step: 0.01 },
+  { key: "saturation", labelKey: "saturation", min: -0.25, max: 0.25, base: 0, step: 0.01 },
+  { key: "exposure", labelKey: "exposure", min: -0.25, max: 0.25, base: 0, step: 0.01 },
+  { key: "temperature", labelKey: "temperature", min: -0.25, max: 0.25, base: 0, step: 0.01 },
+  { key: "gamma", labelKey: "gamma", min: 0.2, max: 5, base: 1, step: 0.05 },
+  { key: "clarity", labelKey: "clarity", min: -0.25, max: 0.25, base: 0, step: 0.01 },
+  { key: "vignette", labelKey: "vignette", min: -1, max: 1, base: 0, step: 0.05 }
+], hn = { class: "vie-finetune-controls" }, vn = /* @__PURE__ */ Y({
+  __name: "FinetuneControls",
+  setup(a) {
+    const e = G(), n = Q(ee, (o) => o);
+    function t(o, d) {
+      e.updateState((u) => {
+        u.finetune[o] = d;
+      });
+    }
+    return (o, d) => (C(), $("div", hn, [
+      (C(!0), $(X, null, N(S(dn), (u) => (C(), re(ve, {
+        key: u.key,
+        modelValue: S(e).state.finetune[u.key],
+        min: u.min,
+        max: u.max,
+        step: u.step,
+        base: u.base,
+        label: S(n)(u.labelKey),
+        format: u.key === "gamma" ? "number" : "percent",
+        "onUpdate:modelValue": (r) => t(u.key, r)
+      }, null, 8, ["modelValue", "min", "max", "step", "base", "label", "format", "onUpdate:modelValue"]))), 128))
+    ]));
+  }
+}), pn = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <line x1="4" y1="21" x2="4" y2="14" />
+  <line x1="4" y1="10" x2="4" y2="3" />
+  <line x1="12" y1="21" x2="12" y2="12" />
+  <line x1="12" y1="8" x2="12" y2="3" />
+  <line x1="20" y1="21" x2="20" y2="16" />
+  <line x1="20" y1="12" x2="20" y2="3" />
+  <line x1="1" y1="14" x2="7" y2="14" />
+  <line x1="9" y1="8" x2="15" y2="8" />
+  <line x1="17" y1="16" x2="23" y2="16" />
+</svg>`;
+function fn() {
+  return {
+    id: "finetune",
+    icon: pn,
+    labelKey: "finetune",
+    controls: vn
+  };
+}
+const pe = [
+  {
+    id: "chrome",
+    labelKey: "chrome",
+    matrix: [
+      1.2,
+      0.1,
+      0.1,
+      0,
+      -0.05,
+      0.05,
+      1.1,
+      0.05,
+      0,
+      -0.02,
+      0.05,
+      0.1,
+      1.2,
+      0,
+      -0.05,
+      0,
+      0,
+      0,
+      1,
+      0
+    ]
+  },
+  {
+    id: "fade",
+    labelKey: "fade",
+    matrix: [
+      1,
+      0.02,
+      0.04,
+      0,
+      0.06,
+      0.02,
+      0.96,
+      0.04,
+      0,
+      0.06,
+      0.04,
+      0.04,
+      0.92,
+      0,
+      0.08,
+      0,
+      0,
+      0,
+      1,
+      0
+    ]
+  },
+  {
+    id: "pastel",
+    labelKey: "pastel",
+    matrix: [
+      0.9,
+      0.1,
+      0.05,
+      0,
+      0.08,
+      0.05,
+      0.9,
+      0.1,
+      0,
+      0.08,
+      0.1,
+      0.05,
+      0.85,
+      0,
+      0.1,
+      0,
+      0,
+      0,
+      1,
+      0
+    ]
+  },
+  {
+    id: "cold",
+    labelKey: "cold",
+    matrix: [
+      0.9,
+      0,
+      0.1,
+      0,
+      -0.02,
+      0,
+      0.95,
+      0.1,
+      0,
+      0,
+      0,
+      0.1,
+      1.1,
+      0,
+      0.03,
+      0,
+      0,
+      0,
+      1,
+      0
+    ]
+  },
+  {
+    id: "warm",
+    labelKey: "warm",
+    matrix: [
+      1.1,
+      0.1,
+      0,
+      0,
+      0.03,
+      0,
+      1,
+      0.05,
+      0,
+      0.01,
+      0,
+      0,
+      0.9,
+      0,
+      -0.02,
+      0,
+      0,
+      0,
+      1,
+      0
+    ]
+  },
+  {
+    id: "monoDefault",
+    labelKey: "mono",
+    matrix: [
+      0.2126,
+      0.7152,
+      0.0722,
+      0,
+      0,
+      0.2126,
+      0.7152,
+      0.0722,
+      0,
+      0,
+      0.2126,
+      0.7152,
+      0.0722,
+      0,
+      0,
+      0,
+      0,
+      0,
+      1,
+      0
+    ]
+  },
+  {
+    id: "monoNoir",
+    labelKey: "noir",
+    matrix: [
+      0.3,
+      0.8,
+      0.1,
+      0,
+      -0.08,
+      0.3,
+      0.8,
+      0.1,
+      0,
+      -0.08,
+      0.3,
+      0.8,
+      0.1,
+      0,
+      -0.08,
+      0,
+      0,
+      0,
+      1,
+      0
+    ]
+  },
+  {
+    id: "monoWash",
+    labelKey: "wash",
+    matrix: [
+      0.2126,
+      0.7152,
+      0.0722,
+      0,
+      0.06,
+      0.2126,
+      0.7152,
+      0.0722,
+      0,
+      0.06,
+      0.2126,
+      0.7152,
+      0.0722,
+      0,
+      0.06,
+      0,
+      0,
+      0,
+      1,
+      0
+    ]
+  },
+  {
+    id: "monoStark",
+    labelKey: "stark",
+    matrix: [
+      0.35,
+      1,
+      0.15,
+      0,
+      -0.15,
+      0.35,
+      1,
+      0.15,
+      0,
+      -0.15,
+      0.35,
+      1,
+      0.15,
+      0,
+      -0.15,
+      0,
+      0,
+      0,
+      1,
+      0
+    ]
+  },
+  {
+    id: "sepiaDefault",
+    labelKey: "sepia",
+    matrix: [
+      0.393,
+      0.769,
+      0.189,
+      0,
+      0,
+      0.349,
+      0.686,
+      0.168,
+      0,
+      0,
+      0.272,
+      0.534,
+      0.131,
+      0,
+      0,
+      0,
+      0,
+      0,
+      1,
+      0
+    ]
+  },
+  {
+    id: "sepiaRust",
+    labelKey: "rust",
+    matrix: [
+      0.45,
+      0.75,
+      0.15,
+      0,
+      0.04,
+      0.3,
+      0.6,
+      0.15,
+      0,
+      -0.01,
+      0.2,
+      0.4,
+      0.15,
+      0,
+      -0.04,
+      0,
+      0,
+      0,
+      1,
+      0
+    ]
+  },
+  {
+    id: "sepiaBlues",
+    labelKey: "blues",
+    matrix: [
+      0.2126,
+      0.7152,
+      0.0722,
+      0,
+      -0.04,
+      0.2126,
+      0.7152,
+      0.0722,
+      0,
+      0,
+      0.2126,
+      0.7152,
+      0.0722,
+      0,
+      0.08,
+      0,
+      0,
+      0,
+      1,
+      0
+    ]
+  },
+  {
+    id: "sepiaColor",
+    labelKey: "color",
+    matrix: [
+      0.4,
+      0.6,
+      0.1,
+      0,
+      0.02,
+      0.25,
+      0.7,
+      0.15,
+      0,
+      0.01,
+      0.2,
+      0.5,
+      0.4,
+      0,
+      0.01,
+      0,
+      0,
+      0,
+      1,
+      0
+    ]
+  }
+], mn = { class: "vie-filter-controls" }, gn = { class: "vie-filter-strip" }, yn = { class: "vie-filter-thumb__label" }, wn = ["onClick"], kn = { class: "vie-filter-thumb__label" }, bn = /* @__PURE__ */ Y({
+  __name: "FilterControls",
+  setup(a) {
+    const e = G(), n = Q(ee, (p) => p), t = F(null), o = /* @__PURE__ */ new Map(), d = /* @__PURE__ */ new Set();
+    let u = null;
+    function r(p, w) {
+      w && (o.set(p, w), u == null || u.observe(w));
+    }
+    function i(p) {
+      e.updateState((w) => {
+        p ? (w.filter.id = p.id, w.filter.matrix = [...p.matrix]) : (w.filter.id = null, w.filter.matrix = void 0);
+      });
+    }
+    function h(p) {
+      e.updateState((w) => {
+        w.filter.intensity = p;
+      });
+    }
+    function s(p, w) {
+      const M = e.sourceImage.value;
+      if (!M) return;
+      const k = 96, v = p.getContext("2d");
+      v.drawImage(M, 0, 0, k, k);
+      const f = v.getImageData(0, 0, k, k);
+      Ce(f, w.matrix), v.putImageData(f, 0, 0), d.add(w.id);
+    }
+    function l() {
+      const p = e.sourceImage.value;
+      if (!p || !t.value) return;
+      t.value.getContext("2d").drawImage(p, 0, 0, 96, 96);
+    }
+    function y() {
+      u = new IntersectionObserver((p) => {
+        for (const w of p) {
+          if (!w.isIntersecting) continue;
+          const M = w.target, k = pe.find((v) => o.get(v.id) === M);
+          k && !d.has(k.id) && s(M, k);
+        }
+      }, { threshold: 0.1 });
+      for (const p of o.values())
+        u.observe(p);
+    }
+    function c() {
+      d.clear(), l();
+      for (const p of pe) {
+        const w = o.get(p.id);
+        w && (u == null || u.unobserve(w));
+      }
+      for (const p of o.values())
+        u == null || u.observe(p);
+    }
+    return ne(() => e.sourceImage.value, () => {
+      setTimeout(c, 50);
+    }), ce(() => {
+      y(), setTimeout(() => {
+        l();
+      }, 50);
+    }), Ze(() => {
+      u == null || u.disconnect(), u = null;
+    }), (p, w) => (C(), $("div", mn, [
+      m("div", gn, [
+        m("button", {
+          class: U(["vie-filter-thumb", { "vie-filter-thumb--active": !S(e).state.filter.id }]),
+          onClick: w[0] || (w[0] = (M) => i(null))
+        }, [
+          m("canvas", {
+            ref_key: "originalThumbRef",
+            ref: t,
+            width: "96",
+            height: "96",
+            class: "vie-filter-thumb__canvas"
+          }, null, 512),
+          m("span", yn, q(S(n)("original")), 1)
+        ], 2),
+        (C(!0), $(X, null, N(S(pe), (M) => (C(), $("button", {
+          key: M.id,
+          class: U(["vie-filter-thumb", { "vie-filter-thumb--active": S(e).state.filter.id === M.id }]),
+          onClick: (k) => i(M)
+        }, [
+          m("canvas", {
+            ref_for: !0,
+            ref: (k) => r(M.id, k),
+            width: "96",
+            height: "96",
+            class: "vie-filter-thumb__canvas"
+          }, null, 512),
+          m("span", kn, q(S(n)(M.labelKey) || M.labelKey), 1)
+        ], 10, wn))), 128))
+      ]),
+      S(e).state.filter.id ? (C(), re(ve, {
+        key: 0,
+        modelValue: S(e).state.filter.intensity,
+        min: 0,
+        max: 1,
+        step: 0.01,
+        base: 1,
+        label: S(n)("intensity"),
+        format: "percent",
+        "onUpdate:modelValue": h
+      }, null, 8, ["modelValue", "label"])) : Z("", !0)
+    ]));
+  }
+}), _n = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M12 20a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z" />
+  <path d="M12 20a8 8 0 1 0 0-16" fill="currentColor" opacity="0.3" />
+  <path d="M12 4v16" />
+</svg>`;
+function xn() {
+  return {
+    id: "filter",
+    icon: _n,
+    labelKey: "filter",
+    controls: bn
+  };
+}
+const fe = [
+  {
+    id: "emoji",
+    labelKey: "emoji",
+    stickers: [
+      "😀",
+      "😂",
+      "❤️",
+      "🎉",
+      "👍",
+      "⭐",
+      "🔥",
+      "💯",
+      "🎨",
+      "📸",
+      "🎵",
+      "🌟",
+      "✅",
+      "❌",
+      "⚡",
+      "🎯",
+      "💡",
+      "🏆",
+      "🎲",
+      "🎪",
+      "🌈",
+      "🦋",
+      "🍀",
+      "💎"
+    ]
+  },
+  {
+    id: "shapes",
+    labelKey: "shapes",
+    stickers: [
+      "⬛",
+      "⬜",
+      "🔴",
+      "🔵",
+      "🟢",
+      "🟡",
+      "🟠",
+      "🟣",
+      "▶️",
+      "◀️",
+      "🔺",
+      "🔻",
+      "💠",
+      "🔶",
+      "🔷",
+      "♦️"
+    ]
+  }
+], Pe = /* @__PURE__ */ new WeakMap();
+function je(a) {
+  let e = Pe.get(a);
+  return e || (e = F(null), Pe.set(a, e)), e;
+}
+const Cn = { class: "vie-sticker-controls" }, Mn = { class: "vie-sticker-tabs" }, Sn = ["onClick"], $n = { class: "vie-sticker-grid" }, Rn = ["onClick"], In = /* @__PURE__ */ Y({
+  __name: "StickerControls",
+  setup(a) {
+    var i;
+    const e = G(), n = Q(ee, (h) => h), t = je(e.state), o = F(((i = fe[0]) == null ? void 0 : i.id) || "emoji"), d = V(() => {
+      const h = fe.find((s) => s.id === o.value);
+      return (h == null ? void 0 : h.stickers) || [];
+    });
+    function u(h) {
+      const s = `sticker-${Date.now()}-${Math.random().toString(36).slice(2, 6)}`, l = e.state.stickers.length % 5 * 0.03;
+      e.updateState((y) => {
+        y.stickers.push({
+          id: s,
+          src: h,
+          x: 0.35 + l,
+          y: 0.35 + l,
+          width: 0.15,
+          height: 0.15,
+          rotation: 0,
+          flipX: !1,
+          flipY: !1,
+          opacity: 1
+        });
+      }), t.value = s;
+    }
+    function r() {
+      if (!t.value) return;
+      const h = t.value;
+      e.updateState((s) => {
+        const l = s.stickers.findIndex((y) => y.id === h);
+        l >= 0 && s.stickers.splice(l, 1);
+      }), t.value = null;
+    }
+    return (h, s) => (C(), $("div", Cn, [
+      m("div", Mn, [
+        (C(!0), $(X, null, N(S(fe), (l) => (C(), $("button", {
+          key: l.id,
+          class: U(["vie-sticker-tab", { "vie-sticker-tab--active": o.value === l.id }]),
+          onClick: (y) => o.value = l.id
+        }, q(S(n)(l.labelKey) || l.labelKey), 11, Sn))), 128)),
+        S(t) ? (C(), $("button", {
+          key: 0,
+          class: "vie-sticker-tab vie-sticker-tab--delete",
+          onClick: r
+        }, q(S(n)("delete") || "Delete"), 1)) : Z("", !0)
+      ]),
+      m("div", $n, [
+        (C(!0), $(X, null, N(d.value, (l) => (C(), $("button", {
+          key: l,
+          class: "vie-sticker-item",
+          onClick: (y) => u(l)
+        }, q(l), 9, Rn))), 128))
+      ])
+    ]));
+  }
+}), zn = ["viewBox", "width", "height"], Pn = ["x", "y", "width", "height", "data-sticker-id"], En = ["x", "y", "width", "height"], Tn = ["x", "y", "data-handle"], Wn = ["x1", "y1", "x2", "y2"], Kn = ["cx", "cy"], me = 10, Ee = 20, Te = 6, Dn = /* @__PURE__ */ Y({
+  __name: "StickerOverlay",
+  props: {
+    canvasRect: {},
+    wrapperSize: {}
+  },
+  setup(a) {
+    const e = a, n = G(), t = F(null), o = je(n.state), d = V(() => {
+      const v = e.canvasRect;
+      return n.state.stickers.map((f) => ({
+        id: f.id,
+        x: v.x + f.x * v.width,
+        y: v.y + f.y * v.height,
+        w: f.width * v.width,
+        h: f.height * v.height
+      }));
+    }), u = V(() => o.value && d.value.find((v) => v.id === o.value) || null), r = V(() => {
+      if (!u.value) return [];
+      const v = u.value, g = me / 2;
+      return [
+        { id: "nw", x: v.x - g, y: v.y - g },
+        { id: "ne", x: v.x + v.w - g, y: v.y - g },
+        { id: "sw", x: v.x - g, y: v.y + v.h - g },
+        { id: "se", x: v.x + v.w - g, y: v.y + v.h - g }
+      ];
+    }), i = F(null), h = F(null), s = F({ x: 0, y: 0 }), l = F({ x: 0, y: 0, width: 0, height: 0, rotation: 0 });
+    function y(v) {
+      var I;
+      const f = v.target, g = f.getAttribute("data-handle");
+      if (g === "rotate" && o.value) {
+        v.preventDefault(), c(v, "rotate", g);
+        return;
+      }
+      if (g && ["nw", "ne", "sw", "se"].includes(g) && o.value) {
+        v.preventDefault(), c(v, "resize", g);
+        return;
+      }
+      const b = f.getAttribute("data-sticker-id");
+      if (b) {
+        v.preventDefault(), o.value = b, c(v, "move", null), (I = t.value) == null || I.focus();
+        return;
+      }
+      o.value = null;
+    }
+    function c(v, f, g) {
+      i.value = f, h.value = g, s.value = { x: v.clientX, y: v.clientY };
+      const b = n.state.stickers.find((I) => I.id === o.value);
+      b && (l.value = {
+        x: b.x,
+        y: b.y,
+        width: b.width,
+        height: b.height,
+        rotation: b.rotation
+      }), window.addEventListener("pointermove", p), window.addEventListener("pointerup", w);
+    }
+    function p(v) {
+      if (!i.value || !o.value) return;
+      const f = e.canvasRect;
+      if (f.width === 0 || f.height === 0) return;
+      const g = (v.clientX - s.value.x) / f.width, b = (v.clientY - s.value.y) / f.height, I = l.value, H = n.state.stickers.find((T) => T.id === o.value);
+      if (H) {
+        switch (i.value) {
+          case "move": {
+            H.x = k(I.x + g, 0, 1 - H.width), H.y = k(I.y + b, 0, 1 - H.height);
+            break;
+          }
+          case "resize": {
+            switch (h.value) {
+              case "se": {
+                H.width = k(I.width + g, 0.03, 1 - I.x), H.height = k(I.height + b, 0.03, 1 - I.y);
+                break;
+              }
+              case "ne": {
+                const K = k(I.width + g, 0.03, 1 - I.x), D = k(I.height - b, 0.03, I.y + I.height), W = I.y + I.height - D;
+                H.width = K, H.height = D, H.y = W;
+                break;
+              }
+              case "sw": {
+                const K = k(I.width - g, 0.03, I.x + I.width), D = k(I.height + b, 0.03, 1 - I.y), W = I.x + I.width - K;
+                H.width = K, H.height = D, H.x = W;
+                break;
+              }
+              case "nw": {
+                const K = k(I.width - g, 0.03, I.x + I.width), D = k(I.height - b, 0.03, I.y + I.height), W = I.x + I.width - K, P = I.y + I.height - D;
+                H.width = K, H.height = D, H.x = W, H.y = P;
+                break;
+              }
+            }
+            break;
+          }
+          case "rotate": {
+            const T = f.x + H.x * f.width + H.width * f.width / 2, K = f.y + H.y * f.height + H.height * f.height / 2, D = Math.atan2(v.clientX - T, -(v.clientY - K));
+            H.rotation = D;
+            break;
+          }
+        }
+        n.requestRender();
+      }
+    }
+    function w() {
+      i.value && n.updateState(() => {
+      }), i.value = null, h.value = null, window.removeEventListener("pointermove", p), window.removeEventListener("pointerup", w);
+    }
+    function M(v) {
+      if ((v.key === "Delete" || v.key === "Backspace") && o.value) {
+        v.preventDefault();
+        const f = o.value;
+        n.updateState((g) => {
+          const b = g.stickers.findIndex((I) => I.id === f);
+          b >= 0 && g.stickers.splice(b, 1);
+        }), o.value = null;
+      }
+    }
+    function k(v, f, g) {
+      return Math.max(f, Math.min(g, v));
+    }
+    return (v, f) => (C(), $("svg", {
+      ref_key: "svgRef",
+      ref: t,
+      class: "vie-sticker-overlay",
+      viewBox: `0 0 ${a.wrapperSize.width} ${a.wrapperSize.height}`,
+      width: a.wrapperSize.width,
+      height: a.wrapperSize.height,
+      onPointerdown: y,
+      onKeydown: M,
+      tabindex: "0"
+    }, [
+      (C(!0), $(X, null, N(d.value, (g) => (C(), $("rect", {
+        key: g.id,
+        x: g.x,
+        y: g.y,
+        width: g.w,
+        height: g.h,
+        fill: "transparent",
+        class: "vie-sticker-hitarea",
+        "data-sticker-id": g.id
+      }, null, 8, Pn))), 128)),
+      u.value ? (C(), $(X, { key: 0 }, [
+        m("rect", {
+          x: u.value.x,
+          y: u.value.y,
+          width: u.value.w,
+          height: u.value.h,
+          class: "vie-sticker-selection"
+        }, null, 8, En),
+        (C(!0), $(X, null, N(r.value, (g) => (C(), $("rect", {
+          key: g.id,
+          x: g.x,
+          y: g.y,
+          width: me,
+          height: me,
+          class: "vie-sticker-handle",
+          "data-handle": g.id
+        }, null, 8, Tn))), 128)),
+        m("line", {
+          x1: u.value.x + u.value.w / 2,
+          y1: u.value.y - Ee,
+          x2: u.value.x + u.value.w / 2,
+          y2: u.value.y,
+          class: "vie-sticker-rotate-line"
+        }, null, 8, Wn),
+        m("circle", {
+          cx: u.value.x + u.value.w / 2,
+          cy: u.value.y - Ee - Te,
+          r: Te,
+          class: "vie-sticker-rotate-handle",
+          "data-handle": "rotate"
+        }, null, 8, Kn)
+      ], 64)) : Z("", !0)
+    ], 40, zn));
+  }
+}), An = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <circle cx="12" cy="12" r="10" />
+  <path d="M8 14s1.5 2 4 2 4-2 4-2" />
+  <line x1="9" y1="9" x2="9.01" y2="9" />
+  <line x1="15" y1="9" x2="15.01" y2="9" />
+</svg>`;
+function Ln() {
+  return {
+    id: "sticker",
+    icon: An,
+    labelKey: "sticker",
+    controls: In,
+    overlay: Dn
+  };
+}
+const Fn = [
+  { id: "solidSharp", labelKey: "solidSharp" },
+  { id: "solidRound", labelKey: "solidRound" },
+  { id: "lineSingle", labelKey: "lineSingle" },
+  { id: "lineMultiple", labelKey: "lineMultiple" },
+  { id: "hook", labelKey: "hook" },
+  { id: "polaroid", labelKey: "polaroid" },
+  { id: "edgeSeparate", labelKey: "edgeSeparate" },
+  { id: "edgeCross", labelKey: "edgeCross" },
+  { id: "edgeOverlap", labelKey: "edgeOverlap" }
+], Hn = [
+  [1, 1, 1, 1],
+  // White
+  [0, 0, 0, 1],
+  // Black
+  [0.85, 0.75, 0.6, 1],
+  // Cream
+  [0.6, 0.4, 0.2, 1],
+  // Brown
+  [0.2, 0.4, 0.6, 1],
+  // Navy
+  [0.8, 0.2, 0.2, 1]
+  // Red
+], Vn = { class: "vie-frame-controls" }, jn = { class: "vie-frame-strip" }, On = { class: "vie-frame-style__label" }, Bn = ["onClick"], qn = { class: "vie-frame-style__label" }, Xn = { class: "vie-frame-colors" }, Yn = { class: "vie-frame-colors__label" }, Un = { class: "vie-frame-colors__swatches" }, Nn = ["onClick"], Zn = /* @__PURE__ */ Y({
+  __name: "FrameControls",
+  setup(a) {
+    const e = G(), n = Q(ee, (i) => i);
+    function t(i) {
+      e.updateState((h) => {
+        h.frame.style = i;
+      });
+    }
+    function o(i) {
+      e.updateState((h) => {
+        h.frame.size = i;
+      });
+    }
+    function d(i) {
+      e.updateState((h) => {
+        h.frame.color = [...i];
+      });
+    }
+    function u(i) {
+      const h = e.state.frame.color;
+      return h[0] === i[0] && h[1] === i[1] && h[2] === i[2] && h[3] === i[3];
+    }
+    function r(i) {
+      return `rgba(${Math.round(i[0] * 255)}, ${Math.round(i[1] * 255)}, ${Math.round(i[2] * 255)}, ${i[3]})`;
+    }
+    return (i, h) => (C(), $("div", Vn, [
+      m("div", jn, [
+        m("button", {
+          class: U(["vie-frame-style", { "vie-frame-style--active": !S(e).state.frame.style }]),
+          onClick: h[0] || (h[0] = (s) => t(null))
+        }, [
+          m("span", On, q(S(n)("none")), 1)
+        ], 2),
+        (C(!0), $(X, null, N(S(Fn), (s) => (C(), $("button", {
+          key: s.id,
+          class: U(["vie-frame-style", { "vie-frame-style--active": S(e).state.frame.style === s.id }]),
+          onClick: (l) => t(s.id)
+        }, [
+          m("span", qn, q(S(n)(s.labelKey)), 1)
+        ], 10, Bn))), 128))
+      ]),
+      S(e).state.frame.style ? (C(), $(X, { key: 0 }, [
+        O(ve, {
+          modelValue: S(e).state.frame.size,
+          min: 5e-3,
+          max: 0.15,
+          step: 5e-3,
+          base: 0.025,
+          label: S(n)("frameSize"),
+          format: "percent",
+          "onUpdate:modelValue": o
+        }, null, 8, ["modelValue", "label"]),
+        m("div", Xn, [
+          m("span", Yn, q(S(n)("frameColor")), 1),
+          m("div", Un, [
+            (C(!0), $(X, null, N(S(Hn), (s, l) => (C(), $("button", {
+              key: l,
+              class: U(["vie-frame-color-swatch", { "vie-frame-color-swatch--active": u(s) }]),
+              style: se({ backgroundColor: r(s) }),
+              onClick: (y) => d(s)
+            }, null, 14, Nn))), 128))
+          ])
+        ])
+      ], 64)) : Z("", !0)
+    ]));
+  }
+}), Jn = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
+  <rect x="7" y="7" width="10" height="10" />
+</svg>`;
+function Gn() {
+  return {
+    id: "frame",
+    icon: Jn,
+    labelKey: "frame",
+    controls: Zn
+  };
+}
+const Qn = { class: "vie-fill-controls" }, ei = { class: "vie-fill-strip" }, ti = ["title", "onClick"], ni = /* @__PURE__ */ Y({
+  __name: "FillControls",
+  setup(a) {
+    const e = G(), n = Q(ee, (r) => r), t = [
+      [0, 0, 0, 0],
+      // Transparent
+      [1, 1, 1, 1],
+      // White
+      [0.8, 0.8, 0.8, 1],
+      // Light gray
+      [0.2, 0.2, 0.2, 1],
+      // Dark gray
+      [0, 0, 0, 1],
+      // Black
+      [0.1, 0.14, 0.49, 1],
+      // Dark navy
+      [0.13, 0.59, 0.95, 1],
+      // Blue
+      [0, 0.74, 0.83, 1],
+      // Cyan
+      [0, 0.59, 0.53, 1],
+      // Teal
+      [0.3, 0.69, 0.31, 1],
+      // Green
+      [0.55, 0.76, 0.29, 1],
+      // Light green
+      [1, 0.92, 0.23, 1],
+      // Yellow
+      [1, 0.6, 0, 1],
+      // Orange
+      [1, 0.34, 0.13, 1],
+      // Deep orange
+      [0.96, 0.26, 0.21, 1],
+      // Red
+      [0.91, 0.12, 0.39, 1],
+      // Pink
+      [0.61, 0.15, 0.69, 1]
+      // Purple
+    ];
+    function o(r) {
+      e.updateState((i) => {
+        i.backgroundColor = [...r];
+      });
+    }
+    function d(r) {
+      const i = e.state.backgroundColor;
+      return i[0] === r[0] && i[1] === r[1] && i[2] === r[2] && i[3] === r[3];
+    }
+    function u(r) {
+      return `rgba(${Math.round(r[0] * 255)}, ${Math.round(r[1] * 255)}, ${Math.round(r[2] * 255)}, ${r[3]})`;
+    }
+    return (r, i) => (C(), $("div", Qn, [
+      m("div", ei, [
+        (C(), $(X, null, N(t, (h, s) => m("button", {
+          key: s,
+          class: U(["vie-fill-swatch", {
+            "vie-fill-swatch--active": d(h),
+            "vie-fill-swatch--transparent": h[3] === 0
+          }]),
+          style: se(h[3] > 0 ? { backgroundColor: u(h) } : void 0),
+          title: s === 0 ? S(n)("transparent") : void 0,
+          onClick: (l) => o(h)
+        }, null, 14, ti)), 64))
+      ])
+    ]));
+  }
+}), ii = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z" />
+</svg>`;
+function oi() {
+  return {
+    id: "fill",
+    icon: ii,
+    labelKey: "fill",
+    controls: ni
+  };
+}
+const ai = { class: "vie-resize-controls" }, si = { class: "vie-resize-dimensions" }, ri = { class: "vie-resize-input" }, li = { class: "vie-resize-input__label" }, ci = { class: "vie-resize-input__field-wrapper" }, ui = ["value"], di = ["title"], hi = {
+  viewBox: "0 0 24 24",
+  width: "16",
+  height: "16",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-width": "2"
+}, vi = {
+  key: 0,
+  d: "M7 11V7a5 5 0 0 1 10 0v4"
+}, pi = {
+  key: 1,
+  d: "M7 11V7a5 5 0 0 1 9.9-1"
+}, fi = { class: "vie-resize-input" }, mi = { class: "vie-resize-input__label" }, gi = { class: "vie-resize-input__field-wrapper" }, yi = ["value"], wi = /* @__PURE__ */ Y({
+  __name: "ResizeControls",
+  setup(a) {
+    const e = G(), n = Q(ee, (h) => h), t = F(!0), o = V(() => {
+      const h = e.sourceImage.value;
+      if (!h) return 1;
+      const s = e.state.crop;
+      return h.naturalWidth * s.width / (h.naturalHeight * s.height);
+    }), d = V(() => {
+      if (e.state.resize.width) return e.state.resize.width;
+      const h = e.sourceImage.value;
+      return h ? Math.round(h.naturalWidth * e.state.crop.width) : 0;
+    }), u = V(() => {
+      if (e.state.resize.height) return e.state.resize.height;
+      const h = e.sourceImage.value;
+      return h ? Math.round(h.naturalHeight * e.state.crop.height) : 0;
+    });
+    function r(h) {
+      const s = parseInt(h, 10);
+      !s || s < 1 || e.updateState((l) => {
+        l.resize.width = s, t.value && (l.resize.height = Math.round(s / o.value));
+      });
+    }
+    function i(h) {
+      const s = parseInt(h, 10);
+      !s || s < 1 || e.updateState((l) => {
+        l.resize.height = s, t.value && (l.resize.width = Math.round(s * o.value));
+      });
+    }
+    return (h, s) => (C(), $("div", ai, [
+      m("div", si, [
+        m("div", ri, [
+          m("label", li, q(S(n)("width")), 1),
+          m("div", ci, [
+            m("input", {
+              type: "number",
+              class: "vie-resize-input__field",
+              value: d.value,
+              min: "1",
+              onInput: s[0] || (s[0] = (l) => r(l.target.value))
+            }, null, 40, ui),
+            s[3] || (s[3] = m("span", { class: "vie-resize-input__unit" }, "px", -1))
+          ])
+        ]),
+        m("button", {
+          class: U(["vie-resize-lock", { "vie-resize-lock--active": t.value }]),
+          onClick: s[1] || (s[1] = (l) => t.value = !t.value),
+          title: S(n)("lockAspectRatio")
+        }, [
+          (C(), $("svg", hi, [
+            s[4] || (s[4] = m("rect", {
+              x: "3",
+              y: "11",
+              width: "18",
+              height: "11",
+              rx: "2",
+              ry: "2"
+            }, null, -1)),
+            t.value ? (C(), $("path", vi)) : (C(), $("path", pi))
+          ]))
+        ], 10, di),
+        m("div", fi, [
+          m("label", mi, q(S(n)("height")), 1),
+          m("div", gi, [
+            m("input", {
+              type: "number",
+              class: "vie-resize-input__field",
+              value: u.value,
+              min: "1",
+              onInput: s[2] || (s[2] = (l) => i(l.target.value))
+            }, null, 40, yi),
+            s[5] || (s[5] = m("span", { class: "vie-resize-input__unit" }, "px", -1))
+          ])
+        ])
+      ])
+    ]));
+  }
+}), ki = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <polyline points="15 3 21 3 21 9" />
+  <polyline points="9 21 3 21 3 15" />
+  <line x1="21" y1="3" x2="14" y2="10" />
+  <line x1="3" y1="21" x2="10" y2="14" />
+</svg>`;
+function bi() {
+  return {
+    id: "resize",
+    icon: ki,
+    labelKey: "resize",
+    controls: wi
+  };
+}
+const _i = ["dir"], xi = { class: "vie-main" }, Ci = /* @__PURE__ */ Y({
+  __name: "EditorShell",
+  props: {
+    options: {}
+  },
+  emits: ["process", "close"],
+  setup(a, { emit: e }) {
+    const n = a, t = e, o = nt(n.options);
+    it(o);
+    const d = { en: ut, ar: dt }, u = V(() => {
+      const w = n.options.locale || "en";
+      return (M) => {
+        var k;
+        return ((k = d[w]) == null ? void 0 : k[M]) || d.en[M] || M;
+      };
+    });
+    We(ee, (w) => u.value(w));
+    const r = {
+      crop: () => o.registerPlugin(un()),
+      finetune: () => o.registerPlugin(fn()),
+      filter: () => o.registerPlugin(xn()),
+      sticker: () => o.registerPlugin(Ln()),
+      frame: () => o.registerPlugin(Gn()),
+      fill: () => o.registerPlugin(oi()),
+      resize: () => o.registerPlugin(bi())
+    }, i = n.options.plugins || ["crop", "finetune", "filter", "sticker", "frame", "resize"];
+    for (const w of i)
+      r[w] && r[w]();
+    if (n.options.customPlugins)
+      for (const w of n.options.customPlugins)
+        o.registerPlugin(w);
+    const h = F(null), s = F(!1);
+    let l = null;
+    ce(() => {
+      h.value && (l = new ResizeObserver((w) => {
+        for (const M of w) {
+          const { width: k, height: v } = M.contentRect;
+          s.value = k > v && k > 700;
+        }
+      }), l.observe(h.value), h.value.focus());
+    }), ue(() => {
+      l == null || l.disconnect();
+    });
+    function y(w) {
+      w.ctrlKey || w.metaKey ? w.key === "z" && !w.shiftKey ? (w.preventDefault(), o.undo()) : (w.key === "z" && w.shiftKey || w.key === "y") && (w.preventDefault(), o.redo()) : w.key === "Escape" && t("close");
+    }
+    const c = F(!1);
+    async function p() {
+      if (!(!o.sourceImage.value || c.value)) {
+        c.value = !0;
+        try {
+          const M = await new st().process(
+            o.sourceImage.value,
+            o.state,
+            {
+              mimeType: n.options.outputMimeType || "image/jpeg",
+              quality: n.options.outputQuality ?? 0.92,
+              maxCanvasPixels: n.options.maxCanvasPixels
+            }
+          );
+          t("process", M);
+        } finally {
+          c.value = !1;
+        }
+      }
+    }
+    return (w, M) => (C(), $("div", {
+      ref_key: "shellRef",
+      ref: h,
+      class: U([
+        "vie-editor",
+        "vie-shell",
+        s.value ? "vie-shell--horizontal" : "",
+        a.options.theme === "dark" ? "vie-theme-dark" : ""
+      ]),
+      dir: a.options.dir || "ltr",
+      onKeydown: y,
+      tabindex: "0"
+    }, [
+      s.value ? (C(), $(X, { key: 0 }, [
+        O(Ie),
+        m("div", xi, [
+          O($e, {
+            onDone: p,
+            processing: c.value
+          }, null, 8, ["processing"]),
+          O(Re),
+          O(ze)
+        ])
+      ], 64)) : (C(), $(X, { key: 1 }, [
+        O($e, {
+          onDone: p,
+          processing: c.value
+        }, null, 8, ["processing"]),
+        O(Re),
+        O(ze),
+        O(Ie)
+      ], 64))
+    ], 42, _i));
+  }
+}), Mi = { class: "vie-modal-container" }, Si = /* @__PURE__ */ Y({
+  __name: "EditorModal",
+  props: {
+    src: {},
+    plugins: { default: () => ["crop", "finetune", "filter", "sticker", "frame", "resize"] },
+    locale: { default: "en" },
+    dir: { default: "ltr" },
+    theme: { default: "light" },
+    outputMimeType: {},
+    outputQuality: { default: 0.92 },
+    maxCanvasPixels: {},
+    initialState: {}
+  },
+  emits: ["process", "close"],
+  setup(a, { emit: e }) {
+    const n = a, t = e, o = F(null), d = V(() => ({
+      src: n.src,
+      plugins: n.plugins,
+      locale: n.locale,
+      dir: n.dir,
+      theme: n.theme,
+      outputMimeType: n.outputMimeType,
+      outputQuality: n.outputQuality,
+      maxCanvasPixels: n.maxCanvasPixels,
+      initialState: n.initialState
+    }));
+    function u() {
+      t("close");
+    }
+    function r() {
+      window.confirm("Close editor? Unsaved changes will be lost.") && u();
+    }
+    function i(s) {
+      const l = o.value;
+      if (!l) return;
+      const y = l.querySelectorAll(
+        'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
+      );
+      if (y.length === 0) return;
+      const c = y[0], p = y[y.length - 1];
+      s.shiftKey ? document.activeElement === c && (s.preventDefault(), p.focus()) : document.activeElement === p && (s.preventDefault(), c.focus());
+    }
+    let h = "";
+    return ce(async () => {
+      var s, l;
+      h = document.body.style.overflow, document.body.style.overflow = "hidden", await Je(), (l = (s = o.value) == null ? void 0 : s.querySelector('[tabindex="0"]')) == null || l.focus();
+    }), ue(() => {
+      document.body.style.overflow = h;
+    }), (s, l) => (C(), re(Ge, { to: "body" }, [
+      O(_e, { name: "vie-modal" }, {
+        default: J(() => [
+          m("div", {
+            class: "vie-modal-backdrop",
+            role: "dialog",
+            "aria-modal": "true",
+            onClick: le(r, ["self"]),
+            onKeydown: [
+              Se(u, ["esc"]),
+              Se(i, ["tab"])
+            ],
+            ref_key: "backdropRef",
+            ref: o
+          }, [
+            m("div", Mi, [
+              O(Ci, {
+                options: d.value,
+                onProcess: l[0] || (l[0] = (y) => s.$emit("process", y)),
+                onClose: u
+              }, null, 8, ["options"])
+            ])
+          ], 544)
+        ]),
+        _: 1
+      })
+    ]));
+  }
+});
+function Ii(a) {
+  return JSON.stringify(a);
+}
+function zi(a) {
+  const e = JSON.parse(a);
+  if (typeof e != "object" || e === null || Array.isArray(e))
+    throw new Error("Invalid state: expected an object");
+  if (Array.isArray(e.stickers)) {
+    for (const n of e.stickers)
+      if (typeof n.src == "string") {
+        const t = n.src.toLowerCase().trim();
+        (t.startsWith("javascript:") || t.startsWith("vbscript:")) && (n.src = "");
+      }
+  }
+  return e;
+}
+function Pi(a) {
+  const e = ge();
+  return {
+    ...e,
+    ...a,
+    crop: { ...e.crop, ...a.crop || {} },
+    finetune: { ...e.finetune, ...a.finetune || {} },
+    filter: { ...e.filter, ...a.filter || {} },
+    frame: { ...e.frame, ...a.frame || {} },
+    resize: { ...e.resize, ...a.resize || {} },
+    stickers: a.stickers || e.stickers,
+    backgroundColor: a.backgroundColor || e.backgroundColor
+  };
+}
+function $i(a) {
+  a.component("ImageEditorModal", Si);
+}
+const Ei = { install: $i };
+export {
+  _t as CanvasRenderer,
+  un as CropPlugin,
+  oi as FillPlugin,
+  xn as FilterPlugin,
+  fn as FinetunePlugin,
+  Gn as FramePlugin,
+  Qe as History,
+  xe as IDENTITY_MATRIX,
+  Si as ImageEditorModal,
+  Ci as ImageEditorShell,
+  st as ImageProcessor,
+  ee as LOCALE_KEY,
+  bi as ResizePlugin,
+  Ln as StickerPlugin,
+  ke as applyClarity,
+  Ce as applyColorMatrix,
+  ye as applyGamma,
+  we as applyVignette,
+  dt as ar,
+  Ae as brightnessMatrix,
+  De as composeMatrices,
+  Le as contrastMatrix,
+  ge as createDefaultImageState,
+  nt as createEditorEngine,
+  Ei as default,
+  fe as defaultStickerCategories,
+  zi as deserializeState,
+  ut as en,
+  He as exposureMatrix,
+  pe as filterPresets,
+  dn as finetuneEffects,
+  Fn as frameStyles,
+  $i as install,
+  et as loadImage,
+  Pi as mergeWithDefaults,
+  ot as multiplyMatrices,
+  Fe as saturationMatrix,
+  Ii as serializeState,
+  Ve as temperatureMatrix,
+  G as useEditor
+};
+//# sourceMappingURL=vuedit-image-editor.es.js.map