@tutti-os/ui-rich-text 0.0.124 → 0.0.126

package/dist/editor/index.js

@@ -14,11 +14,10 @@ import {
 } from "../chunk-AB4LAEBH.js";
 import {
   createRichTextMentionAttrs,
-  createRichTextTriggerRegistry,
   getRichTextMentionDisplayText,
   renderRichTextTriggerInsertResult,
   resolveRichTextMentionView
-} from "../chunk-RUX5KKX3.js";
+} from "../chunk-CLNWVUDR.js";
 import {
   findRichTextMarkdownLinks,
   isRichTextMentionHref,
@@ -30,13 +29,18 @@ import {
   serializeRichTextDocumentToContent,
   workspaceReferenceNodeName
 } from "../chunk-RXT3DN3A.js";
+import {
+  createRichTextMentionIdentityKey,
+  createRichTextMentionService
+} from "../chunk-XN4EGZGR.js";
+import "../chunk-3UTSSMV7.js";
 
 // src/editor/RichTextTriggerEditor.tsx
 import {
-  useCallback,
-  useEffect as useEffect2,
+  useCallback as useCallback2,
+  useEffect as useEffect3,
   useLayoutEffect,
-  useMemo,
+  useMemo as useMemo2,
   useRef,
   useState as useState2
 } from "react";
@@ -48,6 +52,64 @@ import { EditorContent, useEditor } from "@tiptap/react";
 import { ViewportMenuSurface } from "@tutti-os/ui-system/components";
 import { cn } from "@tutti-os/ui-system/utils";
 
+// src/editor/RichTextMentionServiceProvider.tsx
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useSyncExternalStore
+} from "react";
+import { jsx } from "react/jsx-runtime";
+var RichTextMentionServiceContext = createContext(null);
+var idleSnapshot = Object.freeze({ state: "idle" });
+function RichTextMentionServiceProvider({
+  service,
+  children
+}) {
+  return /* @__PURE__ */ jsx(RichTextMentionServiceContext.Provider, { value: service, children });
+}
+function useRichTextMentionService(explicitService) {
+  const contextService = useContext(RichTextMentionServiceContext);
+  return explicitService ?? contextService;
+}
+function useEffectiveRichTextMentionService(input) {
+  const contextService = useRichTextMentionService();
+  const legacyService = useMemo(
+    () => input.mentionService || contextService ? null : createRichTextMentionService({
+      providers: input.triggerProviders ?? []
+    }),
+    [contextService, input.mentionService, input.triggerProviders]
+  );
+  useEffect(() => () => legacyService?.dispose(), [legacyService]);
+  return input.mentionService ?? contextService ?? legacyService;
+}
+function useResolvedRichTextMention(identity, explicitService) {
+  const service = useRichTextMentionService(explicitService);
+  const identityKey = createRichTextMentionIdentityKey(identity);
+  const stableIdentity = useMemo(
+    () => identity,
+    // Identity presentation fallback changes must still refresh the hook input.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [identityKey, identity.label]
+  );
+  const subscribe = useCallback(
+    (listener) => service?.subscribe(listener, stableIdentity) ?? (() => {
+    }),
+    [service, stableIdentity]
+  );
+  const getSnapshot = useCallback(
+    () => service?.getSnapshot(stableIdentity) ?? idleSnapshot,
+    [service, stableIdentity]
+  );
+  const snapshot = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  useEffect(() => {
+    if (service) void service.resolve(stableIdentity);
+  }, [service, stableIdentity]);
+  return snapshot;
+}
+
 // src/editor/richTextTriggerQuery.ts
 function isRichTextTriggerPrefixBoundary(character, boundary) {
   if (boundary === "whitespace") {
@@ -229,7 +291,7 @@ function resolveTopStartPlacement(cursorRect, menuOffset) {
 
 // src/editor/RichTextTriggerMenuItem.tsx
 import { FileIcon, FolderFilledIcon } from "@tutti-os/ui-system/icons";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 function RichTextTriggerMenuItem({
   iconUrl,
   label,
@@ -253,7 +315,7 @@ function RichTextTriggerMenuItem({
         onSelect();
       },
       children: [
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx2(
           RichTextTriggerMenuIcon,
           {
             iconUrl,
@@ -261,8 +323,8 @@ function RichTextTriggerMenuItem({
           }
         ),
         /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-auto flex-col items-start gap-0.5", children: [
-          /* @__PURE__ */ jsx("span", { className: "w-full overflow-hidden text-ellipsis whitespace-nowrap text-[13px] leading-5 font-semibold", children: label }),
-          subtitle ? /* @__PURE__ */ jsx("span", { className: "w-full overflow-hidden text-ellipsis whitespace-nowrap text-[11px] leading-4 text-[var(--text-secondary)]", children: subtitle }) : null
+          /* @__PURE__ */ jsx2("span", { className: "w-full overflow-hidden text-ellipsis whitespace-nowrap text-[13px] leading-5 font-semibold", children: label }),
+          subtitle ? /* @__PURE__ */ jsx2("span", { className: "w-full overflow-hidden text-ellipsis whitespace-nowrap text-[11px] leading-4 text-[var(--text-secondary)]", children: subtitle }) : null
         ] })
       ]
     }
@@ -275,23 +337,23 @@ function RichTextTriggerMenuIcon({
   const normalizedIconUrl = iconUrl?.trim() ?? "";
   if (workspaceReferenceFileKind) {
     const Icon = workspaceReferenceFileKind === "folder" ? FolderFilledIcon : FileIcon;
-    return /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx2(
       "span",
       {
         "aria-hidden": "true",
         className: "inline-grid size-4 flex-none place-items-center text-[var(--folder)]",
         "data-rich-text-trigger-icon": "true",
-        children: /* @__PURE__ */ jsx(Icon, { className: "size-4" })
+        children: /* @__PURE__ */ jsx2(Icon, { className: "size-4" })
       }
     );
   }
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx2(
     "span",
     {
       "aria-hidden": "true",
       className: "inline-grid size-4 flex-none place-items-center overflow-hidden rounded bg-[var(--bg-block,var(--transparency-block))]",
       "data-rich-text-trigger-icon": "true",
-      children: normalizedIconUrl ? /* @__PURE__ */ jsx(
+      children: normalizedIconUrl ? /* @__PURE__ */ jsx2(
         "img",
         {
           alt: "",
@@ -301,7 +363,7 @@ function RichTextTriggerMenuIcon({
           loading: "lazy",
           src: normalizedIconUrl
         }
-      ) : /* @__PURE__ */ jsx("span", { className: "block size-3 rounded-[3px] bg-[var(--transparency-block)]" })
+      ) : /* @__PURE__ */ jsx2("span", { className: "block size-3 rounded-[3px] bg-[var(--transparency-block)]" })
     }
   );
 }
@@ -312,30 +374,19 @@ import { ReactNodeViewRenderer } from "@tiptap/react";
 
 // src/extensions/MentionReferenceNodeView.tsx
 import { NodeViewWrapper } from "@tiptap/react";
-import {
-  MentionPill
-} from "@tutti-os/ui-system/components";
-import { jsx as jsx2 } from "react/jsx-runtime";
-var richTextMentionReferencePillClassName = "max-w-[16rem]";
+import { MentionPill } from "@tutti-os/ui-system/components";
+
+// src/extensions/mentionPillPresentation.ts
 function readStringAttr(value) {
   return typeof value === "string" ? value.trim() : "";
 }
 function readMentionPresentationUrl(presentation) {
-  if (!presentation || typeof presentation !== "object") {
-    return null;
-  }
-  const value = presentation.iconUrl ?? presentation.thumbnailUrl;
-  if (typeof value !== "string") {
-    return null;
-  }
-  const trimmed = value.trim();
+  const value = presentation?.iconUrl ?? presentation?.thumbnailUrl;
+  const trimmed = readStringAttr(value);
   return trimmed || null;
 }
 function readMentionScopeValue(scope, key) {
-  if (!scope || typeof scope !== "object") {
-    return "";
-  }
-  return readStringAttr(scope[key]);
+  return readStringAttr(scope?.[key]);
 }
 function resolveMentionPillKind(providerId, scope) {
   const id = providerId.trim();
@@ -356,24 +407,37 @@ function resolveMentionPillKind(providerId, scope) {
   }
   return "issue";
 }
+function resolveMentionPillIconUrl(input) {
+  return readMentionPresentationUrl(input.presentation) || readMentionScopeValue(input.scope, "icon") || null;
+}
+
+// src/extensions/MentionReferenceNodeView.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var richTextMentionReferencePillClassName = "max-w-[16rem]";
+function readStringAttr2(value) {
+  return typeof value === "string" ? value.trim() : "";
+}
 function MentionReferenceNodeView({
   node,
   selected
 }) {
   const label = typeof node.attrs.label === "string" ? node.attrs.label.trim().replace(/^@+/, "").trim() : "";
-  const iconUrl = readMentionPresentationUrl(node.attrs.presentation) || readMentionScopeValue(node.attrs.scope, "icon");
+  const iconUrl = resolveMentionPillIconUrl({
+    presentation: node.attrs.presentation,
+    scope: node.attrs.scope
+  });
   const kind = resolveMentionPillKind(
-    readStringAttr(node.attrs.providerId),
+    readStringAttr2(node.attrs.providerId),
     node.attrs.scope
   );
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx3(
     NodeViewWrapper,
     {
       as: "span",
       className: `inline-flex max-w-full align-baseline${selected ? " is-selected" : ""}`,
       contentEditable: false,
       "data-rich-text-mention-reference": "true",
-      children: /* @__PURE__ */ jsx2(
+      children: /* @__PURE__ */ jsx3(
         MentionPill,
         {
           className: richTextMentionReferencePillClassName,
@@ -444,7 +508,7 @@ import { mergeAttributes as mergeAttributes2, Node as Node2 } from "@tiptap/core
 import { ReactNodeViewRenderer as ReactNodeViewRenderer2 } from "@tiptap/react";
 
 // src/extensions/WorkspaceReferenceNodeView.tsx
-import { useEffect, useState } from "react";
+import { useEffect as useEffect2, useState } from "react";
 import { NodeViewWrapper as NodeViewWrapper2 } from "@tiptap/react";
 import {
   MentionPill as MentionPill2,
@@ -494,7 +558,7 @@ function isPathRoot(path) {
 }
 
 // src/extensions/WorkspaceReferenceNodeView.tsx
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 var richTextWorkspaceReferencePillClassName = "max-w-[18rem]";
 function WorkspaceReferenceNodeView({
   deleteNode,
@@ -511,7 +575,7 @@ function WorkspaceReferenceNodeView({
   const path = typeof attrs.path === "string" ? attrs.path : "";
   const presentation = getWorkspaceReferencePresentation(label, path);
   const removeActionAriaLabel = typeof extensionOptions.removeActionAriaLabel === "string" ? extensionOptions.removeActionAriaLabel : defaultRichTextTriggerText.removeReferenceActionLabel;
-  useEffect(() => {
+  useEffect2(() => {
     const syncEditable = () => {
       setIsEditable(editor.isEditable);
     };
@@ -531,7 +595,7 @@ function WorkspaceReferenceNodeView({
     }
     deleteNode();
   };
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx4(
     NodeViewWrapper2,
     {
       as: "span",
@@ -539,7 +603,7 @@ function WorkspaceReferenceNodeView({
       contentEditable: false,
       "data-rich-text-workspace-reference": "true",
       children: /* @__PURE__ */ jsxs2(Tooltip, { children: [
-        /* @__PURE__ */ jsx3(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ jsx4(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx4(
           MentionPill2,
           {
             className: richTextWorkspaceReferencePillClassName,
@@ -554,7 +618,7 @@ function WorkspaceReferenceNodeView({
             } : void 0
           }
         ) }),
-        /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ jsx4(
           TooltipContent,
           {
             className: "max-w-md whitespace-normal break-all",
@@ -638,7 +702,7 @@ var WorkspaceReference = Node2.create({
 });
 
 // src/editor/RichTextTriggerEditor.tsx
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 var RICH_TEXT_MENTION_PRESENTATION_KEYS = [
   "agentProviderId",
   "agentIconUrl",
@@ -656,7 +720,8 @@ var RICH_TEXT_MENTION_PRESENTATION_KEYS = [
 function RichTextTriggerEditor({
   value,
   onChange,
-  triggerProviders = [],
+  triggerProviders,
+  mentionService,
   placeholder,
   disabled = false,
   className,
@@ -687,11 +752,11 @@ function RichTextTriggerEditor({
   const mentionHydrationRequestRef = useRef(0);
   const suppressPastedAtQueryRef = useRef(false);
   const containerRef = useRef(null);
-  const registry = useMemo(
-    () => createRichTextTriggerRegistry(triggerProviders),
-    [triggerProviders]
-  );
-  const activeTriggerConfigs = useMemo(
+  const registry = useEffectiveRichTextMentionService({
+    mentionService,
+    triggerProviders
+  });
+  const activeTriggerConfigs = useMemo2(
     () => registry.listTriggerConfigs(),
     [registry]
   );
@@ -710,7 +775,7 @@ function RichTextTriggerEditor({
   const [isLoading, setIsLoading] = useState2(false);
   const [resolvedMenuAnchor, setResolvedMenuAnchor] = useState2(null);
   latestOnChangeRef.current = onChange;
-  const resetMenuPlacement = useCallback(() => {
+  const resetMenuPlacement = useCallback2(() => {
     setResolvedMenuAnchor(null);
   }, []);
   const editor = useEditor({
@@ -755,7 +820,7 @@ function RichTextTriggerEditor({
       latestOnChangeRef.current(serialized);
     }
   });
-  useEffect2(() => {
+  useEffect3(() => {
     if (!editor) {
       return;
     }
@@ -777,34 +842,32 @@ function RichTextTriggerEditor({
     );
     lastSerializedValueRef.current = normalizedValue;
   }, [editor, normalizedValue]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (!editor) {
       return;
     }
-    const requestId = mentionHydrationRequestRef.current + 1;
-    mentionHydrationRequestRef.current = requestId;
-    const mentions = collectHydratableMentionNodes(editor);
-    if (mentions.length === 0) {
-      return;
-    }
-    for (const mention of mentions) {
-      const provider = registry.getProvider(mention.attrs.providerId);
-      if (!provider?.resolveMention) {
-        continue;
-      }
-      void Promise.resolve(provider.resolveMention(mention.attrs)).then((resolved) => {
-        if (!resolved || mentionHydrationRequestRef.current !== requestId || editor.isDestroyed) {
-          return;
-        }
-        applyResolvedMentionAttrs(editor, mention.pos, mention.attrs, {
-          label: resolved.label,
-          presentation: resolved.presentation
+    const hydrateMentions = () => {
+      const requestId = mentionHydrationRequestRef.current + 1;
+      mentionHydrationRequestRef.current = requestId;
+      const mentions = collectHydratableMentionNodes(editor);
+      for (const mention of mentions) {
+        void registry.resolve(mention.attrs).then((snapshot) => {
+          const resolved = snapshot.state === "ready" ? snapshot.resolved : void 0;
+          if (!resolved || mentionHydrationRequestRef.current !== requestId || editor.isDestroyed) {
+            return;
+          }
+          applyResolvedMentionAttrs(editor, mention.pos, mention.attrs, {
+            label: resolved.label,
+            presentation: resolved.presentation
+          });
+        }).catch(() => {
         });
-      }).catch(() => {
-      });
-    }
+      }
+    };
+    hydrateMentions();
+    return registry.subscribe(hydrateMentions);
   }, [editor, registry, normalizedValue]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (!editor) {
       return;
     }
@@ -814,7 +877,7 @@ function RichTextTriggerEditor({
     lastFocusSignalRef.current = focusSignal;
     editor.commands.focus("end");
   }, [editor, focusSignal]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (!editor) {
       return;
     }
@@ -823,7 +886,7 @@ function RichTextTriggerEditor({
       editor.state.tr.setMeta("richTextEditable", !disabled)
     );
   }, [disabled, editor]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (!editor) {
       return;
     }
@@ -852,7 +915,7 @@ function RichTextTriggerEditor({
       editor.off("blur", updateFocus);
     };
   }, [activeTriggerConfigs, editor]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (!editor || !query || activeTriggerConfigs.length === 0) {
       setMatches([]);
       setActiveIndex(0);
@@ -909,7 +972,7 @@ function RichTextTriggerEditor({
     palette,
     activePaletteCategoryId
   );
-  const paletteState = useMemo(
+  const paletteState = useMemo2(
     () => palette ? buildMentionPaletteModelFromTriggerMatches({
       activeCategoryId: resolvedPaletteCategoryId,
       categories: palette.categories,
@@ -920,7 +983,7 @@ function RichTextTriggerEditor({
     }) : null,
     [isLoading, matches, palette, query?.keyword, resolvedPaletteCategoryId]
   );
-  useEffect2(() => {
+  useEffect3(() => {
     const defaultCategoryId = resolveDefaultPaletteCategoryId(palette);
     if (!defaultCategoryId) {
       setActivePaletteCategoryId("");
@@ -933,7 +996,7 @@ function RichTextTriggerEditor({
     }
     setActivePaletteCategoryId(defaultCategoryId);
   }, [activePaletteCategoryId, palette]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (!paletteState) {
       setHighlightedPaletteKey(null);
       return;
@@ -1116,8 +1179,8 @@ function RichTextTriggerEditor({
       },
       ref: containerRef,
       children: [
-        /* @__PURE__ */ jsx4("div", { className: "w-full min-w-0", onKeyDownCapture: handleKeyDown, children: /* @__PURE__ */ jsx4(EditorContent, { editor }) }),
-        isEmpty && placeholder ? /* @__PURE__ */ jsx4("div", { className: "pointer-events-none absolute top-0 right-0 left-0 px-0 py-0 text-[var(--text-placeholder)]", children: /* @__PURE__ */ jsx4(
+        /* @__PURE__ */ jsx5("div", { className: "w-full min-w-0", onKeyDownCapture: handleKeyDown, children: /* @__PURE__ */ jsx5(EditorContent, { editor }) }),
+        isEmpty && placeholder ? /* @__PURE__ */ jsx5("div", { className: "pointer-events-none absolute top-0 right-0 left-0 px-0 py-0 text-[var(--text-placeholder)]", children: /* @__PURE__ */ jsx5(
           "div",
           {
             className: cn(
@@ -1129,7 +1192,7 @@ function RichTextTriggerEditor({
           }
         ) }) : null,
         overlay,
-        isMenuOpen && resolvedMenuAnchor ? /* @__PURE__ */ jsx4(
+        isMenuOpen && resolvedMenuAnchor ? /* @__PURE__ */ jsx5(
           ViewportMenuSurface,
           {
             open: true,
@@ -1139,7 +1202,7 @@ function RichTextTriggerEditor({
             ),
             placement: resolveViewportMenuSurfacePlacement(resolvedMenuAnchor),
             style: menuSurfaceStyle,
-            children: paletteState && palette ? /* @__PURE__ */ jsx4(
+            children: paletteState && palette ? /* @__PURE__ */ jsx5(
               MentionPaletteFromState,
               {
                 state: paletteState,
@@ -1166,7 +1229,7 @@ function RichTextTriggerEditor({
                   onSelectItem: applyMatch
                 }
               }
-            ) : matches.length > 0 ? matches.map((match, index) => /* @__PURE__ */ jsx4(
+            ) : matches.length > 0 ? matches.map((match, index) => /* @__PURE__ */ jsx5(
               RichTextTriggerMenuItem,
               {
                 label: match.label,
@@ -1179,7 +1242,7 @@ function RichTextTriggerEditor({
                 onSelect: () => applyMatch(match)
               },
               `${match.providerId}:${match.key}`
-            )) : /* @__PURE__ */ jsx4("div", { className: "px-3 py-2 text-[11px] leading-4 text-[var(--text-secondary)]", children: isLoading ? text.loadingLabel : text.noMatchesLabel })
+            )) : /* @__PURE__ */ jsx5("div", { className: "px-3 py-2 text-[11px] leading-4 text-[var(--text-secondary)]", children: isLoading ? text.loadingLabel : text.noMatchesLabel })
           }
         ) : null
       ]
@@ -1400,9 +1463,9 @@ function normalizeMentionPresentation(value) {
 
 // src/editor/RichTextTriggerTextarea.tsx
 import {
-  useEffect as useEffect3,
+  useEffect as useEffect4,
   useLayoutEffect as useLayoutEffect2,
-  useMemo as useMemo2,
+  useMemo as useMemo3,
   useRef as useRef2,
   useState as useState3
 } from "react";
@@ -1536,7 +1599,7 @@ function getTextareaPresentationStyle(textarea) {
 // src/editor/richTextTextareaDecorations.tsx
 import { MentionPill as MentionPill3 } from "@tutti-os/ui-system/components";
 import { cn as cn2 } from "@tutti-os/ui-system/utils";
-import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 var richTextWorkspaceReferencePillClassName2 = "max-w-[18rem]";
 function RichTextTextareaDecoratedContent({
   onClickSegment,
@@ -1547,7 +1610,7 @@ function RichTextTextareaDecoratedContent({
   segments,
   textareaStyle
 }) {
-  return /* @__PURE__ */ jsx5("div", { className: "pointer-events-none absolute inset-0 z-10 overflow-hidden", children: /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6("div", { className: "pointer-events-none absolute inset-0 z-10 overflow-hidden", children: /* @__PURE__ */ jsx6(
     "div",
     {
       className: "min-h-full min-w-full",
@@ -1557,11 +1620,11 @@ function RichTextTextareaDecoratedContent({
       },
       children: segments.map((segment, index) => {
         if (segment.type === "text") {
-          return /* @__PURE__ */ jsx5("span", { children: segment.text }, index);
+          return /* @__PURE__ */ jsx6("span", { children: segment.text }, index);
         }
         return /* @__PURE__ */ jsxs4("span", { className: "relative", children: [
-          /* @__PURE__ */ jsx5("span", { "aria-hidden": "true", className: "text-transparent", children: segment.text }),
-          /* @__PURE__ */ jsx5(
+          /* @__PURE__ */ jsx6("span", { "aria-hidden": "true", className: "text-transparent", children: segment.text }),
+          /* @__PURE__ */ jsx6(
             MentionPill3,
             {
               className: cn2(
@@ -1579,7 +1642,7 @@ function RichTextTextareaDecoratedContent({
                   onRemoveSegment(segment);
                 }
               },
-              summary: /* @__PURE__ */ jsx5(
+              summary: /* @__PURE__ */ jsx6(
                 "span",
                 {
                   className: cn2(
@@ -1704,11 +1767,12 @@ function getTextareaCaretViewportPoint(textarea, selectionStart) {
 }
 
 // src/editor/RichTextTriggerTextarea.tsx
-import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 function RichTextTriggerTextarea({
   value,
   onChange,
-  triggerProviders = [],
+  triggerProviders,
+  mentionService,
   placeholder,
   disabled = false,
   className,
@@ -1742,27 +1806,27 @@ function RichTextTriggerTextarea({
   const [textareaPresentationStyle, setTextareaPresentationStyle] = useState3(null);
   const pendingSelectionRef = useRef2(null);
   const suppressPastedAtQueryRef = useRef2(false);
-  const registry = useMemo2(
-    () => createRichTextTriggerRegistry(triggerProviders),
-    [triggerProviders]
-  );
-  const activeTriggerConfigs = useMemo2(
+  const registry = useEffectiveRichTextMentionService({
+    mentionService,
+    triggerProviders
+  });
+  const activeTriggerConfigs = useMemo3(
     () => registry.listTriggerConfigs(),
     [registry]
   );
-  const decorationSegments = useMemo2(
+  const decorationSegments = useMemo3(
     () => buildRichTextTextareaDecorationSegments(value),
     [value]
   );
   const hasDecorations = hasRichTextTextareaDecorations(decorationSegments);
-  const query = useMemo2(
+  const query = useMemo3(
     () => isFocused ? findRichTextTriggerQuery(value, selectionStart, activeTriggerConfigs) : null,
     [activeTriggerConfigs, isFocused, selectionStart, value]
   );
   const visibleQuery = suppressPastedAtQueryRef.current && query?.trigger === "@" && query.keyword.length > 0 ? null : query;
   const shouldQuery = visibleQuery !== null && visibleQuery.keyword.length >= minQueryLength && activeTriggerConfigs.length > 0;
   const isMenuOpen = isFocused && shouldQuery && (isLoading || matches.length > 0);
-  useEffect3(() => {
+  useEffect4(() => {
     const nextSelection = pendingSelectionRef.current;
     if (nextSelection === null || !textareaRef.current) {
       return;
@@ -1770,7 +1834,7 @@ function RichTextTriggerTextarea({
     textareaRef.current.setSelectionRange(nextSelection, nextSelection);
     pendingSelectionRef.current = null;
   }, [value]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!shouldQuery || !visibleQuery) {
       setMatches([]);
       setActiveIndex(0);
@@ -1839,7 +1903,7 @@ function RichTextTriggerTextarea({
       y: caretPoint.y + caretPoint.lineHeight + menuOffset
     });
   }, [isMenuOpen, menuOffset, selectionStart, value, visibleQuery]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!isMenuOpen || !visibleQuery || !textareaRef.current) {
       return;
     }
@@ -1966,7 +2030,7 @@ function RichTextTriggerTextarea({
     }
   };
   return /* @__PURE__ */ jsxs5("div", { className: cn3("relative min-w-0 w-full", className), children: [
-    hasDecorations && textareaPresentationStyle ? /* @__PURE__ */ jsx6(
+    hasDecorations && textareaPresentationStyle ? /* @__PURE__ */ jsx7(
       RichTextTextareaDecoratedContent,
       {
         onClickSegment: handleClickDecoration,
@@ -1978,7 +2042,7 @@ function RichTextTriggerTextarea({
         textareaStyle: textareaPresentationStyle
       }
     ) : null,
-    /* @__PURE__ */ jsx6(
+    /* @__PURE__ */ jsx7(
       "textarea",
       {
         ref: textareaRef,
@@ -2058,7 +2122,7 @@ function RichTextTriggerTextarea({
       }
     ),
     overlay,
-    isMenuOpen && menuPoint ? /* @__PURE__ */ jsx6(
+    isMenuOpen && menuPoint ? /* @__PURE__ */ jsx7(
       ViewportMenuSurface2,
       {
         open: true,
@@ -2074,7 +2138,7 @@ function RichTextTriggerTextarea({
             height: 256
           }
         },
-        children: matches.length > 0 ? matches.map((match, index) => /* @__PURE__ */ jsx6(
+        children: matches.length > 0 ? matches.map((match, index) => /* @__PURE__ */ jsx7(
           RichTextTriggerMenuItem,
           {
             label: match.label,
@@ -2084,48 +2148,39 @@ function RichTextTriggerTextarea({
             onSelect: () => applyMatch(match)
           },
           `${match.providerId}:${match.key}`
-        )) : /* @__PURE__ */ jsx6("div", { className: "px-3 py-2 text-[11px] leading-4 text-[var(--text-secondary)]", children: isLoading ? text.loadingLabel : text.noMatchesLabel })
+        )) : /* @__PURE__ */ jsx7("div", { className: "px-3 py-2 text-[11px] leading-4 text-[var(--text-secondary)]", children: isLoading ? text.loadingLabel : text.noMatchesLabel })
       }
     ) : null
   ] });
 }
 
 // src/editor/RichTextMentionReadonly.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { MentionPill as MentionPill4 } from "@tutti-os/ui-system/components";
+import { jsx as jsx8 } from "react/jsx-runtime";
 var baseStyle = {
   alignItems: "center",
-  border: "1px solid transparent",
-  borderRadius: "999px",
   display: "inline-flex",
-  fontSize: "0.95em",
-  gap: "0.25rem",
-  lineHeight: 1.4,
   maxWidth: "100%",
-  padding: "0.05rem 0.45rem",
   textDecoration: "none",
   verticalAlign: "baseline",
   whiteSpace: "nowrap"
 };
 var stateStyles = {
   active: {
-    background: "var(--tutti-rich-text-mention-active-bg, color-mix(in srgb, currentColor 12%, transparent))",
     color: "var(--tutti-rich-text-mention-active-fg, inherit)",
     cursor: "pointer"
   },
   missing: {
-    background: "var(--tutti-rich-text-mention-missing-bg, color-mix(in srgb, currentColor 6%, transparent))",
     color: "var(--tutti-rich-text-mention-missing-fg, color-mix(in srgb, currentColor 48%, transparent))",
     cursor: "default",
     textDecoration: "line-through"
   },
   disabled: {
-    background: "var(--tutti-rich-text-mention-disabled-bg, color-mix(in srgb, currentColor 6%, transparent))",
     color: "var(--tutti-rich-text-mention-disabled-fg, color-mix(in srgb, currentColor 58%, transparent))",
     cursor: "not-allowed",
     opacity: 0.88
   },
   loading: {
-    background: "var(--tutti-rich-text-mention-loading-bg, color-mix(in srgb, currentColor 8%, transparent))",
     color: "var(--tutti-rich-text-mention-loading-fg, color-mix(in srgb, currentColor 82%, transparent))",
     cursor: "progress",
     opacity: 0.92
@@ -2148,10 +2203,20 @@ function RichTextMentionReadonly({
     mention,
     resolved: view
   };
-  const label = renderLabel?.(payload) ?? getRichTextMentionDisplayText({
-    ...mention,
-    label: view.label
-  });
+  const label = renderLabel?.(payload) ?? getRichTextMentionDisplayText({ ...mention, label: view.label });
+  const content = /* @__PURE__ */ jsx8(
+    MentionPill4,
+    {
+      className: "top-0",
+      iconUrl: resolveMentionPillIconUrl({
+        presentation: view.presentation,
+        scope: mention.scope
+      }) ?? void 0,
+      kind: resolveMentionPillKind(mention.providerId, mention.scope),
+      label,
+      removable: false
+    }
+  );
   const elementTitle = title ?? view.tooltip;
   const handleClick = (event) => {
     if (!view.interactive) {
@@ -2177,7 +2242,7 @@ function RichTextMentionReadonly({
     title: elementTitle
   };
   if (view.interactive && onClick) {
-    return /* @__PURE__ */ jsx7(
+    return /* @__PURE__ */ jsx8(
       "button",
       {
         ...sharedProps,
@@ -2187,19 +2252,22 @@ function RichTextMentionReadonly({
         style: {
           ...sharedProps.style,
           appearance: "none",
-          font: "inherit"
+          background: "transparent",
+          border: 0,
+          font: "inherit",
+          padding: 0
         },
         type: "button",
-        children: label
+        children: content
       }
     );
   }
-  return /* @__PURE__ */ jsx7("span", { ...sharedProps, children: label });
+  return /* @__PURE__ */ jsx8("span", { ...sharedProps, children: content });
 }
 
 // src/editor/RichTextReadonlyContent.tsx
 import {
-  MentionPill as MentionPill4,
+  MentionPill as MentionPill5,
   Tooltip as Tooltip2,
   TooltipContent as TooltipContent2,
   TooltipTrigger as TooltipTrigger2
@@ -2234,27 +2302,34 @@ function buildRichTextReadonlyInlineSegments(content) {
 }
 
 // src/editor/RichTextReadonlyContent.tsx
-import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
 var externalHrefPattern = /^(?:[a-z]+:)?\/\//i;
 var richTextWorkspaceReferencePillClassName3 = "max-w-[18rem]";
 function RichTextReadonlyContent({
   value,
   className,
   paragraphClassName,
+  triggerProviders,
+  mentionService,
   onMentionAction,
   onOpenWorkspaceReference
 }) {
   const normalizedValue = normalizeRichTextContent(value).trim();
+  const effectiveMentionService = useEffectiveRichTextMentionService({
+    mentionService,
+    triggerProviders
+  });
   if (!normalizedValue) {
     return null;
   }
   const paragraphs = normalizedValue.split(/\n{2,}/).map((paragraph) => paragraph.trim()).filter(Boolean);
-  return /* @__PURE__ */ jsx8("div", { className: cn4("space-y-4", className), children: paragraphs.map((paragraph, paragraphIndex) => /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx9("div", { className: cn4("space-y-4", className), children: paragraphs.map((paragraph, paragraphIndex) => /* @__PURE__ */ jsx9(
     "p",
     {
       className: cn4("whitespace-pre-wrap", paragraphClassName),
       children: renderReadonlyInlineMarkdown(
         paragraph,
+        effectiveMentionService,
         onOpenWorkspaceReference,
         onMentionAction
       )
@@ -2262,22 +2337,23 @@ function RichTextReadonlyContent({
     `${paragraphIndex}:${paragraph}`
   )) });
 }
-function renderReadonlyInlineMarkdown(content, onOpenWorkspaceReference, onMentionAction) {
+function renderReadonlyInlineMarkdown(content, mentionService, onOpenWorkspaceReference, onMentionAction) {
   const parts = [];
   const segments = buildRichTextReadonlyInlineSegments(content);
   segments.forEach((segment, index) => {
     if (segment.type === "text") {
-      parts.push(/* @__PURE__ */ jsx8("span", { children: segment.text }, `text:${index}`));
+      parts.push(/* @__PURE__ */ jsx9("span", { children: segment.text }, `text:${index}`));
       return;
     }
     parts.push(
-      /* @__PURE__ */ jsx8(
+      /* @__PURE__ */ jsx9(
         RichTextReadonlyInlineLink,
         {
           href: segment.href,
           label: segment.label,
           onMentionAction,
-          onOpenWorkspaceReference
+          onOpenWorkspaceReference,
+          mentionService
         },
         `link:${index}:${segment.href}`
       )
@@ -2289,26 +2365,28 @@ function RichTextReadonlyInlineLink({
   href,
   label,
   onMentionAction,
-  onOpenWorkspaceReference
+  onOpenWorkspaceReference,
+  mentionService
 }) {
   const trimmedHref = href.trim();
   const mention = parseRichTextMentionHref(trimmedHref, label);
   if (mention) {
-    return /* @__PURE__ */ jsx8(
-      RichTextMentionReadonly,
+    return /* @__PURE__ */ jsx9(
+      HydratedRichTextMentionReadonly,
       {
         mention,
         onClick: onMentionAction ? ({ mention: mention2 }) => {
           void onMentionAction(mention2);
-        } : void 0
+        } : void 0,
+        mentionService
       }
     );
   }
   if (!trimmedHref) {
-    return /* @__PURE__ */ jsx8("span", { children: label });
+    return /* @__PURE__ */ jsx9("span", { children: label });
   }
   if (externalHrefPattern.test(trimmedHref) && !isRichTextMentionHref(trimmedHref)) {
-    return /* @__PURE__ */ jsx8(
+    return /* @__PURE__ */ jsx9(
       "a",
       {
         className: "font-medium text-[var(--text-primary)] underline decoration-[var(--border-1)] underline-offset-4 hover:text-[var(--text-primary-hover)]",
@@ -2321,7 +2399,7 @@ function RichTextReadonlyInlineLink({
   }
   const kind = trimmedHref.endsWith("/") ? "folder" : "file";
   const path = normalizeRichTextLinkHref(trimmedHref, kind);
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx9(
     WorkspaceReferenceReadonly,
     {
       reference: {
@@ -2333,6 +2411,22 @@ function RichTextReadonlyInlineLink({
     }
   );
 }
+function HydratedRichTextMentionReadonly({
+  mention,
+  onClick,
+  mentionService
+}) {
+  const snapshot = useResolvedRichTextMention(mention, mentionService);
+  const resolved = snapshot.state === "ready" ? { state: "active", ...snapshot.resolved } : snapshot.state === "loading" ? { state: "loading" } : snapshot.state === "missing" ? { state: "missing" } : void 0;
+  return /* @__PURE__ */ jsx9(
+    RichTextMentionReadonly,
+    {
+      mention,
+      onClick,
+      resolved
+    }
+  );
+}
 function WorkspaceReferenceReadonly({
   reference,
   onOpenWorkspaceReference
@@ -2341,8 +2435,8 @@ function WorkspaceReferenceReadonly({
     reference.label,
     reference.path
   );
-  const content = /* @__PURE__ */ jsx8(
-    MentionPill4,
+  const content = /* @__PURE__ */ jsx9(
+    MentionPill5,
     {
       className: richTextWorkspaceReferencePillClassName3,
       fileKind: reference.kind,
@@ -2352,7 +2446,7 @@ function WorkspaceReferenceReadonly({
     }
   );
   return /* @__PURE__ */ jsxs6(Tooltip2, { children: [
-    /* @__PURE__ */ jsx8(TooltipTrigger2, { asChild: true, children: onOpenWorkspaceReference ? /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx9(TooltipTrigger2, { asChild: true, children: onOpenWorkspaceReference ? /* @__PURE__ */ jsx9(
       "button",
       {
         className: "inline-flex max-w-full appearance-none items-baseline bg-transparent p-0 text-inherit",
@@ -2362,8 +2456,8 @@ function WorkspaceReferenceReadonly({
         },
         children: content
       }
-    ) : /* @__PURE__ */ jsx8("span", { className: "inline-flex max-w-full align-baseline", children: content }) }),
-    /* @__PURE__ */ jsx8(
+    ) : /* @__PURE__ */ jsx9("span", { className: "inline-flex max-w-full align-baseline", children: content }) }),
+    /* @__PURE__ */ jsx9(
       TooltipContent2,
       {
         className: "max-w-md whitespace-normal break-all",
@@ -2375,11 +2469,15 @@ function WorkspaceReferenceReadonly({
 }
 export {
   RichTextMentionReadonly,
+  RichTextMentionServiceProvider,
   RichTextReadonlyContent,
   RichTextTriggerEditor,
   RichTextTriggerTextarea,
   findRichTextTriggerQuery,
   isRichTextTriggerPrefixBoundary,
-  queryRichTextTriggerMatches
+  queryRichTextTriggerMatches,
+  useEffectiveRichTextMentionService,
+  useResolvedRichTextMention,
+  useRichTextMentionService
 };
 //# sourceMappingURL=index.js.map