@markput/react 0.3.0 → 0.5.0

package/index.js

@@ -1,35 +1,54 @@
 import "./index.css";
-import { jsx as f, Fragment as wt, jsxs as Z } from "react/jsx-runtime";
-import { createContext as at, useContext as ct, useRef as H, useMemo as S, useLayoutEffect as St, memo as O, useState as P, useCallback as k, useEffect as M, useImperativeHandle 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;
 }
-var x = /* @__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))(x || {});
-const It = "@", Pt = "@[__value__](__meta__)", y = {
+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 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,43 +86,43 @@ function Lt(s) {
     valueGapIndices: n
   };
 }
-function At(s, t) {
+function Dt(s, t) {
   const e = [
-    { count: s.value, max: 2, name: y.Value },
-    { count: s.meta, max: 1, name: y.Meta },
-    { count: s.nested, max: 1, name: y.Nested }
+    { count: s.value, max: 2, name: x.Value },
+    { count: s.meta, max: 1, name: x.Meta },
+    { count: s.nested, max: 1, name: x.Nested }
   ];
   for (const { count: n, max: r, name: o } of e)
     if (n > r)
       throw new Error(`Invalid markup: "${t}". Max ${r} "${o}" placeholders, got ${n}`);
   if (s.value === 0 && s.nested === 0)
     throw new Error(
-      `Invalid markup: "${t}". Need at least one "${y.Value}" or "${y.Nested}"`
+      `Invalid markup: "${t}". Need at least one "${x.Value}" or "${x.Nested}"`
     );
 }
-const nt = {
-  [N.Value]: y.Value,
-  [N.Meta]: y.Meta,
-  [N.Nested]: y.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, v) {
-    if (!v) return [u, h, ""];
-    const C = v.charAt(0), m = C && !h.includes(C) && !v.startsWith(u) ? C : "";
-    return [u, h, m];
+  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 _t {
+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 _t {
     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 Rt {
+class Vt {
   constructor(t) {
     this.registry = t;
   }
@@ -266,7 +285,7 @@ class Rt {
   }
   tryStartNewStates(t) {
     this.registry.firstSegmentIndexMap.get(t.index)?.forEach((e) => {
-      const n = new _t(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 Rt {
   }
 }
 const A = (s) => s.replace(/[.*+?^${}()|[\]\\\\]/g, "\\$&");
-function Vt(s, t, e) {
+function $t(s, t, e) {
   const n = A(s), r = A(t), o = A(t + e);
   return `${n}([^${o}]+?)${r}`;
 }
-class $t {
+class Ht {
   staticRegex;
   staticToIndex;
   dynamicRegex;
@@ -340,10 +359,10 @@ class $t {
         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 = Vt(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 Ht {
+class Ft {
   // Instance fields - only what's needed for single pass
   input;
   // ===== PUBLIC API =====
@@ -528,19 +547,34 @@ class Ht {
       };
   }
 }
-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 = Y(n.children, t), o = {
+        ...n,
+        value: r
+      };
+      e += t(o);
+    } else
+      e += t(n);
+  return e;
+}
+function q(s, t) {
   let e = s;
-  return t.value !== void 0 && (e = e.replaceAll(y.Value, t.value)), t.meta !== void 0 && (e = e.replaceAll(y.Meta, t.meta)), t.nested !== void 0 && (e = e.replaceAll(y.Nested, t.nested)), e;
+  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(y.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
@@ -548,22 +582,7 @@ function I(s) {
   }
   return t;
 }
-function J(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 = {
-        ...n,
-        value: r
-      };
-      e += t(o);
-    } else
-      e += t(n);
-  return e;
-}
-class B {
+class F {
   registry;
   segmentMatcher;
   patternMatcher;
@@ -588,7 +607,7 @@ class B {
    * ```
    */
   constructor(t) {
-    this.registry = new Dt(t), this.segmentMatcher = new $t(this.registry.segments), this.patternMatcher = new Rt(this.registry), this.treeBuilder = new Ht();
+    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 B {
    */
   static parse(t, e) {
     const n = e?.markup;
-    return !n || n.length === 0 ? [dt(t)] : new B(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 B {
    * ```
    */
   static stringify(t) {
-    return I(t);
+    return N(t);
   }
   /**
    * Parses text into a nested token tree
@@ -667,7 +686,7 @@ class B {
    * ```
    */
   stringify(t) {
-    return I(t);
+    return N(t);
   }
   /**
    * Transforms annotated text by processing all mark tokens with a callback
@@ -696,7 +715,7 @@ class B {
    */
   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 B {
     return t.replaceAll(/\\(.)/g, "$1");
   }
 }
-function Be(s, t, e) {
+function Ge(s, t, e) {
   if (!e.length) return s;
-  const n = new B(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 Bt(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 Bt(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,37 +795,37 @@ 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 = Bt(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 _(s, t ?? "");
   }
 }
-function G(s, ...t) {
+function U(s, ...t) {
   let e = "";
   const n = s.state.tokens.get();
   for (const r of t) {
@@ -815,7 +834,7 @@ function G(s, ...t) {
   }
   return _(s, e);
 }
-function Gt(s) {
+function jt(s) {
   let t = 0;
   return s.state.tokens.get().map((n) => {
     const r = n.content.length;
@@ -832,16 +851,16 @@ function _(s, t) {
     }
   ];
 }
-const Ut = (s, t) => s === t;
-class R {
+const qt = (s, t) => s === t;
+class B {
   #t;
   #e = /* @__PURE__ */ new Set();
   #n;
   constructor(t, e) {
-    this.#t = t, this.#n = e?.equals ?? Ut;
+    this.#t = t, this.#n = e?.equals ?? qt;
   }
   static event() {
-    return new R(void 0, { equals: !1 });
+    return new B(void 0, { equals: !1 });
   }
   get value() {
     return this.#t;
@@ -862,14 +881,14 @@ class R {
     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 R(s[n]));
+    e.set(n, new B(s[n]));
   return new Proxy(s, {
     get(n, r) {
       if (r === "set")
@@ -879,28 +898,28 @@ 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, R.event());
+    e.set(n, B.event());
   return new Proxy({}, {
     get(n, r) {
       let o = e.get(r);
-      return o || (o = R.event(), e.set(r, o)), qt(o);
+      return o || (o = B.event(), e.set(r, o)), Zt(o);
     }
   });
 }
-class Zt {
+class Qt {
   #t = 1;
   #e = /* @__PURE__ */ new WeakMap();
   get(t) {
@@ -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);
@@ -1116,10 +1135,10 @@ class V {
     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,10 +1157,29 @@ 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;
   }
@@ -1153,22 +1191,22 @@ class Kt {
       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();
+      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,8 +1216,8 @@ 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();
       }
     }));
   }
@@ -1187,56 +1225,7 @@ class Kt {
     this.#t?.(), this.#e?.(), this.#n?.(), this.#t = void 0, this.#e = void 0, this.#n = void 0;
   }
 }
-class Yt {
-  constructor(t) {
-    this.store = t;
-  }
-  #t;
-  #e;
-  #n;
-  #s;
-  #r;
-  #o;
-  #i;
-  #a;
-  enableTrigger(t, e) {
-    if (this.#t) return;
-    this.#t = this.store.events.clearOverlay.on(() => {
-      e(void 0);
-    }), this.#e = this.store.events.checkOverlay.on(() => {
-      const r = Q.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";
-      (r === o || Array.isArray(r) && r.includes(o)) && this.store.events.checkOverlay();
-    }), this.#s = () => {
-      const r = this.store.state.showOverlayOn.get(), o = "selectionChange";
-      (r === o || Array.isArray(r) && r.includes(o)) && this.store.events.checkOverlay();
-    }, this.#r = () => {
-      document.addEventListener("selectionchange", this.#s);
-    }, this.#o = () => {
-      document.removeEventListener("selectionchange", this.#s);
-    };
-    const n = this.store.refs.container;
-    n && (n.addEventListener("focusin", this.#r), n.addEventListener("focusout", this.#o));
-  }
-  enableClose() {
-    this.#i || (this.#i = (t) => {
-      t.key === x.ESC && this.store.events.clearOverlay();
-    }, this.#a = (t) => {
-      const e = t.target;
-      this.store.refs.overlay?.contains(e) || this.store.refs.container?.contains(e) || this.store.events.clearOverlay();
-    }, window.addEventListener("keydown", this.#i), document.addEventListener("click", this.#a, !0));
-  }
-  disableClose() {
-    this.#i && (window.removeEventListener("keydown", this.#i), document.removeEventListener("click", this.#a, !0), this.#i = void 0, this.#a = void 0);
-  }
-  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.#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;
-  }
-}
-class te {
+class ne {
   constructor(t) {
     this.store = t;
   }
@@ -1281,7 +1270,23 @@ class te {
     this.store.nodes.focus.caret = n, this.store.state.recovery.set(void 0);
   }
 }
-class ee {
+function se(s, t) {
+  const { focus: e } = s.nodes;
+  if (e.isMark && !e.isEditable || e.isCaretAtBeginning) {
+    const n = e.prev;
+    return n.focus(), n.isFocused || (n.prev.focus(), t.preventDefault()), e.setCaretToEnd(), !0;
+  }
+  return !1;
+}
+function re(s, t) {
+  const { focus: e } = s.nodes;
+  if (e.isMark && !e.isEditable || e.isCaretAtEnd) {
+    const n = e.next;
+    return n.focus(), n.isFocused || (n.next.focus(), t.preventDefault()), !0;
+  }
+  return !1;
+}
+class oe {
   constructor(t) {
     this.store = t;
   }
@@ -1309,7 +1314,7 @@ class ee {
     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 ne(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;
@@ -1317,23 +1322,7 @@ function ne(s, t) {
     e.setBaseAndExtent(n, 0, r, 1), s.state.selecting.set("all");
   }
 }
-function se(s, t) {
-  const { focus: e } = s.nodes;
-  if (e.isMark && !e.isEditable || e.isCaretAtBeginning) {
-    const n = e.prev;
-    return n.focus(), n.isFocused || (n.prev.focus(), t.preventDefault()), e.setCaretToEnd(), !0;
-  }
-  return !1;
-}
-function re(s, t) {
-  const { focus: e } = s.nodes;
-  if (e.isMark && !e.isEditable || e.isCaretAtEnd) {
-    const n = e.next;
-    return n.focus(), n.isFocused || (n.next.focus(), t.preventDefault()), !0;
-  }
-  return !1;
-}
-class oe {
+class ae {
   constructor(t) {
     this.store = t;
   }
@@ -1344,11 +1333,11 @@ class oe {
     if (this.#t) return;
     const t = this.store.refs.container;
     t && (this.#t = (e) => {
-      e.key === x.LEFT ? se(this.store, e) : e.key === x.RIGHT && re(this.store, e), this.#s(e), ne(this.store, 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) => {
-      ae(this.store, e);
+      de(this.store, e);
     }, this.#n = (e) => {
-      ie(this.store, e);
+      ce(this.store, e);
     }, t.addEventListener("keydown", this.#t), t.addEventListener("paste", this.#e), t.addEventListener("beforeinput", this.#n, !0));
   }
   disable() {
@@ -1357,27 +1346,68 @@ class oe {
   }
   #s(t) {
     const { focus: e } = this.store.nodes;
-    if (t.key === x.DELETE || t.key === x.BACKSPACE) {
+    if (t.key === v.DELETE || t.key === v.BACKSPACE) {
       if (e.isMark) {
-        t.preventDefault(), U("self", this.store);
+        if (e.isEditable && (t.key === v.BACKSPACE && !e.isCaretAtBeginning || t.key === v.DELETE && !e.isCaretAtEnd))
+          return;
+        t.preventDefault(), j("self", this.store);
         return;
       }
-      t.key === x.BACKSPACE && e.isSpan && e.isCaretAtBeginning && e.prev.target && (t.preventDefault(), U("prev", this.store)), t.key === x.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 ie(s, t) {
+function ce(s, t) {
   const e = s.state.selecting.get();
-  if (e !== "all" || !ut(s)) {
-    e === "all" && s.state.selecting.set(void 0);
+  if (e === "all" && ut(s)) {
+    if (t.inputType === "insertFromPaste") {
+      t.preventDefault();
+      return;
+    }
+    t.preventDefault();
+    const r = t.inputType.startsWith("delete") ? "" : t.data ?? "";
+    ht(s, r);
     return;
   }
-  if (t.inputType === "insertFromPaste") return;
-  t.preventDefault();
-  const n = t.inputType.startsWith("delete") ? "" : t.data ?? "";
-  ht(s, n);
+  e === "all" && s.state.selecting.set(void 0);
+  const { focus: n } = s.nodes;
+  !n.target || !n.isEditable || le(n, t) && s.events.change();
+}
+function le(s, t) {
+  const e = s.caret, n = s.content;
+  let r, o;
+  switch (t.inputType) {
+    case "insertText": {
+      t.preventDefault();
+      const i = t.data ?? "";
+      r = n.slice(0, e) + i + n.slice(e), o = e + i.length;
+      break;
+    }
+    case "deleteContentBackward":
+    case "deleteContentForward":
+    case "deleteWordBackward":
+    case "deleteWordForward":
+    case "deleteSoftLineBackward":
+    case "deleteSoftLineForward": {
+      const i = t.getTargetRanges();
+      if (!i.length) return !1;
+      const { startOffset: a, endOffset: c } = i[0];
+      if (a === c) return !1;
+      t.preventDefault(), r = n.slice(0, a) + n.slice(c), o = a;
+      break;
+    }
+    case "insertFromPaste":
+    case "insertReplacementText": {
+      const i = t.dataTransfer?.getData("text/plain") ?? "", a = t.getTargetRanges(), c = a[0]?.startOffset ?? e, l = a[0]?.endOffset ?? e;
+      t.preventDefault(), r = n.slice(0, c) + i + n.slice(l), o = c + i.length;
+      break;
+    }
+    default:
+      return !1;
+  }
+  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);
@@ -1414,7 +1444,7 @@ function ht(s, t) {
     }), e.focus());
   });
 }
-class ce {
+class ue {
   #t = [];
   #e = !1;
   register(t) {
@@ -1427,23 +1457,23 @@ class ce {
     this.#e && (this.#e = !1, this.#t.forEach((t) => t.disable()));
   }
 }
-const $ = (s, t) => ({
+const R = (s, t) => ({
   name: s,
   enable: () => t.enable(),
   disable: () => t.disable()
-}), le = (s) => {
-  const t = new ce();
-  return t.register($("keydown", s.controllers.keydown)).register($("system", s.controllers.system)).register($("focus", s.controllers.focus)).register($("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;
   }
   #t = [];
   #e = !1;
   enable(t) {
-    const { store: e } = this, n = le(e);
-    n.enableAll(), this.#t.push(() => n.disableAll()), this.#s(), this.#n(), t?.getTrigger && this.#r(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.#t)
@@ -1457,7 +1487,7 @@ 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 B(r)) : n.state.parser.set(void 0), this.#e) {
+    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;
     }
@@ -1470,28 +1500,22 @@ 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 t = this.store.refs.container;
-    if (!t) return;
-    const e = () => this.store.events.change();
-    t.addEventListener("input", e), this.#t.push(() => t.removeEventListener("input", e));
-  }
-  #s() {
     const { store: t } = this;
     this.#t.push(
       t.events.parse.on(() => {
         if (t.state.recovery.get()) {
-          const e = I(t.state.tokens.get());
+          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));
       })
     );
   }
-  #r(t) {
+  #s(t) {
     const { store: e } = this;
     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) => {
@@ -1500,28 +1524,119 @@ class de {
     );
   }
 }
-class ue {
-  key = new Zt();
+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;
+  }
+  #t;
+  #e;
+  #n;
+  #s;
+  #r;
+  #o;
+  #i;
+  #a;
+  enableTrigger(t, e) {
+    if (this.#t) return;
+    this.#t = this.store.events.clearOverlay.on(() => {
+      e(void 0);
+    }), 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";
+      (r === o || Array.isArray(r) && r.includes(o)) && this.store.events.checkOverlay();
+    }), this.#s = () => {
+      const r = this.store.state.showOverlayOn.get(), o = "selectionChange";
+      (r === o || Array.isArray(r) && r.includes(o)) && this.store.events.checkOverlay();
+    }, this.#r = () => {
+      document.addEventListener("selectionchange", this.#s);
+    }, this.#o = () => {
+      document.removeEventListener("selectionchange", this.#s);
+    };
+    const n = this.store.refs.container;
+    n && (n.addEventListener("focusin", this.#r), n.addEventListener("focusout", this.#o));
+  }
+  enableClose() {
+    this.#i || (this.#i = (t) => {
+      t.key === v.ESC && this.store.events.clearOverlay();
+    }, this.#a = (t) => {
+      const e = t.target;
+      this.store.refs.overlay?.contains(e) || this.store.refs.container?.contains(e) || this.store.events.clearOverlay();
+    }, window.addEventListener("keydown", this.#i), document.addEventListener("click", this.#a, !0));
+  }
+  disableClose() {
+    this.#i && (window.removeEventListener("keydown", this.#i), document.removeEventListener("click", this.#a, !0), this.#i = void 0, this.#a = void 0);
+  }
+  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.#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 ye {
+  key = new Qt();
   nodes = {
     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 Yt(this),
-    focus: new te(this),
-    keydown: new oe(this),
-    system: new Kt(this),
-    textSelection: new ee(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,
@@ -1560,7 +1675,7 @@ class ue {
     };
   }
 }
-class he {
+class xe {
   ref;
   #t;
   #e;
@@ -1613,20 +1728,20 @@ class he {
   }
 }
 let ft = 0;
-function rt(s) {
+function ot(s) {
   return `block-${ft++}-${s}`;
 }
-function fe() {
+function ke() {
   ft = 0;
 }
-function ge(s) {
+function we(s) {
   if (s.length === 0) return [];
-  fe();
+  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
@@ -1636,7 +1751,7 @@ function ge(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
@@ -1644,7 +1759,7 @@ function ge(s) {
       continue;
     }
     if (o.type !== "text") continue;
-    const a = pe(o);
+    const a = Se(o);
     for (let c = 0; c < a.length; c++) {
       const l = a[c];
       if (l.isNewline) {
@@ -1664,7 +1779,7 @@ function ge(s) {
   }
   return t;
 }
-function pe(s) {
+function Se(s) {
   const t = [], { content: e, position: n } = s;
   let r = n.start;
   const o = [], i = () => {
@@ -1700,12 +1815,12 @@ function pe(s) {
   }
   return i(), t;
 }
-function ve(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 = me(s, t), o = xe(r, e, n);
-  return ye(o);
+  const r = be(s, t), o = Te(r, e, n);
+  return Ee(o);
 }
-function me(s, t) {
+function be(s, t) {
   return t.map((e, n) => {
     const r = s.substring(e.startPos, e.endPos);
     let o = "";
@@ -1720,7 +1835,7 @@ function me(s, t) {
     };
   });
 }
-function ye(s) {
+function Ee(s) {
   const t = [];
   for (let e = 0; e < s.length; e++) {
     const n = s[e], r = e === s.length - 1;
@@ -1731,11 +1846,11 @@ function ye(s) {
   }
   return t.join("");
 }
-function xe(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), ke(n, s), n;
+  return n.splice(o, 0, r), Ne(n, s), n;
 }
-function ke(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) {
@@ -1747,91 +1862,30 @@ function ke(s, t) {
 `;
   }
 }
-const we = {
-  container: "div",
-  span: "span"
+const Ie = (s) => () => {
+  const [t, e] = M(() => s.get());
+  return P(() => s.on(e), [s]), t;
 };
-function K(s, t) {
-  return t?.[s] ? t[s] : we[s];
-}
-function Y(s, t) {
-  const e = t?.[s];
-  return e ? Et(e) : void 0;
+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, i = s.state.tokens.use();
+  P(() => {
+    s.lifecycle.syncParser(e, o);
+  }, [e, o]), P(() => {
+    s.lifecycle.recoverFocus();
+  }, [i]);
 }
-const tt = at(void 0);
-tt.displayName = "StoreContext";
+const et = at(void 0);
+et.displayName = "StoreContext";
 function E() {
-  const s = ct(tt);
-  return bt(s), s;
-}
-const Se = (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, ot] = Se("NodeProvider");
-function gt(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;
-  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];
+  const s = ct(et);
+  if (s === void 0)
+    throw new Error("Store not found. Make sure to wrap component in StoreContext.");
+  return s;
 }
-function Ce() {
-  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 = {
-    value: s.value,
-    meta: s.meta,
-    nested: s.nested?.content,
-    children: s.children.length > 0 ? o : void 0
-  }, [a, c] = gt("mark", r, i);
-  return /* @__PURE__ */ f(a, { ...c });
-}
-const be = () => {
-  const s = et(), t = E(), e = H(null), n = t.state.readOnly.use(), r = t.state.slots.use(), o = t.state.slotProps.use(), i = S(() => K("span", r), [r]), a = S(() => Y("span", o), [o]);
-  if (s.type !== "text")
-    throw new Error("TextSpan component expects a TextToken");
-  return St(() => {
-    e.current && e.current.textContent !== s.content && (e.current.textContent = s.content);
-  }, [s.content]), /* @__PURE__ */ f(
-    i,
-    {
-      ...a,
-      ref: e,
-      contentEditable: !n,
-      onPaste: Ee,
-      suppressContentEditableWarning: !0
-    }
-  );
-};
-function Ee(s) {
-  s.preventDefault();
-  const t = s.clipboardData.getData("text");
-  document.execCommand("insertText", !1, t);
-}
-const F = O(({ mark: s, isNested: t = !1 }) => s.type === "mark" ? /* @__PURE__ */ f(ot, { value: s, children: /* @__PURE__ */ f(Ce, {}) }) : t ? /* @__PURE__ */ f(wt, { children: s.content }) : /* @__PURE__ */ f(ot, { value: s, children: /* @__PURE__ */ f(be, {}) }));
-F.displayName = "Token";
-const pt = 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(() => K("container", e), [e]), l = S(() => Y("container", n), [n]);
-  return /* @__PURE__ */ f(
-    c,
-    {
-      ref: (d) => a.container = d,
-      ...l,
-      className: r,
-      style: o,
-      children: t.map((d) => /* @__PURE__ */ f(F, { mark: d }, i.get(d)))
-    }
-  );
-});
-pt.displayName = "Container";
-const q = {
+const X = {
   position: "absolute",
   left: -28,
   top: 2,
@@ -1853,13 +1907,13 @@ const q = {
   margin: 0,
   font: "inherit",
   lineHeight: 1
-}, vt = {
-  ...q,
+}, gt = {
+  ...X,
   opacity: 1
-}, Te = {
-  ...vt,
+}, Pe = {
+  ...gt,
   cursor: "grabbing"
-}, Ne = {
+}, Le = {
   position: "relative",
   paddingLeft: 4,
   transition: "opacity 0.2s ease"
@@ -1872,80 +1926,114 @@ const q = {
   borderRadius: 1,
   pointerEvents: "none",
   zIndex: 10
-}, mt = 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" })
 ] }));
-mt.displayName = "GripIcon";
-const yt = O(({ blockIndex: s, children: t, readOnly: e, onReorder: n }) => {
-  const [r, o] = P(!1), [i, a] = P(!1), [c, l] = P(null), d = H(null), g = k(() => o(!0), []), u = k(() => o(!1), []), h = k(
+pt.displayName = "GripIcon";
+const vt = O(({ blockIndex: s, children: t, readOnly: e, onReorder: n }) => {
+  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);
     },
     [s]
-  ), v = k(() => {
+  ), m = k(() => {
     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");
-  }, []), m = k((p) => {
+    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(
     (p) => {
       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 ? vt : 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: m,
+      onDragLeave: y,
       onDrop: b,
       children: [
-        c === "before" && /* @__PURE__ */ f("div", { style: { ...it, top: -1 } }),
-        /* @__PURE__ */ f(
+        c === "before" && /* @__PURE__ */ h("div", { style: { ...it, top: -1 } }),
+        /* @__PURE__ */ h(
           "button",
           {
             type: "button",
             draggable: !e,
-            onDragStart: h,
-            onDragEnd: v,
+            onDragStart: g,
+            onDragEnd: m,
             style: L,
             "aria-label": "Drag to reorder",
-            children: /* @__PURE__ */ f(mt, {})
+            children: /* @__PURE__ */ h(pt, {})
           }
         ),
         t,
-        c === "after" && /* @__PURE__ */ f("div", { style: { ...it, bottom: -1 } })
+        c === "after" && /* @__PURE__ */ h("div", { style: { ...it, bottom: -1 } })
       ]
     }
   );
 });
-yt.displayName = "DraggableBlock";
-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.state.readOnly.use(), a = s.state.value.use(), c = s.state.onChange.use(), l = s.key, d = s.refs, g = S(() => K("container", e), [e]), u = S(() => Y("container", n), [n]), h = S(() => ge(t), [t]), v = H(h);
-  v.current = h;
+vt.displayName = "DraggableBlock";
+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, 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 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__ */ h(a, { ...c });
+}
+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__ */ 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, 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(
-    (m, b) => {
+    (y, b) => {
       if (!a || !c) return;
-      const T = v.current, L = ve(a, T, m, b);
+      const I = m.current, L = Ce(a, I, y, b);
       if (L !== a) {
         const p = _(s, L);
         s.state.tokens.set(p), s.state.previousValue.set(L), c(L);
@@ -1953,34 +2041,36 @@ const xt = O(() => {
     },
     [s, a, c]
   );
-  return /* @__PURE__ */ f(
-    g,
+  return /* @__PURE__ */ h(
+    f,
     {
-      ref: (m) => d.container = m,
+      ref: (y) => d.container = y,
       ...u,
       className: r,
       style: o,
-      children: h.map((m, b) => /* @__PURE__ */ f(yt, { blockIndex: b, readOnly: i, onReorder: C, children: m.tokens.map((T) => /* @__PURE__ */ f(F, { mark: T }, l.get(T))) }, m.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))
     }
   );
 });
-xt.displayName = "BlockContainer";
-function Ie() {
+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(() => 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__ */ h(W, { mark: d }, i.get(d)))
+    }
+  );
+});
+xt.displayName = "Container";
+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]
@@ -1997,82 +2087,51 @@ function Ie() {
   );
   return { match: t, style: e, select: r, close: n, ref: o };
 }
-const Pe = "_Container_1lmfr_1", Me = "_Suggestions_1lmfr_10", Le = "_suggestionActive_1lmfr_38", X = {
-  Container: Pe,
-  Suggestions: Me,
-  suggestionActive: Le
-}, Ae = () => {
-  const s = E(), { match: t, select: e, style: n, ref: r } = Ie(), [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 x.UP:
-          u.preventDefault(), i((h) => isNaN(h) ? 0 : (l + (h - 1) % l) % l);
-          break;
-        case x.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 x.ENTER:
-          u.preventDefault(), i((h) => {
-            if (isNaN(h)) return h;
-            const v = c[h];
-            return e({ value: v, 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] = gt("overlay", t?.option, void 0, Ae);
-  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 Oe(s, t) {
-  Ct(t, () => s.createHandler(), [s]), M(() => (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(() => {
-    s.lifecycle.syncParser(e, o);
-  }, [e, o]);
-  const i = s.state.tokens.use();
-  M(() => {
-    s.lifecycle.recoverFocus();
-  }, [i]);
-}
-const De = (s) => () => {
-  const [t, e] = P(() => s.get());
-  return M(() => s.on(e), [s]), t;
-}, _e = [
-  {
-    markup: Pt,
-    overlay: {
-      trigger: It,
-      data: []
-    }
-  }
-];
-function Fe(s) {
+function Ue(s) {
   const {
     ref: t,
     value: e,
@@ -2084,54 +2143,52 @@ function Fe(s) {
     Overlay: c,
     slots: l,
     slotProps: d,
-    options: g = _e,
+    options: f = Lt,
     showOverlayOn: u = "change",
-    className: h,
-    style: v
-  } = s, C = Tt(X.Container, h, d?.container?.className), m = Nt(v, d?.container?.style), [b] = P(() => new ue({ createUseHook: De }));
-  b.state.set({
+    className: g,
+    style: m
+  } = 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,
     className: C,
-    style: m,
+    style: y,
     slots: l,
     slotProps: d
-  }), Oe(b, t);
-  const T = i ? xt : pt;
-  return /* @__PURE__ */ Z(tt.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 = H(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 he({ ref: n, store: t, token: e }));
-  Re(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 Re(s, t, e) {
-  M(() => {
+function $e(s, t, e) {
+  P(() => {
     s.current && !t.controlled && (s.current.textContent = e.content);
   }, []);
 }
 export {
-  he as MarkHandler,
-  Fe as MarkedInput,
-  j as annotate,
-  Be as denote,
-  ve as reorderBlocks,
-  ge as splitTokensIntoBlocks,
-  We as useMark,
-  Ie 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
 };