@code0-tech/pictor 0.0.0-mvp.26 → 0.0.0-mvp.27

package/dist/components/form/Input.js

@@ -1,121 +1,133 @@
-import { jsx as y, jsxs as z, Fragment as et } from "react/jsx-runtime";
-import f, { useRef as A, useState as N, useEffect as k, useMemo as Ke } from "react";
+import { jsx as y, jsxs as z, Fragment as lt } from "react/jsx-runtime";
+import d, { useRef as A, useState as L, useEffect as k, useMemo as Je } from "react";
 import "../../utils/contextStore.js";
-import { mergeCode0Props as fe } from "../../utils/utils.js";
+import { mergeCode0Props as ge } from "../../utils/utils.js";
 import '../../assets/components/form/Input.style.css';/* empty css                 */
-import { InputLabel as tt } from "./InputLabel.js";
-import { InputDescription as nt } from "./InputDescription.js";
-import { InputMessage as rt } from "./InputMessage.js";
-import { Menu as at, MenuTrigger as st, MenuPortal as ot } from "../menu/Menu.js";
-import { InputSuggestionMenuContent as it, InputSuggestionMenuContentItems as lt } from "./InputSuggestion.js";
-import { InputSyntax as ut } from "./InputSyntax.js";
-import { useSyntaxModel as ct } from "./Input.syntax.hook.js";
-import { useSelectionVisibility as dt, useSelectionNormalization as ft, useSelectionResolution as gt } from "./Input.selection.hook.js";
-import { setSelectionRangeSafe as T, getSelectionMetrics as U, setElementKey as ze } from "./Input.utils.js";
-import { Card as mt } from "../card/Card.js";
-const pt = f.forwardRef((te, Ue) => {
+import { InputLabel as ut } from "./InputLabel.js";
+import { InputDescription as ct } from "./InputDescription.js";
+import { InputMessage as dt } from "./InputMessage.js";
+import { Menu as ft, MenuTrigger as gt, MenuPortal as mt } from "../menu/Menu.js";
+import { InputSuggestionMenuContent as pt, InputSuggestionMenuContentItems as ht } from "./InputSuggestion.js";
+import { InputSyntax as xt } from "./InputSyntax.js";
+import { useSyntaxModel as St } from "./Input.syntax.hook.js";
+import { useSelectionVisibility as vt, useSelectionNormalization as kt, useSelectionResolution as wt } from "./Input.selection.hook.js";
+import { setSelectionRangeSafe as T, getSelectionMetrics as U, setElementKey as Xe } from "./Input.utils.js";
+import { Card as yt } from "../card/Card.js";
+const It = d.forwardRef((te, Ye) => {
   const {
-    wrapperComponent: We = {},
-    title: ge,
-    description: me,
-    disabled: pe = !1,
-    left: he,
-    right: xe,
-    leftType: je = "icon",
-    rightType: _e = "action",
-    formValidation: b = {
+    wrapperComponent: Ge = {},
+    title: me,
+    description: pe,
+    disabled: he = !1,
+    left: xe,
+    right: Se,
+    leftType: Qe = "icon",
+    rightType: Ze = "action",
+    formValidation: I = {
       valid: !0,
       notValidMessage: null,
       setValue: null
     },
     suggestions: x,
-    suggestionsHeader: Se,
-    suggestionsFooter: ve,
+    suggestionsHeader: ve,
+    suggestionsFooter: ke,
     onSuggestionSelect: W,
-    disableOnValue: ke = () => !1,
+    disableOnValue: we = () => !1,
     transformSyntax: ne,
     validationUsesSuggestions: j = !1,
-    filterSuggestionsByLastToken: V = !1,
-    enforceUniqueSuggestions: we = !1,
+    filterSuggestionsByLastToken: C = !1,
+    enforceUniqueSuggestions: ye = !1,
     onLastTokenChange: re,
-    suggestionsEmptyState: ye,
-    ...L
-  } = te, s = Ue || A(null), P = A(null), _ = A(null), H = A(!0), E = A(null), He = A(0), be = A([]), Ie = A(null), [C, F] = N(!1), [m, Je] = N(te.defaultValue || te.initialValue), [J, Me] = N([]), [X, Ve] = N([]), [Ee, $] = N(null), [ae, B] = N(null), [Ce, Re] = N(!1), Y = f.useMemo(() => ke(m), [m, ke]), I = f.useCallback((e) => {
+    suggestionsEmptyState: Ie,
+    ...et
+  } = te, {
+    onFocus: be,
+    onBlur: Me,
+    onKeyDown: Ce,
+    onKeyDownCapture: Ve,
+    onChange: Ee,
+    onInput: De,
+    ...P
+  } = et, a = Ye || A(null), N = A(null), _ = A(null), H = A(!0), V = A(null), tt = A(0), Re = A([]), Ae = A(null), [E, F] = L(!1), [m, nt] = L(te.defaultValue || te.initialValue), [J, Te] = L([]), [X, Fe] = L([]), [Le, O] = L(null), [se, $] = L(null), [Pe, Ne] = L(!1), Y = d.useMemo(() => we(m), [m, we]), ae = d.useMemo(() => ({
+    ...P,
+    onChange: Ee,
+    onInput: De
+  }), [P, Ee, De]), b = d.useCallback((e) => {
     const t = e ?? "";
     return typeof t == "string" ? t : String(t);
-  }, []), De = f.useCallback((e, t, n) => {
+  }, []), Oe = d.useCallback((e, t, n) => {
     if (e.length === 0) return t <= n.length ? t : null;
     let r = n.indexOf(e);
     if (r === -1) return null;
-    let a = r;
-    for (; a !== -1; )
-      Math.abs(a - t) < Math.abs(r - t) && (r = a), a = n.indexOf(e, a + 1);
+    let s = r;
+    for (; s !== -1; )
+      Math.abs(s - t) < Math.abs(r - t) && (r = s), s = n.indexOf(e, s + 1);
     return r;
-  }, []), G = f.useCallback((e, t) => {
+  }, []), G = d.useCallback((e, t) => {
     const n = [];
     return e.forEach((r) => {
-      const a = De(r.text, r.start, t);
-      if (a === null) return;
-      const i = a + r.text.length;
-      t.slice(a, i) === r.text && n.push({
+      const s = Oe(r.text, r.start, t);
+      if (s === null) return;
+      const i = s + r.text.length;
+      t.slice(s, i) === r.text && n.push({
         ...r,
-        start: a,
+        start: s,
         end: i
       });
     }), n;
-  }, [De]);
+  }, [Oe]);
   k(() => {
-    be.current = X;
+    Re.current = X;
   }, [X]), k(() => {
-    const e = s.current;
-    if (!e || !b?.setValue) return;
+    const e = a.current;
+    if (!e || !I?.setValue) return;
     const t = (n) => {
-      const r = L.type !== "checkbox" ? n.target.value : n.target.checked, a = j ? be.current : r;
-      b.setValue?.(a);
+      const r = P.type !== "checkbox" ? n.target.value : n.target.checked, s = j ? Re.current : r;
+      I.setValue?.(s);
     };
     return e.addEventListener("change", t), () => e.removeEventListener("change", t);
-  }, [b?.setValue, s, L.type, j]), k(() => {
+  }, [I?.setValue, P.type, a, j]), k(() => {
     if (!x) return;
     const e = (t) => {
-      const n = t.target, r = !!s.current?.contains(n), a = !!_.current?.contains(n);
-      H.current = r || a;
+      const n = t.target, r = !!a.current?.contains(n), s = !!_.current?.contains(n);
+      H.current = r || s;
     };
     return document.addEventListener("pointerdown", e, !0), () => document.removeEventListener("pointerdown", e, !0);
-  }, [s, x]), k(() => {
-    const e = s.current;
+  }, [a, x]), k(() => {
+    const e = a.current;
     if (!e) return;
     const t = (n) => {
-      Y || Je(n.target.value);
+      Y || nt(n.target.value);
     };
     return e.addEventListener("change", t), e.addEventListener("input", t), () => {
       e.removeEventListener("change", t), e.removeEventListener("input", t);
     };
-  }, [Y, s]), k(() => {
-    const e = I(s.current?.value ?? m);
-    Me((t) => {
+  }, [Y, a]), k(() => {
+    const e = b(a.current?.value ?? m);
+    Te((t) => {
       const n = G(t, e);
-      return Ve(n.map((r) => r.suggestion)), n;
+      return Fe(n.map((r) => r.suggestion)), n;
     });
-  }, [I, G, m]);
-  const Ae = f.useCallback((e, t) => {
-    const n = I(e), r = [...t].sort((l, o) => l.start - o.start), a = [];
+  }, [b, G, m]);
+  const $e = d.useCallback((e, t) => {
+    const n = b(e), r = [...t].sort((l, o) => l.start - o.start), s = [];
     let i = 0;
     return r.forEach((l) => {
       if (l.start < i) return;
       const o = Math.min(l.end, n.length);
-      i < l.start && a.push(n.slice(i, l.start));
+      i < l.start && s.push(n.slice(i, l.start));
       const c = l.suggestion?.value ?? l.text ?? "", g = c == null ? "" : String(c), u = Math.max(o - l.start, g.length);
-      u > 0 ? (a.push(l.suggestion), i = l.start + u) : i = l.start;
-    }), i < n.length && a.push(n.slice(i)), a.length ? a : [n];
-  }, [I]);
+      u > 0 ? (s.push(l.suggestion), i = l.start + u) : i = l.start;
+    }), i < n.length && s.push(n.slice(i)), s.length ? s : [n];
+  }, [b]);
   k(() => {
-    if (!b?.setValue) return;
-    const e = L.type !== "checkbox" ? I(s.current?.value ?? m) : m, t = j ? X : e;
-    Object.is(Ie.current, t) || (Ie.current = t, b.setValue(t));
-  }, [X, b?.setValue, s, I, L.type, j, m]);
-  const Te = f.useCallback(() => {
+    if (!I?.setValue) return;
+    const e = P.type !== "checkbox" ? b(a.current?.value ?? m) : m, t = j ? X : e;
+    Object.is(Ae.current, t) || (Ae.current = t, I.setValue(t));
+  }, [X, I?.setValue, P.type, a, b, j, m]);
+  const Be = d.useCallback(() => {
     setTimeout(() => {
-      const e = s.current;
+      const e = a.current;
       if (!e) return;
       e.focus({
         preventScroll: !0
@@ -123,24 +135,24 @@ const pt = f.forwardRef((te, Ue) => {
       const t = e.value.length;
       T(e, t, t), e.scrollLeft = e.scrollWidth;
     }, 0);
-  }, [s]), se = f.useMemo(() => Ae(m, J), [J, Ae, m]), d = f.useMemo(() => {
+  }, [a]), oe = d.useMemo(() => $e(m, J), [J, $e, m]), f = d.useMemo(() => {
     if (ne)
-      return (e, t = se) => ne(e, t);
-  }, [se, ne]), {
-    syntaxSegments: oe,
+      return (e, t = oe) => ne(e, t);
+  }, [oe, ne]), {
+    syntaxSegments: ie,
     visualizedSyntaxSegments: M,
-    expandSelectionRangeToBlockBoundaries: O,
-    mapVisualIndexToRawIndex: q,
-    mapRawIndexToVisualIndex: R,
-    totalVisualLength: ie
-  } = ct(m, d, s, se), w = f.useMemo(() => {
-    const e = I(s.current?.value ?? m);
-    if (!V || !oe?.length) return null;
-    const t = [...oe].reverse().find((h) => h?.type === "text" && h?.end === e.length);
+    expandSelectionRangeToBlockBoundaries: B,
+    mapVisualIndexToRawIndex: K,
+    mapRawIndexToVisualIndex: D,
+    totalVisualLength: le
+  } = St(m, f, a, oe), w = d.useMemo(() => {
+    const e = b(a.current?.value ?? m);
+    if (!C || !ie?.length) return null;
+    const t = [...ie].reverse().find((h) => h?.type === "text" && h?.end === e.length);
     if (!t) return null;
     const n = e.slice(t.start, t.end), r = n.trim();
     if (!r.length) return null;
-    const a = r.split(/\s+/), i = a[a.length - 1]?.trim();
+    const s = r.split(/\s+/), i = s[s.length - 1]?.trim();
     if (!i) return null;
     const l = n.search(/\S/), o = l === -1 ? 0 : l, c = r.lastIndexOf(i), g = t.start + o + c, u = g + i.length;
     return {
@@ -148,27 +160,27 @@ const pt = f.forwardRef((te, Ue) => {
       start: g,
       end: u
     };
-  }, [V, s, I, oe, m]);
+  }, [C, a, b, ie, m]);
   k(() => {
-    V && re && (w?.token && F(!0), re(w?.token ?? null));
-  }, [V, re, w?.token]);
-  const K = f.useMemo(() => {
-    if (!V || !x) return x;
+    C && re && (w?.token && F(!0), re(w?.token ?? null));
+  }, [C, re, w?.token]);
+  const q = d.useMemo(() => {
+    if (!C || !x) return x;
     const e = w?.token?.trim();
     return e?.length ? x.filter((t) => {
       const n = t?.value ?? "";
       return (n == null ? "" : String(n)).toLowerCase().startsWith(e.toLowerCase());
     }) : x;
-  }, [V, w?.token, x]), Q = f.useMemo(() => {
-    if (!we || !K) return K;
+  }, [C, w?.token, x]), Q = d.useMemo(() => {
+    if (!ye || !q) return q;
     const e = new Set(J.map((t) => t.suggestion));
-    return K.filter((t) => !e.has(t));
-  }, [J, we, K]), {
+    return q.filter((t) => !e.has(t));
+  }, [J, ye, q]), {
     ensureVisualIndexVisible: Z,
     syncSyntaxScroll: S
-  } = dt(s, _), Le = ft(d, O), p = f.useCallback(() => {
-    if (!d) return;
-    const e = s.current;
+  } = vt(a, _), Ke = kt(f, B), p = d.useCallback(() => {
+    if (!f) return;
+    const e = a.current;
     if (!e) return;
     const {
       rawStart: t,
@@ -177,25 +189,25 @@ const pt = f.forwardRef((te, Ue) => {
     if (r && t === n) {
       const u = t - r.start, h = r.end - t, v = u <= h ? r.start : r.end;
       T(e, v, v);
-      const D = v === r.start ? r.visualStart : r.visualEnd;
-      $(null), B(D), requestAnimationFrame(() => {
-        S(), Z(D);
+      const R = v === r.start ? r.visualStart : r.visualEnd;
+      O(null), $(R), requestAnimationFrame(() => {
+        S(), Z(R);
       });
       return;
     }
     if (t === n) {
-      const u = Math.round(R(t));
-      $(null), B(Number.isFinite(u) ? u : null), requestAnimationFrame(() => {
+      const u = Math.round(D(t));
+      O(null), $(Number.isFinite(u) ? u : null), requestAnimationFrame(() => {
         S(), Z(u);
       });
       return;
     }
-    let a = R(t), i = R(n);
+    let s = D(t), i = D(n);
     M.forEach((u) => {
-      u?.type !== "block" || !(t < u?.end && n > u?.start) || (a = Math.min(a, u?.visualStart), i = Math.max(i, u?.visualEnd));
+      u?.type !== "block" || !(t < u?.end && n > u?.start) || (s = Math.min(s, u?.visualStart), i = Math.max(i, u?.visualEnd));
     });
-    const l = Math.min(a, i), o = Math.max(a, i);
-    B(null), $({
+    const l = Math.min(s, i), o = Math.max(s, i);
+    $(null), O({
       start: l,
       end: o
     });
@@ -203,49 +215,49 @@ const pt = f.forwardRef((te, Ue) => {
     requestAnimationFrame(() => {
       S(), Z(g);
     });
-  }, [Z, s, R, S, d, M]), Fe = gt(d, s, Ee, M, R), Ne = f.useCallback((e) => {
+  }, [Z, a, D, S, f, M]), qe = wt(f, a, Le, M, D), ze = d.useCallback((e) => {
     if (!e) return null;
-    const t = e.dataset.rawIndex, n = e.dataset.visualIndex || e.dataset.visualStart || e.dataset.visualEnd, r = t ? Number(t) : void 0, a = n ? Number(n) : void 0;
-    return !Number.isNaN(r) && r !== void 0 ? r : a !== void 0 ? q(a) : null;
-  }, [q]), ee = f.useCallback((e) => {
+    const t = e.dataset.rawIndex, n = e.dataset.visualIndex || e.dataset.visualStart || e.dataset.visualEnd, r = t ? Number(t) : void 0, s = n ? Number(n) : void 0;
+    return !Number.isNaN(r) && r !== void 0 ? r : s !== void 0 ? K(s) : null;
+  }, [K]), ee = d.useCallback((e) => {
     const t = document.elementFromPoint(e.clientX, e.clientY);
-    return Ne(t ?? e.target);
-  }, [Ne]), Pe = f.useCallback((e) => {
-    if (!s.current) return;
+    return ze(t ?? e.target);
+  }, [ze]), Ue = d.useCallback((e) => {
+    if (!a.current) return;
     const t = ee(e);
     if (t === null || Number.isNaN(t)) return;
     e.preventDefault(), H.current = !0;
-    const n = Math.min(Math.max(t, 0), s.current.value.length), {
+    const n = Math.min(Math.max(t, 0), a.current.value.length), {
       selectionStart: r
-    } = U(s.current), a = e.shiftKey && Number.isFinite(r) ? r : n;
-    E.current = a, s.current.focus({
+    } = U(a.current), s = e.shiftKey && Number.isFinite(r) ? r : n;
+    V.current = s, a.current.focus({
       preventScroll: !0
-    }), T(s.current, a, n), _.current?.setPointerCapture(e.pointerId), p();
-  }, [s, ee, p]), $e = f.useCallback((e) => {
-    if (!s.current || E.current === null) return;
+    }), T(a.current, s, n), _.current?.setPointerCapture(e.pointerId), p();
+  }, [a, ee, p]), We = d.useCallback((e) => {
+    if (!a.current || V.current === null) return;
     if (!(e.buttons & 1)) {
-      E.current = null;
+      V.current = null;
       return;
     }
     const t = ee(e);
     if (t === null || Number.isNaN(t)) return;
     e.preventDefault();
-    const n = E.current, r = Math.min(Math.max(t, 0), s.current.value.length);
-    s.current.focus({
+    const n = V.current, r = Math.min(Math.max(t, 0), a.current.value.length);
+    a.current.focus({
       preventScroll: !0
-    }), T(s.current, n, r), p();
-  }, [s, ee, p]), Be = f.useCallback(() => {
-    E.current = null;
-  }, []), Oe = f.useCallback((e) => {
-    if (!d) return !1;
+    }), T(a.current, n, r), p();
+  }, [a, ee, p]), je = d.useCallback(() => {
+    V.current = null;
+  }, []), _e = d.useCallback((e) => {
+    if (!f) return !1;
     const t = e.target, {
       rawStart: n,
       rawEnd: r
-    } = U(t), a = (o, c) => {
+    } = U(t), s = (o, c) => {
       if (o === c) return !1;
       e.preventDefault();
       const g = `${t.value.slice(0, o)}${t.value.slice(c)}`;
-      return ze(t, "value", g, "input"), requestAnimationFrame(() => {
+      return Xe(t, "value", g, "input"), requestAnimationFrame(() => {
         T(t, o, o), p();
       }), !0;
     };
@@ -254,37 +266,37 @@ const pt = f.forwardRef((te, Ue) => {
         start: o,
         end: c,
         hasBlockOverlap: g
-      } = O(n, r);
-      return g ? a(o, c) : !1;
+      } = B(n, r);
+      return g ? s(o, c) : !1;
     }
     const i = M.find((o) => o?.type !== "block" ? !1 : n === o?.end || n > o?.start && n < o?.end);
     if (e.key === "Backspace" && i)
-      return a(i.start, i.end);
+      return s(i.start, i.end);
     const l = M.find((o) => o?.type !== "block" ? !1 : n === o?.start || n > o?.start && n < o?.end);
-    return e.key === "Delete" && l ? a(l.start, l.end) : !1;
-  }, [O, d, p, M]), le = f.useCallback((e) => {
-    if (d && Le(e.target), d && (e.key === "ArrowLeft" || e.key === "ArrowRight")) {
+    return e.key === "Delete" && l ? s(l.start, l.end) : !1;
+  }, [B, f, p, M]), ue = d.useCallback((e) => {
+    if (f && Ke(e.target), f && (e.key === "ArrowLeft" || e.key === "ArrowRight")) {
       const t = e.target, {
         selectionStart: n,
         selectionEnd: r,
-        rawStart: a,
+        rawStart: s,
         rawEnd: i,
         direction: l
       } = U(t), o = e.key === "ArrowLeft" ? -1 : 1;
       if (e.shiftKey) {
-        const c = E.current ?? (l === "backward" ? r : n);
-        E.current = c;
-        const u = Math.round(R(c === n ? r : n)), h = Math.max(0, Math.min(u + o, ie)), v = q(h);
+        const c = V.current ?? (l === "backward" ? r : n);
+        V.current = c;
+        const u = Math.round(D(c === n ? r : n)), h = Math.max(0, Math.min(u + o, le)), v = K(h);
         if (!Number.isNaN(v)) {
           e.preventDefault();
-          const D = Math.min(Math.max(Math.round(v), 0), t.value.length), Ge = D < c ? "backward" : "forward", Qe = Math.min(c, D), Ze = Math.max(c, D);
-          T(t, Qe, Ze, Ge), requestAnimationFrame(() => {
+          const R = Math.min(Math.max(Math.round(v), 0), t.value.length), at = R < c ? "backward" : "forward", ot = Math.min(c, R), it = Math.max(c, R);
+          T(t, ot, it, at), requestAnimationFrame(() => {
             S(), p();
           });
         }
       } else {
-        E.current = null;
-        const c = e.key === "ArrowLeft" ? a : i, g = Math.round(R(c)), u = Math.max(0, Math.min(g + o, ie)), h = q(u);
+        V.current = null;
+        const c = e.key === "ArrowLeft" ? s : i, g = Math.round(D(c)), u = Math.max(0, Math.min(g + o, le)), h = K(u);
         if (!Number.isNaN(h)) {
           e.preventDefault();
           const v = Math.min(Math.max(Math.round(h), 0), t.value.length);
@@ -295,78 +307,80 @@ const pt = f.forwardRef((te, Ue) => {
       }
       if (e.defaultPrevented) return;
     }
-    if (!(d && (e.key === "Backspace" || e.key === "Delete") && Oe(e)) && x)
+    if (!(f && (e.key === "Backspace" || e.key === "Delete") && _e(e)) && x) {
       if (e.key === "ArrowDown") {
         e.preventDefault();
-        const t = C;
-        F(!0), t ? P.current?.highlightNextItem() : setTimeout(() => P.current?.focusFirstItem(), 0);
+        const t = E;
+        F(!0), t ? N.current?.highlightNextItem() : setTimeout(() => N.current?.focusFirstItem(), 0);
       } else if (e.key === "ArrowUp") {
         e.preventDefault();
-        const t = C;
-        F(!0), t ? P.current?.highlightPreviousItem() : setTimeout(() => P.current?.focusLastItem(), 0);
-      } else e.key === "Enter" && C && P.current?.selectActiveItem() && F(!1);
-  }, [Oe, R, q, Le, C, x, S, ie, d, p]), ue = f.useCallback((e) => {
-    (e.key === " " || e.code === "Space") && (e.stopPropagation(), e.nativeEvent?.stopImmediatePropagation?.());
-  }, []), ce = f.useCallback(() => {
-    Re(!0), requestAnimationFrame(() => {
+        const t = E;
+        F(!0), t ? N.current?.highlightPreviousItem() : setTimeout(() => N.current?.focusLastItem(), 0);
+      } else e.key === "Enter" && E && N.current?.selectActiveItem() && F(!1);
+      Ce?.(e);
+    }
+  }, [_e, D, K, Ke, E, x, S, le, f, p, Ce]), ce = d.useCallback((e) => {
+    (e.key === " " || e.code === "Space") && (e.stopPropagation(), e.nativeEvent?.stopImmediatePropagation?.()), Ve?.(e);
+  }, [Ve]), de = d.useCallback((e) => {
+    Ne(!0), requestAnimationFrame(() => {
       p(), S();
-    }), x && !C && F(!0);
-  }, [C, x, S, p]), de = f.useCallback(() => {
-    Re(!1), B(null), $(null);
-  }, []);
+    }), x && !E && F(!0), be?.(e);
+  }, [E, x, S, p, be]), fe = d.useCallback((e) => {
+    Ne(!1), $(null), O(null), Me?.(e);
+  }, [Me]);
   k(() => {
-    const e = s.current;
-    if (!e || !d) return;
+    const e = a.current;
+    if (!e || !f) return;
     const t = () => requestAnimationFrame(p);
     t();
     const n = ["select", "keyup", "mouseup", "input", "keydown"];
     return n.forEach((r) => e.addEventListener(r, t)), () => {
       n.forEach((r) => e.removeEventListener(r, t));
     };
-  }, [s, d, p]), k(() => {
-    if (!d) return;
+  }, [a, f, p]), k(() => {
+    if (!f) return;
     const e = () => {
-      document.activeElement === s.current && p();
+      document.activeElement === a.current && p();
     };
     return document.addEventListener("selectionchange", e), () => document.removeEventListener("selectionchange", e);
-  }, [s, d, p]), k(() => {
-    const e = s.current;
+  }, [a, f, p]), k(() => {
+    const e = a.current;
     if (!e) return;
     const t = () => S();
     return t(), e.addEventListener("scroll", t), () => e.removeEventListener("scroll", t);
-  }, [s, S]), k(() => {
+  }, [a, S]), k(() => {
     S();
-  }, [S, m, ae, Ee]), k(() => {
-    d || ($(null), B(null));
-  }, [d]);
-  const qe = f.useCallback((e) => {
-    if (!s.current) return;
-    const t = typeof m == "object" ? JSON.stringify(e.value) : e.value, n = t == null ? "" : String(t), r = e.insertMode ?? "replace", a = s.current.value ?? "";
-    let i = a, l = null, o = 0;
-    if (V && w)
-      i = `${a.slice(0, w.start)}${n}${a.slice(w.end)}`, l = w.start + n.length, o = w.start;
+  }, [S, m, se, Le]), k(() => {
+    f || (O(null), $(null));
+  }, [f]);
+  const He = d.useCallback((e) => {
+    if (!a.current) return;
+    const t = typeof m == "object" ? JSON.stringify(e.value) : e.value, n = t == null ? "" : String(t), r = e.insertMode ?? "replace", s = a.current.value ?? "";
+    let i = s, l = null, o = 0;
+    if (C && w)
+      i = `${s.slice(0, w.start)}${n}${s.slice(w.end)}`, l = w.start + n.length, o = w.start;
     else
       switch (r) {
         case "append": {
-          i = `${a}${n}`, l = i.length, o = a.length;
+          i = `${s}${n}`, l = i.length, o = s.length;
           break;
         }
         case "prepend": {
-          i = `${n}${a}`, l = n.length, o = 0;
+          i = `${n}${s}`, l = n.length, o = 0;
           break;
         }
         case "insert": {
           const {
             rawStart: c,
             rawEnd: g
-          } = U(s.current), {
+          } = U(a.current), {
             start: u,
             end: h
-          } = d ? O(c, g) : {
+          } = f ? B(c, g) : {
             start: c,
             end: g
           };
-          i = `${a.slice(0, u)}${n}${a.slice(h)}`, l = u + n.length, o = u;
+          i = `${s.slice(0, u)}${n}${s.slice(h)}`, l = u + n.length, o = u;
           break;
         }
         case "replace":
@@ -375,62 +389,62 @@ const pt = f.forwardRef((te, Ue) => {
           break;
         }
       }
-    ze(s.current, "value", i, "change"), Me((c) => {
-      const g = I(i), u = G(c, g), h = n.length ? {
-        id: He.current++,
+    Xe(a.current, "value", i, "change"), Te((c) => {
+      const g = b(i), u = G(c, g), h = n.length ? {
+        id: tt.current++,
         suggestion: e,
         text: n,
         start: o,
         end: o + n.length
       } : null, v = h ? [...u, h] : u;
-      return Ve(v.map((D) => D.suggestion)), v;
+      return Fe(v.map((R) => R.suggestion)), v;
     }), l !== null && requestAnimationFrame(() => {
-      const c = s.current;
+      const c = a.current;
       c && (c.focus({
         preventScroll: !0
       }), T(c, l, l));
     });
-  }, [O, V, s, I, G, w, d, m]), Xe = Ke(() => /* @__PURE__ */ y(ut, { transformSyntax: d, syntaxRef: _, visualizedSyntaxSegments: M, resolvedVisualSelectionRange: Fe, visualCaretIndex: ae, isFocused: Ce, onPointerDown: Pe, onPointerMove: $e, onPointerUp: Be }), [Pe, Be, $e, Ce, Fe, d, ae, M]), Ye = Ke(() => /* @__PURE__ */ z(at, { open: C, modal: !1, onOpenChange: (e) => {
+  }, [B, C, a, b, G, w, f, m]), rt = Je(() => /* @__PURE__ */ y(xt, { transformSyntax: f, syntaxRef: _, visualizedSyntaxSegments: M, resolvedVisualSelectionRange: qe, visualCaretIndex: se, isFocused: Pe, onPointerDown: Ue, onPointerMove: We, onPointerUp: je }), [Ue, je, We, Pe, qe, f, se, M]), st = Je(() => /* @__PURE__ */ z(ft, { open: E, modal: !1, onOpenChange: (e) => {
     if (!e && H.current) {
       H.current = !1;
       return;
     }
-    F(e), e && setTimeout(() => s.current?.focus(), 0);
+    F(e), e && setTimeout(() => a.current?.focus(), 0);
   }, children: [
-    /* @__PURE__ */ y(st, { asChild: !0, children: /* @__PURE__ */ y("input", { ref: s, ...fe(`input__control ${d ? "input__control--syntax" : ""}`, L), onFocus: ce, onBlur: de, onKeyDownCapture: ue, onKeyDown: le, spellCheck: !1, disabled: pe || Y }) }),
-    /* @__PURE__ */ y(ot, { children: /* @__PURE__ */ z(it, { color: "secondary", inputRef: s, children: [
-      Se,
-      /* @__PURE__ */ z(mt, { paddingSize: "xxs", mt: -0.35, mx: -0.35, style: {
+    /* @__PURE__ */ y(gt, { asChild: !0, children: /* @__PURE__ */ y("input", { ref: a, ...ge(`input__control ${f ? "input__control--syntax" : ""}`, ae), onFocus: de, onBlur: fe, onKeyDownCapture: ce, onKeyDown: ue, spellCheck: !1, disabled: he || Y }) }),
+    /* @__PURE__ */ y(mt, { children: /* @__PURE__ */ z(pt, { color: "secondary", inputRef: a, children: [
+      ve,
+      /* @__PURE__ */ z(yt, { paddingSize: "xxs", mt: -0.35, mx: -0.35, style: {
         borderWidth: "2px"
       }, children: [
-        Q?.length === 0 && ye,
+        Q?.length === 0 && Ie,
         !!Q?.length && /* @__PURE__ */ y(
-          lt,
+          ht,
           {
-            ref: P,
-            inputRef: s,
+            ref: N,
+            inputRef: a,
             suggestions: Q,
             onSuggestionSelect: (e) => {
-              W ? W?.(e) : qe(e), F(!1), W && Te();
+              W ? W?.(e) : He(e), F(!1), W && Be();
             }
           }
         )
       ] }),
-      ve
+      ke
     ] }) })
-  ] }), [qe, Q, Y, Te, de, ce, le, ue, s, W, C, L, ye, ve, Se, d]);
-  return /* @__PURE__ */ z(et, { children: [
-    ge && /* @__PURE__ */ y(tt, { children: ge }),
-    me && /* @__PURE__ */ y(nt, { children: me }),
-    /* @__PURE__ */ z("div", { ...fe(`input ${b?.valid ? "" : "input--not-valid"}`, We), children: [
-      he && /* @__PURE__ */ y("div", { className: `input__left input__left--${je}`, children: he }),
-      x ? Ye : /* @__PURE__ */ y("input", { tabIndex: 2, ref: s, disabled: pe, onFocus: ce, onBlur: de, onKeyDownCapture: ue, onKeyDown: le, ...fe(`input__control ${d ? "input__control--syntax" : ""}`, L) }),
-      Xe,
-      xe && /* @__PURE__ */ y("div", { className: `input__right input__right--${_e}`, children: xe })
+  ] }), [He, Q, Y, Be, fe, de, ue, ce, a, ae, W, E, Ie, ke, ve, f]);
+  return /* @__PURE__ */ z(lt, { children: [
+    me && /* @__PURE__ */ y(ut, { children: me }),
+    pe && /* @__PURE__ */ y(ct, { children: pe }),
+    /* @__PURE__ */ z("div", { ...ge(`input ${I?.valid ? "" : "input--not-valid"}`, Ge), children: [
+      xe && /* @__PURE__ */ y("div", { className: `input__left input__left--${Qe}`, children: xe }),
+      x ? st : /* @__PURE__ */ y("input", { tabIndex: 2, ref: a, disabled: he, onFocus: de, onBlur: fe, onKeyDownCapture: ce, onKeyDown: ue, ...ge(`input__control ${f ? "input__control--syntax" : ""}`, ae) }),
+      rt,
+      Se && /* @__PURE__ */ y("div", { className: `input__right input__right--${Ze}`, children: Se })
     ] }),
-    !b?.valid && b?.notValidMessage && /* @__PURE__ */ y(rt, { children: b.notValidMessage })
+    !I?.valid && I?.notValidMessage && /* @__PURE__ */ y(dt, { children: I.notValidMessage })
   ] });
-}), At = pt;
+}), Bt = It;
 export {
-  At as Input
+  Bt as Input
 };