themelia-react-ui 2.0.4 → 2.0.6

package/dist/{mentions-RKOQaaIB.js → mentions-qOnedSt4.js}

@@ -1,36 +1,38 @@
 "use client";
 import { useStrings as e } from "./lib/strings.js";
-import { t } from "./utils-CF3c95Io.js";
-import { n } from "./buttons-BbfzgczK.js";
-import { c as r, o as i, t as a } from "./typography-CSyJrh28.js";
+import { t } from "./utils-DhuoqFy4.js";
+import { n } from "./buttons-DeW0bQeK.js";
+import { c as r, o as i, t as a } from "./typography-C7-YMW1S.js";
 import { t as o } from "./focus-recipes-B653VaLq.js";
-import { t as s } from "./structure-C0V0_Fyf.js";
-import { a as c } from "./surface-recipes-BKRVW8Os.js";
-import { i as l, n as u, r as d, t as f } from "./popover.recipes-D3j8R8Yp.js";
-import { t as p } from "./interaction-recipes-XR9ZpVYL.js";
-import { t as m } from "./sanitize-html-DsQmI48u.js";
+import { t as s } from "./structure-DZJ2wbAU.js";
+import { a as c } from "./surface-recipes-C8mNycaY.js";
+import { i as l, n as u, r as d, t as f } from "./popover.recipes-DJ0AkUan.js";
+import { t as p } from "./interaction-recipes-4wZ2tvfb.js";
+import { n as m } from "./sanitize-html-BWkH4dLM.js";
 import { t as h } from "./content-typography-CnwgMJ37.js";
-import { t as g } from "./badge-DErMA7ul.js";
-import { a as _, i as v, n as y, o as b, r as x, t as S } from "./command-D8NrBj-b.js";
-import { i as C, t as w } from "./popover-uwzX2vo7.js";
-import { t as T } from "./use-debounced-callback-Cx1h-hdv.js";
-import { Fragment as E, useCallback as D, useEffect as O, useMemo as k, useRef as A, useState as j } from "react";
-import { Fragment as M, jsx as N, jsxs as P } from "react/jsx-runtime";
-import { Loader2 as F } from "lucide-react";
+import { t as g } from "./rich-text-tree-BqyQ_7-R.js";
+import { t as _ } from "./badge-wWauMgAt.js";
+import { a as v, i as y, n as b, o as x, r as S, t as C } from "./command-9e52NPgK.js";
+import { i as w, t as T } from "./popover-k8TdUcAt.js";
+import { t as E } from "./use-debounced-callback-Cx1h-hdv.js";
+import { useCallback as D, useEffect as O, useId as k, useMemo as A, useRef as j, useState as M } from "react";
+import { Fragment as N, jsx as P, jsxs as F } from "react/jsx-runtime";
+import { Loader2 as I } from "lucide-react";
+import { fromHtml as L } from "hast-util-from-html";
 //#region src/components/features/mentions/hooks/use-mentions-search.ts
-function I(e) {
+function R(e) {
 	return !!(e && e.name === "AbortError");
 }
-function L(e = {}) {
-	let { resources: t, onResourceSearch: n, initialMentions: r, debounceMs: i = 300, onError: a } = e, o = JSON.stringify(Object.keys(t ?? {})), s = k(() => JSON.parse(o), [o]), [c, l] = j(() => s[0] ?? null), [u, d] = j(!1), [f, p] = j(""), [m, h] = j({}), [g, _] = j(!1), [v, y] = j(null), [b, x] = j({}), [S, C] = j(0), [w, E] = j(() => r ? [...r] : []), M = A(0), N = A(null), P = A(t), F = A(n), L = A(a);
-	P.current = t, F.current = n, L.current = a, O(() => {
+function z(e = {}) {
+	let { resources: t, onResourceSearch: n, initialMentions: r, debounceMs: i = 300, onError: a } = e, o = JSON.stringify(Object.keys(t ?? {})), s = A(() => JSON.parse(o), [o]), [c, l] = M(() => s[0] ?? null), [u, d] = M(!1), [f, p] = M(""), [m, h] = M({}), [g, _] = M(!1), [v, y] = M(null), [b, x] = M({}), [S, C] = M(0), [w, T] = M(() => r ? [...r] : []), k = j(0), N = j(null), P = j(t), F = j(n), I = j(a);
+	P.current = t, F.current = n, I.current = a, O(() => {
 		if (s.length === 0) {
 			l(null);
 			return;
 		}
 		(!c || !s.includes(c)) && l(s[0]);
 	}, [c, s]);
-	let R = k(() => c && t ? t[c] ?? null : null, [c, t]), z = D(async (e, t, n) => {
+	let L = A(() => c && t ? t[c] ?? null : null, [c, t]), z = D(async (e, t, n) => {
 		let r = P.current?.[e];
 		if (r?.search) return (await r.search(t, {
 			kind: e,
@@ -53,9 +55,8 @@ function L(e = {}) {
 			...t,
 			kind: e
 		})) : [];
-	}, []), B = T((e, t, n, r) => {
+	}, []), B = E((e, t, n, r) => {
 		(async () => {
-			_(!0);
 			try {
 				let i = await Promise.all(e.map(async (e) => {
 					try {
@@ -72,15 +73,15 @@ function L(e = {}) {
 						};
 					}
 				}));
-				if (n !== M.current || r.aborted) return;
+				if (n !== k.current || r.aborted) return;
 				let a = {}, o = {}, s = null;
-				for (let e of i) a[e.kind] = e.list, e.error !== null && !I(e.error) && (o[e.kind] = e.error, s ??= e.error, L.current?.(e.error, {
+				for (let e of i) a[e.kind] = e.list, e.error !== null && !R(e.error) && (o[e.kind] = e.error, s ??= e.error, I.current?.(e.error, {
 					query: t,
 					kind: e.kind
 				}));
 				h(a), x(o), y(s);
 			} finally {
-				n === M.current && !r.aborted && _(!1);
+				n === k.current && !r.aborted && _(!1);
 			}
 		})();
 	}, i);
@@ -91,8 +92,8 @@ function L(e = {}) {
 			e.abort(), N.current === e && (N.current = null);
 		};
 		if (s.length === 0) return h({}), _(!1), y(null), x({}), t;
-		let n = ++M.current;
-		return y(null), x({}), B(s, f, n, e.signal), () => {
+		let n = ++k.current;
+		return _(!0), y(null), x({}), B(s, f, n, e.signal), () => {
 			B.cancel(), t();
 		};
 	}, [
@@ -119,13 +120,13 @@ function L(e = {}) {
 	}, []), U = D((e) => {
 		p(e);
 	}, []), W = D((e) => {
-		E((t) => t.some((t) => t.id === e.id) ? t : [...t, e]);
+		T((t) => t.some((t) => t.id === e.id) ? t : [...t, e]);
 	}, []), G = D((e) => {
-		E((t) => t.filter((t) => t.id !== e));
+		T((t) => t.filter((t) => t.id !== e));
 	}, []), K = D((e) => {
-		E([...e]);
+		T([...e]);
 	}, []), q = D(() => {
-		N.current?.abort(), E([]), p(""), d(!1), h({}), _(!1), y(null), x({}), M.current++;
+		N.current?.abort(), T([]), p(""), d(!1), h({}), _(!1), y(null), x({}), k.current++;
 	}, []), J = D((e) => {
 		let n = e.kind ?? c, r = `${n}:${e.id}`, i = t?.[n], a = e.href ?? i?.buildHref?.(e), o = {
 			id: r,
@@ -144,10 +145,10 @@ function L(e = {}) {
 		kinds: s,
 		activeKind: c,
 		setActiveKind: H,
-		activeResource: R,
+		activeResource: L,
 		query: f,
 		setQuery: U,
-		suggestions: k(() => c ? m[c] ?? [] : [], [c, m]),
+		suggestions: A(() => c ? m[c] ?? [] : [], [c, m]),
 		suggestionsByKind: m,
 		isLoading: g,
 		error: v,
@@ -166,20 +167,20 @@ function L(e = {}) {
 }
 //#endregion
 //#region src/components/features/mentions/utils/build-mention-html.ts
-function R(e, t) {
+function B(e, t) {
 	let n = String(e.label ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;"), r = String(e.id).replace(/"/g, "&quot;"), i = String(e.kind).replace(/"/g, "&quot;"), a = t?.tone ? String(t.tone).replace(/"/g, "&quot;") : "", o = t?.triggerChar ?? (e.kind === "user" ? "@" : "");
 	return `<span class="rsc-mention" data-ref-id="${r}" data-ref-kind="${i}"${a ? ` data-ref-tone="${a}"` : ""} contenteditable="false">${o}${n}</span>&nbsp;`;
 }
 //#endregion
 //#region src/components/features/mentions/hooks/use-mentions.ts
-function z(e = {}) {
-	let t = e.resources, n = e.onResourceSearch, r = L({
+function V(e = {}) {
+	let t = e.resources, n = e.onResourceSearch, r = z({
 		...e,
 		resources: t,
 		onResourceSearch: n
-	}), [i, a] = j(!1), [o, s] = j(!1), c = A(null), l = A(null), u = D((e) => {
-		a(e), e || (c.current = null, l.current = null, s(!1), r.setManualKindOverride(!1));
-	}, [r]), d = e.editorRef, f = D(() => {
+	}), [i, a] = M(!1), [o, s] = M(!1), c = k(), [l, u] = M(null), d = j(null), f = j(null), p = j(null), m = D((e) => {
+		a(e), e || (d.current = null, p.current = null, s(!1), u(null), r.setManualKindOverride(!1));
+	}, [r]), h = e.editorRef, g = D(() => {
 		if (!t) return;
 		let e = {};
 		for (let [n, r] of Object.entries(t)) {
@@ -187,60 +188,106 @@ function z(e = {}) {
 			typeof t == "string" && t.length > 0 && (e[t] = n);
 		}
 		if (Object.keys(e).length === 0) return;
-		let n = d?.current?.getCaretContext();
-		if (!n) {
-			c.current && (c.current = null, u(!1));
+		let n = h?.current?.getCaretContext();
+		if (n && f.current === n.textBefore) return;
+		if (f.current = null, !n) {
+			d.current && (d.current = null, m(!1));
 			return;
 		}
-		let i = Object.keys(e).map((e) => e.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")).join(""), o = RegExp(`(?:^|\\s)([${i}])([\\p{L}\\p{N}_-]*)$`, "u"), f = n.textBefore.match(o);
-		if (!f) {
-			c.current && (c.current = null, u(!1));
+		let i = Object.keys(e).map((e) => e.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")).join(""), o = RegExp(`(?:^|\\s)([${i}])([\\p{L}\\p{N}_-]*)$`, "u"), c = n.textBefore.match(o);
+		if (!c) {
+			d.current && (d.current = null, m(!1));
 			return;
 		}
-		let p = f[1], m = f[2] ?? "", h = e[p], g = p.length + m.length;
-		c.current = {
-			kind: h,
-			triggerChar: p,
-			consumedLength: g
-		}, s(!0), l.current !== p && (r.activeKind !== h && r.setActiveKind(h), r.setManualKindOverride(!1), l.current = p), r.query !== m && r.setQuery(m), a(!0);
+		let l = c[1], u = c[2] ?? "", g = e[l], _ = l.length + u.length;
+		d.current = {
+			kind: g,
+			triggerChar: l,
+			consumedLength: _
+		}, s(!0), p.current !== l && (r.activeKind !== g && r.setActiveKind(g), r.setManualKindOverride(!1), p.current = l), r.query !== u && r.setQuery(u), a(!0);
 	}, [
-		d,
+		h,
 		t,
 		r,
-		u
-	]), p = D((e) => {
-		let n = r.selectSuggestion(e), i = c.current, a = t?.[n.kind]?.tone, o = R(n, {
+		m
+	]), _ = D((e) => {
+		let n = r.selectSuggestion(e), i = d.current, a = t?.[n.kind]?.tone, o = B(n, {
 			triggerChar: i?.triggerChar,
 			tone: a
 		});
-		return i && i.consumedLength > 0 && d?.current ? (d.current.replaceBeforeCaret(i.consumedLength, o), c.current = null) : d?.current && d.current.insertHTML(o), u(!1), n;
+		return i && i.consumedLength > 0 && h?.current ? (h.current.replaceBeforeCaret(i.consumedLength, o), d.current = null) : h?.current && h.current.insertHTML(o), m(!1), n;
 	}, [
-		d,
+		h,
 		t,
 		r,
-		u
+		m
+	]), v = i && o, y = v && !r.isLoading && l && l.query === r.query && l.kind === r.activeKind ? r.suggestions.findIndex((e) => e.id === l.id) : -1, b = v && !r.isLoading && r.suggestions.length > 0 ? {
+		listboxId: c,
+		activeOptionId: y < 0 ? void 0 : `${c}-option-${y}`
+	} : void 0, x = D(() => {
+		f.current = h?.current?.getCaretContext()?.textBefore ?? null, m(!1);
+	}, [h, m]), S = D((e) => {
+		if (!v || e.defaultPrevented || e.isComposing || e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) return !1;
+		if (e.key === "Escape") x();
+		else if (!r.isLoading && r.suggestions.length > 0 && (e.key === "ArrowDown" || e.key === "ArrowUp")) {
+			let t = r.suggestions.length, n = e.key === "ArrowDown" ? (y + 1) % t : y <= 0 ? t - 1 : y - 1, i = r.suggestions[n];
+			if (!i) return !1;
+			u({
+				id: i.id,
+				query: r.query,
+				kind: r.activeKind
+			});
+		} else if ((e.key === "Enter" || e.key === "Tab") && y >= 0) {
+			let e = r.suggestions[y];
+			if (!e) return !1;
+			_(e);
+		} else return !1;
+		return e.preventDefault(), e.stopPropagation(), !0;
+	}, [
+		y,
+		x,
+		v,
+		_,
+		r.activeKind,
+		r.isLoading,
+		r.query,
+		r.suggestions
+	]), C = D((e) => {
+		if (!v) return;
+		let t = e.relatedTarget, n = e.currentTarget.ownerDocument.getElementById(`${c}-panel`);
+		t instanceof Element && e.currentTarget.contains(t) && (t.closest("[contenteditable=\"true\"]") || n?.contains(t)) || x();
+	}, [
+		x,
+		v,
+		c
 	]);
 	return {
 		...r,
 		pickerOpen: i,
-		setPickerOpen: u,
+		setPickerOpen: m,
 		triggerActive: o,
-		handleCaretChange: f,
-		pickSuggestion: p
+		handleCaretChange: g,
+		inlineOpen: v,
+		listboxId: c,
+		activeIndex: y,
+		suggestionPopup: b,
+		handleKeyDown: S,
+		handleBlur: C,
+		pickSuggestion: _
 	};
 }
 //#endregion
 //#region src/components/features/mentions/partials/mention-chip.tsx
-var B = {
+var H = {
 	primary: "secondary",
 	success: "success",
 	warning: "warning",
 	destructive: "destructive",
 	info: "info",
 	secondary: "secondary"
-}, V = ({ mention: e, resource: n, asLink: i = !0, onClick: o, trailing: s, className: c }) => {
-	if (n?.renderChip) return /* @__PURE__ */ N(M, { children: n.renderChip(e) });
-	let l = B[n?.tone ?? "secondary"] ?? B.secondary, u = n?.icon, d = /* @__PURE__ */ P(g, {
+}, U = ({ mention: e, resource: n, asLink: i = !0, onClick: o, trailing: s, className: c }) => {
+	if (n?.renderChip) return /* @__PURE__ */ P(N, { children: n.renderChip(e) });
+	let l = H[n?.tone ?? "secondary"] ?? H.secondary, u = n?.icon, d = /* @__PURE__ */ F(_, {
 		tone: l,
 		size: "sm",
 		inline: !0,
@@ -248,11 +295,11 @@ var B = {
 		"data-ref-kind": e.kind,
 		className: t("mention-chip--component", "align-[-0.15em] cursor-default whitespace-nowrap", c),
 		children: [
-			u ? /* @__PURE__ */ N(u, {
+			u ? /* @__PURE__ */ P(u, {
 				className: "size-icon-sm shrink-0",
 				"aria-hidden": !0
 			}) : null,
-			/* @__PURE__ */ N(r, {
+			/* @__PURE__ */ P(r, {
 				tag: "span",
 				size: "inherit",
 				weight: "medium",
@@ -263,7 +310,7 @@ var B = {
 			s
 		]
 	});
-	return i && e.href ? /* @__PURE__ */ N(a, {
+	return i && e.href ? /* @__PURE__ */ P(a, {
 		href: e.href,
 		size: "inherit",
 		underline: !1,
@@ -272,69 +319,41 @@ var B = {
 		onClick: o,
 		className: "inline align-baseline no-underline",
 		children: d
-	}) : o ? /* @__PURE__ */ N("span", {
+	}) : o ? /* @__PURE__ */ P("span", {
 		onClick: o,
 		className: "inline align-baseline",
 		children: d
 	}) : d;
-}, H = /<(span|a)\b([^>]*?)data-ref-id\s*=\s*"([^"]+)"([^>]*)>([\s\S]*?)<\/\1>/gi;
-function U(e) {
-	if (!e) return [];
-	let t = [], n = 0, r;
-	for (H.lastIndex = 0; (r = H.exec(e)) !== null;) {
-		let [i, , , a] = r, o = e.slice(n, r.index);
-		o.length > 0 && t.push({
-			kind: "html",
-			value: o
-		}), t.push({
-			kind: "mention",
-			refId: a,
-			fallback: i
-		}), n = r.index + i.length;
-	}
-	let i = e.slice(n);
-	return i.length > 0 && t.push({
-		kind: "html",
-		value: i
-	}), t;
-}
-//#endregion
-//#region src/components/features/mentions/partials/mention-content.tsx
-var W = h;
+}, W = h;
 function G(e) {
-	let { html: n, mentions: i, resources: a, renderMention: o, sanitizer: s, className: c, prose: l = !0 } = e, u = a, d = s ? s(n ?? "") : m(n ?? ""), f = /* @__PURE__ */ new Map();
+	let { html: n, mentions: i, resources: a, renderMention: o, sanitizer: s, className: c, prose: l = !0 } = e, u = a, d = s ? L(s(n ?? ""), { fragment: !0 }) : m(n ?? ""), f = /* @__PURE__ */ new Map();
 	for (let e of i ?? []) f.set(e.id, e);
-	let p = f.size > 0 ? U(d) : [{
-		kind: "html",
-		value: d
-	}], h = (e) => {
+	let p = (e) => {
 		if (o) return o(e);
 		let t = u?.[e.kind];
-		return /* @__PURE__ */ N(V, {
+		return /* @__PURE__ */ P(U, {
 			mention: e,
 			resource: t
 		});
-	}, g = p.map((e, t) => {
-		if (e.kind === "mention") {
-			let n = f.get(e.refId);
-			return n ? /* @__PURE__ */ N(E, { children: h(n) }, `ref-${t}-${e.refId}`) : /* @__PURE__ */ N("span", { dangerouslySetInnerHTML: { __html: e.fallback } }, `fallback-${t}`);
-		}
-		return /* @__PURE__ */ N("span", { dangerouslySetInnerHTML: { __html: e.value } }, `html-${t}`);
+	}, h = g(d, void 0, (e) => {
+		if (e.tagName !== "span" && e.tagName !== "a") return;
+		let t = e.properties.dataRefId, n = typeof t == "string" ? f.get(t) : void 0;
+		return n ? /* @__PURE__ */ P(N, { children: p(n) }) : void 0;
 	});
-	return l ? /* @__PURE__ */ N(r, {
+	return l ? /* @__PURE__ */ P(r, {
 		tag: "div",
 		className: t("mention-content--component", W, c),
-		children: g
-	}) : /* @__PURE__ */ N(M, { children: g });
+		children: h
+	}) : /* @__PURE__ */ P(N, { children: h });
 }
 //#endregion
 //#region src/components/features/mentions/partials/mention-kind-toggles.tsx
 function K({ kinds: e, activeKind: t, resources: i, counts: a, onKindChange: o }) {
-	return /* @__PURE__ */ N("div", {
+	return /* @__PURE__ */ P("div", {
 		className: "mention-kind-toggles--component flex flex-wrap gap-space-xs",
 		children: e.map((e) => {
 			let s = i?.[e], c = s?.icon, l = e === t, u = a?.[e]?.length ?? 0;
-			return /* @__PURE__ */ P(n, {
+			return /* @__PURE__ */ F(n, {
 				type: "button",
 				"aria-pressed": l,
 				tone: "secondary",
@@ -343,15 +362,15 @@ function K({ kinds: e, activeKind: t, resources: i, counts: a, onKindChange: o }
 				className: l ? p.togglePressed : p.toggleHoverButton,
 				onClick: () => o(e),
 				children: [
-					c ? /* @__PURE__ */ N(c, { className: "size-icon-sm" }) : null,
-					/* @__PURE__ */ N(r, {
+					c ? /* @__PURE__ */ P(c, { className: "size-icon-sm" }) : null,
+					/* @__PURE__ */ P(r, {
 						tag: "span",
 						size: "inherit",
 						weight: "medium",
 						className: "text-inherit",
 						children: s?.label ?? String(e)
 					}),
-					u > 0 && /* @__PURE__ */ N(r, {
+					u > 0 && /* @__PURE__ */ P(r, {
 						tag: "span",
 						size: "xs",
 						type: "secondary",
@@ -377,61 +396,61 @@ var q = {
 };
 //#endregion
 //#region src/components/features/mentions/partials/mention-picker.tsx
-function Y({ open: n, activeKind: a, setActiveKind: o, kinds: c, resources: u, query: d, setQuery: f, suggestions: p, loading: m, onSelect: h, strings: g, className: T }) {
+function Y({ open: n, activeKind: a, setActiveKind: o, kinds: c, resources: u, query: d, setQuery: f, suggestions: p, loading: m, onSelect: h, strings: g, className: _ }) {
 	let E = e(q, g);
-	return n ? /* @__PURE__ */ P(w, {
+	return n ? /* @__PURE__ */ F(T, {
 		align: "start",
 		inset: "flush",
 		type: "menu",
-		className: t("mention-picker--component", l.md, "gap-0 overflow-hidden", T),
-		children: [/* @__PURE__ */ N(C, { children: /* @__PURE__ */ P(s, {
+		className: t("mention-picker--component", l.md, "gap-0 overflow-hidden", _),
+		children: [/* @__PURE__ */ P(w, { children: /* @__PURE__ */ F(s, {
 			gap: "sm",
-			children: [/* @__PURE__ */ N(i, { children: E.title }), c.length > 1 && /* @__PURE__ */ N(K, {
+			children: [/* @__PURE__ */ P(i, { children: E.title }), c.length > 1 && /* @__PURE__ */ P(K, {
 				kinds: c,
 				activeKind: a,
 				resources: u,
 				onKindChange: o
 			})]
-		}) }), /* @__PURE__ */ P(S, {
+		}) }), /* @__PURE__ */ F(C, {
 			shouldFilter: !1,
 			inset: "flush",
 			className: "rounded-none",
-			children: [/* @__PURE__ */ N(v, {
+			children: [/* @__PURE__ */ P(y, {
 				placeholder: E.searchPlaceholder,
 				value: d,
 				onValueChange: f
-			}), /* @__PURE__ */ P(b, { children: [
-				m ? /* @__PURE__ */ P(s, {
+			}), /* @__PURE__ */ F(x, { children: [
+				m ? /* @__PURE__ */ F(s, {
 					direction: "horizontal",
 					align: "center",
 					gap: "sm",
 					className: "px-row-x py-row-y text-muted-foreground",
-					children: [/* @__PURE__ */ N(F, {
+					children: [/* @__PURE__ */ P(I, {
 						className: "size-icon-sm animate-spin",
 						"aria-hidden": !0
-					}), /* @__PURE__ */ N(r, {
+					}), /* @__PURE__ */ P(r, {
 						tag: "span",
 						size: "xs",
 						type: "secondary",
 						children: E.loading
 					})]
 				}) : null,
-				/* @__PURE__ */ N(y, { children: E.empty }),
-				/* @__PURE__ */ N(x, { children: p.map((e) => {
+				/* @__PURE__ */ P(b, { children: E.empty }),
+				/* @__PURE__ */ P(S, { children: p.map((e) => {
 					let t = e.kind ?? a ?? "";
-					return /* @__PURE__ */ N(_, {
+					return /* @__PURE__ */ P(v, {
 						value: `${t}:${e.id}`,
 						onSelect: () => h(e),
-						children: /* @__PURE__ */ P(s, {
+						children: /* @__PURE__ */ F(s, {
 							gap: "dense",
 							className: "flex min-w-0 flex-1 flex-col leading-tight",
-							children: [/* @__PURE__ */ N(r, {
+							children: [/* @__PURE__ */ P(r, {
 								tag: "span",
 								type: "inherit",
 								weight: "medium",
 								className: "truncate",
 								children: e.label
-							}), e.description ? /* @__PURE__ */ N(r, {
+							}), e.description ? /* @__PURE__ */ P(r, {
 								tag: "span",
 								size: "xs",
 								type: "secondary",
@@ -447,90 +466,104 @@ function Y({ open: n, activeKind: a, setActiveKind: o, kinds: c, resources: u, q
 }
 //#endregion
 //#region src/components/features/mentions/partials/mention-inline-suggestions.tsx
-function X({ open: n, activeKind: a, setActiveKind: m, kinds: h, resources: g, suggestionsByKind: _, suggestions: v, loading: y, query: b, onManualKindChange: x, onSelect: S, strings: C, className: w }) {
-	let T = e(J, C);
-	return n ? /* @__PURE__ */ P("div", {
+function X({ open: n, activeKind: a, setActiveKind: m, kinds: h, resources: g, suggestionsByKind: _, suggestions: v, listboxId: y, activeIndex: b = -1, loading: x, query: S, onManualKindChange: C, onSelect: w, strings: T, className: E }) {
+	let D = e(J, T), k = j(null), A = y && x ? [] : v;
+	return O(() => {
+		k.current?.scrollIntoView?.({ block: "nearest" });
+	}, [
+		b,
+		n,
+		v
+	]), n ? /* @__PURE__ */ F("div", {
+		id: y ? `${y}-panel` : void 0,
 		onMouseDown: (e) => e.preventDefault(),
-		className: t("mention-inline-suggestions--component", d.surface, "absolute left-0 top-full z-50 mt-space-xs max-w-full", l.lg, "overflow-hidden", w),
-		children: [/* @__PURE__ */ N("div", {
+		className: t("mention-inline-suggestions--component", d.surface, "absolute left-0 top-full z-50 mt-space-xs max-w-full", l.lg, "overflow-hidden", E),
+		children: [/* @__PURE__ */ P("div", {
 			className: t("mention-inline-suggestions--header", d.menuRegion, c.anchored.header),
-			children: /* @__PURE__ */ P(s, {
+			children: /* @__PURE__ */ F(s, {
 				gap: "sm",
-				className: "px-row-x",
-				children: [/* @__PURE__ */ P(s, {
+				className: d.menuCopyInset,
+				children: [/* @__PURE__ */ F(s, {
 					direction: "horizontal",
 					align: "baseline",
 					justify: "between",
 					gap: "md",
-					children: [/* @__PURE__ */ N(i, { children: T.title }), b ? /* @__PURE__ */ P(r, {
+					children: [/* @__PURE__ */ P(i, { children: D.title }), S ? /* @__PURE__ */ F(r, {
 						tag: "span",
 						size: "xs",
 						type: "secondary",
 						className: "truncate font-mono",
 						children: [
 							"“",
-							b,
+							S,
 							"”"
 						]
 					}) : null]
-				}), h.length > 1 && /* @__PURE__ */ N(K, {
+				}), h.length > 1 && /* @__PURE__ */ P(K, {
 					kinds: h,
 					activeKind: a,
 					resources: g,
 					counts: _,
 					onKindChange: (e) => {
-						m(e), x?.();
+						m(e), C?.();
 					}
 				})]
 			})
-		}), /* @__PURE__ */ P("div", {
+		}), /* @__PURE__ */ F("div", {
+			id: y,
 			className: t("mention-inline-suggestions--list max-h-72 overflow-y-auto", d.menu),
-			...v.length > 0 ? {
+			...A.length > 0 ? {
 				role: "listbox",
-				"aria-label": T.title
+				"aria-label": D.title
 			} : {},
 			children: [
-				y ? /* @__PURE__ */ P(s, {
+				x ? /* @__PURE__ */ F(s, {
 					direction: "horizontal",
 					align: "center",
 					gap: "sm",
 					className: "px-row-x py-row-y text-muted-foreground",
-					children: [/* @__PURE__ */ N(F, {
+					children: [/* @__PURE__ */ P(I, {
 						className: "size-icon-sm animate-spin",
 						"aria-hidden": !0
-					}), /* @__PURE__ */ N(r, {
+					}), /* @__PURE__ */ P(r, {
 						tag: "span",
 						size: "xs",
 						type: "secondary",
-						children: T.loading
+						role: "status",
+						children: D.loading
 					})]
 				}) : null,
-				!y && v.length === 0 ? /* @__PURE__ */ N(r, {
+				!x && v.length === 0 ? /* @__PURE__ */ P(r, {
 					tag: "div",
 					size: "xs",
 					type: "secondary",
 					className: "px-row-x py-row-y",
-					children: T.empty
+					role: "status",
+					children: D.empty
 				}) : null,
-				v.map((e) => {
-					let n = e.kind ?? a ?? "";
-					return /* @__PURE__ */ N("button", {
+				A.map((e, n) => {
+					let i = e.kind ?? a ?? "", c = n === b;
+					return /* @__PURE__ */ P("button", {
 						type: "button",
 						role: "option",
-						"aria-selected": !1,
-						"data-ref-id": `${n}:${e.id}`,
-						onClick: () => S(e),
-						className: t("mention-inline-suggestions--option w-full min-w-0 text-inherit text-left", p.nativeButtonReset, u("compact"), f.interactive, p.rowHover, o.inset),
-						children: /* @__PURE__ */ P(s, {
+						id: y ? `${y}-option-${n}` : void 0,
+						tabIndex: y ? -1 : void 0,
+						ref: c ? k : void 0,
+						"aria-selected": c,
+						"data-highlighted": c || void 0,
+						"data-ref-id": `${i}:${e.id}`,
+						onClick: () => w(e),
+						className: t("mention-inline-suggestions--option w-full min-w-0 text-inherit text-left", p.nativeButtonReset, u("compact"), f.interactive, f.highlighted, p.rowHover, o.inset),
+						children: /* @__PURE__ */ F(s, {
 							gap: "dense",
 							className: "min-w-0 flex-1",
-							children: [/* @__PURE__ */ N(r, {
+							children: [/* @__PURE__ */ P(r, {
 								tag: "span",
 								type: "inherit",
 								weight: "medium",
 								className: "truncate",
 								children: e.label
-							}), e.description ? /* @__PURE__ */ N(r, {
+							}), e.description ? /* @__PURE__ */ P(r, {
 								tag: "span",
 								size: "xs",
 								type: "secondary",
@@ -538,24 +571,60 @@ function X({ open: n, activeKind: a, setActiveKind: m, kinds: h, resources: g, s
 								children: e.description
 							}) : null]
 						})
-					}, `${n}:${e.id}`);
+					}, `${i}:${e.id}`);
 				})
 			]
 		})]
 	}) : null;
 }
 //#endregion
+//#region src/components/features/mentions/utils/split-html-by-mentions.ts
+function Z(e) {
+	if (!e) return [];
+	let t = [];
+	function n(e) {
+		for (let r of e) {
+			if (r.type !== "element") continue;
+			let e = r.properties.dataRefId, i = r.position?.start.offset, a = r.position?.end.offset;
+			(r.tagName === "span" || r.tagName === "a") && typeof e == "string" && e && i !== void 0 && a !== void 0 ? t.push({
+				refId: e,
+				start: i,
+				end: a
+			}) : n(r.children);
+		}
+	}
+	n(L(e, { fragment: !0 }).children);
+	let r = [], i = 0;
+	for (let { refId: n, start: a, end: o } of t.sort((e, t) => e.start - t.start)) {
+		if (a < i) continue;
+		let t = e.slice(i, a);
+		t.length > 0 && r.push({
+			kind: "html",
+			value: t
+		}), r.push({
+			kind: "mention",
+			refId: n,
+			fallback: e.slice(a, o)
+		}), i = o;
+	}
+	let a = e.slice(i);
+	return a.length > 0 && r.push({
+		kind: "html",
+		value: a
+	}), r;
+}
+//#endregion
 //#region src/components/features/mentions/utils/parse-mentions-from-html.ts
-var Z = /<(?:span|a)\b[^>]*?data-ref-id\s*=\s*"([^"]+)"[^>]*?>([\s\S]*?)<\/(?:span|a)>/gi, Q = /data-ref-kind\s*=\s*"([^"]+)"/i;
-function $(e) {
+var Q = /<(?:span|a)\b[^>]*?data-ref-id\s*=\s*"([^"]+)"[^>]*?>([\s\S]*?)<\/(?:span|a)>/gi, $ = /data-ref-kind\s*=\s*"([^"]+)"/i;
+function ee(e) {
 	let t = [];
 	if (!e) return t;
 	let n = /* @__PURE__ */ new Set(), r;
-	for (Z.lastIndex = 0; (r = Z.exec(e)) !== null;) {
+	for (Q.lastIndex = 0; (r = Q.exec(e)) !== null;) {
 		let [e, i, a] = r;
 		if (n.has(i)) continue;
 		n.add(i);
-		let o = e.match(Q)?.[1] ?? i.split(":")[0] ?? "", s = (a ?? "").replace(/<[^>]*>/g, "").replace(/&nbsp;/g, " ").replace(/^[@#$&%!~]\s*/, "").trim();
+		let o = e.match($)?.[1] ?? i.split(":")[0] ?? "", s = (a ?? "").replace(/<[^>]*>/g, "").replace(/&nbsp;/g, " ").replace(/^[@#$&%!~]\s*/, "").trim();
 		t.push({
 			id: i,
 			kind: o,
@@ -565,6 +634,6 @@ function $(e) {
 	return t;
 }
 //#endregion
-export { q as a, V as c, L as d, J as i, z as l, X as n, G as o, Y as r, U as s, $ as t, R as u };
+export { J as a, U as c, z as d, Y as i, V as l, Z as n, q as o, X as r, G as s, ee as t, B as u };
 
-//# sourceMappingURL=mentions-RKOQaaIB.js.map
+//# sourceMappingURL=mentions-qOnedSt4.js.map