@tutti-os/ui-rich-text 0.0.1

package/dist/editor/index.js

@@ -0,0 +1,1738 @@
+import {
+  createDefaultRichTextI18nRuntime
+} from "../chunk-VQHCWUBH.js";
+import {
+  createRichTextAtRegistry,
+  createRichTextMentionAttrs,
+  getRichTextMentionDisplayText,
+  renderRichTextAtInsertResult,
+  resolveRichTextMentionView
+} from "../chunk-K5POY2YJ.js";
+import {
+  findRichTextMarkdownLinks,
+  isRichTextMentionHref,
+  mentionReferenceNodeName,
+  normalizeRichTextContent,
+  normalizeRichTextLinkHref,
+  parseRichTextContentToDocument,
+  parseRichTextMentionHref,
+  serializeRichTextDocumentToContent,
+  workspaceReferenceNodeName
+} from "../chunk-52PIIFZA.js";
+
+// src/editor/RichTextAtEditor.tsx
+import {
+  useEffect as useEffect2,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState as useState2
+} from "react";
+import Document from "@tiptap/extension-document";
+import HardBreak from "@tiptap/extension-hard-break";
+import Paragraph from "@tiptap/extension-paragraph";
+import Text from "@tiptap/extension-text";
+import { EditorContent, useEditor } from "@tiptap/react";
+import { ViewportMenuSurface } from "@tutti-os/ui-system/components";
+import { cn } from "@tutti-os/ui-system/utils";
+
+// src/editor/richTextAtQuery.ts
+function isTriggerPrefixBoundary(character) {
+  return /[\s,;:!?<>{}|\\'"`~()[\]]/.test(character);
+}
+function findRichTextAtQuery(value, caret) {
+  const cursor = Math.max(0, Math.min(caret, value.length));
+  let segmentStart = cursor;
+  while (segmentStart > 0) {
+    const previous = value[segmentStart - 1] ?? "";
+    if (/\s/.test(previous)) {
+      break;
+    }
+    segmentStart -= 1;
+  }
+  const segment = value.slice(segmentStart, cursor);
+  for (let index = segment.lastIndexOf("@"); index >= 0; index = segment.lastIndexOf("@", index - 1)) {
+    const previous = segment[index - 1] ?? "";
+    if (index > 0 && !isTriggerPrefixBoundary(previous)) {
+      continue;
+    }
+    const candidate = segment.slice(index);
+    if (/[[\]()]/.test(candidate.slice(1))) {
+      return null;
+    }
+    return {
+      from: segmentStart + index,
+      to: cursor,
+      keyword: candidate.slice(1)
+    };
+  }
+  return null;
+}
+async function queryRichTextAtMatches(registry, input) {
+  try {
+    return await registry.query(input);
+  } catch {
+    return [];
+  }
+}
+
+// src/editor/richTextIme.ts
+function isRichTextImeComposing(event) {
+  if (event.isComposing || event.nativeEvent?.isComposing) {
+    return true;
+  }
+  const keyCode = event.keyCode ?? event.nativeEvent?.keyCode;
+  const which = event.which ?? event.nativeEvent?.which;
+  return keyCode === 229 || which === 229;
+}
+
+// src/editor/richTextAtText.ts
+var defaultRichTextI18n = createDefaultRichTextI18nRuntime();
+function resolveRichTextAtText(overrides, removeDecorationAriaLabel, i18n = defaultRichTextI18n) {
+  return {
+    loadingLabel: overrides?.loadingLabel?.trim() || i18n.t("richTextAt.loading"),
+    noMatchesLabel: overrides?.noMatchesLabel?.trim() || i18n.t("richTextAt.noMatches"),
+    removeReferenceActionLabel: removeDecorationAriaLabel?.trim() || overrides?.removeReferenceActionLabel?.trim() || i18n.t("richTextAt.removeReferenceActionLabel")
+  };
+}
+var defaultRichTextAtText = resolveRichTextAtText();
+
+// src/extensions/mentionReference.ts
+import { mergeAttributes, Node } from "@tiptap/core";
+import { ReactNodeViewRenderer } from "@tiptap/react";
+
+// src/extensions/MentionReferenceNodeView.tsx
+import { NodeViewWrapper } from "@tiptap/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function MentionReferenceNodeView({
+  node,
+  selected
+}) {
+  const label = typeof node.attrs.label === "string" ? node.attrs.label.trim() : "";
+  return /* @__PURE__ */ jsx(
+    NodeViewWrapper,
+    {
+      as: "span",
+      className: `inline-flex max-w-full align-baseline ${selected ? "is-selected" : ""}`,
+      contentEditable: false,
+      "data-rich-text-mention-reference": "true",
+      children: /* @__PURE__ */ jsxs(
+        "span",
+        {
+          className: `inline-flex max-w-full items-center overflow-hidden rounded-md px-1.5 py-0.5 text-sm font-medium ${selected ? "bg-[var(--background-fronted)] text-[var(--text-primary)] shadow-soft" : "bg-transparency-block text-[var(--text-primary)]"}`,
+          children: [
+            "@",
+            label
+          ]
+        }
+      )
+    }
+  );
+}
+
+// src/extensions/mentionReference.ts
+var MentionReference = Node.create({
+  name: mentionReferenceNodeName,
+  group: "inline",
+  inline: true,
+  atom: true,
+  selectable: true,
+  addAttributes() {
+    return {
+      entityId: {
+        default: ""
+      },
+      href: {
+        default: null
+      },
+      kind: {
+        default: null
+      },
+      label: {
+        default: ""
+      },
+      meta: {
+        default: null
+      },
+      plugin: {
+        default: ""
+      },
+      trigger: {
+        default: "@"
+      },
+      version: {
+        default: null
+      }
+    };
+  },
+  parseHTML() {
+    return [{ tag: "span[data-rich-text-mention-reference]" }];
+  },
+  renderHTML({ HTMLAttributes }) {
+    const label = typeof HTMLAttributes.label === "string" ? HTMLAttributes.label : "";
+    return [
+      "span",
+      mergeAttributes(HTMLAttributes, {
+        "data-rich-text-mention-reference": "true",
+        class: "inline-flex max-w-full items-center overflow-hidden rounded-md bg-transparency-block px-1.5 py-0.5 align-baseline text-sm font-medium text-[var(--text-primary)]"
+      }),
+      `@${label}`
+    ];
+  },
+  addNodeView() {
+    return ReactNodeViewRenderer(MentionReferenceNodeView);
+  }
+});
+
+// src/extensions/workspaceReference.ts
+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 { NodeViewWrapper as NodeViewWrapper2 } from "@tiptap/react";
+import {
+  MentionPill,
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger
+} from "@tutti-os/ui-system/components";
+
+// src/extensions/workspaceReferencePresentation.ts
+function getWorkspaceReferencePresentation(label, path) {
+  const displayLabel = normalizeReferenceLabel(label, path);
+  const fullPath = normalizeFullPath(path);
+  return {
+    displayLabel,
+    fullPath
+  };
+}
+function normalizeReferenceLabel(label, path) {
+  const trimmedLabel = label.trim();
+  if (trimmedLabel !== "") {
+    return trimmedLabel;
+  }
+  return getPathBasename(path) || path.trim();
+}
+function normalizeFullPath(path) {
+  return trimTrailingSeparators(path.trim());
+}
+function getPathBasename(path) {
+  const normalizedPath = trimTrailingSeparators(path.trim());
+  if (normalizedPath === "" || isPathRoot(normalizedPath)) {
+    return normalizedPath;
+  }
+  const segments = normalizedPath.split(/[\\/]+/).filter(Boolean);
+  return segments.at(-1) ?? "";
+}
+function trimTrailingSeparators(path) {
+  if (path === "") {
+    return "";
+  }
+  if (isPathRoot(path)) {
+    return path;
+  }
+  return path.replace(/[\\/]+$/, "");
+}
+function isPathRoot(path) {
+  return path === "/" || path === "\\" || path === "//" || path === "\\\\" || /^[A-Za-z]:[\\/]?$/.test(path);
+}
+
+// src/extensions/WorkspaceReferenceNodeView.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var richTextWorkspaceReferencePillClassName = "max-w-[18rem]";
+function WorkspaceReferenceNodeView({
+  deleteNode,
+  editor,
+  extension,
+  node,
+  selected
+}) {
+  const [isEditable, setIsEditable] = useState(editor.isEditable);
+  const attrs = node.attrs;
+  const extensionOptions = extension.options;
+  const kind = attrs.kind === "folder" ? "folder" : "file";
+  const label = typeof attrs.label === "string" ? attrs.label : "";
+  const path = typeof attrs.path === "string" ? attrs.path : "";
+  const presentation = getWorkspaceReferencePresentation(label, path);
+  const removeActionAriaLabel = typeof extensionOptions.removeActionAriaLabel === "string" ? extensionOptions.removeActionAriaLabel : defaultRichTextAtText.removeReferenceActionLabel;
+  useEffect(() => {
+    const syncEditable = () => {
+      setIsEditable(editor.isEditable);
+    };
+    syncEditable();
+    editor.on("transaction", syncEditable);
+    editor.on("update", syncEditable);
+    return () => {
+      editor.off("transaction", syncEditable);
+      editor.off("update", syncEditable);
+    };
+  }, [editor]);
+  const handleRemove = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    if (!editor.isEditable) {
+      return;
+    }
+    deleteNode();
+  };
+  return /* @__PURE__ */ jsx2(
+    NodeViewWrapper2,
+    {
+      as: "span",
+      className: `inline-flex max-w-full align-baseline ${selected ? "is-selected" : ""}`,
+      contentEditable: false,
+      "data-rich-text-workspace-reference": "true",
+      children: /* @__PURE__ */ jsxs2(Tooltip, { children: [
+        /* @__PURE__ */ jsx2(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx2(
+          MentionPill,
+          {
+            className: richTextWorkspaceReferencePillClassName,
+            fileKind: kind,
+            kind: "file",
+            label: presentation.displayLabel,
+            removable: isEditable,
+            removeButtonProps: isEditable ? {
+              "aria-label": removeActionAriaLabel,
+              onMouseDown: handleRemove
+            } : void 0
+          }
+        ) }),
+        /* @__PURE__ */ jsx2(
+          TooltipContent,
+          {
+            className: "max-w-md whitespace-normal break-all",
+            sideOffset: 8,
+            children: presentation.fullPath
+          }
+        )
+      ] })
+    }
+  );
+}
+
+// src/extensions/workspaceReference.ts
+var WorkspaceReference = Node2.create({
+  name: workspaceReferenceNodeName,
+  addOptions() {
+    return {
+      removeActionAriaLabel: defaultRichTextAtText.removeReferenceActionLabel
+    };
+  },
+  group: "inline",
+  inline: true,
+  atom: true,
+  selectable: true,
+  addAttributes() {
+    return {
+      kind: {
+        default: "file"
+      },
+      label: {
+        default: ""
+      },
+      path: {
+        default: ""
+      }
+    };
+  },
+  parseHTML() {
+    return [{ tag: "span[data-rich-text-workspace-reference]" }];
+  },
+  renderHTML({ HTMLAttributes }) {
+    const kind = HTMLAttributes.kind === "folder" ? "folder" : "file";
+    const label = typeof HTMLAttributes.label === "string" ? HTMLAttributes.label : "";
+    const path = typeof HTMLAttributes.path === "string" ? HTMLAttributes.path : "";
+    const presentation = getWorkspaceReferencePresentation(label, path);
+    const referenceColorClassName = kind === "folder" ? "text-[var(--rich-text-folder)]" : "text-[var(--rich-text-mention-file)]";
+    return [
+      "span",
+      mergeAttributes2(HTMLAttributes, {
+        "data-rich-text-workspace-reference": "true",
+        "data-rich-text-workspace-kind": kind,
+        "data-agent-file-mention": "true",
+        "data-agent-mention-kind": "file",
+        "data-slot": "mention-pill",
+        title: presentation.fullPath,
+        class: [
+          "group relative top-[3px] inline-flex max-w-full cursor-default items-center gap-1.5 overflow-hidden rounded-[4px] border border-transparent bg-transparent px-1.5 py-0.5 align-baseline text-sm font-medium leading-5 no-underline transition-colors hover:border-transparent hover:bg-[color-mix(in_srgb,currentColor_12%,transparent)]",
+          referenceColorClassName
+        ].join(" ")
+      }),
+      [
+        "span",
+        {
+          "aria-hidden": "true",
+          class: "grid size-4 shrink-0 place-items-center text-current"
+        },
+        kind === "folder" ? "D" : "F"
+      ],
+      [
+        "span",
+        {
+          class: "min-w-0 max-w-[20rem] truncate text-sm font-medium"
+        },
+        presentation.displayLabel
+      ]
+    ];
+  },
+  addNodeView() {
+    return ReactNodeViewRenderer2(WorkspaceReferenceNodeView);
+  }
+});
+
+// src/editor/RichTextAtEditor.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function RichTextAtEditor({
+  value,
+  onChange,
+  providers = [],
+  placeholder,
+  disabled = false,
+  className,
+  textareaClassName,
+  placeholderClassName,
+  minQueryLength = 0,
+  maxResults = 8,
+  removeDecorationAriaLabel,
+  i18n,
+  textOverrides,
+  overlay,
+  focusSignal
+}) {
+  const menuOffset = 6;
+  const normalizedValue = normalizeRichTextContent(value);
+  const text = resolveRichTextAtText(
+    textOverrides,
+    removeDecorationAriaLabel,
+    i18n
+  );
+  const latestOnChangeRef = useRef(onChange);
+  const lastSerializedValueRef = useRef(normalizedValue);
+  const lastFocusSignalRef = useRef(focusSignal);
+  const containerRef = useRef(null);
+  const registry = useMemo(
+    () => createRichTextAtRegistry(providers),
+    [providers]
+  );
+  const [isFocused, setIsFocused] = useState2(false);
+  const [query, setQuery] = useState2(null);
+  const [matches, setMatches] = useState2([]);
+  const [activeIndex, setActiveIndex] = useState2(0);
+  const [isLoading, setIsLoading] = useState2(false);
+  const [menuPoint, setMenuPoint] = useState2(
+    null
+  );
+  latestOnChangeRef.current = onChange;
+  const editor = useEditor({
+    immediatelyRender: false,
+    editable: !disabled,
+    extensions: [
+      Document,
+      Paragraph,
+      Text,
+      HardBreak,
+      WorkspaceReference.configure({
+        removeActionAriaLabel: text.removeReferenceActionLabel
+      }),
+      MentionReference
+    ],
+    content: parseRichTextContentToDocument(normalizedValue),
+    editorProps: {
+      attributes: {
+        class: cn(
+          "w-full whitespace-pre-wrap break-words outline-none",
+          textareaClassName
+        )
+      }
+    },
+    onBlur() {
+      window.setTimeout(() => {
+        setIsFocused(false);
+        setMatches([]);
+        setActiveIndex(0);
+        setIsLoading(false);
+        setMenuPoint(null);
+      }, 100);
+    },
+    onFocus() {
+      setIsFocused(true);
+    },
+    onUpdate({ editor: editor2 }) {
+      const serialized = serializeRichTextDocumentToContent(editor2.getJSON());
+      lastSerializedValueRef.current = serialized;
+      latestOnChangeRef.current(serialized);
+    }
+  });
+  useEffect2(() => {
+    if (!editor) {
+      return;
+    }
+    if (lastSerializedValueRef.current === normalizedValue) {
+      return;
+    }
+    const currentSerialized = serializeRichTextDocumentToContent(
+      editor.getJSON()
+    );
+    if (currentSerialized === normalizedValue) {
+      lastSerializedValueRef.current = normalizedValue;
+      return;
+    }
+    editor.commands.setContent(
+      parseRichTextContentToDocument(normalizedValue),
+      {
+        emitUpdate: false
+      }
+    );
+    lastSerializedValueRef.current = normalizedValue;
+  }, [editor, normalizedValue]);
+  useEffect2(() => {
+    if (!editor) {
+      return;
+    }
+    if (Object.is(lastFocusSignalRef.current, focusSignal)) {
+      return;
+    }
+    lastFocusSignalRef.current = focusSignal;
+    editor.commands.focus("end");
+  }, [editor, focusSignal]);
+  useEffect2(() => {
+    if (!editor) {
+      return;
+    }
+    editor.setEditable(!disabled);
+    editor.view.dispatch(
+      editor.state.tr.setMeta("richTextEditable", !disabled)
+    );
+  }, [disabled, editor]);
+  useEffect2(() => {
+    if (!editor) {
+      return;
+    }
+    const updateQueryState = () => {
+      const nextQuery = isFocused ? findEditorAtQuery(editor) : null;
+      setQuery(nextQuery);
+    };
+    const updateFocus = () => {
+      setIsFocused(editor.isFocused);
+      updateQueryState();
+    };
+    updateQueryState();
+    editor.on("selectionUpdate", updateQueryState);
+    editor.on("transaction", updateQueryState);
+    editor.on("focus", updateFocus);
+    editor.on("blur", updateFocus);
+    return () => {
+      editor.off("selectionUpdate", updateQueryState);
+      editor.off("transaction", updateQueryState);
+      editor.off("focus", updateFocus);
+      editor.off("blur", updateFocus);
+    };
+  }, [editor, isFocused]);
+  useEffect2(() => {
+    if (!editor || !query || !isFocused || providers.length === 0) {
+      setMatches([]);
+      setActiveIndex(0);
+      setIsLoading(false);
+      return;
+    }
+    if (query.keyword.length < minQueryLength) {
+      setMatches([]);
+      setActiveIndex(0);
+      setIsLoading(false);
+      return;
+    }
+    const abortController = new AbortController();
+    setIsLoading(true);
+    void queryRichTextAtMatches(registry, {
+      abortSignal: abortController.signal,
+      keyword: query.keyword,
+      maxResults,
+      context: {
+        blockText: editor.state.selection.$from.parent.textBetween(
+          0,
+          editor.state.selection.$from.parent.content.size,
+          "\n",
+          "\uFFFC"
+        ),
+        documentText: serializeRichTextDocumentToContent(editor.getJSON())
+      }
+    }).then((nextMatches) => {
+      if (abortController.signal.aborted) {
+        return;
+      }
+      setMatches(nextMatches);
+      setActiveIndex(
+        (current) => nextMatches.length === 0 ? 0 : Math.max(0, Math.min(current, nextMatches.length - 1))
+      );
+    }).finally(() => {
+      if (!abortController.signal.aborted) {
+        setIsLoading(false);
+      }
+    });
+    return () => {
+      abortController.abort();
+    };
+  }, [
+    editor,
+    isFocused,
+    maxResults,
+    minQueryLength,
+    providers.length,
+    query,
+    registry
+  ]);
+  useLayoutEffect(() => {
+    if (!editor || !query || !isFocused) {
+      setMenuPoint(null);
+      return;
+    }
+    const updateMenuPoint = () => {
+      const coords = editor.view.coordsAtPos(editor.state.selection.from);
+      setMenuPoint({
+        x: coords.left,
+        y: coords.bottom + menuOffset
+      });
+    };
+    updateMenuPoint();
+    window.addEventListener("resize", updateMenuPoint);
+    window.addEventListener("scroll", updateMenuPoint, {
+      capture: true,
+      passive: true
+    });
+    return () => {
+      window.removeEventListener("resize", updateMenuPoint);
+      window.removeEventListener("scroll", updateMenuPoint, true);
+    };
+  }, [editor, isFocused, menuOffset, query]);
+  const isMenuOpen = isFocused && !!query && (isLoading || matches.length > 0);
+  const isEmpty = !editor || serializeRichTextDocumentToContent(editor.getJSON()).trim().length === 0;
+  const applyMatch = (match) => {
+    if (!editor || !query) {
+      return;
+    }
+    const content = renderInsertResultAsEditorContent(
+      match.providerId,
+      match.insertResult
+    );
+    if (!content) {
+      return;
+    }
+    editor.chain().focus().insertContentAt({ from: query.from, to: query.to }, content).run();
+    setMatches([]);
+    setActiveIndex(0);
+    setIsLoading(false);
+    setMenuPoint(null);
+  };
+  const handleKeyDown = (event) => {
+    if (isRichTextImeComposing(event)) {
+      return;
+    }
+    if (!isMenuOpen || matches.length === 0) {
+      return;
+    }
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      setActiveIndex((current) => (current + 1) % matches.length);
+      return;
+    }
+    if (event.key === "ArrowUp") {
+      event.preventDefault();
+      setActiveIndex(
+        (current) => (current - 1 + matches.length) % matches.length
+      );
+      return;
+    }
+    if (event.key === "Enter" || event.key === "Tab") {
+      const match = matches[activeIndex];
+      if (!match) {
+        return;
+      }
+      event.preventDefault();
+      applyMatch(match);
+      return;
+    }
+    if (event.key === "Escape") {
+      event.preventDefault();
+      setMatches([]);
+      setActiveIndex(0);
+      setIsLoading(false);
+      setMenuPoint(null);
+    }
+  };
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      className: cn("relative min-w-0 w-full", className),
+      ref: containerRef,
+      children: [
+        /* @__PURE__ */ jsx3("div", { className: "w-full min-w-0", onKeyDownCapture: handleKeyDown, children: /* @__PURE__ */ jsx3(EditorContent, { editor }) }),
+        isEmpty && placeholder ? /* @__PURE__ */ jsx3("div", { className: "pointer-events-none absolute top-0 right-0 left-0 px-0 py-0 text-[var(--text-placeholder)]", children: /* @__PURE__ */ jsx3(
+          "div",
+          {
+            className: cn(
+              "min-w-0 w-full whitespace-pre-wrap",
+              placeholderClassName ?? textareaClassName,
+              "text-[var(--text-placeholder)]"
+            ),
+            children: placeholder
+          }
+        ) }) : null,
+        overlay,
+        isMenuOpen && menuPoint ? /* @__PURE__ */ jsx3(
+          ViewportMenuSurface,
+          {
+            open: true,
+            className: "nextop-rich-text-at-menu max-h-64 w-[min(28rem,calc(100vw-24px))] overflow-y-auto p-1",
+            placement: {
+              type: "point",
+              point: menuPoint,
+              alignX: "start",
+              alignY: "start",
+              estimatedSize: {
+                width: 360,
+                height: 256
+              }
+            },
+            children: matches.length > 0 ? matches.map((match, index) => /* @__PURE__ */ jsxs3(
+              "button",
+              {
+                "aria-selected": index === activeIndex,
+                className: cn(
+                  "flex w-full cursor-pointer flex-col items-start gap-0.5 rounded-md px-2.5 py-2 text-left outline-none transition-colors",
+                  index === activeIndex ? "bg-transparency-block text-[var(--text-primary)]" : "text-[var(--text-primary)] hover:bg-transparency-block"
+                ),
+                type: "button",
+                onMouseDown: (event) => {
+                  event.preventDefault();
+                  applyMatch(match);
+                },
+                children: [
+                  /* @__PURE__ */ jsx3("div", { className: "text-sm leading-5 font-medium", children: match.label }),
+                  match.subtitle ? /* @__PURE__ */ jsx3("div", { className: "text-xs leading-4 text-[var(--text-secondary)]", children: match.subtitle }) : null
+                ]
+              },
+              `${match.providerId}:${match.key}`
+            )) : /* @__PURE__ */ jsx3("div", { className: "px-3 py-2 text-xs leading-4 text-[var(--text-secondary)]", children: isLoading ? text.loadingLabel : text.noMatchesLabel })
+          }
+        ) : null
+      ]
+    }
+  );
+}
+function findEditorAtQuery(editor) {
+  const { selection } = editor.state;
+  if (!selection.empty) {
+    return null;
+  }
+  const { $from } = selection;
+  if (!$from.parent.isTextblock) {
+    return null;
+  }
+  const textBeforeCursor = $from.parent.textBetween(
+    0,
+    $from.parentOffset,
+    "\n",
+    "\uFFFC"
+  );
+  const query = findRichTextAtQuery(textBeforeCursor, textBeforeCursor.length);
+  if (!query) {
+    return null;
+  }
+  const distanceFromQueryStart = textBeforeCursor.length - query.from;
+  return {
+    from: selection.from - distanceFromQueryStart,
+    keyword: query.keyword,
+    to: selection.from
+  };
+}
+function renderInsertResultAsEditorContent(providerId, result) {
+  switch (result.kind) {
+    case "mention":
+      return {
+        type: mentionReferenceNodeName,
+        attrs: createRichTextMentionAttrs(providerId, result.mention)
+      };
+    case "markdown-link": {
+      const kind = result.href.endsWith("/") ? "folder" : "file";
+      return {
+        type: workspaceReferenceNodeName,
+        attrs: {
+          kind,
+          label: result.label,
+          path: normalizeRichTextLinkHref(result.href, kind)
+        }
+      };
+    }
+    case "text":
+      return result.text;
+    default:
+      return null;
+  }
+}
+
+// src/editor/RichTextAtTextarea.tsx
+import {
+  useEffect as useEffect3,
+  useLayoutEffect as useLayoutEffect2,
+  useMemo as useMemo2,
+  useRef as useRef2,
+  useState as useState3
+} from "react";
+import { ViewportMenuSurface as ViewportMenuSurface2 } from "@tutti-os/ui-system/components";
+import { cn as cn3 } from "@tutti-os/ui-system/utils";
+
+// src/editor/richTextTextareaDecorationModel.ts
+var EXTERNAL_LINK_PREFIX = /^(?:[a-z]+:)?\/\//i;
+var MENTION_LINK_PREFIX = /^mention:\/\//i;
+var TEXTAREA_PRESENTATION_STYLE_PROPERTIES = [
+  { styleName: "paddingTop", cssName: "padding-top" },
+  { styleName: "paddingRight", cssName: "padding-right" },
+  { styleName: "paddingBottom", cssName: "padding-bottom" },
+  { styleName: "paddingLeft", cssName: "padding-left" },
+  { styleName: "fontFamily", cssName: "font-family" },
+  { styleName: "fontFeatureSettings", cssName: "font-feature-settings" },
+  { styleName: "fontKerning", cssName: "font-kerning" },
+  { styleName: "fontOpticalSizing", cssName: "font-optical-sizing" },
+  { styleName: "fontSize", cssName: "font-size" },
+  { styleName: "fontStretch", cssName: "font-stretch" },
+  { styleName: "fontStyle", cssName: "font-style" },
+  { styleName: "fontVariant", cssName: "font-variant" },
+  { styleName: "fontVariationSettings", cssName: "font-variation-settings" },
+  { styleName: "fontWeight", cssName: "font-weight" },
+  { styleName: "letterSpacing", cssName: "letter-spacing" },
+  { styleName: "lineHeight", cssName: "line-height" },
+  { styleName: "textAlign", cssName: "text-align" },
+  { styleName: "textIndent", cssName: "text-indent" },
+  { styleName: "textTransform", cssName: "text-transform" },
+  { styleName: "tabSize", cssName: "tab-size" },
+  { styleName: "MozTabSize", cssName: "-moz-tab-size" }
+];
+function isDecoratableMarkdownHref(href) {
+  const trimmedHref = href.trim();
+  if (!trimmedHref) {
+    return false;
+  }
+  if (EXTERNAL_LINK_PREFIX.test(trimmedHref) || MENTION_LINK_PREFIX.test(trimmedHref)) {
+    return false;
+  }
+  return true;
+}
+function buildRichTextTextareaDecorationSegments(value) {
+  const segments = [];
+  let cursor = 0;
+  for (const match of findRichTextMarkdownLinks(value)) {
+    const label = match.label.trim();
+    const href = match.href.trim();
+    const { index, source, to } = match;
+    if (index > cursor) {
+      segments.push({
+        type: "text",
+        text: value.slice(cursor, index),
+        from: cursor,
+        to: index
+      });
+    }
+    if (label && href && isDecoratableMarkdownHref(href)) {
+      segments.push({
+        type: "link",
+        text: source,
+        from: index,
+        to,
+        label,
+        href,
+        kind: href.endsWith("/") ? "folder" : "file"
+      });
+    } else {
+      segments.push({
+        type: "text",
+        text: source,
+        from: index,
+        to
+      });
+    }
+    cursor = to;
+  }
+  if (cursor < value.length) {
+    segments.push({
+      type: "text",
+      text: value.slice(cursor),
+      from: cursor,
+      to: value.length
+    });
+  }
+  return segments;
+}
+function hasRichTextTextareaDecorations(segments) {
+  return segments.some((segment) => segment.type === "link");
+}
+function resolveRichTextTextareaSelectionBoundary(segments, selectionStart) {
+  for (const segment of segments) {
+    if (segment.type !== "link") {
+      continue;
+    }
+    if (selectionStart <= segment.from || selectionStart >= segment.to) {
+      continue;
+    }
+    const midpoint = segment.from + (segment.to - segment.from) / 2;
+    return selectionStart < midpoint ? segment.from : segment.to;
+  }
+  return null;
+}
+function setTextareaPresentationStyleValue(styleRecord, styleName, value) {
+  styleRecord[styleName] = value;
+}
+function getTextareaPresentationStyle(textarea) {
+  const computedStyle = window.getComputedStyle(textarea);
+  const styleRecord = {
+    whiteSpace: "pre-wrap"
+  };
+  setTextareaPresentationStyleValue(
+    styleRecord,
+    "wordBreak",
+    computedStyle.wordBreak
+  );
+  setTextareaPresentationStyleValue(
+    styleRecord,
+    "overflowWrap",
+    computedStyle.overflowWrap
+  );
+  for (const { styleName, cssName } of TEXTAREA_PRESENTATION_STYLE_PROPERTIES) {
+    setTextareaPresentationStyleValue(
+      styleRecord,
+      styleName,
+      computedStyle.getPropertyValue(cssName)
+    );
+  }
+  return styleRecord;
+}
+
+// src/editor/richTextTextareaDecorations.tsx
+import { MentionPill as MentionPill2 } from "@tutti-os/ui-system/components";
+import { cn as cn2 } from "@tutti-os/ui-system/utils";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var richTextWorkspaceReferencePillClassName2 = "max-w-[18rem]";
+function RichTextTextareaDecoratedContent({
+  onClickSegment,
+  onRemoveSegment,
+  removeActionAriaLabel,
+  scrollLeft,
+  scrollTop,
+  segments,
+  textareaStyle
+}) {
+  return /* @__PURE__ */ jsx4("div", { className: "pointer-events-none absolute inset-0 z-10 overflow-hidden", children: /* @__PURE__ */ jsx4(
+    "div",
+    {
+      className: "min-h-full min-w-full",
+      style: {
+        ...textareaStyle,
+        transform: `translate(${-scrollLeft}px, ${-scrollTop}px)`
+      },
+      children: segments.map((segment, index) => {
+        if (segment.type === "text") {
+          return /* @__PURE__ */ jsx4("span", { children: segment.text }, index);
+        }
+        return /* @__PURE__ */ jsxs4("span", { className: "relative", children: [
+          /* @__PURE__ */ jsx4("span", { "aria-hidden": "true", className: "text-transparent", children: segment.text }),
+          /* @__PURE__ */ jsx4(
+            MentionPill2,
+            {
+              className: cn2(
+                "pointer-events-auto absolute inset-y-0 left-0 pr-1 pl-1.5",
+                richTextWorkspaceReferencePillClassName2
+              ),
+              fileKind: segment.kind,
+              kind: "file",
+              label: segment.label,
+              removeButtonProps: {
+                "aria-label": removeActionAriaLabel,
+                onPointerDown: (event) => {
+                  event.preventDefault();
+                  event.stopPropagation();
+                  onRemoveSegment(segment);
+                }
+              },
+              summary: /* @__PURE__ */ jsx4(
+                "span",
+                {
+                  className: cn2(
+                    "min-w-0 truncate text-xs text-current opacity-80",
+                    segment.kind === "folder" ? "max-w-[18rem]" : "max-w-[20rem]"
+                  ),
+                  children: segment.href
+                }
+              ),
+              onPointerDown: (event) => {
+                onClickSegment(segment, event);
+              }
+            }
+          )
+        ] }, index);
+      })
+    }
+  ) });
+}
+
+// src/editor/richTextTextareaCaret.ts
+var TEXTAREA_MIRROR_STYLE_PROPERTIES = [
+  "boxSizing",
+  "width",
+  "paddingTop",
+  "paddingRight",
+  "paddingBottom",
+  "paddingLeft",
+  "borderTopWidth",
+  "borderRightWidth",
+  "borderBottomWidth",
+  "borderLeftWidth",
+  "borderTopStyle",
+  "borderRightStyle",
+  "borderBottomStyle",
+  "borderLeftStyle",
+  "borderTopColor",
+  "borderRightColor",
+  "borderBottomColor",
+  "borderLeftColor",
+  "borderRadius",
+  "fontFamily",
+  "fontFeatureSettings",
+  "fontKerning",
+  "fontOpticalSizing",
+  "fontSize",
+  "fontStretch",
+  "fontStyle",
+  "fontVariant",
+  "fontVariationSettings",
+  "fontWeight",
+  "letterSpacing",
+  "lineHeight",
+  "textAlign",
+  "textDecoration",
+  "textIndent",
+  "textTransform",
+  "wordBreak",
+  "overflowWrap",
+  "tabSize",
+  "MozTabSize"
+];
+function parsePixelValue(value) {
+  if (!value || value === "normal") {
+    return null;
+  }
+  const parsedValue = Number.parseFloat(value);
+  return Number.isFinite(parsedValue) ? parsedValue : null;
+}
+function resolveLineHeight(computedStyle) {
+  const explicitLineHeight = parsePixelValue(computedStyle.lineHeight);
+  if (explicitLineHeight !== null) {
+    return explicitLineHeight;
+  }
+  const fontSize = parsePixelValue(computedStyle.fontSize);
+  return fontSize !== null ? fontSize * 1.4 : 20;
+}
+function getTextareaCaretViewportPoint(textarea, selectionStart) {
+  if (typeof document === "undefined") {
+    return null;
+  }
+  const safeSelectionStart = Math.max(
+    0,
+    Math.min(selectionStart, textarea.value.length)
+  );
+  const textareaRect = textarea.getBoundingClientRect();
+  const computedStyle = window.getComputedStyle(textarea);
+  const mirror = document.createElement("div");
+  const marker = document.createElement("span");
+  mirror.setAttribute("aria-hidden", "true");
+  mirror.style.position = "fixed";
+  mirror.style.left = `${textareaRect.left}px`;
+  mirror.style.top = `${textareaRect.top}px`;
+  mirror.style.visibility = "hidden";
+  mirror.style.pointerEvents = "none";
+  mirror.style.overflow = "hidden";
+  for (const propertyName of TEXTAREA_MIRROR_STYLE_PROPERTIES) {
+    mirror.style[propertyName] = computedStyle[propertyName] ?? "";
+  }
+  mirror.style.whiteSpace = "pre-wrap";
+  mirror.style.wordBreak = computedStyle.wordBreak;
+  mirror.style.overflowWrap = computedStyle.overflowWrap;
+  const preSelectionText = textarea.value.slice(0, safeSelectionStart);
+  mirror.textContent = preSelectionText.length > 0 ? preSelectionText : "";
+  if (preSelectionText.endsWith("\n")) {
+    mirror.append(document.createTextNode("\u200B"));
+  }
+  marker.textContent = "\u200B";
+  mirror.append(marker);
+  document.body.append(mirror);
+  try {
+    const markerRect = marker.getBoundingClientRect();
+    const lineHeight = resolveLineHeight(computedStyle);
+    return {
+      x: markerRect.left - textarea.scrollLeft,
+      y: markerRect.top - textarea.scrollTop,
+      lineHeight
+    };
+  } finally {
+    mirror.remove();
+  }
+}
+
+// src/editor/RichTextAtTextarea.tsx
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+function RichTextAtTextarea({
+  value,
+  onChange,
+  providers = [],
+  placeholder,
+  disabled = false,
+  className,
+  textareaClassName,
+  rows,
+  minQueryLength = 0,
+  maxResults = 8,
+  removeDecorationAriaLabel,
+  i18n,
+  textOverrides,
+  overlay
+}) {
+  const menuOffset = 6;
+  const text = resolveRichTextAtText(
+    textOverrides,
+    removeDecorationAriaLabel,
+    i18n
+  );
+  const textareaRef = useRef2(null);
+  const [selectionStart, setSelectionStart] = useState3(0);
+  const [matches, setMatches] = useState3([]);
+  const [activeIndex, setActiveIndex] = useState3(0);
+  const [isLoading, setIsLoading] = useState3(false);
+  const [isFocused, setIsFocused] = useState3(false);
+  const [menuPoint, setMenuPoint] = useState3(
+    null
+  );
+  const [scrollPosition, setScrollPosition] = useState3({ left: 0, top: 0 });
+  const [textareaPresentationStyle, setTextareaPresentationStyle] = useState3(null);
+  const pendingSelectionRef = useRef2(null);
+  const registry = useMemo2(
+    () => createRichTextAtRegistry(providers),
+    [providers]
+  );
+  const decorationSegments = useMemo2(
+    () => buildRichTextTextareaDecorationSegments(value),
+    [value]
+  );
+  const hasDecorations = hasRichTextTextareaDecorations(decorationSegments);
+  const query = isFocused ? findRichTextAtQuery(value, selectionStart) : null;
+  const shouldQuery = query !== null && query.keyword.length >= minQueryLength && providers.length > 0;
+  const isMenuOpen = isFocused && shouldQuery && (isLoading || matches.length > 0);
+  useEffect3(() => {
+    const nextSelection = pendingSelectionRef.current;
+    if (nextSelection === null || !textareaRef.current) {
+      return;
+    }
+    textareaRef.current.setSelectionRange(nextSelection, nextSelection);
+    pendingSelectionRef.current = null;
+  }, [value]);
+  useEffect3(() => {
+    if (!shouldQuery || !query) {
+      setMatches([]);
+      setActiveIndex(0);
+      setIsLoading(false);
+      return;
+    }
+    const abortController = new AbortController();
+    setIsLoading(true);
+    void queryRichTextAtMatches(registry, {
+      abortSignal: abortController.signal,
+      keyword: query.keyword,
+      maxResults,
+      context: {
+        documentText: value,
+        blockText: value
+      }
+    }).then((nextMatches) => {
+      if (abortController.signal.aborted) {
+        return;
+      }
+      setMatches(nextMatches);
+      setActiveIndex(
+        (current) => nextMatches.length === 0 ? 0 : Math.max(0, Math.min(current, nextMatches.length - 1))
+      );
+    }).finally(() => {
+      if (!abortController.signal.aborted) {
+        setIsLoading(false);
+      }
+    });
+    return () => {
+      abortController.abort();
+    };
+  }, [maxResults, query, registry, shouldQuery, value]);
+  useLayoutEffect2(() => {
+    if (!textareaRef.current || !hasDecorations) {
+      setTextareaPresentationStyle(null);
+      return;
+    }
+    const textarea = textareaRef.current;
+    setTextareaPresentationStyle(getTextareaPresentationStyle(textarea));
+    setScrollPosition({
+      left: textarea.scrollLeft,
+      top: textarea.scrollTop
+    });
+  }, [hasDecorations, textareaClassName, value]);
+  useLayoutEffect2(() => {
+    if (!isMenuOpen || !query || !textareaRef.current) {
+      setMenuPoint(null);
+      return;
+    }
+    const caretPoint = getTextareaCaretViewportPoint(
+      textareaRef.current,
+      query.to
+    );
+    const textareaRect = textareaRef.current.getBoundingClientRect();
+    if (!caretPoint) {
+      setMenuPoint({
+        x: textareaRect.left + 12,
+        y: textareaRect.bottom + menuOffset
+      });
+      return;
+    }
+    setMenuPoint({
+      x: caretPoint.x,
+      y: caretPoint.y + caretPoint.lineHeight + menuOffset
+    });
+  }, [isMenuOpen, menuOffset, query, selectionStart, value]);
+  useEffect3(() => {
+    if (!isMenuOpen || !query || !textareaRef.current) {
+      return;
+    }
+    const textarea = textareaRef.current;
+    const updateMenuPoint = () => {
+      const caretPoint = getTextareaCaretViewportPoint(textarea, query.to);
+      const textareaRect = textarea.getBoundingClientRect();
+      setMenuPoint(
+        caretPoint ? {
+          x: caretPoint.x,
+          y: caretPoint.y + caretPoint.lineHeight + menuOffset
+        } : {
+          x: textareaRect.left + 12,
+          y: textareaRect.bottom + menuOffset
+        }
+      );
+    };
+    const resizeObserver = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(() => {
+      updateMenuPoint();
+    });
+    resizeObserver?.observe(textarea);
+    textarea.addEventListener("scroll", updateMenuPoint, { passive: true });
+    window.addEventListener("resize", updateMenuPoint);
+    window.addEventListener("scroll", updateMenuPoint, {
+      capture: true,
+      passive: true
+    });
+    return () => {
+      resizeObserver?.disconnect();
+      textarea.removeEventListener("scroll", updateMenuPoint);
+      window.removeEventListener("resize", updateMenuPoint);
+      window.removeEventListener("scroll", updateMenuPoint, true);
+    };
+  }, [isMenuOpen, menuOffset, query]);
+  const closeMenu = () => {
+    setMatches([]);
+    setActiveIndex(0);
+    setIsLoading(false);
+    setMenuPoint(null);
+  };
+  const setSelection = (nextSelection) => {
+    pendingSelectionRef.current = nextSelection;
+    setSelectionStart(nextSelection);
+    if (textareaRef.current) {
+      textareaRef.current.focus();
+      textareaRef.current.setSelectionRange(nextSelection, nextSelection);
+      pendingSelectionRef.current = null;
+    }
+  };
+  const handleClickDecoration = (segment, event) => {
+    event.preventDefault();
+    const bounds = event.currentTarget.getBoundingClientRect();
+    const nextSelection = event.clientX < bounds.left + bounds.width / 2 ? segment.from : segment.to;
+    setSelection(nextSelection);
+  };
+  const handleRemoveDecoration = (segment) => {
+    const nextValue = `${value.slice(0, segment.from)}${value.slice(segment.to)}`;
+    const nextSelection = Math.min(segment.from, nextValue.length);
+    pendingSelectionRef.current = nextSelection;
+    onChange(nextValue);
+    setSelectionStart(nextSelection);
+    window.requestAnimationFrame(() => {
+      if (!textareaRef.current) {
+        return;
+      }
+      textareaRef.current.focus();
+      textareaRef.current.setSelectionRange(nextSelection, nextSelection);
+      pendingSelectionRef.current = null;
+    });
+  };
+  const applyMatch = (match) => {
+    const currentQuery = findRichTextAtQuery(
+      value,
+      textareaRef.current?.selectionStart ?? selectionStart
+    );
+    if (!currentQuery) {
+      return;
+    }
+    const insertedValue = renderRichTextAtInsertResult(
+      match.providerId,
+      match.insertResult
+    );
+    const nextValue = `${value.slice(0, currentQuery.from)}${insertedValue}${value.slice(currentQuery.to)}`;
+    const nextSelection = currentQuery.from + insertedValue.length;
+    pendingSelectionRef.current = nextSelection;
+    onChange(nextValue);
+    closeMenu();
+  };
+  const handleKeyDown = (event) => {
+    if (isRichTextImeComposing(event)) {
+      return;
+    }
+    if (matches.length === 0) {
+      return;
+    }
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      setActiveIndex((current) => (current + 1) % matches.length);
+      return;
+    }
+    if (event.key === "ArrowUp") {
+      event.preventDefault();
+      setActiveIndex(
+        (current) => (current - 1 + matches.length) % matches.length
+      );
+      return;
+    }
+    if (event.key === "Enter" || event.key === "Tab") {
+      const match = matches[activeIndex];
+      if (!match) {
+        return;
+      }
+      event.preventDefault();
+      applyMatch(match);
+      return;
+    }
+    if (event.key === "Escape") {
+      event.preventDefault();
+      closeMenu();
+    }
+  };
+  return /* @__PURE__ */ jsxs5("div", { className: cn3("relative min-w-0 w-full", className), children: [
+    hasDecorations && textareaPresentationStyle ? /* @__PURE__ */ jsx5(
+      RichTextTextareaDecoratedContent,
+      {
+        onClickSegment: handleClickDecoration,
+        onRemoveSegment: handleRemoveDecoration,
+        removeActionAriaLabel: text.removeReferenceActionLabel,
+        scrollLeft: scrollPosition.left,
+        scrollTop: scrollPosition.top,
+        segments: decorationSegments,
+        textareaStyle: textareaPresentationStyle
+      }
+    ) : null,
+    /* @__PURE__ */ jsx5(
+      "textarea",
+      {
+        ref: textareaRef,
+        className: textareaClassName,
+        disabled,
+        placeholder,
+        rows,
+        style: hasDecorations ? {
+          WebkitTextFillColor: "transparent",
+          caretColor: "var(--text-primary)",
+          color: "transparent",
+          position: "relative",
+          zIndex: 0
+        } : void 0,
+        value,
+        onBlur: () => {
+          window.setTimeout(() => {
+            setIsFocused(false);
+            closeMenu();
+          }, 100);
+        },
+        onChange: (event) => {
+          const rawSelectionStart = event.target.selectionStart ?? 0;
+          const nextSelection = resolveRichTextTextareaSelectionBoundary(
+            decorationSegments,
+            rawSelectionStart
+          ) ?? rawSelectionStart;
+          if (nextSelection !== rawSelectionStart) {
+            event.target.setSelectionRange(nextSelection, nextSelection);
+          }
+          setSelectionStart(nextSelection);
+          onChange(event.target.value);
+        },
+        onFocus: (event) => {
+          setIsFocused(true);
+          const rawSelectionStart = event.target.selectionStart ?? 0;
+          const nextSelection = resolveRichTextTextareaSelectionBoundary(
+            decorationSegments,
+            rawSelectionStart
+          ) ?? rawSelectionStart;
+          if (nextSelection !== rawSelectionStart) {
+            event.target.setSelectionRange(nextSelection, nextSelection);
+          }
+          setSelectionStart(nextSelection);
+          setScrollPosition({
+            left: event.target.scrollLeft,
+            top: event.target.scrollTop
+          });
+        },
+        onKeyDown: handleKeyDown,
+        onScroll: (event) => {
+          setScrollPosition({
+            left: event.currentTarget.scrollLeft,
+            top: event.currentTarget.scrollTop
+          });
+        },
+        onSelect: (event) => {
+          const rawSelectionStart = event.currentTarget.selectionStart ?? 0;
+          const nextSelection = resolveRichTextTextareaSelectionBoundary(
+            decorationSegments,
+            rawSelectionStart
+          ) ?? rawSelectionStart;
+          if (nextSelection !== rawSelectionStart) {
+            event.currentTarget.setSelectionRange(nextSelection, nextSelection);
+          }
+          setSelectionStart(nextSelection);
+        }
+      }
+    ),
+    overlay,
+    isMenuOpen && menuPoint ? /* @__PURE__ */ jsx5(
+      ViewportMenuSurface2,
+      {
+        open: true,
+        className: "nextop-rich-text-at-menu max-h-64 w-[min(28rem,calc(100vw-24px))] overflow-y-auto p-1",
+        dismissIgnoreRefs: [textareaRef],
+        placement: {
+          type: "point",
+          point: menuPoint,
+          alignX: "start",
+          alignY: "start",
+          estimatedSize: {
+            width: 360,
+            height: 256
+          }
+        },
+        children: matches.length > 0 ? matches.map((match, index) => /* @__PURE__ */ jsxs5(
+          "button",
+          {
+            "aria-selected": index === activeIndex,
+            className: cn3(
+              "flex w-full cursor-pointer flex-col items-start gap-0.5 rounded-md px-2.5 py-2 text-left outline-none transition-colors",
+              index === activeIndex ? "bg-transparency-block text-[var(--text-primary)]" : "text-[var(--text-primary)] hover:bg-transparency-block"
+            ),
+            type: "button",
+            onMouseDown: (event) => {
+              event.preventDefault();
+              applyMatch(match);
+            },
+            children: [
+              /* @__PURE__ */ jsx5("div", { className: "text-sm leading-5 font-medium", children: match.label }),
+              match.subtitle ? /* @__PURE__ */ jsx5("div", { className: "text-xs leading-4 text-[var(--text-secondary)]", children: match.subtitle }) : null
+            ]
+          },
+          `${match.providerId}:${match.key}`
+        )) : /* @__PURE__ */ jsx5("div", { className: "px-3 py-2 text-xs leading-4 text-[var(--text-secondary)]", children: isLoading ? text.loadingLabel : text.noMatchesLabel })
+      }
+    ) : null
+  ] });
+}
+
+// src/editor/RichTextMentionReadonly.tsx
+import { jsx as jsx6 } 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(--nextop-rich-text-mention-active-bg, color-mix(in srgb, currentColor 12%, transparent))",
+    color: "var(--nextop-rich-text-mention-active-fg, inherit)",
+    cursor: "pointer"
+  },
+  missing: {
+    background: "var(--nextop-rich-text-mention-missing-bg, color-mix(in srgb, currentColor 6%, transparent))",
+    color: "var(--nextop-rich-text-mention-missing-fg, color-mix(in srgb, currentColor 48%, transparent))",
+    cursor: "default",
+    textDecoration: "line-through"
+  },
+  disabled: {
+    background: "var(--nextop-rich-text-mention-disabled-bg, color-mix(in srgb, currentColor 6%, transparent))",
+    color: "var(--nextop-rich-text-mention-disabled-fg, color-mix(in srgb, currentColor 58%, transparent))",
+    cursor: "not-allowed",
+    opacity: 0.88
+  },
+  loading: {
+    background: "var(--nextop-rich-text-mention-loading-bg, color-mix(in srgb, currentColor 8%, transparent))",
+    color: "var(--nextop-rich-text-mention-loading-fg, color-mix(in srgb, currentColor 82%, transparent))",
+    cursor: "progress",
+    opacity: 0.92
+  }
+};
+function joinClassNames(...parts) {
+  const value = parts.filter(Boolean).join(" ").trim();
+  return value || void 0;
+}
+function RichTextMentionReadonly({
+  mention,
+  resolved,
+  className,
+  title,
+  onClick,
+  renderLabel
+}) {
+  const view = resolveRichTextMentionView(mention, resolved);
+  const payload = {
+    mention,
+    resolved: view
+  };
+  const label = renderLabel?.(payload) ?? getRichTextMentionDisplayText({
+    ...mention,
+    label: view.label
+  });
+  const elementTitle = title ?? view.tooltip;
+  const handleClick = (event) => {
+    if (!view.interactive) {
+      event.preventDefault();
+      return;
+    }
+    onClick?.(payload);
+  };
+  const sharedProps = {
+    "aria-busy": view.state === "loading" || void 0,
+    "aria-disabled": !view.interactive || void 0,
+    className: joinClassNames(
+      "nextop-rich-text-mention",
+      `nextop-rich-text-mention--${view.state}`,
+      className
+    ),
+    "data-plugin": mention.plugin,
+    "data-state": view.state,
+    style: {
+      ...baseStyle,
+      ...stateStyles[view.state]
+    },
+    title: elementTitle
+  };
+  if (view.interactive && view.href) {
+    return /* @__PURE__ */ jsx6(
+      "a",
+      {
+        ...sharedProps,
+        href: view.href,
+        onClick: (event) => {
+          handleClick(event);
+        },
+        children: label
+      }
+    );
+  }
+  if (view.interactive && onClick) {
+    return /* @__PURE__ */ jsx6(
+      "button",
+      {
+        ...sharedProps,
+        onClick: (event) => {
+          handleClick(event);
+        },
+        style: {
+          ...sharedProps.style,
+          appearance: "none",
+          font: "inherit"
+        },
+        type: "button",
+        children: label
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx6("span", { ...sharedProps, children: label });
+}
+
+// src/editor/RichTextReadonlyContent.tsx
+import {
+  MentionPill as MentionPill3,
+  Tooltip as Tooltip2,
+  TooltipContent as TooltipContent2,
+  TooltipTrigger as TooltipTrigger2
+} from "@tutti-os/ui-system/components";
+import { cn as cn4 } from "@tutti-os/ui-system/utils";
+
+// src/editor/richTextReadonlyContentModel.ts
+function buildRichTextReadonlyInlineSegments(content) {
+  const segments = [];
+  let cursor = 0;
+  for (const match of findRichTextMarkdownLinks(content)) {
+    if (match.index > cursor) {
+      segments.push({
+        text: content.slice(cursor, match.index),
+        type: "text"
+      });
+    }
+    segments.push({
+      href: match.href,
+      label: match.label || match.href,
+      type: "link"
+    });
+    cursor = match.to;
+  }
+  if (cursor < content.length) {
+    segments.push({
+      text: content.slice(cursor),
+      type: "text"
+    });
+  }
+  return segments;
+}
+
+// src/editor/RichTextReadonlyContent.tsx
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+var externalHrefPattern = /^(?:[a-z]+:)?\/\//i;
+var richTextWorkspaceReferencePillClassName3 = "max-w-[18rem]";
+function RichTextReadonlyContent({
+  value,
+  className,
+  paragraphClassName,
+  onOpenWorkspaceReference
+}) {
+  const normalizedValue = normalizeRichTextContent(value).trim();
+  if (!normalizedValue) {
+    return null;
+  }
+  const paragraphs = normalizedValue.split(/\n{2,}/).map((paragraph) => paragraph.trim()).filter(Boolean);
+  return /* @__PURE__ */ jsx7("div", { className: cn4("space-y-4", className), children: paragraphs.map((paragraph, paragraphIndex) => /* @__PURE__ */ jsx7(
+    "p",
+    {
+      className: cn4("whitespace-pre-wrap", paragraphClassName),
+      children: renderReadonlyInlineMarkdown(paragraph, onOpenWorkspaceReference)
+    },
+    `${paragraphIndex}:${paragraph}`
+  )) });
+}
+function renderReadonlyInlineMarkdown(content, onOpenWorkspaceReference) {
+  const parts = [];
+  const segments = buildRichTextReadonlyInlineSegments(content);
+  segments.forEach((segment, index) => {
+    if (segment.type === "text") {
+      parts.push(/* @__PURE__ */ jsx7("span", { children: segment.text }, `text:${index}`));
+      return;
+    }
+    parts.push(
+      /* @__PURE__ */ jsx7(
+        RichTextReadonlyInlineLink,
+        {
+          href: segment.href,
+          label: segment.label,
+          onOpenWorkspaceReference
+        },
+        `link:${index}:${segment.href}`
+      )
+    );
+  });
+  return parts;
+}
+function RichTextReadonlyInlineLink({
+  href,
+  label,
+  onOpenWorkspaceReference
+}) {
+  const trimmedHref = href.trim();
+  const mention = parseRichTextMentionHref(trimmedHref, label);
+  if (mention) {
+    return /* @__PURE__ */ jsx7(RichTextMentionReadonly, { mention });
+  }
+  if (!trimmedHref) {
+    return /* @__PURE__ */ jsx7("span", { children: label });
+  }
+  if (externalHrefPattern.test(trimmedHref) && !isRichTextMentionHref(trimmedHref)) {
+    return /* @__PURE__ */ jsx7(
+      "a",
+      {
+        className: "font-medium text-[var(--text-primary)] underline decoration-[var(--border-1)] underline-offset-4 hover:text-[var(--text-primary-hover)]",
+        href: trimmedHref,
+        rel: "noreferrer",
+        target: "_blank",
+        children: label
+      }
+    );
+  }
+  const kind = trimmedHref.endsWith("/") ? "folder" : "file";
+  const path = normalizeRichTextLinkHref(trimmedHref, kind);
+  return /* @__PURE__ */ jsx7(
+    WorkspaceReferenceReadonly,
+    {
+      reference: {
+        kind,
+        label,
+        path
+      },
+      onOpenWorkspaceReference
+    }
+  );
+}
+function WorkspaceReferenceReadonly({
+  reference,
+  onOpenWorkspaceReference
+}) {
+  const presentation = getWorkspaceReferencePresentation(
+    reference.label,
+    reference.path
+  );
+  const content = /* @__PURE__ */ jsx7(
+    MentionPill3,
+    {
+      className: richTextWorkspaceReferencePillClassName3,
+      fileKind: reference.kind,
+      kind: "file",
+      label: presentation.displayLabel,
+      removable: false
+    }
+  );
+  return /* @__PURE__ */ jsxs6(Tooltip2, { children: [
+    /* @__PURE__ */ jsx7(TooltipTrigger2, { asChild: true, children: onOpenWorkspaceReference ? /* @__PURE__ */ jsx7(
+      "button",
+      {
+        className: "inline-flex max-w-full appearance-none items-baseline bg-transparent p-0 text-inherit",
+        type: "button",
+        onClick: () => {
+          void onOpenWorkspaceReference(reference);
+        },
+        children: content
+      }
+    ) : /* @__PURE__ */ jsx7("span", { className: "inline-flex max-w-full align-baseline", children: content }) }),
+    /* @__PURE__ */ jsx7(
+      TooltipContent2,
+      {
+        className: "max-w-md whitespace-normal break-all",
+        sideOffset: 8,
+        children: presentation.fullPath
+      }
+    )
+  ] });
+}
+export {
+  RichTextAtEditor,
+  RichTextAtTextarea,
+  RichTextMentionReadonly,
+  RichTextReadonlyContent
+};
+//# sourceMappingURL=index.js.map