vuedit-image-editor 0.2.0 → 0.3.0

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

@@ -1,5 +1,5 @@
-import { reactive as je, ref as H, 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 M, createElementBlock as z, normalizeClass as U, renderSlot as Ue, createCommentVNode as Z, toDisplayString as q, createElementVNode as g, createVNode as j, unref as S, withCtx as J, onMounted as ue, watch as ne, onBeforeUnmount as re, withModifiers as ce, createBlock as le, 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() {
+import { reactive as rt, ref as H, shallowRef as ct, computed as j, readonly as ut, provide as Ze, inject as ie, toRaw as dt, markRaw as ht, defineComponent as J, openBlock as S, createElementBlock as z, normalizeClass as N, renderSlot as vt, createCommentVNode as G, toDisplayString as q, createElementVNode as y, createVNode as X, unref as I, withCtx as ne, onMounted as ge, watch as re, onBeforeUnmount as he, withModifiers as ve, createBlock as pe, resolveDynamicComponent as Pe, onUpdated as ft, Fragment as Y, renderList as Z, Transition as Te, normalizeStyle as le, onUnmounted as pt, withKeys as Me, nextTick as Se, Teleport as mt } from "vue";
+function $e() {
   return {
     crop: {
       x: 0,
@@ -26,6 +26,7 @@ function ge() {
       intensity: 1
     },
     stickers: [],
+    annotations: [],
     frame: {
       style: null,
       size: 0.025,
@@ -39,28 +40,28 @@ function ge() {
     backgroundColor: [0, 0, 0, 1]
   };
 }
-function de(s) {
-  return JSON.parse(JSON.stringify(s));
+function ye(o) {
+  return JSON.parse(JSON.stringify(o));
 }
-class Qe {
+class gt {
   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;
+    this.states = this.states.slice(0, this.pointer + 1), this.states.push(ye(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]));
+    return this.pointer <= 0 ? null : (this.pointer--, ye(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]));
+    return this.pointer >= this.states.length - 1 ? null : (this.pointer++, ye(this.states[this.pointer]));
   }
   /** Reset history with a single initial state. */
   reset(e) {
-    this.states = [de(e)], this.pointer = 0;
+    this.states = [ye(e)], this.pointer = 0;
   }
   get canUndo() {
     return this.pointer > 0;
@@ -75,122 +76,172 @@ class Qe {
     return this.states.length;
   }
 }
-async function et(s) {
-  const e = await tt(s);
+async function yt(o) {
+  const e = await wt(o);
   return new Promise((n, t) => {
-    const o = new Image();
-    o.crossOrigin = "anonymous", o.onload = () => {
-      typeof s != "string" && URL.revokeObjectURL(e), n(o);
-    }, o.onerror = () => {
-      typeof s != "string" && URL.revokeObjectURL(e), t(new Error(`Failed to load image: ${typeof s == "string" ? s : "Blob/File"}`));
-    }, o.src = e;
+    const a = new Image();
+    a.crossOrigin = "anonymous", a.onload = () => {
+      typeof o != "string" && URL.revokeObjectURL(e), n(a);
+    }, a.onerror = () => {
+      typeof o != "string" && URL.revokeObjectURL(e), t(new Error(`Failed to load image: ${typeof o == "string" ? o : "Blob/File"}`));
+    }, a.src = e;
   });
 }
-async function tt(s) {
-  return typeof s == "string" ? s : URL.createObjectURL(s);
+async function wt(o) {
+  return typeof o == "string" ? o : URL.createObjectURL(o);
 }
-const Ke = Symbol("vuedit-image-editor"), ee = Symbol("vuedit-locale");
-function he(s) {
-  return JSON.parse(JSON.stringify(Xe(s)));
+const Je = Symbol("vuedit-image-editor"), oe = Symbol("vuedit-locale");
+function we(o) {
+  return JSON.parse(JSON.stringify(dt(o)));
 }
-function nt(s) {
-  const e = je(
-    s.initialState ? { ...ge(), ...JSON.parse(JSON.stringify(s.initialState)) } : ge()
-  ), n = he(e), t = new Qe(50);
-  t.reset(he(e));
-  const o = H(null), d = H(!1), u = H(null);
-  let r = 0;
-  const i = Be([]), h = H(null), a = H(1), c = H(null), y = H({ x: 0, y: 0 }), v = H(0), w = V(() => h.value && i.value.find((P) => P.id === h.value) || null), b = V(() => (v.value, t.canUndo)), $ = V(() => (v.value, t.canRedo)), m = V(() => (v.value, t.currentIndex > 0));
-  async function l(P) {
-    const O = ++r;
-    d.value = !0, u.value = null;
+function kt(o) {
+  const e = rt(
+    o.initialState ? { ...$e(), ...JSON.parse(JSON.stringify(o.initialState)) } : $e()
+  ), n = we(e), t = new gt(50);
+  t.reset(we(e));
+  const a = H(null), h = H(!1), r = H(null);
+  let s = 0;
+  const i = ct([]), v = H(null), l = H(1), c = H(null), m = H({ x: 0, y: 0 }), d = H(0), x = j(() => v.value && i.value.find((E) => E.id === v.value) || null), _ = j(() => (d.value, t.canUndo)), $ = j(() => (d.value, t.canRedo)), w = j(() => (d.value, t.currentIndex > 0));
+  async function u(E) {
+    const O = ++s;
+    h.value = !0, r.value = null;
     try {
-      const _ = await et(P);
-      if (O !== r) return;
-      o.value = _, W();
-    } catch (_) {
-      if (O !== r) return;
-      u.value = _ instanceof Error ? _.message : "Failed to load image";
+      const M = await yt(E);
+      if (O !== s) return;
+      a.value = M, L();
+    } catch (M) {
+      if (O !== s) return;
+      r.value = M instanceof Error ? M.message : "Failed to load image";
     } finally {
-      O === r && (d.value = !1);
+      O === s && (h.value = !1);
     }
   }
-  function p(P) {
-    if (!P.id || !P.controls) {
-      console.warn("[VueditImageEditor] Plugin missing required fields (id, controls):", P);
+  function g(E) {
+    if (!E.id || !E.controls) {
+      console.warn("[VueditImageEditor] Plugin missing required fields (id, controls):", E);
       return;
     }
-    i.value.some((O) => O.id === P.id) || (i.value = [...i.value, Ye(P)], h.value || (h.value = P.id));
+    i.value.some((O) => O.id === E.id) || (i.value = [...i.value, ht(E)], v.value || (v.value = E.id));
   }
-  function f(P) {
+  function k(E) {
     var O;
-    i.value = i.value.filter((_) => _.id !== P), h.value === P && (h.value = ((O = i.value[0]) == null ? void 0 : O.id) || null);
+    i.value = i.value.filter((M) => M.id !== E), v.value === E && (v.value = ((O = i.value[0]) == null ? void 0 : O.id) || null);
   }
-  function k(P) {
-    const O = w.value;
-    O != null && O.onDeactivate && O.onDeactivate(), h.value = P;
-    const _ = i.value.find((A) => A.id === P);
-    _ != null && _.onActivate && _.onActivate(), W();
+  function C(E) {
+    const O = x.value;
+    O != null && O.onDeactivate && O.onDeactivate(), v.value = E;
+    const M = i.value.find((F) => F.id === E);
+    M != null && M.onActivate && M.onActivate(), L();
   }
-  function x(P) {
-    P(e), t.push(he(e)), v.value++, W();
+  function P(E) {
+    E(e), t.push(we(e)), d.value++, L();
   }
-  function D() {
-    const P = t.undo();
-    P && (Object.assign(e, P), v.value++, W());
+  function V() {
+    const E = t.undo();
+    E && (Object.assign(e, E), d.value++, L());
   }
-  function T() {
-    const P = t.redo();
-    P && (Object.assign(e, P), v.value++, W());
+  function A() {
+    const E = t.redo();
+    E && (Object.assign(e, E), d.value++, L());
   }
-  function K() {
-    const P = w.value;
-    P != null && P.onDeactivate && P.onDeactivate(), Object.assign(e, JSON.parse(JSON.stringify(n))), t.reset(he(e)), v.value++, P != null && P.onActivate && P.onActivate(), W();
+  function D() {
+    const E = x.value;
+    E != null && E.onDeactivate && E.onDeactivate(), Object.assign(e, JSON.parse(JSON.stringify(n))), t.reset(we(e)), d.value++, E != null && E.onActivate && E.onActivate(), L();
   }
-  function L(P) {
-    a.value = Math.max(0.1, Math.min(10, P)), W();
+  function K(E) {
+    l.value = Math.max(0.1, Math.min(10, E)), L();
   }
-  function W() {
-    c.value && c.value();
+  function L(E = !1) {
+    c.value && c.value(E);
   }
   return {
     state: e,
-    readonlyState: qe(e),
-    sourceImage: o,
-    loading: d,
-    error: u,
+    readonlyState: ut(e),
+    sourceImage: a,
+    loading: h,
+    error: r,
     plugins: i,
-    activePluginId: h,
-    activePlugin: w,
-    hasEdits: m,
-    canUndo: b,
+    activePluginId: v,
+    activePlugin: x,
+    hasEdits: w,
+    canUndo: _,
     canRedo: $,
-    zoom: a,
-    options: s,
-    load: l,
-    registerPlugin: p,
-    unregisterPlugin: f,
-    setActivePlugin: k,
-    updateState: x,
-    undo: D,
-    redo: T,
-    revert: K,
-    setZoom: L,
-    requestRender: W,
+    zoom: l,
+    options: o,
+    load: u,
+    registerPlugin: g,
+    unregisterPlugin: k,
+    setActivePlugin: C,
+    updateState: P,
+    undo: V,
+    redo: A,
+    revert: D,
+    setZoom: K,
+    requestRender: L,
     onRender: c,
-    cropDragPan: y
+    cropDragPan: m
   };
 }
-function it(s) {
-  We(Ke, s);
+function bt(o) {
+  Ze(Je, o);
 }
-function G() {
-  const s = Q(Ke);
-  if (!s)
+function ee() {
+  const o = ie(Je);
+  if (!o)
     throw new Error("[VueditImageEditor] useEditor() called outside of editor context. Make sure to use it inside <EditorShell> or <ImageEditorModal>.");
-  return s;
+  return o;
 }
-const xe = [
+function De(o) {
+  return `rgba(${Math.round(o[0] * 255)}, ${Math.round(o[1] * 255)}, ${Math.round(o[2] * 255)}, ${o[3]})`;
+}
+function Ee(o, e, n, t, a, h) {
+  const r = n + e.x * a, s = t + e.y * h, i = e.width * a, v = e.height * h, l = e.strokeWidth * Math.max(a, h);
+  if (o.save(), o.globalAlpha = e.opacity, e.rotation !== 0) {
+    const w = r + i / 2, u = s + v / 2;
+    o.translate(w, u), o.rotate(e.rotation), o.translate(-w, -u);
+  }
+  const c = e.fontSize * h, m = e.fontStyle === "italic" ? "italic " : "", d = e.fontWeight === "bold" ? "bold " : "";
+  o.font = `${m}${d}${c}px ${e.fontFamily}`, o.fillStyle = De(e.fillColor), o.textAlign = e.textAlign, o.textBaseline = "top", o.save(), o.beginPath(), o.rect(r, s, i, v), o.clip();
+  let x = r;
+  e.textAlign === "center" ? x = r + i / 2 : e.textAlign === "right" && (x = r + i);
+  const _ = Ct(o, e.text, i), $ = c * 1.2;
+  for (let w = 0; w < _.length; w++)
+    o.fillText(_[w], x, s + w * $);
+  o.restore(), e.strokeColor[3] > 0 && l > 0.5 && (o.strokeStyle = De(e.strokeColor), o.lineWidth = l * 0.5, o.strokeRect(r, s, i, v)), o.restore();
+}
+function xt(o, e, n, t, a, h, r) {
+  if (n.width <= 0 || n.height <= 0) return;
+  const s = _t(e, n);
+  s && Ee(o, s, t, a, h, r);
+}
+function _t(o, e) {
+  const n = (o.x - e.x) / e.width, t = (o.y - e.y) / e.height, a = o.width / e.width, h = o.height / e.height;
+  return n + a < 0 || n > 1 || t + h < 0 || t > 1 ? null : {
+    ...o,
+    x: n,
+    y: t,
+    width: a,
+    height: h,
+    strokeWidth: o.strokeWidth / Math.max(e.width, e.height),
+    fontSize: o.fontSize / e.height
+  };
+}
+function Ct(o, e, n) {
+  if (!e) return [""];
+  const t = e.split(`
+`), a = [];
+  for (const h of t) {
+    const r = h.split(" ");
+    let s = "";
+    for (const i of r) {
+      const v = s ? `${s} ${i}` : i;
+      o.measureText(v).width > n && s ? (a.push(s), s = i) : s = v;
+    }
+    a.push(s);
+  }
+  return a;
+}
+const We = [
   1,
   0,
   0,
@@ -212,41 +263,41 @@ const xe = [
   1,
   0
 ];
-function ot(s, e) {
+function Mt(o, 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 += s[t * 5 + u] * e[u * 5 + o];
-      o === 4 && (d += s[t * 5 + 4]), n[t * 5 + o] = d;
+    for (let a = 0; a < 5; a++) {
+      let h = 0;
+      for (let r = 0; r < 4; r++)
+        h += o[t * 5 + r] * e[r * 5 + a];
+      a === 4 && (h += o[t * 5 + 4]), n[t * 5 + a] = h;
     }
   return n;
 }
-function De(...s) {
-  if (s.length === 0) return [...xe];
-  let e = s[0];
-  for (let n = 1; n < s.length; n++)
-    e = ot(s[n], e);
+function Ge(...o) {
+  if (o.length === 0) return [...We];
+  let e = o[0];
+  for (let n = 1; n < o.length; n++)
+    e = Mt(o[n], e);
   return e;
 }
-function Le(s) {
+function Qe(o) {
   return [
     1,
     0,
     0,
     0,
-    s,
+    o,
     0,
     1,
     0,
     0,
-    s,
+    o,
     0,
     0,
     1,
     0,
-    s,
+    o,
     0,
     0,
     0,
@@ -254,8 +305,8 @@ function Le(s) {
     0
   ];
 }
-function Ae(s) {
-  const e = s + 1, n = -0.5 * e + 0.5;
+function et(o) {
+  const e = o + 1, n = -0.5 * e + 0.5;
   return [
     e,
     0,
@@ -279,22 +330,22 @@ function Ae(s) {
     0
   ];
 }
-function Fe(s) {
-  const e = s + 1, n = 1 - e, t = 0.2126 * n, o = 0.7152 * n, d = 0.0722 * n;
+function tt(o) {
+  const e = o + 1, n = 1 - e, t = 0.2126 * n, a = 0.7152 * n, h = 0.0722 * n;
   return [
     t + e,
-    o,
-    d,
+    a,
+    h,
     0,
     0,
     t,
-    o + e,
-    d,
+    a + e,
+    h,
     0,
     0,
     t,
-    o,
-    d + e,
+    a,
+    h + e,
     0,
     0,
     0,
@@ -304,8 +355,8 @@ function Fe(s) {
     0
   ];
 }
-function He(s) {
-  const e = Math.pow(2, s);
+function nt(o) {
+  const e = Math.pow(2, o);
   return [
     e,
     0,
@@ -329,9 +380,9 @@ function He(s) {
     0
   ];
 }
-function Ve(s) {
+function it(o) {
   return [
-    1 + s,
+    1 + o,
     0,
     0,
     0,
@@ -343,7 +394,7 @@ function Ve(s) {
     0,
     0,
     0,
-    1 - s,
+    1 - o,
     0,
     0,
     0,
@@ -353,194 +404,196 @@ function Ve(s) {
     0
   ];
 }
-function Ce(s, e) {
-  const n = s.data, t = n.length, o = e[0], d = e[1], u = e[2], r = e[3], i = e[4] * 255, h = e[5], a = e[6], c = e[7], y = e[8], v = e[9] * 255, w = e[10], b = e[11], $ = e[12], m = e[13], l = e[14] * 255, p = e[15], f = e[16], k = e[17], x = e[18], D = e[19] * 255;
-  for (let T = 0; T < t; T += 4) {
-    const K = n[T], L = n[T + 1], W = n[T + 2], P = n[T + 3];
-    n[T] = ie(K * o + L * d + W * u + P * r + i), n[T + 1] = ie(K * h + L * a + W * c + P * y + v), n[T + 2] = ie(K * w + L * b + W * $ + P * m + l), n[T + 3] = ie(K * p + L * f + W * k + P * x + D);
+function Ae(o, e) {
+  const n = o.data, t = n.length, a = e[0], h = e[1], r = e[2], s = e[3], i = e[4] * 255, v = e[5], l = e[6], c = e[7], m = e[8], d = e[9] * 255, x = e[10], _ = e[11], $ = e[12], w = e[13], u = e[14] * 255, g = e[15], k = e[16], C = e[17], P = e[18], V = e[19] * 255;
+  for (let A = 0; A < t; A += 4) {
+    const D = n[A], K = n[A + 1], L = n[A + 2], E = n[A + 3];
+    n[A] = ce(D * a + K * h + L * r + E * s + i), n[A + 1] = ce(D * v + K * l + L * c + E * m + d), n[A + 2] = ce(D * x + K * _ + L * $ + E * w + u), n[A + 3] = ce(D * g + K * k + L * C + E * P + V);
   }
 }
-function ye(s, e) {
+function Re(o, e) {
   if (e === 1) return;
-  const n = s.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]];
+  const n = o.data, t = 1 / e, a = new Uint8Array(256);
+  for (let h = 0; h < 256; h++)
+    a[h] = ce(Math.pow(h / 255, t) * 255);
+  for (let h = 0; h < n.length; h += 4)
+    n[h] = a[n[h]], n[h + 1] = a[n[h + 1]], n[h + 2] = a[n[h + 2]];
 }
-function we(s, e, n, t) {
+function ze(o, e, n, t) {
   if (e === 0) return;
-  const o = s.data, d = n / 2, u = t / 2, r = Math.sqrt(d * d + u * u);
+  const a = o.data, h = n / 2, r = t / 2, s = Math.sqrt(h * h + r * r);
   for (let i = 0; i < t; i++)
-    for (let h = 0; h < n; h++) {
-      const a = (i * n + h) * 4, c = h - d, y = i - u, v = Math.sqrt(c * c + y * y) / r, w = 1 - e * v * v;
-      o[a] = ie(o[a] * w), o[a + 1] = ie(o[a + 1] * w), o[a + 2] = ie(o[a + 2] * w);
+    for (let v = 0; v < n; v++) {
+      const l = (i * n + v) * 4, c = v - h, m = i - r, d = Math.sqrt(c * c + m * m) / s, x = 1 - e * d * d;
+      a[l] = ce(a[l] * x), a[l + 1] = ce(a[l + 1] * x), a[l + 2] = ce(a[l + 2] * x);
     }
 }
-function ke(s, e) {
+function Ie(o, e) {
   if (e === 0) return;
-  const { data: n, width: t, height: o } = s, d = e * 4, u = new Uint8ClampedArray(n);
-  for (let r = 1; r < o - 1; r++)
+  const { data: n, width: t, height: a } = o, h = e * 4, r = new Uint8ClampedArray(n);
+  for (let s = 1; s < a - 1; s++)
     for (let i = 1; i < t - 1; i++) {
-      const h = (r * t + i) * 4;
-      for (let a = 0; a < 3; a++) {
-        const c = u[h + a], y = c * 4 - u[((r - 1) * t + i) * 4 + a] - u[((r + 1) * t + i) * 4 + a] - u[(r * t + (i - 1)) * 4 + a] - u[(r * t + (i + 1)) * 4 + a], v = c + d * y;
-        n[h + a] = v < 0 ? 0 : v > 255 ? 255 : v + 0.5 | 0;
+      const v = (s * t + i) * 4;
+      for (let l = 0; l < 3; l++) {
+        const c = r[v + l], m = c * 4 - r[((s - 1) * t + i) * 4 + l] - r[((s + 1) * t + i) * 4 + l] - r[(s * t + (i - 1)) * 4 + l] - r[(s * t + (i + 1)) * 4 + l], d = c + h * m;
+        n[v + l] = d < 0 ? 0 : d > 255 ? 255 : d + 0.5 | 0;
       }
     }
 }
-function ie(s) {
-  return s < 0 ? 0 : s > 255 ? 255 : s + 0.5 | 0;
+function ce(o) {
+  return o < 0 ? 0 : o > 255 ? 255 : o + 0.5 | 0;
 }
-const at = 16777216;
-class st {
+const St = 16777216;
+class $t {
   /**
    * 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), a = Math.round(r.y * e.naturalHeight), c = Math.round(r.width * e.naturalWidth), y = Math.round(r.height * e.naturalHeight);
-    h = Math.max(0, Math.min(h, e.naturalWidth)), a = Math.max(0, Math.min(a, e.naturalHeight)), c = Math.min(c, e.naturalWidth - h), y = Math.min(y, e.naturalHeight - a);
-    let v = c, w = y;
+      mimeType: a = "image/jpeg",
+      quality: h = 0.92,
+      maxCanvasPixels: r = St
+    } = t, s = n.crop, i = n.finetune;
+    let v = Math.round(s.x * e.naturalWidth), l = Math.round(s.y * e.naturalHeight), c = Math.round(s.width * e.naturalWidth), m = Math.round(s.height * e.naturalHeight);
+    v = Math.max(0, Math.min(v, e.naturalWidth)), l = Math.max(0, Math.min(l, e.naturalHeight)), c = Math.min(c, e.naturalWidth - v), m = Math.min(m, e.naturalHeight - l);
+    let d = c, x = m;
     if (n.resize.width || n.resize.height) {
-      const T = n.resize.width, K = n.resize.height, L = n.resize.fit;
-      if (T && K)
-        if (L === "force")
-          v = T, w = K;
-        else if (L === "cover") {
-          const W = Math.max(T / c, K / y);
-          v = Math.round(c * W), w = Math.round(y * W);
+      const A = n.resize.width, D = n.resize.height, K = n.resize.fit;
+      if (A && D)
+        if (K === "force")
+          d = A, x = D;
+        else if (K === "cover") {
+          const L = Math.max(A / c, D / m);
+          d = Math.round(c * L), x = Math.round(m * L);
         } else {
-          const W = Math.min(T / c, K / y);
-          v = Math.round(c * W), w = Math.round(y * W);
+          const L = Math.min(A / c, D / m);
+          d = Math.round(c * L), x = Math.round(m * L);
         }
-      else if (T) {
-        const W = T / c;
-        v = T, w = Math.round(y * W);
-      } else if (K) {
-        const W = K / y;
-        v = Math.round(c * W), w = K;
+      else if (A) {
+        const L = A / c;
+        d = A, x = Math.round(m * L);
+      } else if (D) {
+        const L = D / m;
+        d = Math.round(c * L), x = D;
       }
-      n.resize.upscale || (v = Math.min(v, c), w = Math.min(w, y));
+      n.resize.upscale || (d = Math.min(d, c), x = Math.min(x, m));
     }
-    const b = v * w;
-    if (b > u) {
-      const T = Math.sqrt(u / b);
-      v = Math.floor(v * T), w = Math.floor(w * T);
+    const _ = d * x;
+    if (_ > r) {
+      const A = Math.sqrt(r / _);
+      d = Math.floor(d * A), x = Math.floor(x * A);
     }
-    v = Math.max(1, v), w = Math.max(1, w);
-    const $ = Math.abs(r.rotation);
-    let m = v, l = w;
+    d = Math.max(1, d), x = Math.max(1, x);
+    const $ = Math.abs(s.rotation);
+    let w = d, u = x;
     if ($ > 1e-3) {
-      const T = Math.abs(Math.cos(r.rotation)), K = Math.abs(Math.sin(r.rotation));
-      m = Math.ceil(v * T + w * K), l = Math.ceil(v * K + w * T);
+      const A = Math.abs(Math.cos(s.rotation)), D = Math.abs(Math.sin(s.rotation));
+      w = Math.ceil(d * A + x * D), u = Math.ceil(d * D + x * A);
     }
-    const p = document.createElement("canvas");
-    p.width = m, p.height = l;
-    const f = p.getContext("2d"), k = n.backgroundColor;
-    k[3] > 0 && (f.fillStyle = `rgba(${Math.round(k[0] * 255)}, ${Math.round(k[1] * 255)}, ${Math.round(k[2] * 255)}, ${k[3]})`, f.fillRect(0, 0, m, l)), f.save(), f.translate(m / 2, l / 2), f.rotate(r.rotation), f.scale(r.flipX ? -1 : 1, r.flipY ? -1 : 1), f.drawImage(
+    const g = document.createElement("canvas");
+    g.width = w, g.height = u;
+    const k = g.getContext("2d"), C = n.backgroundColor;
+    C[3] > 0 && (k.fillStyle = `rgba(${Math.round(C[0] * 255)}, ${Math.round(C[1] * 255)}, ${Math.round(C[2] * 255)}, ${C[3]})`, k.fillRect(0, 0, w, u)), k.save(), k.translate(w / 2, u / 2), k.rotate(s.rotation), k.scale(s.flipX ? -1 : 1, s.flipY ? -1 : 1), k.drawImage(
       e,
-      h,
-      a,
-      c,
-      y,
-      -v / 2,
-      -w / 2,
       v,
-      w
-    ), f.restore();
-    const x = [];
-    if (i.brightness !== 0 && x.push(Le(i.brightness)), i.contrast !== 0 && x.push(Ae(i.contrast)), i.saturation !== 0 && x.push(Fe(i.saturation)), i.exposure !== 0 && x.push(He(i.exposure)), i.temperature !== 0 && x.push(Ve(i.temperature)), n.filter.matrix)
+      l,
+      c,
+      m,
+      -d / 2,
+      -x / 2,
+      d,
+      x
+    ), k.restore();
+    const P = [];
+    if (i.brightness !== 0 && P.push(Qe(i.brightness)), i.contrast !== 0 && P.push(et(i.contrast)), i.saturation !== 0 && P.push(tt(i.saturation)), i.exposure !== 0 && P.push(nt(i.exposure)), i.temperature !== 0 && P.push(it(i.temperature)), n.filter.matrix)
       if (n.filter.intensity < 1) {
-        const T = n.filter.matrix, K = n.filter.intensity, L = xe.map((W, P) => W * (1 - K) + T[P] * K);
-        x.push(L);
+        const A = n.filter.matrix, D = n.filter.intensity, K = We.map((L, E) => L * (1 - D) + A[E] * D);
+        P.push(K);
       } else
-        x.push(n.filter.matrix);
-    if (x.length > 0) {
-      const T = De(...x), K = f.getImageData(0, 0, m, l);
-      Ce(K, T), i.gamma !== 1 && ye(K, i.gamma), i.clarity !== 0 && ke(K, i.clarity), i.vignette !== 0 && we(K, i.vignette, m, l), f.putImageData(K, 0, 0);
+        P.push(n.filter.matrix);
+    if (P.length > 0) {
+      const A = Ge(...P), D = k.getImageData(0, 0, w, u);
+      Ae(D, A), i.gamma !== 1 && Re(D, i.gamma), i.clarity !== 0 && Ie(D, i.clarity), i.vignette !== 0 && ze(D, i.vignette, w, u), k.putImageData(D, 0, 0);
     } else if (i.gamma !== 1 || i.clarity !== 0 || i.vignette !== 0) {
-      const T = f.getImageData(0, 0, m, l);
-      i.gamma !== 1 && ye(T, i.gamma), i.clarity !== 0 && ke(T, i.clarity), i.vignette !== 0 && we(T, i.vignette, m, l), f.putImageData(T, 0, 0);
-    }
-    n.frame.style && rt(f, n.frame.style, n.frame.size, n.frame.color, n.frame.radius, m, l);
-    for (const T of n.stickers)
-      await ct(f, T, m, l);
+      const A = k.getImageData(0, 0, w, u);
+      i.gamma !== 1 && Re(A, i.gamma), i.clarity !== 0 && Ie(A, i.clarity), i.vignette !== 0 && ze(A, i.vignette, w, u), k.putImageData(A, 0, 0);
+    }
+    n.frame.style && Rt(k, n.frame.style, n.frame.size, n.frame.color, n.frame.radius, w, u);
+    for (const A of n.stickers)
+      await It(k, A, w, u);
+    for (const A of n.annotations)
+      Ee(k, A, 0, 0, w, u);
     return {
-      blob: await new Promise((T, K) => {
-        p.toBlob(
-          (L) => L ? T(L) : K(new Error("Failed to encode image")),
-          o,
-          d
+      blob: await new Promise((A, D) => {
+        g.toBlob(
+          (K) => K ? A(K) : D(new Error("Failed to encode image")),
+          a,
+          h
         );
       }),
       imageState: JSON.parse(JSON.stringify(n))
     };
   }
 }
-function rt(s, 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 (s.strokeStyle = h, s.fillStyle = h, e) {
+function Rt(o, e, n, t, a, h, r) {
+  const s = Math.round(Math.max(h, r) * n), i = Math.round(a), v = `rgba(${Math.round(t[0] * 255)}, ${Math.round(t[1] * 255)}, ${Math.round(t[2] * 255)}, ${t[3]})`;
+  switch (o.strokeStyle = v, o.fillStyle = v, e) {
     case "solidSharp":
-      s.lineWidth = r, s.strokeRect(r / 2, r / 2, d - r, u - r);
+      o.lineWidth = s, o.strokeRect(s / 2, s / 2, h - s, r - s);
       break;
     case "solidRound":
-      s.lineWidth = r, lt(s, r / 2, r / 2, d - r, u - r, i + r / 2), s.stroke();
+      o.lineWidth = s, zt(o, s / 2, s / 2, h - s, r - s, i + s / 2), o.stroke();
       break;
     case "lineSingle": {
-      const a = r * 2;
-      s.lineWidth = 1, s.strokeRect(a, a, d - a * 2, u - a * 2);
+      const l = s * 2;
+      o.lineWidth = 1, o.strokeRect(l, l, h - l * 2, r - l * 2);
       break;
     }
     case "lineMultiple": {
-      s.lineWidth = 1;
-      for (let a = 1; a <= 3; a++) {
-        const c = r * a;
-        s.strokeRect(c, c, d - c * 2, u - c * 2);
+      o.lineWidth = 1;
+      for (let l = 1; l <= 3; l++) {
+        const c = s * l;
+        o.strokeRect(c, c, h - c * 2, r - c * 2);
       }
       break;
     }
     case "hook": {
-      const a = Math.min(d, u) * 0.1;
-      s.lineWidth = r * 0.5;
-      const c = r;
-      s.beginPath(), s.moveTo(c, c + a), s.lineTo(c, c), s.lineTo(c + a, c), s.stroke(), s.beginPath(), s.moveTo(d - c - a, c), s.lineTo(d - c, c), s.lineTo(d - c, c + a), s.stroke(), s.beginPath(), s.moveTo(c, u - c - a), s.lineTo(c, u - c), s.lineTo(c + a, u - c), s.stroke(), s.beginPath(), s.moveTo(d - c - a, u - c), s.lineTo(d - c, u - c), s.lineTo(d - c, u - c - a), s.stroke();
+      const l = Math.min(h, r) * 0.1;
+      o.lineWidth = s * 0.5;
+      const c = s;
+      o.beginPath(), o.moveTo(c, c + l), o.lineTo(c, c), o.lineTo(c + l, c), o.stroke(), o.beginPath(), o.moveTo(h - c - l, c), o.lineTo(h - c, c), o.lineTo(h - c, c + l), o.stroke(), o.beginPath(), o.moveTo(c, r - c - l), o.lineTo(c, r - c), o.lineTo(c + l, r - c), o.stroke(), o.beginPath(), o.moveTo(h - c - l, r - c), o.lineTo(h - c, r - c), o.lineTo(h - c, r - c - l), o.stroke();
       break;
     }
     case "polaroid": {
-      const a = r, c = r * 4;
-      s.fillRect(0, 0, d, a), s.fillRect(0, 0, a, u), s.fillRect(d - a, 0, a, u), s.fillRect(0, u - c, d, c);
+      const l = s, c = s * 4;
+      o.fillRect(0, 0, h, l), o.fillRect(0, 0, l, r), o.fillRect(h - l, 0, l, r), o.fillRect(0, r - c, h, c);
       break;
     }
     default:
-      s.lineWidth = r * 0.5, s.strokeRect(r, r, d - r * 2, u - r * 2);
+      o.lineWidth = s * 0.5, o.strokeRect(s, s, h - s * 2, r - s * 2);
       break;
   }
 }
-function lt(s, e, n, t, o, d) {
-  s.beginPath(), s.moveTo(e + d, n), s.lineTo(e + t - d, n), s.arcTo(e + t, n, e + t, n + d, d), s.lineTo(e + t, n + o - d), s.arcTo(e + t, n + o, e + t - d, n + o, d), s.lineTo(e + d, n + o), s.arcTo(e, n + o, e, n + o - d, d), s.lineTo(e, n + d), s.arcTo(e, n, e + d, n, d), s.closePath();
+function zt(o, e, n, t, a, h) {
+  o.beginPath(), o.moveTo(e + h, n), o.lineTo(e + t - h, n), o.arcTo(e + t, n, e + t, n + h, h), o.lineTo(e + t, n + a - h), o.arcTo(e + t, n + a, e + t - h, n + a, h), o.lineTo(e + h, n + a), o.arcTo(e, n + a, e, n + a - h, h), o.lineTo(e, n + h), o.arcTo(e, n, e + h, n, h), o.closePath();
 }
-async function ct(s, e, n, t) {
-  const o = e.x * n, d = e.y * t, u = e.width * n, r = e.height * t;
-  if (s.save(), s.globalAlpha = e.opacity, s.translate(o + u / 2, d + r / 2), s.rotate(e.rotation), s.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;
-    s.font = `${i}px sans-serif`, s.textAlign = "center", s.textBaseline = "middle", s.fillText(e.src, 0, 0);
+async function It(o, e, n, t) {
+  const a = e.x * n, h = e.y * t, r = e.width * n, s = e.height * t;
+  if (o.save(), o.globalAlpha = e.opacity, o.translate(a + r / 2, h + s / 2), o.rotate(e.rotation), o.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(r, s) * 0.8;
+    o.font = `${i}px sans-serif`, o.textAlign = "center", o.textBaseline = "middle", o.fillText(e.src, 0, 0);
   } else
     try {
       const i = new Image();
-      i.crossOrigin = "anonymous", await new Promise((h, a) => {
-        i.onload = () => h(), i.onerror = () => a(), i.src = e.src;
-      }), s.drawImage(i, -u / 2, -r / 2, u, r);
+      i.crossOrigin = "anonymous", await new Promise((v, l) => {
+        i.onload = () => v(), i.onerror = () => l(), i.src = e.src;
+      }), o.drawImage(i, -r / 2, -s / 2, r, s);
     } catch {
     }
-  s.restore();
+  o.restore();
 }
-const ut = {
+const Pt = {
   // Toolbar
   undo: "Undo",
   redo: "Redo",
@@ -627,10 +680,20 @@ const ut = {
   processing: "Processing...",
   // Crop overlay
   cropApply: "Apply",
+  // Text annotation labels
+  text: "Text",
+  fillColor: "Fill Color",
+  fontSize: "Font Size",
+  fontFamily: "Font Family",
+  bold: "Bold",
+  italic: "Italic",
+  textAlign: "Text Align",
+  delete: "Delete",
+  opacity: "Opacity",
   // Confirmation
   unsavedChanges: "You have unsaved changes. Are you sure you want to close?",
   confirm: "Confirm"
-}, dt = {
+}, Tt = {
   // Toolbar
   undo: "تراجع",
   redo: "إعادة",
@@ -717,16 +780,26 @@ const ut = {
   processing: "جاري المعالجة...",
   // Crop overlay
   cropApply: "تطبيق",
+  // Text annotation labels
+  text: "نص",
+  fillColor: "لون التعبئة",
+  fontSize: "حجم الخط",
+  fontFamily: "نوع الخط",
+  bold: "عريض",
+  italic: "مائل",
+  textAlign: "محاذاة النص",
+  delete: "حذف",
+  opacity: "الشفافية",
   // Confirmation
   unsavedChanges: "لديك تغييرات غير محفوظة. هل أنت متأكد أنك تريد الإغلاق؟",
   confirm: "تأكيد"
-}, ht = ["disabled", "title"], vt = {
+}, Et = ["disabled", "title"], Wt = {
   key: 0,
   class: "vie-icon-btn__icon"
-}, pt = {
+}, At = {
   key: 1,
   class: "vie-icon-btn__label"
-}, te = /* @__PURE__ */ Y({
+}, se = /* @__PURE__ */ J({
   __name: "IconButton",
   props: {
     title: {},
@@ -735,27 +808,27 @@ const ut = {
     variant: {}
   },
   emits: ["click"],
-  setup(s) {
-    return (e, n) => (M(), z("button", {
-      class: U([
+  setup(o) {
+    return (e, n) => (S(), z("button", {
+      class: N([
         "vie-icon-btn",
-        { "vie-icon-btn--accent": s.variant === "accent" }
+        { "vie-icon-btn--accent": o.variant === "accent" }
       ]),
-      disabled: s.disabled,
-      title: s.title,
+      disabled: o.disabled,
+      title: o.title,
       onClick: n[0] || (n[0] = (t) => e.$emit("click", t))
     }, [
-      e.$slots.default ? (M(), z("span", vt, [
-        Ue(e.$slots, "default")
-      ])) : Z("", !0),
-      s.label ? (M(), z("span", pt, q(s.label), 1)) : Z("", !0)
-    ], 10, ht));
+      e.$slots.default ? (S(), z("span", Wt, [
+        vt(e.$slots, "default")
+      ])) : G("", !0),
+      o.label ? (S(), z("span", At, q(o.label), 1)) : G("", !0)
+    ], 10, Et));
   }
-}), ft = { class: "vie-toolbar" }, mt = { class: "vie-toolbar-group" }, gt = { class: "vie-toolbar-group" }, yt = ["title"], wt = { class: "vie-toolbar-group" }, kt = {
+}), Ft = { class: "vie-toolbar" }, Dt = { class: "vie-toolbar-group" }, Lt = { class: "vie-toolbar-group" }, Kt = ["title"], Ht = { class: "vie-toolbar-group" }, Vt = {
   key: 0,
   class: "vie-spinner",
   style: { width: "16px", height: "16px", "border-width": "2px" }
-}, bt = {
+}, Bt = {
   key: 1,
   viewBox: "0 0 24 24",
   fill: "none",
@@ -763,23 +836,23 @@ const ut = {
   "stroke-width": "2.5",
   "stroke-linecap": "round",
   "stroke-linejoin": "round"
-}, $e = /* @__PURE__ */ Y({
+}, Le = /* @__PURE__ */ J({
   __name: "EditorToolbar",
   props: {
     processing: { type: Boolean }
   },
   emits: ["done"],
-  setup(s) {
-    const e = Q(ee, (t) => t), n = G();
-    return (t, o) => (M(), z("div", ft, [
-      g("div", mt, [
-        j(te, {
-          title: S(e)("undo"),
-          disabled: !S(n).canUndo.value,
-          onClick: o[0] || (o[0] = (d) => S(n).undo())
+  setup(o) {
+    const e = ie(oe, (t) => t), n = ee();
+    return (t, a) => (S(), z("div", Ft, [
+      y("div", Dt, [
+        X(se, {
+          title: I(e)("undo"),
+          disabled: !I(n).canUndo.value,
+          onClick: a[0] || (a[0] = (h) => I(n).undo())
         }, {
-          default: J(() => [...o[7] || (o[7] = [
-            g("svg", {
+          default: ne(() => [...a[7] || (a[7] = [
+            y("svg", {
               viewBox: "0 0 24 24",
               fill: "none",
               stroke: "currentColor",
@@ -787,20 +860,20 @@ const ut = {
               "stroke-linecap": "round",
               "stroke-linejoin": "round"
             }, [
-              g("path", { d: "M3 10h10a5 5 0 0 1 0 10H9" }),
-              g("path", { d: "M3 10l4-4" }),
-              g("path", { d: "M3 10l4 4" })
+              y("path", { d: "M3 10h10a5 5 0 0 1 0 10H9" }),
+              y("path", { d: "M3 10l4-4" }),
+              y("path", { d: "M3 10l4 4" })
             ], -1)
           ])]),
           _: 1
         }, 8, ["title", "disabled"]),
-        j(te, {
-          title: S(e)("redo"),
-          disabled: !S(n).canRedo.value,
-          onClick: o[1] || (o[1] = (d) => S(n).redo())
+        X(se, {
+          title: I(e)("redo"),
+          disabled: !I(n).canRedo.value,
+          onClick: a[1] || (a[1] = (h) => I(n).redo())
         }, {
-          default: J(() => [...o[8] || (o[8] = [
-            g("svg", {
+          default: ne(() => [...a[8] || (a[8] = [
+            y("svg", {
               viewBox: "0 0 24 24",
               fill: "none",
               stroke: "currentColor",
@@ -808,20 +881,20 @@ const ut = {
               "stroke-linecap": "round",
               "stroke-linejoin": "round"
             }, [
-              g("path", { d: "M21 10H11a5 5 0 0 0 0 10h4" }),
-              g("path", { d: "M21 10l-4-4" }),
-              g("path", { d: "M21 10l-4 4" })
+              y("path", { d: "M21 10H11a5 5 0 0 0 0 10h4" }),
+              y("path", { d: "M21 10l-4-4" }),
+              y("path", { d: "M21 10l-4 4" })
             ], -1)
           ])]),
           _: 1
         }, 8, ["title", "disabled"]),
-        j(te, {
-          title: S(e)("revert"),
-          disabled: !S(n).hasEdits.value,
-          onClick: o[2] || (o[2] = (d) => S(n).revert())
+        X(se, {
+          title: I(e)("revert"),
+          disabled: !I(n).hasEdits.value,
+          onClick: a[2] || (a[2] = (h) => I(n).revert())
         }, {
-          default: J(() => [...o[9] || (o[9] = [
-            g("svg", {
+          default: ne(() => [...a[9] || (a[9] = [
+            y("svg", {
               viewBox: "0 0 24 24",
               fill: "none",
               stroke: "currentColor",
@@ -829,75 +902,75 @@ const ut = {
               "stroke-linecap": "round",
               "stroke-linejoin": "round"
             }, [
-              g("path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }),
-              g("path", { d: "M3 3v5h5" })
+              y("path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }),
+              y("path", { d: "M3 3v5h5" })
             ], -1)
           ])]),
           _: 1
         }, 8, ["title", "disabled"])
       ]),
-      g("div", gt, [
-        j(te, {
-          title: S(e)("zoomOut"),
-          onClick: o[3] || (o[3] = (d) => S(n).setZoom(S(n).zoom.value - 0.1))
+      y("div", Lt, [
+        X(se, {
+          title: I(e)("zoomOut"),
+          onClick: a[3] || (a[3] = (h) => I(n).setZoom(I(n).zoom.value - 0.1))
         }, {
-          default: J(() => [...o[10] || (o[10] = [
-            g("svg", {
+          default: ne(() => [...a[10] || (a[10] = [
+            y("svg", {
               viewBox: "0 0 24 24",
               fill: "none",
               stroke: "currentColor",
               "stroke-width": "2",
               "stroke-linecap": "round"
             }, [
-              g("circle", {
+              y("circle", {
                 cx: "11",
                 cy: "11",
                 r: "8"
               }),
-              g("path", { d: "M8 11h6" })
+              y("path", { d: "M8 11h6" })
             ], -1)
           ])]),
           _: 1
         }, 8, ["title"]),
-        g("button", {
+        y("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),
-        j(te, {
-          title: S(e)("zoomIn"),
-          onClick: o[5] || (o[5] = (d) => S(n).setZoom(S(n).zoom.value + 0.1))
+          title: I(e)("zoomToFit"),
+          onClick: a[4] || (a[4] = (h) => I(n).setZoom(1))
+        }, q(Math.round(I(n).zoom.value * 100)) + "% ", 9, Kt),
+        X(se, {
+          title: I(e)("zoomIn"),
+          onClick: a[5] || (a[5] = (h) => I(n).setZoom(I(n).zoom.value + 0.1))
         }, {
-          default: J(() => [...o[11] || (o[11] = [
-            g("svg", {
+          default: ne(() => [...a[11] || (a[11] = [
+            y("svg", {
               viewBox: "0 0 24 24",
               fill: "none",
               stroke: "currentColor",
               "stroke-width": "2",
               "stroke-linecap": "round"
             }, [
-              g("circle", {
+              y("circle", {
                 cx: "11",
                 cy: "11",
                 r: "8"
               }),
-              g("path", { d: "M8 11h6" }),
-              g("path", { d: "M11 8v6" })
+              y("path", { d: "M8 11h6" }),
+              y("path", { d: "M11 8v6" })
             ], -1)
           ])]),
           _: 1
         }, 8, ["title"])
       ]),
-      g("div", wt, [
-        j(te, {
+      y("div", Ht, [
+        X(se, {
           variant: "accent",
-          label: s.processing ? S(e)("processing") : S(e)("done"),
-          disabled: s.processing,
-          onClick: o[6] || (o[6] = (d) => t.$emit("done"))
+          label: o.processing ? I(e)("processing") : I(e)("done"),
+          disabled: o.processing,
+          onClick: a[6] || (a[6] = (h) => t.$emit("done"))
         }, {
-          default: J(() => [
-            s.processing ? (M(), z("span", kt)) : (M(), z("svg", bt, [...o[12] || (o[12] = [
-              g("polyline", { points: "20 6 9 17 4 12" }, null, -1)
+          default: ne(() => [
+            o.processing ? (S(), z("span", Vt)) : (S(), z("svg", Bt, [...a[12] || (a[12] = [
+              y("polyline", { points: "20 6 9 17 4 12" }, null, -1)
             ])]))
           ]),
           _: 1
@@ -906,7 +979,7 @@ const ut = {
     ]));
   }
 });
-class _t {
+class jt {
   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");
@@ -921,9 +994,13 @@ class _t {
     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();
+  /** Request a render on the next animation frame, or immediately if `immediate` is true */
+  requestRender(e = !1) {
+    this.needsRender = !0, e ? this.renderNow() : this.scheduleRender();
+  }
+  /** Render synchronously (cancels pending RAF). Used during drag for zero-lag updates. */
+  renderNow() {
+    this.animFrameId !== null && (cancelAnimationFrame(this.animFrameId), this.animFrameId = null), this.needsRender && this.getState && (this.render(this.getState()), this.needsRender = !1);
   }
   /** Start the render loop */
   startRenderLoop(e) {
@@ -958,29 +1035,29 @@ class _t {
    * 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))
+    const n = this.sourceImage, { finetune: t, filter: a } = e;
+    if (!this.hasColorEffects(t, a))
       return n;
-    const d = this.buildEffectsCacheKey(t, o);
-    if (d === this.previewCacheKey && this.previewCanvas)
+    const h = this.buildEffectsCacheKey(t, a);
+    if (h === this.previewCacheKey && this.previewCanvas)
       return this.previewCanvas;
-    const u = Math.min(
+    const r = 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 a = [];
-    if (t.brightness !== 0 && a.push(Le(t.brightness)), t.contrast !== 0 && a.push(Ae(t.contrast)), t.saturation !== 0 && a.push(Fe(t.saturation)), t.exposure !== 0 && a.push(He(t.exposure)), t.temperature !== 0 && a.push(Ve(t.temperature)), o.matrix)
-      if (o.intensity < 1) {
-        const y = o.matrix, v = o.intensity;
-        a.push(xe.map((w, b) => w * (1 - v) + y[b] * v));
+    ), s = Math.round(n.naturalWidth * r), i = Math.round(n.naturalHeight * r);
+    (!this.previewCanvas || this.previewCanvas.width !== s || this.previewCanvas.height !== i) && (this.previewCanvas = document.createElement("canvas"), this.previewCanvas.width = s, this.previewCanvas.height = i, this.previewCtx = this.previewCanvas.getContext("2d"));
+    const v = this.previewCtx;
+    v.drawImage(n, 0, 0, s, i);
+    const l = [];
+    if (t.brightness !== 0 && l.push(Qe(t.brightness)), t.contrast !== 0 && l.push(et(t.contrast)), t.saturation !== 0 && l.push(tt(t.saturation)), t.exposure !== 0 && l.push(nt(t.exposure)), t.temperature !== 0 && l.push(it(t.temperature)), a.matrix)
+      if (a.intensity < 1) {
+        const m = a.matrix, d = a.intensity;
+        l.push(We.map((x, _) => x * (1 - d) + m[_] * d));
       } else
-        a.push(o.matrix);
-    const c = h.getImageData(0, 0, r, i);
-    return a.length > 0 && Ce(c, De(...a)), t.gamma !== 1 && ye(c, t.gamma), t.clarity !== 0 && ke(c, t.clarity), t.vignette !== 0 && we(c, t.vignette, r, i), h.putImageData(c, 0, 0), this.previewCacheKey = d, this.previewCanvas;
+        l.push(a.matrix);
+    const c = v.getImageData(0, 0, s, i);
+    return l.length > 0 && Ae(c, Ge(...l)), t.gamma !== 1 && Re(c, t.gamma), t.clarity !== 0 && Ie(c, t.clarity), t.vignette !== 0 && ze(c, t.vignette, s, i), v.putImageData(c, 0, 0), this.previewCacheKey = h, this.previewCanvas;
   }
   /** Check if crop is not at full-image defaults */
   isCropActive(e) {
@@ -993,102 +1070,108 @@ class _t {
    * 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, a = d - h * 2, c = u - h * 2, y = this.activePluginId !== "crop" && this.isCropActive(i), v = this.getPreviewSource(e);
-    y ? this.renderCroppedView(n, e, v, d, u, a, c) : this.renderFullView(n, e, v, r, d, u, a, c), this.afterRender && this.afterRender(n, e, this.fullImageRect);
+    const n = this.ctx, t = this.canvas, a = window.devicePixelRatio || 1, h = t.width / a, r = t.height / a;
+    if (n.clearRect(0, 0, h, r), !this.sourceImage) return;
+    const s = this.sourceImage, i = e.crop, v = 40, l = h - v * 2, c = r - v * 2, m = this.activePluginId !== "crop" && this.isCropActive(i), d = this.getPreviewSource(e);
+    m ? this.renderCroppedView(n, e, d, h, r, l, c) : this.renderFullView(n, e, d, s, h, r, l, c), 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, a = Math.min(r / o.naturalWidth, i / o.naturalHeight), c = o.naturalWidth * a, y = o.naturalHeight * a, v = (d - c) / 2, w = (u - y) / 2;
-    this.fullImageRect = { x: v, y: w, width: c, height: y }, e.save();
-    const b = this.viewport;
-    e.translate(d / 2 + b.panX, u / 2 + b.panY), e.scale(b.zoom, b.zoom), e.translate(-d / 2, -u / 2);
-    const $ = v + c / 2, m = w + y / 2;
-    e.translate($, m), e.rotate(h.rotation), e.scale(h.flipX ? -1 : 1, h.flipY ? -1 : 1), e.translate(-$, -m);
-    const l = n.backgroundColor;
-    l[3] > 0 && (e.fillStyle = `rgba(${Math.round(l[0] * 255)}, ${Math.round(l[1] * 255)}, ${Math.round(l[2] * 255)}, ${l[3]})`, e.fillRect(v, w, c, y)), e.drawImage(t, v, w, c, y), n.frame.style && this.renderFramePreview(e, n, v, w, c, y), n.stickers.length > 0 && this.renderStickers(e, n.stickers, v, w, c, y), e.restore();
+  renderFullView(e, n, t, a, h, r, s, i) {
+    const v = n.crop, l = Math.min(s / a.naturalWidth, i / a.naturalHeight), c = a.naturalWidth * l, m = a.naturalHeight * l, d = (h - c) / 2, x = (r - m) / 2;
+    this.fullImageRect = { x: d, y: x, width: c, height: m }, e.save();
+    const _ = this.viewport;
+    e.translate(h / 2 + _.panX, r / 2 + _.panY), e.scale(_.zoom, _.zoom), e.translate(-h / 2, -r / 2);
+    const $ = d + c / 2, w = x + m / 2;
+    e.translate($, w), e.rotate(v.rotation), e.scale(v.flipX ? -1 : 1, v.flipY ? -1 : 1), e.translate(-$, -w);
+    const u = n.backgroundColor;
+    if (u[3] > 0 && (e.fillStyle = `rgba(${Math.round(u[0] * 255)}, ${Math.round(u[1] * 255)}, ${Math.round(u[2] * 255)}, ${u[3]})`, e.fillRect(d, x, c, m)), e.drawImage(t, d, x, c, m), n.frame.style && this.renderFramePreview(e, n, d, x, c, m), n.stickers.length > 0 && this.renderStickers(e, n.stickers, d, x, c, m), n.annotations.length > 0)
+      for (const g of n.annotations)
+        Ee(e, g, d, x, c, m);
+    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, a = i.naturalWidth * h.width, c = i.naturalHeight * h.height, y = Math.min(u / a, r / c);
-    let v = 1;
+  renderCroppedView(e, n, t, a, h, r, s) {
+    const i = this.sourceImage, v = n.crop, l = i.naturalWidth * v.width, c = i.naturalHeight * v.height, m = Math.min(r / l, s / c);
+    let d = 1;
     if (this.activePluginId === "resize" && (n.resize.width || n.resize.height)) {
-      const K = n.resize.width || Math.round(a * (n.resize.height / c)), L = n.resize.height || Math.round(c * (n.resize.width / a));
-      v = Math.min(K / a, L / c), !n.resize.upscale && v > 1 && (v = 1), v > 1 && (v = Math.min(v, u / (a * y), r / (c * y)));
+      const D = n.resize.width || Math.round(l * (n.resize.height / c)), K = n.resize.height || Math.round(c * (n.resize.width / l));
+      d = Math.min(D / l, K / c), !n.resize.upscale && d > 1 && (d = 1), d > 1 && (d = Math.min(d, r / (l * m), s / (c * m)));
     }
-    const w = y * v, b = a * w, $ = c * w, m = (o - b) / 2, l = (d - $) / 2;
-    this.fullImageRect = { x: m, y: l, width: b, height: $ };
-    const p = t instanceof HTMLImageElement ? t.naturalWidth : t.width, f = t instanceof HTMLImageElement ? t.naturalHeight : t.height;
+    const x = m * d, _ = l * x, $ = c * x, w = (a - _) / 2, u = (h - $) / 2;
+    this.fullImageRect = { x: w, y: u, width: _, height: $ };
+    const g = t instanceof HTMLImageElement ? t.naturalWidth : t.width, k = t instanceof HTMLImageElement ? t.naturalHeight : t.height;
     e.save();
-    const k = this.viewport;
-    e.translate(o / 2 + k.panX, d / 2 + k.panY), e.scale(k.zoom, k.zoom), e.translate(-o / 2, -d / 2);
-    const x = m + b / 2, D = l + $ / 2;
-    e.translate(x, D), e.rotate(h.rotation), e.scale(h.flipX ? -1 : 1, h.flipY ? -1 : 1), e.translate(-x, -D);
-    const T = n.backgroundColor;
-    if (T[3] > 0 && (e.fillStyle = `rgba(${Math.round(T[0] * 255)}, ${Math.round(T[1] * 255)}, ${Math.round(T[2] * 255)}, ${T[3]})`, e.fillRect(m, l, b, $)), e.drawImage(
+    const C = this.viewport;
+    e.translate(a / 2 + C.panX, h / 2 + C.panY), e.scale(C.zoom, C.zoom), e.translate(-a / 2, -h / 2);
+    const P = w + _ / 2, V = u + $ / 2;
+    e.translate(P, V), e.rotate(v.rotation), e.scale(v.flipX ? -1 : 1, v.flipY ? -1 : 1), e.translate(-P, -V);
+    const A = n.backgroundColor;
+    if (A[3] > 0 && (e.fillStyle = `rgba(${Math.round(A[0] * 255)}, ${Math.round(A[1] * 255)}, ${Math.round(A[2] * 255)}, ${A[3]})`, e.fillRect(w, u, _, $)), e.drawImage(
       t,
-      h.x * p,
-      h.y * f,
+      v.x * g,
+      v.y * k,
       // source x, y
-      h.width * p,
-      h.height * f,
+      v.width * g,
+      v.height * k,
       // source w, h
-      m,
-      l,
-      b,
+      w,
+      u,
+      _,
       $
       // dest x, y, w, h
-    ), n.frame.style && this.renderFramePreview(e, n, m, l, b, $), n.stickers.length > 0 && this.renderStickersInCrop(e, n.stickers, h, m, l, b, $), e.restore(), this.activePluginId === "resize" && (n.resize.width || n.resize.height)) {
-      const K = n.resize.width || Math.round(a * (n.resize.height / c)), L = n.resize.height || Math.round(c * (n.resize.width / a)), W = `${K} × ${L} px`;
+    ), n.frame.style && this.renderFramePreview(e, n, w, u, _, $), n.stickers.length > 0 && this.renderStickersInCrop(e, n.stickers, v, w, u, _, $), n.annotations.length > 0)
+      for (const D of n.annotations)
+        xt(e, D, v, w, u, _, $);
+    if (e.restore(), this.activePluginId === "resize" && (n.resize.width || n.resize.height)) {
+      const D = n.resize.width || Math.round(l * (n.resize.height / c)), K = n.resize.height || Math.round(c * (n.resize.width / l)), L = `${D} × ${K} px`;
       e.save(), e.font = '12px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif', e.textAlign = "center", e.textBaseline = "top";
-      const P = o / 2, O = l + $ + 8, A = e.measureText(W).width + 16, R = 22;
-      e.fillStyle = "rgba(0, 0, 0, 0.6)", e.beginPath(), e.roundRect(P - A / 2, O, A, R, 4), e.fill(), e.fillStyle = "#fff", e.fillText(W, P, O + 4), e.restore();
+      const E = a / 2, O = u + $ + 8, F = e.measureText(L).width + 16, f = 22;
+      e.fillStyle = "rgba(0, 0, 0, 0.6)", e.beginPath(), e.roundRect(E - F / 2, O, F, f, 4), e.fill(), e.fillStyle = "#fff", e.fillText(L, E, O + 4), 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, a = `rgba(${Math.round(h[0] * 255)}, ${Math.round(h[1] * 255)}, ${Math.round(h[2] * 255)}, ${h[3]})`, c = Math.round(r.radius);
-    switch (e.strokeStyle = a, e.fillStyle = a, r.style) {
+  renderFramePreview(e, n, t, a, h, r) {
+    const s = n.frame, i = Math.round(Math.max(h, r) * s.size), v = s.color, l = `rgba(${Math.round(v[0] * 255)}, ${Math.round(v[1] * 255)}, ${Math.round(v[2] * 255)}, ${v[3]})`, c = Math.round(s.radius);
+    switch (e.strokeStyle = l, e.fillStyle = l, s.style) {
       case "solidSharp":
-        e.lineWidth = i, e.strokeRect(t + i / 2, o + i / 2, d - i, u - i);
+        e.lineWidth = i, e.strokeRect(t + i / 2, a + i / 2, h - i, r - i);
         break;
       case "solidRound":
-        e.lineWidth = i, e.beginPath(), e.roundRect(t + i / 2, o + i / 2, d - i, u - i, c + i / 2), e.stroke();
+        e.lineWidth = i, e.beginPath(), e.roundRect(t + i / 2, a + i / 2, h - i, r - i, c + 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);
+        const m = i * 2;
+        e.lineWidth = 1, e.strokeRect(t + m, a + m, h - m * 2, r - m * 2);
         break;
       }
       case "lineMultiple":
         e.lineWidth = 1;
-        for (let y = 1; y <= 3; y++) {
-          const v = i * y;
-          e.strokeRect(t + v, o + v, d - v * 2, u - v * 2);
+        for (let m = 1; m <= 3; m++) {
+          const d = i * m;
+          e.strokeRect(t + d, a + d, h - d * 2, r - d * 2);
         }
         break;
       case "hook": {
-        const y = Math.min(d, u) * 0.1;
+        const m = Math.min(h, r) * 0.1;
         e.lineWidth = i * 0.5;
-        const v = i;
-        e.beginPath(), e.moveTo(t + v, o + v + y), e.lineTo(t + v, o + v), e.lineTo(t + v + y, o + v), e.stroke(), e.beginPath(), e.moveTo(t + d - v - y, o + v), e.lineTo(t + d - v, o + v), e.lineTo(t + d - v, o + v + y), e.stroke(), e.beginPath(), e.moveTo(t + v, o + u - v - y), e.lineTo(t + v, o + u - v), e.lineTo(t + v + y, o + u - v), e.stroke(), e.beginPath(), e.moveTo(t + d - v - y, o + u - v), e.lineTo(t + d - v, o + u - v), e.lineTo(t + d - v, o + u - v - y), e.stroke();
+        const d = i;
+        e.beginPath(), e.moveTo(t + d, a + d + m), e.lineTo(t + d, a + d), e.lineTo(t + d + m, a + d), e.stroke(), e.beginPath(), e.moveTo(t + h - d - m, a + d), e.lineTo(t + h - d, a + d), e.lineTo(t + h - d, a + d + m), e.stroke(), e.beginPath(), e.moveTo(t + d, a + r - d - m), e.lineTo(t + d, a + r - d), e.lineTo(t + d + m, a + r - d), e.stroke(), e.beginPath(), e.moveTo(t + h - d - m, a + r - d), e.lineTo(t + h - d, a + r - d), e.lineTo(t + h - d, a + r - d - m), e.stroke();
         break;
       }
       case "polaroid": {
-        const y = i, v = 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 - v, d, v);
+        const m = i, d = i * 4;
+        e.fillRect(t, a, h, m), e.fillRect(t, a, m, r), e.fillRect(t + h - m, a, m, r), e.fillRect(t, a + r - d, h, d);
         break;
       }
       default:
-        e.lineWidth = i * 0.5, e.strokeRect(t + i, o + i, d - i * 2, u - i * 2);
+        e.lineWidth = i * 0.5, e.strokeRect(t + i, a + i, h - i * 2, r - i * 2);
         break;
     }
   }
@@ -1102,26 +1185,26 @@ class _t {
   /**
    * 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, a = r.width * d, c = r.height * u;
-      if (e.save(), e.globalAlpha = r.opacity, e.translate(i + a / 2, h + c / 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 v = Math.max(8, Math.min(a, c) * 0.8);
-        e.font = `${v}px sans-serif`, e.textAlign = "center", e.textBaseline = "middle", e.fillText(r.src, 0, 0);
+  renderStickers(e, n, t, a, h, r) {
+    for (const s of n) {
+      const i = t + s.x * h, v = a + s.y * r, l = s.width * h, c = s.height * r;
+      if (e.save(), e.globalAlpha = s.opacity, e.translate(i + l / 2, v + c / 2), e.rotate(s.rotation), e.scale(s.flipX ? -1 : 1, s.flipY ? -1 : 1), !s.src.startsWith("http") && !s.src.startsWith("data:") && !s.src.startsWith("blob:") && !s.src.startsWith("/") && !s.src.startsWith(".")) {
+        const d = Math.max(8, Math.min(l, c) * 0.8);
+        e.font = `${d}px sans-serif`, e.textAlign = "center", e.textBaseline = "middle", e.fillText(s.src, 0, 0);
       } else {
-        let v = this.stickerImageCache.get(r.src);
-        if (!v) {
+        let d = this.stickerImageCache.get(s.src);
+        if (!d) {
           if (this.stickerImageCache.size >= 50) {
-            const w = this.stickerImageCache.keys().next().value;
-            w !== void 0 && this.stickerImageCache.delete(w);
+            const x = this.stickerImageCache.keys().next().value;
+            x !== void 0 && this.stickerImageCache.delete(x);
           }
-          v = new Image(), v.crossOrigin = "anonymous", v.src = r.src, this.stickerImageCache.set(r.src, v), v.onload = () => {
+          d = new Image(), d.crossOrigin = "anonymous", d.src = s.src, this.stickerImageCache.set(s.src, d), d.onload = () => {
             this.requestRender();
-          }, v.onerror = () => {
-            this.stickerImageCache.delete(r.src);
+          }, d.onerror = () => {
+            this.stickerImageCache.delete(s.src);
           };
         }
-        v.complete && v.naturalWidth > 0 && e.drawImage(v, -a / 2, -c / 2, a, c);
+        d.complete && d.naturalWidth > 0 && e.drawImage(d, -l / 2, -c / 2, l, c);
       }
       e.restore();
     }
@@ -1129,29 +1212,29 @@ class _t {
   /**
    * Render stickers with positions remapped relative to the crop region.
    */
-  renderStickersInCrop(e, n, t, o, d, u, r) {
+  renderStickersInCrop(e, n, t, a, h, r, s) {
     if (!(t.width <= 0 || t.height <= 0))
       for (const i of n) {
-        const h = (i.x - t.x) / t.width, a = (i.y - t.y) / t.height, c = i.width / t.width, y = i.height / t.height;
-        if (h + c < 0 || h > 1 || a + y < 0 || a > 1) continue;
-        const v = o + h * u, w = d + a * r, b = c * u, $ = y * r;
-        if (e.save(), e.globalAlpha = i.opacity, e.translate(v + b / 2, w + $ / 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 l = Math.max(8, Math.min(b, $) * 0.8);
-          e.font = `${l}px sans-serif`, e.textAlign = "center", e.textBaseline = "middle", e.fillText(i.src, 0, 0);
+        const v = (i.x - t.x) / t.width, l = (i.y - t.y) / t.height, c = i.width / t.width, m = i.height / t.height;
+        if (v + c < 0 || v > 1 || l + m < 0 || l > 1) continue;
+        const d = a + v * r, x = h + l * s, _ = c * r, $ = m * s;
+        if (e.save(), e.globalAlpha = i.opacity, e.translate(d + _ / 2, x + $ / 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 u = Math.max(8, Math.min(_, $) * 0.8);
+          e.font = `${u}px sans-serif`, e.textAlign = "center", e.textBaseline = "middle", e.fillText(i.src, 0, 0);
         } else {
-          let l = this.stickerImageCache.get(i.src);
-          if (!l) {
+          let u = this.stickerImageCache.get(i.src);
+          if (!u) {
             if (this.stickerImageCache.size >= 50) {
-              const p = this.stickerImageCache.keys().next().value;
-              p !== void 0 && this.stickerImageCache.delete(p);
+              const g = this.stickerImageCache.keys().next().value;
+              g !== void 0 && this.stickerImageCache.delete(g);
             }
-            l = new Image(), l.crossOrigin = "anonymous", l.src = i.src, this.stickerImageCache.set(i.src, l), l.onload = () => {
+            u = new Image(), u.crossOrigin = "anonymous", u.src = i.src, this.stickerImageCache.set(i.src, u), u.onload = () => {
               this.requestRender();
-            }, l.onerror = () => {
+            }, u.onerror = () => {
               this.stickerImageCache.delete(i.src);
             };
           }
-          l.complete && l.naturalWidth > 0 && e.drawImage(l, -b / 2, -$ / 2, b, $);
+          u.complete && u.naturalWidth > 0 && e.drawImage(u, -_ / 2, -$ / 2, _, $);
         }
         e.restore();
       }
@@ -1160,147 +1243,147 @@ class _t {
     this.stopRenderLoop(), this.sourceImage = null, this.previewCanvas = null, this.previewCtx = null, this.stickerImageCache.clear();
   }
 }
-const xt = {
+const Ot = {
   key: 0,
   class: "vie-canvas-overlay vie-canvas-overlay--interactive"
-}, Ct = {
+}, Xt = {
   key: 1,
   class: "vie-canvas-loading"
-}, Mt = {
+}, qt = {
   key: 2,
   class: "vie-canvas-loading",
   style: { color: "var(--vie-danger)" }
-}, Re = /* @__PURE__ */ Y({
+}, Ke = /* @__PURE__ */ J({
   __name: "EditorCanvas",
-  setup(s, { expose: e }) {
-    const n = Q(ee, (R) => R), t = G(), o = H(null), d = H(null), u = H({ x: 0, y: 0, width: 0, height: 0 }), r = H({ width: 0, height: 0 });
-    let i = null, h = null, a = null, c = null;
-    function y() {
-      i && (u.value = i.getImageRect());
-    }
-    ue(() => {
-      if (!d.value || !o.value) return;
-      i = new _t(d.value), h = new ResizeObserver((C) => {
-        for (const E of C) {
-          const { width: F, height: B } = E.contentRect;
-          F > 0 && B > 0 && (r.value = { width: F, height: B }, i == null || i.resize(F, B), i == null || i.requestRender(), requestAnimationFrame(y));
+  setup(o, { expose: e }) {
+    const n = ie(oe, (f) => f), t = ee(), a = H(null), h = H(null), r = H({ x: 0, y: 0, width: 0, height: 0 }), s = H({ width: 0, height: 0 });
+    let i = null, v = null, l = null, c = null;
+    function m() {
+      i && (r.value = i.getImageRect());
+    }
+    ge(() => {
+      if (!h.value || !a.value) return;
+      i = new jt(h.value), v = new ResizeObserver((b) => {
+        for (const R of b) {
+          const { width: T, height: W } = R.contentRect;
+          T > 0 && W > 0 && (s.value = { width: T, height: W }, i == null || i.resize(T, W), i == null || i.requestRender(), requestAnimationFrame(m));
         }
-      }), h.observe(o.value);
-      function R() {
-        a == null || a.removeEventListener("change", c);
-        const C = window.devicePixelRatio || 1;
-        a = window.matchMedia(`(resolution: ${C}dppx)`), c = () => {
-          const { width: E, height: F } = r.value;
-          E > 0 && F > 0 && (i == null || i.resize(E, F), i == null || i.requestRender()), R();
-        }, a.addEventListener("change", c);
+      }), v.observe(a.value);
+      function f() {
+        l == null || l.removeEventListener("change", c);
+        const b = window.devicePixelRatio || 1;
+        l = window.matchMedia(`(resolution: ${b}dppx)`), c = () => {
+          const { width: R, height: T } = s.value;
+          R > 0 && T > 0 && (i == null || i.resize(R, T), i == null || i.requestRender()), f();
+        }, l.addEventListener("change", c);
       }
-      R();
-      const I = o.value.getBoundingClientRect();
-      r.value = { width: I.width, height: I.height }, i.resize(I.width, I.height), i.startRenderLoop(() => t.state), i.afterRender = (C, E, F) => {
-        const B = t.activePlugin.value;
-        B != null && B.onRender && B.onRender({ ctx: C, state: E, imageRect: F });
-      }, t.onRender.value = () => {
-        i == null || i.requestRender(), requestAnimationFrame(y);
-      }, i.activePluginId = t.activePluginId.value, v = t.zoom.value, w = t.zoom.value, $ = 0, m = 0, l = 0, p = 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)), b || (v = R, w = R, R <= 1.005 && ($ = 0, m = 0, l = 0, p = 0, f()));
-    }), ne(() => t.activePluginId.value, (R) => {
-      i && (i.activePluginId = R, i.requestRender(), requestAnimationFrame(y));
-    }), ne(() => t.cropDragPan.value, (R) => {
-      i && (i.viewport.panX = l + R.x, i.viewport.panY = p + R.y, i.requestRender());
+      f();
+      const p = a.value.getBoundingClientRect();
+      s.value = { width: p.width, height: p.height }, i.resize(p.width, p.height), i.startRenderLoop(() => t.state), i.afterRender = (b, R, T) => {
+        const W = t.activePlugin.value;
+        W != null && W.onRender && W.onRender({ ctx: b, state: R, imageRect: T });
+      }, t.onRender.value = (b) => {
+        i == null || i.requestRender(b), requestAnimationFrame(m);
+      }, i.activePluginId = t.activePluginId.value, d = t.zoom.value, x = t.zoom.value, $ = 0, w = 0, u = 0, g = 0, t.options.src && t.load(t.options.src);
+    }), re(() => t.sourceImage.value, (f) => {
+      i && f && (i.setSource(f), i.requestRender(), requestAnimationFrame(() => requestAnimationFrame(m)));
+    }), re(() => t.zoom.value, (f) => {
+      i && (i.viewport.zoom = f, i.requestRender(), requestAnimationFrame(m)), _ || (d = f, x = f, f <= 1.005 && ($ = 0, w = 0, u = 0, g = 0, k()));
+    }), re(() => t.activePluginId.value, (f) => {
+      i && (i.activePluginId = f, i.requestRender(), requestAnimationFrame(m));
+    }), re(() => t.cropDragPan.value, (f) => {
+      i && (i.viewport.panX = u + f.x, i.viewport.panY = g + f.y, i.requestRender());
     }, { deep: !0 });
-    let v = 1, w = 1, b = !1, $ = 0, m = 0, l = 0, p = 0;
-    function f() {
-      i && (i.viewport.panX = l, i.viewport.panY = p, i.requestRender(), requestAnimationFrame(y));
-    }
-    function k(R) {
-      const I = R.deltaY > 0 ? 0.95 : 1.05, C = Math.max(0.1, Math.min(10, v * I)), E = o.value.getBoundingClientRect(), F = R.clientX - E.left - E.width / 2, B = R.clientY - E.top - E.height / 2, oe = C / v;
-      $ = F - (F - $) * oe, m = B - (B - m) * oe, v = C, v <= 1.005 && ($ = 0, m = 0), b || (b = !0, x());
-    }
-    function x() {
-      const R = v - w, I = $ - l, C = m - p;
-      if (Math.abs(R) < 1e-3 && Math.abs(I) < 0.5 && Math.abs(C) < 0.5) {
-        w = v, l = $, p = m, t.setZoom(w), f(), b = !1;
+    let d = 1, x = 1, _ = !1, $ = 0, w = 0, u = 0, g = 0;
+    function k() {
+      i && (i.viewport.panX = u, i.viewport.panY = g, i.requestRender(), requestAnimationFrame(m));
+    }
+    function C(f) {
+      const p = f.deltaY > 0 ? 0.95 : 1.05, b = Math.max(0.1, Math.min(10, d * p)), R = a.value.getBoundingClientRect(), T = f.clientX - R.left - R.width / 2, W = f.clientY - R.top - R.height / 2, B = b / d;
+      $ = T - (T - $) * B, w = W - (W - w) * B, d = b, d <= 1.005 && ($ = 0, w = 0), _ || (_ = !0, P());
+    }
+    function P() {
+      const f = d - x, p = $ - u, b = w - g;
+      if (Math.abs(f) < 1e-3 && Math.abs(p) < 0.5 && Math.abs(b) < 0.5) {
+        x = d, u = $, g = w, t.setZoom(x), k(), _ = !1;
         return;
       }
-      const F = 0.15;
-      w += R * F, l += I * F, p += C * F, t.setZoom(w), f(), requestAnimationFrame(x);
-    }
-    const D = H(!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(), D.value = !0;
-      const I = R.clientX, C = R.clientY, E = $, F = m, B = (Me) => {
-        $ = E + (Me.clientX - I), m = F + (Me.clientY - C), l = $, p = m, f();
-      }, oe = () => {
-        D.value = !1, window.removeEventListener("mousemove", B), window.removeEventListener("mouseup", oe);
+      const T = 0.15;
+      x += f * T, u += p * T, g += b * T, t.setZoom(x), k(), requestAnimationFrame(P);
+    }
+    const V = H(!1), A = j(() => t.zoom.value > 1.005 && t.activePluginId.value !== "crop");
+    function D(f) {
+      if (f.button !== 0 || !A.value || f.target !== a.value && f.target !== h.value) return;
+      f.preventDefault(), V.value = !0;
+      const p = f.clientX, b = f.clientY, R = $, T = w, W = (U) => {
+        $ = R + (U.clientX - p), w = T + (U.clientY - b), u = $, g = w, k();
+      }, B = () => {
+        V.value = !1, window.removeEventListener("mousemove", W), window.removeEventListener("mouseup", B);
       };
-      window.addEventListener("mousemove", B), window.addEventListener("mouseup", oe);
-    }
-    let L = 0, W = 1;
-    function P(R, I) {
-      const C = R.clientX - I.clientX, E = R.clientY - I.clientY;
-      return Math.sqrt(C * C + E * E);
-    }
-    function O(R) {
-      R.touches.length === 2 && (L = P(R.touches[0], R.touches[1]), W = t.zoom.value);
-    }
-    function _(R) {
-      if (R.touches.length === 2) {
-        const I = P(R.touches[0], R.touches[1]);
-        if (L > 0) {
-          const C = I / L;
-          t.setZoom(W * C);
+      window.addEventListener("mousemove", W), window.addEventListener("mouseup", B);
+    }
+    let K = 0, L = 1;
+    function E(f, p) {
+      const b = f.clientX - p.clientX, R = f.clientY - p.clientY;
+      return Math.sqrt(b * b + R * R);
+    }
+    function O(f) {
+      f.touches.length === 2 && (K = E(f.touches[0], f.touches[1]), L = t.zoom.value);
+    }
+    function M(f) {
+      if (f.touches.length === 2) {
+        const p = E(f.touches[0], f.touches[1]);
+        if (K > 0) {
+          const b = p / K;
+          t.setZoom(L * b);
         }
       }
     }
-    function A(R) {
-      L = 0;
+    function F(f) {
+      K = 0;
     }
-    return re(() => {
-      h == null || h.disconnect(), a == null || a.removeEventListener("change", c), a = null, i == null || i.destroy(), i = null, t.onRender.value = null;
+    return he(() => {
+      v == null || v.disconnect(), l == null || l.removeEventListener("change", c), l = null, i == null || i.destroy(), i = null, t.onRender.value = null;
     }), e({
       getRenderer: () => i
-    }), (R, I) => {
-      var C;
-      return M(), z("div", {
-        class: U(["vie-canvas-wrapper", { "vie-canvas-wrapper--grab": T.value, "vie-canvas-wrapper--grabbing": D.value }]),
+    }), (f, p) => {
+      var b;
+      return S(), z("div", {
+        class: N(["vie-canvas-wrapper", { "vie-canvas-wrapper--grab": A.value, "vie-canvas-wrapper--grabbing": V.value }]),
         ref_key: "wrapperRef",
-        ref: o,
-        onWheel: ce(k, ["prevent"]),
-        onMousedown: K,
+        ref: a,
+        onWheel: ve(C, ["prevent"]),
+        onMousedown: D,
         onTouchstartPassive: O,
-        onTouchmove: ce(_, ["prevent"]),
-        onTouchendPassive: A
+        onTouchmove: ve(M, ["prevent"]),
+        onTouchendPassive: F
       }, [
-        g("canvas", {
+        y("canvas", {
           ref_key: "canvasRef",
-          ref: d,
+          ref: h,
           class: "vie-canvas"
         }, null, 512),
-        (C = S(t).activePlugin.value) != null && C.overlay ? (M(), z("div", xt, [
-          (M(), le(be(S(t).activePlugin.value.overlay), {
-            "canvas-rect": u.value,
-            "wrapper-size": r.value
+        (b = I(t).activePlugin.value) != null && b.overlay ? (S(), z("div", Ot, [
+          (S(), pe(Pe(I(t).activePlugin.value.overlay), {
+            "canvas-rect": r.value,
+            "wrapper-size": s.value
           }, null, 8, ["canvas-rect", "wrapper-size"]))
-        ])) : Z("", !0),
-        S(t).loading.value ? (M(), z("div", Ct, [
-          I[0] || (I[0] = g("span", { class: "vie-spinner" }, null, -1)),
-          g("span", null, q(S(n)("loading")), 1)
-        ])) : Z("", !0),
-        S(t).error.value ? (M(), z("div", Mt, q(S(n)("loadError")), 1)) : Z("", !0)
+        ])) : G("", !0),
+        I(t).loading.value ? (S(), z("div", Xt, [
+          p[0] || (p[0] = y("span", { class: "vie-spinner" }, null, -1)),
+          y("span", null, q(I(n)("loading")), 1)
+        ])) : G("", !0),
+        I(t).error.value ? (S(), z("div", qt, q(I(n)("loadError")), 1)) : G("", !0)
       ], 34);
     };
   }
-}), St = {
+}), Yt = {
   class: "vie-tab-bar",
   role: "tablist"
-}, $t = ["aria-selected", "onClick"], Rt = { class: "vie-tab__label" }, ze = /* @__PURE__ */ Y({
+}, Ut = ["aria-selected", "onClick"], Nt = { class: "vie-tab__label" }, He = /* @__PURE__ */ J({
   __name: "EditorTabs",
-  setup(s) {
-    const e = Q(ee, (i) => i), n = G(), t = H([]), o = /* @__PURE__ */ new Set([
+  setup(o) {
+    const e = ie(oe, (i) => i), n = ee(), t = H([]), a = /* @__PURE__ */ new Set([
       "svg",
       "path",
       "circle",
@@ -1316,7 +1399,7 @@ const xt = {
       "use",
       "text",
       "tspan"
-    ]), d = /* @__PURE__ */ new Set([
+    ]), h = /* @__PURE__ */ new Set([
       "viewbox",
       "width",
       "height",
@@ -1350,80 +1433,80 @@ const xt = {
       "stroke-dasharray",
       "stroke-dashoffset"
     ]);
-    function u(i) {
+    function r(i) {
       const c = new DOMParser().parseFromString(i, "image/svg+xml").documentElement;
-      function y(v) {
-        const w = Array.from(v.children);
-        for (const b of w)
-          if (!o.has(b.tagName.toLowerCase()))
-            b.remove();
+      function m(d) {
+        const x = Array.from(d.children);
+        for (const _ of x)
+          if (!a.has(_.tagName.toLowerCase()))
+            _.remove();
           else {
-            for (const $ of Array.from(b.attributes))
-              d.has($.name.toLowerCase()) || b.removeAttribute($.name);
-            y(b);
+            for (const $ of Array.from(_.attributes))
+              h.has($.name.toLowerCase()) || _.removeAttribute($.name);
+            m(_);
           }
       }
-      return y(c), c.outerHTML;
+      return m(c), c.outerHTML;
     }
-    function r() {
-      const i = n.plugins.value.filter((h) => typeof h.icon == "string");
-      t.value.forEach((h, a) => {
-        h && i[a] && (h.innerHTML = u(i[a].icon));
+    function s() {
+      const i = n.plugins.value.filter((v) => typeof v.icon == "string");
+      t.value.forEach((v, l) => {
+        v && i[l] && (v.innerHTML = r(i[l].icon));
       });
     }
-    return ue(r), Ne(r), (i, h) => (M(), z("div", St, [
-      (M(!0), z(X, null, N(S(n).plugins.value, (a) => (M(), z("button", {
-        key: a.id,
+    return ge(s), ft(s), (i, v) => (S(), z("div", Yt, [
+      (S(!0), z(Y, null, Z(I(n).plugins.value, (l) => (S(), z("button", {
+        key: l.id,
         role: "tab",
-        "aria-selected": a.id === S(n).activePluginId.value,
-        class: U([
+        "aria-selected": l.id === I(n).activePluginId.value,
+        class: N([
           "vie-tab",
-          { "vie-tab--active": a.id === S(n).activePluginId.value }
+          { "vie-tab--active": l.id === I(n).activePluginId.value }
         ]),
-        onClick: (c) => S(n).setActivePlugin(a.id)
+        onClick: (c) => I(n).setActivePlugin(l.id)
       }, [
-        typeof a.icon == "string" ? (M(), z("span", {
+        typeof l.icon == "string" ? (S(), z("span", {
           key: 0,
           class: "vie-tab__icon",
           ref_for: !0,
           ref_key: "iconRefs",
           ref: t
-        }, null, 512)) : (M(), le(be(a.icon), {
+        }, null, 512)) : (S(), pe(Pe(l.icon), {
           key: 1,
           class: "vie-tab__icon"
         })),
-        g("span", Rt, q(S(e)(a.labelKey)), 1)
-      ], 10, $t))), 128))
+        y("span", Nt, q(I(e)(l.labelKey)), 1)
+      ], 10, Ut))), 128))
     ]));
   }
-}), zt = {
+}), Zt = {
   key: 0,
   class: "vie-control-panel"
-}, Ie = /* @__PURE__ */ Y({
+}, Ve = /* @__PURE__ */ J({
   __name: "EditorControlPanel",
-  setup(s) {
-    const e = G();
+  setup(o) {
+    const e = ee();
     return (n, t) => {
-      var o;
-      return (o = S(e).activePlugin.value) != null && o.controls ? (M(), z("div", zt, [
-        j(_e, {
+      var a;
+      return (a = I(e).activePlugin.value) != null && a.controls ? (S(), z("div", Zt, [
+        X(Te, {
           name: "vie-panel",
           mode: "out-in"
         }, {
-          default: J(() => [
-            (M(), le(be(S(e).activePlugin.value.controls), {
-              key: S(e).activePluginId.value
+          default: ne(() => [
+            (S(), pe(Pe(I(e).activePlugin.value.controls), {
+              key: I(e).activePluginId.value
             }))
           ]),
           _: 1
         })
-      ])) : Z("", !0);
+      ])) : G("", !0);
     };
   }
-}), It = ["aria-valuemin", "aria-valuemax", "aria-valuenow", "aria-labelledby"], Pt = { class: "vie-slider__track" }, Tt = {
+}), Jt = ["aria-valuemin", "aria-valuemax", "aria-valuenow", "aria-labelledby"], Gt = { class: "vie-slider__track" }, Qt = {
   key: 0,
   class: "vie-slider__tooltip"
-}, Et = { class: "vie-slider__value" }, ve = /* @__PURE__ */ Y({
+}, en = { class: "vie-slider__value" }, fe = /* @__PURE__ */ J({
   __name: "Slider",
   props: {
     modelValue: {},
@@ -1436,174 +1519,179 @@ const xt = {
     ticks: {}
   },
   emits: ["update:modelValue"],
-  setup(s, { emit: e }) {
-    const n = `vie-slider-${Math.random().toString(36).slice(2, 9)}`, t = s, o = e, d = H(null), u = H(!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((m) => (m - t.min) / (t.max - t.min)) : []), a = V(() => Math.max(0, Math.min(100, r.value * 100))), c = V(() => {
-      const m = Math.max(0, Math.min(1, Math.min(i.value, r.value))), l = Math.max(0, Math.min(1, Math.max(i.value, r.value)));
+  setup(o, { emit: e }) {
+    const n = `vie-slider-${Math.random().toString(36).slice(2, 9)}`, t = o, a = e, h = H(null), r = H(!1), s = j(() => (t.modelValue - t.min) / (t.max - t.min)), i = j(() => (t.base - t.min) / (t.max - t.min)), v = j(() => t.ticks ? t.ticks.map((w) => (w - t.min) / (t.max - t.min)) : []), l = j(() => Math.max(0, Math.min(100, s.value * 100))), c = j(() => {
+      const w = Math.max(0, Math.min(1, Math.min(i.value, s.value))), u = Math.max(0, Math.min(1, Math.max(i.value, s.value)));
       return {
-        left: m * 100 + "%",
-        width: (l - m) * 100 + "%"
+        insetInlineStart: w * 100 + "%",
+        insetInlineEnd: (1 - u) * 100 + "%"
       };
-    }), y = V(() => t.format === "percent" ? Math.round(t.modelValue * 100) + "%" : t.modelValue.toFixed(2));
-    function v(m) {
-      if (!d.value) return t.modelValue;
-      const l = d.value.getBoundingClientRect(), p = getComputedStyle(d.value).direction === "rtl";
-      let f;
-      p ? f = (l.right - m.clientX) / l.width : f = (m.clientX - l.left) / l.width, f = Math.max(0, Math.min(1, f));
-      let k = t.min + f * (t.max - t.min);
-      return k = Math.round(k / t.step) * t.step, Math.max(t.min, Math.min(t.max, k));
-    }
-    function w(m) {
-      if (m.button !== 0) return;
-      u.value = !0, o("update:modelValue", v(m));
-      const l = (f) => {
-        o("update:modelValue", v(f));
-      }, p = () => {
-        u.value = !1, window.removeEventListener("pointermove", l), window.removeEventListener("pointerup", p);
+    }), m = j(() => t.format === "percent" ? Math.round(t.modelValue * 100) + "%" : t.modelValue.toFixed(2));
+    function d(w) {
+      if (!h.value) return t.modelValue;
+      const u = h.value.getBoundingClientRect(), g = getComputedStyle(h.value).direction === "rtl";
+      let k;
+      g ? k = (u.right - w.clientX) / u.width : k = (w.clientX - u.left) / u.width, k = Math.max(0, Math.min(1, k));
+      let C = t.min + k * (t.max - t.min);
+      return C = Math.round(C / t.step) * t.step, Math.max(t.min, Math.min(t.max, C));
+    }
+    function x(w) {
+      if (w.button !== 0) return;
+      r.value = !0, a("update:modelValue", d(w));
+      const u = (k) => {
+        a("update:modelValue", d(k));
+      }, g = () => {
+        r.value = !1, window.removeEventListener("pointermove", u), window.removeEventListener("pointerup", g);
       };
-      window.addEventListener("pointermove", l), window.addEventListener("pointerup", p);
+      window.addEventListener("pointermove", u), window.addEventListener("pointerup", g);
     }
-    function b() {
-      o("update:modelValue", t.base);
+    function _() {
+      a("update:modelValue", t.base);
     }
-    function $(m) {
-      let l = t.modelValue;
-      switch (m.key) {
+    function $(w) {
+      let u = t.modelValue;
+      const k = (h.value ? getComputedStyle(h.value).direction === "rtl" : !1) ? -t.step : t.step;
+      switch (w.key) {
         case "ArrowRight":
-        case "ArrowUp":
-          l = Math.min(t.max, t.modelValue + t.step);
+          u = t.modelValue + k;
           break;
         case "ArrowLeft":
+          u = t.modelValue - k;
+          break;
+        case "ArrowUp":
+          u = t.modelValue + t.step;
+          break;
         case "ArrowDown":
-          l = Math.max(t.min, t.modelValue - t.step);
+          u = t.modelValue - t.step;
           break;
         case "Home":
-          l = t.min;
+          u = t.min;
           break;
         case "End":
-          l = t.max;
+          u = t.max;
           break;
         default:
           return;
       }
-      m.preventDefault(), o("update:modelValue", Math.round(l / t.step) * t.step);
+      w.preventDefault(), u = Math.max(t.min, Math.min(t.max, u)), a("update:modelValue", Math.round(u / t.step) * t.step);
     }
-    return (m, l) => (M(), z("div", {
-      class: U(["vie-slider", { "vie-slider--dragging": u.value }])
+    return (w, u) => (S(), z("div", {
+      class: N(["vie-slider", { "vie-slider--dragging": r.value }])
     }, [
-      s.label ? (M(), z("span", {
+      o.label ? (S(), z("span", {
         key: 0,
         class: "vie-slider__label",
         id: n
-      }, q(s.label), 1)) : Z("", !0),
-      g("div", {
+      }, q(o.label), 1)) : G("", !0),
+      y("div", {
         ref_key: "trackRef",
-        ref: d,
+        ref: h,
         class: "vie-slider__track-wrapper",
         role: "slider",
         tabindex: "0",
-        "aria-valuemin": s.min,
-        "aria-valuemax": s.max,
-        "aria-valuenow": s.modelValue,
-        "aria-labelledby": s.label ? n : void 0,
-        onPointerdown: w,
-        onDblclick: b,
+        "aria-valuemin": o.min,
+        "aria-valuemax": o.max,
+        "aria-valuenow": o.modelValue,
+        "aria-labelledby": o.label ? n : void 0,
+        onPointerdown: x,
+        onDblclick: _,
         onKeydown: $
       }, [
-        g("div", Pt, [
-          g("div", {
+        y("div", Gt, [
+          y("div", {
             class: "vie-slider__base-mark",
-            style: se({ left: i.value * 100 + "%" })
+            style: le({ insetInlineStart: i.value * 100 + "%" })
           }, null, 4),
-          (M(!0), z(X, null, N(h.value, (p, f) => (M(), z("div", {
-            key: f,
+          (S(!0), z(Y, null, Z(v.value, (g, k) => (S(), z("div", {
+            key: k,
             class: "vie-slider__tick",
-            style: se({ left: p * 100 + "%" })
+            style: le({ insetInlineStart: g * 100 + "%" })
           }, null, 4))), 128)),
-          g("div", {
+          y("div", {
             class: "vie-slider__fill",
-            style: se(c.value)
+            style: le(c.value)
           }, null, 4),
-          g("div", {
+          y("div", {
             class: "vie-slider__thumb",
-            style: se({ left: a.value + "%" })
+            style: le({ insetInlineStart: l.value + "%" })
           }, [
-            l[0] || (l[0] = g("span", { class: "vie-slider__thumb-dot" }, null, -1)),
-            u.value ? (M(), z("span", Tt, q(y.value), 1)) : Z("", !0)
+            u[0] || (u[0] = y("span", { class: "vie-slider__thumb-dot" }, null, -1)),
+            r.value ? (S(), z("span", Qt, q(m.value), 1)) : G("", !0)
           ], 4)
         ])
-      ], 40, It),
-      g("span", Et, q(y.value), 1)
+      ], 40, Jt),
+      y("span", en, q(m.value), 1)
     ], 2));
   }
-}), Wt = ["aria-expanded"], Kt = {
+}), tn = ["aria-expanded"], nn = {
   key: 0,
   class: "vie-dropdown__menu",
   role: "listbox"
-}, Dt = ["aria-selected", "onClick"], Lt = /* @__PURE__ */ Y({
+}, on = ["aria-selected", "onClick"], an = /* @__PURE__ */ J({
   __name: "Dropdown",
   props: {
     modelValue: {},
     options: {}
   },
   emits: ["update:modelValue"],
-  setup(s, { emit: e }) {
-    const n = s, t = e, o = H(!1), d = H(null), u = V(() => {
-      const h = n.options.find((a) => a.value === n.modelValue);
-      return h ? h.label : "";
+  setup(o, { emit: e }) {
+    const n = o, t = e, a = H(!1), h = H(null), r = j(() => {
+      const v = n.options.find((l) => l.value === n.modelValue);
+      return v ? v.label : "";
     });
-    function r(h) {
-      t("update:modelValue", h), o.value = !1;
+    function s(v) {
+      t("update:modelValue", v), a.value = !1;
     }
-    function i(h) {
-      d.value && !d.value.contains(h.target) && (o.value = !1);
+    function i(v) {
+      h.value && !h.value.contains(v.target) && (a.value = !1);
     }
-    return ne(o, (h) => {
-      h ? document.addEventListener("click", i) : document.removeEventListener("click", i);
-    }), re(() => {
+    return re(a, (v) => {
+      v ? document.addEventListener("click", i) : document.removeEventListener("click", i);
+    }), he(() => {
       document.removeEventListener("click", i);
-    }), (h, a) => (M(), z("div", {
+    }), (v, l) => (S(), z("div", {
       class: "vie-dropdown",
       ref_key: "dropdownRef",
-      ref: d
+      ref: h
     }, [
-      g("button", {
+      y("button", {
         class: "vie-dropdown__trigger",
         role: "combobox",
-        "aria-expanded": o.value,
+        "aria-expanded": a.value,
         "aria-haspopup": "listbox",
-        onClick: a[0] || (a[0] = (c) => o.value = !o.value)
+        onClick: l[0] || (l[0] = (c) => a.value = !a.value)
       }, [
-        g("span", null, q(u.value), 1),
-        a[1] || (a[1] = g("svg", {
+        y("span", null, q(r.value), 1),
+        l[1] || (l[1] = y("svg", {
           class: "vie-dropdown__chevron",
           viewBox: "0 0 24 24",
           fill: "none",
           stroke: "currentColor",
           "stroke-width": "2"
         }, [
-          g("path", { d: "M6 9l6 6 6-6" })
+          y("path", { d: "M6 9l6 6 6-6" })
         ], -1))
-      ], 8, Wt),
-      j(_e, { name: "vie-dropdown" }, {
-        default: J(() => [
-          o.value ? (M(), z("div", Kt, [
-            (M(!0), z(X, null, N(s.options, (c) => (M(), z("button", {
+      ], 8, tn),
+      X(Te, { name: "vie-dropdown" }, {
+        default: ne(() => [
+          a.value ? (S(), z("div", nn, [
+            (S(!0), z(Y, null, Z(o.options, (c) => (S(), z("button", {
               key: c.value,
               role: "option",
-              "aria-selected": c.value === s.modelValue,
-              class: U([
+              "aria-selected": c.value === o.modelValue,
+              class: N([
                 "vie-dropdown__item",
-                { "vie-dropdown__item--active": c.value === s.modelValue }
+                { "vie-dropdown__item--active": c.value === o.modelValue }
               ]),
-              onClick: (y) => r(c.value)
-            }, q(c.label), 11, Dt))), 128))
-          ])) : Z("", !0)
+              onClick: (m) => s(c.value)
+            }, q(c.label), 11, on))), 128))
+          ])) : G("", !0)
         ]),
         _: 1
       })
     ], 512));
   }
-}), At = [
+}), sn = [
   { labelKey: "custom", value: null },
   { labelKey: "square", value: 1 },
   { labelKey: "landscape", value: 4 / 3 },
@@ -1611,113 +1699,113 @@ const xt = {
   { labelKey: "portrait", value: 3 / 4 },
   { labelKey: "portrait", value: 9 / 16 }
 ];
-function Ft(s, e) {
-  if (s.value === null) return e("custom");
-  if (s.value === 1) return e("square") + " 1:1";
+function ln(o, e) {
+  if (o.value === null) return e("custom");
+  if (o.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"
-  }[s.value] || `${s.value.toFixed(2)}`, o = s.value > 1 ? "landscape" : "portrait";
-  return `${e(o)} ${t}`;
+  }[o.value] || `${o.value.toFixed(2)}`, a = o.value > 1 ? "landscape" : "portrait";
+  return `${e(a)} ${t}`;
 }
-const Ht = { class: "vie-crop-controls" }, Vt = { class: "vie-crop-controls__section" }, Ot = { class: "vie-crop-controls__section" }, jt = { class: "vie-crop-controls__section" }, Bt = { class: "vie-crop-controls__rotation" }, qt = /* @__PURE__ */ Y({
+const rn = { class: "vie-crop-controls" }, cn = { class: "vie-crop-controls__section" }, un = { class: "vie-crop-controls__section" }, dn = { class: "vie-crop-controls__section" }, hn = { class: "vie-crop-controls__rotation" }, vn = /* @__PURE__ */ J({
   __name: "CropControls",
-  setup(s) {
-    const e = Q(ee, (m) => m), n = G();
+  setup(o) {
+    const e = ie(oe, (w) => w), n = ee();
     let t = !1;
-    ne(() => n.sourceImage.value, (m) => {
-      if (!m || t) return;
-      const l = n.state.crop;
-      if (!(l.x === 0 && l.y === 0 && l.width === 1 && l.height === 1 && l.aspectRatio === null && l.rotation === 0 && !l.flipX && !l.flipY)) return;
+    re(() => n.sourceImage.value, (w) => {
+      if (!w || t) return;
+      const u = n.state.crop;
+      if (!(u.x === 0 && u.y === 0 && u.width === 1 && u.height === 1 && u.aspectRatio === null && u.rotation === 0 && !u.flipX && !u.flipY)) return;
       t = !0;
-      const f = m.naturalWidth / m.naturalHeight;
-      if (f >= 1) {
-        const k = 1 / f;
-        n.updateState((x) => {
-          x.crop.x = (1 - k) / 2, x.crop.y = 0, x.crop.width = k, x.crop.height = 1, x.crop.aspectRatio = 1;
+      const k = w.naturalWidth / w.naturalHeight;
+      if (k >= 1) {
+        const C = 1 / k;
+        n.updateState((P) => {
+          P.crop.x = (1 - C) / 2, P.crop.y = 0, P.crop.width = C, P.crop.height = 1, P.crop.aspectRatio = 1;
         });
       } else {
-        const k = f;
-        n.updateState((x) => {
-          x.crop.x = 0, x.crop.y = (1 - k) / 2, x.crop.width = 1, x.crop.height = k, x.crop.aspectRatio = 1;
+        const C = k;
+        n.updateState((P) => {
+          P.crop.x = 0, P.crop.y = (1 - C) / 2, P.crop.width = 1, P.crop.height = C, P.crop.aspectRatio = 1;
         });
       }
     }, { immediate: !0 });
-    const o = V(
-      () => At.map((m) => ({
-        label: Ft(m, e),
-        value: m.value == null ? "custom" : m.value
+    const a = j(
+      () => sn.map((w) => ({
+        label: ln(w, e),
+        value: w.value == null ? "custom" : w.value
       }))
-    ), d = V(() => {
-      const m = n.state.crop.aspectRatio;
-      return m === null ? "custom" : m;
+    ), h = j(() => {
+      const w = n.state.crop.aspectRatio;
+      return w === null ? "custom" : w;
     });
-    function u(m) {
-      const l = m === "custom" ? null : Number(m);
-      n.updateState((p) => {
-        if (p.crop.aspectRatio = l, l !== null) {
-          const f = p.crop.width, k = p.crop.height;
-          if (f / k > l) {
-            const D = k * l;
-            p.crop.x += (f - D) / 2, p.crop.width = D;
+    function r(w) {
+      const u = w === "custom" ? null : Number(w);
+      n.updateState((g) => {
+        if (g.crop.aspectRatio = u, u !== null) {
+          const k = g.crop.width, C = g.crop.height;
+          if (k / C > u) {
+            const V = C * u;
+            g.crop.x += (k - V) / 2, g.crop.width = V;
           } else {
-            const D = f / l;
-            p.crop.y += (k - D) / 2, p.crop.height = D;
+            const V = k / u;
+            g.crop.y += (C - V) / 2, g.crop.height = V;
           }
         }
       });
     }
-    const r = H(0), i = n.state.crop.rotation, h = Math.round(i / (Math.PI / 2));
-    r.value = (h % 4 + 4) % 4;
-    function a() {
-      return n.state.crop.rotation - r.value * (Math.PI / 2);
+    const s = H(0), i = n.state.crop.rotation, v = Math.round(i / (Math.PI / 2));
+    s.value = (v % 4 + 4) % 4;
+    function l() {
+      return n.state.crop.rotation - s.value * (Math.PI / 2);
     }
-    const c = V(() => a() * 180 / Math.PI);
-    function y(m) {
-      n.updateState((l) => {
-        l.crop.rotation = r.value * (Math.PI / 2) + m * Math.PI / 180;
+    const c = j(() => l() * 180 / Math.PI);
+    function m(w) {
+      n.updateState((u) => {
+        u.crop.rotation = s.value * (Math.PI / 2) + w * Math.PI / 180;
       });
     }
-    function v() {
-      const m = a();
-      r.value = ((r.value - 1) % 4 + 4) % 4, n.updateState((l) => {
-        l.crop.rotation = r.value * (Math.PI / 2) + m;
+    function d() {
+      const w = l();
+      s.value = ((s.value - 1) % 4 + 4) % 4, n.updateState((u) => {
+        u.crop.rotation = s.value * (Math.PI / 2) + w;
       });
     }
-    function w() {
-      const m = a();
-      r.value = (r.value + 1) % 4, n.updateState((l) => {
-        l.crop.rotation = r.value * (Math.PI / 2) + m;
+    function x() {
+      const w = l();
+      s.value = (s.value + 1) % 4, n.updateState((u) => {
+        u.crop.rotation = s.value * (Math.PI / 2) + w;
       });
     }
-    function b() {
-      n.updateState((m) => {
-        m.crop.flipX = !m.crop.flipX;
+    function _() {
+      n.updateState((w) => {
+        w.crop.flipX = !w.crop.flipX;
       });
     }
     function $() {
-      n.updateState((m) => {
-        m.crop.flipY = !m.crop.flipY;
+      n.updateState((w) => {
+        w.crop.flipY = !w.crop.flipY;
       });
     }
-    return (m, l) => (M(), z("div", Ht, [
-      g("div", Vt, [
-        j(Lt, {
-          "model-value": d.value,
-          options: o.value,
-          "onUpdate:modelValue": u
+    return (w, u) => (S(), z("div", rn, [
+      y("div", cn, [
+        X(an, {
+          "model-value": h.value,
+          options: a.value,
+          "onUpdate:modelValue": r
         }, null, 8, ["model-value", "options"])
       ]),
-      l[4] || (l[4] = g("div", { class: "vie-crop-controls__divider" }, null, -1)),
-      g("div", Ot, [
-        j(te, {
-          title: S(e)("rotateLeft"),
-          onClick: v
+      u[4] || (u[4] = y("div", { class: "vie-crop-controls__divider" }, null, -1)),
+      y("div", un, [
+        X(se, {
+          title: I(e)("rotateLeft"),
+          onClick: d
         }, {
-          default: J(() => [...l[0] || (l[0] = [
-            g("svg", {
+          default: ne(() => [...u[0] || (u[0] = [
+            y("svg", {
               viewBox: "0 0 24 24",
               fill: "none",
               stroke: "currentColor",
@@ -1725,18 +1813,18 @@ const Ht = { class: "vie-crop-controls" }, Vt = { class: "vie-crop-controls__sec
               "stroke-linecap": "round",
               "stroke-linejoin": "round"
             }, [
-              g("path", { d: "M2.5 2v6h6" }),
-              g("path", { d: "M2.5 8C5 4 9 2 13 2a9 9 0 1 1-6 15.7" })
+              y("path", { d: "M2.5 2v6h6" }),
+              y("path", { d: "M2.5 8C5 4 9 2 13 2a9 9 0 1 1-6 15.7" })
             ], -1)
           ])]),
           _: 1
         }, 8, ["title"]),
-        j(te, {
-          title: S(e)("rotateRight"),
-          onClick: w
+        X(se, {
+          title: I(e)("rotateRight"),
+          onClick: x
         }, {
-          default: J(() => [...l[1] || (l[1] = [
-            g("svg", {
+          default: ne(() => [...u[1] || (u[1] = [
+            y("svg", {
               viewBox: "0 0 24 24",
               fill: "none",
               stroke: "currentColor",
@@ -1744,58 +1832,58 @@ const Ht = { class: "vie-crop-controls" }, Vt = { class: "vie-crop-controls__sec
               "stroke-linecap": "round",
               "stroke-linejoin": "round"
             }, [
-              g("path", { d: "M21.5 2v6h-6" }),
-              g("path", { d: "M21.5 8C19 4 15 2 11 2a9 9 0 1 0 6 15.7" })
+              y("path", { d: "M21.5 2v6h-6" }),
+              y("path", { d: "M21.5 8C19 4 15 2 11 2a9 9 0 1 0 6 15.7" })
             ], -1)
           ])]),
           _: 1
         }, 8, ["title"])
       ]),
-      l[5] || (l[5] = g("div", { class: "vie-crop-controls__divider" }, null, -1)),
-      g("div", jt, [
-        j(te, {
-          title: S(e)("flipHorizontal"),
-          onClick: b
+      u[5] || (u[5] = y("div", { class: "vie-crop-controls__divider" }, null, -1)),
+      y("div", dn, [
+        X(se, {
+          title: I(e)("flipHorizontal"),
+          onClick: _
         }, {
-          default: J(() => [...l[2] || (l[2] = [
-            g("svg", {
+          default: ne(() => [...u[2] || (u[2] = [
+            y("svg", {
               viewBox: "0 0 24 24",
               fill: "none",
               stroke: "currentColor",
               "stroke-width": "2",
               "stroke-linecap": "round"
             }, [
-              g("path", { d: "M12 3v18" }),
-              g("path", { d: "M16 7l4 5-4 5" }),
-              g("path", { d: "M8 7L4 12l4 5" })
+              y("path", { d: "M12 3v18" }),
+              y("path", { d: "M16 7l4 5-4 5" }),
+              y("path", { d: "M8 7L4 12l4 5" })
             ], -1)
           ])]),
           _: 1
         }, 8, ["title"]),
-        j(te, {
-          title: S(e)("flipVertical"),
+        X(se, {
+          title: I(e)("flipVertical"),
           onClick: $
         }, {
-          default: J(() => [...l[3] || (l[3] = [
-            g("svg", {
+          default: ne(() => [...u[3] || (u[3] = [
+            y("svg", {
               viewBox: "0 0 24 24",
               fill: "none",
               stroke: "currentColor",
               "stroke-width": "2",
               "stroke-linecap": "round"
             }, [
-              g("path", { d: "M3 12h18" }),
-              g("path", { d: "M7 8L12 4l5 4" }),
-              g("path", { d: "M7 16l5 4 5-4" })
+              y("path", { d: "M3 12h18" }),
+              y("path", { d: "M7 8L12 4l5 4" }),
+              y("path", { d: "M7 16l5 4 5-4" })
             ], -1)
           ])]),
           _: 1
         }, 8, ["title"])
       ]),
-      l[6] || (l[6] = g("div", { class: "vie-crop-controls__divider" }, null, -1)),
-      g("div", Bt, [
-        j(ve, {
-          label: S(e)("rotation"),
+      u[6] || (u[6] = y("div", { class: "vie-crop-controls__divider" }, null, -1)),
+      y("div", hn, [
+        X(fe, {
+          label: I(e)("rotation"),
           "model-value": c.value,
           min: -45,
           max: 45,
@@ -1803,262 +1891,262 @@ const Ht = { class: "vie-crop-controls" }, Vt = { class: "vie-crop-controls__sec
           base: 0,
           format: "number",
           ticks: [-45, -30, -15, 0, 15, 30, 45],
-          "onUpdate:modelValue": y
+          "onUpdate:modelValue": m
         }, 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 = {
+}), fn = ["viewBox", "width", "height"], pn = ["width", "height"], mn = ["x", "y", "width", "height"], gn = ["width", "height", "mask"], yn = ["x", "y", "width", "height"], wn = {
   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 = {
+}, kn = ["x1", "y1", "x2", "y2"], bn = ["x1", "y1", "x2", "y2"], xn = ["x", "y", "width", "height"], _n = ["x", "y", "data-handle"], Cn = ["x", "y", "width", "height", "data-handle"], Mn = ["x", "y"], Sn = {
   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({
+}, de = 12, $n = 8, Rn = 32, zn = /* @__PURE__ */ J({
   __name: "CropOverlay",
   props: {
     canvasRect: {},
     wrapperSize: {}
   },
-  setup(s) {
-    const e = `vie-crop-mask-${Math.random().toString(36).slice(2, 9)}`, n = s, t = G(), o = Q(ee, (p) => p), d = V(() => n.wrapperSize.width || 800), u = V(() => n.wrapperSize.height || 600), r = V(() => {
-      const p = n.canvasRect, f = t.state.crop;
+  setup(o) {
+    const e = `vie-crop-mask-${Math.random().toString(36).slice(2, 9)}`, n = o, t = ee(), a = ie(oe, (g) => g), h = j(() => n.wrapperSize.width || 800), r = j(() => n.wrapperSize.height || 600), s = j(() => {
+      const g = n.canvasRect, k = t.state.crop;
       return {
-        x: p.x + f.x * p.width,
-        y: p.y + f.y * p.height,
-        width: f.width * p.width,
-        height: f.height * p.height
+        x: g.x + k.x * g.width,
+        y: g.y + k.y * g.height,
+        width: k.width * g.width,
+        height: k.height * g.height
       };
-    }), i = V(() => {
-      const p = r.value, k = ae / 2;
+    }), i = j(() => {
+      const g = s.value, C = de / 2;
       return [
-        { id: "nw", x: p.x - k, y: p.y - k },
-        { id: "ne", x: p.x + p.width - k, y: p.y - k },
-        { id: "sw", x: p.x - k, y: p.y + p.height - k },
-        { id: "se", x: p.x + p.width - k, y: p.y + p.height - k }
+        { id: "nw", x: g.x - C, y: g.y - C },
+        { id: "ne", x: g.x + g.width - C, y: g.y - C },
+        { id: "sw", x: g.x - C, y: g.y + g.height - C },
+        { id: "se", x: g.x + g.width - C, y: g.y + g.height - C }
       ];
-    }), h = V(() => {
-      const p = r.value, f = Math.min(rn, p.width * 0.3, p.height * 0.3), k = sn;
+    }), v = j(() => {
+      const g = s.value, k = Math.min(Rn, g.width * 0.3, g.height * 0.3), C = $n;
       return [
-        { id: "n", x: p.x + (p.width - f) / 2, y: p.y - k / 2, w: f, h: k },
-        { id: "s", x: p.x + (p.width - f) / 2, y: p.y + p.height - k / 2, w: f, h: k },
-        { id: "w", x: p.x - k / 2, y: p.y + (p.height - f) / 2, w: k, h: f },
-        { id: "e", x: p.x + p.width - k / 2, y: p.y + (p.height - f) / 2, w: k, h: f }
+        { id: "n", x: g.x + (g.width - k) / 2, y: g.y - C / 2, w: k, h: C },
+        { id: "s", x: g.x + (g.width - k) / 2, y: g.y + g.height - C / 2, w: k, h: C },
+        { id: "w", x: g.x - C / 2, y: g.y + (g.height - k) / 2, w: C, h: k },
+        { id: "e", x: g.x + g.width - C / 2, y: g.y + (g.height - k) / 2, w: C, h: k }
       ];
-    }), a = H(null), c = H({ x: 0, y: 0 }), y = H({ x: 0, y: 0, width: 0, height: 0 }), v = H(!1);
-    let w = null;
-    function b(p) {
-      const f = p.target, k = f.getAttribute("data-handle");
-      if (!k) return;
-      p.preventDefault();
-      const x = f.ownerSVGElement || f;
-      x.setPointerCapture(p.pointerId), a.value = k, c.value = { x: p.clientX, y: p.clientY }, y.value = { ...t.state.crop };
-      const D = (L) => {
-        if (!a.value) return;
-        const W = n.canvasRect;
-        if (W.width === 0 || W.height === 0) return;
-        const P = (L.clientX - c.value.x) / W.width, O = (L.clientY - c.value.y) / W.height, _ = y.value, A = t.state.crop, R = A.aspectRatio;
-        switch (a.value) {
+    }), l = H(null), c = H({ x: 0, y: 0 }), m = H({ x: 0, y: 0, width: 0, height: 0 }), d = H(!1);
+    let x = null;
+    function _(g) {
+      const k = g.target, C = k.getAttribute("data-handle");
+      if (!C) return;
+      g.preventDefault();
+      const P = k.ownerSVGElement || k;
+      P.setPointerCapture(g.pointerId), l.value = C, c.value = { x: g.clientX, y: g.clientY }, m.value = { ...t.state.crop };
+      const V = (K) => {
+        if (!l.value) return;
+        const L = n.canvasRect;
+        if (L.width === 0 || L.height === 0) return;
+        const E = (K.clientX - c.value.x) / L.width, O = (K.clientY - c.value.y) / L.height, M = m.value, F = t.state.crop, f = F.aspectRatio;
+        switch (l.value) {
           case "move": {
-            const I = L.clientX - c.value.x, C = L.clientY - c.value.y, E = l(_.x - I / W.width, 0, 1 - A.width), F = l(_.y - C / W.height, 0, 1 - A.height), B = (_.x - E) * W.width, oe = (_.y - F) * W.height;
-            t.cropDragPan.value = { x: B, y: oe };
+            const p = K.clientX - c.value.x, b = K.clientY - c.value.y, R = u(M.x - p / L.width, 0, 1 - F.width), T = u(M.y - b / L.height, 0, 1 - F.height), W = (M.x - R) * L.width, B = (M.y - T) * L.height;
+            t.cropDragPan.value = { x: W, y: B };
             break;
           }
           case "nw": {
-            let I = l(_.x + P), C = l(_.y + O), E = _.x + _.width - I, F = _.y + _.height - C;
-            R && (F = E / R, C = _.y + _.height - F, C < 0 && (C = 0, F = _.y + _.height, E = F * R, I = _.x + _.width - E)), E > 0.02 && F > 0.02 && I >= 0 && C >= 0 && (A.x = I, A.y = C, A.width = E, A.height = F);
+            let p = u(M.x + E), b = u(M.y + O), R = M.x + M.width - p, T = M.y + M.height - b;
+            f && (T = R / f, b = M.y + M.height - T, b < 0 && (b = 0, T = M.y + M.height, R = T * f, p = M.x + M.width - R)), R > 0.02 && T > 0.02 && p >= 0 && b >= 0 && (F.x = p, F.y = b, F.width = R, F.height = T);
             break;
           }
           case "ne": {
-            let I = l(_.width + P, 0.02, 1 - _.x), C = _.y + O, E = _.y + _.height - C;
-            R && (E = I / R, C = _.y + _.height - E, C < 0 && (C = 0, E = _.y + _.height, I = E * R)), I > 0.02 && E > 0.02 && C >= 0 && _.x + I <= 1 && (A.y = C, A.width = I, A.height = E);
+            let p = u(M.width + E, 0.02, 1 - M.x), b = M.y + O, R = M.y + M.height - b;
+            f && (R = p / f, b = M.y + M.height - R, b < 0 && (b = 0, R = M.y + M.height, p = R * f)), p > 0.02 && R > 0.02 && b >= 0 && M.x + p <= 1 && (F.y = b, F.width = p, F.height = R);
             break;
           }
           case "sw": {
-            let I = l(_.x + P), C = _.x + _.width - I, E = l(_.height + O, 0.02, 1 - _.y);
-            R && (C = E * R, I = _.x + _.width - C, I < 0 && (I = 0, C = _.x + _.width, E = C / R)), C > 0.02 && E > 0.02 && I >= 0 && _.y + E <= 1 && (A.x = I, A.width = C, A.height = E);
+            let p = u(M.x + E), b = M.x + M.width - p, R = u(M.height + O, 0.02, 1 - M.y);
+            f && (b = R * f, p = M.x + M.width - b, p < 0 && (p = 0, b = M.x + M.width, R = b / f)), b > 0.02 && R > 0.02 && p >= 0 && M.y + R <= 1 && (F.x = p, F.width = b, F.height = R);
             break;
           }
           case "se": {
-            let I = l(_.width + P, 0.02, 1 - _.x), C = l(_.height + O, 0.02, 1 - _.y);
-            R && (C = I / R, _.y + C > 1 && (C = 1 - _.y, I = C * R)), I > 0.02 && C > 0.02 && _.x + I <= 1 && _.y + C <= 1 && (A.width = I, A.height = C);
+            let p = u(M.width + E, 0.02, 1 - M.x), b = u(M.height + O, 0.02, 1 - M.y);
+            f && (b = p / f, M.y + b > 1 && (b = 1 - M.y, p = b * f)), p > 0.02 && b > 0.02 && M.x + p <= 1 && M.y + b <= 1 && (F.width = p, F.height = b);
             break;
           }
           case "n": {
-            let I = l(_.y + O), C = _.y + _.height - I;
-            if (R) {
-              const E = C * R, F = E - _.width, B = l(_.x - F / 2, 0, 1 - E);
-              E > 0.02 && B >= 0 && B + E <= 1 && (A.x = B, A.width = E);
+            let p = u(M.y + O), b = M.y + M.height - p;
+            if (f) {
+              const R = b * f, T = R - M.width, W = u(M.x - T / 2, 0, 1 - R);
+              R > 0.02 && W >= 0 && W + R <= 1 && (F.x = W, F.width = R);
             }
-            C > 0.02 && I >= 0 && (A.y = I, A.height = C);
+            b > 0.02 && p >= 0 && (F.y = p, F.height = b);
             break;
           }
           case "s": {
-            let I = l(_.height + O, 0.02, 1 - _.y);
-            if (R) {
-              const C = I * R, E = C - _.width, F = l(_.x - E / 2, 0, 1 - C);
-              C > 0.02 && F >= 0 && F + C <= 1 && (A.x = F, A.width = C);
+            let p = u(M.height + O, 0.02, 1 - M.y);
+            if (f) {
+              const b = p * f, R = b - M.width, T = u(M.x - R / 2, 0, 1 - b);
+              b > 0.02 && T >= 0 && T + b <= 1 && (F.x = T, F.width = b);
             }
-            I > 0.02 && _.y + I <= 1 && (A.height = I);
+            p > 0.02 && M.y + p <= 1 && (F.height = p);
             break;
           }
           case "w": {
-            let I = l(_.x + P), C = _.x + _.width - I;
-            if (R) {
-              const E = C / R, F = E - _.height, B = l(_.y - F / 2, 0, 1 - E);
-              E > 0.02 && B >= 0 && B + E <= 1 && (A.y = B, A.height = E);
+            let p = u(M.x + E), b = M.x + M.width - p;
+            if (f) {
+              const R = b / f, T = R - M.height, W = u(M.y - T / 2, 0, 1 - R);
+              R > 0.02 && W >= 0 && W + R <= 1 && (F.y = W, F.height = R);
             }
-            C > 0.02 && I >= 0 && (A.x = I, A.width = C);
+            b > 0.02 && p >= 0 && (F.x = p, F.width = b);
             break;
           }
           case "e": {
-            let I = l(_.width + P, 0.02, 1 - _.x);
-            if (R) {
-              const C = I / R, E = C - _.height, F = l(_.y - E / 2, 0, 1 - C);
-              C > 0.02 && F >= 0 && F + C <= 1 && (A.y = F, A.height = C);
+            let p = u(M.width + E, 0.02, 1 - M.x);
+            if (f) {
+              const b = p / f, R = b - M.height, T = u(M.y - R / 2, 0, 1 - b);
+              b > 0.02 && T >= 0 && T + b <= 1 && (F.y = T, F.height = b);
             }
-            I > 0.02 && _.x + I <= 1 && (A.width = I);
+            p > 0.02 && M.x + p <= 1 && (F.width = p);
             break;
           }
         }
         t.requestRender();
-      }, T = () => {
-        window.removeEventListener("pointermove", D), window.removeEventListener("pointerup", K), w = null;
-      }, K = (L) => {
-        if (a.value === "move") {
-          const W = L.clientX - c.value.x, P = L.clientY - c.value.y, O = n.canvasRect, _ = y.value, A = t.state.crop;
-          A.x = l(_.x - W / O.width, 0, 1 - A.width), A.y = l(_.y - P / O.height, 0, 1 - A.height), t.cropDragPan.value = { x: 0, y: 0 };
+      }, A = () => {
+        window.removeEventListener("pointermove", V), window.removeEventListener("pointerup", D), x = null;
+      }, D = (K) => {
+        if (l.value === "move") {
+          const L = K.clientX - c.value.x, E = K.clientY - c.value.y, O = n.canvasRect, M = m.value, F = t.state.crop;
+          F.x = u(M.x - L / O.width, 0, 1 - F.width), F.y = u(M.y - E / O.height, 0, 1 - F.height), t.cropDragPan.value = { x: 0, y: 0 };
         }
-        a.value && (a.value !== "move" && (v.value = !0), t.updateState(() => {
-        })), a.value = null;
+        l.value && (l.value !== "move" && (d.value = !0), t.updateState(() => {
+        })), l.value = null;
         try {
-          x.releasePointerCapture(L.pointerId);
+          P.releasePointerCapture(K.pointerId);
         } catch {
         }
-        T();
+        A();
       };
-      window.addEventListener("pointermove", D), window.addEventListener("pointerup", K), w = T;
+      window.addEventListener("pointermove", V), window.addEventListener("pointerup", D), x = A;
     }
-    re(() => {
-      w == null || w(), t.cropDragPan.value = { x: 0, y: 0 };
+    he(() => {
+      x == null || x(), t.cropDragPan.value = { x: 0, y: 0 };
     });
-    const $ = V(() => {
-      const p = t.state.crop;
-      return v.value && !a.value && r.value.width > 60 && r.value.height > 60 && (p.x > 1e-3 || p.y > 1e-3 || p.width < 0.999 || p.height < 0.999);
+    const $ = j(() => {
+      const g = t.state.crop;
+      return d.value && !l.value && s.value.width > 60 && s.value.height > 60 && (g.x > 1e-3 || g.y > 1e-3 || g.width < 0.999 || g.height < 0.999);
     });
-    ne(() => t.state.crop.aspectRatio, () => {
-      v.value = !1;
+    re(() => t.state.crop.aspectRatio, () => {
+      d.value = !1;
     });
-    function m() {
-      const p = t.plugins.value, f = p.findIndex((k) => k.id === t.activePluginId.value);
-      f >= 0 && f < p.length - 1 && t.setActivePlugin(p[f + 1].id);
+    function w() {
+      const g = t.plugins.value, k = g.findIndex((C) => C.id === t.activePluginId.value);
+      k >= 0 && k < g.length - 1 && t.setActivePlugin(g[k + 1].id);
     }
-    function l(p, f = 0, k = 1) {
-      return Math.max(f, Math.min(k, p));
+    function u(g, k = 0, C = 1) {
+      return Math.max(k, Math.min(C, g));
     }
-    return (p, f) => (M(), z("svg", {
-      class: U(["vie-crop-overlay", { "vie-crop-overlay--dragging": a.value }]),
+    return (g, k) => (S(), z("svg", {
+      class: N(["vie-crop-overlay", { "vie-crop-overlay--dragging": l.value }]),
       role: "application",
       "aria-label": "Crop region",
-      viewBox: `0 0 ${d.value} ${u.value}`,
-      width: d.value,
-      height: u.value,
+      viewBox: `0 0 ${h.value} ${r.value}`,
+      width: h.value,
+      height: r.value,
       style: { "touch-action": "none" },
-      onPointerdown: b
+      onPointerdown: _
     }, [
-      g("defs", null, [
-        g("mask", { id: e }, [
-          g("rect", {
+      y("defs", null, [
+        y("mask", { id: e }, [
+          y("rect", {
             x: "0",
             y: "0",
-            width: d.value,
-            height: u.value,
+            width: h.value,
+            height: r.value,
             fill: "white"
-          }, null, 8, Yt),
-          g("rect", {
-            x: r.value.x,
-            y: r.value.y,
-            width: Math.max(0, r.value.width),
-            height: Math.max(0, r.value.height),
+          }, null, 8, pn),
+          y("rect", {
+            x: s.value.x,
+            y: s.value.y,
+            width: Math.max(0, s.value.width),
+            height: Math.max(0, s.value.height),
             fill: "black"
-          }, null, 8, Ut)
+          }, null, 8, mn)
         ])
       ]),
-      g("rect", {
+      y("rect", {
         x: "0",
         y: "0",
-        width: d.value,
-        height: u.value,
+        width: h.value,
+        height: r.value,
         class: "vie-crop-mask",
         mask: `url(#${e})`
-      }, null, 8, Nt),
-      g("rect", {
-        x: r.value.x,
-        y: r.value.y,
-        width: Math.max(0, r.value.width),
-        height: Math.max(0, r.value.height),
+      }, null, 8, gn),
+      y("rect", {
+        x: s.value.x,
+        y: s.value.y,
+        width: Math.max(0, s.value.width),
+        height: Math.max(0, s.value.height),
         class: "vie-crop-border"
-      }, null, 8, Zt),
-      r.value.width > 10 && r.value.height > 10 ? (M(), z("g", Jt, [
-        (M(), z(X, null, N(2, (k) => g("line", {
-          key: "h" + k,
-          x1: r.value.x,
-          y1: r.value.y + r.value.height * (k / 3),
-          x2: r.value.x + r.value.width,
-          y2: r.value.y + r.value.height * (k / 3)
-        }, null, 8, Gt)), 64)),
-        (M(), z(X, null, N(2, (k) => g("line", {
-          key: "v" + k,
-          x1: r.value.x + r.value.width * (k / 3),
-          y1: r.value.y,
-          x2: r.value.x + r.value.width * (k / 3),
-          y2: r.value.y + r.value.height
-        }, null, 8, Qt)), 64))
-      ])) : Z("", !0),
-      g("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),
+      }, null, 8, yn),
+      s.value.width > 10 && s.value.height > 10 ? (S(), z("g", wn, [
+        (S(), z(Y, null, Z(2, (C) => y("line", {
+          key: "h" + C,
+          x1: s.value.x,
+          y1: s.value.y + s.value.height * (C / 3),
+          x2: s.value.x + s.value.width,
+          y2: s.value.y + s.value.height * (C / 3)
+        }, null, 8, kn)), 64)),
+        (S(), z(Y, null, Z(2, (C) => y("line", {
+          key: "v" + C,
+          x1: s.value.x + s.value.width * (C / 3),
+          y1: s.value.y,
+          x2: s.value.x + s.value.width * (C / 3),
+          y2: s.value.y + s.value.height
+        }, null, 8, bn)), 64))
+      ])) : G("", !0),
+      y("rect", {
+        x: s.value.x + de,
+        y: s.value.y + de,
+        width: Math.max(0, s.value.width - de * 2),
+        height: Math.max(0, s.value.height - de * 2),
         class: "vie-crop-move",
         "data-handle": "move"
-      }, null, 8, en),
-      (M(!0), z(X, null, N(i.value, (k) => (M(), z("rect", {
-        key: k.id,
-        x: k.x,
-        y: k.y,
-        width: ae,
-        height: ae,
-        class: U(["vie-crop-handle", `vie-crop-handle--${k.id}`]),
-        "data-handle": k.id,
+      }, null, 8, xn),
+      (S(!0), z(Y, null, Z(i.value, (C) => (S(), z("rect", {
+        key: C.id,
+        x: C.x,
+        y: C.y,
+        width: de,
+        height: de,
+        class: N(["vie-crop-handle", `vie-crop-handle--${C.id}`]),
+        "data-handle": C.id,
         rx: "2"
-      }, null, 10, tn))), 128)),
-      (M(!0), z(X, null, N(h.value, (k) => (M(), z("rect", {
-        key: k.id,
-        x: k.x,
-        y: k.y,
-        width: k.w,
-        height: k.h,
-        class: U(["vie-crop-handle", `vie-crop-handle--${k.id}`]),
-        "data-handle": k.id,
+      }, null, 10, _n))), 128)),
+      (S(!0), z(Y, null, Z(v.value, (C) => (S(), z("rect", {
+        key: C.id,
+        x: C.x,
+        y: C.y,
+        width: C.w,
+        height: C.h,
+        class: N(["vie-crop-handle", `vie-crop-handle--${C.id}`]),
+        "data-handle": C.id,
         rx: "2"
-      }, null, 10, nn))), 128)),
-      $.value ? (M(), z("foreignObject", {
+      }, null, 10, Cn))), 128)),
+      $.value ? (S(), z("foreignObject", {
         key: 1,
-        x: r.value.x + (r.value.width - 100) / 2,
-        y: r.value.y + r.value.height - 14,
+        x: s.value.x + (s.value.width - 100) / 2,
+        y: s.value.y + s.value.height - 14,
         width: "100",
         height: "36",
         style: { "pointer-events": "none", overflow: "visible" }
       }, [
-        g("div", an, [
-          g("button", {
+        y("div", Sn, [
+          y("button", {
             class: "vie-crop-confirm-pill",
-            onPointerdown: f[0] || (f[0] = ce(() => {
+            onPointerdown: k[0] || (k[0] = ve(() => {
             }, ["stop"])),
-            onClick: ce(m, ["stop"])
+            onClick: ve(w, ["stop"])
           }, [
-            f[1] || (f[1] = g("svg", {
+            k[1] || (k[1] = y("svg", {
               viewBox: "0 0 24 24",
               width: "14",
               height: "14",
@@ -2068,30 +2156,30 @@ const Ht = { class: "vie-crop-controls" }, Vt = { class: "vie-crop-controls__sec
               "stroke-linecap": "round",
               "stroke-linejoin": "round"
             }, [
-              g("polyline", { points: "20 6 9 17 4 12" })
+              y("polyline", { points: "20 6 9 17 4 12" })
             ], -1)),
-            g("span", null, q(S(o)("cropApply")), 1)
+            y("span", null, q(I(a)("cropApply")), 1)
           ], 32)
         ])
-      ], 8, on)) : Z("", !0)
-    ], 42, Xt));
+      ], 8, Mn)) : G("", !0)
+    ], 42, fn));
   }
-}), cn = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+}), In = `<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() {
+function Pn() {
   return {
     id: "crop",
-    icon: cn,
+    icon: In,
     labelKey: "crop",
-    controls: qt,
-    overlay: ln
+    controls: vn,
+    overlay: zn
   };
 }
-const dn = [
+const Tn = [
   { 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 },
@@ -2100,30 +2188,30 @@ const dn = [
   { 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({
+], En = { class: "vie-finetune-controls" }, Wn = /* @__PURE__ */ J({
   __name: "FinetuneControls",
-  setup(s) {
-    const e = G(), n = Q(ee, (o) => o);
-    function t(o, d) {
-      e.updateState((u) => {
-        u.finetune[o] = d;
+  setup(o) {
+    const e = ee(), n = ie(oe, (a) => a);
+    function t(a, h) {
+      e.updateState((r) => {
+        r.finetune[a] = h;
       });
     }
-    return (o, d) => (M(), z("div", hn, [
-      (M(!0), z(X, null, N(S(dn), (u) => (M(), le(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)
+    return (a, h) => (S(), z("div", En, [
+      (S(!0), z(Y, null, Z(I(Tn), (r) => (S(), pe(fe, {
+        key: r.key,
+        modelValue: I(e).state.finetune[r.key],
+        min: r.min,
+        max: r.max,
+        step: r.step,
+        base: r.base,
+        label: I(n)(r.labelKey),
+        format: r.key === "gamma" ? "number" : "percent",
+        "onUpdate:modelValue": (s) => t(r.key, s)
       }, 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">
+}), An = `<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" />
@@ -2134,15 +2222,15 @@ const dn = [
   <line x1="9" y1="8" x2="15" y2="8" />
   <line x1="17" y1="16" x2="23" y2="16" />
 </svg>`;
-function fn() {
+function Fn() {
   return {
     id: "finetune",
-    icon: pn,
+    icon: An,
     labelKey: "finetune",
-    controls: vn
+    controls: Wn
   };
 }
-const pe = [
+const be = [
   {
     id: "chrome",
     labelKey: "chrome",
@@ -2481,122 +2569,122 @@ const pe = [
       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({
+], Dn = { class: "vie-filter-controls" }, Ln = { class: "vie-filter-strip" }, Kn = { class: "vie-filter-thumb__label" }, Hn = ["onClick"], Vn = { class: "vie-filter-thumb__label" }, Bn = /* @__PURE__ */ J({
   __name: "FilterControls",
-  setup(s) {
-    const e = G(), n = Q(ee, (w) => w), t = H(null), o = /* @__PURE__ */ new Map(), d = /* @__PURE__ */ new Set();
-    let u = null;
-    function r(w, b) {
-      b && (o.set(w, b), u == null || u.observe(b));
-    }
-    function i(w) {
-      e.updateState((b) => {
-        w ? (b.filter.id = w.id, b.filter.matrix = [...w.matrix]) : (b.filter.id = null, b.filter.matrix = void 0);
+  setup(o) {
+    const e = ee(), n = ie(oe, (x) => x), t = H(null), a = /* @__PURE__ */ new Map(), h = /* @__PURE__ */ new Set();
+    let r = null;
+    function s(x, _) {
+      _ && (a.set(x, _), r == null || r.observe(_));
+    }
+    function i(x) {
+      e.updateState((_) => {
+        x ? (_.filter.id = x.id, _.filter.matrix = [...x.matrix]) : (_.filter.id = null, _.filter.matrix = void 0);
       });
     }
-    function h(w) {
-      e.updateState((b) => {
-        b.filter.intensity = w;
+    function v(x) {
+      e.updateState((_) => {
+        _.filter.intensity = x;
       });
     }
-    function a(w, b) {
+    function l(x, _) {
       const $ = e.sourceImage.value;
       if (!$) return;
-      const m = 96, l = w.getContext("2d");
-      l.drawImage($, 0, 0, m, m);
-      const p = l.getImageData(0, 0, m, m);
-      Ce(p, b.matrix), l.putImageData(p, 0, 0), d.add(b.id);
+      const w = 96, u = x.getContext("2d");
+      u.drawImage($, 0, 0, w, w);
+      const g = u.getImageData(0, 0, w, w);
+      Ae(g, _.matrix), u.putImageData(g, 0, 0), h.add(_.id);
     }
     function c() {
-      const w = e.sourceImage.value;
-      if (!w || !t.value) return;
-      t.value.getContext("2d").drawImage(w, 0, 0, 96, 96);
-    }
-    function y() {
-      u = new IntersectionObserver((w) => {
-        for (const b of w) {
-          if (!b.isIntersecting) continue;
-          const $ = b.target, m = pe.find((l) => o.get(l.id) === $);
-          m && !d.has(m.id) && a($, m);
+      const x = e.sourceImage.value;
+      if (!x || !t.value) return;
+      t.value.getContext("2d").drawImage(x, 0, 0, 96, 96);
+    }
+    function m() {
+      r = new IntersectionObserver((x) => {
+        for (const _ of x) {
+          if (!_.isIntersecting) continue;
+          const $ = _.target, w = be.find((u) => a.get(u.id) === $);
+          w && !h.has(w.id) && l($, w);
         }
       }, { threshold: 0.1 });
-      for (const w of o.values())
-        u.observe(w);
-    }
-    function v() {
-      d.clear(), c();
-      for (const w of pe) {
-        const b = o.get(w.id);
-        b && (u == null || u.unobserve(b));
+      for (const x of a.values())
+        r.observe(x);
+    }
+    function d() {
+      h.clear(), c();
+      for (const x of be) {
+        const _ = a.get(x.id);
+        _ && (r == null || r.unobserve(_));
       }
-      for (const w of o.values())
-        u == null || u.observe(w);
+      for (const x of a.values())
+        r == null || r.observe(x);
     }
-    return ne(() => e.sourceImage.value, () => {
-      setTimeout(v, 50);
-    }), ue(() => {
-      y(), setTimeout(() => {
+    return re(() => e.sourceImage.value, () => {
+      setTimeout(d, 50);
+    }), ge(() => {
+      m(), setTimeout(() => {
         c();
       }, 50);
-    }), Ze(() => {
-      u == null || u.disconnect(), u = null;
-    }), (w, b) => (M(), z("div", mn, [
-      g("div", gn, [
-        g("button", {
-          class: U(["vie-filter-thumb", { "vie-filter-thumb--active": !S(e).state.filter.id }]),
-          onClick: b[0] || (b[0] = ($) => i(null))
+    }), pt(() => {
+      r == null || r.disconnect(), r = null;
+    }), (x, _) => (S(), z("div", Dn, [
+      y("div", Ln, [
+        y("button", {
+          class: N(["vie-filter-thumb", { "vie-filter-thumb--active": !I(e).state.filter.id }]),
+          onClick: _[0] || (_[0] = ($) => i(null))
         }, [
-          g("canvas", {
+          y("canvas", {
             ref_key: "originalThumbRef",
             ref: t,
             width: "96",
             height: "96",
             class: "vie-filter-thumb__canvas"
           }, null, 512),
-          g("span", yn, q(S(n)("original")), 1)
+          y("span", Kn, q(I(n)("original")), 1)
         ], 2),
-        (M(!0), z(X, null, N(S(pe), ($) => (M(), z("button", {
+        (S(!0), z(Y, null, Z(I(be), ($) => (S(), z("button", {
           key: $.id,
-          class: U(["vie-filter-thumb", { "vie-filter-thumb--active": S(e).state.filter.id === $.id }]),
-          onClick: (m) => i($)
+          class: N(["vie-filter-thumb", { "vie-filter-thumb--active": I(e).state.filter.id === $.id }]),
+          onClick: (w) => i($)
         }, [
-          g("canvas", {
+          y("canvas", {
             ref_for: !0,
-            ref: (m) => r($.id, m),
+            ref: (w) => s($.id, w),
             width: "96",
             height: "96",
             class: "vie-filter-thumb__canvas"
           }, null, 512),
-          g("span", kn, q(S(n)($.labelKey) || $.labelKey), 1)
-        ], 10, wn))), 128))
+          y("span", Vn, q(I(n)($.labelKey) || $.labelKey), 1)
+        ], 10, Hn))), 128))
       ]),
-      S(e).state.filter.id ? (M(), le(ve, {
+      I(e).state.filter.id ? (S(), pe(fe, {
         key: 0,
-        modelValue: S(e).state.filter.intensity,
+        modelValue: I(e).state.filter.intensity,
         min: 0,
         max: 1,
         step: 0.01,
         base: 1,
-        label: S(n)("intensity"),
+        label: I(n)("intensity"),
         format: "percent",
-        "onUpdate:modelValue": h
-      }, null, 8, ["modelValue", "label"])) : Z("", !0)
+        "onUpdate:modelValue": v
+      }, null, 8, ["modelValue", "label"])) : G("", !0)
     ]));
   }
-}), _n = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+}), jn = `<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() {
+function On() {
   return {
     id: "filter",
-    icon: _n,
+    icon: jn,
     labelKey: "filter",
-    controls: bn
+    controls: Bn
   };
 }
-const fe = [
+const xe = [
   {
     id: "emoji",
     labelKey: "emoji",
@@ -2649,25 +2737,25 @@ const fe = [
       "♦️"
     ]
   }
-], Pe = /* @__PURE__ */ new WeakMap();
-function Oe(s) {
-  let e = Pe.get(s);
-  return e || (e = H(null), Pe.set(s, e)), e;
+], Be = /* @__PURE__ */ new WeakMap();
+function ot(o) {
+  let e = Be.get(o);
+  return e || (e = H(null), Be.set(o, e)), e;
 }
-const Cn = { class: "vie-sticker-controls" }, Mn = { class: "vie-sticker-tabs" }, Sn = ["onClick"], $n = { class: "vie-sticker-grid" }, Rn = ["onClick"], zn = /* @__PURE__ */ Y({
+const Xn = { class: "vie-sticker-controls" }, qn = { class: "vie-sticker-tabs" }, Yn = ["onClick"], Un = { class: "vie-sticker-grid" }, Nn = ["onClick"], Zn = /* @__PURE__ */ J({
   __name: "StickerControls",
-  setup(s) {
+  setup(o) {
     var i;
-    const e = G(), n = Q(ee, (h) => h), t = Oe(e.state), o = H(((i = fe[0]) == null ? void 0 : i.id) || "emoji"), d = V(() => {
-      const h = fe.find((a) => a.id === o.value);
-      return (h == null ? void 0 : h.stickers) || [];
+    const e = ee(), n = ie(oe, (v) => v), t = ot(e.state), a = H(((i = xe[0]) == null ? void 0 : i.id) || "emoji"), h = j(() => {
+      const v = xe.find((l) => l.id === a.value);
+      return (v == null ? void 0 : v.stickers) || [];
     });
-    function u(h) {
-      const a = `sticker-${Date.now()}-${Math.random().toString(36).slice(2, 6)}`, c = e.state.stickers.length % 5 * 0.03;
-      e.updateState((y) => {
-        y.stickers.push({
-          id: a,
-          src: h,
+    function r(v) {
+      const l = `sticker-${Date.now()}-${Math.random().toString(36).slice(2, 6)}`, c = e.state.stickers.length % 5 * 0.03;
+      e.updateState((m) => {
+        m.stickers.push({
+          id: l,
+          src: v,
           x: 0.35 + c,
           y: 0.35 + c,
           width: 0.15,
@@ -2677,230 +2765,230 @@ const Cn = { class: "vie-sticker-controls" }, Mn = { class: "vie-sticker-tabs" }
           flipY: !1,
           opacity: 1
         });
-      }), t.value = a;
+      }), t.value = l;
     }
-    function r() {
+    function s() {
       if (!t.value) return;
-      const h = t.value;
-      e.updateState((a) => {
-        const c = a.stickers.findIndex((y) => y.id === h);
-        c >= 0 && a.stickers.splice(c, 1);
+      const v = t.value;
+      e.updateState((l) => {
+        const c = l.stickers.findIndex((m) => m.id === v);
+        c >= 0 && l.stickers.splice(c, 1);
       }), t.value = null;
     }
-    return (h, a) => (M(), z("div", Cn, [
-      g("div", Mn, [
-        (M(!0), z(X, null, N(S(fe), (c) => (M(), z("button", {
+    return (v, l) => (S(), z("div", Xn, [
+      y("div", qn, [
+        (S(!0), z(Y, null, Z(I(xe), (c) => (S(), z("button", {
           key: c.id,
-          class: U(["vie-sticker-tab", { "vie-sticker-tab--active": o.value === c.id }]),
-          onClick: (y) => o.value = c.id
-        }, q(S(n)(c.labelKey) || c.labelKey), 11, Sn))), 128)),
-        S(t) ? (M(), z("button", {
+          class: N(["vie-sticker-tab", { "vie-sticker-tab--active": a.value === c.id }]),
+          onClick: (m) => a.value = c.id
+        }, q(I(n)(c.labelKey) || c.labelKey), 11, Yn))), 128)),
+        I(t) ? (S(), z("button", {
           key: 0,
           class: "vie-sticker-tab vie-sticker-tab--delete",
-          onClick: r
-        }, q(S(n)("delete") || "Delete"), 1)) : Z("", !0)
+          onClick: s
+        }, q(I(n)("delete") || "Delete"), 1)) : G("", !0)
       ]),
-      g("div", $n, [
-        (M(!0), z(X, null, N(d.value, (c) => (M(), z("button", {
+      y("div", Un, [
+        (S(!0), z(Y, null, Z(h.value, (c) => (S(), z("button", {
           key: c,
           class: "vie-sticker-item",
-          onClick: (y) => u(c)
-        }, q(c), 9, Rn))), 128))
+          onClick: (m) => r(c)
+        }, q(c), 9, Nn))), 128))
       ])
     ]));
   }
-}), In = ["viewBox", "width", "height"], Pn = ["x", "y", "width", "height", "data-sticker-id"], Tn = ["x", "y", "width", "height"], En = ["x", "y", "data-handle"], Wn = ["x1", "y1", "x2", "y2"], Kn = ["cx", "cy"], me = 10, Te = 20, Ee = 6, Dn = /* @__PURE__ */ Y({
+}), Jn = ["viewBox", "width", "height"], Gn = ["x", "y", "width", "height", "data-sticker-id"], Qn = ["x", "y", "width", "height"], ei = ["x", "y", "data-handle"], ti = ["x1", "y1", "x2", "y2"], ni = ["cx", "cy"], _e = 10, je = 20, Oe = 6, ii = /* @__PURE__ */ J({
   __name: "StickerOverlay",
   props: {
     canvasRect: {},
     wrapperSize: {}
   },
-  setup(s) {
-    const e = s, n = G(), t = H(null), o = Oe(n.state);
-    re(() => {
+  setup(o) {
+    const e = o, n = ee(), t = H(null), a = ot(n.state);
+    he(() => {
       i.value && (n.updateState(() => {
-      }), i.value = null, h.value = null), window.removeEventListener("pointermove", w), window.removeEventListener("pointerup", b);
+      }), i.value = null, v.value = null), window.removeEventListener("pointermove", x), window.removeEventListener("pointerup", _);
     });
-    const d = V(() => {
-      const l = e.canvasRect;
-      return n.state.stickers.map((p) => ({
-        id: p.id,
-        x: l.x + p.x * l.width,
-        y: l.y + p.y * l.height,
-        w: p.width * l.width,
-        h: p.height * l.height
+    const h = j(() => {
+      const u = e.canvasRect;
+      return n.state.stickers.map((g) => ({
+        id: g.id,
+        x: u.x + g.x * u.width,
+        y: u.y + g.y * u.height,
+        w: g.width * u.width,
+        h: g.height * u.height
       }));
-    }), u = V(() => o.value && d.value.find((l) => l.id === o.value) || null), r = V(() => {
-      if (!u.value) return [];
-      const l = u.value, f = me / 2;
+    }), r = j(() => a.value && h.value.find((u) => u.id === a.value) || null), s = j(() => {
+      if (!r.value) return [];
+      const u = r.value, k = _e / 2;
       return [
-        { id: "nw", x: l.x - f, y: l.y - f },
-        { id: "ne", x: l.x + l.w - f, y: l.y - f },
-        { id: "sw", x: l.x - f, y: l.y + l.h - f },
-        { id: "se", x: l.x + l.w - f, y: l.y + l.h - f }
+        { id: "nw", x: u.x - k, y: u.y - k },
+        { id: "ne", x: u.x + u.w - k, y: u.y - k },
+        { id: "sw", x: u.x - k, y: u.y + u.h - k },
+        { id: "se", x: u.x + u.w - k, y: u.y + u.h - k }
       ];
-    }), i = H(null), h = H(null), a = H({ x: 0, y: 0 }), c = H({ x: 0, y: 0, width: 0, height: 0, rotation: 0 });
-    function y(l) {
-      var x;
-      const p = l.target, f = p.getAttribute("data-handle");
-      if (f === "rotate" && o.value) {
-        l.preventDefault(), v(l, "rotate", f);
+    }), i = H(null), v = H(null), l = H({ x: 0, y: 0 }), c = H({ x: 0, y: 0, width: 0, height: 0, rotation: 0 });
+    function m(u) {
+      var P;
+      const g = u.target, k = g.getAttribute("data-handle");
+      if (k === "rotate" && a.value) {
+        u.preventDefault(), d(u, "rotate", k);
         return;
       }
-      if (f && ["nw", "ne", "sw", "se"].includes(f) && o.value) {
-        l.preventDefault(), v(l, "resize", f);
+      if (k && ["nw", "ne", "sw", "se"].includes(k) && a.value) {
+        u.preventDefault(), d(u, "resize", k);
         return;
       }
-      const k = p.getAttribute("data-sticker-id");
-      if (k) {
-        l.preventDefault(), o.value = k, v(l, "move", null), (x = t.value) == null || x.focus();
+      const C = g.getAttribute("data-sticker-id");
+      if (C) {
+        u.preventDefault(), a.value = C, d(u, "move", null), (P = t.value) == null || P.focus();
         return;
       }
-      o.value = null;
-    }
-    function v(l, p, f) {
-      i.value = p, h.value = f, a.value = { x: l.clientX, y: l.clientY };
-      const k = n.state.stickers.find((x) => x.id === o.value);
-      k && (c.value = {
-        x: k.x,
-        y: k.y,
-        width: k.width,
-        height: k.height,
-        rotation: k.rotation
-      }), window.addEventListener("pointermove", w), window.addEventListener("pointerup", b);
-    }
-    function w(l) {
-      if (!i.value || !o.value) return;
-      const p = e.canvasRect;
-      if (p.width === 0 || p.height === 0) return;
-      const f = (l.clientX - a.value.x) / p.width, k = (l.clientY - a.value.y) / p.height, x = c.value, D = n.state.stickers.find((T) => T.id === o.value);
-      if (D) {
+      a.value = null;
+    }
+    function d(u, g, k) {
+      i.value = g, v.value = k, l.value = { x: u.clientX, y: u.clientY };
+      const C = n.state.stickers.find((P) => P.id === a.value);
+      C && (c.value = {
+        x: C.x,
+        y: C.y,
+        width: C.width,
+        height: C.height,
+        rotation: C.rotation
+      }), window.addEventListener("pointermove", x), window.addEventListener("pointerup", _);
+    }
+    function x(u) {
+      if (!i.value || !a.value) return;
+      const g = e.canvasRect;
+      if (g.width === 0 || g.height === 0) return;
+      const k = (u.clientX - l.value.x) / g.width, C = (u.clientY - l.value.y) / g.height, P = c.value, V = n.state.stickers.find((A) => A.id === a.value);
+      if (V) {
         switch (i.value) {
           case "move": {
-            D.x = m(x.x + f, 0, 1 - D.width), D.y = m(x.y + k, 0, 1 - D.height);
+            V.x = w(P.x + k, 0, 1 - V.width), V.y = w(P.y + C, 0, 1 - V.height);
             break;
           }
           case "resize": {
-            switch (h.value) {
+            switch (v.value) {
               case "se": {
-                D.width = m(x.width + f, 0.03, 1 - x.x), D.height = m(x.height + k, 0.03, 1 - x.y);
+                V.width = w(P.width + k, 0.03, 1 - P.x), V.height = w(P.height + C, 0.03, 1 - P.y);
                 break;
               }
               case "ne": {
-                const K = m(x.width + f, 0.03, 1 - x.x), L = m(x.height - k, 0.03, x.y + x.height), W = x.y + x.height - L;
-                D.width = K, D.height = L, D.y = W;
+                const D = w(P.width + k, 0.03, 1 - P.x), K = w(P.height - C, 0.03, P.y + P.height), L = P.y + P.height - K;
+                V.width = D, V.height = K, V.y = L;
                 break;
               }
               case "sw": {
-                const K = m(x.width - f, 0.03, x.x + x.width), L = m(x.height + k, 0.03, 1 - x.y), W = x.x + x.width - K;
-                D.width = K, D.height = L, D.x = W;
+                const D = w(P.width - k, 0.03, P.x + P.width), K = w(P.height + C, 0.03, 1 - P.y), L = P.x + P.width - D;
+                V.width = D, V.height = K, V.x = L;
                 break;
               }
               case "nw": {
-                const K = m(x.width - f, 0.03, x.x + x.width), L = m(x.height - k, 0.03, x.y + x.height), W = x.x + x.width - K, P = x.y + x.height - L;
-                D.width = K, D.height = L, D.x = W, D.y = P;
+                const D = w(P.width - k, 0.03, P.x + P.width), K = w(P.height - C, 0.03, P.y + P.height), L = P.x + P.width - D, E = P.y + P.height - K;
+                V.width = D, V.height = K, V.x = L, V.y = E;
                 break;
               }
             }
             break;
           }
           case "rotate": {
-            const T = p.x + D.x * p.width + D.width * p.width / 2, K = p.y + D.y * p.height + D.height * p.height / 2, L = Math.atan2(l.clientX - T, -(l.clientY - K));
-            D.rotation = L;
+            const A = g.x + V.x * g.width + V.width * g.width / 2, D = g.y + V.y * g.height + V.height * g.height / 2, K = Math.atan2(u.clientX - A, -(u.clientY - D));
+            V.rotation = K;
             break;
           }
         }
         n.requestRender();
       }
     }
-    function b() {
+    function _() {
       i.value && n.updateState(() => {
-      }), i.value = null, h.value = null, window.removeEventListener("pointermove", w), window.removeEventListener("pointerup", b);
-    }
-    function $(l) {
-      if ((l.key === "Delete" || l.key === "Backspace") && o.value) {
-        l.preventDefault();
-        const p = o.value;
-        n.updateState((f) => {
-          const k = f.stickers.findIndex((x) => x.id === p);
-          k >= 0 && f.stickers.splice(k, 1);
-        }), o.value = null;
+      }), i.value = null, v.value = null, window.removeEventListener("pointermove", x), window.removeEventListener("pointerup", _);
+    }
+    function $(u) {
+      if ((u.key === "Delete" || u.key === "Backspace") && a.value) {
+        u.preventDefault();
+        const g = a.value;
+        n.updateState((k) => {
+          const C = k.stickers.findIndex((P) => P.id === g);
+          C >= 0 && k.stickers.splice(C, 1);
+        }), a.value = null;
       }
     }
-    function m(l, p, f) {
-      return Math.max(p, Math.min(f, l));
+    function w(u, g, k) {
+      return Math.max(g, Math.min(k, u));
     }
-    return (l, p) => (M(), z("svg", {
+    return (u, g) => (S(), z("svg", {
       ref_key: "svgRef",
       ref: t,
       class: "vie-sticker-overlay",
-      viewBox: `0 0 ${s.wrapperSize.width} ${s.wrapperSize.height}`,
-      width: s.wrapperSize.width,
-      height: s.wrapperSize.height,
-      onPointerdown: y,
+      viewBox: `0 0 ${o.wrapperSize.width} ${o.wrapperSize.height}`,
+      width: o.wrapperSize.width,
+      height: o.wrapperSize.height,
+      onPointerdown: m,
       onKeydown: $,
       tabindex: "0"
     }, [
-      (M(!0), z(X, null, N(d.value, (f) => (M(), z("rect", {
-        key: f.id,
-        x: f.x,
-        y: f.y,
-        width: f.w,
-        height: f.h,
+      (S(!0), z(Y, null, Z(h.value, (k) => (S(), z("rect", {
+        key: k.id,
+        x: k.x,
+        y: k.y,
+        width: k.w,
+        height: k.h,
         fill: "transparent",
         class: "vie-sticker-hitarea",
-        "data-sticker-id": f.id
-      }, null, 8, Pn))), 128)),
-      u.value ? (M(), z(X, { key: 0 }, [
-        g("rect", {
-          x: u.value.x,
-          y: u.value.y,
-          width: u.value.w,
-          height: u.value.h,
+        "data-sticker-id": k.id
+      }, null, 8, Gn))), 128)),
+      r.value ? (S(), z(Y, { key: 0 }, [
+        y("rect", {
+          x: r.value.x,
+          y: r.value.y,
+          width: r.value.w,
+          height: r.value.h,
           class: "vie-sticker-selection"
-        }, null, 8, Tn),
-        (M(!0), z(X, null, N(r.value, (f) => (M(), z("rect", {
-          key: f.id,
-          x: f.x,
-          y: f.y,
-          width: me,
-          height: me,
+        }, null, 8, Qn),
+        (S(!0), z(Y, null, Z(s.value, (k) => (S(), z("rect", {
+          key: k.id,
+          x: k.x,
+          y: k.y,
+          width: _e,
+          height: _e,
           class: "vie-sticker-handle",
-          "data-handle": f.id
-        }, null, 8, En))), 128)),
-        g("line", {
-          x1: u.value.x + u.value.w / 2,
-          y1: u.value.y - Te,
-          x2: u.value.x + u.value.w / 2,
-          y2: u.value.y,
+          "data-handle": k.id
+        }, null, 8, ei))), 128)),
+        y("line", {
+          x1: r.value.x + r.value.w / 2,
+          y1: r.value.y - je,
+          x2: r.value.x + r.value.w / 2,
+          y2: r.value.y,
           class: "vie-sticker-rotate-line"
-        }, null, 8, Wn),
-        g("circle", {
-          cx: u.value.x + u.value.w / 2,
-          cy: u.value.y - Te - Ee,
-          r: Ee,
+        }, null, 8, ti),
+        y("circle", {
+          cx: r.value.x + r.value.w / 2,
+          cy: r.value.y - je - Oe,
+          r: Oe,
           class: "vie-sticker-rotate-handle",
           "data-handle": "rotate"
-        }, null, 8, Kn)
-      ], 64)) : Z("", !0)
-    ], 40, In));
+        }, null, 8, ni)
+      ], 64)) : G("", !0)
+    ], 40, Jn));
   }
-}), Ln = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+}), oi = `<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 An() {
+function ai() {
   return {
     id: "sticker",
-    icon: Ln,
+    icon: oi,
     labelKey: "sticker",
-    controls: zn,
-    overlay: Dn
+    controls: Zn,
+    overlay: ii
   };
 }
-const Fn = [
+const si = [
   { id: "solidSharp", labelKey: "solidSharp" },
   { id: "solidRound", labelKey: "solidRound" },
   { id: "lineSingle", labelKey: "lineSingle" },
@@ -2910,7 +2998,7 @@ const Fn = [
   { id: "edgeSeparate", labelKey: "edgeSeparate" },
   { id: "edgeCross", labelKey: "edgeCross" },
   { id: "edgeOverlap", labelKey: "edgeOverlap" }
-], Hn = [
+], li = [
   [1, 1, 1, 1],
   // White
   [0, 0, 0, 1],
@@ -2923,89 +3011,89 @@ const Fn = [
   // Navy
   [0.8, 0.2, 0.2, 1]
   // Red
-], Vn = { class: "vie-frame-controls" }, On = { class: "vie-frame-strip" }, jn = { 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({
+], ri = { class: "vie-frame-controls" }, ci = { class: "vie-frame-strip" }, ui = { class: "vie-frame-style__label" }, di = ["onClick"], hi = { class: "vie-frame-style__label" }, vi = { class: "vie-frame-colors" }, fi = { class: "vie-frame-colors__label" }, pi = { class: "vie-frame-colors__swatches" }, mi = ["onClick"], gi = /* @__PURE__ */ J({
   __name: "FrameControls",
-  setup(s) {
-    const e = G(), n = Q(ee, (i) => i);
+  setup(o) {
+    const e = ee(), n = ie(oe, (i) => i);
     function t(i) {
-      e.updateState((h) => {
-        h.frame.style = i;
+      e.updateState((v) => {
+        v.frame.style = i;
       });
     }
-    function o(i) {
-      e.updateState((h) => {
-        h.frame.size = i;
+    function a(i) {
+      e.updateState((v) => {
+        v.frame.size = i;
       });
     }
-    function d(i) {
-      e.updateState((h) => {
-        h.frame.color = [...i];
+    function h(i) {
+      e.updateState((v) => {
+        v.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) {
+      const v = e.state.frame.color;
+      return v[0] === i[0] && v[1] === i[1] && v[2] === i[2] && v[3] === i[3];
+    }
+    function s(i) {
       return `rgba(${Math.round(i[0] * 255)}, ${Math.round(i[1] * 255)}, ${Math.round(i[2] * 255)}, ${i[3]})`;
     }
-    return (i, h) => (M(), z("div", Vn, [
-      g("div", On, [
-        g("button", {
-          class: U(["vie-frame-style", { "vie-frame-style--active": !S(e).state.frame.style }]),
-          onClick: h[0] || (h[0] = (a) => t(null))
+    return (i, v) => (S(), z("div", ri, [
+      y("div", ci, [
+        y("button", {
+          class: N(["vie-frame-style", { "vie-frame-style--active": !I(e).state.frame.style }]),
+          onClick: v[0] || (v[0] = (l) => t(null))
         }, [
-          g("span", jn, q(S(n)("none")), 1)
+          y("span", ui, q(I(n)("none")), 1)
         ], 2),
-        (M(!0), z(X, null, N(S(Fn), (a) => (M(), z("button", {
-          key: a.id,
-          class: U(["vie-frame-style", { "vie-frame-style--active": S(e).state.frame.style === a.id }]),
-          onClick: (c) => t(a.id)
+        (S(!0), z(Y, null, Z(I(si), (l) => (S(), z("button", {
+          key: l.id,
+          class: N(["vie-frame-style", { "vie-frame-style--active": I(e).state.frame.style === l.id }]),
+          onClick: (c) => t(l.id)
         }, [
-          g("span", qn, q(S(n)(a.labelKey)), 1)
-        ], 10, Bn))), 128))
+          y("span", hi, q(I(n)(l.labelKey)), 1)
+        ], 10, di))), 128))
       ]),
-      S(e).state.frame.style ? (M(), z(X, { key: 0 }, [
-        j(ve, {
-          modelValue: S(e).state.frame.size,
+      I(e).state.frame.style ? (S(), z(Y, { key: 0 }, [
+        X(fe, {
+          modelValue: I(e).state.frame.size,
           min: 5e-3,
           max: 0.15,
           step: 5e-3,
           base: 0.025,
-          label: S(n)("frameSize"),
+          label: I(n)("frameSize"),
           format: "percent",
-          "onUpdate:modelValue": o
+          "onUpdate:modelValue": a
         }, null, 8, ["modelValue", "label"]),
-        g("div", Xn, [
-          g("span", Yn, q(S(n)("frameColor")), 1),
-          g("div", Un, [
-            (M(!0), z(X, null, N(S(Hn), (a, c) => (M(), z("button", {
+        y("div", vi, [
+          y("span", fi, q(I(n)("frameColor")), 1),
+          y("div", pi, [
+            (S(!0), z(Y, null, Z(I(li), (l, c) => (S(), z("button", {
               key: c,
-              class: U(["vie-frame-color-swatch", { "vie-frame-color-swatch--active": u(a) }]),
-              style: se({ backgroundColor: r(a) }),
-              onClick: (y) => d(a)
-            }, null, 14, Nn))), 128))
+              class: N(["vie-frame-color-swatch", { "vie-frame-color-swatch--active": r(l) }]),
+              style: le({ backgroundColor: s(l) }),
+              onClick: (m) => h(l)
+            }, null, 14, mi))), 128))
           ])
         ])
-      ], 64)) : Z("", !0)
+      ], 64)) : G("", !0)
     ]));
   }
-}), Jn = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+}), yi = `<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() {
+function wi() {
   return {
     id: "frame",
-    icon: Jn,
+    icon: yi,
     labelKey: "frame",
-    controls: Zn
+    controls: gi
   };
 }
-const Qn = { class: "vie-fill-controls" }, ei = { class: "vie-fill-strip" }, ti = ["title", "onClick"], ni = /* @__PURE__ */ Y({
+const ki = { class: "vie-fill-controls" }, bi = { class: "vie-fill-strip" }, xi = ["title", "onClick"], _i = /* @__PURE__ */ J({
   __name: "FillControls",
-  setup(s) {
-    const e = G(), n = Q(ee, (r) => r), t = [
+  setup(o) {
+    const e = ee(), n = ie(oe, (s) => s), t = [
       [0, 0, 0, 0],
       // Transparent
       [1, 1, 1, 1],
@@ -3041,109 +3129,109 @@ const Qn = { class: "vie-fill-controls" }, ei = { class: "vie-fill-strip" }, ti
       [0.61, 0.15, 0.69, 1]
       // Purple
     ];
-    function o(r) {
+    function a(s) {
       e.updateState((i) => {
-        i.backgroundColor = [...r];
+        i.backgroundColor = [...s];
       });
     }
-    function d(r) {
+    function h(s) {
       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) => (M(), z("div", Qn, [
-      g("div", ei, [
-        (M(), z(X, null, N(t, (h, a) => g("button", {
-          key: a,
-          class: U(["vie-fill-swatch", {
-            "vie-fill-swatch--active": d(h),
-            "vie-fill-swatch--transparent": h[3] === 0
+      return i[0] === s[0] && i[1] === s[1] && i[2] === s[2] && i[3] === s[3];
+    }
+    function r(s) {
+      return `rgba(${Math.round(s[0] * 255)}, ${Math.round(s[1] * 255)}, ${Math.round(s[2] * 255)}, ${s[3]})`;
+    }
+    return (s, i) => (S(), z("div", ki, [
+      y("div", bi, [
+        (S(), z(Y, null, Z(t, (v, l) => y("button", {
+          key: l,
+          class: N(["vie-fill-swatch", {
+            "vie-fill-swatch--active": h(v),
+            "vie-fill-swatch--transparent": v[3] === 0
           }]),
-          style: se(h[3] > 0 ? { backgroundColor: u(h) } : void 0),
-          title: a === 0 ? S(n)("transparent") : void 0,
-          onClick: (c) => o(h)
-        }, null, 14, ti)), 64))
+          style: le(v[3] > 0 ? { backgroundColor: r(v) } : void 0),
+          title: l === 0 ? I(n)("transparent") : void 0,
+          onClick: (c) => a(v)
+        }, null, 14, xi)), 64))
       ])
     ]));
   }
-}), ii = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+}), Ci = `<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() {
+function Mi() {
   return {
     id: "fill",
-    icon: ii,
+    icon: Ci,
     labelKey: "fill",
-    controls: ni
+    controls: _i
   };
 }
-const ai = { class: "vie-resize-controls" }, si = { class: "vie-resize-title" }, ri = { class: "vie-resize-dimensions" }, li = { class: "vie-resize-input" }, ci = { class: "vie-resize-input__label" }, ui = { class: "vie-resize-input__field-wrapper" }, di = ["value"], hi = ["title"], vi = {
+const Si = { class: "vie-resize-controls" }, $i = { class: "vie-resize-title" }, Ri = { class: "vie-resize-dimensions" }, zi = { class: "vie-resize-input" }, Ii = { class: "vie-resize-input__label" }, Pi = { class: "vie-resize-input__field-wrapper" }, Ti = ["value"], Ei = ["title"], Wi = {
   viewBox: "0 0 24 24",
   width: "16",
   height: "16",
   fill: "none",
   stroke: "currentColor",
   "stroke-width": "2"
-}, pi = {
+}, Ai = {
   key: 0,
   d: "M7 11V7a5 5 0 0 1 10 0v4"
-}, fi = {
+}, Fi = {
   key: 1,
   d: "M7 11V7a5 5 0 0 1 9.9-1"
-}, mi = { class: "vie-resize-input" }, gi = { class: "vie-resize-input__label" }, yi = { class: "vie-resize-input__field-wrapper" }, wi = ["value"], ki = { class: "vie-resize-hint" }, bi = /* @__PURE__ */ Y({
+}, Di = { class: "vie-resize-input" }, Li = { class: "vie-resize-input__label" }, Ki = { class: "vie-resize-input__field-wrapper" }, Hi = ["value"], Vi = { class: "vie-resize-hint" }, Bi = /* @__PURE__ */ J({
   __name: "ResizeControls",
-  setup(s) {
-    const e = G(), n = Q(ee, (h) => h), t = H(!0), o = V(() => {
-      const h = e.sourceImage.value;
-      if (!h) return 1;
-      const a = e.state.crop;
-      return h.naturalWidth * a.width / (h.naturalHeight * a.height);
-    }), d = V(() => {
+  setup(o) {
+    const e = ee(), n = ie(oe, (v) => v), t = H(!0), a = j(() => {
+      const v = e.sourceImage.value;
+      if (!v) return 1;
+      const l = e.state.crop;
+      return v.naturalWidth * l.width / (v.naturalHeight * l.height);
+    }), h = j(() => {
       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(() => {
+      const v = e.sourceImage.value;
+      return v ? Math.round(v.naturalWidth * e.state.crop.width) : 0;
+    }), r = j(() => {
       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;
+      const v = e.sourceImage.value;
+      return v ? Math.round(v.naturalHeight * e.state.crop.height) : 0;
     });
-    function r(h) {
-      const a = parseInt(h, 10);
-      !a || a < 1 || e.updateState((c) => {
-        c.resize.width = a, t.value && (c.resize.height = Math.round(a / o.value));
+    function s(v) {
+      const l = parseInt(v, 10);
+      !l || l < 1 || e.updateState((c) => {
+        c.resize.width = l, t.value && (c.resize.height = Math.round(l / a.value));
       });
     }
-    function i(h) {
-      const a = parseInt(h, 10);
-      !a || a < 1 || e.updateState((c) => {
-        c.resize.height = a, t.value && (c.resize.width = Math.round(a * o.value));
+    function i(v) {
+      const l = parseInt(v, 10);
+      !l || l < 1 || e.updateState((c) => {
+        c.resize.height = l, t.value && (c.resize.width = Math.round(l * a.value));
       });
     }
-    return (h, a) => (M(), z("div", ai, [
-      g("p", si, q(S(n)("imageOutputSize")), 1),
-      g("div", ri, [
-        g("div", li, [
-          g("label", ci, q(S(n)("width")), 1),
-          g("div", ui, [
-            g("input", {
+    return (v, l) => (S(), z("div", Si, [
+      y("p", $i, q(I(n)("imageOutputSize")), 1),
+      y("div", Ri, [
+        y("div", zi, [
+          y("label", Ii, q(I(n)("width")), 1),
+          y("div", Pi, [
+            y("input", {
               type: "number",
               class: "vie-resize-input__field",
-              value: d.value,
+              value: h.value,
               min: "1",
-              onInput: a[0] || (a[0] = (c) => r(c.target.value))
-            }, null, 40, di),
-            a[3] || (a[3] = g("span", { class: "vie-resize-input__unit" }, "px", -1))
+              onInput: l[0] || (l[0] = (c) => s(c.target.value))
+            }, null, 40, Ti),
+            l[3] || (l[3] = y("span", { class: "vie-resize-input__unit" }, "px", -1))
           ])
         ]),
-        g("button", {
-          class: U(["vie-resize-lock", { "vie-resize-lock--active": t.value }]),
-          onClick: a[1] || (a[1] = (c) => t.value = !t.value),
-          title: S(n)("lockAspectRatio")
+        y("button", {
+          class: N(["vie-resize-lock", { "vie-resize-lock--active": t.value }]),
+          onClick: l[1] || (l[1] = (c) => t.value = !t.value),
+          title: I(n)("lockAspectRatio")
         }, [
-          (M(), z("svg", vi, [
-            a[4] || (a[4] = g("rect", {
+          (S(), z("svg", Wi, [
+            l[4] || (l[4] = y("rect", {
               x: "3",
               y: "11",
               width: "18",
@@ -3151,94 +3239,589 @@ const ai = { class: "vie-resize-controls" }, si = { class: "vie-resize-title" },
               rx: "2",
               ry: "2"
             }, null, -1)),
-            t.value ? (M(), z("path", pi)) : (M(), z("path", fi))
+            t.value ? (S(), z("path", Ai)) : (S(), z("path", Fi))
           ]))
-        ], 10, hi),
-        g("div", mi, [
-          g("label", gi, q(S(n)("height")), 1),
-          g("div", yi, [
-            g("input", {
+        ], 10, Ei),
+        y("div", Di, [
+          y("label", Li, q(I(n)("height")), 1),
+          y("div", Ki, [
+            y("input", {
               type: "number",
               class: "vie-resize-input__field",
-              value: u.value,
+              value: r.value,
               min: "1",
-              onInput: a[2] || (a[2] = (c) => i(c.target.value))
-            }, null, 40, wi),
-            a[5] || (a[5] = g("span", { class: "vie-resize-input__unit" }, "px", -1))
+              onInput: l[2] || (l[2] = (c) => i(c.target.value))
+            }, null, 40, Hi),
+            l[5] || (l[5] = y("span", { class: "vie-resize-input__unit" }, "px", -1))
           ])
         ])
       ]),
-      g("p", ki, q(S(n)("resizeHint")), 1)
+      y("p", Vi, q(I(n)("resizeHint")), 1)
     ]));
   }
-}), _i = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+}), ji = `<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 xi() {
+function Oi() {
   return {
     id: "resize",
-    icon: _i,
+    icon: ji,
     labelKey: "resize",
-    controls: bi
+    controls: Bi
+  };
+}
+const Xe = /* @__PURE__ */ new WeakMap();
+function at(o) {
+  let e = Xe.get(o);
+  return e || (e = H(null), Xe.set(o, e)), e;
+}
+const Xi = { class: "vie-annotate-controls" }, qi = {
+  key: 0,
+  class: "vie-annotate-toolbar"
+}, Yi = ["title"], Ui = {
+  key: 1,
+  class: "vie-annotate-props"
+}, Ni = { class: "vie-annotate-prop-row" }, Zi = { class: "vie-annotate-prop-label" }, Ji = { class: "vie-annotate-color-picker" }, Gi = ["title", "onClick"], Qi = { class: "vie-annotate-prop-row" }, eo = { class: "vie-annotate-prop-label" }, to = { class: "vie-annotate-font-buttons" }, no = ["onClick"], io = { class: "vie-annotate-prop-row" }, oo = /* @__PURE__ */ J({
+  __name: "AnnotateControls",
+  setup(o) {
+    const e = ee(), n = ie(oe, (c) => c), t = at(e.state), a = j(() => t.value && e.state.annotations.find((c) => c.id === t.value) || null), h = [
+      { label: "Black", value: [0, 0, 0, 1] },
+      { label: "White", value: [1, 1, 1, 1] },
+      { label: "Red", value: [0.9, 0.15, 0.15, 1] },
+      { label: "Orange", value: [0.95, 0.55, 0.1, 1] },
+      { label: "Yellow", value: [0.95, 0.85, 0.1, 1] },
+      { label: "Green", value: [0.2, 0.75, 0.3, 1] },
+      { label: "Blue", value: [0.2, 0.45, 0.85, 1] },
+      { label: "Purple", value: [0.55, 0.25, 0.8, 1] },
+      { label: "Accent", value: [0.106, 0.286, 0.396, 1] }
+    ], r = [
+      { label: "Sans", value: "sans-serif" },
+      { label: "Serif", value: "serif" },
+      { label: "Mono", value: "monospace" }
+    ];
+    function s(c) {
+      return `rgba(${Math.round(c[0] * 255)}, ${Math.round(c[1] * 255)}, ${Math.round(c[2] * 255)}, ${c[3]})`;
+    }
+    function i(c, m) {
+      return Math.abs(c[0] - m[0]) < 0.01 && Math.abs(c[1] - m[1]) < 0.01 && Math.abs(c[2] - m[2]) < 0.01 && Math.abs(c[3] - m[3]) < 0.01;
+    }
+    function v(c, m) {
+      if (!t.value) return;
+      const d = t.value;
+      e.updateState((x) => {
+        const _ = x.annotations.find(($) => $.id === d);
+        _ && (_[c] = m);
+      });
+    }
+    function l() {
+      if (!t.value) return;
+      const c = t.value;
+      e.updateState((m) => {
+        const d = m.annotations.findIndex((x) => x.id === c);
+        d >= 0 && m.annotations.splice(d, 1);
+      }), t.value = null;
+    }
+    return (c, m) => (S(), z("div", Xi, [
+      I(t) ? (S(), z("div", qi, [
+        y("button", {
+          class: "vie-annotate-tool vie-annotate-tool--delete",
+          title: I(n)("delete"),
+          onClick: l
+        }, [...m[4] || (m[4] = [
+          y("svg", {
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            "stroke-width": "2",
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round"
+          }, [
+            y("polyline", { points: "3 6 5 6 21 6" }),
+            y("path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" })
+          ], -1)
+        ])], 8, Yi)
+      ])) : G("", !0),
+      a.value ? (S(), z("div", Ui, [
+        y("div", Ni, [
+          y("span", Zi, q(I(n)("fillColor")), 1),
+          y("div", Ji, [
+            (S(), z(Y, null, Z(h, (d) => y("button", {
+              key: "text-" + d.label,
+              class: N(["vie-annotate-color-swatch", { "vie-annotate-color-swatch--active": i(a.value.fillColor, d.value) }]),
+              style: le({ backgroundColor: s(d.value) }),
+              title: d.label,
+              onClick: (x) => v("fillColor", [...d.value])
+            }, null, 14, Gi)), 64))
+          ])
+        ]),
+        X(fe, {
+          label: I(n)("fontSize"),
+          modelValue: a.value.fontSize * 1e3,
+          min: 15,
+          max: 120,
+          step: 1,
+          base: 40,
+          format: "number",
+          "onUpdate:modelValue": m[0] || (m[0] = (d) => v("fontSize", d / 1e3))
+        }, null, 8, ["label", "modelValue"]),
+        y("div", Qi, [
+          y("span", eo, q(I(n)("fontFamily")), 1),
+          y("div", to, [
+            (S(), z(Y, null, Z(r, (d) => y("button", {
+              key: d.value,
+              class: N(["vie-annotate-font-btn", { "vie-annotate-font-btn--active": a.value.fontFamily === d.value }]),
+              style: le({ fontFamily: d.value }),
+              onClick: (x) => v("fontFamily", d.value)
+            }, q(d.label), 15, no)), 64))
+          ])
+        ]),
+        y("div", io, [
+          y("button", {
+            class: N(["vie-annotate-toggle", { "vie-annotate-toggle--active": a.value.fontWeight === "bold" }]),
+            onClick: m[1] || (m[1] = (d) => v("fontWeight", a.value.fontWeight === "bold" ? "normal" : "bold"))
+          }, [...m[5] || (m[5] = [
+            y("strong", null, "B", -1)
+          ])], 2),
+          y("button", {
+            class: N(["vie-annotate-toggle", { "vie-annotate-toggle--active": a.value.fontStyle === "italic" }]),
+            onClick: m[2] || (m[2] = (d) => v("fontStyle", a.value.fontStyle === "italic" ? "normal" : "italic"))
+          }, [...m[6] || (m[6] = [
+            y("em", null, "I", -1)
+          ])], 2)
+        ]),
+        X(fe, {
+          label: I(n)("opacity"),
+          modelValue: a.value.opacity,
+          min: 0.1,
+          max: 1,
+          step: 0.05,
+          base: 1,
+          format: "percent",
+          "onUpdate:modelValue": m[3] || (m[3] = (d) => v("opacity", d))
+        }, null, 8, ["label", "modelValue"])
+      ])) : G("", !0)
+    ]));
+  }
+});
+let ao = 0;
+function so() {
+  return `ann-${Date.now()}-${++ao}-${Math.random().toString(36).slice(2, 6)}`;
+}
+const lo = [1, 1, 1, 1];
+function ro(o, e, n, t) {
+  return {
+    id: so(),
+    x: o,
+    y: e,
+    width: n,
+    height: t,
+    rotation: 0,
+    strokeColor: [0, 0, 0, 0],
+    strokeWidth: 0,
+    opacity: 1,
+    type: "text",
+    text: "",
+    fontSize: 0.04,
+    fontFamily: "sans-serif",
+    fontWeight: "normal",
+    fontStyle: "normal",
+    fillColor: [...lo],
+    textAlign: "left"
   };
 }
-const Ci = ["dir"], Mi = { class: "vie-main" }, Si = /* @__PURE__ */ Y({
+const co = ["viewBox", "width", "height"], uo = ["x", "y", "width", "height", "data-annotation-id"], ho = ["transform"], vo = ["x", "y", "width", "height"], fo = ["x", "y", "data-handle"], po = ["x1", "y1", "x2", "y2"], mo = ["cx", "cy"], go = ["x", "y", "width", "height"], yo = ["value", "onKeydown"], Ce = 10, qe = 20, Ye = 6, Ue = 6, Ne = 4, wo = /* @__PURE__ */ J({
+  __name: "AnnotateOverlay",
+  props: {
+    canvasRect: {},
+    wrapperSize: {}
+  },
+  setup(o) {
+    function e(f, p, b, R, T, W) {
+      const U = document.createElement("canvas").getContext("2d");
+      U.font = `${T} ${R} ${p}px ${b}`;
+      const Q = p * 1.2, te = f.split(`
+`);
+      let ae = 0, me = 0;
+      for (const st of te) {
+        const lt = st.split(" ");
+        let ue = "";
+        for (const ke of lt) {
+          const Fe = ue ? `${ue} ${ke}` : ke;
+          U.measureText(Fe).width > W && ue ? (ae = Math.max(ae, U.measureText(ue).width), me++, ue = ke) : ue = Fe;
+        }
+        ae = Math.max(ae, U.measureText(ue).width), me++;
+      }
+      return { width: ae, height: me * Q };
+    }
+    const n = o, t = ee(), a = H(null), h = H(null), r = at(t.state), s = H(!1), i = H(""), v = H(null), l = H({
+      size: 14,
+      family: "sans-serif",
+      weight: "normal",
+      style: "normal",
+      color: "#ffffff"
+    }), c = j(() => ({
+      fontSize: l.value.size + "px",
+      fontFamily: l.value.family,
+      fontWeight: l.value.weight,
+      fontStyle: l.value.style,
+      color: l.value.color
+    }));
+    he(() => {
+      $.value && (t.updateState(() => {
+      }), $.value = null, w.value = null), window.removeEventListener("pointermove", E), window.removeEventListener("pointerup", O);
+    });
+    const m = j(() => {
+      const f = n.canvasRect;
+      return t.state.annotations.map((p) => ({
+        id: p.id,
+        dx: f.x + p.x * f.width,
+        dy: f.y + p.y * f.height,
+        dw: p.width * f.width,
+        dh: p.height * f.height
+      }));
+    }), d = j(() => r.value && m.value.find((f) => f.id === r.value) || null), x = j(() => {
+      if (!r.value || !d.value) return "";
+      const f = t.state.annotations.find((T) => T.id === r.value);
+      if (!f || f.rotation === 0) return "";
+      const p = d.value.dx + d.value.dw / 2, b = d.value.dy + d.value.dh / 2;
+      return `rotate(${f.rotation * 180 / Math.PI} ${p} ${b})`;
+    }), _ = j(() => {
+      if (!d.value) return [];
+      const f = d.value, p = Ce / 2;
+      return [
+        { id: "nw", x: f.dx - p, y: f.dy - p },
+        { id: "ne", x: f.dx + f.dw - p, y: f.dy - p },
+        { id: "sw", x: f.dx - p, y: f.dy + f.dh - p },
+        { id: "se", x: f.dx + f.dw - p, y: f.dy + f.dh - p }
+      ];
+    }), $ = H(null), w = H(null), u = H({ x: 0, y: 0 }), g = H({ x: 0, y: 0, width: 0, height: 0, rotation: 0 });
+    function k(f) {
+      var b;
+      const p = (b = a.value) == null ? void 0 : b.getBoundingClientRect();
+      return p ? { x: f.clientX - p.left, y: f.clientY - p.top } : { x: f.clientX, y: f.clientY };
+    }
+    function C(f) {
+      var te;
+      const p = f.target, b = p.getAttribute("data-handle");
+      if (b === "rotate" && r.value) {
+        f.preventDefault(), L(f, "rotate", b);
+        return;
+      }
+      if (b && ["nw", "ne", "sw", "se"].includes(b) && r.value) {
+        f.preventDefault(), L(f, "resize", b);
+        return;
+      }
+      const R = p.getAttribute("data-annotation-id");
+      if (R) {
+        f.preventDefault(), r.value = R, s.value = !1;
+        const ae = t.state.annotations.find((me) => me.id === R);
+        if (ae && f.detail >= 2) {
+          V(ae);
+          return;
+        }
+        L(f, "move", null), (te = a.value) == null || te.focus();
+        return;
+      }
+      if (f.preventDefault(), s.value) {
+        K(), r.value = null;
+        return;
+      }
+      r.value = null;
+      const T = n.canvasRect, W = k(f), B = (W.x - T.x) / T.width, U = (W.y - T.y) / T.height, Q = ro(F(B, 0, 0.9), F(U, 0, 0.9), 0.25, 0.06);
+      t.updateState((ae) => ae.annotations.push(Q)), r.value = Q.id, Se(() => V(Q));
+    }
+    function P(f) {
+      return `rgba(${Math.round(f[0] * 255)}, ${Math.round(f[1] * 255)}, ${Math.round(f[2] * 255)}, ${f[3]})`;
+    }
+    function V(f) {
+      s.value = !0, i.value = f.text;
+      const p = n.canvasRect, b = f.fontSize * p.height;
+      v.value = {
+        x: p.x + f.x * p.width - Ue,
+        y: p.y + f.y * p.height - Ne,
+        w: Math.max(120, f.width * p.width + Ue * 2),
+        h: Math.max(b * 1.6, f.height * p.height + Ne * 2)
+      }, l.value = {
+        size: b,
+        family: f.fontFamily,
+        weight: f.fontWeight,
+        style: f.fontStyle,
+        color: P(f.fillColor)
+      }, Se(() => {
+        h.value && (h.value.focus(), D());
+      });
+    }
+    function A(f) {
+      i.value = f.target.value, D();
+    }
+    function D() {
+      const f = h.value;
+      if (!f || !v.value) return;
+      f.style.height = "0";
+      const p = f.scrollHeight + 4;
+      f.style.height = "100%", p > v.value.h && (v.value.h = p);
+    }
+    function K() {
+      if (r.value) {
+        const f = t.state.annotations.find((p) => p.id === r.value);
+        f && (f.text = i.value);
+      }
+      if (r.value) {
+        const f = n.canvasRect, p = t.state.annotations.find((b) => b.id === r.value);
+        if (p && p.text.trim() && f.width > 0 && f.height > 0) {
+          const b = p.fontSize * f.height, R = p.width * f.width, T = e(
+            p.text,
+            b,
+            p.fontFamily,
+            p.fontWeight,
+            p.fontStyle,
+            R
+          );
+          p.width = T.width / f.width, p.height = T.height / f.height;
+        }
+      }
+      if (s.value = !1, v.value = null, r.value) {
+        const f = t.state.annotations.find((p) => p.id === r.value);
+        if (f && !f.text.trim()) {
+          const p = r.value;
+          t.updateState((b) => {
+            const R = b.annotations.findIndex((T) => T.id === p);
+            R >= 0 && b.annotations.splice(R, 1);
+          }), r.value = null;
+        } else f && t.updateState(() => {
+        });
+      }
+    }
+    function L(f, p, b) {
+      $.value = p, w.value = b;
+      const R = k(f);
+      u.value = { x: R.x, y: R.y };
+      const T = t.state.annotations.find((W) => W.id === r.value);
+      T && (g.value = {
+        x: T.x,
+        y: T.y,
+        width: T.width,
+        height: T.height,
+        rotation: T.rotation
+      }), window.addEventListener("pointermove", E), window.addEventListener("pointerup", O);
+    }
+    function E(f) {
+      if (!$.value) return;
+      const p = n.canvasRect;
+      if (p.width === 0 || p.height === 0) return;
+      const b = k(f), R = (b.x - u.value.x) / p.width, T = (b.y - u.value.y) / p.height, W = g.value;
+      switch ($.value) {
+        case "move": {
+          if (!r.value) break;
+          const B = t.state.annotations.find((U) => U.id === r.value);
+          if (!B) break;
+          B.x = F(W.x + R, 0, 1 - B.width), B.y = F(W.y + T, 0, 1 - B.height), t.requestRender(!0);
+          break;
+        }
+        case "resize": {
+          if (!r.value) break;
+          const B = t.state.annotations.find((Q) => Q.id === r.value);
+          if (!B) break;
+          const U = 0.01;
+          switch (w.value) {
+            case "se":
+              B.width = F(W.width + R, U, 1 - W.x), B.height = F(W.height + T, U, 1 - W.y);
+              break;
+            case "ne": {
+              const Q = F(W.width + R, U, 1 - W.x), te = F(W.height - T, U, W.y + W.height);
+              B.width = Q, B.height = te, B.y = W.y + W.height - te;
+              break;
+            }
+            case "sw": {
+              const Q = F(W.width - R, U, W.x + W.width), te = F(W.height + T, U, 1 - W.y);
+              B.width = Q, B.height = te, B.x = W.x + W.width - Q;
+              break;
+            }
+            case "nw": {
+              const Q = F(W.width - R, U, W.x + W.width), te = F(W.height - T, U, W.y + W.height);
+              B.width = Q, B.height = te, B.x = W.x + W.width - Q, B.y = W.y + W.height - te;
+              break;
+            }
+          }
+          t.requestRender(!0);
+          break;
+        }
+        case "rotate": {
+          if (!r.value) break;
+          const B = t.state.annotations.find((ae) => ae.id === r.value);
+          if (!B) break;
+          const U = p.x + B.x * p.width + B.width * p.width / 2, Q = p.y + B.y * p.height + B.height * p.height / 2, te = Math.atan2(b.x - U, -(b.y - Q));
+          B.rotation = te, t.requestRender(!0);
+          break;
+        }
+      }
+    }
+    function O() {
+      $.value && t.updateState(() => {
+      }), $.value = null, w.value = null, window.removeEventListener("pointermove", E), window.removeEventListener("pointerup", O);
+    }
+    function M(f) {
+      if ((f.key === "Delete" || f.key === "Backspace") && r.value && !s.value) {
+        f.preventDefault();
+        const p = r.value;
+        t.updateState((b) => {
+          const R = b.annotations.findIndex((T) => T.id === p);
+          R >= 0 && b.annotations.splice(R, 1);
+        }), r.value = null;
+      }
+      f.key === "Escape" && (s.value ? K() : r.value = null);
+    }
+    function F(f, p, b) {
+      return Math.max(p, Math.min(b, f));
+    }
+    return (f, p) => (S(), z("svg", {
+      ref_key: "svgRef",
+      ref: a,
+      class: "vie-annotate-overlay",
+      viewBox: `0 0 ${o.wrapperSize.width} ${o.wrapperSize.height}`,
+      width: o.wrapperSize.width,
+      height: o.wrapperSize.height,
+      onPointerdown: C,
+      onKeydown: M,
+      tabindex: "0"
+    }, [
+      (S(!0), z(Y, null, Z(m.value, (b) => (S(), z("rect", {
+        key: b.id,
+        x: b.dx,
+        y: b.dy,
+        width: b.dw,
+        height: b.dh,
+        fill: "transparent",
+        class: "vie-annotate-hitarea",
+        "data-annotation-id": b.id
+      }, null, 8, uo))), 128)),
+      d.value ? (S(), z("g", {
+        key: 0,
+        transform: x.value
+      }, [
+        y("rect", {
+          x: d.value.dx,
+          y: d.value.dy,
+          width: d.value.dw,
+          height: d.value.dh,
+          class: "vie-annotate-selection"
+        }, null, 8, vo),
+        (S(!0), z(Y, null, Z(_.value, (b) => (S(), z("rect", {
+          key: b.id,
+          x: b.x,
+          y: b.y,
+          width: Ce,
+          height: Ce,
+          class: "vie-annotate-handle",
+          "data-handle": b.id
+        }, null, 8, fo))), 128)),
+        y("line", {
+          x1: d.value.dx + d.value.dw / 2,
+          y1: d.value.dy - qe,
+          x2: d.value.dx + d.value.dw / 2,
+          y2: d.value.dy,
+          class: "vie-annotate-rotate-line"
+        }, null, 8, po),
+        y("circle", {
+          cx: d.value.dx + d.value.dw / 2,
+          cy: d.value.dy - qe - Ye,
+          r: Ye,
+          class: "vie-annotate-rotate-handle",
+          "data-handle": "rotate"
+        }, null, 8, mo)
+      ], 8, ho)) : G("", !0),
+      s.value && v.value ? (S(), z("foreignObject", {
+        key: 1,
+        x: v.value.x,
+        y: v.value.y,
+        width: v.value.w,
+        height: v.value.h
+      }, [
+        y("textarea", {
+          ref_key: "textareaRef",
+          ref: h,
+          class: "vie-annotate-text-input",
+          style: le(c.value),
+          value: i.value,
+          onInput: A,
+          onBlur: K,
+          onKeydown: Me(ve(K, ["prevent"]), ["escape"])
+        }, null, 44, yo)
+      ], 8, go)) : G("", !0)
+    ], 40, co));
+  }
+}), ko = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <polyline points="4 7 4 4 20 4 20 7"/>
+  <line x1="9.5" y1="20" x2="14.5" y2="20"/>
+  <line x1="12" y1="4" x2="12" y2="20"/>
+</svg>`;
+function bo() {
+  return {
+    id: "text",
+    icon: ko,
+    labelKey: "text",
+    controls: oo,
+    overlay: wo
+  };
+}
+const xo = ["dir"], _o = { class: "vie-main" }, Co = /* @__PURE__ */ J({
   __name: "EditorShell",
   props: {
     options: {}
   },
   emits: ["process", "close"],
-  setup(s, { emit: e }) {
-    const n = s, t = e, o = nt(n.options);
-    it(o);
-    const d = { en: ut, ar: dt }, u = V(() => {
-      const b = n.options.locale || "en";
+  setup(o, { emit: e }) {
+    const n = o, t = e, a = kt(n.options);
+    bt(a);
+    const h = { en: Pt, ar: Tt }, r = j(() => {
+      const _ = n.options.locale || "en";
       return ($) => {
-        var m;
-        return ((m = d[b]) == null ? void 0 : m[$]) || d.en[$] || $;
+        var w;
+        return ((w = h[_]) == null ? void 0 : w[$]) || h.en[$] || $;
       };
     });
-    We(ee, (b) => u.value(b));
-    const r = {
-      crop: () => o.registerPlugin(un()),
-      finetune: () => o.registerPlugin(fn()),
-      filter: () => o.registerPlugin(xn()),
-      sticker: () => o.registerPlugin(An()),
-      frame: () => o.registerPlugin(Gn()),
-      fill: () => o.registerPlugin(oi()),
-      resize: () => o.registerPlugin(xi())
-    }, i = n.options.plugins || ["crop", "finetune", "filter", "sticker", "frame", "resize"];
-    for (const b of i)
-      r[b] && r[b]();
+    Ze(oe, (_) => r.value(_));
+    const s = {
+      crop: () => a.registerPlugin(Pn()),
+      finetune: () => a.registerPlugin(Fn()),
+      filter: () => a.registerPlugin(On()),
+      sticker: () => a.registerPlugin(ai()),
+      frame: () => a.registerPlugin(wi()),
+      fill: () => a.registerPlugin(Mi()),
+      resize: () => a.registerPlugin(Oi()),
+      text: () => a.registerPlugin(bo())
+    }, i = n.options.plugins || ["crop", "finetune", "filter", "text", "sticker", "frame", "resize"];
+    for (const _ of i)
+      s[_] && s[_]();
     if (n.options.customPlugins)
-      for (const b of n.options.customPlugins)
-        o.registerPlugin(b);
-    const h = H(null), a = H(!1);
+      for (const _ of n.options.customPlugins)
+        a.registerPlugin(_);
+    const v = H(null), l = H(!1);
     let c = null;
-    ue(() => {
-      h.value && (c = new ResizeObserver((b) => {
-        for (const $ of b) {
-          const { width: m, height: l } = $.contentRect;
-          a.value = m > l && m > 700;
+    ge(() => {
+      v.value && (c = new ResizeObserver((_) => {
+        for (const $ of _) {
+          const { width: w, height: u } = $.contentRect;
+          l.value = w > u && w > 700;
         }
-      }), c.observe(h.value), h.value.focus());
-    }), re(() => {
+      }), c.observe(v.value), v.value.focus());
+    }), he(() => {
       c == null || c.disconnect();
     });
-    function y(b) {
-      b.ctrlKey || b.metaKey ? b.key === "z" && !b.shiftKey ? (b.preventDefault(), o.undo()) : (b.key === "z" && b.shiftKey || b.key === "y") && (b.preventDefault(), o.redo()) : b.key === "Escape" && t("close");
+    function m(_) {
+      _.ctrlKey || _.metaKey ? _.key === "z" && !_.shiftKey ? (_.preventDefault(), a.undo()) : (_.key === "z" && _.shiftKey || _.key === "y") && (_.preventDefault(), a.redo()) : _.key === "Escape" && t("close");
     }
-    const v = H(!1);
-    async function w() {
-      if (!(!o.sourceImage.value || v.value)) {
-        v.value = !0;
+    const d = H(!1);
+    async function x() {
+      if (!(!a.sourceImage.value || d.value)) {
+        d.value = !0;
         try {
-          const $ = await new st().process(
-            o.sourceImage.value,
-            o.state,
+          const $ = await new $t().process(
+            a.sourceImage.value,
+            a.state,
             {
               mimeType: n.options.outputMimeType || "image/jpeg",
               quality: n.options.outputQuality ?? 0.92,
@@ -3247,45 +3830,45 @@ const Ci = ["dir"], Mi = { class: "vie-main" }, Si = /* @__PURE__ */ Y({
           );
           t("process", $);
         } finally {
-          v.value = !1;
+          d.value = !1;
         }
       }
     }
-    return (b, $) => (M(), z("div", {
+    return (_, $) => (S(), z("div", {
       ref_key: "shellRef",
-      ref: h,
-      class: U([
+      ref: v,
+      class: N([
         "vie-editor",
         "vie-shell",
-        a.value ? "vie-shell--horizontal" : "",
-        s.options.theme === "dark" ? "vie-theme-dark" : ""
+        l.value ? "vie-shell--horizontal" : "",
+        o.options.theme === "dark" ? "vie-theme-dark" : ""
       ]),
-      dir: s.options.dir || "ltr",
-      onKeydown: y,
+      dir: o.options.dir || "ltr",
+      onKeydown: m,
       tabindex: "0"
     }, [
-      a.value ? (M(), z(X, { key: 0 }, [
-        j(ze),
-        g("div", Mi, [
-          j($e, {
-            onDone: w,
-            processing: v.value
+      l.value ? (S(), z(Y, { key: 0 }, [
+        X(He),
+        y("div", _o, [
+          X(Le, {
+            onDone: x,
+            processing: d.value
           }, null, 8, ["processing"]),
-          j(Re),
-          j(Ie)
+          X(Ke),
+          X(Ve)
         ])
-      ], 64)) : (M(), z(X, { key: 1 }, [
-        j($e, {
-          onDone: w,
-          processing: v.value
+      ], 64)) : (S(), z(Y, { key: 1 }, [
+        X(Le, {
+          onDone: x,
+          processing: d.value
         }, null, 8, ["processing"]),
-        j(Re),
-        j(Ie),
-        j(ze)
+        X(Ke),
+        X(Ve),
+        X(He)
       ], 64))
-    ], 42, Ci));
+    ], 42, xo));
   }
-}), $i = { class: "vie-modal-container" }, Ri = /* @__PURE__ */ Y({
+}), Mo = { class: "vie-modal-container" }, So = /* @__PURE__ */ J({
   __name: "EditorModal",
   props: {
     src: {},
@@ -3299,8 +3882,8 @@ const Ci = ["dir"], Mi = { class: "vie-main" }, Si = /* @__PURE__ */ Y({
     initialState: {}
   },
   emits: ["process", "close"],
-  setup(s, { emit: e }) {
-    const n = s, t = e, o = H(null), d = V(() => ({
+  setup(o, { emit: e }) {
+    const n = o, t = e, a = H(null), h = j(() => ({
       src: n.src,
       plugins: n.plugins,
       locale: n.locale,
@@ -3311,48 +3894,48 @@ const Ci = ["dir"], Mi = { class: "vie-main" }, Si = /* @__PURE__ */ Y({
       maxCanvasPixels: n.maxCanvasPixels,
       initialState: n.initialState
     }));
-    function u() {
+    function r() {
       t("close");
     }
-    function r() {
-      window.confirm("Close editor? Unsaved changes will be lost.") && u();
+    function s() {
+      window.confirm("Close editor? Unsaved changes will be lost.") && r();
     }
-    function i(a) {
-      const c = o.value;
+    function i(l) {
+      const c = a.value;
       if (!c) return;
-      const y = c.querySelectorAll(
+      const m = c.querySelectorAll(
         'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
       );
-      if (y.length === 0) return;
-      const v = y[0], w = y[y.length - 1];
-      a.shiftKey ? document.activeElement === v && (a.preventDefault(), w.focus()) : document.activeElement === w && (a.preventDefault(), v.focus());
-    }
-    let h = "";
-    return ue(async () => {
-      var a, c;
-      h = document.body.style.overflow, document.body.style.overflow = "hidden", await Je(), (c = (a = o.value) == null ? void 0 : a.querySelector('[tabindex="0"]')) == null || c.focus();
-    }), re(() => {
-      document.body.style.overflow = h;
-    }), (a, c) => (M(), le(Ge, { to: "body" }, [
-      j(_e, { name: "vie-modal" }, {
-        default: J(() => [
-          g("div", {
+      if (m.length === 0) return;
+      const d = m[0], x = m[m.length - 1];
+      l.shiftKey ? document.activeElement === d && (l.preventDefault(), x.focus()) : document.activeElement === x && (l.preventDefault(), d.focus());
+    }
+    let v = "";
+    return ge(async () => {
+      var l, c;
+      v = document.body.style.overflow, document.body.style.overflow = "hidden", await Se(), (c = (l = a.value) == null ? void 0 : l.querySelector('[tabindex="0"]')) == null || c.focus();
+    }), he(() => {
+      document.body.style.overflow = v;
+    }), (l, c) => (S(), pe(mt, { to: "body" }, [
+      X(Te, { name: "vie-modal" }, {
+        default: ne(() => [
+          y("div", {
             class: "vie-modal-backdrop",
             role: "dialog",
             "aria-modal": "true",
-            onClick: ce(r, ["self"]),
+            onClick: ve(s, ["self"]),
             onKeydown: [
-              Se(u, ["esc"]),
-              Se(i, ["tab"])
+              Me(r, ["esc"]),
+              Me(i, ["tab"])
             ],
             ref_key: "backdropRef",
-            ref: o
+            ref: a
           }, [
-            g("div", $i, [
-              j(Si, {
-                options: d.value,
-                onProcess: c[0] || (c[0] = (y) => a.$emit("process", y)),
-                onClose: u
+            y("div", Mo, [
+              X(Co, {
+                options: h.value,
+                onProcess: c[0] || (c[0] = (m) => l.$emit("process", m)),
+                onClose: r
               }, null, 8, ["options"])
             ])
           ], 544)
@@ -3362,11 +3945,11 @@ const Ci = ["dir"], Mi = { class: "vie-main" }, Si = /* @__PURE__ */ Y({
     ]));
   }
 });
-function Pi(s) {
-  return JSON.stringify(s);
+function zo(o) {
+  return JSON.stringify(o);
 }
-function Ti(s) {
-  const e = JSON.parse(s);
+function Io(o) {
+  const e = JSON.parse(o);
   if (typeof e != "object" || e === null || Array.isArray(e))
     throw new Error("Invalid state: expected an object");
   if (Array.isArray(e.stickers)) {
@@ -3378,64 +3961,66 @@ function Ti(s) {
   }
   return e;
 }
-function Ei(s) {
-  const e = ge();
+function Po(o) {
+  const e = $e();
   return {
     ...e,
-    ...s,
-    crop: { ...e.crop, ...s.crop || {} },
-    finetune: { ...e.finetune, ...s.finetune || {} },
-    filter: { ...e.filter, ...s.filter || {} },
-    frame: { ...e.frame, ...s.frame || {} },
-    resize: { ...e.resize, ...s.resize || {} },
-    stickers: s.stickers || e.stickers,
-    backgroundColor: s.backgroundColor || e.backgroundColor
+    ...o,
+    crop: { ...e.crop, ...o.crop || {} },
+    finetune: { ...e.finetune, ...o.finetune || {} },
+    filter: { ...e.filter, ...o.filter || {} },
+    frame: { ...e.frame, ...o.frame || {} },
+    resize: { ...e.resize, ...o.resize || {} },
+    stickers: o.stickers || e.stickers,
+    backgroundColor: o.backgroundColor || e.backgroundColor
   };
 }
-function zi(s) {
-  s.component("ImageEditorModal", Ri);
+function $o(o) {
+  o.component("ImageEditorModal", So);
 }
-const Wi = { install: zi };
+const To = { install: $o };
 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,
-  Ri as ImageEditorModal,
-  Si as ImageEditorShell,
-  st as ImageProcessor,
-  ee as LOCALE_KEY,
-  xi as ResizePlugin,
-  An as StickerPlugin,
-  ke as applyClarity,
-  Ce as applyColorMatrix,
-  ye as applyGamma,
-  we as applyVignette,
-  dt as ar,
-  Le as brightnessMatrix,
-  De as composeMatrices,
-  Ae as contrastMatrix,
-  ge as createDefaultImageState,
-  nt as createEditorEngine,
-  Wi as default,
-  fe as defaultStickerCategories,
-  Ti as deserializeState,
-  ut as en,
-  He as exposureMatrix,
-  pe as filterPresets,
-  dn as finetuneEffects,
-  Fn as frameStyles,
-  zi as install,
-  et as loadImage,
-  Ei as mergeWithDefaults,
-  ot as multiplyMatrices,
-  Fe as saturationMatrix,
-  Pi as serializeState,
-  Ve as temperatureMatrix,
-  G as useEditor
+  bo as AnnotatePlugin,
+  jt as CanvasRenderer,
+  Pn as CropPlugin,
+  Mi as FillPlugin,
+  On as FilterPlugin,
+  Fn as FinetunePlugin,
+  wi as FramePlugin,
+  gt as History,
+  We as IDENTITY_MATRIX,
+  So as ImageEditorModal,
+  Co as ImageEditorShell,
+  $t as ImageProcessor,
+  oe as LOCALE_KEY,
+  Oi as ResizePlugin,
+  ai as StickerPlugin,
+  bo as TextPlugin,
+  Ie as applyClarity,
+  Ae as applyColorMatrix,
+  Re as applyGamma,
+  ze as applyVignette,
+  Tt as ar,
+  Qe as brightnessMatrix,
+  Ge as composeMatrices,
+  et as contrastMatrix,
+  $e as createDefaultImageState,
+  kt as createEditorEngine,
+  To as default,
+  xe as defaultStickerCategories,
+  Io as deserializeState,
+  Pt as en,
+  nt as exposureMatrix,
+  be as filterPresets,
+  Tn as finetuneEffects,
+  si as frameStyles,
+  $o as install,
+  yt as loadImage,
+  Po as mergeWithDefaults,
+  Mt as multiplyMatrices,
+  tt as saturationMatrix,
+  zo as serializeState,
+  it as temperatureMatrix,
+  ee as useEditor
 };
 //# sourceMappingURL=vuedit-image-editor.es.js.map