@code0-tech/pictor 0.0.0-mvp.29 → 0.0.0-mvp.30

package/dist/components/form/Input.js

@@ -1,61 +1,136 @@
-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 { jsx as f, jsxs as z } from "react/jsx-runtime";
+import i, { useRef as y, useState as K, useMemo as L, useEffect as x } from "react";
+import Qe from "../../_virtual/react-contenteditable.js";
 import "../../utils/contextStore.js";
-import { mergeCode0Props as ge } from "../../utils/utils.js";
+import { mergeCode0Props as le } from "../../utils/utils.js";
 import '../../assets/components/form/Input.style.css';/* empty css                 */
-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) => {
+import { InputLabel as Xe } from "./InputLabel.js";
+import { InputDescription as Ye } from "./InputDescription.js";
+import { InputMessage as Ze } from "./InputMessage.js";
+import { Menu as _e, MenuTrigger as et, MenuPortal as tt } from "../menu/Menu.js";
+import { InputSuggestionMenuContent as nt, InputSuggestionMenuContentItems as rt } from "./InputSuggestion.js";
+import { getSelectionMetrics as ot, setElementKey as st, setSelectionRangeSafe as at } from "./Input.utils.js";
+import { Card as ut } from "../card/Card.js";
+import { useContentEditableController as it } from "./InputContentEditable.hook.js";
+const X = (u) => {
+  const k = u ?? "";
+  return typeof k == "string" ? k : String(k);
+}, $e = (u) => {
+  if (u == null) return "";
+  if (typeof u == "string") return u;
+  try {
+    return JSON.stringify(u);
+  } catch {
+    return String(u ?? "");
+  }
+}, Fe = (u) => {
+  if (!u) return null;
+  const k = u.value ?? "", Y = u.selectionStart ?? k.length, E = k.slice(0, Y).match(/\S+$/);
+  if (!E || E.index === void 0) return null;
+  const g = E[0], $ = E.index, N = $ + g.length;
+  return {
+    token: g,
+    start: $,
+    end: N
+  };
+}, lt = i.forwardRef((u, k) => {
   const {
-    wrapperComponent: Ge = {},
-    title: me,
-    description: pe,
-    disabled: he = !1,
-    left: xe,
-    right: Se,
-    leftType: Qe = "icon",
-    rightType: Ze = "action",
-    formValidation: I = {
+    wrapperComponent: Y = {},
+    title: Z,
+    description: E,
+    disabled: g = !1,
+    left: $,
+    right: N,
+    leftType: Be = "icon",
+    rightType: Ae = "action",
+    formValidation: V = {
       valid: !0,
       notValidMessage: null,
       setValue: null
     },
-    suggestions: x,
-    suggestionsHeader: ve,
-    suggestionsFooter: ke,
-    onSuggestionSelect: W,
-    disableOnValue: we = () => !1,
-    transformSyntax: ne,
-    validationUsesSuggestions: j = !1,
-    filterSuggestionsByLastToken: C = !1,
-    enforceUniqueSuggestions: ye = !1,
-    onLastTokenChange: re,
-    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);
-  }, []), Oe = d.useCallback((e, t, n) => {
+    suggestions: l,
+    suggestionsHeader: ce,
+    suggestionsFooter: fe,
+    onSuggestionSelect: de,
+    disableOnValue: pe = () => !1,
+    transformSyntax: P,
+    validationUsesSyntax: j = !1,
+    filterSuggestionsByLastToken: h = !1,
+    enforceUniqueSuggestions: ge = !1,
+    onLastTokenChange: he,
+    suggestionsEmptyState: me,
+    ...ze
+  } = u, {
+    onFocus: Se,
+    onBlur: _,
+    onKeyDown: q,
+    onKeyDownCapture: ee,
+    onChange: F,
+    onInput: B,
+    ...m
+  } = ze, W = y(null), d = y(null), H = y(null), M = y(null), te = y(null), D = y(!1), Ne = y(0), Ce = y(null), ne = m.value ?? u.initialValue ?? u.defaultValue, [ye, je] = K(!1), R = y(!1), a = i.useCallback((e) => {
+    R.current = e, je(e);
+  }, []), [w, re] = K(ne), [ve, be] = K([]), [ke, oe] = K([]), [we, qe] = K(null), [xe, Ee] = K(null), o = !!P, I = L(() => pe(w), [pe, w]), v = L(() => o ? H : d, [o]);
+  i.useImperativeHandle(k, () => v.current ?? null, [v]);
+  const We = L(() => ({
+    ...m,
+    onChange: F,
+    onInput: B
+  }), [m, F, B]), He = L(() => {
+    const {
+      value: e,
+      defaultValue: t,
+      ...n
+    } = m;
+    return le("input__control", n);
+  }, [m]), U = i.useCallback(() => {
+    const e = v.current;
+    !e || g || I || e.focus({
+      preventScroll: !0
+    });
+  }, [v, g, I]), T = i.useCallback(() => {
+    l && a(!0);
+  }, [l, a]), se = i.useCallback((e) => {
+    h && (qe(e), e && a(!0), he?.(e));
+  }, [h, he, a]), ae = i.useCallback((e, t) => {
+    if (!V?.setValue) return;
+    const n = m.type !== "checkbox" ? X(e) : e, r = j ? t : n;
+    Object.is(Ce.current, r) || (Ce.current = r, V.setValue(r));
+  }, [V?.setValue, m.type, j]), p = it({
+    editorRef: H,
+    transformSyntax: P,
+    filterSuggestionsByLastToken: h,
+    onLastTokenChange: se,
+    onStateChange: ({
+      value: e,
+      tokens: t,
+      segments: n
+    }) => {
+      re(e), oe(t), Ee(n ?? null), ae(e, n ?? null);
+    }
+  }), Ve = y(!1);
+  x(() => {
+    if (!o || !P || Ve.current) return;
+    const e = X(ne);
+    re(e), p.initializeFromExternalValue(e), j && P && Ee(P(e, [])), Ve.current = !0;
+  }, [o, P, ne, j, p]), x(() => {
+    o || m.value !== void 0 && re(m.value);
+  }, [m.value, o]), x(() => {
+    ae(w, xe);
+  }, [ae, xe, w]), x(() => {
+    if (!l) return;
+    const e = (t) => {
+      const n = t.target, r = !!H.current?.contains(n), s = !!d.current?.contains(n), c = !!te.current?.contains(n), S = !!W.current?.contains(n), C = r || s || c || S;
+      D.current = C, !C && R.current && a(!1);
+    };
+    return document.addEventListener("pointerdown", e, !0), () => document.removeEventListener("pointerdown", e, !0);
+  }, [l, a]), x(() => {
+    const e = W.current;
+    if (!e) return;
+    const t = () => T();
+    return e.addEventListener("focusin", t), () => e.removeEventListener("focusin", t);
+  }, [T]);
+  const De = i.useCallback((e, t, n) => {
     if (e.length === 0) return t <= n.length ? t : null;
     let r = n.indexOf(e);
     if (r === -1) return null;
@@ -63,388 +138,210 @@ const It = d.forwardRef((te, Ye) => {
     for (; s !== -1; )
       Math.abs(s - t) < Math.abs(r - t) && (r = s), s = n.indexOf(e, s + 1);
     return r;
-  }, []), G = d.useCallback((e, t) => {
+  }, []), J = i.useCallback((e, t) => {
     const n = [];
     return e.forEach((r) => {
-      const s = Oe(r.text, r.start, t);
+      const s = De(r.text, r.start, t);
       if (s === null) return;
-      const i = s + r.text.length;
-      t.slice(s, i) === r.text && n.push({
+      const c = s + r.text.length;
+      t.slice(s, c) === r.text && n.push({
         ...r,
         start: s,
-        end: i
+        end: c
       });
     }), n;
-  }, [Oe]);
-  k(() => {
-    Re.current = X;
-  }, [X]), k(() => {
-    const e = a.current;
-    if (!e || !I?.setValue) return;
-    const t = (n) => {
-      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);
-  }, [I?.setValue, P.type, a, j]), k(() => {
-    if (!x) return;
-    const e = (t) => {
-      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);
-  }, [a, x]), k(() => {
-    const e = a.current;
-    if (!e) return;
-    const t = (n) => {
-      Y || nt(n.target.value);
-    };
-    return e.addEventListener("change", t), e.addEventListener("input", t), () => {
-      e.removeEventListener("change", t), e.removeEventListener("input", t);
-    };
-  }, [Y, a]), k(() => {
-    const e = b(a.current?.value ?? m);
-    Te((t) => {
-      const n = G(t, e);
-      return Fe(n.map((r) => r.suggestion)), n;
+  }, [De]);
+  x(() => {
+    if (o) return;
+    const e = X(d.current?.value ?? w);
+    be((t) => {
+      const n = J(t, e);
+      return oe(n.map((r) => r.suggestion)), n;
     });
-  }, [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 && 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 ? (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 (!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 = a.current;
-      if (!e) return;
-      e.focus({
-        preventScroll: !0
-      });
-      const t = e.value.length;
-      T(e, t, t), e.scrollLeft = e.scrollWidth;
-    }, 0);
-  }, [a]), oe = d.useMemo(() => $e(m, J), [J, $e, m]), f = d.useMemo(() => {
-    if (ne)
-      return (e, t = oe) => ne(e, t);
-  }, [oe, ne]), {
-    syntaxSegments: ie,
-    visualizedSyntaxSegments: M,
-    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 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 {
-      token: i,
-      start: g,
-      end: u
-    };
-  }, [C, a, b, ie, m]);
-  k(() => {
-    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;
-  }, [C, w?.token, x]), Q = d.useMemo(() => {
-    if (!ye || !q) return q;
-    const e = new Set(J.map((t) => t.suggestion));
-    return q.filter((t) => !e.has(t));
-  }, [J, ye, q]), {
-    ensureVisualIndexVisible: Z,
-    syncSyntaxScroll: S
-  } = vt(a, _), Ke = kt(f, B), p = d.useCallback(() => {
-    if (!f) return;
-    const e = a.current;
+  }, [o, J, w]), x(() => {
+    if (!h || o) return;
+    const e = d.current;
     if (!e) return;
-    const {
-      rawStart: t,
-      rawEnd: n
-    } = U(e), r = M.find((u) => u?.type !== "block" ? !1 : t > u?.start && t < u?.end);
-    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 R = v === r.start ? r.visualStart : r.visualEnd;
-      O(null), $(R), requestAnimationFrame(() => {
-        S(), Z(R);
-      });
-      return;
-    }
-    if (t === n) {
-      const u = Math.round(D(t));
-      O(null), $(Number.isFinite(u) ? u : null), requestAnimationFrame(() => {
-        S(), Z(u);
-      });
-      return;
-    }
-    let s = D(t), i = D(n);
-    M.forEach((u) => {
-      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(s, i), o = Math.max(s, i);
-    $(null), O({
-      start: l,
-      end: o
-    });
-    const g = (e.selectionDirection === "backward" ? "backward" : "forward") === "backward" ? l : o;
-    requestAnimationFrame(() => {
-      S(), Z(g);
-    });
-  }, [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, 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 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), a.current.value.length), {
-      selectionStart: r
-    } = U(a.current), s = e.shiftKey && Number.isFinite(r) ? r : n;
-    V.current = s, a.current.focus({
-      preventScroll: !0
-    }), 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)) {
-      V.current = null;
-      return;
-    }
-    const t = ee(e);
-    if (t === null || Number.isNaN(t)) return;
-    e.preventDefault();
-    const n = V.current, r = Math.min(Math.max(t, 0), a.current.value.length);
-    a.current.focus({
-      preventScroll: !0
-    }), 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), s = (o, c) => {
-      if (o === c) return !1;
-      e.preventDefault();
-      const g = `${t.value.slice(0, o)}${t.value.slice(c)}`;
-      return Xe(t, "value", g, "input"), requestAnimationFrame(() => {
-        T(t, o, o), p();
-      }), !0;
+    const t = () => se(Fe(e)?.token ?? null);
+    return e.addEventListener("input", t), e.addEventListener("keyup", t), e.addEventListener("mouseup", t), t(), () => {
+      e.removeEventListener("input", t), e.removeEventListener("keyup", t), e.removeEventListener("mouseup", t);
     };
-    if (n !== r) {
-      const {
-        start: o,
-        end: c,
-        hasBlockOverlap: g
-      } = 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 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 ? 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: s,
-        rawEnd: i,
-        direction: l
-      } = U(t), o = e.key === "ArrowLeft" ? -1 : 1;
-      if (e.shiftKey) {
-        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 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 {
-        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);
-          T(t, v, v), requestAnimationFrame(() => {
-            S(), p();
-          });
-        }
-      }
-      if (e.defaultPrevented) return;
-    }
-    if (!(f && (e.key === "Backspace" || e.key === "Delete") && _e(e)) && x) {
-      if (e.key === "ArrowDown") {
-        e.preventDefault();
-        const t = E;
-        F(!0), t ? N.current?.highlightNextItem() : setTimeout(() => N.current?.focusFirstItem(), 0);
-      } else if (e.key === "ArrowUp") {
-        e.preventDefault();
-        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);
+  }, [h, o, se]);
+  const O = L(() => {
+    if (!h || !l) return l;
+    const e = we?.trim();
+    return e?.length ? l.filter((t) => String(t?.value ?? "").toLowerCase().startsWith(e.toLowerCase())) : l;
+  }, [h, we, l]), G = L(() => {
+    if (!ge || !O) return O;
+    if (o) {
+      const t = new Set((ke ?? []).map((n) => $e(n?.value ?? n)));
+      return O.filter((n) => !t.has($e(n?.value ?? n)));
     }
-  }, [_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 && !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 = 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));
-    };
-  }, [a, f, p]), k(() => {
-    if (!f) return;
-    const e = () => {
-      document.activeElement === a.current && p();
-    };
-    return document.addEventListener("selectionchange", e), () => document.removeEventListener("selectionchange", e);
-  }, [a, f, p]), k(() => {
-    const e = a.current;
-    if (!e) return;
-    const t = () => S();
-    return t(), e.addEventListener("scroll", t), () => e.removeEventListener("scroll", t);
-  }, [a, S]), k(() => {
-    S();
-  }, [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;
+    const e = new Set(ve.map((t) => t.suggestion));
+    return O.filter((t) => !e.has(t));
+  }, [ve, ke, ge, O, o]), Ie = i.useCallback((e) => {
+    if (!d.current) return;
+    const t = typeof w == "object" ? JSON.stringify(e.value) : e.value, n = t == null ? "" : String(t), r = e.insertMode ?? "replace", s = d.current.value ?? "";
+    let c = s, S = null, C = 0;
+    const A = h ? Fe(d.current) : null;
+    if (h && A)
+      c = `${s.slice(0, A.start)}${n}${s.slice(A.end)}`, S = A.start + n.length, C = A.start;
     else
       switch (r) {
-        case "append": {
-          i = `${s}${n}`, l = i.length, o = s.length;
+        case "append":
+          c = `${s}${n}`, S = c.length, C = s.length;
           break;
-        }
-        case "prepend": {
-          i = `${n}${s}`, l = n.length, o = 0;
+        case "prepend":
+          c = `${n}${s}`, S = n.length, C = 0;
           break;
-        }
         case "insert": {
           const {
-            rawStart: c,
-            rawEnd: g
-          } = U(a.current), {
-            start: u,
-            end: h
-          } = f ? B(c, g) : {
-            start: c,
-            end: g
-          };
-          i = `${s.slice(0, u)}${n}${s.slice(h)}`, l = u + n.length, o = u;
+            rawStart: b,
+            rawEnd: ie
+          } = ot(d.current);
+          c = `${s.slice(0, b)}${n}${s.slice(ie)}`, S = b + n.length, C = b;
           break;
         }
         case "replace":
-        default: {
-          i = n, l = n.length, o = 0;
+        default:
+          c = n, S = n.length, C = 0;
           break;
-        }
       }
-    Xe(a.current, "value", i, "change"), Te((c) => {
-      const g = b(i), u = G(c, g), h = n.length ? {
-        id: tt.current++,
+    st(d.current, "value", c, "change"), be((b) => {
+      const ie = X(c), Te = J(b, ie), Oe = n.length ? {
+        id: Ne.current++,
         suggestion: e,
         text: n,
-        start: o,
-        end: o + n.length
-      } : null, v = h ? [...u, h] : u;
-      return Fe(v.map((R) => R.suggestion)), v;
-    }), l !== null && requestAnimationFrame(() => {
-      const c = a.current;
-      c && (c.focus({
+        start: C,
+        end: C + n.length
+      } : null, Ke = Oe ? [...Te, Oe] : Te;
+      return oe(Ke.map((Ge) => Ge.suggestion)), Ke;
+    }), S !== null && requestAnimationFrame(() => {
+      const b = d.current;
+      b && (b.focus({
         preventScroll: !0
-      }), T(c, l, l));
+      }), at(b, S, S));
+    });
+  }, [h, J, w]), Le = i.useCallback((e) => {
+    if (o ? p.applySuggestionValueSyntax(e) : Ie(e), de?.(e), o) {
+      const t = v.current;
+      requestAnimationFrame(() => {
+        if (!t) return;
+        const n = {
+          type: "change",
+          target: t,
+          currentTarget: t
+        };
+        t.dispatchEvent(new Event("input", {
+          bubbles: !0
+        })), B?.(n), F?.(n);
+      });
+    }
+    a(!1), D.current = !1, requestAnimationFrame(() => {
+      U();
     });
-  }, [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;
+  }, [v, Ie, p, U, o, de, a, F, B]), Pe = i.useCallback((e) => {
+    T(), Se?.(e);
+  }, [T, Se]), Q = i.useCallback((e) => {
+    if (D.current) {
+      _?.(e);
+      return;
+    }
+    a(!1), _?.(e);
+  }, [_, a]), Me = i.useCallback((e) => {
+    if (o) {
+      p.handleKeyDownCapture(e), ee?.(e);
+      return;
+    }
+    (e.key === " " || e.code === "Space") && (e.stopPropagation(), e.nativeEvent?.stopImmediatePropagation?.()), ee?.(e);
+  }, [p, o, ee]), Re = i.useCallback((e) => {
+    if (l) {
+      if (e.key === "ArrowDown") {
+        e.preventDefault(), e.stopPropagation(), R.current ? M.current?.highlightNextItem?.() : (a(!0), setTimeout(() => M.current?.focusFirstItem?.(), 0));
+        return;
+      }
+      if (e.key === "ArrowUp") {
+        e.preventDefault(), e.stopPropagation(), R.current ? M.current?.highlightPreviousItem?.() : (a(!0), setTimeout(() => M.current?.focusLastItem?.(), 0));
+        return;
+      }
+      if (e.key === "Enter" && R.current) {
+        e.preventDefault(), e.stopPropagation(), M.current?.selectActiveItem?.() && a(!1);
+        return;
+      }
+      if (e.key === "Escape" && R.current) {
+        e.preventDefault(), e.stopPropagation(), a(!1);
+        return;
+      }
+    }
+    if (o && p.handleKeyDown(e)) {
+      q?.(e);
+      return;
+    }
+    if (o && e.key === "Enter") {
+      e.preventDefault(), q?.(e);
       return;
     }
-    F(e), e && setTimeout(() => a.current?.focus(), 0);
+    q?.(e);
+  }, [p, o, l, a, q]), ue = o ? /* @__PURE__ */ f(Qe, { innerRef: H, html: p.editorHtml, ...He, disabled: g || I, onChange: (e) => {
+    p.handleChange(e), F?.(e), B?.(e);
+  }, onPaste: p.handlePaste, onFocus: Pe, onBlur: Q, onKeyDownCapture: Me, onKeyDown: Re, spellCheck: !1, contentEditable: !g && !I }) : /* @__PURE__ */ f("input", { ref: d, ...le("input__control", We), onFocus: Pe, onBlur: Q, onKeyDownCapture: Me, onKeyDown: Re, spellCheck: !1, disabled: g || I }), Ue = i.useCallback((e) => {
+    if (g || I) return;
+    const t = e.target;
+    te.current?.contains(t) || (D.current = !0, U(), T());
+  }, [g, I, U, T]);
+  x(() => {
+    const e = W.current;
+    if (!e) return;
+    const t = (n) => {
+      const r = n.relatedTarget;
+      r && e.contains(r) || Q(n);
+    };
+    return e.addEventListener("focusout", t), () => e.removeEventListener("focusout", t);
+  }, [Q]);
+  const Je = L(() => /* @__PURE__ */ z(_e, { open: ye, modal: !1, onOpenChange: (e) => {
+    !e && D.current || a(e);
   }, children: [
-    /* @__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: {
+    /* @__PURE__ */ f(et, { asChild: !0, children: /* @__PURE__ */ f("button", { type: "button", tabIndex: -1, "aria-hidden": !0, style: {
+      position: "absolute",
+      inset: 0,
+      opacity: 0,
+      pointerEvents: "none"
+    }, onMouseDown: (e) => e.preventDefault() }) }),
+    ue,
+    /* @__PURE__ */ f(tt, { children: /* @__PURE__ */ f("div", { ref: te, onPointerDownCapture: () => {
+      D.current = !0;
+    }, onMouseDownCapture: (e) => {
+      e.preventDefault(), D.current = !0;
+    }, children: /* @__PURE__ */ z(nt, { color: "secondary", inputRef: v, children: [
+      ce,
+      /* @__PURE__ */ z(ut, { paddingSize: "xxs", mt: -0.35, mx: -0.35, style: {
         borderWidth: "2px"
       }, children: [
-        Q?.length === 0 && Ie,
-        !!Q?.length && /* @__PURE__ */ y(
-          ht,
+        G?.length === 0 && me,
+        !!G?.length && /* @__PURE__ */ f(
+          rt,
           {
-            ref: N,
-            inputRef: a,
-            suggestions: Q,
-            onSuggestionSelect: (e) => {
-              W ? W?.(e) : He(e), F(!1), W && Be();
-            }
+            ref: M,
+            inputRef: v,
+            suggestions: G,
+            onSuggestionSelect: Le
           }
         )
       ] }),
-      ke
-    ] }) })
-  ] }), [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 })
+      fe
+    ] }) }) })
+  ] }), [ye, ue, o, G, ce, fe, me, Le, v, a]);
+  return /* @__PURE__ */ z("div", { children: [
+    Z && /* @__PURE__ */ f(Xe, { children: Z }),
+    E && /* @__PURE__ */ f(Ye, { children: E }),
+    /* @__PURE__ */ z("div", { ref: W, ...le(`input ${V?.valid ? "" : "input--not-valid"}`, Y), onPointerDown: Ue, children: [
+      $ && /* @__PURE__ */ f("div", { className: `input__left input__left--${Be}`, children: $ }),
+      l ? Je : ue,
+      N && /* @__PURE__ */ f("div", { className: `input__right input__right--${Ae}`, children: N })
     ] }),
-    !I?.valid && I?.notValidMessage && /* @__PURE__ */ y(dt, { children: I.notValidMessage })
+    !V?.valid && V?.notValidMessage && /* @__PURE__ */ f(Ze, { children: V.notValidMessage })
   ] });
-}), Bt = It;
+}), xt = lt;
 export {
-  Bt as Input
+  xt as Input
 };