@markput/react 0.3.0 → 0.4.0

package/index.js

@@ -1,6 +1,6 @@
 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 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";
 function bt(s) {
   if (s == null) throw new Error("Value must be a non nullable!");
 }
@@ -16,8 +16,8 @@ function Nt(...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 = {
+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 = {
   Value: "__value__",
   Meta: "__meta__",
   Nested: "__nested__"
@@ -69,22 +69,22 @@ function Lt(s) {
 }
 function At(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
+  [N.Value]: x.Value,
+  [N.Meta]: x.Meta,
+  [N.Nested]: x.Nested
 };
 function Ot(s, t, e) {
   if (e.length !== 2)
@@ -97,10 +97,10 @@ function Ot(s, t, e) {
   c && l && o.push(g(c, l, s[r + 2]));
   const d = t.filter((u) => u !== N.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 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];
   }
 }
 class Dt {
@@ -168,7 +168,7 @@ function lt(s, t) {
     e = e * 33 ^ t.charCodeAt(n);
   return e = e >>> 0, s * 1e6 + (e & 1048575);
 }
-class _t {
+class Rt {
   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 +237,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 _t {
   constructor(t) {
     this.registry = t;
   }
@@ -266,7 +266,7 @@ class Rt {
   }
   tryStartNewStates(t) {
     this.registry.firstSegmentIndexMap.get(t.index)?.forEach((e) => {
-      const n = new _t(e, t);
+      const n = new Rt(e, t);
       if (!n.isInvalid) {
         if (n.isCompleted) return this.addToCompleted(n);
         this.addToWaiting(n);
@@ -312,11 +312,11 @@ class Rt {
   }
 }
 const A = (s) => s.replace(/[.*+?^${}()|[\]\\\\]/g, "\\$&");
-function Vt(s, t, e) {
+function Bt(s, t, e) {
   const n = A(s), r = A(t), o = A(t + e);
   return `${n}([^${o}]+?)${r}`;
 }
-class $t {
+class Vt {
   staticRegex;
   staticToIndex;
   dynamicRegex;
@@ -342,7 +342,7 @@ class $t {
         else {
           const [l, d, g] = a;
           o.add(c);
-          const h = Vt(l, d, g).replace("(", `(?<content${c}>`);
+          const h = Bt(l, d, g).replace("(", `(?<content${c}>`);
           i.push({ index: c, pattern: h, definition: a });
         }
       }), i.sort((a, c) => {
@@ -395,7 +395,7 @@ const dt = (s, t = 0, e = s.length) => ({
   content: s.substring(t, e),
   position: { start: t, end: e }
 });
-class Ht {
+class $t {
   // Instance fields - only what's needed for single pass
   input;
   // ===== PUBLIC API =====
@@ -528,9 +528,24 @@ class Ht {
       };
   }
 }
+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;
+}
 function j(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) {
   let t = "";
@@ -539,7 +554,7 @@ function I(s) {
       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;
+    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, {
       value: e.value,
       meta: e.meta,
@@ -548,22 +563,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 H {
   registry;
   segmentMatcher;
   patternMatcher;
@@ -588,7 +588,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 Dt(t), this.segmentMatcher = new Vt(this.registry.segments), this.patternMatcher = new _t(this.registry), this.treeBuilder = new $t();
   }
   /**
    * Parses text into tokens (static convenience method)
@@ -606,7 +606,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 H(n).parse(t);
   }
   /**
    * Converts tokens back to text (static convenience method)
@@ -738,9 +738,9 @@ class B {
     return t.replaceAll(/\\(.)/g, "$1");
   }
 }
-function Be(s, t, e) {
+function He(s, t, e) {
   if (!e.length) return s;
-  const n = new B(e).parse(s);
+  const n = new H(e).parse(s);
   return J(n, t);
 }
 function z(s, t, e = 0, n) {
@@ -752,7 +752,7 @@ function z(s, t, e = 0, n) {
     }
   }
 }
-function Bt(s = "", t = "") {
+function Ht(s = "", t = "") {
   if (s === t) return {};
   let e;
   for (let r = 0; r < s.length; r++)
@@ -784,7 +784,7 @@ function Ft(s) {
   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);
+  const t = s.state.value.get(), e = Gt(s), n = Ht(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);
@@ -803,7 +803,7 @@ function Wt(s) {
       return i.length === 1 ? r : r.toSpliced(o, 1, ...i);
     }
     default:
-      return _(s, t ?? "");
+      return R(s, t ?? "");
   }
 }
 function G(s, ...t) {
@@ -813,7 +813,7 @@ function G(s, ...t) {
     const o = n[r];
     e += o.content;
   }
-  return _(s, e);
+  return R(s, e);
 }
 function Gt(s) {
   let t = 0;
@@ -822,7 +822,7 @@ function Gt(s) {
     return t += r, t - r;
   }) ?? [];
 }
-function _(s, t) {
+function R(s, t) {
   const e = s.state.parser.get();
   return e ? e.parse(t) : [
     {
@@ -833,30 +833,30 @@ function _(s, t) {
   ];
 }
 const Ut = (s, t) => s === t;
-class R {
-  #t;
-  #e = /* @__PURE__ */ new Set();
+class _ {
+  #e;
+  #t = /* @__PURE__ */ new Set();
   #n;
   constructor(t, e) {
-    this.#t = t, this.#n = e?.equals ?? Ut;
+    this.#e = t, this.#n = e?.equals ?? Ut;
   }
   static event() {
-    return new R(void 0, { equals: !1 });
+    return new _(void 0, { equals: !1 });
   }
   get value() {
-    return this.#t;
+    return this.#e;
   }
   set value(t) {
-    (this.#n === !1 || !this.#n(this.#t, t)) && (this.#t = t, this.#e.forEach((e) => e(t)));
+    (this.#n === !1 || !this.#n(this.#e, t)) && (this.#e = t, this.#t.forEach((e) => e(t)));
   }
   on(t) {
-    return this.#e.add(t), () => this.#e.delete(t);
+    return this.#t.add(t), () => this.#t.delete(t);
   }
   emit(t) {
-    arguments.length > 0 && (this.#t = t), this.#e.forEach((e) => e(this.#t));
+    arguments.length > 0 && (this.#e = t), this.#t.forEach((e) => e(this.#e));
   }
   get() {
-    return this.#t;
+    return this.#e;
   }
   set(t) {
     this.value = t;
@@ -869,7 +869,7 @@ function jt(s, t) {
 function zt(s, t) {
   const e = /* @__PURE__ */ new Map();
   for (const n in s)
-    e.set(n, new R(s[n]));
+    e.set(n, new _(s[n]));
   return new Proxy(s, {
     get(n, r) {
       if (r === "set")
@@ -892,19 +892,19 @@ function qt(s) {
 function Xt(s) {
   const t = [], e = /* @__PURE__ */ new Map();
   for (const n of t)
-    e.set(n, R.event());
+    e.set(n, _.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 = _.event(), e.set(r, o)), qt(o);
     }
   });
 }
 class Zt {
-  #t = 1;
-  #e = /* @__PURE__ */ new WeakMap();
+  #e = 1;
+  #t = /* @__PURE__ */ new WeakMap();
   get(t) {
-    return this.#e.has(t) ? this.#e.get(t) : (this.#e.set(t, this.#t), this.#t++);
+    return this.#t.has(t) ? this.#t.get(t) : (this.#t.set(t, this.#e), this.#e++);
   }
 }
 class w {
@@ -1046,20 +1046,20 @@ class Q {
     return new RegExp(e);
   }
 }
-class V {
-  #t;
+class B {
   #e;
+  #t;
   get target() {
-    return this.#t;
+    return this.#e;
   }
   set target(t) {
-    this.#t = t;
+    this.#e = t;
   }
   get next() {
-    return new V(this.target?.nextSibling, this.#e);
+    return new B(this.target?.nextSibling, this.#t);
   }
   get prev() {
-    return new V(this.target?.previousSibling, this.#e);
+    return new B(this.target?.previousSibling, this.#t);
   }
   get isSpan() {
     return this.index % 2 === 0;
@@ -1095,16 +1095,16 @@ class V {
     this.target && (this.target.textContent = t ?? "");
   }
   get head() {
-    return this.#e.refs.container?.firstChild;
+    return this.#t.refs.container?.firstChild;
   }
   get tail() {
-    return this.#e.refs.container?.lastChild;
+    return this.#t.refs.container?.lastChild;
   }
   get isFocused() {
     return this.target === document.activeElement;
   }
   constructor(t, e) {
-    this.target = t, this.#e = e;
+    this.target = t, this.#t = e;
   }
   setCaretToEnd() {
     w.setCaretToEnd(this.target);
@@ -1145,16 +1145,16 @@ class Kt {
   constructor(t) {
     this.store = t;
   }
-  #t;
   #e;
+  #t;
   #n;
   enable() {
-    this.#t || (this.#t = this.store.events.change.on(() => {
+    this.#e || (this.#e = 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.#e = this.store.events.delete.on((t) => {
+    }), this.#t = 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()));
@@ -1184,80 +1184,31 @@ class Kt {
     }));
   }
   disable() {
-    this.#t?.(), this.#e?.(), this.#n?.(), this.#t = void 0, this.#e = void 0, this.#n = void 0;
+    this.#e?.(), this.#t?.(), this.#n?.(), this.#e = void 0, this.#t = 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 {
-  constructor(t) {
-    this.store = t;
-  }
   #t;
-  #e;
   #n;
   enable() {
-    if (this.#t) return;
+    if (this.#e) return;
     const t = this.store.refs.container;
-    t && (this.#t = (e) => {
+    t && (this.#e = (e) => {
       this.store.nodes.focus.target = e.target;
-    }, this.#e = () => {
+    }, this.#t = () => {
       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.#t), t.addEventListener("focusout", this.#e), t.addEventListener("click", this.#n));
+    }, t.addEventListener("focusin", this.#e), t.addEventListener("focusout", this.#t), t.addEventListener("click", this.#n));
   }
   disable() {
     const t = this.store.refs.container;
-    !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);
+    !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);
   }
   recover() {
     const t = this.store.state.recovery.get();
@@ -1281,20 +1232,36 @@ class te {
     this.store.nodes.focus.caret = n, this.store.state.recovery.set(void 0);
   }
 }
-class ee {
+function te(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 ee(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 ne {
   constructor(t) {
     this.store = t;
   }
-  #t;
   #e;
+  #t;
   #n;
   #s;
   #r = null;
   #o = !1;
   enable() {
-    this.#t || (this.#t = (t) => {
+    this.#e || (this.#e = (t) => {
       this.#r = t.target, this.#o = !0;
-    }, this.#e = (t) => {
+    }, this.#t = (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 = () => {
@@ -1303,13 +1270,13 @@ class ee {
       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.#t), document.addEventListener("mousemove", this.#e), document.addEventListener("mouseup", this.#n), document.addEventListener("selectionchange", this.#s));
+    }, document.addEventListener("mousedown", this.#e), document.addEventListener("mousemove", this.#t), document.addEventListener("mouseup", this.#n), document.addEventListener("selectionchange", this.#s));
   }
   disable() {
-    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;
+    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;
   }
 }
-function ne(s, t) {
+function se(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,65 +1284,90 @@ 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 re {
   constructor(t) {
     this.store = t;
   }
-  #t;
   #e;
+  #t;
   #n;
   enable() {
-    if (this.#t) return;
+    if (this.#e) 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);
-    }, this.#e = (e) => {
+    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);
     }, this.#n = (e) => {
-      ie(this.store, e);
-    }, t.addEventListener("keydown", this.#t), t.addEventListener("paste", this.#e), t.addEventListener("beforeinput", this.#n, !0));
+      oe(this.store, e);
+    }, t.addEventListener("keydown", this.#e), t.addEventListener("paste", this.#t), t.addEventListener("beforeinput", this.#n, !0));
   }
   disable() {
     const t = this.store.refs.container;
-    !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);
+    !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);
   }
   #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) {
+        if (e.isEditable && (t.key === v.BACKSPACE && !e.isCaretAtBeginning || t.key === v.DELETE && !e.isCaretAtEnd))
+          return;
         t.preventDefault(), U("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(), U("prev", this.store)), t.key === v.DELETE && e.isSpan && e.isCaretAtEnd && e.next.target && (t.preventDefault(), U("next", this.store));
     }
   }
 }
-function ie(s, t) {
+function oe(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 || ie(n, t) && s.events.change();
+}
+function ie(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) {
   const e = s.state.selecting.get();
@@ -1415,40 +1407,40 @@ function ht(s, t) {
   });
 }
 class ce {
-  #t = [];
-  #e = !1;
+  #e = [];
+  #t = !1;
   register(t) {
-    return this.#t.push(t), this;
+    return this.#e.push(t), this;
   }
   enableAll() {
-    this.#e || (this.#e = !0, this.#t.forEach((t) => t.enable()));
+    this.#t || (this.#t = !0, this.#e.forEach((t) => t.enable()));
   }
   disableAll() {
-    this.#e && (this.#e = !1, this.#t.forEach((t) => t.disable()));
+    this.#t && (this.#t = !1, this.#e.forEach((t) => t.disable()));
   }
 }
-const $ = (s, t) => ({
+const V = (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;
+  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;
 };
 class de {
   constructor(t) {
     this.store = t;
   }
-  #t = [];
-  #e = !1;
+  #e = [];
+  #t = !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);
+    n.enableAll(), this.#e.push(() => n.disableAll()), this.#n(), t?.getTrigger && this.#s(t.getTrigger);
   }
   disable() {
-    for (const t of this.#t)
+    for (const t of this.#e)
       t();
-    this.#t = [], this.#e = !1;
+    this.#e = [], this.#t = !1;
   }
   /**
    * Synchronizes the parser with current options and handles parsing.
@@ -1457,12 +1449,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 B(r)) : n.state.parser.set(void 0), this.#e) {
+    if (r && r.some(Boolean) ? n.state.parser.set(new H(r)) : n.state.parser.set(void 0), this.#t) {
       n.state.recovery.get() || n.events.parse();
       return;
     }
     const o = t ?? n.state.defaultValue.get() ?? "";
-    n.state.tokens.set(_(n, o)), this.#e = !0;
+    n.state.tokens.set(R(n, o)), this.#t = !0;
   }
   /**
    * Recovers focus after tokens change.
@@ -1473,27 +1465,21 @@ class de {
     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(
+    this.#e.push(
       t.events.parse.on(() => {
         if (t.state.recovery.get()) {
           const e = I(t.state.tokens.get());
-          t.state.tokens.set(_(t, e)), t.state.previousValue.set(e);
+          t.state.tokens.set(R(t, e)), t.state.previousValue.set(e);
           return;
         }
         t.state.tokens.set(t.nodes.focus.target ? Ft(t) : Wt(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.controllers.overlay.enableTrigger(t, (n) => e.state.overlayMatch.set(n)), this.#e.push(() => e.controllers.overlay.disable()), this.#e.push(
       e.state.overlayMatch.on((n) => {
         n ? (e.nodes.input.target = e.nodes.focus.target, e.controllers.overlay.enableClose()) : e.controllers.overlay.disableClose();
       })
@@ -1501,10 +1487,59 @@ class de {
   }
 }
 class ue {
+  constructor(t) {
+    this.store = t;
+  }
+  #e;
+  #t;
+  #n;
+  #s;
+  #r;
+  #o;
+  #i;
+  #a;
+  enableTrigger(t, e) {
+    if (this.#e) return;
+    this.#e = 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);
+      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.#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;
+  }
+}
+class he {
   key = new Zt();
   nodes = {
-    focus: new V(void 0, this),
-    input: new V(void 0, this)
+    focus: new B(void 0, this),
+    input: new B(void 0, this)
   };
   state;
   events = Xt();
@@ -1513,11 +1548,11 @@ class ue {
     overlay: null
   };
   controllers = {
-    overlay: new Yt(this),
-    focus: new te(this),
-    keydown: new oe(this),
+    overlay: new ue(this),
+    focus: new Yt(this),
+    keydown: new re(this),
     system: new Kt(this),
-    textSelection: new ee(this)
+    textSelection: new ne(this)
   };
   lifecycle = new de(this);
   constructor(t) {
@@ -1560,13 +1595,13 @@ class ue {
     };
   }
 }
-class he {
+class fe {
   ref;
-  #t;
   #e;
+  #t;
   #n;
   constructor(t) {
-    this.ref = t.ref, this.#t = t.store, this.#e = t.token;
+    this.ref = t.ref, this.#e = t.store, this.#t = t.token;
   }
   get readOnly() {
     return this.#n;
@@ -1575,53 +1610,53 @@ class he {
     this.#n = t;
   }
   get content() {
-    return this.#e.content;
+    return this.#t.content;
   }
   set content(t) {
-    this.#e.content = t, this.#s();
+    this.#t.content = t, this.#s();
   }
   get value() {
-    return this.#e.value;
+    return this.#t.value;
   }
   set value(t) {
-    this.#e.value = t ?? "", this.#s();
+    this.#t.value = t ?? "", this.#s();
   }
   get meta() {
-    return this.#e.meta;
+    return this.#t.meta;
   }
   set meta(t) {
-    this.#e.meta = t, this.#s();
+    this.#t.meta = t, this.#s();
   }
   get depth() {
-    return z(this.#t.state.tokens.get(), this.#e).depth;
+    return z(this.#e.state.tokens.get(), this.#t).depth;
   }
   get hasChildren() {
-    return this.#e.children.length > 0;
+    return this.#t.children.length > 0;
   }
   get parent() {
-    return z(this.#t.state.tokens.get(), this.#e)?.parent;
+    return z(this.#e.state.tokens.get(), this.#t)?.parent;
   }
   get tokens() {
-    return this.#e.children;
+    return this.#t.children;
   }
   change = (t) => {
-    this.#e.content = t.content, this.#e.value = t.value ?? "", t.meta !== void 0 && (this.#e.meta = t.meta), this.#s();
+    this.#t.content = t.content, this.#t.value = t.value ?? "", t.meta !== void 0 && (this.#t.meta = t.meta), this.#s();
   };
-  remove = () => this.#t.events.delete({ token: this.#e });
+  remove = () => this.#e.events.delete({ token: this.#t });
   #s() {
-    this.#t.events.change();
+    this.#e.events.change();
   }
 }
 let ft = 0;
 function rt(s) {
   return `block-${ft++}-${s}`;
 }
-function fe() {
+function ge() {
   ft = 0;
 }
-function ge(s) {
+function pe(s) {
   if (s.length === 0) return [];
-  fe();
+  ge();
   const t = [];
   let e = [], n = -1;
   const r = (o) => {
@@ -1644,7 +1679,7 @@ function ge(s) {
       continue;
     }
     if (o.type !== "text") continue;
-    const a = pe(o);
+    const a = ve(o);
     for (let c = 0; c < a.length; c++) {
       const l = a[c];
       if (l.isNewline) {
@@ -1664,7 +1699,7 @@ function ge(s) {
   }
   return t;
 }
-function pe(s) {
+function ve(s) {
   const t = [], { content: e, position: n } = s;
   let r = n.start;
   const o = [], i = () => {
@@ -1700,12 +1735,12 @@ function pe(s) {
   }
   return i(), t;
 }
-function ve(s, t, e, n) {
+function me(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 = ye(s, t), o = ke(r, e, n);
+  return xe(o);
 }
-function me(s, t) {
+function ye(s, t) {
   return t.map((e, n) => {
     const r = s.substring(e.startPos, e.endPos);
     let o = "";
@@ -1720,7 +1755,7 @@ function me(s, t) {
     };
   });
 }
-function ye(s) {
+function xe(s) {
   const t = [];
   for (let e = 0; e < s.length; e++) {
     const n = s[e], r = e === s.length - 1;
@@ -1731,11 +1766,11 @@ function ye(s) {
   }
   return t.join("");
 }
-function xe(s, t, e) {
+function ke(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), we(n, s), n;
 }
-function ke(s, t) {
+function we(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,90 +1782,48 @@ function ke(s, t) {
 `;
   }
 }
-const we = {
-  container: "div",
-  span: "span"
+const Se = [
+  {
+    markup: Pt,
+    overlay: {
+      trigger: It,
+      data: []
+    }
+  }
+], Ce = (s) => () => {
+  const [t, e] = P(() => s.get());
+  return M(() => 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 be(s, t) {
+  St(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 tt = at(void 0);
-tt.displayName = "StoreContext";
+const K = at(void 0);
+K.displayName = "StoreContext";
 function E() {
-  const s = ct(tt);
+  const s = ct(K);
   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];
-}
-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
-    }
-  );
+const Ee = {
+  container: "div",
+  span: "span"
 };
-function Ee(s) {
-  s.preventDefault();
-  const t = s.clipboardData.getData("text");
-  document.execCommand("insertText", !1, t);
+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 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 = {
   position: "absolute",
   left: -28,
@@ -1853,17 +1846,17 @@ const q = {
   margin: 0,
   font: "inherit",
   lineHeight: 1
-}, vt = {
+}, gt = {
   ...q,
   opacity: 1
 }, Te = {
-  ...vt,
+  ...gt,
   cursor: "grabbing"
 }, Ne = {
   position: "relative",
   paddingLeft: 4,
   transition: "opacity 0.2s ease"
-}, it = {
+}, ot = {
   position: "absolute",
   left: 0,
   right: 0,
@@ -1872,7 +1865,7 @@ 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: [
+}, 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" }),
@@ -1880,20 +1873,20 @@ const q = {
   /* @__PURE__ */ f("circle", { cx: "5", cy: "13", r: "1.5" }),
   /* @__PURE__ */ f("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] = P(!1), [i, a] = P(!1), [c, l] = P(null), d = $(null), g = k(() => o(!0), []), u = k(() => o(!1), []), h = 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) => {
+  }, []), y = k((p) => {
     p.currentTarget.contains(p.relatedTarget) || l(null);
   }, []), b = k(
     (p) => {
@@ -1907,7 +1900,7 @@ const yt = O(({ blockIndex: s, children: t, readOnly: e, onReorder: n }) => {
   ), T = {
     ...Ne,
     opacity: i ? 0.4 : 1
-  }, L = e ? { ...q, display: "none" } : i ? Te : r ? vt : q;
+  }, L = e ? { ...q, display: "none" } : i ? Te : r ? gt : q;
   return /* @__PURE__ */ Z(
     "div",
     {
@@ -1916,38 +1909,76 @@ const yt = O(({ blockIndex: s, children: t, readOnly: e, onReorder: n }) => {
       onMouseEnter: g,
       onMouseLeave: u,
       onDragOver: C,
-      onDragLeave: m,
+      onDragLeave: y,
       onDrop: b,
       children: [
-        c === "before" && /* @__PURE__ */ f("div", { style: { ...it, top: -1 } }),
+        c === "before" && /* @__PURE__ */ f("div", { style: { ...ot, top: -1 } }),
         /* @__PURE__ */ f(
           "button",
           {
             type: "button",
             draggable: !e,
             onDragStart: h,
-            onDragEnd: v,
+            onDragEnd: m,
             style: L,
             "aria-label": "Drag to reorder",
-            children: /* @__PURE__ */ f(mt, {})
+            children: /* @__PURE__ */ f(pt, {})
           }
         ),
         t,
-        c === "after" && /* @__PURE__ */ f("div", { style: { ...it, bottom: -1 } })
+        c === "after" && /* @__PURE__ */ f("div", { style: { ...ot, 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 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");
+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;
+  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 = {
+    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 });
+}
+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]);
+  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";
+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 C = k(
-    (m, b) => {
+    (y, b) => {
       if (!a || !c) return;
-      const T = v.current, L = ve(a, T, m, b);
+      const T = m.current, L = me(a, T, y, b);
       if (L !== a) {
-        const p = _(s, L);
+        const p = R(s, L);
         s.state.tokens.set(p), s.state.previousValue.set(L), c(L);
       }
     },
@@ -1956,16 +1987,30 @@ const xt = O(() => {
   return /* @__PURE__ */ f(
     g,
     {
-      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: 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))
+    }
+  );
+});
+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(
+    c,
+    {
+      ref: (d) => a.container = d,
+      ...l,
+      className: r,
+      style: o,
+      children: t.map((d) => /* @__PURE__ */ f(F, { mark: d }, i.get(d)))
     }
   );
 });
-xt.displayName = "BlockContainer";
-function Ie() {
+xt.displayName = "Container";
+function Le() {
   const s = E(), t = s.state.overlayMatch.use(), e = w.getAbsolutePosition(), n = k(() => s.events.clearOverlay(), []), r = k(
     (i) => {
       const a = {
@@ -1997,12 +2042,12 @@ 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(
+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;
@@ -2011,17 +2056,17 @@ const Pe = "_Container_1lmfr_1", Me = "_Suggestions_1lmfr_10", Le = "_suggestion
     if (!d) return;
     const g = (u) => {
       switch (u.key) {
-        case x.UP:
+        case v.UP:
           u.preventDefault(), i((h) => isNaN(h) ? 0 : (l + (h - 1) % l) % l);
           break;
-        case x.DOWN:
+        case v.DOWN:
           u.preventDefault(), i((h) => isNaN(h) ? 0 : (h + 1) % l);
           break;
-        case x.ENTER:
+        case v.ENTER:
           u.preventDefault(), i((h) => {
             if (isNaN(h)) return h;
-            const v = c[h];
-            return e({ value: v, meta: h.toString() }), h;
+            const m = c[h];
+            return e({ value: m, meta: h.toString() }), h;
           });
           break;
       }
@@ -2043,35 +2088,10 @@ const Pe = "_Container_1lmfr_1", Me = "_Suggestions_1lmfr_10", Le = "_suggestion
     );
   }) }) : 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);
+  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);
 });
 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) {
   const {
     ref: t,
@@ -2084,11 +2104,11 @@ function Fe(s) {
     Overlay: c,
     slots: l,
     slotProps: d,
-    options: g = _e,
+    options: g = Se,
     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 }));
+    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({
     value: e,
     defaultValue: n,
@@ -2099,39 +2119,39 @@ function Fe(s) {
     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: [
+  }), be(b, t);
+  const T = i ? yt : xt;
+  return /* @__PURE__ */ Z(K.Provider, { value: b, children: [
     /* @__PURE__ */ f(T, {}),
     /* @__PURE__ */ f(kt, {})
   ] });
 }
 const We = (s = {}) => {
-  const t = E(), e = et(), n = H(null);
+  const t = E(), e = et(), n = $(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] = P(() => new fe({ ref: n, store: t, token: e }));
+  _e(n, s, e);
   const o = t.state.readOnly.use();
   return M(() => {
     r.readOnly = o;
   }, [o]), r;
 };
-function Re(s, t, e) {
+function _e(s, t, e) {
   M(() => {
     s.current && !t.controlled && (s.current.textContent = e.content);
   }, []);
 }
 export {
-  he as MarkHandler,
+  fe as MarkHandler,
   Fe as MarkedInput,
   j as annotate,
-  Be as denote,
-  ve as reorderBlocks,
-  ge as splitTokensIntoBlocks,
+  He as denote,
+  me as reorderBlocks,
+  pe as splitTokensIntoBlocks,
   We as useMark,
-  Ie as useOverlay
+  Le as useOverlay
 };