@markput/react 0.4.0 → 0.5.0

package/index.js

@@ -1,35 +1,54 @@
 import "./index.css";
-import { jsxs as Z, jsx as f, Fragment as wt } from "react/jsx-runtime";
-import { useState as P, useEffect as M, useImperativeHandle as St, createContext as at, useContext as ct, memo as O, useRef as $, useCallback as k, useMemo as S, useLayoutEffect as Ct } from "react";
+import { jsxs as J, jsx as h, Fragment as wt } from "react/jsx-runtime";
+import { useState as M, useEffect as P, useImperativeHandle as St, createContext as at, useContext as ct, memo as O, useRef as H, useCallback as k, useMemo as S, useLayoutEffect as Ct } from "react";
 function bt(s) {
-  if (s == null) throw new Error("Value must be a non nullable!");
-}
-function Et(s) {
   return s ? Object.fromEntries(
     Object.entries(s).map(([t, e]) => t.startsWith("data") && t.length > 4 && t[4] === t[4].toUpperCase() ? [`data-${t.slice(4).replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase()}`, e] : [t, e])
   ) : {};
 }
-function Tt(...s) {
+function Et(...s) {
   return s.filter(Boolean).join(" ") || void 0;
 }
-function Nt(...s) {
+function Tt(...s) {
   const t = Object.assign({}, ...s.filter(Boolean));
   return Object.keys(t).length > 0 ? t : void 0;
 }
+function Nt(s, t) {
+  return s !== void 0 ? typeof s == "function" ? s(t) : s : t ?? {};
+}
+const It = {
+  container: "div",
+  span: "span"
+};
+function Q(s, t) {
+  return t?.[s] ?? It[s];
+}
+function K(s, t) {
+  const e = t?.[s];
+  return e ? bt(e) : void 0;
+}
 var v = /* @__PURE__ */ ((s) => (s.UP = "ArrowUp", s.DOWN = "ArrowDown", s.LEFT = "ArrowLeft", s.RIGHT = "ArrowRight", s.END = "End", s.HOME = "Home", s.PAGE_DOWN = "PageDown", s.PAGE_UP = "PageUp", s.ENTER = "Enter", s.TAB = "Tab", s.SPACE = " ", s.BACKSPACE = "Backspace", s.DELETE = "Delete", s.COMMA = ",", s.ESC = "Escape", s))(v || {});
-const It = "@", Pt = "@[__value__](__meta__)", x = {
+const Mt = "@", Pt = "@[__value__](__meta__)", Lt = [
+  {
+    markup: Pt,
+    overlay: {
+      trigger: Mt,
+      data: []
+    }
+  }
+], x = {
   Value: "__value__",
   Meta: "__meta__",
   Nested: "__nested__"
-}, N = {
+}, T = {
   Value: "value",
   Meta: "meta",
   Nested: "nested"
 };
-function Mt(s, t) {
-  const { segments: e, gapTypes: n, counts: r, valueGapIndices: o } = Lt(s);
-  At(r, s);
-  const i = r.value === 2, { segments: a, gapTypes: c } = i ? Ot(e, n, o) : { segments: e, gapTypes: n };
+function At(s, t) {
+  const { segments: e, gapTypes: n, counts: r, valueGapIndices: o } = Ot(s);
+  Dt(r, s);
+  const i = r.value === 2, { segments: a, gapTypes: c } = i ? Rt(e, n, o) : { segments: e, gapTypes: n };
   return {
     markup: s,
     index: t,
@@ -41,23 +60,23 @@ function Mt(s, t) {
     // Will be populated by MarkupRegistry
   };
 }
-function Lt(s) {
+function Ot(s) {
   const t = [], e = [], n = [], r = {
     value: 0,
     meta: 0,
     nested: 0
-  }, o = [], i = [N.Value, N.Meta, N.Nested];
+  }, o = [], i = [T.Value, T.Meta, T.Nested];
   for (const l of i) {
-    const d = nt[l];
-    let g = s.indexOf(d);
-    for (; g !== -1; )
-      o.push({ type: l, position: g }), g = s.indexOf(d, g + d.length);
+    const d = st[l];
+    let f = s.indexOf(d);
+    for (; f !== -1; )
+      o.push({ type: l, position: f }), f = s.indexOf(d, f + d.length);
   }
   o.sort((l, d) => l.position - d.position);
   let a = 0;
   for (const l of o) {
     const d = s.substring(a, l.position);
-    d.length > 0 && t.push(d), e.push(l.type), r[l.type]++, l.type === N.Value && n.push(e.length - 1), a = l.position + nt[l.type].length;
+    d.length > 0 && t.push(d), e.push(l.type), r[l.type]++, l.type === T.Value && n.push(e.length - 1), a = l.position + st[l.type].length;
   }
   const c = s.substring(a);
   return c.length > 0 && t.push(c), {
@@ -67,7 +86,7 @@ function Lt(s) {
     valueGapIndices: n
   };
 }
-function At(s, t) {
+function Dt(s, t) {
   const e = [
     { count: s.value, max: 2, name: x.Value },
     { count: s.meta, max: 1, name: x.Meta },
@@ -81,29 +100,29 @@ function At(s, t) {
       `Invalid markup: "${t}". Need at least one "${x.Value}" or "${x.Nested}"`
     );
 }
-const nt = {
-  [N.Value]: x.Value,
-  [N.Meta]: x.Meta,
-  [N.Nested]: x.Nested
+const st = {
+  [T.Value]: x.Value,
+  [T.Meta]: x.Meta,
+  [T.Nested]: x.Nested
 };
-function Ot(s, t, e) {
+function Rt(s, t, e) {
   if (e.length !== 2)
     return { segments: s, gapTypes: t };
   const [n, r] = e, o = [], i = s[n], a = s[n + 1];
-  i && a && o.push(g(i, a, s[n + 2]));
+  i && a && o.push(f(i, a, s[n + 2]));
   for (let u = n + 2; u < r; u++)
     o.push(s[u]);
   const c = s[r], l = s[r + 1];
-  c && l && o.push(g(c, l, s[r + 2]));
-  const d = t.filter((u) => u !== N.Value);
+  c && l && o.push(f(c, l, s[r + 2]));
+  const d = t.filter((u) => u !== T.Value);
   return { segments: o, gapTypes: d };
-  function g(u, h, m) {
-    if (!m) return [u, h, ""];
-    const C = m.charAt(0), y = C && !h.includes(C) && !m.startsWith(u) ? C : "";
-    return [u, h, y];
+  function f(u, g, m) {
+    if (!m) return [u, g, ""];
+    const C = m.charAt(0), y = C && !g.includes(C) && !m.startsWith(u) ? C : "";
+    return [u, g, y];
   }
 }
-class Dt {
+class _t {
   markups;
   descriptors;
   /** Deduplicated list of unique segment definitions (static strings or dynamic patterns) */
@@ -116,7 +135,7 @@ class Dt {
     this.descriptors = t.map((n, r) => {
       if (n === void 0)
         return null;
-      const o = Mt(n, r);
+      const o = At(n, r);
       return o.segments.forEach((i, a) => {
         this.processSegment(o, i, a, e);
       }), this.addToFirstSegmentIndexMap(o), o;
@@ -168,7 +187,7 @@ function lt(s, t) {
     e = e * 33 ^ t.charCodeAt(n);
   return e = e >>> 0, s * 1e6 + (e & 1048575);
 }
-class Rt {
+class Bt {
   constructor(t, e) {
     if (this.descriptor = t, this.expectedSegmentIndex = 1, this.start = e.start, this.end = e.end, t.segments.length === 1 && (this.expectedSegmentIndex = NaN, this.gaps.value = { start: this.start, end: this.end }), t.hasTwoValues && e.captured) {
       this.captured = e.captured;
@@ -237,7 +256,7 @@ class Rt {
     return !t || this.start >= t.end ? !1 : !t.descriptor.hasNested || t.gaps.nested === void 0 ? !0 : !(this.start >= t.gaps.nested.start && this.end <= t.gaps.nested.end);
   }
 }
-class _t {
+class Vt {
   constructor(t) {
     this.registry = t;
   }
@@ -266,7 +285,7 @@ class _t {
   }
   tryStartNewStates(t) {
     this.registry.firstSegmentIndexMap.get(t.index)?.forEach((e) => {
-      const n = new Rt(e, t);
+      const n = new Bt(e, t);
       if (!n.isInvalid) {
         if (n.isCompleted) return this.addToCompleted(n);
         this.addToWaiting(n);
@@ -312,11 +331,11 @@ class _t {
   }
 }
 const A = (s) => s.replace(/[.*+?^${}()|[\]\\\\]/g, "\\$&");
-function Bt(s, t, e) {
+function $t(s, t, e) {
   const n = A(s), r = A(t), o = A(t + e);
   return `${n}([^${o}]+?)${r}`;
 }
-class Vt {
+class Ht {
   staticRegex;
   staticToIndex;
   dynamicRegex;
@@ -340,10 +359,10 @@ class Vt {
         if (typeof a == "string")
           i.push({ index: c, pattern: A(a), definition: a });
         else {
-          const [l, d, g] = a;
+          const [l, d, f] = a;
           o.add(c);
-          const h = Bt(l, d, g).replace("(", `(?<content${c}>`);
-          i.push({ index: c, pattern: h, definition: a });
+          const g = $t(l, d, f).replace("(", `(?<content${c}>`);
+          i.push({ index: c, pattern: g, definition: a });
         }
       }), i.sort((a, c) => {
         const l = typeof a.definition == "string" ? a.definition.length : a.pattern.length;
@@ -395,7 +414,7 @@ const dt = (s, t = 0, e = s.length) => ({
   content: s.substring(t, e),
   position: { start: t, end: e }
 });
-class $t {
+class Ft {
   // Instance fields - only what's needed for single pass
   input;
   // ===== PUBLIC API =====
@@ -528,13 +547,13 @@ class $t {
       };
   }
 }
-function J(s, t) {
+function Y(s, t) {
   let e = "";
   for (const n of s)
     if (n.type === "text")
       e += n.content;
     else if (n.children.length > 0) {
-      const r = J(n.children, t), o = {
+      const r = Y(n.children, t), o = {
         ...n,
         value: r
       };
@@ -543,19 +562,19 @@ function J(s, t) {
       e += t(n);
   return e;
 }
-function j(s, t) {
+function q(s, t) {
   let e = s;
   return t.value !== void 0 && (e = e.replaceAll(x.Value, t.value)), t.meta !== void 0 && (e = e.replaceAll(x.Meta, t.meta)), t.nested !== void 0 && (e = e.replaceAll(x.Nested, t.nested)), e;
 }
-function I(s) {
+function N(s) {
   let t = "";
   for (const e of s) {
     if (e.type === "text") {
       t += e.content;
       continue;
     }
-    const n = e.descriptor.markup, r = n.includes(x.Nested) ? e.children.length > 0 ? I(e.children) : e.nested?.content : void 0;
-    t += j(n, {
+    const n = e.descriptor.markup, r = n.includes(x.Nested) ? e.children.length > 0 ? N(e.children) : e.nested?.content : void 0;
+    t += q(n, {
       value: e.value,
       meta: e.meta,
       nested: r
@@ -563,7 +582,7 @@ function I(s) {
   }
   return t;
 }
-class H {
+class F {
   registry;
   segmentMatcher;
   patternMatcher;
@@ -588,7 +607,7 @@ class H {
    * ```
    */
   constructor(t) {
-    this.registry = new Dt(t), this.segmentMatcher = new Vt(this.registry.segments), this.patternMatcher = new _t(this.registry), this.treeBuilder = new $t();
+    this.registry = new _t(t), this.segmentMatcher = new Ht(this.registry.segments), this.patternMatcher = new Vt(this.registry), this.treeBuilder = new Ft();
   }
   /**
    * Parses text into tokens (static convenience method)
@@ -606,7 +625,7 @@ class H {
    */
   static parse(t, e) {
     const n = e?.markup;
-    return !n || n.length === 0 ? [dt(t)] : new H(n).parse(t);
+    return !n || n.length === 0 ? [dt(t)] : new F(n).parse(t);
   }
   /**
    * Converts tokens back to text (static convenience method)
@@ -620,7 +639,7 @@ class H {
    * ```
    */
   static stringify(t) {
-    return I(t);
+    return N(t);
   }
   /**
    * Parses text into a nested token tree
@@ -667,7 +686,7 @@ class H {
    * ```
    */
   stringify(t) {
-    return I(t);
+    return N(t);
   }
   /**
    * Transforms annotated text by processing all mark tokens with a callback
@@ -696,7 +715,7 @@ class H {
    */
   transform(t, e) {
     const n = this.parse(t);
-    return J(n, e);
+    return Y(n, e);
   }
   /**
    * Escapes markup segments in the given text using backslash
@@ -738,10 +757,10 @@ class H {
     return t.replaceAll(/\\(.)/g, "$1");
   }
 }
-function He(s, t, e) {
+function Ge(s, t, e) {
   if (!e.length) return s;
-  const n = new H(e).parse(s);
-  return J(n, t);
+  const n = new F(e).parse(s);
+  return Y(n, t);
 }
 function z(s, t, e = 0, n) {
   for (const r of s) {
@@ -752,7 +771,7 @@ function z(s, t, e = 0, n) {
     }
   }
 }
-function Ht(s = "", t = "") {
+function Wt(s = "", t = "") {
   if (s === t) return {};
   let e;
   for (let r = 0; r < s.length; r++)
@@ -768,7 +787,7 @@ function Ht(s = "", t = "") {
     }
   return { left: e, right: n };
 }
-function st(s, t) {
+function rt(s, t) {
   let e = -1, n = s.length;
   for (; n - e > 1; ) {
     const r = Math.round((e + n) / 2);
@@ -776,53 +795,53 @@ function st(s, t) {
   }
   return s[e] == t && (n = e), [e, n].filter((r) => s[r] !== void 0);
 }
-function Ft(s) {
+function Gt(s) {
   const { focus: t } = s.nodes, e = s.state.parser.get(), n = s.state.tokens.get();
   if (!e)
     return n;
   const r = e.parse(t.content);
   return r.length === 1 ? n : n.toSpliced(t.index, 1, ...r);
 }
-function Wt(s) {
-  const t = s.state.value.get(), e = Gt(s), n = Ht(s.state.previousValue.get(), t);
+function Ut(s) {
+  const t = s.state.value.get(), e = jt(s), n = Wt(s.state.previousValue.get(), t);
   if (!n.left && !n.right)
     return s.state.previousValue.set(t), s.state.tokens.get();
   s.state.previousValue.set(t);
   const r = s.state.tokens.get();
   switch (!0) {
     case (n.left !== void 0 && e.includes(n.left) && n.right !== void 0 && Math.abs(n.left - n.right) > 1): {
-      const o = e.indexOf(n.left), i = G(s, o - 1, o);
+      const o = e.indexOf(n.left), i = U(s, o - 1, o);
       return r.toSpliced(o - 1, 2, ...i);
     }
     case n.left !== void 0: {
-      const [o] = st(e, n.left), i = G(s, o);
+      const [o] = rt(e, n.left), i = U(s, o);
       return i.length === 1 ? r : r.toSpliced(o, 1, ...i);
     }
     case n.right !== void 0: {
-      const [o] = st(e, n.right), i = G(s, o);
+      const [o] = rt(e, n.right), i = U(s, o);
       return i.length === 1 ? r : r.toSpliced(o, 1, ...i);
     }
     default:
-      return R(s, t ?? "");
+      return _(s, t ?? "");
   }
 }
-function G(s, ...t) {
+function U(s, ...t) {
   let e = "";
   const n = s.state.tokens.get();
   for (const r of t) {
     const o = n[r];
     e += o.content;
   }
-  return R(s, e);
+  return _(s, e);
 }
-function Gt(s) {
+function jt(s) {
   let t = 0;
   return s.state.tokens.get().map((n) => {
     const r = n.content.length;
     return t += r, t - r;
   }) ?? [];
 }
-function R(s, t) {
+function _(s, t) {
   const e = s.state.parser.get();
   return e ? e.parse(t) : [
     {
@@ -832,44 +851,44 @@ function R(s, t) {
     }
   ];
 }
-const Ut = (s, t) => s === t;
-class _ {
-  #e;
-  #t = /* @__PURE__ */ new Set();
+const qt = (s, t) => s === t;
+class B {
+  #t;
+  #e = /* @__PURE__ */ new Set();
   #n;
   constructor(t, e) {
-    this.#e = t, this.#n = e?.equals ?? Ut;
+    this.#t = t, this.#n = e?.equals ?? qt;
   }
   static event() {
-    return new _(void 0, { equals: !1 });
+    return new B(void 0, { equals: !1 });
   }
   get value() {
-    return this.#e;
+    return this.#t;
   }
   set value(t) {
-    (this.#n === !1 || !this.#n(this.#e, t)) && (this.#e = t, this.#t.forEach((e) => e(t)));
+    (this.#n === !1 || !this.#n(this.#t, t)) && (this.#t = t, this.#e.forEach((e) => e(t)));
   }
   on(t) {
-    return this.#t.add(t), () => this.#t.delete(t);
+    return this.#e.add(t), () => this.#e.delete(t);
   }
   emit(t) {
-    arguments.length > 0 && (this.#e = t), this.#t.forEach((e) => e(this.#e));
+    arguments.length > 0 && (this.#t = t), this.#e.forEach((e) => e(this.#t));
   }
   get() {
-    return this.#e;
+    return this.#t;
   }
   set(t) {
     this.value = t;
   }
 }
-function jt(s, t) {
+function zt(s, t) {
   const e = {};
   return e.get = () => s.get(), e.set = (n) => s.set(n), e.on = (n) => s.on(n), e.use = t(e), e;
 }
-function zt(s, t) {
+function Xt(s, t) {
   const e = /* @__PURE__ */ new Map();
   for (const n in s)
-    e.set(n, new _(s[n]));
+    e.set(n, new B(s[n]));
   return new Proxy(s, {
     get(n, r) {
       if (r === "set")
@@ -879,32 +898,32 @@ function zt(s, t) {
         };
       const o = e.get(r);
       if (o)
-        return jt(o, t);
+        return zt(o, t);
     }
   });
 }
-function qt(s) {
+function Zt(s) {
   const t = function(e) {
     s.emit(e);
   };
   return t.on = (e) => s.on(e), t;
 }
-function Xt(s) {
+function Jt(s) {
   const t = [], e = /* @__PURE__ */ new Map();
   for (const n of t)
-    e.set(n, _.event());
+    e.set(n, B.event());
   return new Proxy({}, {
     get(n, r) {
       let o = e.get(r);
-      return o || (o = _.event(), e.set(r, o)), qt(o);
+      return o || (o = B.event(), e.set(r, o)), Zt(o);
     }
   });
 }
-class Zt {
-  #e = 1;
-  #t = /* @__PURE__ */ new WeakMap();
+class Qt {
+  #t = 1;
+  #e = /* @__PURE__ */ new WeakMap();
   get(t) {
-    return this.#t.has(t) ? this.#t.get(t) : (this.#t.set(t, this.#e), this.#e++);
+    return this.#e.has(t) ? this.#e.get(t) : (this.#e.set(t, this.#t), this.#t++);
   }
 }
 class w {
@@ -968,8 +987,8 @@ class w {
     r?.setStart(r.endContainer, e), r?.setEnd(r.endContainer, e);
   }
 }
-const Jt = new RegExp(/^\w*/);
-class Q {
+const Kt = new RegExp(/^\w*/);
+class tt {
   span;
   node;
   dividedText;
@@ -994,7 +1013,7 @@ class Q {
    */
   static find(t, e) {
     if (t && w.isSelectedPosition)
-      return new Q().find(t, e);
+      return new tt().find(t, e);
   }
   getDividedTextBy(t) {
     return { left: this.span.slice(0, t), right: this.span.slice(t) };
@@ -1032,7 +1051,7 @@ class Q {
   }
   matchRightPart() {
     const { right: t } = this.dividedText;
-    return { word: t.match(Jt)?.[0] };
+    return { word: t.match(Kt)?.[0] };
   }
   matchLeftPart(t) {
     const e = this.makeTriggerRegex(t), { left: n } = this.dividedText, r = n.match(e);
@@ -1046,20 +1065,20 @@ class Q {
     return new RegExp(e);
   }
 }
-class B {
-  #e;
+class V {
   #t;
+  #e;
   get target() {
-    return this.#e;
+    return this.#t;
   }
   set target(t) {
-    this.#e = t;
+    this.#t = t;
   }
   get next() {
-    return new B(this.target?.nextSibling, this.#t);
+    return new V(this.target?.nextSibling, this.#e);
   }
   get prev() {
-    return new B(this.target?.previousSibling, this.#t);
+    return new V(this.target?.previousSibling, this.#e);
   }
   get isSpan() {
     return this.index % 2 === 0;
@@ -1095,16 +1114,16 @@ class B {
     this.target && (this.target.textContent = t ?? "");
   }
   get head() {
-    return this.#t.refs.container?.firstChild;
+    return this.#e.refs.container?.firstChild;
   }
   get tail() {
-    return this.#t.refs.container?.lastChild;
+    return this.#e.refs.container?.lastChild;
   }
   get isFocused() {
     return this.target === document.activeElement;
   }
   constructor(t, e) {
-    this.target = t, this.#t = e;
+    this.target = t, this.#e = e;
   }
   setCaretToEnd() {
     w.setCaretToEnd(this.target);
@@ -1116,10 +1135,10 @@ class B {
     this.target = void 0;
   }
 }
-function Qt(s, t, e, n) {
+function Yt(s, t, e, n) {
   return s.slice(0, e) + t + s.slice(e + n.length);
 }
-function U(s, t) {
+function j(s, t) {
   const n = {
     prev: 2,
     self: 1,
@@ -1138,37 +1157,56 @@ function U(s, t) {
   let d = r;
   for (let u = 0; u < n; u++)
     d = d.prev;
-  const g = d.length;
-  t.state.recovery.set({ anchor: d.prev, caret: g }), t.state.onChange.get()?.(I(t.state.tokens.get()));
+  const f = d.length;
+  t.state.recovery.set({ anchor: d.prev, caret: f }), t.state.onChange.get()?.(N(t.state.tokens.get()));
 }
-class Kt {
+class te {
+  constructor(t) {
+    this.store = t;
+  }
+  #t;
+  enable() {
+    this.#t || (this.#t = this.store.state.readOnly.on(() => this.sync()), this.sync());
+  }
+  disable() {
+    this.#t?.(), this.#t = void 0;
+  }
+  sync() {
+    const t = this.store.refs.container;
+    if (!t) return;
+    const n = this.store.state.readOnly.get() ? "false" : "true", r = t.children;
+    for (let o = 0; o < r.length; o += 2)
+      r[o].contentEditable = n;
+  }
+}
+class ee {
   constructor(t) {
     this.store = t;
   }
-  #e;
   #t;
+  #e;
   #n;
   enable() {
-    this.#e || (this.#e = this.store.events.change.on(() => {
+    this.#t || (this.#t = this.store.events.change.on(() => {
       const t = this.store.state.onChange.get();
       if (!this.store.nodes.focus.target) return;
       const e = this.store.state.tokens.get(), n = e[this.store.nodes.focus.index];
-      n.type === "text" ? n.content = this.store.nodes.focus.content : n.type === "mark" && (n.value = this.store.nodes.focus.content), t?.(I(e)), this.store.events.parse();
-    }), this.#t = this.store.events.delete.on((t) => {
+      n.type === "text" ? n.content = this.store.nodes.focus.content : n.type === "mark" && (n.value = this.store.nodes.focus.content), t?.(N(e)), this.store.events.parse();
+    }), this.#e = this.store.events.delete.on((t) => {
       if (!t) return;
       const { token: e } = t, n = this.store.state.onChange.get(), r = this.store.state.tokens.get(), o = r.indexOf(e);
-      this.store.state.tokens.set(r.toSpliced(o, 1)), n?.(I(this.store.state.tokens.get()));
+      this.store.state.tokens.set(r.toSpliced(o, 1)), n?.(N(this.store.state.tokens.get()));
     }), this.#n = this.store.events.select.on((t) => {
       if (!t) return;
       const e = this.store.state.Mark.get(), n = this.store.state.onChange.get(), {
         mark: r,
         match: { option: o, span: i, index: a, source: c }
-      } = t, l = r.type === "mark" ? j(o.markup, {
+      } = t, l = r.type === "mark" ? q(o.markup, {
         value: r.value,
         meta: r.meta
-      }) : j(o.markup, {
+      }) : q(o.markup, {
         value: r.content
-      }), d = Qt(i, l, a, c);
+      }), d = Yt(i, l, a, c);
       if (this.store.state.recovery.set(
         e ? {
           caret: 0,
@@ -1178,37 +1216,37 @@ class Kt {
         } : { caret: a + l.length, anchor: this.store.nodes.input }
       ), this.store.nodes.input.target) {
         this.store.nodes.input.content = d;
-        const g = this.store.state.tokens.get(), u = g[this.store.nodes.input.index];
-        u.type === "text" && (u.content = d), this.store.nodes.focus.target = this.store.nodes.input.target, this.store.nodes.input.clear(), n?.(I(g)), this.store.events.parse();
+        const f = this.store.state.tokens.get(), u = f[this.store.nodes.input.index];
+        u.type === "text" && (u.content = d), this.store.nodes.focus.target = this.store.nodes.input.target, this.store.nodes.input.clear(), n?.(N(f)), this.store.events.parse();
       }
     }));
   }
   disable() {
-    this.#e?.(), this.#t?.(), this.#n?.(), this.#e = void 0, this.#t = void 0, this.#n = void 0;
+    this.#t?.(), this.#e?.(), this.#n?.(), this.#t = void 0, this.#e = void 0, this.#n = void 0;
   }
 }
-class Yt {
+class ne {
   constructor(t) {
     this.store = t;
   }
-  #e;
   #t;
+  #e;
   #n;
   enable() {
-    if (this.#e) return;
+    if (this.#t) return;
     const t = this.store.refs.container;
-    t && (this.#e = (e) => {
+    t && (this.#t = (e) => {
       this.store.nodes.focus.target = e.target;
-    }, this.#t = () => {
+    }, this.#e = () => {
       this.store.nodes.focus.target = void 0;
     }, this.#n = () => {
       const e = this.store.state.tokens.get();
       e.length === 1 && e[0].type === "text" && e[0].content === "" && this.store.refs.container?.firstElementChild?.focus();
-    }, t.addEventListener("focusin", this.#e), t.addEventListener("focusout", this.#t), t.addEventListener("click", this.#n));
+    }, t.addEventListener("focusin", this.#t), t.addEventListener("focusout", this.#e), t.addEventListener("click", this.#n));
   }
   disable() {
     const t = this.store.refs.container;
-    !t || !this.#e || (t.removeEventListener("focusin", this.#e), t.removeEventListener("focusout", this.#t), t.removeEventListener("click", this.#n), this.#e = void 0, this.#t = void 0, this.#n = void 0);
+    !t || !this.#t || (t.removeEventListener("focusin", this.#t), t.removeEventListener("focusout", this.#e), t.removeEventListener("click", this.#n), this.#t = void 0, this.#e = void 0, this.#n = void 0);
   }
   recover() {
     const t = this.store.state.recovery.get();
@@ -1232,7 +1270,7 @@ class Yt {
     this.store.nodes.focus.caret = n, this.store.state.recovery.set(void 0);
   }
 }
-function te(s, t) {
+function se(s, t) {
   const { focus: e } = s.nodes;
   if (e.isMark && !e.isEditable || e.isCaretAtBeginning) {
     const n = e.prev;
@@ -1240,7 +1278,7 @@ function te(s, t) {
   }
   return !1;
 }
-function ee(s, t) {
+function re(s, t) {
   const { focus: e } = s.nodes;
   if (e.isMark && !e.isEditable || e.isCaretAtEnd) {
     const n = e.next;
@@ -1248,20 +1286,20 @@ function ee(s, t) {
   }
   return !1;
 }
-class ne {
+class oe {
   constructor(t) {
     this.store = t;
   }
-  #e;
   #t;
+  #e;
   #n;
   #s;
   #r = null;
   #o = !1;
   enable() {
-    this.#e || (this.#e = (t) => {
+    this.#t || (this.#t = (t) => {
       this.#r = t.target, this.#o = !0;
-    }, this.#t = (t) => {
+    }, this.#e = (t) => {
       const e = this.#o, n = !this.store.refs.container?.contains(this.#r) || this.#r !== t.target, r = window.getSelection()?.containsNode(this.store.refs.container, !0);
       e && n && r && this.store.state.selecting.set("drag");
     }, this.#n = () => {
@@ -1270,13 +1308,13 @@ class ne {
       if (this.store.state.selecting.get() !== "drag") return;
       const t = [...this.store.refs.container.children], e = t.map((n) => n.contentEditable);
       t.forEach((n) => n.contentEditable = "false"), t.forEach((n, r) => n.contentEditable = e[r]);
-    }, document.addEventListener("mousedown", this.#e), document.addEventListener("mousemove", this.#t), document.addEventListener("mouseup", this.#n), document.addEventListener("selectionchange", this.#s));
+    }, document.addEventListener("mousedown", this.#t), document.addEventListener("mousemove", this.#e), document.addEventListener("mouseup", this.#n), document.addEventListener("selectionchange", this.#s));
   }
   disable() {
-    this.#e && (document.removeEventListener("mousedown", this.#e), document.removeEventListener("mousemove", this.#t), document.removeEventListener("mouseup", this.#n), document.removeEventListener("selectionchange", this.#s), this.#e = void 0, this.#t = void 0, this.#n = void 0, this.#s = void 0), this.#r = null, this.#o = !1;
+    this.#t && (document.removeEventListener("mousedown", this.#t), document.removeEventListener("mousemove", this.#e), document.removeEventListener("mouseup", this.#n), document.removeEventListener("selectionchange", this.#s), this.#t = void 0, this.#e = void 0, this.#n = void 0, this.#s = void 0), this.#r = null, this.#o = !1;
   }
 }
-function se(s, t) {
+function ie(s, t) {
   if ((t.ctrlKey || t.metaKey) && t.code === "KeyA") {
     t.preventDefault();
     const e = window.getSelection(), n = s.refs.container?.firstChild, r = s.refs.container?.lastChild;
@@ -1284,27 +1322,27 @@ function se(s, t) {
     e.setBaseAndExtent(n, 0, r, 1), s.state.selecting.set("all");
   }
 }
-class re {
+class ae {
   constructor(t) {
     this.store = t;
   }
-  #e;
   #t;
+  #e;
   #n;
   enable() {
-    if (this.#e) return;
+    if (this.#t) return;
     const t = this.store.refs.container;
-    t && (this.#e = (e) => {
-      e.key === v.LEFT ? te(this.store, e) : e.key === v.RIGHT && ee(this.store, e), this.#s(e), se(this.store, e);
-    }, this.#t = (e) => {
-      ae(this.store, e);
+    t && (this.#t = (e) => {
+      e.key === v.LEFT ? se(this.store, e) : e.key === v.RIGHT && re(this.store, e), this.#s(e), ie(this.store, e);
+    }, this.#e = (e) => {
+      de(this.store, e);
     }, this.#n = (e) => {
-      oe(this.store, e);
-    }, t.addEventListener("keydown", this.#e), t.addEventListener("paste", this.#t), t.addEventListener("beforeinput", this.#n, !0));
+      ce(this.store, e);
+    }, t.addEventListener("keydown", this.#t), t.addEventListener("paste", this.#e), t.addEventListener("beforeinput", this.#n, !0));
   }
   disable() {
     const t = this.store.refs.container;
-    !t || !this.#e || (t.removeEventListener("keydown", this.#e), t.removeEventListener("paste", this.#t), t.removeEventListener("beforeinput", this.#n, !0), this.#e = void 0, this.#t = void 0, this.#n = void 0);
+    !t || !this.#t || (t.removeEventListener("keydown", this.#t), t.removeEventListener("paste", this.#e), t.removeEventListener("beforeinput", this.#n, !0), this.#t = void 0, this.#e = void 0, this.#n = void 0);
   }
   #s(t) {
     const { focus: e } = this.store.nodes;
@@ -1312,14 +1350,14 @@ class re {
       if (e.isMark) {
         if (e.isEditable && (t.key === v.BACKSPACE && !e.isCaretAtBeginning || t.key === v.DELETE && !e.isCaretAtEnd))
           return;
-        t.preventDefault(), U("self", this.store);
+        t.preventDefault(), j("self", this.store);
         return;
       }
-      t.key === v.BACKSPACE && e.isSpan && e.isCaretAtBeginning && e.prev.target && (t.preventDefault(), U("prev", this.store)), t.key === v.DELETE && e.isSpan && e.isCaretAtEnd && e.next.target && (t.preventDefault(), U("next", this.store));
+      t.key === v.BACKSPACE && e.isSpan && e.isCaretAtBeginning && e.prev.target && (t.preventDefault(), j("prev", this.store)), t.key === v.DELETE && e.isSpan && e.isCaretAtEnd && e.next.target && (t.preventDefault(), j("next", this.store));
     }
   }
 }
-function oe(s, t) {
+function ce(s, t) {
   const e = s.state.selecting.get();
   if (e === "all" && ut(s)) {
     if (t.inputType === "insertFromPaste") {
@@ -1333,9 +1371,9 @@ function oe(s, t) {
   }
   e === "all" && s.state.selecting.set(void 0);
   const { focus: n } = s.nodes;
-  !n.target || !n.isEditable || ie(n, t) && s.events.change();
+  !n.target || !n.isEditable || le(n, t) && s.events.change();
 }
-function ie(s, t) {
+function le(s, t) {
   const e = s.caret, n = s.content;
   let r, o;
   switch (t.inputType) {
@@ -1369,7 +1407,7 @@ function ie(s, t) {
   }
   return s.content = r, s.caret = o, !0;
 }
-function ae(s, t) {
+function de(s, t) {
   const e = s.state.selecting.get();
   if (e !== "all" || !ut(s)) {
     e === "all" && s.state.selecting.set(void 0);
@@ -1406,41 +1444,41 @@ function ht(s, t) {
     }), e.focus());
   });
 }
-class ce {
-  #e = [];
-  #t = !1;
+class ue {
+  #t = [];
+  #e = !1;
   register(t) {
-    return this.#e.push(t), this;
+    return this.#t.push(t), this;
   }
   enableAll() {
-    this.#t || (this.#t = !0, this.#e.forEach((t) => t.enable()));
+    this.#e || (this.#e = !0, this.#t.forEach((t) => t.enable()));
   }
   disableAll() {
-    this.#t && (this.#t = !1, this.#e.forEach((t) => t.disable()));
+    this.#e && (this.#e = !1, this.#t.forEach((t) => t.disable()));
   }
 }
-const V = (s, t) => ({
+const R = (s, t) => ({
   name: s,
   enable: () => t.enable(),
   disable: () => t.disable()
-}), le = (s) => {
-  const t = new ce();
-  return t.register(V("keydown", s.controllers.keydown)).register(V("system", s.controllers.system)).register(V("focus", s.controllers.focus)).register(V("textSelection", s.controllers.textSelection)), t;
+}), he = (s) => {
+  const t = new ue();
+  return t.register(R("keydown", s.controllers.keydown)).register(R("system", s.controllers.system)).register(R("focus", s.controllers.focus)).register(R("textSelection", s.controllers.textSelection)).register(R("contentEditable", s.controllers.contentEditable)), t;
 };
-class de {
+class fe {
   constructor(t) {
     this.store = t;
   }
-  #e = [];
-  #t = !1;
+  #t = [];
+  #e = !1;
   enable(t) {
-    const { store: e } = this, n = le(e);
-    n.enableAll(), this.#e.push(() => n.disableAll()), this.#n(), t?.getTrigger && this.#s(t.getTrigger);
+    const { store: e } = this, n = he(e);
+    n.enableAll(), this.#t.push(() => n.disableAll()), this.#n(), t?.getTrigger && this.#s(t.getTrigger);
   }
   disable() {
-    for (const t of this.#e)
+    for (const t of this.#t)
       t();
-    this.#e = [], this.#t = !1;
+    this.#t = [], this.#e = !1;
   }
   /**
    * Synchronizes the parser with current options and handles parsing.
@@ -1449,12 +1487,12 @@ class de {
    */
   syncParser(t, e) {
     const { store: n } = this, r = e?.map((i) => i.markup);
-    if (r && r.some(Boolean) ? n.state.parser.set(new H(r)) : n.state.parser.set(void 0), this.#t) {
+    if (r && r.some(Boolean) ? n.state.parser.set(new F(r)) : n.state.parser.set(void 0), this.#e) {
       n.state.recovery.get() || n.events.parse();
       return;
     }
     const o = t ?? n.state.defaultValue.get() ?? "";
-    n.state.tokens.set(R(n, o)), this.#t = !0;
+    n.state.tokens.set(_(n, o)), this.#e = !0;
   }
   /**
    * Recovers focus after tokens change.
@@ -1462,36 +1500,63 @@ class de {
    * since focus recovery requires the new DOM to be committed.
    */
   recoverFocus() {
-    this.store.state.Mark.get() && this.store.controllers.focus.recover();
+    this.store.controllers.contentEditable.sync(), this.store.state.Mark.get() && this.store.controllers.focus.recover();
   }
   #n() {
     const { store: t } = this;
-    this.#e.push(
+    this.#t.push(
       t.events.parse.on(() => {
         if (t.state.recovery.get()) {
-          const e = I(t.state.tokens.get());
-          t.state.tokens.set(R(t, e)), t.state.previousValue.set(e);
+          const e = N(t.state.tokens.get());
+          t.state.tokens.set(_(t, e)), t.state.previousValue.set(e);
           return;
         }
-        t.state.tokens.set(t.nodes.focus.target ? Ft(t) : Wt(t));
+        t.state.tokens.set(t.nodes.focus.target ? Gt(t) : Ut(t));
       })
     );
   }
   #s(t) {
     const { store: e } = this;
-    e.controllers.overlay.enableTrigger(t, (n) => e.state.overlayMatch.set(n)), this.#e.push(() => e.controllers.overlay.disable()), this.#e.push(
+    e.controllers.overlay.enableTrigger(t, (n) => e.state.overlayMatch.set(n)), this.#t.push(() => e.controllers.overlay.disable()), this.#t.push(
       e.state.overlayMatch.on((n) => {
         n ? (e.nodes.input.target = e.nodes.focus.target, e.controllers.overlay.enableClose()) : e.controllers.overlay.disableClose();
       })
     );
   }
 }
-class ue {
+function ge(s, t) {
+  const e = t.toLowerCase();
+  return s.filter((n) => n.toLowerCase().indexOf(e) > -1);
+}
+function pe(s, t, e) {
+  return {
+    type: "mark",
+    value: t,
+    meta: e,
+    content: "",
+    position: {
+      start: s.index,
+      end: s.index + s.span.length
+    },
+    descriptor: {
+      markup: s.option.markup,
+      index: 0,
+      segments: [],
+      gapTypes: [],
+      hasNested: !1,
+      hasTwoValues: !1,
+      segmentGlobalIndices: []
+    },
+    children: [],
+    nested: void 0
+  };
+}
+class ve {
   constructor(t) {
     this.store = t;
   }
-  #e;
   #t;
+  #e;
   #n;
   #s;
   #r;
@@ -1499,11 +1564,11 @@ class ue {
   #i;
   #a;
   enableTrigger(t, e) {
-    if (this.#e) return;
-    this.#e = this.store.events.clearOverlay.on(() => {
+    if (this.#t) return;
+    this.#t = this.store.events.clearOverlay.on(() => {
       e(void 0);
-    }), this.#t = this.store.events.checkOverlay.on(() => {
-      const r = Q.find(this.store.state.options.get(), t);
+    }), this.#e = this.store.events.checkOverlay.on(() => {
+      const r = tt.find(this.store.state.options.get(), t);
       e(r);
     }), this.#n = this.store.events.change.on(() => {
       const r = this.store.state.showOverlayOn.get(), o = "change";
@@ -1532,31 +1597,46 @@ class ue {
   }
   disable() {
     const t = this.store.refs.container;
-    t && this.#r && (t.removeEventListener("focusin", this.#r), t.removeEventListener("focusout", this.#o)), this.#s && document.removeEventListener("selectionchange", this.#s), this.disableClose(), this.#e?.(), this.#t?.(), this.#n?.(), this.#e = void 0, this.#t = void 0, this.#n = void 0, this.#s = void 0, this.#r = void 0, this.#o = void 0;
+    t && this.#r && (t.removeEventListener("focusin", this.#r), t.removeEventListener("focusout", this.#o)), this.#s && document.removeEventListener("selectionchange", this.#s), this.disableClose(), this.#t?.(), this.#e?.(), this.#n?.(), this.#t = void 0, this.#e = void 0, this.#n = void 0, this.#s = void 0, this.#r = void 0, this.#o = void 0;
+  }
+}
+function me(s, t, e) {
+  if (e === 0) return { action: "none", index: t };
+  const n = !isNaN(t);
+  switch (s) {
+    case v.UP:
+      return { action: "up", index: n ? (e + (t - 1) % e) % e : 0 };
+    case v.DOWN:
+      return { action: "down", index: n ? (t + 1) % e : 0 };
+    case v.ENTER:
+      return n ? { action: "select", index: t } : { action: "none", index: t };
+    default:
+      return { action: "none", index: t };
   }
 }
-class he {
-  key = new Zt();
+class ye {
+  key = new Qt();
   nodes = {
-    focus: new B(void 0, this),
-    input: new B(void 0, this)
+    focus: new V(void 0, this),
+    input: new V(void 0, this)
   };
   state;
-  events = Xt();
+  events = Jt();
   refs = {
     container: null,
     overlay: null
   };
   controllers = {
-    overlay: new ue(this),
-    focus: new Yt(this),
-    keydown: new re(this),
-    system: new Kt(this),
-    textSelection: new ne(this)
+    overlay: new ve(this),
+    focus: new ne(this),
+    keydown: new ae(this),
+    system: new ee(this),
+    textSelection: new oe(this),
+    contentEditable: new te(this)
   };
-  lifecycle = new de(this);
+  lifecycle = new fe(this);
   constructor(t) {
-    this.state = zt(
+    this.state = Xt(
       {
         tokens: [],
         parser: void 0,
@@ -1595,13 +1675,13 @@ class he {
     };
   }
 }
-class fe {
+class xe {
   ref;
-  #e;
   #t;
+  #e;
   #n;
   constructor(t) {
-    this.ref = t.ref, this.#e = t.store, this.#t = t.token;
+    this.ref = t.ref, this.#t = t.store, this.#e = t.token;
   }
   get readOnly() {
     return this.#n;
@@ -1610,58 +1690,58 @@ class fe {
     this.#n = t;
   }
   get content() {
-    return this.#t.content;
+    return this.#e.content;
   }
   set content(t) {
-    this.#t.content = t, this.#s();
+    this.#e.content = t, this.#s();
   }
   get value() {
-    return this.#t.value;
+    return this.#e.value;
   }
   set value(t) {
-    this.#t.value = t ?? "", this.#s();
+    this.#e.value = t ?? "", this.#s();
   }
   get meta() {
-    return this.#t.meta;
+    return this.#e.meta;
   }
   set meta(t) {
-    this.#t.meta = t, this.#s();
+    this.#e.meta = t, this.#s();
   }
   get depth() {
-    return z(this.#e.state.tokens.get(), this.#t).depth;
+    return z(this.#t.state.tokens.get(), this.#e).depth;
   }
   get hasChildren() {
-    return this.#t.children.length > 0;
+    return this.#e.children.length > 0;
   }
   get parent() {
-    return z(this.#e.state.tokens.get(), this.#t)?.parent;
+    return z(this.#t.state.tokens.get(), this.#e)?.parent;
   }
   get tokens() {
-    return this.#t.children;
+    return this.#e.children;
   }
   change = (t) => {
-    this.#t.content = t.content, this.#t.value = t.value ?? "", t.meta !== void 0 && (this.#t.meta = t.meta), this.#s();
+    this.#e.content = t.content, this.#e.value = t.value ?? "", t.meta !== void 0 && (this.#e.meta = t.meta), this.#s();
   };
-  remove = () => this.#e.events.delete({ token: this.#t });
+  remove = () => this.#t.events.delete({ token: this.#e });
   #s() {
-    this.#e.events.change();
+    this.#t.events.change();
   }
 }
 let ft = 0;
-function rt(s) {
+function ot(s) {
   return `block-${ft++}-${s}`;
 }
-function ge() {
+function ke() {
   ft = 0;
 }
-function pe(s) {
+function we(s) {
   if (s.length === 0) return [];
-  ge();
+  ke();
   const t = [];
   let e = [], n = -1;
   const r = (o) => {
     e.length !== 0 && (t.push({
-      id: rt(n),
+      id: ot(n),
       tokens: [...e],
       startPos: n,
       endPos: o
@@ -1671,7 +1751,7 @@ function pe(s) {
     if (o.type === "mark") {
       o.content.endsWith(`
 `) ? (r(o.position.start), t.push({
-        id: rt(o.position.start),
+        id: ot(o.position.start),
         tokens: [o],
         startPos: o.position.start,
         endPos: o.position.end
@@ -1679,7 +1759,7 @@ function pe(s) {
       continue;
     }
     if (o.type !== "text") continue;
-    const a = ve(o);
+    const a = Se(o);
     for (let c = 0; c < a.length; c++) {
       const l = a[c];
       if (l.isNewline) {
@@ -1699,7 +1779,7 @@ function pe(s) {
   }
   return t;
 }
-function ve(s) {
+function Se(s) {
   const t = [], { content: e, position: n } = s;
   let r = n.start;
   const o = [], i = () => {
@@ -1735,12 +1815,12 @@ function ve(s) {
   }
   return i(), t;
 }
-function me(s, t, e, n) {
+function Ce(s, t, e, n) {
   if (e === n || e === n - 1 || t.length < 2 || e < 0 || e >= t.length || n < 0 || n > t.length) return s;
-  const r = ye(s, t), o = ke(r, e, n);
-  return xe(o);
+  const r = be(s, t), o = Te(r, e, n);
+  return Ee(o);
 }
-function ye(s, t) {
+function be(s, t) {
   return t.map((e, n) => {
     const r = s.substring(e.startPos, e.endPos);
     let o = "";
@@ -1755,7 +1835,7 @@ function ye(s, t) {
     };
   });
 }
-function xe(s) {
+function Ee(s) {
   const t = [];
   for (let e = 0; e < s.length; e++) {
     const n = s[e], r = e === s.length - 1;
@@ -1766,11 +1846,11 @@ function xe(s) {
   }
   return t.join("");
 }
-function ke(s, t, e) {
+function Te(s, t, e) {
   const n = [...s], [r] = n.splice(t, 1), o = e > t ? e - 1 : e;
-  return n.splice(o, 0, r), we(n, s), n;
+  return n.splice(o, 0, r), Ne(n, s), n;
 }
-function we(s, t) {
+function Ne(s, t) {
   for (let e = 0; e < s.length - 1; e++) {
     const n = s[e].index, r = s[e + 1].index;
     if (Math.abs(n - r) === 1) {
@@ -1782,49 +1862,30 @@ function we(s, t) {
 `;
   }
 }
-const Se = [
-  {
-    markup: Pt,
-    overlay: {
-      trigger: It,
-      data: []
-    }
-  }
-], Ce = (s) => () => {
-  const [t, e] = P(() => s.get());
-  return M(() => s.on(e), [s]), t;
+const Ie = (s) => () => {
+  const [t, e] = M(() => s.get());
+  return P(() => s.on(e), [s]), t;
 };
-function be(s, t) {
-  St(t, () => s.createHandler(), [s]), M(() => (s.lifecycle.enable({
+function Me(s, t) {
+  St(t, () => s.createHandler(), [s]), P(() => (s.lifecycle.enable({
     getTrigger: (a) => a.overlay?.trigger
   }), () => s.lifecycle.disable()), []);
-  const e = s.state.value.use(), n = s.state.Mark.use(), r = s.state.options.use(), o = n ? r : void 0;
-  M(() => {
+  const e = s.state.value.use(), n = s.state.Mark.use(), r = s.state.options.use(), o = n ? r : void 0, i = s.state.tokens.use();
+  P(() => {
     s.lifecycle.syncParser(e, o);
-  }, [e, o]);
-  const i = s.state.tokens.use();
-  M(() => {
+  }, [e, o]), P(() => {
     s.lifecycle.recoverFocus();
   }, [i]);
 }
-const K = at(void 0);
-K.displayName = "StoreContext";
+const et = at(void 0);
+et.displayName = "StoreContext";
 function E() {
-  const s = ct(K);
-  return bt(s), s;
+  const s = ct(et);
+  if (s === void 0)
+    throw new Error("Store not found. Make sure to wrap component in StoreContext.");
+  return s;
 }
-const Ee = {
-  container: "div",
-  span: "span"
-};
-function Y(s, t) {
-  return t?.[s] ? t[s] : Ee[s];
-}
-function tt(s, t) {
-  const e = t?.[s];
-  return e ? Et(e) : void 0;
-}
-const q = {
+const X = {
   position: "absolute",
   left: -28,
   top: 2,
@@ -1847,16 +1908,16 @@ const q = {
   font: "inherit",
   lineHeight: 1
 }, gt = {
-  ...q,
+  ...X,
   opacity: 1
-}, Te = {
+}, Pe = {
   ...gt,
   cursor: "grabbing"
-}, Ne = {
+}, Le = {
   position: "relative",
   paddingLeft: 4,
   transition: "opacity 0.2s ease"
-}, ot = {
+}, it = {
   position: "absolute",
   left: 0,
   right: 0,
@@ -1865,17 +1926,17 @@ const q = {
   borderRadius: 1,
   pointerEvents: "none",
   zIndex: 10
-}, pt = O(() => /* @__PURE__ */ Z("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "currentColor", children: [
-  /* @__PURE__ */ f("circle", { cx: "5", cy: "3", r: "1.5" }),
-  /* @__PURE__ */ f("circle", { cx: "11", cy: "3", r: "1.5" }),
-  /* @__PURE__ */ f("circle", { cx: "5", cy: "8", r: "1.5" }),
-  /* @__PURE__ */ f("circle", { cx: "11", cy: "8", r: "1.5" }),
-  /* @__PURE__ */ f("circle", { cx: "5", cy: "13", r: "1.5" }),
-  /* @__PURE__ */ f("circle", { cx: "11", cy: "13", r: "1.5" })
+}, pt = O(() => /* @__PURE__ */ J("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "currentColor", children: [
+  /* @__PURE__ */ h("circle", { cx: "5", cy: "3", r: "1.5" }),
+  /* @__PURE__ */ h("circle", { cx: "11", cy: "3", r: "1.5" }),
+  /* @__PURE__ */ h("circle", { cx: "5", cy: "8", r: "1.5" }),
+  /* @__PURE__ */ h("circle", { cx: "11", cy: "8", r: "1.5" }),
+  /* @__PURE__ */ h("circle", { cx: "5", cy: "13", r: "1.5" }),
+  /* @__PURE__ */ h("circle", { cx: "11", cy: "13", r: "1.5" })
 ] }));
 pt.displayName = "GripIcon";
 const vt = O(({ blockIndex: s, children: t, readOnly: e, onReorder: n }) => {
-  const [r, o] = P(!1), [i, a] = P(!1), [c, l] = P(null), d = $(null), g = k(() => o(!0), []), u = k(() => o(!1), []), h = k(
+  const [r, o] = M(!1), [i, a] = M(!1), [c, l] = M(null), d = H(null), f = k(() => o(!0), []), u = k(() => o(!1), []), g = k(
     (p) => {
       p.dataTransfer.effectAllowed = "move", p.dataTransfer.setData("text/plain", String(s)), a(!0), d.current && p.dataTransfer.setDragImage(d.current, 0, 0);
     },
@@ -1884,8 +1945,8 @@ const vt = O(({ blockIndex: s, children: t, readOnly: e, onReorder: n }) => {
     a(!1), l(null);
   }, []), C = k((p) => {
     if (p.preventDefault(), p.dataTransfer.dropEffect = "move", !d.current) return;
-    const D = d.current.getBoundingClientRect(), W = D.top + D.height / 2;
-    l(p.clientY < W ? "before" : "after");
+    const D = d.current.getBoundingClientRect(), G = D.top + D.height / 2;
+    l(p.clientY < G ? "before" : "after");
   }, []), y = k((p) => {
     p.currentTarget.contains(p.relatedTarget) || l(null);
   }, []), b = k(
@@ -1893,139 +1954,123 @@ const vt = O(({ blockIndex: s, children: t, readOnly: e, onReorder: n }) => {
       p.preventDefault();
       const D = parseInt(p.dataTransfer.getData("text/plain"), 10);
       if (isNaN(D)) return;
-      const W = c === "before" ? s : s + 1;
-      l(null), n(D, W);
+      const G = c === "before" ? s : s + 1;
+      l(null), n(D, G);
     },
     [s, c, n]
-  ), T = {
-    ...Ne,
+  ), I = {
+    ...Le,
     opacity: i ? 0.4 : 1
-  }, L = e ? { ...q, display: "none" } : i ? Te : r ? gt : q;
-  return /* @__PURE__ */ Z(
+  }, L = e ? { ...X, display: "none" } : i ? Pe : r ? gt : X;
+  return /* @__PURE__ */ J(
     "div",
     {
       ref: d,
-      style: T,
-      onMouseEnter: g,
+      style: I,
+      onMouseEnter: f,
       onMouseLeave: u,
       onDragOver: C,
       onDragLeave: y,
       onDrop: b,
       children: [
-        c === "before" && /* @__PURE__ */ f("div", { style: { ...ot, top: -1 } }),
-        /* @__PURE__ */ f(
+        c === "before" && /* @__PURE__ */ h("div", { style: { ...it, top: -1 } }),
+        /* @__PURE__ */ h(
           "button",
           {
             type: "button",
             draggable: !e,
-            onDragStart: h,
+            onDragStart: g,
             onDragEnd: m,
             style: L,
             "aria-label": "Drag to reorder",
-            children: /* @__PURE__ */ f(pt, {})
+            children: /* @__PURE__ */ h(pt, {})
           }
         ),
         t,
-        c === "after" && /* @__PURE__ */ f("div", { style: { ...ot, bottom: -1 } })
+        c === "after" && /* @__PURE__ */ h("div", { style: { ...it, bottom: -1 } })
       ]
     }
   );
 });
 vt.displayName = "DraggableBlock";
-const Ie = (s) => {
-  const t = at(void 0);
-  return t.displayName = s, [() => {
-    const n = ct(t);
-    if (n === void 0)
-      throw new Error(`Context "${s}" not found. Make sure to wrap component in its Provider.`);
-    return n;
-  }, t.Provider, t];
-}, [et, it] = Ie("NodeProvider");
+const $ = at(void 0);
+$.displayName = "TokenProvider";
+function nt() {
+  const s = ct($);
+  if (s === void 0)
+    throw new Error("Token not found. Make sure to wrap component in TokenContext.Provider.");
+  return s;
+}
 function mt(s, t, e, n) {
-  const r = E(), o = r.state.Mark.use(), i = r.state.Overlay.use(), a = s === "mark" ? o : i, c = s === "mark" ? t?.mark : t?.overlay;
-  let l;
-  c !== void 0 ? typeof c == "function" ? l = c(e) : l = c : l = e ?? {};
-  const d = l.slot || a || n;
+  const r = E(), o = r.state.Mark.use(), i = r.state.Overlay.use(), a = s === "mark" ? o : i, c = s === "mark" ? t?.mark : t?.overlay, l = Nt(c, e ?? {}), d = l.slot || a || n;
   if (!d)
     throw new Error(
       `No ${s} component found. Provide either option.${s}.slot, global ${s === "mark" ? "Mark" : "Overlay"}, or a defaultComponent.`
     );
   return [d, l];
 }
-function Pe() {
-  const s = et(), t = E(), e = t.state.options.use(), n = t.key, r = e?.[s.descriptor.index], o = s.children.map((l) => /* @__PURE__ */ f(F, { mark: l, isNested: !0 }, n.get(l))), i = {
+function Ae() {
+  const s = nt(), t = E(), e = t.state.options.use(), n = t.key, r = e?.[s.descriptor.index], o = s.children.map((l) => /* @__PURE__ */ h(W, { mark: l, isNested: !0 }, n.get(l))), i = {
     value: s.value,
     meta: s.meta,
     nested: s.nested?.content,
     children: s.children.length > 0 ? o : void 0
   }, [a, c] = mt("mark", r, i);
-  return /* @__PURE__ */ f(a, { ...c });
+  return /* @__PURE__ */ h(a, { ...c });
 }
-const Me = () => {
-  const s = et(), t = E(), e = $(null), n = t.state.readOnly.use(), r = t.state.slots.use(), o = t.state.slotProps.use(), i = S(() => Y("span", r), [r]), a = S(() => tt("span", o), [o]);
+const Oe = () => {
+  const s = nt(), t = E(), e = H(null), n = t.state.slots.use(), r = t.state.slotProps.use(), o = S(() => Q("span", n), [n]), i = S(() => K("span", r), [r]);
   if (s.type !== "text")
     throw new Error("TextSpan component expects a TextToken");
   return Ct(() => {
     e.current && e.current.textContent !== s.content && (e.current.textContent = s.content);
-  }, [s.content]), /* @__PURE__ */ f(i, { ...a, ref: e, contentEditable: !n, suppressContentEditableWarning: !0 });
-}, F = O(({ mark: s, isNested: t = !1 }) => s.type === "mark" ? /* @__PURE__ */ f(it, { value: s, children: /* @__PURE__ */ f(Pe, {}) }) : t ? /* @__PURE__ */ f(wt, { children: s.content }) : /* @__PURE__ */ f(it, { value: s, children: /* @__PURE__ */ f(Me, {}) }));
-F.displayName = "Token";
+  }, [s.content]), /* @__PURE__ */ h(o, { ...i, ref: e });
+}, W = O(({ mark: s, isNested: t = !1 }) => s.type === "mark" ? /* @__PURE__ */ h($, { value: s, children: /* @__PURE__ */ h(Ae, {}) }) : t ? /* @__PURE__ */ h(wt, { children: s.content }) : /* @__PURE__ */ h($, { value: s, children: /* @__PURE__ */ h(Oe, {}) }));
+W.displayName = "Token";
 const yt = O(() => {
-  const s = E(), t = s.state.tokens.use(), e = s.state.slots.use(), n = s.state.slotProps.use(), r = s.state.className.use(), o = s.state.style.use(), i = s.state.readOnly.use(), a = s.state.value.use(), c = s.state.onChange.use(), l = s.key, d = s.refs, g = S(() => Y("container", e), [e]), u = S(() => tt("container", n), [n]), h = S(() => pe(t), [t]), m = $(h);
-  m.current = h;
+  const s = E(), t = s.state.tokens.use(), e = s.state.slots.use(), n = s.state.slotProps.use(), r = s.state.className.use(), o = s.state.style.use(), i = s.state.readOnly.use(), a = s.state.value.use(), c = s.state.onChange.use(), l = s.key, d = s.refs, f = S(() => Q("container", e), [e]), u = S(() => K("container", n), [n]), g = S(() => we(t), [t]), m = H(g);
+  m.current = g;
   const C = k(
     (y, b) => {
       if (!a || !c) return;
-      const T = m.current, L = me(a, T, y, b);
+      const I = m.current, L = Ce(a, I, y, b);
       if (L !== a) {
-        const p = R(s, L);
+        const p = _(s, L);
         s.state.tokens.set(p), s.state.previousValue.set(L), c(L);
       }
     },
     [s, a, c]
   );
-  return /* @__PURE__ */ f(
-    g,
+  return /* @__PURE__ */ h(
+    f,
     {
       ref: (y) => d.container = y,
       ...u,
       className: r,
       style: o,
-      children: h.map((y, b) => /* @__PURE__ */ f(vt, { blockIndex: b, readOnly: i, onReorder: C, children: y.tokens.map((T) => /* @__PURE__ */ f(F, { mark: T }, l.get(T))) }, y.id))
+      children: g.map((y, b) => /* @__PURE__ */ h(vt, { blockIndex: b, readOnly: i, onReorder: C, children: y.tokens.map((I) => /* @__PURE__ */ h(W, { mark: I }, l.get(I))) }, y.id))
     }
   );
 });
 yt.displayName = "BlockContainer";
 const xt = O(() => {
-  const s = E(), t = s.state.tokens.use(), e = s.state.slots.use(), n = s.state.slotProps.use(), r = s.state.className.use(), o = s.state.style.use(), i = s.key, a = s.refs, c = S(() => Y("container", e), [e]), l = S(() => tt("container", n), [n]);
-  return /* @__PURE__ */ f(
+  const s = E(), t = s.state.tokens.use(), e = s.state.slots.use(), n = s.state.slotProps.use(), r = s.state.className.use(), o = s.state.style.use(), i = s.key, a = s.refs, c = S(() => Q("container", e), [e]), l = S(() => K("container", n), [n]);
+  return /* @__PURE__ */ h(
     c,
     {
       ref: (d) => a.container = d,
       ...l,
       className: r,
       style: o,
-      children: t.map((d) => /* @__PURE__ */ f(F, { mark: d }, i.get(d)))
+      children: t.map((d) => /* @__PURE__ */ h(W, { mark: d }, i.get(d)))
     }
   );
 });
 xt.displayName = "Container";
-function Le() {
+function De() {
   const s = E(), t = s.state.overlayMatch.use(), e = w.getAbsolutePosition(), n = k(() => s.events.clearOverlay(), []), r = k(
     (i) => {
-      const a = {
-        type: "mark",
-        value: i.value,
-        meta: i.meta,
-        content: "",
-        position: { start: t.index, end: t.index + t.span.length },
-        descriptor: {
-          index: 0,
-          markup: t.option.markup
-        },
-        children: [],
-        nested: void 0
-      };
+      const a = pe(t, i.value, i.meta);
       s.events.select({ mark: a, match: t }), s.events.clearOverlay();
     },
     [t]
@@ -2042,57 +2087,51 @@ function Le() {
   );
   return { match: t, style: e, select: r, close: n, ref: o };
 }
-const Ae = "_Container_1lmfr_1", Oe = "_Suggestions_1lmfr_10", De = "_suggestionActive_1lmfr_38", X = {
-  Container: Ae,
-  Suggestions: Oe,
-  suggestionActive: De
-}, Re = () => {
-  const s = E(), { match: t, select: e, style: n, ref: r } = Le(), [o, i] = P(NaN), a = t.option.overlay?.data || [], c = S(
-    () => a.filter((d) => d.toLowerCase().indexOf(t.value.toLowerCase()) > -1),
-    [t.value, a]
-  ), l = c.length;
-  return M(() => {
+const Re = "_Container_1lmfr_1", _e = "_Suggestions_1lmfr_10", Be = "_suggestionActive_1lmfr_38", Z = {
+  Container: Re,
+  Suggestions: _e,
+  suggestionActive: Be
+}, Ve = () => {
+  const s = E(), { match: t, select: e, style: n, ref: r } = De(), [o, i] = M(NaN), a = t.option.overlay?.data || [], c = S(() => ge(a, t.value), [t.value, a]), l = c.length;
+  return P(() => {
     const d = s.refs.container;
     if (!d) return;
-    const g = (u) => {
-      switch (u.key) {
-        case v.UP:
-          u.preventDefault(), i((h) => isNaN(h) ? 0 : (l + (h - 1) % l) % l);
-          break;
-        case v.DOWN:
-          u.preventDefault(), i((h) => isNaN(h) ? 0 : (h + 1) % l);
+    const f = (u) => {
+      const g = me(u.key, o, l);
+      switch (g.action) {
+        case "up":
+        case "down":
+          u.preventDefault(), i(g.index);
           break;
-        case v.ENTER:
-          u.preventDefault(), i((h) => {
-            if (isNaN(h)) return h;
-            const m = c[h];
-            return e({ value: m, meta: h.toString() }), h;
-          });
+        case "select":
+          u.preventDefault();
+          const m = c[g.index];
+          e({ value: m, meta: g.index.toString() });
           break;
       }
     };
-    return d.addEventListener("keydown", g), () => d.removeEventListener("keydown", g);
-  }, [l, c]), c.length ? /* @__PURE__ */ f("ul", { ref: r, className: X.Suggestions, style: n, children: c.map((d, g) => {
-    const u = g === o ? X.suggestionActive : void 0;
-    return /* @__PURE__ */ f(
+    return d.addEventListener("keydown", f), () => d.removeEventListener("keydown", f);
+  }, [l, c, o]), c.length ? /* @__PURE__ */ h("ul", { ref: r, className: Z.Suggestions, style: n, children: c.map((d, f) => {
+    const u = f === o ? Z.suggestionActive : void 0;
+    return /* @__PURE__ */ h(
       "li",
       {
-        ref: (h) => {
-          u && h && h.scrollIntoView(!1);
+        ref: (g) => {
+          u && g && g.scrollIntoView(!1);
         },
         className: u,
-        onClick: (h) => e({ value: d, meta: g.toString() }),
+        onClick: (g) => e({ value: d, meta: f.toString() }),
         children: d
       },
       d
     );
   }) }) : null;
 }, kt = O(() => {
-  const s = E(), t = s.state.overlayMatch.use(), e = S(() => t ? s.key.get(t.option) : void 0, [t]), [n, r] = mt("overlay", t?.option, void 0, Re);
-  if (e) return /* @__PURE__ */ f(n, { ...r ?? {} }, e);
+  const s = E(), t = s.state.overlayMatch.use(), e = S(() => t ? s.key.get(t.option) : void 0, [t]), [n, r] = mt("overlay", t?.option, void 0, Ve);
+  if (e) return /* @__PURE__ */ h(n, { ...r ?? {} }, e);
 });
 kt.displayName = "OverlayRenderer";
-function Fe(s) {
+function Ue(s) {
   const {
     ref: t,
     value: e,
@@ -2104,17 +2143,17 @@ function Fe(s) {
     Overlay: c,
     slots: l,
     slotProps: d,
-    options: g = Se,
+    options: f = Lt,
     showOverlayOn: u = "change",
-    className: h,
+    className: g,
     style: m
-  } = s, C = Tt(X.Container, h, d?.container?.className), y = Nt(m, d?.container?.style), [b] = P(() => new he({ createUseHook: Ce }));
-  b.state.set({
+  } = s, C = Et(Z.Container, g, d?.container?.className), y = Tt(m, d?.container?.style), [b] = M(() => new ye({ createUseHook: Ie }));
+  return b.state.set({
     value: e,
     defaultValue: n,
     onChange: r,
     readOnly: o,
-    options: g,
+    options: f,
     showOverlayOn: u,
     Mark: a,
     Overlay: c,
@@ -2122,36 +2161,34 @@ function Fe(s) {
     style: y,
     slots: l,
     slotProps: d
-  }), be(b, t);
-  const T = i ? yt : xt;
-  return /* @__PURE__ */ Z(K.Provider, { value: b, children: [
-    /* @__PURE__ */ f(T, {}),
-    /* @__PURE__ */ f(kt, {})
+  }), Me(b, t), /* @__PURE__ */ J(et, { value: b, children: [
+    /* @__PURE__ */ h(i ? yt : xt, {}),
+    /* @__PURE__ */ h(kt, {})
   ] });
 }
-const We = (s = {}) => {
-  const t = E(), e = et(), n = $(null);
+const je = (s = {}) => {
+  const t = E(), e = nt(), n = H(null);
   if (e.type !== "mark")
     throw new Error("useMark can only be used with mark tokens");
-  const [r] = P(() => new fe({ ref: n, store: t, token: e }));
-  _e(n, s, e);
+  const [r] = M(() => new xe({ ref: n, store: t, token: e }));
+  $e(n, s, e);
   const o = t.state.readOnly.use();
-  return M(() => {
+  return P(() => {
     r.readOnly = o;
   }, [o]), r;
 };
-function _e(s, t, e) {
-  M(() => {
+function $e(s, t, e) {
+  P(() => {
     s.current && !t.controlled && (s.current.textContent = e.content);
   }, []);
 }
 export {
-  fe as MarkHandler,
-  Fe as MarkedInput,
-  j as annotate,
-  He as denote,
-  me as reorderBlocks,
-  pe as splitTokensIntoBlocks,
-  We as useMark,
-  Le as useOverlay
+  xe as MarkHandler,
+  Ue as MarkedInput,
+  q as annotate,
+  Ge as denote,
+  Ce as reorderBlocks,
+  we as splitTokensIntoBlocks,
+  je as useMark,
+  De as useOverlay
 };