@code0-tech/pictor 0.0.0-mvp.22 → 0.0.0-mvp.24

package/dist/components/form/Input.js

@@ -1,153 +1,436 @@
-import { jsxs as f, jsx as r, Fragment as T } from "react/jsx-runtime";
-import h, { useRef as v, useState as x, useEffect as V, useMemo as k } from "react";
-import { mergeCode0Props as y } from "../../utils/utils.js";
+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 "../../utils/contextStore.js";
+import { mergeCode0Props as fe } from "../../utils/utils.js";
 import '../../assets/components/form/Input.style.css';/* empty css                 */
-import { InputLabel as A } from "./InputLabel.js";
-import { InputDescription as K } from "./InputDescription.js";
-import { InputMessage as H } from "./InputMessage.js";
-import { Menu as J, MenuTrigger as U, MenuPortal as q } from "../menu/Menu.js";
-import { InputSuggestionMenuContent as z, InputSuggestionMenuContentItems as B } from "./InputSuggestion.js";
-const G = (t, s, n, a) => {
-  const o = Object.getOwnPropertyDescriptor(t, s)?.set, l = Object.getPrototypeOf(t), i = Object.getOwnPropertyDescriptor(l, s)?.set;
-  o && o !== i ? i?.call(t, n) : o?.call(t, n), t.dispatchEvent(new Event(a, {
-    bubbles: !0
-  }));
-}, oe = h.forwardRef((t, s) => {
-  const n = s || v(null), a = v(null), [o, l] = x(!1), i = v(!0), [c, _] = x(t.defaultValue || t.initialValue || t.placeholder), {
-    wrapperComponent: P = {},
-    // Default empty wrapper props
-    title: b,
-    // Optional input label
-    description: M,
-    // Optional description below label
-    disabled: w = !1,
-    // Input disabled state
-    left: E,
-    // Left element (icon/button)
-    right: I,
-    // Right element (icon/button)
-    leftType: j = "icon",
-    // Visual hint for left
-    rightType: R = "action",
-    // Visual hint for right
-    formValidation: u = {
+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) => {
+  const {
+    wrapperComponent: We = {},
+    title: ge,
+    description: me,
+    disabled: pe = !1,
+    left: he,
+    right: xe,
+    leftType: je = "icon",
+    rightType: _e = "action",
+    formValidation: b = {
       valid: !0,
       notValidMessage: null,
       setValue: null
     },
-    // Validation config
-    suggestions: d,
-    // Optional suggestions array
-    suggestionsHeader: S,
-    // Optional header above suggestion list
-    suggestionsFooter: O,
-    // Optional footer below suggestion list
-    onSuggestionSelect: C = () => {
-    },
-    // Callback for suggestion selection,
-    disableOnValue: D = () => !1,
-    ...m
-    // Remaining native input props
-  } = t;
-  V(() => {
-    const e = n.current;
-    if (!e || !u?.setValue) return;
-    const g = (L) => {
-      const N = m.type !== "checkbox" ? L.target.value : L.target.checked;
-      u.setValue?.(N);
+    suggestions: x,
+    suggestionsHeader: Se,
+    suggestionsFooter: ve,
+    onSuggestionSelect: W,
+    disableOnValue: ke = () => !1,
+    transformSyntax: ne,
+    validationUsesSuggestions: j = !1,
+    filterSuggestionsByLastToken: V = !1,
+    enforceUniqueSuggestions: we = !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) => {
+    const t = e ?? "";
+    return typeof t == "string" ? t : String(t);
+  }, []), De = f.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);
+    return r;
+  }, []), G = f.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({
+        ...r,
+        start: a,
+        end: i
+      });
+    }), n;
+  }, [De]);
+  k(() => {
+    be.current = X;
+  }, [X]), k(() => {
+    const e = s.current;
+    if (!e || !b?.setValue) return;
+    const t = (n) => {
+      const r = L.type !== "checkbox" ? n.target.value : n.target.checked, a = j ? be.current : r;
+      b.setValue?.(a);
     };
-    return e.addEventListener("change", g), () => e.removeEventListener("change", g);
-  }, [u?.setValue]), V(() => {
-    if (!d) return;
-    const e = (g) => {
-      i.current = !!n.current?.contains(g.target);
+    return e.addEventListener("change", t), () => e.removeEventListener("change", t);
+  }, [b?.setValue, s, L.type, 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;
     };
     return document.addEventListener("pointerdown", e, !0), () => document.removeEventListener("pointerdown", e, !0);
+  }, [s, x]), k(() => {
+    const e = s.current;
+    if (!e) return;
+    const t = (n) => {
+      Y || Je(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) => {
+      const n = G(t, e);
+      return Ve(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 = [];
+    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));
+      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]);
+  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(() => {
+    setTimeout(() => {
+      const e = s.current;
+      if (!e) return;
+      e.focus({
+        preventScroll: !0
+      });
+      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(() => {
+    if (ne)
+      return (e, t = se) => ne(e, t);
+  }, [se, ne]), {
+    syntaxSegments: oe,
+    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);
+    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();
+    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
+    };
+  }, [V, s, I, oe, 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;
+    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;
+    const e = new Set(J.map((t) => t.suggestion));
+    return K.filter((t) => !e.has(t));
+  }, [J, we, K]), {
+    ensureVisualIndexVisible: Z,
+    syncSyntaxScroll: S
+  } = dt(s, _), Le = ft(d, O), p = f.useCallback(() => {
+    if (!d) return;
+    const e = s.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 D = v === r.start ? r.visualStart : r.visualEnd;
+      $(null), B(D), requestAnimationFrame(() => {
+        S(), Z(D);
+      });
+      return;
+    }
+    if (t === n) {
+      const u = Math.round(R(t));
+      $(null), B(Number.isFinite(u) ? u : null), requestAnimationFrame(() => {
+        S(), Z(u);
+      });
+      return;
+    }
+    let a = R(t), i = R(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));
+    });
+    const l = Math.min(a, i), o = Math.max(a, i);
+    B(null), $({
+      start: l,
+      end: o
+    });
+    const g = (e.selectionDirection === "backward" ? "backward" : "forward") === "backward" ? l : o;
+    requestAnimationFrame(() => {
+      S(), Z(g);
+    });
+  }, [Z, s, R, S, d, M]), Fe = gt(d, s, Ee, M, R), Ne = f.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 = document.elementFromPoint(e.clientX, e.clientY);
+    return Ne(t ?? e.target);
+  }, [Ne]), Pe = f.useCallback((e) => {
+    if (!s.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), {
+      selectionStart: r
+    } = U(s.current), a = e.shiftKey && Number.isFinite(r) ? r : n;
+    E.current = a, s.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;
+    if (!(e.buttons & 1)) {
+      E.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({
+      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;
+    const t = e.target, {
+      rawStart: n,
+      rawEnd: r
+    } = U(t), a = (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(() => {
+        T(t, o, o), p();
+      }), !0;
+    };
+    if (n !== r) {
+      const {
+        start: o,
+        end: c,
+        hasBlockOverlap: g
+      } = O(n, r);
+      return g ? a(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);
+    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")) {
+      const t = e.target, {
+        selectionStart: n,
+        selectionEnd: r,
+        rawStart: a,
+        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);
+        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(() => {
+            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);
+        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 (!(d && (e.key === "Backspace" || e.key === "Delete") && Oe(e)) && x)
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        const t = C;
+        F(!0), t ? P.current?.highlightNextItem() : setTimeout(() => P.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(() => {
+      p(), S();
+    }), x && !C && F(!0);
+  }, [C, x, S, p]), de = f.useCallback(() => {
+    Re(!1), B(null), $(null);
+  }, []);
+  k(() => {
+    const e = s.current;
+    if (!e || !d) 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;
+    const e = () => {
+      document.activeElement === s.current && p();
+    };
+    return document.addEventListener("selectionchange", e), () => document.removeEventListener("selectionchange", e);
+  }, [s, d, p]), k(() => {
+    const e = s.current;
+    if (!e) return;
+    const t = () => S();
+    return t(), e.addEventListener("scroll", t), () => e.removeEventListener("scroll", t);
+  }, [s, S]), k(() => {
+    S();
+  }, [S, m, ae, Ee]), k(() => {
+    d || ($(null), B(null));
   }, [d]);
-  const p = h.useMemo(() => D(c), [c, D]);
-  V(() => {
-    n.current && (n.current.addEventListener("change", (e) => {
-      p || _(e.target.value);
-    }), n.current.addEventListener("input", (e) => {
-      p || _(e.target.value);
-    }));
-  }, [n, p]);
-  const $ = h.useMemo(() => t.transformValue ? /* @__PURE__ */ f("div", { className: "input__syntax", children: [
-    t.transformValue(c),
-    " "
-  ] }) : null, [t.transformValue, c]), F = k(() => /* @__PURE__ */ f(
-    J,
-    {
-      open: o,
-      modal: !1,
-      onOpenChange: (e) => {
-        if (!e && i.current) {
-          i.current = !1;
-          return;
+  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;
+    else
+      switch (r) {
+        case "append": {
+          i = `${a}${n}`, l = i.length, o = a.length;
+          break;
+        }
+        case "prepend": {
+          i = `${n}${a}`, l = n.length, o = 0;
+          break;
+        }
+        case "insert": {
+          const {
+            rawStart: c,
+            rawEnd: g
+          } = U(s.current), {
+            start: u,
+            end: h
+          } = d ? O(c, g) : {
+            start: c,
+            end: g
+          };
+          i = `${a.slice(0, u)}${n}${a.slice(h)}`, l = u + n.length, o = u;
+          break;
         }
-        l(e), e && setTimeout(() => n.current?.focus(), 0);
-      },
-      children: [
-        /* @__PURE__ */ r(U, { asChild: !0, children: /* @__PURE__ */ r(
-          "input",
+        case "replace":
+        default: {
+          i = n, l = n.length, o = 0;
+          break;
+        }
+      }
+    ze(s.current, "value", i, "change"), Me((c) => {
+      const g = I(i), u = G(c, g), h = n.length ? {
+        id: He.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;
+    }), l !== null && requestAnimationFrame(() => {
+      const c = s.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) => {
+    if (!e && H.current) {
+      H.current = !1;
+      return;
+    }
+    F(e), e && setTimeout(() => s.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: {
+        borderWidth: "2px"
+      }, children: [
+        Q?.length === 0 && ye,
+        !!Q?.length && /* @__PURE__ */ y(
+          lt,
           {
-            ref: n,
-            ...y(`input__control ${t.transformValue ? "input__control--syntax" : ""}`, m),
-            onFocus: () => !o && l(!0),
-            onKeyDown: (e) => {
-              e.key === "ArrowDown" ? (e.preventDefault(), a.current?.focusFirstItem()) : e.key === "ArrowUp" && (e.preventDefault(), a.current?.focusLastItem());
-            },
-            disabled: w || p
-          }
-        ) }),
-        /* @__PURE__ */ r(q, { children: /* @__PURE__ */ f(z, { children: [
-          S,
-          " ",
-          /* @__PURE__ */ r(
-            B,
-            {
-              ref: a,
-              suggestions: d,
-              onSuggestionSelect: (e) => {
-                C || G(s.current, "value", typeof c == "object" ? JSON.stringify(e.value) : e.value, "change"), C(e), l(!1);
-              }
+            ref: P,
+            inputRef: s,
+            suggestions: Q,
+            onSuggestionSelect: (e) => {
+              W ? W?.(e) : qe(e), F(!1), W && Te();
             }
-          ),
-          O,
-          " "
-        ] }) })
-      ]
-    }
-  ), [o, d, S, O]);
-  return /* @__PURE__ */ f(T, { children: [
-    b && /* @__PURE__ */ r(A, { children: b }),
-    " ",
-    M && /* @__PURE__ */ r(K, { children: M }),
-    " ",
-    /* @__PURE__ */ f("div", { ...y(
-      `input ${u?.valid ? "" : "input--not-valid"}`,
-      // Add error class if invalid
-      P
-    ), children: [
-      E && /* @__PURE__ */ r("div", { className: `input__left input__left--${j}`, children: E }),
-      " ",
-      d ? F : /* @__PURE__ */ r(
-        "input",
-        {
-          tabIndex: 2,
-          ref: n,
-          disabled: w,
-          ...y(`input__control ${t.transformValue ? "input__control--syntax" : ""}`, m)
-        }
-      ),
-      $,
-      I && /* @__PURE__ */ r("div", { className: `input__right input__right--${R}`, children: I }),
-      " "
+          }
+        )
+      ] }),
+      ve
+    ] }) })
+  ] }), [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 })
     ] }),
-    !u?.valid && u?.notValidMessage && /* @__PURE__ */ r(H, { children: u.notValidMessage })
+    !b?.valid && b?.notValidMessage && /* @__PURE__ */ y(rt, { children: b.notValidMessage })
   ] });
-});
+}), At = pt;
 export {
-  oe as Input,
-  G as setElementKey
+  At as Input
 };

package/dist/components/form/Input.selection.hook.d.ts

@@ -0,0 +1,17 @@
+import { RefObject } from 'react';
+import { ResolvedVisualSelectionRange } from './InputSyntax';
+import { VisualizedInputSyntaxSegment } from './Input.syntax.hook';
+import { InputSuggestion } from './InputSuggestion';
+export declare const useSelectionVisibility: (inputRef: RefObject<HTMLInputElement | null>, syntaxRef: RefObject<HTMLDivElement | null>) => {
+    ensureVisualIndexVisible: (visualIndex: number | null) => void;
+    syncSyntaxScroll: () => void;
+};
+export declare const useSelectionNormalization: (transformSyntax: ((value: any, appliedSyntaxParts?: (InputSuggestion | any)[]) => any) | undefined, expandSelectionRangeToBlockBoundaries: (rawStart: number, rawEnd: number) => {
+    start: number;
+    end: number;
+    hasBlockOverlap: boolean;
+}) => (target: HTMLInputElement) => void;
+export declare const useSelectionResolution: (transformSyntax: ((value: any, appliedSyntaxParts?: (InputSuggestion | any)[]) => any) | undefined, inputRef: RefObject<HTMLInputElement>, visualSelectionRange: {
+    start: number;
+    end: number;
+} | null, visualizedSyntaxSegments: VisualizedInputSyntaxSegment[], mapRawIndexToVisualIndex: (rawIndex: number) => number) => ResolvedVisualSelectionRange;

package/dist/components/form/Input.selection.hook.js

@@ -0,0 +1,78 @@
+import { c as M } from "../../_virtual/compiler-runtime.js";
+import p from "react";
+import { useSyncSyntaxScroll as $, getSelectionMetrics as L, setSelectionRangeSafe as g } from "./Input.utils.js";
+const F = (r, n) => {
+  const t = M.c(6);
+  let s;
+  t[0] !== r || t[1] !== n ? (s = (u) => {
+    if (u === null || !r.current || !n.current)
+      return;
+    const e = n.current, c = Math.round(u), m = e.querySelector(`[data-visual-index="${c}"]`);
+    let f = null, i = null;
+    if (m)
+      f = m.offsetLeft, i = m.offsetLeft + m.offsetWidth;
+    else {
+      const E = Array.from(e.querySelectorAll("[data-visual-start][data-visual-end]")).find((d) => {
+        const v = Number(d.dataset.visualStart), b = Number(d.dataset.visualEnd);
+        return Number.isFinite(v) && Number.isFinite(b) && c >= v && c <= b;
+      });
+      if (E) {
+        const d = Number(E.dataset.visualStart) || 0, v = Number(E.dataset.visualEnd) || d, b = E.offsetWidth, W = v === d ? 0 : (c - d) / (v - d);
+        f = E.offsetLeft + b * W, i = f;
+      }
+    }
+    if (f === null || i === null)
+      return;
+    const S = e.scrollLeft, N = S + e.clientWidth;
+    let h = S;
+    f - 8 < S ? h = Math.max(f - 8, 0) : i + 8 > N && (h = Math.max(i + 8 - e.clientWidth, 0)), h !== S && (r.current.scrollLeft = h, e.scrollLeft = h);
+  }, t[0] = r, t[1] = n, t[2] = s) : s = t[2];
+  const o = s, a = $(r, n);
+  let l;
+  return t[3] !== o || t[4] !== a ? (l = {
+    ensureVisualIndexVisible: o,
+    syncSyntaxScroll: a
+  }, t[3] = o, t[4] = a, t[5] = l) : l = t[5], l;
+}, _ = (r, n) => {
+  const t = M.c(3);
+  let s;
+  return t[0] !== n || t[1] !== r ? (s = (o) => {
+    if (!r)
+      return;
+    const {
+      selectionStart: a,
+      selectionEnd: l
+    } = L(o);
+    if (a === l)
+      return;
+    const {
+      start: u,
+      end: e,
+      hasBlockOverlap: c
+    } = n(a, l);
+    c && (u === a && e === l || g(o, u, e));
+  }, t[0] = n, t[1] = r, t[2] = s) : s = t[2], s;
+}, O = (r, n, t, s, o) => p.useMemo(() => {
+  if (!r) return null;
+  const a = n.current;
+  if (!a) return t;
+  const {
+    rawStart: l,
+    rawEnd: u
+  } = L(a);
+  if (l === u) return null;
+  let e = o(l), c = o(u);
+  s.forEach((i) => {
+    i.type !== "block" || !(l < i.end && u > i.start) || (e = Math.min(e, i.visualStart), c = Math.max(c, i.visualEnd));
+  });
+  const m = Math.min(e, c), f = Math.max(e, c);
+  return {
+    start: m,
+    end: f
+  };
+}, [n, o, r, t, s]);
+export {
+  _ as useSelectionNormalization,
+  O as useSelectionResolution,
+  F as useSelectionVisibility
+};