@tangle-network/sandbox-ui 0.85.1 → 0.86.0

package/dist/chat.d.ts

@@ -307,6 +307,31 @@ declare function validateComposerFiles(files: File[] | FileList, config: Compose
     rejected: ComposerFileRejection[];
 };
 
+/** A selectable item in the `@`-mention popover. Generic — file semantics live
+ * in the consuming app, not here. */
+interface MentionItem {
+    id: string;
+    label: string;
+    detail?: string;
+    kind?: string;
+}
+/**
+ * Opt-in `@`-mention support. Present ⇒ the composer swaps its textarea for a
+ * TipTap rich input that renders mentions as atomic pills; absent ⇒ exactly
+ * today's plain-textarea behavior. Data-agnostic: the app supplies items.
+ */
+interface AgentComposerMention {
+    /** The character that opens the popover. Default "@". */
+    trigger?: string;
+    /** Async provider called with the query typed after the trigger. */
+    fetchItems: (query: string) => Promise<MentionItem[]>;
+    /** Fired with the mentions currently in the document whenever they change. */
+    onMentionsChange?: (mentions: MentionItem[]) => void;
+    /** Custom row renderer for a popover item. */
+    renderItem?: (item: MentionItem) => React.ReactNode;
+    /** Shown when a fetch resolves to zero items. Default "No matches". */
+    emptyText?: string;
+}
 /** A staged attachment shown as a chip above the input. */
 interface ComposerFile {
     id: string;
@@ -406,6 +431,12 @@ interface AgentComposerProps {
      * message body becomes. Default false.
      */
     canSubmitAttachmentsOnly?: boolean;
+    /**
+     * Opt-in `@`-mentions. When set, the textarea is replaced by a rich input
+     * that renders mentions as atomic pills and serializes them to `@<id>` in
+     * `value`. Omit for exactly today's plain-textarea behavior.
+     */
+    mention?: AgentComposerMention;
     /** Cmd/Ctrl+L focuses the input and shows a hint. Default false. */
     focusShortcut?: boolean;
     /** Minimum textarea rows before it grows. Default 2. */
@@ -432,7 +463,7 @@ interface AgentComposerProps {
  * button (`busy` + `onCancel`), a `controls` override slot for bespoke
  * picker rows, and a Cmd/Ctrl+L focus shortcut.
  */
-declare function AgentComposer({ value, onChange, onSubmit, placeholder, disabled, busy, onCancel, harness, profile, model, reasoning, context, controls, trailing, onAttach, onAttachFolder, attachments, onRemoveFile, onRetryFile, accept, onRejectFiles, dropTitle, dropDescription, canSubmitWhileBusy, canSubmitAttachmentsOnly, focusShortcut, minRows, maxHeight, className, sendLabel, autoFocus, }: AgentComposerProps): react_jsx_runtime.JSX.Element;
+declare function AgentComposer({ value, onChange, onSubmit, placeholder, disabled, busy, onCancel, harness, profile, model, reasoning, context, controls, trailing, onAttach, onAttachFolder, attachments, onRemoveFile, onRetryFile, accept, onRejectFiles, dropTitle, dropDescription, canSubmitWhileBusy, canSubmitAttachmentsOnly, mention, focusShortcut, minRows, maxHeight, className, sendLabel, autoFocus, }: AgentComposerProps): react_jsx_runtime.JSX.Element;
 
 /**
  * Whether `harness` can run `modelId`. Router-backed harnesses, and provider-less
@@ -546,4 +577,4 @@ declare function createFetchTransport(opts: {
     fetchImpl?: typeof fetch;
 }): ArtifactAgentDockTransport;
 
-export { AgentComposer, type AgentComposerProps, type AgentProfileCapability, type AgentProfileDraft, type AgentProfileOption, AgentProfilePicker, type AgentProfilePickerProps, AgentSessionControls, type AgentSessionControlsProps, type AgentSessionHarnessControl, type AgentSessionModelControl, type AgentSessionProfileControl, type AgentSessionReasoningControl, ArtifactAgentDock, type ArtifactAgentDockProps, type ArtifactAgentDockTransport, type ArtifactDockMessage, type ArtifactDockStreamEvent, type ArtifactKind, type ArtifactScope, type ComposerFile, type ComposerFileRejection, type ComposerFileValidationConfig, DEFAULT_REASONING_LEVEL_OPTIONS, HARNESS_REASONING_OPTIONS, type ReasoningLevel, type ReasoningLevelOption, ReasoningLevelPicker, type ReasoningLevelPickerProps, createFetchTransport, isAcceptedType, isModelCompatibleWithHarness, snapModelToHarness, validateComposerFiles };
+export { AgentComposer, type AgentComposerMention, type AgentComposerProps, type AgentProfileCapability, type AgentProfileDraft, type AgentProfileOption, AgentProfilePicker, type AgentProfilePickerProps, AgentSessionControls, type AgentSessionControlsProps, type AgentSessionHarnessControl, type AgentSessionModelControl, type AgentSessionProfileControl, type AgentSessionReasoningControl, ArtifactAgentDock, type ArtifactAgentDockProps, type ArtifactAgentDockTransport, type ArtifactDockMessage, type ArtifactDockStreamEvent, type ArtifactKind, type ArtifactScope, type ComposerFile, type ComposerFileRejection, type ComposerFileValidationConfig, DEFAULT_REASONING_LEVEL_OPTIONS, HARNESS_REASONING_OPTIONS, type MentionItem, type ReasoningLevel, type ReasoningLevelOption, ReasoningLevelPicker, type ReasoningLevelPickerProps, createFetchTransport, isAcceptedType, isModelCompatibleWithHarness, snapModelToHarness, validateComposerFiles };

package/dist/chat.js

@@ -19,7 +19,7 @@ import {
   snapHarnessToModel,
   snapModelToHarness,
   validateComposerFiles
-} from "./chunk-666CEEHW.js";
+} from "./chunk-PKZVCCZ6.js";
 import "./chunk-TK46XFLM.js";
 import "./chunk-2T6KBMLN.js";
 import "./chunk-R4AR3TKR.js";

package/dist/{chunk-666CEEHW.js → chunk-PKZVCCZ6.js}

@@ -1147,6 +1147,7 @@ function imageExtension(file) {
   const fromName = /\.([a-z0-9]+)$/i.exec(file.name)?.[1];
   return fromName?.toLowerCase() ?? "png";
 }
+var MentionEditor = React4.lazy(() => import("./mention-editor-7FLUUWY5.js"));
 function AgentComposer({
   value,
   onChange,
@@ -1173,6 +1174,7 @@ function AgentComposer({
   dropDescription = "They attach to your next message.",
   canSubmitWhileBusy = false,
   canSubmitAttachmentsOnly = false,
+  mention,
   focusShortcut = false,
   minRows = 2,
   maxHeight = 200,
@@ -1181,6 +1183,7 @@ function AgentComposer({
   autoFocus
 }) {
   const textareaRef = React4.useRef(null);
+  const richFocusRef = React4.useRef(null);
   const fileInputRef = React4.useRef(null);
   const folderInputRef = React4.useRef(null);
   const [dragOver, setDragOver] = React4.useState(false);
@@ -1201,17 +1204,21 @@ function AgentComposer({
     function onKeyDown(event) {
       if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "l") {
         event.preventDefault();
-        textareaRef.current?.focus();
+        if (mention) richFocusRef.current?.();
+        else textareaRef.current?.focus();
       }
     }
     document.addEventListener("keydown", onKeyDown);
     return () => document.removeEventListener("keydown", onKeyDown);
-  }, [focusShortcut, disabled]);
+  }, [focusShortcut, disabled, mention]);
   const canSend = !disabled && (!busy || canSubmitWhileBusy) && (value.trim().length > 0 || canSubmitAttachmentsOnly && attachments.length > 0);
   const submit = () => {
     if (!canSend) return;
     onSubmit();
   };
+  const registerRichFocus = React4.useCallback((focus) => {
+    richFocusRef.current = focus;
+  }, []);
   const dropEnabled = Boolean(onAttach);
   const handleDragEnter = (event) => {
     if (!dropEnabled) return;
@@ -1254,23 +1261,28 @@ function AgentComposer({
     const files = event.dataTransfer?.files;
     if (files?.length) deliverFiles(Array.from(files));
   };
+  const renamePastedFiles = (files) => files.map((file) => {
+    if (file.type.startsWith("image/") && isGenericImageName(file.name)) {
+      pastedImageCount.current += 1;
+      return new File(
+        [file],
+        `pasted-image-${pastedImageCount.current}.${imageExtension(file)}`,
+        { type: file.type }
+      );
+    }
+    return file;
+  });
   const handlePaste = (event) => {
     if (!onAttach) return;
     const clipboardFiles = event.clipboardData?.files;
     if (!clipboardFiles || clipboardFiles.length === 0) return;
     event.preventDefault();
-    const files = Array.from(clipboardFiles).map((file) => {
-      if (file.type.startsWith("image/") && isGenericImageName(file.name)) {
-        pastedImageCount.current += 1;
-        return new File(
-          [file],
-          `pasted-image-${pastedImageCount.current}.${imageExtension(file)}`,
-          { type: file.type }
-        );
-      }
-      return file;
-    });
-    deliverFiles(files);
+    deliverFiles(renamePastedFiles(Array.from(clipboardFiles)));
+  };
+  const handleEditorPasteFiles = (clipboardFiles) => {
+    if (!onAttach || clipboardFiles.length === 0) return false;
+    deliverFiles(renamePastedFiles(Array.from(clipboardFiles)));
+    return true;
   };
   const folderChips = attachments.filter((file) => file.kind === "folder");
   const fileChips = attachments.filter((file) => file.kind !== "folder");
@@ -1353,7 +1365,41 @@ function AgentComposer({
               file.id
             );
           }) }),
-          /* @__PURE__ */ jsx4(
+          mention ? /* @__PURE__ */ jsx4(
+            React4.Suspense,
+            {
+              fallback: /* @__PURE__ */ jsx4(
+                "textarea",
+                {
+                  rows: minRows,
+                  value,
+                  disabled: true,
+                  placeholder,
+                  "aria-label": "Message input",
+                  className: cn(
+                    "w-full resize-none bg-transparent px-2 py-1 text-sm leading-relaxed text-foreground outline-none",
+                    "placeholder:text-muted-foreground"
+                  )
+                }
+              ),
+              children: /* @__PURE__ */ jsx4(
+                MentionEditor,
+                {
+                  value,
+                  onChange,
+                  onSubmit: submit,
+                  placeholder,
+                  disabled,
+                  autoFocus,
+                  minRows,
+                  maxHeight,
+                  mention,
+                  registerFocus: registerRichFocus,
+                  onPasteFiles: onAttach ? handleEditorPasteFiles : void 0
+                }
+              )
+            }
+          ) : /* @__PURE__ */ jsx4(
             "textarea",
             {
               ref: textareaRef,

package/dist/globals.css

@@ -1292,6 +1292,9 @@
   .min-w-\[15rem\] {
     min-width: 15rem;
   }
+  .min-w-\[16rem\] {
+    min-width: 16rem;
+  }
   .min-w-\[20px\] {
     min-width: 20px;
   }

package/dist/index.d.ts

@@ -5,7 +5,7 @@ export { AgentWorkbench, ApprovalConfidenceStat, ApprovalItem, ApprovalQueue, Ap
 export { ArtifactView, BRAND_PRISM_THEME, CodeSurface, CodeSurfaceProps, CodeView, CodeViewProps, DiffStats, DiffView, DiffViewProps, FileBreadcrumb, FileBreadcrumbProps, GitStatusBadge, PanelHeader, PanelHeaderProps, PillTabItem, PillTabs, PillTabsProps, PreviewView, PreviewViewProps, SandboxArtifact, SandboxArtifactPane, SandboxArtifactPaneProps, SandboxArtifactTerminal, buildUnifiedPatch, computeDiffStats, resolveLanguage } from './workbench.js';
 export { OpenUIAction, OpenUIActionsNode, OpenUIArtifactRenderer, OpenUIArtifactRendererProps, OpenUIBadgeNode, OpenUICardNode, OpenUICodeNode, OpenUIComponentNode, OpenUIGridNode, OpenUIHeadingNode, OpenUIKeyValueNode, OpenUIMarkdownNode, OpenUIPrimitive, OpenUISeparatorNode, OpenUIStackNode, OpenUIStatNode, OpenUITableNode, OpenUITextNode } from '@tangle-network/ui/openui';
 export { AgentTimeline, AgentTimelineArtifactItem, AgentTimelineCustomItem, AgentTimelineItem, AgentTimelineMessageItem, AgentTimelineProps, AgentTimelineStatusItem, AgentTimelineTone, AgentTimelineToolGroupItem, AgentTimelineToolItem, ChatContainer, ChatContainerProps, ChatMessage, ChatMessageProps, MessageList, MessageListProps, MessageRole, ThinkingIndicator, ThinkingIndicatorProps, UserMessage, UserMessageProps } from '@tangle-network/ui/chat';
-export { AgentComposer, AgentComposerProps, AgentProfileCapability, AgentProfileDraft, AgentProfileOption, AgentProfilePicker, AgentProfilePickerProps, AgentSessionControls, AgentSessionControlsProps, AgentSessionHarnessControl, AgentSessionModelControl, AgentSessionProfileControl, AgentSessionReasoningControl, ArtifactAgentDock, ArtifactAgentDockProps, ArtifactAgentDockTransport, ArtifactDockMessage, ArtifactDockStreamEvent, ArtifactKind, ArtifactScope, ComposerFile, ComposerFileRejection, ComposerFileValidationConfig, DEFAULT_REASONING_LEVEL_OPTIONS, HARNESS_REASONING_OPTIONS, ReasoningLevel, ReasoningLevelOption, ReasoningLevelPicker, ReasoningLevelPickerProps, createFetchTransport, isAcceptedType, isModelCompatibleWithHarness, snapModelToHarness, validateComposerFiles } from './chat.js';
+export { AgentComposer, AgentComposerMention, AgentComposerProps, AgentProfileCapability, AgentProfileDraft, AgentProfileOption, AgentProfilePicker, AgentProfilePickerProps, AgentSessionControls, AgentSessionControlsProps, AgentSessionHarnessControl, AgentSessionModelControl, AgentSessionProfileControl, AgentSessionReasoningControl, ArtifactAgentDock, ArtifactAgentDockProps, ArtifactAgentDockTransport, ArtifactDockMessage, ArtifactDockStreamEvent, ArtifactKind, ArtifactScope, ComposerFile, ComposerFileRejection, ComposerFileValidationConfig, DEFAULT_REASONING_LEVEL_OPTIONS, HARNESS_REASONING_OPTIONS, MentionItem, ReasoningLevel, ReasoningLevelOption, ReasoningLevelPicker, ReasoningLevelPickerProps, createFetchTransport, isAcceptedType, isModelCompatibleWithHarness, snapModelToHarness, validateComposerFiles } from './chat.js';
 export { ExpandedToolDetail, ExpandedToolDetailProps, InlineThinkingItem, InlineThinkingItemProps, InlineToolItem, InlineToolItemProps, LiveDuration, RunGroup, RunGroupProps } from '@tangle-network/ui/run';
 export { CommandPreview, DiffPreview, GlobResultsPreview, GrepResultsPreview, QuestionPreview, WebSearchPreview, WriteFilePreview } from '@tangle-network/ui/tool-previews';
 export { FileArtifactPane, FileArtifactPaneProps, FileNode, FilePreview, FilePreviewProps, FileTabData, FileTabs, FileTabsProps, FileTree, FileTreeProps, FileTreeVisibilityOptions, RichFileTree, RichFileTreeGitEntry, RichFileTreeGitStatus, RichFileTreeProps, RichFileTreeThemeVars, filterFileTree } from '@tangle-network/ui/files';

package/dist/index.js

@@ -91,7 +91,7 @@ import {
   snapHarnessToModel,
   snapModelToHarness,
   validateComposerFiles
-} from "./chunk-666CEEHW.js";
+} from "./chunk-PKZVCCZ6.js";
 import {
   TOOL_CATEGORY_ICONS,
   cn,

package/dist/mention-editor-7FLUUWY5.js

@@ -0,0 +1,480 @@
+import {
+  cn
+} from "./chunk-EI44GEQ5.js";
+import "./chunk-U67V476Y.js";
+
+// src/chat/mention-editor.tsx
+import { mergeAttributes } from "@tiptap/core";
+import Mention from "@tiptap/extension-mention";
+import { EditorContent, useEditor } from "@tiptap/react";
+import StarterKit from "@tiptap/starter-kit";
+import { exitSuggestion } from "@tiptap/suggestion";
+import * as React2 from "react";
+
+// src/chat/mention-list.tsx
+import { Loader2 } from "lucide-react";
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var MentionList = React.forwardRef(
+  function MentionList2({ items, loading, error, emptyText = "No matches", renderItem, onSelect }, ref) {
+    const [selected, setSelected] = React.useState(0);
+    const selectedRef = React.useRef(0);
+    const move = (next) => {
+      selectedRef.current = next;
+      setSelected(next);
+    };
+    React.useEffect(() => {
+      move(0);
+    }, [items]);
+    React.useImperativeHandle(
+      ref,
+      () => ({
+        onKeyDown(event) {
+          const count = items.length;
+          switch (event.key) {
+            case "ArrowDown":
+              if (count > 0) move((selectedRef.current + 1) % count);
+              return true;
+            case "ArrowUp":
+              if (count > 0) move((selectedRef.current - 1 + count) % count);
+              return true;
+            case "Enter":
+            case "Tab":
+              if (count > 0) onSelect(items[selectedRef.current]);
+              return true;
+            default:
+              return false;
+          }
+        }
+      }),
+      [items, onSelect]
+    );
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "listbox",
+        "aria-label": "File mentions",
+        className: cn(
+          "max-h-64 min-w-[16rem] max-w-sm overflow-y-auto rounded-xl border border-[var(--md3-outline-variant)]",
+          "bg-surface-container-high p-1 shadow-lg"
+        ),
+        children: [
+          loading && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-2.5 py-2 text-muted-foreground text-sm", children: [
+            /* @__PURE__ */ jsx(Loader2, { className: "size-3.5 animate-spin" }),
+            "Searching\u2026"
+          ] }),
+          !loading && error && /* @__PURE__ */ jsx("div", { className: "px-2.5 py-2 text-[var(--status-error,#ff4d6d)] text-sm", children: "Couldn\u2019t load matches" }),
+          !loading && !error && items.length === 0 && /* @__PURE__ */ jsx("div", { className: "px-2.5 py-2 text-muted-foreground text-sm", children: emptyText }),
+          !loading && !error && items.map((item, index) => {
+            const active = index === selected;
+            return /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                role: "option",
+                "aria-selected": active,
+                onMouseDown: (event) => {
+                  event.preventDefault();
+                  onSelect(item);
+                },
+                onMouseEnter: () => move(index),
+                className: cn(
+                  "flex w-full items-center gap-2 rounded-lg px-2.5 py-1.5 text-left text-sm",
+                  active ? "bg-primary/10 text-foreground" : "text-muted-foreground"
+                ),
+                children: renderItem ? renderItem(item) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx("span", { className: "truncate text-foreground", children: item.label }),
+                  item.detail && /* @__PURE__ */ jsx("span", { className: "ml-auto truncate text-muted-foreground text-xs", children: item.detail })
+                ] })
+              },
+              item.id
+            );
+          })
+        ]
+      }
+    );
+  }
+);
+
+// src/chat/mention-serialize.ts
+var MENTION_TYPE = "mention";
+function serializeMentionDoc(doc) {
+  return (doc.content ?? []).map(serializeBlock).join("\n");
+}
+function serializeBlock(node) {
+  if (node.type === "paragraph") {
+    return (node.content ?? []).map(serializeInline).join("");
+  }
+  return "";
+}
+function serializeInline(node) {
+  if (node.type === "text") return node.text ?? "";
+  if (node.type === "hardBreak") return "\n";
+  if (node.type === MENTION_TYPE) return `@${node.attrs?.id ?? ""}`;
+  return "";
+}
+function collectMentions(doc) {
+  const out = [];
+  const walk = (node) => {
+    if (node.type === MENTION_TYPE && node.attrs?.id) {
+      out.push({
+        id: node.attrs.id,
+        label: node.attrs.label ?? node.attrs.id,
+        kind: node.attrs.kind ?? void 0
+      });
+    }
+    for (const child of node.content ?? []) walk(child);
+  };
+  walk(doc);
+  return out;
+}
+function parseMentionValue(value, known) {
+  const lines = value.split("\n");
+  return {
+    type: "doc",
+    content: lines.map((line) => ({
+      type: "paragraph",
+      content: parseLine(line, known)
+    }))
+  };
+}
+function parseLine(line, known) {
+  const content = [];
+  let text = "";
+  const flush = () => {
+    if (text) {
+      content.push({ type: "text", text });
+      text = "";
+    }
+  };
+  let i = 0;
+  while (i < line.length) {
+    if (line[i] === "@") {
+      const id = matchKnownId(line, i + 1, known);
+      if (id) {
+        const item = known.get(id);
+        flush();
+        content.push({
+          type: MENTION_TYPE,
+          attrs: {
+            id: item.id,
+            label: item.label,
+            kind: item.kind ?? null
+          }
+        });
+        i += 1 + id.length;
+        continue;
+      }
+    }
+    text += line[i];
+    i += 1;
+  }
+  flush();
+  return content;
+}
+function matchKnownId(line, pos, known) {
+  let best = null;
+  for (const id of known.keys()) {
+    if (id.length === 0) continue;
+    if (best !== null && id.length <= best.length) continue;
+    if (!line.startsWith(id, pos)) continue;
+    const after = pos + id.length;
+    if (after < line.length && !/\s/.test(line[after])) continue;
+    best = id;
+  }
+  return best;
+}
+
+// src/chat/mention-editor.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function buildComposerStarterKit() {
+  return StarterKit.configure({
+    blockquote: false,
+    bold: false,
+    bulletList: false,
+    code: false,
+    codeBlock: false,
+    dropcursor: false,
+    heading: false,
+    horizontalRule: false,
+    italic: false,
+    link: false,
+    listItem: false,
+    listKeymap: false,
+    orderedList: false,
+    strike: false,
+    trailingNode: false,
+    underline: false
+  });
+}
+var MENTION_PILL_CLASS = cn(
+  "rounded-md bg-primary/10 px-1 py-0.5 font-medium text-primary"
+);
+function buildMentionExtension(trigger, suggestion) {
+  return Mention.extend({
+    addAttributes() {
+      return {
+        id: {
+          default: null,
+          parseHTML: (element) => element.getAttribute("data-id"),
+          renderHTML: (attrs) => attrs.id ? { "data-id": attrs.id } : {}
+        },
+        label: {
+          default: null,
+          parseHTML: (element) => element.getAttribute("data-label"),
+          renderHTML: (attrs) => attrs.label ? { "data-label": attrs.label } : {}
+        },
+        kind: {
+          default: null,
+          parseHTML: (element) => element.getAttribute("data-kind"),
+          renderHTML: (attrs) => attrs.kind ? { "data-kind": attrs.kind } : {}
+        }
+      };
+    }
+  }).configure({
+    HTMLAttributes: { class: MENTION_PILL_CLASS },
+    renderText: ({ node }) => `${trigger}${node.attrs.id}`,
+    renderHTML: ({ options, node }) => [
+      "span",
+      mergeAttributes(options.HTMLAttributes, {
+        title: node.attrs.id ?? void 0
+      }),
+      `${trigger}${node.attrs.label ?? node.attrs.id}`
+    ],
+    suggestion
+  });
+}
+var EDITOR_CLASS = cn(
+  "w-full whitespace-pre-wrap break-words bg-transparent px-2 py-1",
+  "text-foreground text-sm leading-relaxed outline-none"
+);
+var FETCH_DEBOUNCE_MS = 100;
+function mentionsKey(mentions) {
+  return mentions.map((item) => item.id).join("\0");
+}
+function MentionEditor({
+  value,
+  onChange,
+  onSubmit,
+  placeholder,
+  disabled,
+  autoFocus,
+  minRows,
+  maxHeight,
+  mention,
+  registerFocus,
+  onPasteFiles
+}) {
+  const trigger = mention.trigger ?? "@";
+  const [anchor, setAnchor] = React2.useState(null);
+  const [open, setOpen] = React2.useState(false);
+  const [query, setQuery] = React2.useState("");
+  const [items, setItems] = React2.useState([]);
+  const [loading, setLoading] = React2.useState(false);
+  const [errored, setErrored] = React2.useState(false);
+  const openRef = React2.useRef(false);
+  const commandRef = React2.useRef(null);
+  const listRef = React2.useRef(null);
+  const knownRef = React2.useRef(/* @__PURE__ */ new Map());
+  const requestIdRef = React2.useRef(0);
+  const clientRectRef = React2.useRef(null);
+  const lastMentionsKeyRef = React2.useRef("");
+  const onSubmitRef = React2.useRef(onSubmit);
+  onSubmitRef.current = onSubmit;
+  const onChangeRef = React2.useRef(onChange);
+  onChangeRef.current = onChange;
+  const onMentionsChangeRef = React2.useRef(mention.onMentionsChange);
+  onMentionsChangeRef.current = mention.onMentionsChange;
+  const onPasteFilesRef = React2.useRef(onPasteFiles);
+  onPasteFilesRef.current = onPasteFiles;
+  const fetchItemsRef = React2.useRef(mention.fetchItems);
+  fetchItemsRef.current = mention.fetchItems;
+  const editor = useEditor(
+    {
+      immediatelyRender: false,
+      editable: !disabled,
+      autofocus: autoFocus ? "end" : false,
+      content: parseMentionValue(value, knownRef.current),
+      editorProps: {
+        attributes: {
+          class: EDITOR_CLASS,
+          role: "textbox",
+          "aria-multiline": "true",
+          "aria-label": "Message input"
+        },
+        handleKeyDown: (_view, event) => {
+          if (event.key !== "Enter" || event.shiftKey) return false;
+          if (event.isComposing || event.keyCode === 229) return false;
+          if (openRef.current) return false;
+          event.preventDefault();
+          onSubmitRef.current();
+          return true;
+        },
+        handlePaste: (_view, event) => {
+          const files = event.clipboardData?.files;
+          if (files && files.length > 0 && onPasteFilesRef.current) {
+            return onPasteFilesRef.current(files);
+          }
+          return false;
+        }
+      },
+      onUpdate: ({ editor: editor2 }) => {
+        const json = editor2.getJSON();
+        onChangeRef.current(serializeMentionDoc(json));
+        const mentions = collectMentions(json);
+        for (const item of mentions) knownRef.current.set(item.id, item);
+        lastMentionsKeyRef.current = mentionsKey(mentions);
+        onMentionsChangeRef.current?.(mentions);
+      },
+      extensions: [
+        buildComposerStarterKit(),
+        buildMentionExtension(trigger, {
+          char: trigger,
+          allowSpaces: false,
+          // Items are fetched by this component (so it can model loading and
+          // error states), not by the suggestion plugin.
+          items: () => [],
+          command: ({ editor: editor2, range, props }) => {
+            const item = props;
+            editor2.chain().focus().insertContentAt(range, [
+              {
+                type: "mention",
+                attrs: {
+                  id: item.id,
+                  label: item.label,
+                  kind: item.kind ?? null
+                }
+              },
+              { type: "text", text: " " }
+            ]).run();
+            knownRef.current.set(item.id, item);
+          },
+          render: () => ({
+            onStart: (props) => {
+              openRef.current = true;
+              commandRef.current = props.command;
+              clientRectRef.current = props.clientRect ?? null;
+              setOpen(true);
+              setQuery(props.query);
+              setAnchor(props.clientRect?.() ?? null);
+            },
+            onUpdate: (props) => {
+              commandRef.current = props.command;
+              clientRectRef.current = props.clientRect ?? null;
+              setQuery(props.query);
+              setAnchor(props.clientRect?.() ?? null);
+            },
+            onKeyDown: (props) => {
+              if (props.event.key === "Escape") {
+                exitSuggestion(props.view);
+                return true;
+              }
+              return listRef.current?.onKeyDown(props.event) ?? false;
+            },
+            onExit: () => {
+              openRef.current = false;
+              commandRef.current = null;
+              setOpen(false);
+              setItems([]);
+              setLoading(false);
+              setErrored(false);
+            }
+          })
+        })
+      ]
+    },
+    []
+  );
+  React2.useEffect(() => {
+    if (!open) return;
+    const requestId = requestIdRef.current += 1;
+    setLoading(true);
+    setErrored(false);
+    const timer = setTimeout(() => {
+      Promise.resolve(fetchItemsRef.current(query)).then((results) => {
+        if (requestId !== requestIdRef.current) return;
+        for (const item of results) knownRef.current.set(item.id, item);
+        setItems(results);
+        setLoading(false);
+      }).catch(() => {
+        if (requestId !== requestIdRef.current) return;
+        setErrored(true);
+        setLoading(false);
+      });
+    }, FETCH_DEBOUNCE_MS);
+    return () => clearTimeout(timer);
+  }, [open, query]);
+  React2.useEffect(() => {
+    if (!open) return;
+    const reposition = () => setAnchor(clientRectRef.current?.() ?? null);
+    window.addEventListener("scroll", reposition, true);
+    window.addEventListener("resize", reposition);
+    return () => {
+      window.removeEventListener("scroll", reposition, true);
+      window.removeEventListener("resize", reposition);
+    };
+  }, [open]);
+  React2.useEffect(() => {
+    if (!editor) return;
+    if (serializeMentionDoc(editor.getJSON()) === value) return;
+    const doc = parseMentionValue(value, knownRef.current);
+    editor.commands.setContent(doc, { emitUpdate: false });
+    const mentions = collectMentions(doc);
+    const key = mentionsKey(mentions);
+    if (key !== lastMentionsKeyRef.current) {
+      lastMentionsKeyRef.current = key;
+      onMentionsChangeRef.current?.(mentions);
+    }
+  }, [editor, value]);
+  React2.useEffect(() => {
+    editor?.setEditable(!disabled);
+  }, [editor, disabled]);
+  React2.useEffect(() => {
+    if (!editor || !registerFocus) return;
+    registerFocus(() => editor.commands.focus());
+  }, [editor, registerFocus]);
+  return /* @__PURE__ */ jsxs2("div", { className: "relative", children: [
+    /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        className: "overflow-y-auto",
+        style: { maxHeight, minHeight: `${minRows * 1.5}rem` },
+        children: [
+          /* @__PURE__ */ jsx2(EditorContent, { editor }),
+          value.length === 0 && /* @__PURE__ */ jsx2("div", { className: "pointer-events-none absolute top-1 left-2 text-muted-foreground text-sm leading-relaxed", children: placeholder })
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsx2(
+      "div",
+      {
+        className: "absolute z-20",
+        style: anchorStyle(anchor),
+        "data-testid": "mention-popover",
+        children: /* @__PURE__ */ jsx2(
+          MentionList,
+          {
+            ref: listRef,
+            items,
+            loading,
+            error: errored,
+            emptyText: mention.emptyText,
+            renderItem: mention.renderItem,
+            onSelect: (item) => commandRef.current?.(item)
+          }
+        )
+      }
+    )
+  ] });
+}
+function anchorStyle(rect) {
+  if (!rect || rect.left === 0 && rect.bottom === 0) {
+    return { position: "absolute", top: "100%", left: 0 };
+  }
+  return { position: "fixed", top: rect.bottom + 4, left: rect.left };
+}
+export {
+  buildComposerStarterKit,
+  buildMentionExtension,
+  MentionEditor as default
+};

package/dist/styles.css

@@ -1292,6 +1292,9 @@
   .min-w-\[15rem\] {
     min-width: 15rem;
   }
+  .min-w-\[16rem\] {
+    min-width: 16rem;
+  }
   .min-w-\[20px\] {
     min-width: 20px;
   }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tangle-network/sandbox-ui",
-  "version": "0.85.1",
-  "description": "Unified UI component library for Tangle Sandbox \u2014 primitives, chat, dashboard, terminal, editor, and workspace components",
+  "version": "0.86.0",
+  "description": "Unified UI component library for Tangle Sandbox — primitives, chat, dashboard, terminal, editor, and workspace components",
   "repository": {
     "type": "git",
     "url": "https://github.com/tangle-network/sandbox-ui"
@@ -192,8 +192,11 @@
     "@tiptap/core": "^3.20.4",
     "@tiptap/extension-collaboration": "^3.20.4",
     "@tiptap/extension-collaboration-caret": "^3.7.0",
+    "@tiptap/extension-mention": "^3.22.5",
+    "@tiptap/pm": "^3.22.5",
     "@tiptap/react": "^3.20.4",
     "@tiptap/starter-kit": "^3.20.4",
+    "@tiptap/suggestion": "^3.22.5",
     "@types/react": "^19.1.2",
     "@types/react-dom": "^19.1.2",
     "@xterm/addon-fit": "^0.11.0",