@ddict/popup 1.4.6 → 1.4.7

package/dist/popup.es.js

@@ -1,4 +1,4 @@
-import { openBlock as C, createElementBlock as y, createElementVNode as p, createCommentVNode as H, computed as T, unref as $, shallowRef as ze, watch as R, triggerRef as F0, onScopeDispose as _0, ref as I, onUnmounted as R2, inject as l2, watchEffect as f2, onMounted as s2, cloneVNode as le, h as V2, Fragment as j, defineComponent as p2, provide as c2, reactive as se, nextTick as Q, toRaw as n2, effectScope as ie, markRaw as C2, hasInjectionContext as Ue, getCurrentInstance as ae, isRef as S2, isReactive as E0, toRef as a0, getCurrentScope as re, toRefs as A0, mergeModels as We, useModel as qe, createBlock as q, withCtx as Z2, createVNode as D, renderList as X, normalizeClass as N, toDisplayString as J, withModifiers as d0, createTextVNode as F2, withDirectives as e0, vModelText as t0, pushScopeId as L0, popScopeId as S0, withKeys as Ge } from "vue";
+import { openBlock as C, createElementBlock as y, createElementVNode as p, createCommentVNode as H, computed as $, unref as I, shallowRef as ze, watch as R, triggerRef as F0, onScopeDispose as _0, ref as S, onUnmounted as R2, inject as l2, watchEffect as f2, onMounted as s2, cloneVNode as le, h as V2, Fragment as j, defineComponent as p2, provide as c2, reactive as se, nextTick as Q, toRaw as n2, effectScope as ie, markRaw as C2, hasInjectionContext as Ue, getCurrentInstance as ae, isRef as S2, isReactive as E0, toRef as a0, getCurrentScope as re, toRefs as A0, mergeModels as We, useModel as qe, createBlock as q, withCtx as Z2, createVNode as D, renderList as X, normalizeClass as N, toDisplayString as J, withModifiers as d0, createTextVNode as F2, withDirectives as e0, vModelText as t0, pushScopeId as L0, popScopeId as S0, withKeys as Ge } from "vue";
 const f0 = navigator.userAgent.match(
   /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i
 ), j2 = {
@@ -349,14 +349,14 @@ class Et {
               this.options.measureElement(M, void 0, this)
             );
           });
-          const h = s(d), b = this.options.lanes === 1 ? c[d - 1] : this.getFurthestMeasurement(c, d), g = b ? b.end + this.options.gap : o + l, V = i.get(h), w = typeof V == "number" ? V : this.options.estimateSize(d), m = g + w, S = b ? b.lane : d % this.options.lanes;
+          const h = s(d), b = this.options.lanes === 1 ? c[d - 1] : this.getFurthestMeasurement(c, d), g = b ? b.end + this.options.gap : o + l, V = i.get(h), w = typeof V == "number" ? V : this.options.estimateSize(d), m = g + w, T = b ? b.lane : d % this.options.lanes;
           c[d] = {
             index: d,
             start: g,
             size: w,
             end: m,
             key: h,
-            lane: S,
+            lane: T,
             measureElement: x
           };
         }
@@ -541,9 +541,9 @@ function Lt({
   return { startIndex: s, endIndex: a };
 }
 function St(e) {
-  const n = new Et($(e)), t = ze(n), o = n._didMount();
+  const n = new Et(I(e)), t = ze(n), o = n._didMount();
   return R(
-    () => $(e).getScrollElement(),
+    () => I(e).getScrollElement(),
     (l) => {
       l && n._willUpdate();
     },
@@ -551,7 +551,7 @@ function St(e) {
       immediate: !0
     }
   ), R(
-    () => $(e),
+    () => I(e),
     (l) => {
       n.setOptions({
         ...l,
@@ -568,17 +568,17 @@ function St(e) {
 }
 function Tt(e) {
   return St(
-    T(() => ({
+    $(() => ({
       observeElementRect: bt,
       observeElementOffset: wt,
       scrollToFn: _t,
-      ...$(e)
+      ...I(e)
     }))
   );
 }
 function $t(e, n, t) {
-  let o = I(t == null ? void 0 : t.value), l = T(() => e.value !== void 0);
-  return [T(() => l.value ? e.value : o.value), function(s) {
+  let o = S(t == null ? void 0 : t.value), l = $(() => e.value !== void 0);
+  return [$(() => l.value ? e.value : o.value), function(s) {
     return l.value || (o.value = s), n == null ? void 0 : n(s);
   }];
 }
@@ -734,7 +734,7 @@ function Ut(e, n, t) {
     window.addEventListener(e, n, t), o(() => window.removeEventListener(e, n, t));
   });
 }
-function Wt(e, n, t = T(() => !0)) {
+function Wt(e, n, t = $(() => !0)) {
   function o(s, a) {
     if (!t.value || s.defaultPrevented) return;
     let i = a(s);
@@ -749,7 +749,7 @@ function Wt(e, n, t = T(() => !0)) {
     }
     return !Pt(i, ce.Loose) && i.tabIndex !== -1 && s.preventDefault(), n(s, i);
   }
-  let l = I(null);
+  let l = S(null);
   z2("pointerdown", (s) => {
     var a, i;
     t.value && (l.value = ((i = (a = s.composedPath) == null ? void 0 : a.call(s)) == null ? void 0 : i[0]) || s.target);
@@ -766,7 +766,7 @@ function R0(e, n) {
   if (typeof t == "string" && t.toLowerCase() === "button") return "button";
 }
 function qt(e, n) {
-  let t = I(R0(e.value.type, e.value.as));
+  let t = S(R0(e.value.type, e.value.as));
   return s2(() => {
     t.value = R0(e.value.type, e.value.as);
   }), f2(() => {
@@ -778,7 +778,7 @@ function P0(e) {
   return [e.screenX, e.screenY];
 }
 function Gt() {
-  let e = I([-1, -1]);
+  let e = S([-1, -1]);
   return { wasMoved(n) {
     let t = P0(n);
     return e.value[0] === t[0] && e.value[1] === t[1] ? !1 : (e.value = t, !0);
@@ -955,19 +955,19 @@ function y2(e) {
   return n;
 }
 let we = Symbol("VirtualContext"), r1 = p2({ name: "VirtualProvider", setup(e, { slots: n }) {
-  let t = y2("VirtualProvider"), o = T(() => {
+  let t = y2("VirtualProvider"), o = $(() => {
     let i = B(t.optionsRef);
     if (!i) return { start: 0, end: 0 };
     let r = window.getComputedStyle(i);
     return { start: parseFloat(r.paddingBlockStart || r.paddingTop), end: parseFloat(r.paddingBlockEnd || r.paddingBottom) };
-  }), l = Tt(T(() => ({ scrollPaddingStart: o.value.start, scrollPaddingEnd: o.value.end, count: t.virtual.value.options.length, estimateSize() {
+  }), l = Tt($(() => ({ scrollPaddingStart: o.value.start, scrollPaddingEnd: o.value.end, count: t.virtual.value.options.length, estimateSize() {
     return 40;
   }, getScrollElement() {
     return B(t.optionsRef);
-  }, overscan: 12 }))), s = T(() => {
+  }, overscan: 12 }))), s = $(() => {
     var i;
     return (i = t.virtual.value) == null ? void 0 : i.options;
-  }), a = I(0);
+  }), a = S(0);
   return R([s], () => {
     a.value += 1;
   }), c2(we, t.virtual.value ? l : null), () => [V2("div", { style: { position: "relative", width: "100%", height: `${l.value.getTotalSize()}px` }, ref: (i) => {
@@ -977,12 +977,12 @@ let we = Symbol("VirtualContext"), r1 = p2({ name: "VirtualProvider", setup(e, {
     }
   } }, l.value.getVirtualItems().map((i) => le(n.default({ option: t.virtual.value.options[i.index], open: t.comboboxState.value === 0 })[0], { key: `${a.value}-${i.index}`, "data-index": i.index, "aria-setsize": t.virtual.value.options.length, "aria-posinset": i.index + 1, style: { position: "absolute", top: 0, left: 0, transform: `translateY(${i.start}px)`, overflowAnchor: "none" } })))];
 } }), u1 = p2({ name: "Combobox", emits: { "update:modelValue": (e) => !0 }, props: { as: { type: [Object, String], default: "template" }, disabled: { type: [Boolean], default: !1 }, by: { type: [String, Function], nullable: !0, default: null }, modelValue: { type: [Object, String, Number, Boolean], default: void 0 }, defaultValue: { type: [Object, String, Number, Boolean], default: void 0 }, form: { type: String, optional: !0 }, name: { type: String, optional: !0 }, nullable: { type: Boolean, default: !1 }, multiple: { type: [Boolean], default: !1 }, immediate: { type: [Boolean], default: !1 }, virtual: { type: Object, default: null } }, inheritAttrs: !1, setup(e, { slots: n, attrs: t, emit: o }) {
-  let l = I(1), s = I(null), a = I(null), i = I(null), r = I(null), u = I({ static: !1, hold: !1 }), c = I([]), d = I(null), x = I(2), h = I(!1);
+  let l = S(1), s = S(null), a = S(null), i = S(null), r = S(null), u = S({ static: !1, hold: !1 }), c = S([]), d = S(null), x = S(2), h = S(!1);
   function b(f = (v) => v) {
     let v = d.value !== null ? c.value[d.value] : null, O = f(c.value.slice()), k = O.length > 0 && O[0].dataRef.order.value !== null ? O.sort((Z, K) => Z.dataRef.order.value - K.dataRef.order.value) : Zt(O, (Z) => B(Z.dataRef.domRef)), P = v ? k.indexOf(v) : null;
     return P === -1 && (P = null), { options: k, activeOptionIndex: P };
   }
-  let g = T(() => e.multiple ? 1 : 0), V = T(() => e.nullable), [w, m] = $t(T(() => e.modelValue), (f) => o("update:modelValue", f), T(() => e.defaultValue)), S = T(() => w.value === void 0 ? u2(g.value, { 1: [], 0: void 0 }) : w.value), M = null, _ = null;
+  let g = $(() => e.multiple ? 1 : 0), V = $(() => e.nullable), [w, m] = $t($(() => e.modelValue), (f) => o("update:modelValue", f), $(() => e.defaultValue)), T = $(() => w.value === void 0 ? u2(g.value, { 1: [], 0: void 0 }) : w.value), M = null, _ = null;
   function F(f) {
     return u2(g.value, { 0() {
       return m == null ? void 0 : m(f);
@@ -991,7 +991,7 @@ let we = Symbol("VirtualContext"), r1 = p2({ name: "VirtualProvider", setup(e, {
       return k === -1 ? v.push(O) : v.splice(k, 1), m == null ? void 0 : m(v);
     } });
   }
-  let E = T(() => {
+  let E = $(() => {
   });
   R([E], ([f], [v]) => {
     if (L.virtual.value && f && v && d.value !== null) {
@@ -999,7 +999,7 @@ let we = Symbol("VirtualContext"), r1 = p2({ name: "VirtualProvider", setup(e, {
       O !== -1 ? d.value = O : d.value = null;
     }
   });
-  let L = { comboboxState: l, value: S, mode: g, compare(f, v) {
+  let L = { comboboxState: l, value: T, mode: g, compare(f, v) {
     if (typeof e.by == "string") {
       let O = e.by;
       return (f == null ? void 0 : f[O]) === (v == null ? void 0 : v[O]);
@@ -1007,9 +1007,9 @@ let we = Symbol("VirtualContext"), r1 = p2({ name: "VirtualProvider", setup(e, {
     return e.by === null ? l1(f, v) : e.by(f, v);
   }, calculateIndex(f) {
     return L.virtual.value ? e.by === null ? L.virtual.value.options.indexOf(f) : L.virtual.value.options.findIndex((v) => L.compare(v, f)) : c.value.findIndex((v) => L.compare(v.dataRef.value, f));
-  }, defaultValue: T(() => e.defaultValue), nullable: V, immediate: T(() => !1), virtual: T(() => null), inputRef: a, labelRef: s, buttonRef: i, optionsRef: r, disabled: T(() => e.disabled), options: c, change(f) {
+  }, defaultValue: $(() => e.defaultValue), nullable: V, immediate: $(() => !1), virtual: $(() => null), inputRef: a, labelRef: s, buttonRef: i, optionsRef: r, disabled: $(() => e.disabled), options: c, change(f) {
     m(f);
-  }, activeOptionIndex: T(() => {
+  }, activeOptionIndex: $(() => {
     if (h.value && d.value === null && (L.virtual.value ? L.virtual.value.options.length > 0 : c.value.length > 0)) {
       if (L.virtual.value) {
         let v = L.virtual.value.options.findIndex((O) => {
@@ -1098,8 +1098,8 @@ let we = Symbol("VirtualContext"), r1 = p2({ name: "VirtualProvider", setup(e, {
   }, isActive(f) {
     return d.value === L.calculateIndex(f);
   } };
-  Wt([a, i, r], () => L.closeCombobox(), T(() => l.value === 0)), c2(xe, L), t1(T(() => u2(l.value, { 0: B2.Open, 1: B2.Closed })));
-  let A = T(() => {
+  Wt([a, i, r], () => L.closeCombobox(), $(() => l.value === 0)), c2(xe, L), t1($(() => u2(l.value, { 0: B2.Open, 1: B2.Closed })));
+  let A = $(() => {
     var f;
     return (f = B(a)) == null ? void 0 : f.closest("form");
   });
@@ -1116,8 +1116,8 @@ let we = Symbol("VirtualContext"), r1 = p2({ name: "VirtualProvider", setup(e, {
     }, { immediate: !0 });
   }), () => {
     var f, v, O;
-    let { name: k, disabled: P, form: Z, ...K } = e, e2 = { open: l.value === 0, disabled: P, activeIndex: L.activeOptionIndex.value, activeOption: L.activeOptionIndex.value === null ? null : L.virtual.value ? L.virtual.value.options[(f = L.activeOptionIndex.value) != null ? f : 0] : (O = (v = L.options.value[L.activeOptionIndex.value]) == null ? void 0 : v.dataRef.value) != null ? O : null, value: S.value };
-    return V2(j, [...k != null && S.value != null ? me({ [k]: S.value }).map(([z, je]) => V2(Kt, Qt({ features: pe.Hidden, key: z, as: "input", type: "hidden", hidden: !0, readOnly: !0, form: Z, disabled: P, name: z, value: je }))) : [], w2({ theirProps: { ...t, ...n0(K, ["by", "defaultValue", "immediate", "modelValue", "multiple", "nullable", "onUpdate:modelValue", "virtual"]) }, ourProps: {}, slot: e2, slots: n, attrs: t, name: "Combobox" })]);
+    let { name: k, disabled: P, form: Z, ...K } = e, e2 = { open: l.value === 0, disabled: P, activeIndex: L.activeOptionIndex.value, activeOption: L.activeOptionIndex.value === null ? null : L.virtual.value ? L.virtual.value.options[(f = L.activeOptionIndex.value) != null ? f : 0] : (O = (v = L.options.value[L.activeOptionIndex.value]) == null ? void 0 : v.dataRef.value) != null ? O : null, value: T.value };
+    return V2(j, [...k != null && T.value != null ? me({ [k]: T.value }).map(([z, je]) => V2(Kt, Qt({ features: pe.Hidden, key: z, as: "input", type: "hidden", hidden: !0, readOnly: !0, form: Z, disabled: P, name: z, value: je }))) : [], w2({ theirProps: { ...t, ...n0(K, ["by", "defaultValue", "immediate", "modelValue", "multiple", "nullable", "onUpdate:modelValue", "virtual"]) }, ourProps: {}, slot: e2, slots: n, attrs: t, name: "Combobox" })]);
   };
 } });
 p2({ name: "ComboboxLabel", props: { as: { type: [Object, String], default: "label" }, id: { type: String, default: null } }, setup(e, { attrs: n, slots: t }) {
@@ -1167,7 +1167,7 @@ let c1 = p2({ name: "ComboboxButton", props: { as: { type: [Object, String], def
         return;
     }
   }
-  let u = qt(T(() => ({ as: e.as, type: n.type })), a.buttonRef);
+  let u = qt($(() => ({ as: e.as, type: n.type })), a.buttonRef);
   return () => {
     var c, d;
     let x = { open: a.comboboxState.value === 0, disabled: a.disabled.value, value: a.value.value }, { ...h } = e, b = { ref: a.buttonRef, id: s, type: u.value, tabindex: "-1", "aria-haspopup": "listbox", "aria-controls": (c = B(a.optionsRef)) == null ? void 0 : c.id, "aria-expanded": a.comboboxState.value === 0, "aria-labelledby": a.labelRef.value ? [(d = B(a.labelRef)) == null ? void 0 : d.id, s].join(" ") : void 0, disabled: a.disabled.value === !0 ? !0 : void 0, onKeydown: r, onClick: i };
@@ -1175,14 +1175,14 @@ let c1 = p2({ name: "ComboboxButton", props: { as: { type: [Object, String], def
   };
 } }), d1 = p2({ name: "ComboboxInput", props: { as: { type: [Object, String], default: "input" }, static: { type: Boolean, default: !1 }, unmount: { type: Boolean, default: !0 }, displayValue: { type: Function }, defaultValue: { type: String, default: void 0 }, id: { type: String, default: null } }, emits: { change: (e) => !0 }, setup(e, { emit: n, attrs: t, slots: o, expose: l }) {
   var s;
-  let a = (s = e.id) != null ? s : `headlessui-combobox-input-${P2()}`, i = y2("ComboboxInput"), r = T(() => $0(B(i.inputRef))), u = { value: !1 };
+  let a = (s = e.id) != null ? s : `headlessui-combobox-input-${P2()}`, i = y2("ComboboxInput"), r = $(() => $0(B(i.inputRef))), u = { value: !1 };
   l({ el: i.inputRef, $el: i.inputRef });
   function c() {
     i.change(null);
     let _ = B(i.optionsRef);
     _ && (_.scrollTop = 0), i.goToOption(W.Nothing);
   }
-  let d = T(() => {
+  let d = $(() => {
     var _;
     let F = i.value.value;
     return B(i.inputRef) ? typeof e.displayValue < "u" && F !== void 0 ? (_ = e.displayValue(F)) != null ? _ : "" : typeof F == "string" ? F : "" : "";
@@ -1207,7 +1207,7 @@ let c1 = p2({ name: "ComboboxButton", props: { as: { type: [Object, String], def
       }
     });
   });
-  let x = I(!1);
+  let x = S(!1);
   function h() {
     x.value = !0;
   }
@@ -1265,20 +1265,20 @@ let c1 = p2({ name: "ComboboxButton", props: { as: { type: [Object, String], def
     let A = (F = _.relatedTarget) != null ? F : m2.find((f) => f !== _.currentTarget);
     if (u.value = !1, !((E = B(i.optionsRef)) != null && E.contains(A)) && !((L = B(i.buttonRef)) != null && L.contains(A)) && i.comboboxState.value === 0) return _.preventDefault(), i.mode.value === 0 && (i.nullable.value && i.value.value === null ? c() : i.activationTrigger.value !== 1 && i.selectActiveOption()), i.closeCombobox();
   }
-  function S(_) {
+  function T(_) {
     var F, E, L;
     let A = (F = _.relatedTarget) != null ? F : m2.find((f) => f !== _.currentTarget);
     (E = B(i.buttonRef)) != null && E.contains(A) || (L = B(i.optionsRef)) != null && L.contains(A) || i.disabled.value || i.immediate.value && i.comboboxState.value !== 0 && (i.openCombobox(), Y2().nextFrame(() => {
       i.setActivationTrigger(1);
     }));
   }
-  let M = T(() => {
+  let M = $(() => {
     var _, F, E, L;
     return (L = (E = (F = e.defaultValue) != null ? F : i.defaultValue.value !== void 0 ? (_ = e.displayValue) == null ? void 0 : _.call(e, i.defaultValue.value) : null) != null ? E : i.defaultValue.value) != null ? L : "";
   });
   return () => {
     var _, F, E, L, A, f, v;
-    let O = { open: i.comboboxState.value === 0 }, { displayValue: k, onChange: P, ...Z } = e, K = { "aria-controls": (_ = i.optionsRef.value) == null ? void 0 : _.id, "aria-expanded": i.comboboxState.value === 0, "aria-activedescendant": i.activeOptionIndex.value === null ? void 0 : i.virtual.value ? (F = i.options.value.find((e2) => !i.virtual.value.disabled(e2.dataRef.value) && i.compare(e2.dataRef.value, i.virtual.value.options[i.activeOptionIndex.value]))) == null ? void 0 : F.id : (E = i.options.value[i.activeOptionIndex.value]) == null ? void 0 : E.id, "aria-labelledby": (f = (L = B(i.labelRef)) == null ? void 0 : L.id) != null ? f : (A = B(i.buttonRef)) == null ? void 0 : A.id, "aria-autocomplete": "list", id: a, onCompositionstart: h, onCompositionend: b, onKeydown: V, onInput: w, onFocus: S, onBlur: m, role: "combobox", type: (v = t.type) != null ? v : "text", tabIndex: 0, ref: i.inputRef, defaultValue: M.value, disabled: i.disabled.value === !0 ? !0 : void 0 };
+    let O = { open: i.comboboxState.value === 0 }, { displayValue: k, onChange: P, ...Z } = e, K = { "aria-controls": (_ = i.optionsRef.value) == null ? void 0 : _.id, "aria-expanded": i.comboboxState.value === 0, "aria-activedescendant": i.activeOptionIndex.value === null ? void 0 : i.virtual.value ? (F = i.options.value.find((e2) => !i.virtual.value.disabled(e2.dataRef.value) && i.compare(e2.dataRef.value, i.virtual.value.options[i.activeOptionIndex.value]))) == null ? void 0 : F.id : (E = i.options.value[i.activeOptionIndex.value]) == null ? void 0 : E.id, "aria-labelledby": (f = (L = B(i.labelRef)) == null ? void 0 : L.id) != null ? f : (A = B(i.buttonRef)) == null ? void 0 : A.id, "aria-autocomplete": "list", id: a, onCompositionstart: h, onCompositionend: b, onKeydown: V, onInput: w, onFocus: T, onBlur: m, role: "combobox", type: (v = t.type) != null ? v : "text", tabIndex: 0, ref: i.inputRef, defaultValue: M.value, disabled: i.disabled.value === !0 ? !0 : void 0 };
     return w2({ ourProps: K, theirProps: Z, slot: O, attrs: t, slots: o, features: A2.RenderStrategy | A2.Static, name: "ComboboxInput" });
   };
 } }), f1 = p2({ name: "ComboboxOptions", props: { as: { type: [Object, String], default: "ul" }, static: { type: Boolean, default: !1 }, unmount: { type: Boolean, default: !0 }, hold: { type: [Boolean], default: !1 } }, setup(e, { attrs: n, slots: t, expose: o }) {
@@ -1288,8 +1288,8 @@ let c1 = p2({ name: "ComboboxButton", props: { as: { type: [Object, String], def
   }), f2(() => {
     l.optionsPropsRef.value.hold = e.hold;
   });
-  let a = e1(), i = T(() => a !== null ? (a.value & B2.Open) === B2.Open : l.comboboxState.value === 0);
-  Jt({ container: T(() => B(l.optionsRef)), enabled: T(() => l.comboboxState.value === 0), accept(u) {
+  let a = e1(), i = $(() => a !== null ? (a.value & B2.Open) === B2.Open : l.comboboxState.value === 0);
+  Jt({ container: $(() => B(l.optionsRef)), enabled: $(() => l.comboboxState.value === 0), accept(u) {
     return u.getAttribute("role") === "option" ? NodeFilter.FILTER_REJECT : u.hasAttribute("role") ? NodeFilter.FILTER_SKIP : NodeFilter.FILTER_ACCEPT;
   }, walk(u) {
     u.setAttribute("role", "none");
@@ -1303,50 +1303,50 @@ let c1 = p2({ name: "ComboboxButton", props: { as: { type: [Object, String], def
     return w2({ ourProps: h, theirProps: b, slot: x, attrs: n, slots: l.virtual.value && l.comboboxState.value === 0 ? { ...t, default: () => [V2(r1, {}, t.default)] } : t, features: A2.RenderStrategy | A2.Static, visible: i.value, name: "ComboboxOptions" });
   };
 } }), v1 = p2({ name: "ComboboxOption", props: { as: { type: [Object, String], default: "li" }, value: { type: [Object, String, Number, Boolean] }, disabled: { type: Boolean, default: !1 }, order: { type: [Number], default: null } }, setup(e, { slots: n, attrs: t, expose: o }) {
-  let l = y2("ComboboxOption"), s = `headlessui-combobox-option-${P2()}`, a = I(null), i = T(() => e.disabled);
+  let l = y2("ComboboxOption"), s = `headlessui-combobox-option-${P2()}`, a = S(null), i = $(() => e.disabled);
   o({ el: a, $el: a });
-  let r = T(() => {
+  let r = $(() => {
     var m;
     return l.virtual.value ? l.activeOptionIndex.value === l.calculateIndex(e.value) : l.activeOptionIndex.value === null ? !1 : ((m = l.options.value[l.activeOptionIndex.value]) == null ? void 0 : m.id) === s;
-  }), u = T(() => l.isSelected(e.value)), c = l2(we, null), d = T(() => ({ disabled: e.disabled, value: e.value, domRef: a, order: T(() => e.order) }));
+  }), u = $(() => l.isSelected(e.value)), c = l2(we, null), d = $(() => ({ disabled: e.disabled, value: e.value, domRef: a, order: $(() => e.order) }));
   s2(() => l.registerOption(s, d)), R2(() => l.unregisterOption(s, r.value)), f2(() => {
     let m = B(a);
     m && (c == null || c.value.measureElement(m));
   }), f2(() => {
     l.comboboxState.value === 0 && r.value && (l.virtual.value || l.activationTrigger.value !== 0 && Q(() => {
-      var m, S;
-      return (S = (m = B(a)) == null ? void 0 : m.scrollIntoView) == null ? void 0 : S.call(m, { block: "nearest" });
+      var m, T;
+      return (T = (m = B(a)) == null ? void 0 : m.scrollIntoView) == null ? void 0 : T.call(m, { block: "nearest" });
     }));
   });
   function x(m) {
     m.preventDefault(), m.button === ge.Left && (i.value || (l.selectOption(s), de() || requestAnimationFrame(() => {
-      var S;
-      return (S = B(l.inputRef)) == null ? void 0 : S.focus({ preventScroll: !0 });
+      var T;
+      return (T = B(l.inputRef)) == null ? void 0 : T.focus({ preventScroll: !0 });
     }), l.mode.value === 0 && l.closeCombobox()));
   }
   function h() {
     var m;
     if (e.disabled || (m = l.virtual.value) != null && m.disabled(e.value)) return l.goToOption(W.Nothing);
-    let S = l.calculateIndex(e.value);
-    l.goToOption(W.Specific, S);
+    let T = l.calculateIndex(e.value);
+    l.goToOption(W.Specific, T);
   }
   let b = Gt();
   function g(m) {
     b.update(m);
   }
   function V(m) {
-    var S;
-    if (!b.wasMoved(m) || e.disabled || (S = l.virtual.value) != null && S.disabled(e.value) || r.value) return;
+    var T;
+    if (!b.wasMoved(m) || e.disabled || (T = l.virtual.value) != null && T.disabled(e.value) || r.value) return;
     let M = l.calculateIndex(e.value);
     l.goToOption(W.Specific, M, 0);
   }
   function w(m) {
-    var S;
-    b.wasMoved(m) && (e.disabled || (S = l.virtual.value) != null && S.disabled(e.value) || r.value && (l.optionsPropsRef.value.hold || l.goToOption(W.Nothing)));
+    var T;
+    b.wasMoved(m) && (e.disabled || (T = l.virtual.value) != null && T.disabled(e.value) || r.value && (l.optionsPropsRef.value.hold || l.goToOption(W.Nothing)));
   }
   return () => {
-    let { disabled: m } = e, S = { active: r.value, selected: u.value, disabled: m }, M = { id: s, ref: a, role: "option", tabIndex: m === !0 ? void 0 : -1, "aria-disabled": m === !0 ? !0 : void 0, "aria-selected": u.value, disabled: void 0, onMousedown: x, onFocus: h, onPointerenter: g, onMouseenter: g, onPointermove: V, onMousemove: V, onPointerleave: w, onMouseleave: w }, _ = n0(e, ["order", "value"]);
-    return w2({ ourProps: M, theirProps: _, slot: S, attrs: t, slots: n, name: "ComboboxOption" });
+    let { disabled: m } = e, T = { active: r.value, selected: u.value, disabled: m }, M = { id: s, ref: a, role: "option", tabIndex: m === !0 ? void 0 : -1, "aria-disabled": m === !0 ? !0 : void 0, "aria-selected": u.value, disabled: void 0, onMousedown: x, onFocus: h, onPointerenter: g, onMouseenter: g, onPointermove: V, onMousemove: V, onPointerleave: w, onMouseleave: w }, _ = n0(e, ["order", "value"]);
+    return w2({ ourProps: M, theirProps: _, slot: T, attrs: t, slots: n, name: "ComboboxOption" });
   };
 } });
 function p1(e, n) {
@@ -1954,7 +1954,7 @@ function R1(e, n) {
         });
       });
     }, !0), n._customProperties.forEach((a) => {
-      R(() => $(n[a]), (i, r) => {
+      R(() => I(n[a]), (i, r) => {
         t.notifyComponentUpdate(), t.sendInspectorState(G), L2 && t.addTimelineEvent({
           layerId: g2,
           event: {
@@ -2043,7 +2043,7 @@ function P1({ app: e, store: n, options: t }) {
   );
 }
 function N1() {
-  const e = ie(!0), n = e.run(() => I({}));
+  const e = ie(!0), n = e.run(() => S({}));
   let t = [], o = [];
   const l = C2({
     install(s) {
@@ -2116,9 +2116,9 @@ function W0(e, n, t, o) {
     !i && (process.env.NODE_ENV === "production" || !o) && (t.state.value[e] = l ? l() : {});
     const c = process.env.NODE_ENV !== "production" && o ? (
       // use ref() to unwrap refs inside state TODO: check if this is still necessary
-      A0(I(l ? l() : {}).value)
+      A0(S(l ? l() : {}).value)
     ) : A0(t.state.value[e]);
-    return t2(c, s, Object.keys(a || {}).reduce((d, x) => (process.env.NODE_ENV !== "production" && x in c && console.warn(`[🍍]: A getter cannot have the same name as another state property. Rename one of them. Found with "${x}" in store "${e}".`), d[x] = C2(T(() => {
+    return t2(c, s, Object.keys(a || {}).reduce((d, x) => (process.env.NODE_ENV !== "production" && x in c && console.warn(`[🍍]: A getter cannot have the same name as another state property. Rename one of them. Found with "${x}" in store "${e}".`), d[x] = C2($(() => {
       H2(t);
       const h = t._s.get(e);
       return a[x].call(h, h);
@@ -2141,7 +2141,7 @@ function g0(e, n, t = {}, o, l, s) {
   let u, c, d = [], x = [], h;
   const b = o.state.value[e];
   !s && !b && (process.env.NODE_ENV === "production" || !l) && (o.state.value[e] = {});
-  const g = I({});
+  const g = S({});
   let V;
   function w(f) {
     let v;
@@ -2171,7 +2171,7 @@ function g0(e, n, t = {}, o, l, s) {
       throw new Error(`🍍: Store "${e}" is built using the setup syntax and does not implement $reset().`);
     } : Ae
   );
-  function S() {
+  function T() {
     a.stop(), d = [], x = [], o._s.delete(e);
   }
   function M(f, v) {
@@ -2222,7 +2222,7 @@ function g0(e, n, t = {}, o, l, s) {
       }, t2({}, r, v)));
       return O;
     },
-    $dispose: S
+    $dispose: T
   }, E = se(process.env.NODE_ENV !== "production" || k2 ? t2(
     {
       _hmrPayload: _,
@@ -2276,7 +2276,7 @@ function g0(e, n, t = {}, o, l, s) {
     for (const v in f._hmrPayload.getters) {
       const O = f._hmrPayload.getters[v], k = s ? (
         // special handling of options api
-        T(() => (H2(o), O.call(E, E)))
+        $(() => (H2(o), O.call(E, E)))
       ) : O;
       U2(E, v, k);
     }
@@ -2350,7 +2350,7 @@ This will fail in production.`);
   return a.$id = o, a;
 }
 const x2 = N2("loader", () => {
-  const e = I({
+  const e = S({
     translation: !1,
     aiExplanation: !1,
     writing: !1
@@ -2371,32 +2371,32 @@ const x2 = N2("loader", () => {
   }),
   emits: ["update:modelValue"],
   setup(e) {
-    const n = x2(), t = e, o = qe(e, "modelValue"), l = I(""), s = I(null), a = T(() => Object.entries(t.languages).filter(
+    const n = x2(), t = e, o = qe(e, "modelValue"), l = S(""), s = S(null), a = $(() => Object.entries(t.languages).filter(
       ([, r]) => r.toLowerCase().includes(l.value.toLowerCase())
     )), i = (r) => {
       r.target.value = "", l.value = "", s.value && s.value.$el.click();
     };
-    return (r, u) => (C(), q($(u1), {
+    return (r, u) => (C(), q(I(u1), {
       modelValue: o.value,
       "onUpdate:modelValue": u[3] || (u[3] = (c) => o.value = c),
-      disabled: $(n).loading,
+      disabled: I(n).loading,
       as: "div",
       class: "relative mt-1"
     }, {
       default: Z2(() => [
-        D($(d1), {
+        D(I(d1), {
           class: "w-full bg-white border border-gray-300 rounded py-2.5 pl-3 pr-10 text-sm text-gray-800 font-medium focus:outline-none focus:ring-0.5 focus:ring-gray-400 focus:border-gray-400",
           onChange: u[0] || (u[0] = (c) => l.value = c.target.value),
           displayValue: (c) => e.languages[c],
           onFocus: u[1] || (u[1] = (c) => i(c))
         }, null, 8, ["displayValue"]),
-        D($(c1), {
+        D(I(c1), {
           ref_key: "btnSelect",
           ref: s,
           class: "absolute inset-y-0 right-0 flex items-center pr-2"
         }, {
           default: Z2(() => [
-            D($(h1), {
+            D(I(h1), {
               class: "h-5 w-5 text-gray-400",
               "aria-hidden": "true",
               onClick: u[2] || (u[2] = (c) => i(c))
@@ -2404,9 +2404,9 @@ const x2 = N2("loader", () => {
           ]),
           _: 1
         }, 512),
-        D($(f1), { class: "absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm z-50" }, {
+        D(I(f1), { class: "absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm z-50" }, {
           default: Z2(() => [
-            (C(!0), y(j, null, X(a.value, ([c, d]) => (C(), q($(v1), {
+            (C(!0), y(j, null, X(a.value, ([c, d]) => (C(), q(I(v1), {
               key: c,
               value: c
             }, {
@@ -2453,7 +2453,7 @@ const x2 = N2("loader", () => {
   },
   emits: ["swap"],
   setup(e, { emit: n }) {
-    const t = x2(), o = T(() => t.isLoading("translation")), l = n;
+    const t = x2(), o = $(() => t.isLoading("translation")), l = n;
     return (s, a) => e.isBidirect ? (C(), y("button", {
       key: 1,
       onClick: a[0] || (a[0] = (i) => l("swap")),
@@ -2464,10 +2464,10 @@ const x2 = N2("loader", () => {
     }, q1, 8, U1));
   }
 }, T2 = N2("language", () => {
-  const e = I("auto"), n = I("vi"), t = I({
+  const e = S("auto"), n = S("vi"), t = S({
     src: [],
     target: []
-  }), o = T(() => t.value.src[e.value]), l = T(() => t.value.target[n.value]);
+  }), o = $(() => t.value.src[e.value]), l = $(() => t.value.target[n.value]);
   function s(r, u) {
     e.value = r == null ? void 0 : r.src, n.value = r == null ? void 0 : r.target, t.value = u;
   }
@@ -2492,7 +2492,7 @@ const x2 = N2("loader", () => {
 }, sn = ["onClick"], an = { class: "flex" }, rn = { class: "grow flex flex-col" }, un = { class: "grow flex flex-col" }, G0 = 3, cn = {
   __name: "Selects",
   setup(e) {
-    const n = T2(), t = I([]), o = I([]);
+    const n = T2(), t = S([]), o = S([]);
     function l() {
       n.swap();
     }
@@ -2509,15 +2509,15 @@ const x2 = N2("loader", () => {
       (s) => {
         s && (o.value.includes(s) || (o.value.unshift(s), o.value = o.value.slice(0, G0), j2.setLocalStorage("recentTarget", o.value)));
       }
-    ), (s, a) => $(n).languages ? (C(), y("div", X1, [
+    ), (s, a) => I(n).languages ? (C(), y("div", X1, [
       p("div", K1, [
         p("div", en, [
           t.value.length > 0 ? (C(), y("div", tn, [
             (C(!0), y(j, null, X(t.value, (i) => (C(), y("button", {
               key: i,
               class: "px-1 bg-baseColor border border-primaryColor text-primaryColor text-xs rounded hover:bg-primaryColor hover:text-baseColor",
-              onClick: (r) => $(n).src = i
-            }, J($(n).languages.src[i]), 9, nn))), 128))
+              onClick: (r) => I(n).src = i
+            }, J(I(n).languages.src[i]), 9, nn))), 128))
           ])) : H("", !0)
         ]),
         p("div", on, [
@@ -2525,30 +2525,30 @@ const x2 = N2("loader", () => {
             (C(!0), y(j, null, X(o.value, (i) => (C(), y("button", {
               key: i,
               class: "px-1 bg-baseColor border border-primaryColor text-primaryColor text-xs rounded hover:bg-primaryColor hover:text-baseColor",
-              onClick: (r) => $(n).target = i
-            }, J($(n).languages.target[i]), 9, sn))), 128))
+              onClick: (r) => I(n).target = i
+            }, J(I(n).languages.target[i]), 9, sn))), 128))
           ])) : H("", !0)
         ])
       ]),
       p("div", an, [
         p("div", rn, [
           D(q0, {
-            modelValue: $(n).src,
-            "onUpdate:modelValue": a[0] || (a[0] = (i) => $(n).src = i),
-            languages: $(n).languages.src,
+            modelValue: I(n).src,
+            "onUpdate:modelValue": a[0] || (a[0] = (i) => I(n).src = i),
+            languages: I(n).languages.src,
             class: "grow"
           }, null, 8, ["modelValue", "languages"])
         ]),
         D(Q1, {
-          isBidirect: $(n).src !== "auto",
+          isBidirect: I(n).src !== "auto",
           class: "grow-0 mx-3 mt-4 self-start",
           onSwap: l
         }, null, 8, ["isBidirect"]),
         p("div", un, [
           D(q0, {
-            modelValue: $(n).target,
-            "onUpdate:modelValue": a[1] || (a[1] = (i) => $(n).target = i),
-            languages: $(n).languages.target,
+            modelValue: I(n).target,
+            "onUpdate:modelValue": a[1] || (a[1] = (i) => I(n).target = i),
+            languages: I(n).languages.target,
             class: "grow"
           }, null, 8, ["modelValue", "languages"])
         ])
@@ -2570,7 +2570,7 @@ function vn(e, n) {
   return C(), y("span", fn);
 }
 const M0 = /* @__PURE__ */ h2(dn, [["render", vn]]), m0 = N2("tts", () => {
-  const e = I({
+  const e = S({
     src: null,
     target: null
   });
@@ -2604,7 +2604,7 @@ const M0 = /* @__PURE__ */ h2(dn, [["render", vn]]), m0 = N2("tts", () => {
   },
   emits: ["loadTTS"],
   setup(e, { emit: n }) {
-    const t = m0(), o = e, l = n, s = T(() => t.tts[o.type]), a = I(!1), i = new Audio();
+    const t = m0(), o = e, l = n, s = $(() => t.tts[o.type]), a = S(!1), i = new Audio(), r = S(!1);
     R(
       s,
       () => {
@@ -2612,36 +2612,36 @@ const M0 = /* @__PURE__ */ h2(dn, [["render", vn]]), m0 = N2("tts", () => {
           a.value = !1;
           return;
         }
-        u();
+        r.value && (r.value = !1, c());
       },
       { immediate: !0 }
     ), R2(() => {
-      c(), i.src = "";
+      d(), i.src = "";
     });
-    function r() {
+    function u() {
       if (s.value) {
-        u();
+        c();
         return;
       }
-      a.value = !0, l("loadTTS");
+      r.value = !0, a.value = !0, l("loadTTS");
     }
-    function u() {
-      s.value && (i.src = s.value, a.value = !0, i.play().catch(() => {
+    function c() {
+      s.value && (i.src = s.value, i.playbackRate = 0.7, a.value = !0, i.play().catch(() => {
         a.value = !1;
       }));
     }
-    function c() {
+    function d() {
       i.pause(), i.currentTime = 0, a.value = !1;
     }
     return i.onended = () => {
       a.value = !1;
-    }, (d, x) => a.value ? (C(), y("button", {
+    }, (x, h) => a.value ? (C(), y("button", {
       key: 1,
       class: "btn btn-xs btn-circle",
-      onClick: d0(c, ["prevent"])
+      onClick: d0(d, ["prevent"])
     }, [
       p("img", {
-        src: $(hn),
+        src: I(hn),
         alt: "Stop",
         class: "w-4"
       }, null, 8, Cn)
@@ -2652,10 +2652,10 @@ const M0 = /* @__PURE__ */ h2(dn, [["render", vn]]), m0 = N2("tts", () => {
         { "!bg-transparent !border-none !shadow-none !ring-0": e.disabled }
       ]]),
       disabled: e.disabled,
-      onClick: d0(r, ["prevent"])
+      onClick: d0(u, ["prevent"])
     }, [
       p("img", {
-        src: $(pn),
+        src: I(pn),
         alt: "Play",
         class: N(["w-4", [{ "opacity-100": !e.disabled }, { "opacity-50 transform ": e.disabled }]])
       }, null, 10, mn)
@@ -2679,7 +2679,7 @@ const M0 = /* @__PURE__ */ h2(dn, [["render", vn]]), m0 = N2("tts", () => {
         disabled: e.disabled
       }, [
         p("img", {
-          src: $(xn),
+          src: I(xn),
           alt: "Clear",
           class: N(["w-4", [{ "opacity-100": !e.disabled }, { "opacity-50 transform ": e.disabled }]])
         }, null, 10, _n)
@@ -2705,7 +2705,7 @@ const M0 = /* @__PURE__ */ h2(dn, [["render", vn]]), m0 = N2("tts", () => {
         disabled: e.disabled
       }, [
         p("img", {
-          src: e.isFilled ? $(En) : $(Ln),
+          src: e.isFilled ? I(En) : I(Ln),
           alt: "Favorite",
           class: N(["w-4", [{ "opacity-100": !e.disabled }, { "opacity-50 transform ": e.disabled }]])
         }, null, 10, $n)
@@ -2731,7 +2731,7 @@ const M0 = /* @__PURE__ */ h2(dn, [["render", vn]]), m0 = N2("tts", () => {
         disabled: e.disabled
       }, [
         p("img", {
-          src: e.isFilled ? $(On) : $(Mn),
+          src: e.isFilled ? I(On) : I(Mn),
           alt: "AI",
           class: N(["w-4", [{ "opacity-100": !e.disabled }, { "opacity-50 transform ": e.disabled }]])
         }, null, 10, Fn)
@@ -2744,7 +2744,7 @@ const M0 = /* @__PURE__ */ h2(dn, [["render", vn]]), m0 = N2("tts", () => {
     disabled: Boolean
   },
   setup(e) {
-    const n = I("Copy"), t = () => {
+    const n = S("Copy"), t = () => {
       n.value = "Copied", setTimeout(() => {
         n.value = "Copy";
       }, 1e3);
@@ -2762,7 +2762,7 @@ const M0 = /* @__PURE__ */ h2(dn, [["render", vn]]), m0 = N2("tts", () => {
         onClick: t
       }, [
         p("img", {
-          src: $(Bn),
+          src: I(Bn),
           alt: "Copy",
           class: N(["w-3", [{ "opacity-100": !e.disabled }, { "opacity-50 transform ": e.disabled }]])
         }, null, 10, Rn)
@@ -2873,13 +2873,13 @@ const M0 = /* @__PURE__ */ h2(dn, [["render", vn]]), m0 = N2("tts", () => {
     ]));
   }
 }, Re = /* @__PURE__ */ h2(zn, [["__scopeId", "data-v-a687b916"]]), v2 = N2("translation", () => {
-  const e = I(null), n = I(null), t = I(null), o = I({
+  const e = S(null), n = S(null), t = S(null), o = S({
     src: null,
     target: null
-  }), l = I(null), s = I([]), a = I([]), i = I([]), r = I([]), u = I({
+  }), l = S(null), s = S([]), a = S([]), i = S([]), r = S([]), u = S({
     src: null,
     target: null
-  }), c = T2(), d = T(() => c.getLabel(e.value)), x = T(() => c.getLabel(n.value));
+  }), c = T2(), d = $(() => c.getLabel(e.value)), x = $(() => c.getLabel(n.value));
   function h(g) {
     e.value = g.src, n.value = g.target, t.value = g.text, o.value = g.phonetic, l.value = g.result, s.value = g.dictionary, a.value = g.definitions, i.value = g.synonyms, r.value = g.examples, u.value = g.tts;
   }
@@ -2913,7 +2913,7 @@ function Un(e) {
   return re() ? (_0(e), !0) : !1;
 }
 function X2(e) {
-  return typeof e == "function" ? e() : $(e);
+  return typeof e == "function" ? e() : I(e);
 }
 const Wn = typeof window < "u" && typeof document < "u";
 typeof WorkerGlobalScope < "u" && globalThis instanceof WorkerGlobalScope;
@@ -2956,21 +2956,21 @@ function Y0(e) {
 }
 const Yn = Wn ? window : void 0;
 function Qn() {
-  const e = I(!1), n = ae();
+  const e = S(!1), n = ae();
   return n && s2(() => {
     e.value = !0;
   }, n), e;
 }
 function Xn(e) {
   const n = Qn();
-  return T(() => (n.value, !!e()));
+  return $(() => (n.value, !!e()));
 }
 function Kn(e, n, t = {}) {
   const { window: o = Yn, ...l } = t;
   let s;
   const a = Xn(() => o && "ResizeObserver" in o), i = () => {
     s && (s.disconnect(), s = void 0);
-  }, r = T(() => Array.isArray(e) ? e.map((d) => Y0(d)) : [Y0(e)]), u = R(
+  }, r = $(() => Array.isArray(e) ? e.map((d) => Y0(d)) : [Y0(e)]), u = R(
     r,
     (d) => {
       if (i(), a.value && o) {
@@ -2990,7 +2990,7 @@ function Kn(e, n, t = {}) {
 }
 function l0(e) {
   var n;
-  const t = I(e == null ? void 0 : e.element), o = I(e == null ? void 0 : e.input), l = (n = e == null ? void 0 : e.styleProp) != null ? n : "height", s = I(1);
+  const t = S(e == null ? void 0 : e.element), o = S(e == null ? void 0 : e.input), l = (n = e == null ? void 0 : e.styleProp) != null ? n : "height", s = S(1);
   function a() {
     var i;
     if (!t.value)
@@ -3021,7 +3021,7 @@ const eo = { class: "bg-white relative z-10 border rounded" }, to = {
   },
   emits: ["change", "clear", "loadTTS"],
   setup(e, { emit: n }) {
-    const t = v2(), o = e, l = I(o.text), s = T(() => t.src), a = T(() => t.srcLabel), i = T(() => {
+    const t = v2(), o = e, l = S(o.text), s = $(() => t.src), a = $(() => t.srcLabel), i = $(() => {
       var b;
       return (b = t.phonetic) == null ? void 0 : b.src;
     }), { textarea: r } = l0({ input: l, styleProp: "minHeight" }), u = n, c = Jn(() => {
@@ -3092,10 +3092,10 @@ const eo = { class: "bg-white relative z-10 border rounded" }, to = {
   },
   emits: ["loadTTS", "favorite", "aiTranslate", "copy"],
   setup(e, { emit: n }) {
-    const t = v2(), o = T(() => t.result), l = T(() => t.target), s = T(() => t.targetLabel), a = T(() => {
+    const t = v2(), o = $(() => t.result), l = $(() => t.target), s = $(() => t.targetLabel), a = $(() => {
       var x;
       return (x = t.phonetic) == null ? void 0 : x.target;
-    }), i = x2(), r = T(() => i.isLoading("translation")), { textarea: u, input: c } = l0({ input: o, styleProp: "minHeight" }), d = n;
+    }), i = x2(), r = $(() => i.isLoading("translation")), { textarea: u, input: c } = l0({ input: o, styleProp: "minHeight" }), d = n;
     return (x, h) => (C(), y("div", {
       class: N([
         "relative p-0.5 bg-[length:300%_300%] bg-[position:0%_50%] border rounded",
@@ -3132,7 +3132,7 @@ const eo = { class: "bg-white relative z-10 border rounded" }, to = {
             rows: "2",
             spellcheck: "false"
           }, null, 512), [
-            [t0, $(c)]
+            [t0, I(c)]
           ])
         ])
       ])
@@ -3146,10 +3146,10 @@ const eo = { class: "bg-white relative z-10 border rounded" }, to = {
   setup(e) {
     const n = e;
     return (t, o) => (C(), y("button", ao, [
-      n.isExpanded ? (C(), q($(g1), {
+      n.isExpanded ? (C(), q(I(g1), {
         key: 0,
         class: "w-7 text-gray-400"
-      })) : (C(), q($(p1), {
+      })) : (C(), q(I(p1), {
         key: 1,
         class: "w-7 text-gray-400"
       }))
@@ -3159,7 +3159,7 @@ const eo = { class: "bg-white relative z-10 border rounded" }, to = {
   __name: "Dictionary",
   emits: ["translate"],
   setup(e, { emit: n }) {
-    const t = I(!0), o = v2(), l = T2(), s = T(() => o.dictionary), a = n, i = () => {
+    const t = S(!0), o = v2(), l = T2(), s = $(() => o.dictionary), a = n, i = () => {
       t.value = !t.value;
     }, r = (u) => {
       a("translate", u, o.target, o.src), l.src = o.target, l.target = o.src, window.scrollTo(0, 0);
@@ -3203,7 +3203,7 @@ const eo = { class: "bg-white relative z-10 border rounded" }, to = {
 }, xo = {
   __name: "Definition",
   setup(e) {
-    const n = I(!0), t = v2(), o = T(() => t.definitions), l = () => {
+    const n = S(!0), t = v2(), o = $(() => t.definitions), l = () => {
       n.value = !n.value;
     };
     return (s, a) => (C(), y(j, null, [
@@ -3241,7 +3241,7 @@ const eo = { class: "bg-white relative z-10 border rounded" }, to = {
 }, wo = /* @__PURE__ */ p("h2", { class: "card-title text-base font-bold text-textCustom" }, "Examples", -1), yo = { class: "text-textCustom text-sm list-disc list-outside ml-5 my-2" }, _o = ["innerHTML"], Eo = {
   __name: "Example",
   setup(e) {
-    const n = I(!0), t = v2(), o = T(() => t.examples), l = () => {
+    const n = S(!0), t = v2(), o = $(() => t.examples), l = () => {
       n.value = !n.value;
     };
     return (s, a) => (C(), y(j, null, [
@@ -3268,7 +3268,7 @@ const eo = { class: "bg-white relative z-10 border rounded" }, to = {
   __name: "Synonyms",
   emits: ["translate"],
   setup(e, { emit: n }) {
-    const t = I(!0), o = v2(), l = T(() => o.synonyms), s = n, a = () => {
+    const t = S(!0), o = v2(), l = $(() => o.synonyms), s = n, a = () => {
       t.value = !t.value;
     }, i = (r) => {
       s("translate", r), window.scrollTo(0, 0);
@@ -3324,7 +3324,7 @@ const eo = { class: "bg-white relative z-10 border rounded" }, to = {
       disabled: e.disabled
     }, [
       p("img", {
-        src: e.isExpanded ? $(Mo) : $(ko),
+        src: e.isExpanded ? I(Mo) : I(ko),
         alt: "AI",
         class: N(["w-6", [{ "opacity-100": !e.disabled }, { "opacity-50 transform ": e.disabled }]])
       }, null, 10, Fo)
@@ -3351,7 +3351,7 @@ const eo = { class: "bg-white relative z-10 border rounded" }, to = {
   },
   emits: ["aiExplain"],
   setup(e, { emit: n }) {
-    const t = x2(), o = T(() => t.isLoading("aiExplanation")), l = n;
+    const t = x2(), o = $(() => t.isLoading("aiExplanation")), l = n;
     function s() {
       l("aiExplain");
     }
@@ -3445,7 +3445,7 @@ const Q0 = {
     "copy"
   ],
   setup(e, { emit: n }) {
-    const t = I(""), o = e, l = l2("translationStore"), s = l2("ttsStore"), a = l2("languageStore"), i = l2("loaderStore"), r = n, u = () => {
+    const t = S(""), o = e, l = l2("translationStore"), s = l2("ttsStore"), a = l2("languageStore"), i = l2("loaderStore"), r = n, u = () => {
       const w = o.opt.target;
       Wo.includes(w) ? Q0.supportRTL() : Q0.removeRTL();
     };
@@ -3488,10 +3488,10 @@ const Q0 = {
       const m = w === "src" ? l.text : l.result;
       r("loadTTS", { type: w, data: m });
     }
-    function h(w, m = a.src, S = a.target) {
+    function h(w, m = a.src, T = a.target) {
       w && (V(), t.value = w, i.setLoading("translation", !0), r("translate", {
         src: m,
-        target: S,
+        target: T,
         text: w
       }));
     }
@@ -3514,7 +3514,7 @@ const Q0 = {
       w && w.getBoundingClientRect().top < 0 && w.scrollIntoView({ behavior: "smooth" });
     }
     return (w, m) => {
-      var S, M, _, F, E;
+      var T, M, _, F, E;
       return C(), y("div", Go, [
         D(cn),
         p("div", Jo, [
@@ -3538,7 +3538,7 @@ const Q0 = {
               isTTS: e.isTTS,
               onCopy: m[1] || (m[1] = (L) => {
                 var A;
-                return w.$emit("copy", (A = $(l)) == null ? void 0 : A.result);
+                return w.$emit("copy", (A = I(l)) == null ? void 0 : A.result);
               }),
               onAiTranslate: b,
               onFavorite: m[2] || (m[2] = (L) => w.$emit("favorite")),
@@ -3548,29 +3548,29 @@ const Q0 = {
           ])
         ]),
         e.translation ? (C(), y("div", Ko, [
-          ((S = $(l).result) == null ? void 0 : S.length) > e.aiExplainMinLength ? (C(), y("div", el, [
+          ((T = I(l).result) == null ? void 0 : T.length) > e.aiExplainMinLength ? (C(), y("div", el, [
             D(jo, {
               isAIExplain: e.isAIExplain,
               explanation: e.explanation,
               onAiExplain: g
             }, null, 8, ["isAIExplain", "explanation"])
           ])) : H("", !0),
-          (M = $(l).dictionary) != null && M.length ? (C(), y("div", tl, [
+          (M = I(l).dictionary) != null && M.length ? (C(), y("div", tl, [
             p("div", nl, [
               D(po, { onTranslate: h })
             ])
           ])) : H("", !0),
-          (_ = $(l).definitions) != null && _.length ? (C(), y("div", ol, [
+          (_ = I(l).definitions) != null && _.length ? (C(), y("div", ol, [
             p("div", ll, [
               D(xo)
             ])
           ])) : H("", !0),
-          (F = $(l).synonyms) != null && F.length ? (C(), y("div", sl, [
+          (F = I(l).synonyms) != null && F.length ? (C(), y("div", sl, [
             p("div", il, [
               D(Oo, { onTranslate: h })
             ])
           ])) : H("", !0),
-          (E = $(l).examples) != null && E.length ? (C(), y("div", al, [
+          (E = I(l).examples) != null && E.length ? (C(), y("div", al, [
             p("div", rl, [
               D(Eo)
             ])
@@ -3593,7 +3593,7 @@ const Q0 = {
       "aria-label": "Retry"
     }, [
       p("img", {
-        src: $(fl),
+        src: I(fl),
         alt: "Retry",
         class: N(["h-5 w-5 text-primaryColor", { "opacity-50": e.disabled }])
       }, null, 10, pl)
@@ -3620,7 +3620,7 @@ const Q0 = {
         onClick: t[0] || (t[0] = (o) => n.$emit("toggle"))
       }, [
         p("img", {
-          src: e.isDiffMode ? $(gl) : $(ml),
+          src: e.isDiffMode ? I(gl) : I(ml),
           alt: e.isDiffMode ? "Hide Differences" : "Show Differences",
           class: N(["w-4", [{ "opacity-100": !e.disabled }, { "opacity-50 transform ": e.disabled }]])
         }, null, 10, xl)
@@ -3695,7 +3695,7 @@ const Q0 = {
   },
   emits: ["change", "clear", "improve"],
   setup(e, { emit: n }) {
-    const t = e, o = I(t.text), { textarea: l } = l0({ input: o, styleProp: "minHeight" }), s = n;
+    const t = e, o = S(t.text), { textarea: l } = l0({ input: o, styleProp: "minHeight" }), s = n;
     function a() {
       if (!o.value) {
         i();
@@ -3739,7 +3739,7 @@ const Q0 = {
         onInput: a,
         onFocus: r,
         onKeydown: Ge(d0(u, ["ctrl", "prevent"]), ["enter"]),
-        placeholder: `Min ${$($2).IMPROVE_INPUT_MIN_LENGTH} characters. ${$(f0) ? "" : "Ctrl+Enter to improve"}`
+        placeholder: `Min ${I($2).IMPROVE_INPUT_MIN_LENGTH} characters. ${I(f0) ? "" : "Ctrl+Enter to improve"}`
       }, null, 40, Ll), [
         [
           t0,
@@ -3803,9 +3803,9 @@ a2.prototype = {
       })();
     else
       for (; c <= d && Date.now() <= h; ) {
-        var S = m();
-        if (S)
-          return S;
+        var T = m();
+        if (T)
+          return T;
       }
   },
   addToPath: function(n, t, o, l, s) {
@@ -3997,7 +3997,7 @@ function ne(e, n, t, o) {
     var g = o.value.match(/^\s*/)[0], V = n.value.match(/\s*$/)[0], w = te(V, g);
     n.value = W2(n.value, w);
   } else if (e) {
-    var m = e.value.match(/\s*$/)[0], S = n.value.match(/^\s*/)[0], M = te(m, S);
+    var m = e.value.match(/\s*$/)[0], T = n.value.match(/^\s*/)[0], M = te(m, T);
     n.value = O2(n.value, M);
   }
 }
@@ -4105,7 +4105,7 @@ const Vl = { class: "bg-white relative z-10 border rounded" }, Fl = { class: "fl
   },
   emits: ["copy", "change", "clear"],
   setup(e, { emit: n }) {
-    const t = e, o = x2(), l = T(() => o.isLoading("writing")), s = T(() => l.value ? "" : t.text), a = I(""), i = I($2.DEFAULT_DIFF_MODE), { textarea: r } = l0({ input: s, styleProp: "minHeight" }), u = n;
+    const t = e, o = x2(), l = $(() => o.isLoading("writing")), s = $(() => l.value ? "" : t.text), a = S(""), i = S($2.DEFAULT_DIFF_MODE), { textarea: r } = l0({ input: s, styleProp: "minHeight" }), u = n;
     function c() {
       !l.value && s.value && u("copy", s.value);
     }
@@ -4196,7 +4196,7 @@ const Vl = { class: "bg-white relative z-10 border rounded" }, Fl = { class: "fl
   },
   emits: ["update:modelValue", "action"],
   setup(e, { emit: n }) {
-    const t = e, o = n, l = I(!1), s = I(t.modelValue), a = I(null), i = T(() => t.options.find((h) => h.value === s.value) || t.options[0]);
+    const t = e, o = n, l = S(!1), s = S(t.modelValue), a = S(null), i = $(() => t.options.find((h) => h.value === s.value) || t.options[0]);
     function r() {
       o("action");
     }
@@ -4368,7 +4368,7 @@ const Vl = { class: "bg-white relative z-10 border rounded" }, Fl = { class: "fl
           p("div", Ts, [
             D(Tl, {
               class: "my-2 lg:my-0 w-full flex-grow lg:min-h-[50vh]",
-              text: $(t).text,
+              text: I(t).text,
               onChange: i,
               onClear: r,
               onImprove: d
@@ -4380,30 +4380,30 @@ const Vl = { class: "bg-white relative z-10 border rounded" }, Fl = { class: "fl
                 class: "w-full",
                 modelValue: l.opt.type,
                 options: a,
-                loading: $(o).isLoading("writing"),
-                isTextEmpty: $(t).text && ((w = $(t).text) == null ? void 0 : w.length) < $($2).IMPROVE_INPUT_MIN_LENGTH,
-                hasResult: !!$(t).result,
+                loading: I(o).isLoading("writing"),
+                isTextEmpty: I(t).text && ((w = I(t).text) == null ? void 0 : w.length) < I($2).IMPROVE_INPUT_MIN_LENGTH,
+                hasResult: !!I(t).result,
                 "onUpdate:modelValue": b,
                 onAction: d
               }, null, 8, ["modelValue", "loading", "isTextEmpty", "hasResult"])
             ]),
             D(hl, {
               class: "ml-2 lg:m-2",
-              disabled: ((m = $(t).text) == null ? void 0 : m.length) < 5 || !$(t).result,
+              disabled: ((m = I(t).text) == null ? void 0 : m.length) < 5 || !I(t).result,
               onClick: x
             }, null, 8, ["disabled"])
           ]),
           p("div", Os, [
             D(Hl, {
               class: "my-2 lg:my-0 w-full flex-grow lg:min-h-[50vh]",
-              text: $(t).result,
-              originalText: $(t).text,
+              text: I(t).result,
+              originalText: I(t).text,
               type: l.opt.type,
               onChange: u,
               onClear: c,
-              onCopy: V[0] || (V[0] = (S) => {
+              onCopy: V[0] || (V[0] = (T) => {
                 var M;
-                return s("copy", (M = $(t)) == null ? void 0 : M.result);
+                return s("copy", (M = I(t)) == null ? void 0 : M.result);
               })
             }, null, 8, ["text", "originalText", "type"])
           ])
@@ -4412,7 +4412,7 @@ const Vl = { class: "bg-white relative z-10 border rounded" }, Fl = { class: "fl
     };
   }
 }, oe = N2("writing", () => {
-  const e = I(null), n = I(""), t = I(""), o = I([]), l = I(null), s = T2(), a = T(() => s.getLabel(e.value));
+  const e = S(null), n = S(""), t = S(""), o = S([]), l = S(null), s = T2(), a = $(() => s.getLabel(e.value));
   function i(u) {
     e.value = u.src, n.value = u.text, t.value = u.result, o.value = u.suggestions, l.value = u.action;
   }
@@ -4505,7 +4505,7 @@ const Vl = { class: "bg-white relative z-10 border rounded" }, Fl = { class: "fl
       isAIExplain: !1,
       aiExplainMinLength: 5,
       isTTS: !0
-    }, g = T(() => Object.assign({}, b, h.options)), V = (w) => {
+    }, g = $(() => Object.assign({}, b, h.options)), V = (w) => {
       if (w.ctrlKey)
         switch (w.key) {
           case "1":
@@ -4524,10 +4524,10 @@ const Vl = { class: "bg-white relative z-10 border rounded" }, Fl = { class: "fl
       p("div", Vs, [
         D(pt, {
           "header-settings": e.headerSettings,
-          onReader: m[0] || (m[0] = (S) => u("reader")),
-          onSettings: m[1] || (m[1] = (S) => u("settings")),
-          onFullScreen: m[2] || (m[2] = (S) => u("fullscreen")),
-          onAccount: m[3] || (m[3] = (S) => u("account"))
+          onReader: m[0] || (m[0] = (T) => u("reader")),
+          onSettings: m[1] || (m[1] = (T) => u("settings")),
+          onFullScreen: m[2] || (m[2] = (T) => u("fullscreen")),
+          onAccount: m[3] || (m[3] = (T) => u("account"))
         }, null, 8, ["header-settings"])
       ]),
       p("div", Fs, [
@@ -4537,20 +4537,20 @@ const Vl = { class: "bg-white relative z-10 border rounded" }, Fl = { class: "fl
               "w-1/2 px-4 py-2 text-sm font-medium",
               g.value.activeTab === "translate" ? "text-primaryColor border-b-2 border-primaryColor" : "text-textSecondary hover:text-primaryColor"
             ]),
-            onClick: m[4] || (m[4] = (S) => u("activeTab", "translate"))
+            onClick: m[4] || (m[4] = (T) => u("activeTab", "translate"))
           }, [
             F2(" Translate "),
-            $(f0) ? H("", !0) : (C(), y("span", Bs, Ds))
+            I(f0) ? H("", !0) : (C(), y("span", Bs, Ds))
           ], 2),
           p("button", {
             class: N([
               "w-1/2 px-4 py-2 text-sm font-medium",
               g.value.activeTab === "write" ? "text-primaryColor border-b-2 border-primaryColor" : "text-textSecondary hover:text-primaryColor"
             ]),
-            onClick: m[5] || (m[5] = (S) => u("activeTab", "write"))
+            onClick: m[5] || (m[5] = (T) => u("activeTab", "write"))
           }, [
             F2(" Write "),
-            $(f0) ? H("", !0) : (C(), y("span", Rs, Ns))
+            I(f0) ? H("", !0) : (C(), y("span", Rs, Ns))
           ], 2)
         ])
       ]),
@@ -4570,22 +4570,22 @@ const Vl = { class: "bg-white relative z-10 border rounded" }, Fl = { class: "fl
             isAITranslate: g.value.isAITranslate,
             isAIExplain: g.value.isAIExplain,
             aiExplainMinLength: g.value.aiExplainMinLength,
-            onOpt: m[6] || (m[6] = (S) => c("updateOpts", S)),
-            onTranslate: m[7] || (m[7] = (S) => c("translate", S)),
-            onLoadTTS: m[8] || (m[8] = (S) => c("loadTTS", S)),
-            onFavorite: m[9] || (m[9] = (S) => c("favorite")),
-            onAiTranslate: m[10] || (m[10] = (S) => c("aiTranslate", S)),
-            onAiExplain: m[11] || (m[11] = (S) => c("aiExplain", S)),
-            onCopy: m[12] || (m[12] = (S) => x("copy", S))
+            onOpt: m[6] || (m[6] = (T) => c("updateOpts", T)),
+            onTranslate: m[7] || (m[7] = (T) => c("translate", T)),
+            onLoadTTS: m[8] || (m[8] = (T) => c("loadTTS", T)),
+            onFavorite: m[9] || (m[9] = (T) => c("favorite")),
+            onAiTranslate: m[10] || (m[10] = (T) => c("aiTranslate", T)),
+            onAiExplain: m[11] || (m[11] = (T) => c("aiExplain", T)),
+            onCopy: m[12] || (m[12] = (T) => x("copy", T))
           }, null, 8, ["opt", "languages", "translation", "explanation", "tts", "isTTS", "isFavoriteFeatureEnabled", "isAITranslateFeatureEnabled", "isFavorite", "isAITranslate", "isAIExplain", "aiExplainMinLength"])) : H("", !0),
           g.value.activeTab === "write" ? (C(), q(Ms, {
             key: 1,
             opt: g.value.writeOpts,
             languages: g.value.languages,
             writing: e.data.writing,
-            onOpt: m[13] || (m[13] = (S) => d("updateOpts", S)),
-            onWrite: m[14] || (m[14] = (S) => d("write", S)),
-            onCopy: m[15] || (m[15] = (S) => x("copy", S))
+            onOpt: m[13] || (m[13] = (T) => d("updateOpts", T)),
+            onWrite: m[14] || (m[14] = (T) => d("write", T)),
+            onCopy: m[15] || (m[15] = (T) => x("copy", T))
           }, null, 8, ["opt", "languages", "writing"])) : H("", !0)
         ])
       ])