@code0-tech/pictor 0.17.0 → 0.17.1

package/dist/components/form/EditorInput.d.ts

@@ -22,9 +22,18 @@ export interface EditorInputProps extends Omit<InputWrapperProps, "onChange" | "
     placeholder?: string;
     children?: React.ReactNode;
 }
+export type EditorInputMenuOpenMode = "shortcut" | "focus";
 export type EditorInputValueProps = Component<HTMLDivElement>;
 export type EditorInputTriggerProps = Component<HTMLButtonElement>;
-export type EditorInputMenuProps = MenuContentProps;
+export type EditorInputMenuProps = MenuContentProps & {
+    /**
+     * When the menu opens.
+     * - "shortcut" (default): opens only on Ctrl+Space.
+     * - "focus": opens as soon as the input is focused and stays open while focused.
+     * Positioning stays anchored to the caret in both modes.
+     */
+    openOn?: EditorInputMenuOpenMode;
+};
 export type EditorInputMenuItemProps = MenuItemProps & {
     value: any;
     data?: any;

package/dist/components/form/EditorInput.js

@@ -1,542 +1,557 @@
-import { jsx as x, jsxs as ke } from "react/jsx-runtime";
-import { c as le } from "../../_virtual/compiler-runtime.js";
-import Y, { useMemo as ae, useRef as G, useState as ie, useEffect as re, useCallback as T } from "react";
-import { createEditor as Oe, Editor as fe, Transforms as ne, Text as pe, Range as Te, Node as Pe } from "slate";
-import { withReact as Ne, ReactEditor as Q, Slate as Ve, Editable as Fe } from "slate-react";
-import { withHistory as Le } from "slate-history";
-import { InputWrapper as $e } from "./InputWrapper.js";
+import { jsx as v, jsxs as Re } from "react/jsx-runtime";
+import { c as ae } from "../../_virtual/compiler-runtime.js";
+import ee, { useMemo as de, useRef as W, useState as le, useEffect as se, useCallback as O } from "react";
+import { createEditor as Ve, Editor as he, Transforms as oe, Text as ge, Range as ke, Node as Fe } from "slate";
+import { withReact as Le, ReactEditor as Y, Slate as $e, Editable as je } from "slate-react";
+import { withHistory as Be } from "slate-history";
+import { InputWrapper as Ke } from "./InputWrapper.js";
 import "../../utils/contextStore.js";
-import { mergeComponentProps as Re } from "../../utils/component.js";
+import { mergeComponentProps as Ee } from "../../utils/component.js";
 import "js-md5";
-import { Menu as je, MenuPortal as Be, MenuContent as Ke, MenuItem as Ue, MenuSubContent as We, MenuTrigger as Ge, MenuSubTrigger as He, MenuSub as qe } from "../menu/Menu.js";
+import { Menu as Ue, MenuPortal as We, MenuContent as Ge, MenuItem as He, MenuSubContent as qe, MenuTrigger as ze, MenuSubTrigger as Je, MenuSub as Qe } from "../menu/Menu.js";
 import '../../assets/components/form/EditorInput.style.css';/* empty css                       */
-const X = (n) => n?.type === "token", ze = (n, e) => {
-  const l = [];
-  e.forEach((a, d) => {
-    if (!a.void) return;
-    const p = new RegExp(a.pattern.source, a.pattern.flags.includes("g") ? a.pattern.flags : a.pattern.flags + "g");
-    let u;
-    for (; (u = p.exec(n)) !== null && u[0].length; )
-      l.push({
-        start: u.index,
-        end: u.index + u[0].length,
+const Z = (n) => n?.type === "token", Xe = (n, e) => {
+  const i = [];
+  e.forEach((u, d) => {
+    if (!u.void) return;
+    const h = new RegExp(u.pattern.source, u.pattern.flags.includes("g") ? u.pattern.flags : u.pattern.flags + "g");
+    let f;
+    for (; (f = h.exec(n)) !== null && f[0].length; )
+      i.push({
+        start: f.index,
+        end: f.index + f[0].length,
         ruleIndex: d,
-        token: u[0],
-        match: u
+        token: f[0],
+        match: f
       });
-  }), l.sort((a, d) => a.start - d.start);
+  }), i.sort((u, d) => u.start - d.start);
   const r = [];
-  let o = 0;
-  return l.forEach((a) => {
-    if (a.start < o) return;
-    a.start > o ? r.push({
-      text: n.slice(o, a.start)
-    }) : r.length && X(r[r.length - 1]) && r.push({
+  let l = 0;
+  return i.forEach((u) => {
+    if (u.start < l) return;
+    u.start > l ? r.push({
+      text: n.slice(l, u.start)
+    }) : r.length && Z(r[r.length - 1]) && r.push({
       text: ""
     });
     const d = {
       type: "token",
-      ruleIndex: a.ruleIndex,
-      token: a.token,
-      match: a.match,
+      ruleIndex: u.ruleIndex,
+      token: u.token,
+      match: u.match,
       children: [{
         text: ""
       }]
     };
-    r.push(d), o = a.end;
-  }), o < n.length && r.push({
-    text: n.slice(o)
-  }), (!r.length || X(r[0])) && r.unshift({
+    r.push(d), l = u.end;
+  }), l < n.length && r.push({
+    text: n.slice(l)
+  }), (!r.length || Z(r[0])) && r.unshift({
     text: ""
-  }), X(r[r.length - 1]) && r.push({
+  }), Z(r[r.length - 1]) && r.push({
     text: ""
   }), r;
-}, De = (n, e) => (n || "").split(`
-`).map((l) => ({
+}, Me = (n, e) => (n || "").split(`
+`).map((i) => ({
   type: "paragraph",
-  children: ze(l, e)
-})), Ee = (n) => pe.isText(n) ? n.text : X(n) ? n.token : n.children.map(Ee).join(""), Se = (n) => n.map(Ee).join(`
-`), Ae = Y.createContext(null), de = Y.createContext(null), oe = () => {
-  const n = Y.useContext(Ae);
+  children: Xe(i, e)
+})), Ae = (n) => ge.isText(n) ? n.text : Z(n) ? n.token : n.children.map(Ae).join(""), Oe = (n) => n.map(Ae).join(`
+`), _e = ee.createContext(null), me = ee.createContext(null), ce = () => {
+  const n = ee.useContext(_e);
   if (!n)
     throw new Error("EditorInput.* components must be used inside <EditorInput>");
   return n;
-}, mt = (n) => {
+}, It = (n) => {
   const {
     title: e,
-    right: l,
+    right: i,
     left: r,
-    rightType: o,
-    leftType: a,
+    rightType: l,
+    leftType: u,
     description: d,
-    wrapperComponent: p,
-    tokenRules: u = [],
-    onSelect: h,
-    search: D,
-    formValidation: b,
-    onChange: c,
-    disabled: N = !1,
-    readonly: V = !1,
-    singleLine: v = !1,
-    placeholder: F,
-    value: _,
-    initialValue: j,
-    defaultValue: k,
+    wrapperComponent: h,
+    tokenRules: f = [],
+    onSelect: p,
+    search: S,
+    formValidation: I,
+    onChange: o,
+    disabled: k = !1,
+    readonly: C = !1,
+    singleLine: g = !1,
+    placeholder: b,
+    value: y,
+    initialValue: F,
+    defaultValue: E,
     children: B
-  } = n, M = String(_ ?? j ?? k ?? ""), m = v ? M.replace(/\n/g, " ") : M, i = ae(() => {
-    const t = Le(Ne(Oe())), {
+  } = n, L = String(y ?? F ?? E ?? ""), x = g ? L.replace(/\n/g, " ") : L, c = de(() => {
+    const t = Be(Le(Ve())), {
       isInline: s,
-      isVoid: y
+      isVoid: T
     } = t;
-    return t.isInline = (C) => X(C) || s(C), t.isVoid = (C) => X(C) || y(C), t;
-  }, []), K = ae(() => De(m, u), []), R = G(m), [$, U] = ie(m);
-  re(() => {
-    if (m === R.current || (R.current = m, U(m), Se(i.children) === m)) return;
-    const t = De(m, u);
-    fe.withoutNormalizing(i, () => {
-      ne.deselect(i);
-      const s = i.children.length;
-      ne.insertNodes(i, t, {
+    return t.isInline = (D) => Z(D) || s(D), t.isVoid = (D) => Z(D) || T(D), t;
+  }, []), K = de(() => Me(x, f), []), P = W(x), [$, U] = le(x);
+  se(() => {
+    if (x === P.current || (P.current = x, U(x), Oe(c.children) === x)) return;
+    const t = Me(x, f);
+    he.withoutNormalizing(c, () => {
+      oe.deselect(c);
+      const s = c.children.length;
+      oe.insertNodes(c, t, {
         at: [0]
       });
-      for (let y = 0; y < s; y++) ne.removeNodes(i, {
+      for (let T = 0; T < s; T++) oe.removeNodes(c, {
         at: [t.length]
       });
     });
     try {
-      ne.select(i, fe.end(i, []));
+      oe.select(c, he.end(c, []));
     } catch {
     }
-  }, [m, i, u]);
-  const [g, W] = ie(!1), Z = G(null), z = G(null), L = G(void 0), O = T(() => {
-    const t = z.current, s = Z.current, y = s?.parentElement;
-    if (!t || !s || !y) return;
-    let C = null;
+  }, [x, c, f]);
+  const [m, G] = le(!1), [H, ie] = le("shortcut"), q = W(H);
+  q.current = H;
+  const te = W(null), Q = W(null), j = W(void 0), N = O(() => {
+    const t = Q.current, s = te.current, T = s?.parentElement;
+    if (!t || !s || !T) return;
+    let D = null;
     try {
-      i.selection && (C = Q.toDOMRange(i, i.selection).getBoundingClientRect());
+      c.selection && (D = Y.toDOMRange(c, c.selection).getBoundingClientRect());
     } catch {
-      C = null;
+      D = null;
     }
-    (!C || !C.width && !C.height && !C.left && !C.top) && (C = s.getBoundingClientRect());
-    const we = y.getBoundingClientRect();
-    t.style.left = `${C.left - we.left}px`, t.style.top = `${C.top - we.top}px`, t.style.width = "0px", t.style.height = `${C.height || parseFloat(getComputedStyle(s).lineHeight) || 16}px`;
-  }, [i]), J = b?.setValue, f = T((t) => {
-    g && O();
-    const s = Se(t);
-    s !== R.current && (R.current = s, U(s), J?.(s), c?.(s));
-  }, [g, O, J, c]), P = T(() => {
-    z.current && (L.current && clearTimeout(L.current), O(), W(!0));
-  }, [O]);
-  re(() => {
-    g && O();
-  }, [g, O]);
-  const E = T(() => {
-    L.current && clearTimeout(L.current), L.current = setTimeout(() => W(!1), 150);
-  }, []), S = T(() => {
-    L.current && clearTimeout(L.current);
-  }, []), I = G(/* @__PURE__ */ new Map()), [A, ce] = ie(null), H = G(null), w = T((t) => {
-    H.current = t, ce(t);
-  }, []), [he, _e] = ie(null), ue = G(null), ee = T((t) => {
-    ue.current = t, _e(t);
-  }, []), ge = T((t, s) => (I.current.set(t, s), () => {
-    I.current.delete(t), H.current === t && w(null);
-  }), [w]), te = T(() => Array.from(I.current.entries()).filter(([, t]) => t.el.current && t.parentId === ue.current).sort((t, s) => t[1].el.current.compareDocumentPosition(s[1].el.current) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1).map(([t]) => t), []), q = T((t) => {
-    w(t), t && I.current.get(t)?.el.current?.scrollIntoView({
+    (!D || !D.width && !D.height && !D.left && !D.top) && (D = s.getBoundingClientRect());
+    const Se = T.getBoundingClientRect();
+    t.style.left = `${D.left - Se.left}px`, t.style.top = `${D.top - Se.top}px`, t.style.width = "0px", t.style.height = `${D.height || parseFloat(getComputedStyle(s).lineHeight) || 16}px`;
+  }, [c]), X = I?.setValue, a = O((t) => {
+    m && N();
+    const s = Oe(t);
+    s !== P.current && (P.current = s, U(s), X?.(s), o?.(s));
+  }, [m, N, X, o]), V = O(() => {
+    Q.current && (j.current && clearTimeout(j.current), N(), G(!0));
+  }, [N]);
+  se(() => {
+    m && N();
+  }, [m, N]);
+  const A = O(() => {
+    j.current && clearTimeout(j.current), j.current = setTimeout(() => G(!1), 150);
+  }, []), R = O(() => {
+    j.current && clearTimeout(j.current);
+  }, []), w = W(/* @__PURE__ */ new Map()), [_, fe] = le(null), z = W(null), M = O((t) => {
+    z.current = t, fe(t);
+  }, []), [xe, Pe] = le(null), pe = W(null), ne = O((t) => {
+    pe.current = t, Pe(t);
+  }, []), ve = O((t, s) => (w.current.set(t, s), () => {
+    w.current.delete(t), z.current === t && M(null);
+  }), [M]), re = O(() => Array.from(w.current.entries()).filter(([, t]) => t.el.current && t.parentId === pe.current).sort((t, s) => t[1].el.current.compareDocumentPosition(s[1].el.current) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1).map(([t]) => t), []), J = O((t) => {
+    M(t), t && w.current.get(t)?.el.current?.scrollIntoView({
       block: "nearest"
     });
-  }, [w]), me = T(() => {
-    const t = te();
+  }, [M]), Ie = O(() => {
+    const t = re();
     if (!t.length) return;
-    const s = H.current, y = s === null ? -1 : t.indexOf(s);
-    q(t[Math.min(y + 1, t.length - 1)] ?? t[0]);
-  }, [te, q]), xe = T(() => {
-    const t = te();
+    const s = z.current, T = s === null ? -1 : t.indexOf(s);
+    J(t[Math.min(T + 1, t.length - 1)] ?? t[0]);
+  }, [re, J]), ye = O(() => {
+    const t = re();
     if (!t.length) return;
-    const s = H.current, y = s === null ? t.length : t.indexOf(s);
-    q(t[Math.max(y - 1, 0)] ?? t[t.length - 1]);
-  }, [te, q]), ve = T(() => {
-    const t = te();
-    t.length && q(t[0]);
-  }, [te, q]), se = T((t, s) => {
-    h?.(t, s), W(!1);
-  }, [h]), Ie = T(() => {
-    const t = H.current;
+    const s = z.current, T = s === null ? t.length : t.indexOf(s);
+    J(t[Math.max(T - 1, 0)] ?? t[t.length - 1]);
+  }, [re, J]), Ce = O(() => {
+    const t = re();
+    t.length && J(t[0]);
+  }, [re, J]), ue = O((t, s) => {
+    p?.(t, s), q.current !== "focus" && G(!1);
+  }, [p]), be = O(() => {
+    const t = z.current;
     if (!t) return !1;
-    const s = I.current.get(t);
-    return s ? s.onActivate ? (s.onActivate(), !0) : (setTimeout(() => se(s.getValue(), s.getData()), 0), !0) : !1;
-  }, [se]), ye = T((t) => {
-    ee(t), setTimeout(() => {
-      const s = Array.from(I.current.entries()).filter(([, y]) => y.el.current && y.parentId === t).sort((y, C) => y[1].el.current.compareDocumentPosition(C[1].el.current) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1).map(([y]) => y);
-      s.length && q(s[0]);
+    const s = w.current.get(t);
+    return s ? s.onActivate ? (s.onActivate(), !0) : (setTimeout(() => ue(s.getValue(), s.getData()), 0), !0) : !1;
+  }, [ue]), we = O((t) => {
+    ne(t), setTimeout(() => {
+      const s = Array.from(w.current.entries()).filter(([, T]) => T.el.current && T.parentId === t).sort((T, D) => T[1].el.current.compareDocumentPosition(D[1].el.current) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1).map(([T]) => T);
+      s.length && J(s[0]);
     }, 20);
-  }, [ee, q]), Ce = T(() => {
-    const t = ue.current;
-    t !== null && (ee(null), w(t));
-  }, [ee, w]), be = T(() => {
-    const t = H.current;
+  }, [ne, J]), Te = O(() => {
+    const t = pe.current;
+    t !== null && (ne(null), M(t));
+  }, [ne, M]), De = O(() => {
+    const t = z.current;
     if (!t) return !1;
-    const s = I.current.get(t);
+    const s = w.current.get(t);
     return s?.onActivate ? (s.onActivate(), !0) : !1;
   }, []);
-  re(() => {
-    g || (w(null), ee(null));
-  }, [g, w, ee]);
-  const Me = ae(() => ({
-    editor: i,
-    tokenRules: u,
-    singleLine: v,
-    disabled: N,
-    readonly: V,
-    placeholder: F,
-    search: D,
+  se(() => {
+    m || (M(null), ne(null));
+  }, [m, M, ne]);
+  const Ne = de(() => ({
+    editor: c,
+    tokenRules: f,
+    singleLine: g,
+    disabled: k,
+    readonly: C,
+    placeholder: b,
+    search: S,
     documentText: $,
-    open: g,
-    setOpen: W,
-    openMenu: P,
-    editorContainerRef: Z,
-    triggerRef: z,
-    updateTriggerPosition: O,
-    scheduleClose: E,
-    cancelClose: S,
-    registerItem: ge,
-    activeId: A,
-    setActiveId: w,
-    highlightNext: me,
-    highlightPrevious: xe,
-    focusFirst: ve,
-    selectActive: Ie,
-    select: se,
-    openSubId: he,
-    enterSub: ye,
-    exitSub: Ce,
-    openActiveSub: be
-  }), [i, u, v, N, V, F, D, $, g, P, O, E, S, ge, A, w, me, xe, ve, Ie, se, he, ye, Ce, be]);
-  return /* @__PURE__ */ x(Ve, { editor: i, initialValue: K, onChange: f, children: /* @__PURE__ */ x(Ae.Provider, { value: Me, children: /* @__PURE__ */ x(je, { open: g, modal: !1, onOpenChange: (t) => !t && W(!1), children: /* @__PURE__ */ x($e, { title: e, description: d, right: l, left: r, rightType: o, leftType: a, formValidation: b, ...p ?? {}, style: {
+    open: m,
+    setOpen: G,
+    openMenu: V,
+    menuOpenMode: H,
+    setMenuOpenMode: ie,
+    editorContainerRef: te,
+    triggerRef: Q,
+    updateTriggerPosition: N,
+    scheduleClose: A,
+    cancelClose: R,
+    registerItem: ve,
+    activeId: _,
+    setActiveId: M,
+    highlightNext: Ie,
+    highlightPrevious: ye,
+    focusFirst: Ce,
+    selectActive: be,
+    select: ue,
+    openSubId: xe,
+    enterSub: we,
+    exitSub: Te,
+    openActiveSub: De
+  }), [c, f, g, k, C, b, S, $, m, V, H, N, A, R, ve, _, M, Ie, ye, Ce, be, ue, xe, we, Te, De]);
+  return /* @__PURE__ */ v($e, { editor: c, initialValue: K, onChange: a, children: /* @__PURE__ */ v(_e.Provider, { value: Ne, children: /* @__PURE__ */ v(Ue, { open: m, modal: !1, onOpenChange: (t) => !t && G(!1), children: /* @__PURE__ */ v(Ke, { title: e, description: d, right: i, left: r, rightType: l, leftType: u, formValidation: I, ...h ?? {}, style: {
     position: "relative",
-    ...p?.style
+    ...h?.style
   }, children: B }) }) }) });
-}, xt = (n) => {
-  const e = le.c(40), {
-    editor: l,
+}, yt = (n) => {
+  const e = ae.c(44), {
+    editor: i,
     tokenRules: r,
-    singleLine: o,
-    disabled: a,
+    singleLine: l,
+    disabled: u,
     readonly: d,
-    placeholder: p,
-    open: u,
-    openMenu: h,
-    setOpen: D,
-    editorContainerRef: b,
-    scheduleClose: c,
-    cancelClose: N,
-    highlightNext: V,
-    highlightPrevious: v,
-    focusFirst: F,
-    selectActive: _,
-    openSubId: j,
-    exitSub: k,
-    openActiveSub: B
-  } = oe();
-  let M;
-  e[0] !== r ? (M = (f) => {
-    const [P, E] = f, S = [];
-    if (!pe.isText(P) || !r.length)
-      return S;
+    placeholder: h,
+    open: f,
+    openMenu: p,
+    setOpen: S,
+    menuOpenMode: I,
+    editorContainerRef: o,
+    scheduleClose: k,
+    cancelClose: C,
+    highlightNext: g,
+    highlightPrevious: b,
+    focusFirst: y,
+    selectActive: F,
+    openSubId: E,
+    exitSub: B,
+    openActiveSub: L
+  } = ce();
+  let x;
+  e[0] !== C || e[1] !== I || e[2] !== p ? (x = () => {
+    C(), I === "focus" && p();
+  }, e[0] = C, e[1] = I, e[2] = p, e[3] = x) : x = e[3];
+  const c = x;
+  let K;
+  e[4] !== r ? (K = (a) => {
+    const [V, A] = a, R = [];
+    if (!ge.isText(V) || !r.length)
+      return R;
     const {
-      text: I
-    } = P;
-    return r.forEach((A, ce) => {
-      if (A.void)
+      text: w
+    } = V;
+    return r.forEach((_, fe) => {
+      if (_.void)
         return;
-      const H = new RegExp(A.pattern.source, A.pattern.flags.includes("g") ? A.pattern.flags : A.pattern.flags + "g");
-      let w;
-      for (; (w = H.exec(I)) !== null && w[0].length; )
-        S.push({
+      const z = new RegExp(_.pattern.source, _.pattern.flags.includes("g") ? _.pattern.flags : _.pattern.flags + "g");
+      let M;
+      for (; (M = z.exec(w)) !== null && M[0].length; )
+        R.push({
           anchor: {
-            path: E,
-            offset: w.index
+            path: A,
+            offset: M.index
           },
           focus: {
-            path: E,
-            offset: w.index + w[0].length
+            path: A,
+            offset: M.index + M[0].length
           },
-          tokenRuleIndex: ce,
-          tokenText: w[0],
-          tokenMatch: w
+          tokenRuleIndex: fe,
+          tokenText: M[0],
+          tokenMatch: M
         });
-    }), S;
-  }, e[0] = r, e[1] = M) : M = e[1];
-  const m = M;
-  let i;
-  e[2] !== r ? (i = (f) => {
+    }), R;
+  }, e[4] = r, e[5] = K) : K = e[5];
+  const P = K;
+  let $;
+  e[6] !== r ? ($ = (a) => {
     const {
-      attributes: P,
-      children: E,
-      leaf: S
-    } = f, I = S;
-    if (I.tokenRuleIndex !== void 0) {
-      const A = r[I.tokenRuleIndex];
-      if (A)
-        return A.wrap ? /* @__PURE__ */ x("span", { ...P, children: A.wrap(I.tokenText ?? "", E, I.tokenMatch ?? []) }) : /* @__PURE__ */ x("span", { ...P, children: /* @__PURE__ */ x("span", { style: A.style, className: A.className, children: E }) });
+      attributes: V,
+      children: A,
+      leaf: R
+    } = a, w = R;
+    if (w.tokenRuleIndex !== void 0) {
+      const _ = r[w.tokenRuleIndex];
+      if (_)
+        return _.wrap ? /* @__PURE__ */ v("span", { ...V, children: _.wrap(w.tokenText ?? "", A, w.tokenMatch ?? []) }) : /* @__PURE__ */ v("span", { ...V, children: /* @__PURE__ */ v("span", { style: _.style, className: _.className, children: A }) });
     }
-    return /* @__PURE__ */ x("span", { ...P, children: E });
-  }, e[2] = r, e[3] = i) : i = e[3];
-  const K = i;
-  let R;
-  e[4] !== r ? (R = (f) => {
+    return /* @__PURE__ */ v("span", { ...V, children: A });
+  }, e[6] = r, e[7] = $) : $ = e[7];
+  const U = $;
+  let m;
+  e[8] !== r ? (m = (a) => {
     const {
-      attributes: P,
-      children: E,
-      element: S
-    } = f;
-    if (X(S)) {
-      const I = r[S.ruleIndex], A = I?.wrap ? I.wrap(S.token, null, S.match ?? []) : /* @__PURE__ */ x("span", { style: I?.style, className: I?.className, children: S.token });
-      return /* @__PURE__ */ ke("span", { ...P, children: [
-        /* @__PURE__ */ x("span", { contentEditable: !1, className: "editor-input__token", style: {
+      attributes: V,
+      children: A,
+      element: R
+    } = a;
+    if (Z(R)) {
+      const w = r[R.ruleIndex], _ = w?.wrap ? w.wrap(R.token, null, R.match ?? []) : /* @__PURE__ */ v("span", { style: w?.style, className: w?.className, children: R.token });
+      return /* @__PURE__ */ Re("span", { ...V, children: [
+        /* @__PURE__ */ v("span", { contentEditable: !1, className: "editor-input__token", style: {
           userSelect: "none"
-        }, children: A }),
-        E
+        }, children: _ }),
+        A
       ] });
     }
-    return /* @__PURE__ */ x("div", { ...P, style: {
+    return /* @__PURE__ */ v("div", { ...V, style: {
       position: "relative"
-    }, children: E });
-  }, e[4] = r, e[5] = R) : R = e[5];
-  const $ = R;
-  let U;
-  e[6] !== l || e[7] !== k || e[8] !== F || e[9] !== V || e[10] !== v || e[11] !== u || e[12] !== B || e[13] !== h || e[14] !== j || e[15] !== _ || e[16] !== D || e[17] !== o || e[18] !== r ? (U = (f) => {
-    if (o && f.key === "Enter" && f.preventDefault(), f.ctrlKey && f.code === "Space") {
-      f.preventDefault(), u ? F() : h();
+    }, children: A });
+  }, e[8] = r, e[9] = m) : m = e[9];
+  const G = m;
+  let H;
+  e[10] !== i || e[11] !== B || e[12] !== y || e[13] !== g || e[14] !== b || e[15] !== f || e[16] !== L || e[17] !== p || e[18] !== E || e[19] !== F || e[20] !== S || e[21] !== l || e[22] !== r ? (H = (a) => {
+    if (l && a.key === "Enter" && a.preventDefault(), a.ctrlKey && a.code === "Space") {
+      a.preventDefault(), f ? y() : p();
       return;
     }
-    if (u) {
-      if (f.key === "ArrowDown") {
-        f.preventDefault(), V();
+    if (f) {
+      if (a.key === "ArrowDown") {
+        a.preventDefault(), g();
         return;
       }
-      if (f.key === "ArrowUp") {
-        f.preventDefault(), v();
+      if (a.key === "ArrowUp") {
+        a.preventDefault(), b();
         return;
       }
-      if (f.key === "ArrowRight" && B()) {
-        f.preventDefault();
+      if (a.key === "ArrowRight" && L()) {
+        a.preventDefault();
         return;
       }
-      if (f.key === "ArrowLeft" && j !== null) {
-        f.preventDefault(), k();
+      if (a.key === "ArrowLeft" && E !== null) {
+        a.preventDefault(), B();
         return;
       }
-      if (f.key === "Enter") {
-        _() && f.preventDefault();
+      if (a.key === "Enter") {
+        F() && a.preventDefault();
         return;
       }
-      if (f.key === "Escape") {
-        f.preventDefault(), j !== null ? k() : D(!1);
+      if (a.key === "Escape") {
+        a.preventDefault(), E !== null ? B() : S(!1);
         return;
       }
     }
-    if ((f.key === "ArrowLeft" || f.key === "ArrowRight") && !f.shiftKey && r.some(Je) && l.selection && Te.isCollapsed(l.selection)) {
-      f.preventDefault();
-      const P = f.key === "ArrowLeft";
-      ne.move(l, {
+    if ((a.key === "ArrowLeft" || a.key === "ArrowRight") && !a.shiftKey && r.some(Ye) && i.selection && ke.isCollapsed(i.selection)) {
+      a.preventDefault();
+      const V = a.key === "ArrowLeft";
+      oe.move(i, {
         unit: "offset",
-        reverse: P
+        reverse: V
       });
-      const E = l.selection;
-      if (E && Te.isCollapsed(E)) {
-        const S = Pe.parent(l, E.anchor.path);
-        !pe.isText(S) && fe.isVoid(l, S) && ne.move(l, {
+      const A = i.selection;
+      if (A && ke.isCollapsed(A)) {
+        const R = Fe.parent(i, A.anchor.path);
+        !ge.isText(R) && he.isVoid(i, R) && oe.move(i, {
           unit: "offset",
-          reverse: P
+          reverse: V
         });
       }
     }
-  }, e[6] = l, e[7] = k, e[8] = F, e[9] = V, e[10] = v, e[11] = u, e[12] = B, e[13] = h, e[14] = j, e[15] = _, e[16] = D, e[17] = o, e[18] = r, e[19] = U) : U = e[19];
-  const g = U;
-  let W;
-  e[20] !== n ? (W = Re("editor-input", n), e[20] = n, e[21] = W) : W = e[21];
-  const Z = o ? "input-wrapper__control input-wrapper__control--single-line" : "input-wrapper__control", z = a || d;
-  let L;
-  e[22] !== l || e[23] !== o ? (L = o ? (f) => {
-    f.preventDefault(), l.insertText(f.clipboardData.getData("text/plain").replace(/\r?\n/g, " "));
-  } : void 0, e[22] = l, e[23] = o, e[24] = L) : L = e[24];
-  let O;
-  e[25] !== N || e[26] !== m || e[27] !== g || e[28] !== p || e[29] !== $ || e[30] !== K || e[31] !== c || e[32] !== Z || e[33] !== z || e[34] !== L ? (O = /* @__PURE__ */ x(Fe, { className: Z, decorate: m, renderLeaf: K, renderElement: $, readOnly: z, spellCheck: !1, placeholder: p, onBlur: c, onFocus: N, onKeyDown: g, onPaste: L }), e[25] = N, e[26] = m, e[27] = g, e[28] = p, e[29] = $, e[30] = K, e[31] = c, e[32] = Z, e[33] = z, e[34] = L, e[35] = O) : O = e[35];
-  let J;
-  return e[36] !== b || e[37] !== W || e[38] !== O ? (J = /* @__PURE__ */ x("div", { ...W, ref: b, children: O }), e[36] = b, e[37] = W, e[38] = O, e[39] = J) : J = e[39], J;
-}, vt = (n) => {
-  const e = le.c(5), {
-    triggerRef: l
-  } = oe();
+  }, e[10] = i, e[11] = B, e[12] = y, e[13] = g, e[14] = b, e[15] = f, e[16] = L, e[17] = p, e[18] = E, e[19] = F, e[20] = S, e[21] = l, e[22] = r, e[23] = H) : H = e[23];
+  const ie = H;
+  let q;
+  e[24] !== n ? (q = Ee("editor-input", n), e[24] = n, e[25] = q) : q = e[25];
+  const te = l ? "input-wrapper__control input-wrapper__control--single-line" : "input-wrapper__control", Q = u || d;
+  let j;
+  e[26] !== i || e[27] !== l ? (j = l ? (a) => {
+    a.preventDefault(), i.insertText(a.clipboardData.getData("text/plain").replace(/\r?\n/g, " "));
+  } : void 0, e[26] = i, e[27] = l, e[28] = j) : j = e[28];
+  let N;
+  e[29] !== P || e[30] !== c || e[31] !== ie || e[32] !== h || e[33] !== G || e[34] !== U || e[35] !== k || e[36] !== te || e[37] !== Q || e[38] !== j ? (N = /* @__PURE__ */ v(je, { className: te, decorate: P, renderLeaf: U, renderElement: G, readOnly: Q, spellCheck: !1, placeholder: h, onBlur: k, onFocus: c, onKeyDown: ie, onPaste: j }), e[29] = P, e[30] = c, e[31] = ie, e[32] = h, e[33] = G, e[34] = U, e[35] = k, e[36] = te, e[37] = Q, e[38] = j, e[39] = N) : N = e[39];
+  let X;
+  return e[40] !== o || e[41] !== q || e[42] !== N ? (X = /* @__PURE__ */ v("div", { ...q, ref: o, children: N }), e[40] = o, e[41] = q, e[42] = N, e[43] = X) : X = e[43], X;
+}, Ct = (n) => {
+  const e = ae.c(5), {
+    triggerRef: i
+  } = ce();
   let r;
-  e[0] !== n ? (r = Re("editor-input__menu-anchor", n), e[0] = n, e[1] = r) : r = e[1];
-  let o;
-  return e[2] !== r || e[3] !== l ? (o = /* @__PURE__ */ x(Ge, { asChild: !0, children: /* @__PURE__ */ x("button", { ref: l, type: "button", tabIndex: -1, "aria-hidden": !0, onMouseDown: Qe, ...r }) }), e[2] = r, e[3] = l, e[4] = o) : o = e[4], o;
-}, It = (n) => {
-  const e = le.c(16), {
-    editor: l,
-    editorContainerRef: r
-  } = oe();
-  let o, a;
+  e[0] !== n ? (r = Ee("editor-input__menu-anchor", n), e[0] = n, e[1] = r) : r = e[1];
+  let l;
+  return e[2] !== r || e[3] !== i ? (l = /* @__PURE__ */ v(ze, { asChild: !0, children: /* @__PURE__ */ v("button", { ref: i, type: "button", tabIndex: -1, "aria-hidden": !0, onMouseDown: Ze, ...r }) }), e[2] = r, e[3] = i, e[4] = l) : l = e[4], l;
+}, bt = (n) => {
+  const e = ae.c(21), {
+    editor: i,
+    editorContainerRef: r,
+    setMenuOpenMode: l
+  } = ce();
+  let u, d, h;
   e[0] !== n ? ({
-    children: o,
-    ...a
-  } = n, e[0] = n, e[1] = o, e[2] = a) : (o = e[1], a = e[2]);
-  let d, p;
-  e[3] !== l ? (d = (c) => {
-    c.preventDefault(), Q.focus(l);
-  }, p = () => Q.focus(l), e[3] = l, e[4] = d, e[5] = p) : (d = e[4], p = e[5]);
-  let u;
-  e[6] !== r ? (u = (c) => {
-    const N = c.target;
-    N && r.current?.contains(N) && c.preventDefault();
-  }, e[6] = r, e[7] = u) : u = e[7];
-  let h;
-  e[8] !== a || e[9] !== d || e[10] !== p || e[11] !== u ? (h = {
+    children: u,
+    openOn: h,
+    ...d
+  } = n, e[0] = n, e[1] = u, e[2] = d, e[3] = h) : (u = e[1], d = e[2], h = e[3]);
+  const f = h === void 0 ? "shortcut" : h;
+  let p, S;
+  e[4] !== f || e[5] !== l ? (p = () => l(f), S = [f, l], e[4] = f, e[5] = l, e[6] = p, e[7] = S) : (p = e[6], S = e[7]), se(p, S);
+  let I, o;
+  e[8] !== i ? (I = (y) => {
+    y.preventDefault(), Y.focus(i);
+  }, o = () => Y.focus(i), e[8] = i, e[9] = I, e[10] = o) : (I = e[9], o = e[10]);
+  let k;
+  e[11] !== r ? (k = (y) => {
+    const F = y.target;
+    F && r.current?.contains(F) && y.preventDefault();
+  }, e[11] = r, e[12] = k) : k = e[12];
+  let C;
+  e[13] !== d || e[14] !== I || e[15] !== o || e[16] !== k ? (C = {
     color: "primary",
     align: "start",
     sideOffset: 8,
-    onContextMenuCapture: Xe,
-    onCloseAutoFocus: Ye,
-    onOpenAutoFocus: d,
-    onFocusCapture: p,
-    onInteractOutside: u,
-    ...a
-  }, e[8] = a, e[9] = d, e[10] = p, e[11] = u, e[12] = h) : h = e[12];
-  const D = h;
+    onContextMenuCapture: et,
+    onCloseAutoFocus: tt,
+    onOpenAutoFocus: I,
+    onFocusCapture: o,
+    onInteractOutside: k,
+    ...d
+  }, e[13] = d, e[14] = I, e[15] = o, e[16] = k, e[17] = C) : C = e[17];
+  const g = C;
   let b;
-  return e[13] !== o || e[14] !== D ? (b = /* @__PURE__ */ x(Be, { children: /* @__PURE__ */ x(Ke, { ...D, children: o }) }), e[13] = o, e[14] = D, e[15] = b) : b = e[15], b;
-}, yt = (n) => {
+  return e[18] !== u || e[19] !== g ? (b = /* @__PURE__ */ v(We, { children: /* @__PURE__ */ v(Ge, { ...g, children: u }) }), e[18] = u, e[19] = g, e[20] = b) : b = e[20], b;
+}, wt = (n) => {
   const {
     value: e,
-    data: l,
+    data: i,
     children: r,
-    onlyOnce: o,
-    aliases: a,
+    onlyOnce: l,
+    aliases: u,
     ...d
   } = n, {
-    editor: p,
-    registerItem: u,
-    activeId: h,
-    setActiveId: D,
-    select: b,
-    search: c,
-    documentText: N
-  } = oe(), V = Y.useContext(de), v = Y.useId(), F = G(null), _ = G({
+    editor: h,
+    registerItem: f,
+    activeId: p,
+    setActiveId: S,
+    select: I,
+    search: o,
+    documentText: k
+  } = ce(), C = ee.useContext(me), g = ee.useId(), b = W(null), y = W({
     value: e,
-    data: l
+    data: i
   });
-  _.current = {
+  y.current = {
     value: e,
-    data: l
+    data: i
   };
-  const j = !!o && N.includes(String(e)), k = c?.trim().toLowerCase() ?? "", B = !k || [typeof r == "string" ? r : String(e), ...a ?? []].some((i) => i.toLowerCase().includes(k)), M = j || !B;
-  return re(() => {
-    if (!M)
-      return u(v, {
-        getValue: () => _.current.value,
-        getData: () => _.current.data,
-        el: F,
-        parentId: V
+  const F = !!l && k.includes(String(e)), E = o?.trim().toLowerCase() ?? "", B = !E || [typeof r == "string" ? r : String(e), ...u ?? []].some((c) => c.toLowerCase().includes(E)), L = F || !B;
+  return se(() => {
+    if (!L)
+      return f(g, {
+        getValue: () => y.current.value,
+        getData: () => y.current.data,
+        el: b,
+        parentId: C
       });
-  }, [v, u, V, M]), M ? null : /* @__PURE__ */ x(Ue, { ...d, ref: (i) => {
-    F.current = i;
-  }, textValue: "", "data-focus": h === v || void 0, onPointerDown: (i) => {
-    i.preventDefault(), D(v), Q.focus(p);
-  }, onPointerMove: (i) => {
-    i.preventDefault(), i.stopPropagation(), h !== v && D(v);
-  }, onSelect: () => setTimeout(() => b(_.current.value, _.current.data), 0), children: r });
-}, Ct = (n) => {
-  const e = le.c(38), {
-    label: l,
+  }, [g, f, C, L]), L ? null : /* @__PURE__ */ v(He, { ...d, ref: (c) => {
+    b.current = c;
+  }, textValue: "", "data-focus": p === g || void 0, onPointerDown: (c) => {
+    c.preventDefault(), S(g), Y.focus(h);
+  }, onPointerMove: (c) => {
+    c.preventDefault(), c.stopPropagation(), p !== g && S(g);
+  }, onSelect: () => setTimeout(() => I(y.current.value, y.current.data), 0), children: r });
+}, Tt = (n) => {
+  const e = ae.c(38), {
+    label: i,
     children: r
   } = n, {
-    editor: o,
-    registerItem: a,
+    editor: l,
+    registerItem: u,
     activeId: d,
-    setActiveId: p,
-    openSubId: u,
-    enterSub: h,
-    exitSub: D
-  } = oe(), b = Y.useContext(de), c = Y.useId(), N = G(null);
-  let V, v;
-  e[0] !== h || e[1] !== c || e[2] !== b || e[3] !== a ? (V = () => a(c, {
-    getValue: Ze,
-    getData: et,
-    el: N,
-    parentId: b,
-    onActivate: () => h(c)
-  }), v = [c, a, b, h], e[0] = h, e[1] = c, e[2] = b, e[3] = a, e[4] = V, e[5] = v) : (V = e[4], v = e[5]), re(V, v);
-  let F;
-  e[6] !== o ? (F = {
-    onOpenAutoFocus: (g) => {
-      g.preventDefault(), Q.focus(o);
+    setActiveId: h,
+    openSubId: f,
+    enterSub: p,
+    exitSub: S
+  } = ce(), I = ee.useContext(me), o = ee.useId(), k = W(null);
+  let C, g;
+  e[0] !== p || e[1] !== o || e[2] !== I || e[3] !== u ? (C = () => u(o, {
+    getValue: nt,
+    getData: rt,
+    el: k,
+    parentId: I,
+    onActivate: () => p(o)
+  }), g = [o, u, I, p], e[0] = p, e[1] = o, e[2] = I, e[3] = u, e[4] = C, e[5] = g) : (C = e[4], g = e[5]), se(C, g);
+  let b;
+  e[6] !== l ? (b = {
+    onOpenAutoFocus: (m) => {
+      m.preventDefault(), Y.focus(l);
     },
-    onFocusCapture: () => Q.focus(o),
-    onCloseAutoFocus: tt,
-    onFocusOutside: nt,
-    onInteractOutside: rt
-  }, e[6] = o, e[7] = F) : F = e[7];
-  const _ = F, j = u === c;
-  let k;
-  e[8] !== h || e[9] !== D || e[10] !== c || e[11] !== u ? (k = (g) => {
-    g && u !== c ? h(c) : !g && u === c && D();
-  }, e[8] = h, e[9] = D, e[10] = c, e[11] = u, e[12] = k) : k = e[12];
+    onFocusCapture: () => Y.focus(l),
+    onCloseAutoFocus: ot,
+    onFocusOutside: st,
+    onInteractOutside: it
+  }, e[6] = l, e[7] = b) : b = e[7];
+  const y = b, F = f === o;
+  let E;
+  e[8] !== p || e[9] !== S || e[10] !== o || e[11] !== f ? (E = (m) => {
+    m && f !== o ? p(o) : !m && f === o && S();
+  }, e[8] = p, e[9] = S, e[10] = o, e[11] = f, e[12] = E) : E = e[12];
   let B;
-  e[13] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (B = (g) => {
-    N.current = g;
+  e[13] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (B = (m) => {
+    k.current = m;
   }, e[13] = B) : B = e[13];
-  const M = d === c || void 0;
-  let m;
-  e[14] !== o || e[15] !== c || e[16] !== p ? (m = (g) => {
-    g.preventDefault(), p(c), Q.focus(o);
-  }, e[14] = o, e[15] = c, e[16] = p, e[17] = m) : m = e[17];
-  let i;
-  e[18] !== d || e[19] !== c || e[20] !== p ? (i = () => {
-    d !== c && p(c);
-  }, e[18] = d, e[19] = c, e[20] = p, e[21] = i) : i = e[21];
+  const L = d === o || void 0;
+  let x;
+  e[14] !== l || e[15] !== o || e[16] !== h ? (x = (m) => {
+    m.preventDefault(), h(o), Y.focus(l);
+  }, e[14] = l, e[15] = o, e[16] = h, e[17] = x) : x = e[17];
+  let c;
+  e[18] !== d || e[19] !== o || e[20] !== h ? (c = () => {
+    d !== o && h(o);
+  }, e[18] = d, e[19] = o, e[20] = h, e[21] = c) : c = e[21];
   let K;
-  e[22] !== l || e[23] !== M || e[24] !== m || e[25] !== i ? (K = /* @__PURE__ */ x(He, { ref: B, "data-focus": M, onPointerDown: m, onPointerMove: i, children: l }), e[22] = l, e[23] = M, e[24] = m, e[25] = i, e[26] = K) : K = e[26];
-  let R;
-  e[27] !== r || e[28] !== c ? (R = /* @__PURE__ */ x(de.Provider, { value: c, children: r }), e[27] = r, e[28] = c, e[29] = R) : R = e[29];
+  e[22] !== i || e[23] !== L || e[24] !== x || e[25] !== c ? (K = /* @__PURE__ */ v(Je, { ref: B, "data-focus": L, onPointerDown: x, onPointerMove: c, children: i }), e[22] = i, e[23] = L, e[24] = x, e[25] = c, e[26] = K) : K = e[26];
+  let P;
+  e[27] !== r || e[28] !== o ? (P = /* @__PURE__ */ v(me.Provider, { value: o, children: r }), e[27] = r, e[28] = o, e[29] = P) : P = e[29];
   let $;
-  e[30] !== _ || e[31] !== R ? ($ = /* @__PURE__ */ x(We, { color: "primary", ..._, children: R }), e[30] = _, e[31] = R, e[32] = $) : $ = e[32];
+  e[30] !== y || e[31] !== P ? ($ = /* @__PURE__ */ v(qe, { color: "primary", ...y, children: P }), e[30] = y, e[31] = P, e[32] = $) : $ = e[32];
   let U;
-  return e[33] !== K || e[34] !== $ || e[35] !== j || e[36] !== k ? (U = /* @__PURE__ */ ke(qe, { open: j, onOpenChange: k, children: [
+  return e[33] !== K || e[34] !== $ || e[35] !== F || e[36] !== E ? (U = /* @__PURE__ */ Re(Qe, { open: F, onOpenChange: E, children: [
     K,
     $
-  ] }), e[33] = K, e[34] = $, e[35] = j, e[36] = k, e[37] = U) : U = e[37], U;
+  ] }), e[33] = K, e[34] = $, e[35] = F, e[36] = E, e[37] = U) : U = e[37], U;
 };
-function Je(n) {
+function Ye(n) {
   return n.void;
 }
-function Qe(n) {
+function Ze(n) {
   return n.preventDefault();
 }
-function Xe(n) {
+function et(n) {
   return n.stopPropagation();
 }
-function Ye(n) {
+function tt(n) {
   return n.preventDefault();
 }
-function Ze() {
+function nt() {
 }
-function et() {
+function rt() {
 }
-function tt(n) {
+function ot(n) {
   return n.preventDefault();
 }
-function nt(n) {
+function st(n) {
   return n.preventDefault();
 }
-function rt(n) {
+function it(n) {
   return n.preventDefault();
 }
 export {
-  mt as EditorInput,
-  It as EditorInputMenu,
-  yt as EditorInputMenuItem,
-  Ct as EditorInputSubMenu,
-  vt as EditorInputTrigger,
-  xt as EditorInputValue
+  It as EditorInput,
+  bt as EditorInputMenu,
+  wt as EditorInputMenuItem,
+  Tt as EditorInputSubMenu,
+  Ct as EditorInputTrigger,
+  yt as EditorInputValue
 };

package/dist/components/form/TagInput.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-import { EditorInputMenuProps, EditorInputSubMenuProps, EditorInputTriggerProps, EditorInputValueProps, EditorInputMenuItemProps } from './EditorInput';
+import { EditorInputMenuProps, EditorInputSubMenuProps, EditorInputTriggerProps, EditorInputValueProps, EditorTokenRule, EditorInputMenuItemProps } from './EditorInput';
 import { InputWrapperProps } from './InputWrapper';
 import { ValidationProps } from './useForm';
 export interface TagValue {
@@ -14,7 +14,14 @@ export interface TagSuggestion {
 export interface TagInputProps extends Omit<InputWrapperProps, "onChange">, ValidationProps<any> {
     allowCustomValues?: boolean;
     onChange?: (tags: TagValue[]) => void;
-    tagColor?: string;
+    /**
+     * Defines how a tag is rendered as a chip inside the input. Each rule's
+     * `pattern` is matched against the tag's value; the first match decides the
+     * chip via its `wrap`/`style`/`className`. Tags with no matching rule fall
+     * back to a plain badge. The chip rendering is token-defined only — a menu
+     * item's `children` is never reused here.
+     */
+    tokenRules?: EditorTokenRule[];
     children?: React.ReactNode;
 }
 export type TagInputTriggerProps = EditorInputTriggerProps;

package/dist/components/form/TagInput.js

@@ -1,117 +1,124 @@
-import { jsx as l, Fragment as b } from "react/jsx-runtime";
+import { jsx as l } from "react/jsx-runtime";
 import { c as I } from "../../_virtual/compiler-runtime.js";
-import K, { useState as N, useRef as V, useReducer as j, useCallback as A, useEffect as _, useMemo as B, useContext as F } from "react";
-import { EditorInput as L, EditorInputMenu as U, EditorInputMenuItem as q, EditorInputSubMenu as z, EditorInputTrigger as G, EditorInputValue as H } from "./EditorInput.js";
+import b, { useState as K, useRef as k, useReducer as j, useCallback as A, useEffect as v, useMemo as B, useContext as L } from "react";
+import { EditorInput as U, EditorInputMenu as q, EditorInputMenuItem as z, EditorInputSubMenu as F, EditorInputTrigger as G, EditorInputValue as H } from "./EditorInput.js";
 import { Badge as J } from "../badge/Badge.js";
-import { Text as Q } from "../text/Text.js";
-const h = "⟦", d = "⟧", k = new RegExp(`${h}([^${d}]+)${d}`, "g"), W = new RegExp(`(${h}[^${d}]+${d})|([^${h}${d}]+)`, "g"), w = (e) => `${h}${String(e)}${d}`, X = (e) => e.slice(h.length, -d.length), R = (e) => e.map((t) => w(t.value)).join(""), Y = (e) => e.replace(k, "").trim(), Z = (e, t) => {
+import { Text as $ } from "../text/Text.js";
+const E = "⟦", d = "⟧", R = new RegExp(`${E}([^${d}]+)${d}`, "g"), Q = new RegExp(`(${E}[^${d}]+${d})|([^${E}${d}]+)`, "g"), V = (t) => `${E}${String(t)}${d}`, W = (t) => t.slice(E.length, -d.length), y = (t) => t.map((e) => V(e.value)).join(""), X = (t) => t.replace(R, "").trim(), Y = (t, e) => {
   let n = !1;
-  const r = e.replace(W, (s, o, c) => o || (!n && c.trim() ? (n = !0, t) : ""));
-  return n ? r : r + t;
-}, v = K.createContext(null), y = () => {
-  const e = F(v);
-  if (!e)
+  const r = t.replace(Q, (a, o, c) => o || (!n && c.trim() ? (n = !0, e) : ""));
+  return n ? r : r + e;
+}, _ = b.createContext(null), D = () => {
+  const t = L(_);
+  if (!t)
     throw new Error("TagInput.* components must be used inside <TagInput>");
-  return e;
-}, ct = (e) => {
+  return t;
+}, se = (t) => {
   const {
-    allowCustomValues: t = !1,
+    allowCustomValues: e = !1,
     onChange: n,
     formValidation: r,
-    tagColor: s = "primary",
+    tokenRules: a,
     value: o,
     initialValue: c,
-    defaultValue: f,
-    children: p,
-    ...g
-  } = e, u = o ?? c ?? f, [i, M] = N(() => R(u ?? [])), E = V(/* @__PURE__ */ new Map()), [, D] = j((a) => a + 1, 0), O = A((a, m) => {
-    E.current.set(a, m), D();
-  }, []), $ = V(u), S = (a) => {
-    const m = [...a.matchAll(k)].map(([, T]) => {
-      const C = E.current.get(T);
+    defaultValue: T,
+    children: h,
+    ...p
+  } = t, i = o ?? c ?? T, [g, C] = K(() => y(i ?? [])), M = k(/* @__PURE__ */ new Map()), [, N] = j((u) => u + 1, 0), O = A((u, s) => {
+    M.current.set(u, s), N();
+  }, []), x = k(i), S = (u) => {
+    const s = [...u.matchAll(R)].map(([, m]) => {
+      const f = M.current.get(m);
       return {
-        value: C ? C.value : T,
-        valueData: C?.data
+        value: f ? f.value : m,
+        valueData: f?.data
       };
     });
-    $.current = m, M(a), r?.setValue?.(m), n?.(m);
+    x.current = s, C(u), r?.setValue?.(s), n?.(s);
   };
-  _(() => {
-    u !== $.current && ($.current = u, M(R(u ?? [])));
-  }, [u]);
+  v(() => {
+    i !== x.current && (x.current = i, C(y(i ?? [])));
+  }, [i]);
   const P = B(() => [{
-    pattern: k,
+    pattern: R,
     void: !0,
-    wrap: (a) => {
-      const m = X(a), T = E.current.get(m);
-      return T ? /* @__PURE__ */ l(b, { children: T.children }) : /* @__PURE__ */ l(J, { m: 0.01, color: s, children: /* @__PURE__ */ l(Q, { children: m }) });
+    // The chip (input rendering) is defined by the token alone — the menu
+    // item's `children` is menu-only and must NOT be reused here. The tag's
+    // value is matched against the consumer's `tokenRules` to pick the chip.
+    wrap: (u) => {
+      const s = W(u), m = a?.find((f) => new RegExp(f.pattern.source, f.pattern.flags.replace("g", "")).test(s));
+      if (m?.wrap) {
+        const f = new RegExp(m.pattern.source, m.pattern.flags.replace("g", "")).exec(s);
+        return m.wrap(s, /* @__PURE__ */ l($, { children: s }), f ?? [s]);
+      }
+      return m ? /* @__PURE__ */ l("span", { style: m.style, className: m.className, children: /* @__PURE__ */ l($, { children: s }) }) : /* @__PURE__ */ l(J, { m: 0.01, children: /* @__PURE__ */ l($, { children: s }) });
     }
-  }], [s]), x = {
-    search: Y(i),
-    allowCustomValues: t,
-    insertToken: (a) => S(Z(i, a)),
+  }], [a]), w = {
+    search: X(g),
+    allowCustomValues: e,
+    insertToken: (u) => S(Y(g, u)),
     registerTag: O
   };
-  return /* @__PURE__ */ l(v.Provider, { value: x, children: /* @__PURE__ */ l(L, { ...g, value: i, search: x.search, tokenRules: P, formValidation: r && {
+  return /* @__PURE__ */ l(_.Provider, { value: w, children: /* @__PURE__ */ l(U, { ...p, value: g, search: w.search, tokenRules: P, formValidation: r && {
     valid: r.valid,
     notValidMessage: r.notValidMessage
-  }, onChange: S, onSelect: (a) => x.insertToken(String(a)), children: p }) });
-}, at = (e) => {
-  const t = I.c(2);
+  }, onChange: S, onSelect: (u) => w.insertToken(String(u)), children: h }) });
+}, ae = (t) => {
+  const e = I.c(2);
   let n;
-  return t[0] !== e ? (n = /* @__PURE__ */ l(U, { ...e }), t[0] = e, t[1] = n) : n = t[1], n;
-}, ut = (e) => {
-  const t = I.c(2);
+  return e[0] !== t ? (n = /* @__PURE__ */ l(q, { ...t }), e[0] = t, e[1] = n) : n = e[1], n;
+}, ce = (t) => {
+  const e = I.c(2);
   let n;
-  return t[0] !== e ? (n = /* @__PURE__ */ l(z, { ...e }), t[0] = e, t[1] = n) : n = t[1], n;
-}, it = ({
-  value: e,
-  data: t,
+  return e[0] !== t ? (n = /* @__PURE__ */ l(F, { ...t }), e[0] = t, e[1] = n) : n = e[1], n;
+}, ue = ({
+  value: t,
+  data: e,
   onlyOnce: n,
   aliases: r,
-  children: s
+  children: a
 }) => {
   const {
     registerTag: o
-  } = y(), c = V({
-    value: e,
-    data: t,
-    children: s
+  } = D(), c = k({
+    value: t,
+    data: e,
+    children: a
   });
-  return c.current.value = e, c.current.data = t, c.current.children = s, _(() => o(String(e), c.current), [e, o]), /* @__PURE__ */ l(q, { value: w(e), data: t, onlyOnce: n, aliases: [String(e), ...r ?? []], children: s });
-}, lt = (e) => {
-  const t = I.c(14);
+  return c.current.value = t, c.current.data = e, c.current.children = a, v(() => o(String(t), c.current), [t, o]), /* @__PURE__ */ l(z, { value: V(t), data: e, onlyOnce: n, aliases: [String(t), ...r ?? []], children: a });
+}, le = (t) => {
+  const e = I.c(14);
   let n, r;
-  t[0] !== e ? ({
+  e[0] !== t ? ({
     onKeyDown: n,
     ...r
-  } = e, t[0] = e, t[1] = n, t[2] = r) : (n = t[1], r = t[2]);
+  } = t, e[0] = t, e[1] = n, e[2] = r) : (n = e[1], r = e[2]);
   const {
-    search: s,
+    search: a,
     allowCustomValues: o,
     insertToken: c
-  } = y();
-  let f;
-  t[3] !== o || t[4] !== c || t[5] !== s ? (f = () => {
-    o && s && c(w(s));
-  }, t[3] = o, t[4] = c, t[5] = s, t[6] = f) : f = t[6];
-  const p = f;
-  let g;
-  t[7] !== o || t[8] !== p || t[9] !== n ? (g = (i) => {
-    (i.key === "Enter" && !i.defaultPrevented || i.key === "," && o) && (i.preventDefault(), p()), n?.(i);
-  }, t[7] = o, t[8] = p, t[9] = n, t[10] = g) : g = t[10];
-  let u;
-  return t[11] !== r || t[12] !== g ? (u = /* @__PURE__ */ l(H, { ...r, onKeyDown: g }), t[11] = r, t[12] = g, t[13] = u) : u = t[13], u;
-}, gt = (e) => {
-  const t = I.c(2);
+  } = D();
+  let T;
+  e[3] !== o || e[4] !== c || e[5] !== a ? (T = () => {
+    o && a && c(V(a));
+  }, e[3] = o, e[4] = c, e[5] = a, e[6] = T) : T = e[6];
+  const h = T;
+  let p;
+  e[7] !== o || e[8] !== h || e[9] !== n ? (p = (g) => {
+    (g.key === "Enter" && !g.defaultPrevented || g.key === "," && o) && (g.preventDefault(), h()), n?.(g);
+  }, e[7] = o, e[8] = h, e[9] = n, e[10] = p) : p = e[10];
+  let i;
+  return e[11] !== r || e[12] !== p ? (i = /* @__PURE__ */ l(H, { ...r, onKeyDown: p }), e[11] = r, e[12] = p, e[13] = i) : i = e[13], i;
+}, ie = (t) => {
+  const e = I.c(2);
   let n;
-  return t[0] !== e ? (n = /* @__PURE__ */ l(G, { ...e }), t[0] = e, t[1] = n) : n = t[1], n;
+  return e[0] !== t ? (n = /* @__PURE__ */ l(G, { ...t }), e[0] = t, e[1] = n) : n = e[1], n;
 };
 export {
-  ct as TagInput,
-  at as TagInputMenu,
-  it as TagInputMenuItem,
-  ut as TagInputSubMenu,
-  gt as TagInputTrigger,
-  lt as TagInputValue
+  se as TagInput,
+  ae as TagInputMenu,
+  ue as TagInputMenuItem,
+  ce as TagInputSubMenu,
+  ie as TagInputTrigger,
+  le as TagInputValue
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@code0-tech/pictor",
-  "version": "0.17.0",
+  "version": "0.17.1",
   "type": "module",
   "description": "A simple template for a custom React component library",
   "scripts": {