@streamsai/ui 0.0.0-stage → 0.1.1

package/dist/components/ui/rich-text-editor.js

@@ -0,0 +1,2419 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { $createParagraphNode, $createTextNode, $findMatchingParent, $getNodeByKey, $getRoot, $getSelection, $insertNodes, $isElementNode, $isLineBreakNode, $isParagraphNode, $isRangeSelection, $isRootNode, $isTextNode, $nodesOfType, $setSelection, COMMAND_PRIORITY_EDITOR, COMMAND_PRIORITY_HIGH, COMMAND_PRIORITY_LOW, COMMAND_PRIORITY_NORMAL, DROP_COMMAND, FORMAT_TEXT_COMMAND, HISTORIC_TAG, INSERT_PARAGRAPH_COMMAND, KEY_ENTER_COMMAND, KEY_TAB_COMMAND, PASTE_COMMAND, PASTE_TAG, stopLexicalPropagation, SELECTION_CHANGE_COMMAND, TextNode, createCommand, DecoratorNode, } from 'lexical';
+import { LexicalComposer } from '@lexical/react/LexicalComposer';
+import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
+import { ContentEditable } from '@lexical/react/LexicalContentEditable';
+import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
+import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';
+import { ListPlugin } from '@lexical/react/LexicalListPlugin';
+import { LinkPlugin } from '@lexical/react/LexicalLinkPlugin';
+import { AutoLinkPlugin } from '@lexical/react/LexicalAutoLinkPlugin';
+import { AutoFocusPlugin } from '@lexical/react/LexicalAutoFocusPlugin';
+import { MarkdownShortcutPlugin } from '@lexical/react/LexicalMarkdownShortcutPlugin';
+import { LexicalTypeaheadMenuPlugin, MenuOption, useBasicTypeaheadTriggerMatch, } from '@lexical/react/LexicalTypeaheadMenuPlugin';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { $createHeadingNode, $isHeadingNode, HeadingNode, QuoteNode } from '@lexical/rich-text';
+import { $insertNodeToNearestRoot } from '@lexical/utils';
+import { $isListItemNode, $isListNode, INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND, ListNode, ListItemNode, REMOVE_LIST_COMMAND, } from '@lexical/list';
+import { $createLinkNode, $isLinkNode, LinkNode, AutoLinkNode } from '@lexical/link';
+import { $createCodeNode, $isCodeNode, CodeNode } from '@lexical/code';
+import { BOLD_ITALIC_STAR, BOLD_ITALIC_UNDERSCORE, BOLD_STAR, BOLD_UNDERSCORE, CODE, INLINE_CODE, ITALIC_STAR, ITALIC_UNDERSCORE, LINK, ORDERED_LIST, STRIKETHROUGH, UNORDERED_LIST, } from '@lexical/markdown';
+import { cn } from '../../lib/utils.js';
+import { Collapse, motion, useReducedMotion } from '../../motion/index.js';
+import { loops } from '../../motion/config.js';
+import { detectTextDirection, hasStrongCharacter } from '../../lib/text-direction.js';
+import { AgentAvatar } from './agent-avatar.js';
+import { ProviderBadge } from './provider-badge.js';
+import { Avatar, AvatarFallback, AvatarImage } from './avatar.js';
+import { Button } from './button.js';
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from './dialog.js';
+import { Input } from './input.js';
+import { Label } from './label.js';
+import { Separator } from './separator.js';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './tooltip.js';
+import { Bold, Bot, Code, Image as ImageIcon, Italic, Link as LinkIcon, List, ListOrdered, Lock, Strikethrough, Trash, TriangleAlert, Users, } from '../../icons/index.js';
+export const isAllMentionCandidate = (candidate) => candidate.kind === 'all';
+/** Default page size for the mention picker (first paint + each scroll fetch). */
+export const MENTION_PAGE_SIZE = 10;
+/** Default page size for the emoji shortcode typeahead. */
+export const EMOJI_TYPEAHEAD_LIMIT = 24;
+/** Default page size for the stream chip typeahead. */
+export const STREAM_TYPEAHEAD_LIMIT = 10;
+/**
+ * Punctuation that ends a `:` emoji query. Default Lexical punctuation includes `_`, `-` and
+ * `+`, which would truncate shortcodes like `thumbsup`, `t-rex` and `+1`. Closing `:` stays so
+ * typing `:smile:` closes the menu (and the shortcode-replace plugin can expand it).
+ */
+const EMOJI_TYPEAHEAD_PUNCTUATION = '\\.,\\*\\?\\$\\@\\|#{}\\(\\)\\^\\[\\]\\\\/!%\'"~=<>:;';
+const mentionInitials = (name) => name
+    .split(/\s+/)
+    .filter(Boolean)
+    .slice(0, 2)
+    .map((part) => part[0]?.toUpperCase() ?? '')
+    .join('') || '?';
+/** Custom node that round-trips with contracts/chat/adapters/lexical.ts */
+export class MentionNode extends DecoratorNode {
+    __userId;
+    __displayName;
+    __all;
+    static getType() {
+        return 'mention';
+    }
+    static clone(node) {
+        return new MentionNode({ userId: node.__userId, displayName: node.__displayName, all: node.__all }, node.__key);
+    }
+    constructor(payload, key) {
+        super(key);
+        this.__userId = payload.userId;
+        this.__displayName = payload.displayName;
+        this.__all = payload.all;
+    }
+    createDOM(_config) {
+        const span = document.createElement('span');
+        span.className = 'mention';
+        span.dir = 'auto';
+        return span;
+    }
+    updateDOM() {
+        return false;
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    static importJSON(serialized) {
+        return new MentionNode({
+            userId: serialized.userId,
+            displayName: serialized.displayName,
+            all: serialized.all,
+        });
+    }
+    exportJSON() {
+        return {
+            type: 'mention',
+            version: 1,
+            userId: this.__userId,
+            displayName: this.__displayName,
+            all: this.__all,
+        };
+    }
+    decorate() {
+        const label = this.__all ? '@all' : `@${this.__displayName ?? this.__userId ?? 'unknown'}`;
+        return (_jsx("span", { dir: "auto", className: "inline-flex items-center rounded bg-primary/10 px-1 text-primary", "data-mention": true, children: label }));
+    }
+    isInline() {
+        return true;
+    }
+}
+export const $isMentionNode = (node) => node instanceof MentionNode;
+/** Custom node that round-trips with contracts/chat/adapters/lexical.ts */
+export class CycleTriggerNode extends DecoratorNode {
+    __triggerName;
+    static getType() {
+        return 'cycle-trigger';
+    }
+    static clone(node) {
+        return new CycleTriggerNode({ triggerName: node.__triggerName }, node.__key);
+    }
+    constructor(payload, key) {
+        super(key);
+        this.__triggerName = payload.triggerName;
+    }
+    createDOM(_config) {
+        const span = document.createElement('span');
+        span.className = 'cycle-trigger';
+        span.dir = 'auto';
+        return span;
+    }
+    updateDOM() {
+        return false;
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    static importJSON(serialized) {
+        return new CycleTriggerNode({ triggerName: serialized.triggerName });
+    }
+    exportJSON() {
+        return {
+            type: 'cycle-trigger',
+            version: 1,
+            triggerName: this.__triggerName,
+        };
+    }
+    decorate() {
+        return _jsx(CycleTriggerView, { triggerName: this.__triggerName });
+    }
+    isInline() {
+        return true;
+    }
+}
+/** Host answer for a trigger chip: why it cannot run, or null. RichTextEditor provides it. */
+const CycleTriggerIssueCtx = React.createContext(null);
+function CycleTriggerView({ triggerName }) {
+    const issue = React.useContext(CycleTriggerIssueCtx)?.(triggerName) ?? null;
+    const chip = (_jsxs("span", { dir: "auto", className: "inline-flex items-center gap-1 rounded bg-selected/70 px-1.5 text-secondary-foreground", "data-cycle-trigger": true, "data-issue": issue ? '' : undefined, children: ["/", triggerName, issue ? (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { render: _jsx("span", { className: "inline-flex text-destructive", "aria-label": issue }), children: _jsx(TriangleAlert, { className: "size-3.5", "aria-hidden": true }) }), _jsx(TooltipContent, { children: issue })] })) : null] }));
+    return issue ? _jsx(TooltipProvider, { children: chip }) : chip;
+}
+export const $createCycleTriggerNode = (triggerName) => new CycleTriggerNode({ triggerName });
+export const $isCycleTriggerNode = (node) => node instanceof CycleTriggerNode;
+/** Custom node that round-trips with contracts/chat/adapters/lexical.ts (`type: 'stream-chip'`). */
+export class StreamChipNode extends DecoratorNode {
+    __streamId;
+    __title;
+    __visibility;
+    static getType() {
+        return 'stream-chip';
+    }
+    static clone(node) {
+        return new StreamChipNode({ streamId: node.__streamId, title: node.__title, visibility: node.__visibility }, node.__key);
+    }
+    constructor(payload, key) {
+        super(key);
+        this.__streamId = payload.streamId;
+        this.__title = payload.title;
+        this.__visibility = payload.visibility;
+    }
+    createDOM(_config) {
+        const span = document.createElement('span');
+        span.className = 'stream-chip';
+        span.dir = 'auto';
+        return span;
+    }
+    updateDOM() {
+        return false;
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    static importJSON(serialized) {
+        return new StreamChipNode({
+            streamId: serialized.streamId,
+            title: serialized.title,
+            visibility: serialized.visibility,
+        });
+    }
+    exportJSON() {
+        return {
+            type: 'stream-chip',
+            version: 1,
+            streamId: this.__streamId,
+            title: this.__title,
+            ...(this.__visibility ? { visibility: this.__visibility } : {}),
+        };
+    }
+    decorate() {
+        return _jsx(StreamChipView, { title: this.__title, visibility: this.__visibility });
+    }
+    isInline() {
+        return true;
+    }
+}
+export const $createStreamChipNode = (streamId, title, visibility) => new StreamChipNode({ streamId, title, visibility });
+export const $isStreamChipNode = (node) => node instanceof StreamChipNode;
+/** Labels for inserted-chip tooltips; RichTextEditorInner provides the resolved editor copy. */
+const DEFAULT_STREAM_CHIP_LABELS = {
+    streamPrivate: 'Private',
+    streamPublic: 'Public',
+    streamFallback: 'stream',
+};
+const StreamChipLabelsCtx = React.createContext(DEFAULT_STREAM_CHIP_LABELS);
+function StreamChipView({ title, visibility, }) {
+    const labels = React.useContext(StreamChipLabelsCtx);
+    const privateStream = visibility === 'private';
+    const chipClass = 'inline-flex items-center gap-0.5 rounded bg-primary/10 px-1 text-primary';
+    const label = (_jsxs(_Fragment, { children: [privateStream ? _jsx(Lock, { className: "size-3 shrink-0", "aria-hidden": true }) : null, "~", title || labels.streamFallback] }));
+    if (!visibility) {
+        return (_jsx("span", { dir: "auto", className: chipClass, "data-stream-chip": true, "data-visibility": "unset", children: label }));
+    }
+    const visibilityLabel = privateStream ? labels.streamPrivate : labels.streamPublic;
+    return (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { render: _jsx("span", { dir: "auto", className: chipClass, "data-stream-chip": true, "data-visibility": visibility }), children: label }), _jsx(TooltipContent, { children: _jsxs("span", { className: "inline-flex items-center gap-1.5", children: [privateStream ? _jsx(Lock, { className: "size-3.5 shrink-0", "aria-hidden": true }) : null, visibilityLabel] }) })] }) }));
+}
+/**
+ * Account custom emoji in the composer — renders the image; serializes as `custom-emoji` and the
+ * lexical adapter stores `:name:` text in MessageContent.
+ */
+export class CustomEmojiNode extends DecoratorNode {
+    __name;
+    __imageUrl;
+    static getType() {
+        return 'custom-emoji';
+    }
+    static clone(node) {
+        return new CustomEmojiNode({ name: node.__name, imageUrl: node.__imageUrl }, node.__key);
+    }
+    constructor(payload, key) {
+        super(key);
+        this.__name = payload.name;
+        this.__imageUrl = payload.imageUrl;
+    }
+    createDOM(_config) {
+        const span = document.createElement('span');
+        span.className = 'custom-emoji';
+        span.dir = 'auto';
+        return span;
+    }
+    updateDOM() {
+        return false;
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    static importJSON(serialized) {
+        return new CustomEmojiNode({ name: serialized.name, imageUrl: serialized.imageUrl });
+    }
+    exportJSON() {
+        return {
+            type: 'custom-emoji',
+            version: 1,
+            name: this.__name,
+            imageUrl: this.__imageUrl,
+        };
+    }
+    decorate() {
+        return (_jsx("img", { src: this.__imageUrl, alt: `:${this.__name}:`, draggable: false, "data-custom-emoji": true, className: "mx-0.5 inline-block size-5 object-contain align-text-bottom" }));
+    }
+    isInline() {
+        return true;
+    }
+    getTextContent() {
+        return `:${this.__name}:`;
+    }
+}
+export const $createCustomEmojiNode = (name, imageUrl) => new CustomEmojiNode({ name, imageUrl });
+export const $isCustomEmojiNode = (node) => node instanceof CustomEmojiNode;
+/**
+ * Replaces the `/query` text at the start of the first paragraph with a `CycleTriggerNode` and a
+ * space. Refused (no-op) while the editor already holds a trigger: one `/trigger` per message.
+ */
+export const INSERT_CYCLE_TRIGGER_COMMAND = createCommand('INSERT_CYCLE_TRIGGER_COMMAND');
+/** Inserts a `CustomEmojiNode` at the caret (picker / host-driven). */
+export const INSERT_CUSTOM_EMOJI_COMMAND = createCommand('INSERT_CUSTOM_EMOJI_COMMAND');
+// ── URL matcher for AutoLinkPlugin ───────────────────────────────────────────
+/** Hostnames with a TLD, plus `localhost` (with optional port) for local / Docker paste. */
+const URL_MATCHER = /((https?:\/\/(www\.)?)|(www\.))[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)|(https?:\/\/localhost(?::\d+)?(?:\/[-a-zA-Z0-9()@:%_+.~#?&//=]*)?)/i;
+const MATCHERS = [
+    (text) => {
+        const match = URL_MATCHER.exec(text);
+        if (!match)
+            return null;
+        const fullMatch = match[0];
+        return {
+            index: match.index,
+            length: fullMatch.length,
+            text: fullMatch,
+            url: fullMatch.startsWith('http') ? fullMatch : `https://${fullMatch}`,
+            attributes: { rel: 'noopener noreferrer', target: '_blank' },
+        };
+    },
+];
+/** Stable identity — AutoLinkPlugin re-registers when this array reference changes. */
+const AUTO_LINK_EXCLUDE_PARENTS = [$isCodeNode];
+// ── Code-block guards ────────────────────────────────────────────────────────
+/**
+ * Fenced code is source text: skip prose transforms (typeahead, paste-as-link, …)
+ * when the selection intersects a CodeNode.
+ */
+function $selectionIntersectsCodeBlock() {
+    const selection = $getSelection();
+    if (!$isRangeSelection(selection))
+        return false;
+    for (const node of selection.getNodes()) {
+        if ($isCodeNode(node) || $findMatchingParent(node, $isCodeNode))
+            return true;
+    }
+    const anchor = selection.anchor.getNode();
+    return $isCodeNode(anchor) || Boolean($findMatchingParent(anchor, $isCodeNode));
+}
+/**
+ * True while the latest editor update only moved the caret. Typeahead menus open on edits, never
+ * on caret moves: an open menu takes ArrowUp/ArrowDown, so a menu that opens when the caret lands
+ * at the end of `#42` or `@bob` traps the caret on that line.
+ */
+const lastUpdateMovedCaretOnly = new WeakMap();
+/** Must render before the typeahead plugins: Lexical runs update listeners in registration order. */
+function TypeaheadEditGatePlugin() {
+    const [editor] = useLexicalComposerContext();
+    React.useEffect(() => editor.registerUpdateListener(({ dirtyLeaves, dirtyElements }) => {
+        const edited = dirtyLeaves.size > 0 || [...dirtyElements.values()].some(Boolean);
+        lastUpdateMovedCaretOnly.set(editor, !edited);
+    }), [editor]);
+    return null;
+}
+/** Wrap a typeahead trigger so `@` / `:` / `#` never open inside a code block or on a caret move. */
+function useTypeaheadOutsideCode(base) {
+    return React.useCallback((text, editor) => {
+        if (lastUpdateMovedCaretOnly.get(editor))
+            return null;
+        if ($selectionIntersectsCodeBlock())
+            return null;
+        return base(text, editor);
+    }, [base]);
+}
+// ── EnterSubmitPlugin ────────────────────────────────────────────────────────
+const CODE_FENCE_LINE = /^[ \t]*`{3,}([\w-]+)?[ \t]*$/;
+/**
+ * A paragraph that is only a ``` fence (optionally with a language) becomes an empty code
+ * block with the caret inside it. Lexical's markdown CODE transformer does the same on Enter;
+ * the composer moves that to Shift+Enter so Enter is always free to send.
+ */
+function $openCodeBlockFromFence() {
+    const selection = $getSelection();
+    if (!$isRangeSelection(selection) || !selection.isCollapsed())
+        return false;
+    const block = selection.anchor.getNode().getTopLevelElement();
+    if (!$isParagraphNode(block))
+        return false;
+    const match = CODE_FENCE_LINE.exec(block.getTextContent());
+    if (!match)
+        return false;
+    const code = $createCodeNode(match[1] || undefined);
+    block.replace(code);
+    code.select();
+    return true;
+}
+/** Backticks closing the paragraph, counted across the trailing text leaves (formatting splits them). */
+function $trailingBacktickRun(block) {
+    let total = 0;
+    for (let node = block.getLastChild(); $isTextNode(node); node = node.getPreviousSibling()) {
+        const text = node.getTextContent();
+        const run = text.length - text.replace(/`+$/, '').length;
+        total += run;
+        if (run < text.length)
+            break;
+    }
+    return total;
+}
+/** Removes the closing backticks and the space before them; the paragraph may end up empty. */
+function $stripTrailingBackticks(block, count) {
+    let remaining = count;
+    for (let node = block.getLastChild(); remaining > 0 && $isTextNode(node);) {
+        const previous = node.getPreviousSibling();
+        const text = node.getTextContent();
+        const cut = Math.min(remaining, text.length - text.replace(/`+$/, '').length);
+        remaining -= cut;
+        if (cut === text.length)
+            node.remove();
+        else
+            node.setTextContent(text.slice(0, -cut));
+        node = previous;
+    }
+    const last = block.getLastChild();
+    if ($isTextNode(last)) {
+        const trimmed = last.getTextContent().trimEnd();
+        if (trimmed === '')
+            last.remove();
+        else
+            last.setTextContent(trimmed);
+    }
+}
+/**
+ * Typing the third backtick at the end of a top-level paragraph opens a code block right away, no
+ * Shift+Enter needed. On an empty line the paragraph becomes the block; after other text the text
+ * stays in its paragraph (minus the fence and the space before it) and the block opens on the line
+ * below. Only a one-character append that makes the paragraph end in exactly three backticks
+ * (counted across formatting boundaries) counts, so pasted or restored text, a fourth backtick, a
+ * fence with text after the caret, list items and undo/redo never convert. A language tag can no
+ * longer follow the fence by typing; Shift+Enter on a pasted or seeded ```ts line still opens a
+ * tagged block.
+ */
+function CodeFenceOnThirdBacktickPlugin() {
+    const [editor] = useLexicalComposerContext();
+    React.useEffect(() => editor.registerUpdateListener(({ editorState, prevEditorState, dirtyLeaves, tags }) => {
+        if (dirtyLeaves.size !== 1 || tags.has(HISTORIC_TAG) || tags.has(PASTE_TAG))
+            return;
+        const [key] = dirtyLeaves;
+        if (key === undefined)
+            return;
+        const typed = editorState.read(() => {
+            const selection = $getSelection();
+            if (!$isRangeSelection(selection) || !selection.isCollapsed())
+                return false;
+            const { anchor } = selection;
+            if (anchor.type !== 'text' || anchor.key !== key)
+                return false;
+            const node = $getNodeByKey(key);
+            if (!$isTextNode(node) || node.getNextSibling() !== null)
+                return false;
+            const text = node.getTextContent();
+            if (anchor.offset !== text.length || !text.endsWith('`'))
+                return false;
+            const block = node.getParent();
+            if (!$isParagraphNode(block) || !$isRootNode(block.getParent()))
+                return false;
+            if ($trailingBacktickRun(block) !== 3)
+                return false;
+            const before = prevEditorState.read(() => $getNodeByKey(key)?.getTextContent() ?? '');
+            return before === text.slice(0, -1);
+        });
+        if (!typed)
+            return;
+        editor.update(() => {
+            const node = $getNodeByKey(key);
+            const block = $isTextNode(node) ? node.getParent() : null;
+            if (!$isParagraphNode(block) || $trailingBacktickRun(block) !== 3)
+                return;
+            $stripTrailingBackticks(block, 3);
+            const code = $createCodeNode();
+            if (block.isEmpty())
+                block.replace(code);
+            else
+                block.insertAfter(code);
+            code.select();
+        });
+    }), [editor]);
+    return null;
+}
+/**
+ * Shift+Enter on a trailing empty line inside a code block exits it (Lexical's stock exit needs
+ * two blank lines and runs at LOW — Enter is already taken for submit, so we own this here).
+ * Strips every trailing linebreak so the fence does not keep the blank line(s) used to leave.
+ */
+function $exitCodeBlockOnEmptyLine() {
+    const selection = $getSelection();
+    if (!$isRangeSelection(selection) || !selection.isCollapsed())
+        return false;
+    const { anchor } = selection;
+    if (anchor.type !== 'element')
+        return false;
+    const codeNode = anchor.getNode();
+    if (!$isCodeNode(codeNode))
+        return false;
+    const childrenSize = codeNode.getChildrenSize();
+    if (childrenSize < 1 || anchor.offset !== childrenSize)
+        return false;
+    if (!$isLineBreakNode(codeNode.getLastChild()))
+        return false;
+    while ($isLineBreakNode(codeNode.getLastChild())) {
+        codeNode.getLastChild().remove();
+    }
+    const paragraph = $createParagraphNode();
+    codeNode.insertAfter(paragraph);
+    paragraph.select();
+    return true;
+}
+/**
+ * Enter (without Shift) submits — always, even inside a code block, a list item or after a
+ * ``` line — unless `sendOnEnter` is false (mobile: only the send button submits). Priority is
+ * NORMAL so:
+ * - markdown shortcuts (LOW) never see Enter, so ``` + Enter sends instead of opening a block
+ * - typeahead menus (HIGH) still win when open, so Enter picks a mention or emoji
+ * - RichTextPlugin's default Enter (EDITOR) does not steal submit
+ *
+ * Shift+Enter — and plain Enter when `sendOnEnter` is false — opens a code block from a ``` line,
+ * exits a code block from a trailing empty line (stripping those blank lines), otherwise stays a
+ * soft line break inside a code block, and outside code dispatches INSERT_PARAGRAPH
+ * (HAC `SendOnEnterPlugin` parity) so a new list item is created inside bullets/numbers.
+ */
+/** Deepest sub-list Tab can create; keeps nesting readable in a chat bubble. */
+const MAX_LIST_INDENT = 4;
+/**
+ * Tab / Shift+Tab indent / outdent a list item (a nested sub-list). Outside a list Tab is left to
+ * the browser so focus can leave the composer. EDITOR priority: an open typeahead claims Tab first.
+ */
+function ListTabIndentPlugin() {
+    const [editor] = useLexicalComposerContext();
+    React.useEffect(() => editor.registerCommand(KEY_TAB_COMMAND, (event) => {
+        const selection = $getSelection();
+        if (!$isRangeSelection(selection))
+            return false;
+        const items = new Set();
+        for (const node of [selection.anchor.getNode(), ...selection.getNodes()]) {
+            const item = $findMatchingParent(node, $isListItemNode);
+            if (item)
+                items.add(item);
+        }
+        if (items.size === 0)
+            return false;
+        event.preventDefault();
+        // setIndent nests / un-nests the item into a sub-list (@lexical/list $handleIndent).
+        for (const item of items) {
+            const indent = item.getIndent();
+            if (event.shiftKey) {
+                if (indent > 0)
+                    item.setIndent(indent - 1);
+            }
+            else if (indent < MAX_LIST_INDENT) {
+                item.setIndent(indent + 1);
+            }
+        }
+        return true;
+    }, COMMAND_PRIORITY_EDITOR), [editor]);
+    return null;
+}
+function EnterSubmitPlugin({ onSubmit, sendOnEnter, }) {
+    const [editor] = useLexicalComposerContext();
+    React.useEffect(() => {
+        return editor.registerCommand(KEY_ENTER_COMMAND, (event) => {
+            const newlineKey = event?.shiftKey || !sendOnEnter;
+            if (!newlineKey && onSubmit) {
+                event?.preventDefault();
+                onSubmit();
+                return true;
+            }
+            // Inside a code block: exit from a trailing empty line, else let Lexical insert a linebreak.
+            if ($selectionIntersectsCodeBlock()) {
+                if ($exitCodeBlockOnEmptyLine()) {
+                    event?.preventDefault();
+                    return true;
+                }
+                return false;
+            }
+            event?.preventDefault();
+            if ($openCodeBlockFromFence())
+                return true;
+            editor.dispatchCommand(INSERT_PARAGRAPH_COMMAND, undefined);
+            return true;
+        }, COMMAND_PRIORITY_NORMAL);
+    }, [editor, onSubmit, sendOnEnter]);
+    return null;
+}
+/**
+ * Inserts `request.text` at the current selection (or into a fresh paragraph)
+ * and focuses the editor so typeahead plugins see a real update — unlike
+ * remounting with a new `value`, which does not open `@` / `/` menus.
+ *
+ * Hosts must clear the request after `onInserted` (and before any remount that
+ * bumps the editor `key`) — otherwise a remount resets `handledNonce` and the
+ * same request re-inserts `@` / `/` and re-opens the typeahead.
+ */
+function InsertTextAtCaretPlugin({ request, onInserted, }) {
+    const [editor] = useLexicalComposerContext();
+    const handledNonce = React.useRef(null);
+    const stopRecheck = React.useRef(null);
+    React.useEffect(() => () => stopRecheck.current?.(), []);
+    React.useEffect(() => {
+        if (!request || handledNonce.current === request.nonce)
+            return;
+        handledNonce.current = request.nonce;
+        const { text } = request;
+        // A keyboard this focus raised can still move the viewport after the text lands; Lexical closes
+        // an open typeahead whose anchor a move leaves behind. Re-run its trigger check after each move.
+        stopRecheck.current?.();
+        stopRecheck.current = recheckTypeaheadOnViewportMoves(editor);
+        // Focus first so the DOM selection is inside the editor when `@` lands; the typeahead reads
+        // the DOM selection, so inserting before focus (iOS WebKit) leaves the menu closed.
+        editor.focus(() => editor.update(() => {
+            const selection = $getSelection();
+            if ($isRangeSelection(selection)) {
+                selection.insertText(text);
+                return;
+            }
+            const root = $getRoot();
+            const last = root.getLastChild();
+            const paragraph = $isElementNode(last) ? last : $createParagraphNode();
+            if (paragraph.getParent() === null)
+                root.append(paragraph);
+            const node = $createTextNode(text);
+            paragraph.append(node);
+            node.selectEnd();
+        }), { defaultSelection: 'rootEnd' });
+        onInserted?.(request.nonce);
+    }, [editor, request, onInserted]);
+    return null;
+}
+const TYPEAHEAD_RECHECK_MS = 1500;
+/** For a moment, re-runs the typeahead trigger check (an update listener) after viewport moves. */
+const recheckTypeaheadOnViewportMoves = (editor) => {
+    const viewport = typeof window === 'undefined' ? null : window.visualViewport;
+    if (!viewport)
+        return () => undefined;
+    let frame = 0;
+    const recheck = () => {
+        cancelAnimationFrame(frame);
+        // After the frame in which Lexical repositions its anchor for this move.
+        frame = requestAnimationFrame(() => {
+            if (editor.getRootElement()?.contains(document.activeElement)) {
+                editor.update(() => $getRoot().markDirty());
+            }
+        });
+    };
+    const stop = () => {
+        clearTimeout(timer);
+        cancelAnimationFrame(frame);
+        viewport.removeEventListener('resize', recheck);
+        viewport.removeEventListener('scroll', recheck);
+    };
+    const timer = setTimeout(stop, TYPEAHEAD_RECHECK_MS);
+    viewport.addEventListener('resize', recheck);
+    viewport.addEventListener('scroll', recheck);
+    return stop;
+};
+// ── CycleTriggerPlugin ───────────────────────────────────────────────────────
+function CycleTriggerPlugin({ request, onInserted, }) {
+    const [editor] = useLexicalComposerContext();
+    const handledNonce = React.useRef(null);
+    React.useEffect(() => {
+        return editor.registerCommand(INSERT_CYCLE_TRIGGER_COMMAND, ({ triggerName, replace }) => {
+            const existing = $nodesOfType(CycleTriggerNode);
+            const replacing = existing.length > 0;
+            if (replacing) {
+                if (!replace)
+                    return true;
+                for (const node of existing) {
+                    const after = node.getNextSibling();
+                    // The old trigger's separating space goes with it, so the new one does not double it.
+                    if ($isTextNode(after) && after.getTextContent().startsWith(' ')) {
+                        const rest = after.getTextContent().slice(1);
+                        if (rest === '')
+                            after.remove();
+                        else
+                            after.setTextContent(rest);
+                    }
+                    node.remove();
+                }
+            }
+            const root = $getRoot();
+            let paragraph = root.getFirstChild();
+            if (!paragraph) {
+                paragraph = $createParagraphNode();
+                root.append(paragraph);
+            }
+            if (!$isElementNode(paragraph))
+                return true;
+            const lead = paragraph.getFirstChild();
+            // Only a typed `/query` is swallowed. After swapping a chip, the text that follows is the
+            // prompt (it may start with `/api/users`), so it stays whole.
+            if (!replacing && $isTextNode(lead)) {
+                const rest = lead.getTextContent().replace(/^\/\S*\s?/, '');
+                if (rest === '')
+                    lead.remove();
+                else
+                    lead.setTextContent(rest);
+            }
+            const trigger = $createCycleTriggerNode(triggerName);
+            const space = $createTextNode(' ');
+            const anchor = paragraph.getFirstChild();
+            if (anchor)
+                anchor.insertBefore(trigger);
+            else
+                paragraph.append(trigger);
+            trigger.insertAfter(space);
+            space.select(1, 1);
+            return true;
+        }, COMMAND_PRIORITY_EDITOR);
+    }, [editor]);
+    React.useEffect(() => {
+        if (!request || handledNonce.current === request.nonce)
+            return;
+        handledNonce.current = request.nonce;
+        editor.dispatchCommand(INSERT_CYCLE_TRIGGER_COMMAND, {
+            triggerName: request.triggerName,
+            replace: request.replace,
+        });
+        editor.focus();
+        onInserted?.(request.nonce);
+    }, [editor, request, onInserted]);
+    return null;
+}
+// ── CustomEmojiPlugin ────────────────────────────────────────────────────────
+function CustomEmojiPlugin({ request, onInserted, }) {
+    const [editor] = useLexicalComposerContext();
+    const handledNonce = React.useRef(null);
+    React.useEffect(() => {
+        return editor.registerCommand(INSERT_CUSTOM_EMOJI_COMMAND, ({ name, imageUrl }) => {
+            const emoji = $createCustomEmojiNode(name, imageUrl);
+            const selection = $getSelection();
+            if ($isRangeSelection(selection)) {
+                selection.insertNodes([emoji]);
+            }
+            else {
+                const root = $getRoot();
+                const last = root.getLastChild();
+                const paragraph = $isElementNode(last) ? last : $createParagraphNode();
+                if (paragraph.getParent() === null)
+                    root.append(paragraph);
+                paragraph.append(emoji);
+                emoji.selectEnd();
+            }
+            return true;
+        }, COMMAND_PRIORITY_EDITOR);
+    }, [editor]);
+    React.useEffect(() => {
+        if (!request || handledNonce.current === request.nonce)
+            return;
+        handledNonce.current = request.nonce;
+        editor.dispatchCommand(INSERT_CUSTOM_EMOJI_COMMAND, {
+            name: request.name,
+            imageUrl: request.imageUrl,
+        });
+        editor.focus();
+        onInserted?.(request.nonce);
+    }, [editor, request, onInserted]);
+    return null;
+}
+// ── Typeahead menus (mentions + slash) ───────────────────────────────────────
+class MentionMenuOption extends MenuOption {
+    candidate;
+    constructor(candidate) {
+        super(isAllMentionCandidate(candidate) ? '__all__' : candidate.userId);
+        this.candidate = candidate;
+    }
+}
+class SlashMenuOption extends MenuOption {
+    candidate;
+    constructor(candidate) {
+        super(candidate.key ?? candidate.name);
+        this.candidate = candidate;
+    }
+}
+class EmojiMenuOption extends MenuOption {
+    candidate;
+    constructor(candidate) {
+        super(candidate.shortcode);
+        this.candidate = candidate;
+    }
+}
+class StreamMenuOption extends MenuOption {
+    candidate;
+    constructor(candidate) {
+        super(candidate.streamId);
+        this.candidate = candidate;
+    }
+}
+const TYPEAHEAD_GAP_PX = 4;
+/** Mobile: gap between the picker and the top of the composer footer (matches the run actions' 8px). */
+const TYPEAHEAD_FOOTER_GAP_PX = 8;
+/** A host marks the footer that holds the composer (and any actions above it) with this attribute. */
+const COMPOSER_FOOTER_SELECTOR = '[data-composer-footer]';
+/**
+ * Mobile / mweb: the picker sits above the whole composer footer, actions included, and spans the
+ * composer's width instead of tracking the caret. Null on desktop or when no host footer exists.
+ */
+function composerFooterBox(root) {
+    if (document.documentElement.dataset['platform'] !== 'mobile')
+        return null;
+    const footer = root?.closest(COMPOSER_FOOTER_SELECTOR);
+    if (!footer)
+        return null;
+    const rect = footer.getBoundingClientRect();
+    const style = window.getComputedStyle(footer);
+    const left = rect.left + (parseFloat(style.paddingLeft) || 0);
+    const right = rect.right - (parseFloat(style.paddingRight) || 0);
+    return {
+        left,
+        width: right - left,
+        bottom: window.innerHeight - rect.top + TYPEAHEAD_FOOTER_GAP_PX,
+    };
+}
+/**
+ * Mobile / mweb, editor outside any composer footer (the edit box of a message): the picker spans
+ * the editor's own width instead of starting at the caret, which would push it past the screen edge.
+ */
+function editorBox(root) {
+    if (document.documentElement.dataset['platform'] !== 'mobile' || !root)
+        return null;
+    const rect = root.getBoundingClientRect();
+    return { left: rect.left, width: rect.width };
+}
+/**
+ * Overrides Lexical's inline `position: absolute` on its caret anchor. Each reposition clears the
+ * anchor's `top`, parking it below `<body>`'s end, then forces layout via `getRect()`. Absolute,
+ * that overflows the page; with classic (non-overlay) scrollbars a scrollbar flashes in and the
+ * centered composer column shifts ~7px, so Lexical records a wrong `left`. Fixed boxes never
+ * create page overflow. The document never scrolls, so viewport and page coordinates match.
+ */
+const TYPEAHEAD_ANCHOR_CLASS = 'fixed!';
+/** Lexical's `positionMenu` places its anchor this far below the caret line's bottom edge. */
+const LEXICAL_ANCHOR_OFFSET_PX = 3;
+/** Ignore sub-pixel caret jitter so reposition listeners do not thrash React state. */
+const TYPEAHEAD_COORDS_EPSILON_PX = 0.5;
+/**
+ * Viewport Y of the top of the line holding the caret. Lexical's typeahead anchor sits *below*
+ * the caret (`caret.top + caret.height + 3`, with the caret's height), so pinning to the anchor's
+ * top would put the menu over the typed text. Prefer the live selection rect; keep the last good
+ * line while Lexical briefly reports a zero-height range mid-keystroke (that flicker previously
+ * bounced `bottom` every character); only then undo Lexical's anchor offset.
+ */
+function caretLineTop(root, anchor, lastGood) {
+    const selection = window.getSelection();
+    if (root && selection && selection.rangeCount > 0) {
+        const range = selection.getRangeAt(0);
+        if (root.contains(range.startContainer) && typeof range.getBoundingClientRect === 'function') {
+            const rect = range.getBoundingClientRect();
+            if (rect.height > 0) {
+                lastGood.current = rect.top;
+                return rect.top;
+            }
+        }
+    }
+    if (lastGood.current != null)
+        return lastGood.current;
+    const rect = anchor.getBoundingClientRect();
+    return rect.top - rect.height - LEXICAL_ANCHOR_OFFSET_PX;
+}
+/**
+ * Keep typeahead lists pinned above the caret line (composer sits at the pane bottom).
+ * Mentions, slash and emoji share this shell; each sets its own `data-*` marker for tests.
+ *
+ * Portaled to `document.body` (not Lexical's caret anchor): Lexical's `useMenuAnchorRef`
+ * recreates `positionMenu` whenever `resolution` changes and the effect cleanup calls
+ * `containerDiv.remove()` — that runs on every keystroke inside an open `/` or `@` query.
+ * A portal parented to that node is torn out of the DOM and remounted each character, which
+ * reads as the dialogue shaking. Body keeps the React tree mounted; we only track the anchor
+ * for caret geometry.
+ *
+ * Coordinates are written straight to the menu node (no React state) so
+ * `selectionchange` / MutationObserver churn cannot re-render the option list every frame.
+ *
+ * Lexical's `scrollIntoViewIfNeeded` uses `target.closest('#typeahead-menu')` to find the
+ * container. With the menu on `document.body` carrying `id="typeahead-menu"`, it finds our
+ * on-screen menu. The menu is always in-viewport (position:fixed), so the container-scroll
+ * branch never fires — no page scroll, no shake.
+ */
+/** Fire when the scrollable menu is within this many px of its end (load next page). */
+const TYPEAHEAD_NEAR_END_PX = 32;
+/** Same as the `max-h-60` class: the tallest a typeahead list gets when there is room. */
+const TYPEAHEAD_MAX_HEIGHT_PX = 240;
+/** About two rows: what the list gets in the last-resort spot when nothing fits above the composer. */
+const TYPEAHEAD_MIN_HEIGHT_PX = 88;
+/** Below this much room above the composer not even one row shows, so the list moves to the last-resort spot. */
+const TYPEAHEAD_ONE_ROW_PX = 48;
+/** Gap kept between the list and the top of the visible area. */
+const TYPEAHEAD_TOP_MARGIN_PX = 8;
+/** Height of the native iOS bar under the status bar; its controls take the touches. */
+const NATIVE_BAR_PX = 44;
+/** `env(safe-area-inset-top)` in px, read live; 0 when the page has no safe area. */
+function measureSafeAreaTopPx() {
+    const probe = document.createElement('div');
+    probe.style.cssText =
+        'position:fixed;top:0;left:0;height:env(safe-area-inset-top,0px);visibility:hidden;pointer-events:none;';
+    document.documentElement.appendChild(probe);
+    const height = probe.getBoundingClientRect().height;
+    probe.remove();
+    return height;
+}
+/**
+ * What covers the top of the page: the safe-area inset (0 on desktop, Android and plain mobile
+ * Safari tabs) plus the 44px bar only the iOS host draws; `env()` cannot report that bar.
+ */
+function topChromePx() {
+    const inNativeHost = window.__STREAMS_NATIVE__ !== undefined;
+    return measureSafeAreaTopPx() + (inNativeHost ? NATIVE_BAR_PX : 0);
+}
+/**
+ * The part of the layout viewport the user sees, in layout-viewport Y (the menu is `position:
+ * fixed`, so everything here shares the coordinates of `getBoundingClientRect`). The visual
+ * viewport is a window into the layout viewport, so it can neither start below nor end past it.
+ * Inside the iOS app `offsetTop` has been seen to stay at the keyboard pan after the page was
+ * resized to sit above the keyboard: taken as is, it moved the top limit below the composer and
+ * left the list two rows tall. The clamp makes that report harmless.
+ */
+export function visibleArea({ layoutHeight, offsetTop, height, }) {
+    const visibleHeight = Math.min(height ?? layoutHeight, layoutHeight);
+    const topY = Math.min(Math.max(offsetTop ?? 0, 0), layoutHeight - visibleHeight);
+    return { topY, bottomY: topY + visibleHeight };
+}
+/**
+ * Where the list's bottom edge goes and how tall it may be, in layout-viewport Y. The list sits
+ * above `preferredBottomY` (the composer footer top, or the caret line without a footer) and below
+ * the chrome, and never leaves `[visibleTopY, visibleBottomY]`. Its height is the room between
+ * them, up to 240px; a cramped screen shows fewer rows rather than rows under the native bar.
+ * Only a mobile composer footer (`coverDraftWhenCramped`) has a last resort: when under one row
+ * fits above the composer (landscape with the keyboard up), the list takes the top of the safe
+ * area and covers the draft, because a list nobody can reach is worse. Without a footer (desktop,
+ * inline edit) the bottom edge stays on the caret line so the typed text is never covered.
+ */
+export function placeTypeahead({ preferredBottomY, visibleTopY, visibleBottomY, topChromePx: chromePx, coverDraftWhenCramped = false, }) {
+    const topY = visibleTopY + chromePx + TYPEAHEAD_TOP_MARGIN_PX;
+    let bottomY = Math.min(preferredBottomY, visibleBottomY);
+    if (coverDraftWhenCramped && bottomY - topY < TYPEAHEAD_ONE_ROW_PX) {
+        bottomY = Math.min(visibleBottomY, topY + TYPEAHEAD_MIN_HEIGHT_PX);
+    }
+    return {
+        bottomY,
+        maxHeight: Math.round(Math.max(0, Math.min(TYPEAHEAD_MAX_HEIGHT_PX, bottomY - topY))),
+    };
+}
+/**
+ * Resolves the menu's CSS box from live geometry (nothing cached, so insets, keyboard and
+ * rotation are always current). Mobile with a composer footer: above the footer. Otherwise
+ * above the caret line; on mobile the editor's own width is used (see `editorBox`).
+ */
+function placementFor(root, anchor, line) {
+    const footerBox = composerFooterBox(root);
+    const caretBottom = window.innerHeight - line + TYPEAHEAD_GAP_PX;
+    const visual = window.visualViewport;
+    const visible = visibleArea({
+        layoutHeight: window.innerHeight,
+        offsetTop: visual?.offsetTop,
+        height: visual?.height,
+    });
+    const placed = placeTypeahead({
+        preferredBottomY: window.innerHeight - (footerBox ? footerBox.bottom : caretBottom),
+        visibleTopY: visible.topY,
+        visibleBottomY: visible.bottomY,
+        topChromePx: topChromePx(),
+        coverDraftWhenCramped: footerBox !== null,
+    });
+    const box = footerBox ?? editorBox(root);
+    return {
+        left: box ? box.left : anchor.getBoundingClientRect().left,
+        width: box?.width,
+        bottom: window.innerHeight - placed.bottomY,
+        maxHeight: placed.maxHeight,
+    };
+}
+function TypeaheadMenuAboveCaret({ anchor, dataAttr, className, children, optionCount, selectedIndex, setHighlightedIndex, onNearEnd, }) {
+    const [editor] = useLexicalComposerContext();
+    const menuRef = React.useRef(null);
+    const lastLineTopRef = React.useRef(null);
+    const placementRef = React.useRef(null);
+    const rafRef = React.useRef(null);
+    // First paint only; live updates write the menu node directly (no re-render). Reads the anchor
+    // instead of the selection so no ref is touched during render; the layout effect corrects it.
+    const [initialPlacement] = React.useState(() => {
+        const anchorRect = anchor.getBoundingClientRect();
+        const line = anchorRect.top - anchorRect.height - LEXICAL_ANCHOR_OFFSET_PX;
+        return placementFor(editor.getRootElement(), anchor, line);
+    });
+    React.useLayoutEffect(() => {
+        const apply = () => {
+            rafRef.current = null;
+            const menu = menuRef.current;
+            if (!menu)
+                return;
+            const line = caretLineTop(editor.getRootElement(), anchor, lastLineTopRef);
+            const next = placementFor(editor.getRootElement(), anchor, line);
+            const prev = placementRef.current;
+            if (prev &&
+                Math.abs(prev.left - next.left) < TYPEAHEAD_COORDS_EPSILON_PX &&
+                Math.abs(prev.bottom - next.bottom) < TYPEAHEAD_COORDS_EPSILON_PX &&
+                prev.width === next.width &&
+                prev.maxHeight === next.maxHeight) {
+                return;
+            }
+            placementRef.current = next;
+            menu.style.maxHeight = `${next.maxHeight}px`;
+            menu.style.left = `${next.left}px`;
+            menu.style.bottom = `${next.bottom}px`;
+            menu.style.width = next.width === undefined ? '' : `${next.width}px`;
+        };
+        const update = () => {
+            if (rafRef.current != null)
+                return;
+            rafRef.current = window.requestAnimationFrame(apply);
+        };
+        update();
+        window.addEventListener('resize', update);
+        // Capture scrolls from any scroll parent (chat timeline, composer).
+        window.addEventListener('scroll', update, true);
+        document.addEventListener('selectionchange', update);
+        // The iOS keyboard pans or resizes the visual viewport without a window `resize`.
+        const visual = window.visualViewport;
+        visual?.addEventListener('resize', update);
+        visual?.addEventListener('scroll', update);
+        // The footer grows or shrinks without any viewport event: attachments, the formatting row, run
+        // controls, a draft that wraps. Its top edge is the list's bottom edge.
+        const footerObserver = new ResizeObserver(update);
+        const footer = editor.getRootElement()?.closest(COMPOSER_FOOTER_SELECTOR);
+        if (footer)
+            footerObserver.observe(footer);
+        // Lexical writes top/left on the absolute anchor when the caret moves.
+        const observer = new MutationObserver(update);
+        observer.observe(anchor, { attributes: true, attributeFilter: ['style'] });
+        return () => {
+            if (rafRef.current != null)
+                window.cancelAnimationFrame(rafRef.current);
+            rafRef.current = null;
+            window.removeEventListener('resize', update);
+            window.removeEventListener('scroll', update, true);
+            document.removeEventListener('selectionchange', update);
+            visual?.removeEventListener('resize', update);
+            visual?.removeEventListener('scroll', update);
+            footerObserver.disconnect();
+            observer.disconnect();
+        };
+    }, [anchor, editor]);
+    // Strip the id Lexical stamps on the anchor so `aria-controls="typeahead-menu"` on the
+    // editor root resolves to our visible menu (which declares `id` in JSX), not to the
+    // caret-sized anchor parked off-screen.
+    React.useLayoutEffect(() => {
+        const stripId = () => {
+            if (anchor.getAttribute('id') === 'typeahead-menu')
+                anchor.removeAttribute('id');
+        };
+        stripId();
+        const obs = new MutationObserver(stripId);
+        obs.observe(anchor, { attributes: true, attributeFilter: ['id'] });
+        return () => obs.disconnect();
+    }, [anchor]);
+    // Lexical's typeahead sets selectedIndex to -1 when ArrowDown/Up fire while `options` is still
+    // empty (async search). That value is not `null`, so the built-in preselect never recovers —
+    // nothing highlights and Enter falls through to submit. Re-clamp once candidates arrive.
+    React.useLayoutEffect(() => {
+        if (optionCount === undefined || setHighlightedIndex === undefined)
+            return;
+        if (optionCount === 0)
+            return;
+        if (selectedIndex === null ||
+            selectedIndex === undefined ||
+            selectedIndex < 0 ||
+            selectedIndex >= optionCount) {
+            setHighlightedIndex(0);
+        }
+    }, [optionCount, selectedIndex, setHighlightedIndex]);
+    // When the list grows but still fits without a scrollbar, keep fetching until it scrolls or
+    // the host reports no more pages (otherwise page 2+ would never load).
+    React.useLayoutEffect(() => {
+        if (!onNearEnd)
+            return;
+        const el = menuRef.current;
+        if (!el)
+            return;
+        if (el.scrollHeight <= el.clientHeight + TYPEAHEAD_NEAR_END_PX) {
+            onNearEnd();
+        }
+    }, [onNearEnd, optionCount]);
+    return (_jsx("div", { ref: menuRef, id: "typeahead-menu", [dataAttr]: '', className: cn('z-(--z-dropdown) max-h-60 min-w-[8rem] overflow-y-auto rounded-md border bg-popover p-1 shadow-md', className), 
+        // `top: auto` clears a unitless `style.top` if Lexical ever targets this node.
+        style: {
+            position: 'fixed',
+            top: 'auto',
+            left: initialPlacement.left,
+            bottom: initialPlacement.bottom,
+            width: initialPlacement.width,
+            // Beats `max-h-60` when the room above the menu is smaller than 240px.
+            maxHeight: initialPlacement.maxHeight,
+        }, onScroll: onNearEnd
+            ? (event) => {
+                const el = event.currentTarget;
+                if (el.scrollTop + el.clientHeight >= el.scrollHeight - TYPEAHEAD_NEAR_END_PX) {
+                    onNearEnd();
+                }
+            }
+            : undefined, children: children }));
+}
+function MentionsPluginWithPortal({ searchMentions, onMentionSelect, }) {
+    const [editor] = useLexicalComposerContext();
+    const [options, setOptions] = React.useState([]);
+    const [status, setStatus] = React.useState('ready');
+    const [hasMore, setHasMore] = React.useState(false);
+    const [loadingMore, setLoadingMore] = React.useState(false);
+    const requestIdRef = React.useRef(0);
+    // Remember the open `@` query so we can remint options when `searchMentions` itself changes
+    // (directory late-load, agent avatar blob URLs settling) without another keystroke.
+    const activeQueryRef = React.useRef(null);
+    const optionsRef = React.useRef(options);
+    const hasMoreRef = React.useRef(hasMore);
+    const loadingMoreRef = React.useRef(false);
+    // Lexical keeps the highlight as an index. A refresh that puts rows ahead of it would move it to
+    // another person, so the refresh re-points it at the same option.
+    const highlightRef = React.useRef({ index: null, set: null });
+    React.useEffect(() => {
+        optionsRef.current = options;
+    }, [options]);
+    React.useEffect(() => {
+        hasMoreRef.current = hasMore;
+    }, [hasMore]);
+    const mentionTriggerMatch = useBasicTypeaheadTriggerMatch('@', { minLength: 0 });
+    const checkForTriggerMatch = useTypeaheadOutsideCode(mentionTriggerMatch);
+    const onQueryChange = React.useCallback(async (query) => {
+        activeQueryRef.current = query;
+        loadingMoreRef.current = false;
+        setLoadingMore(false);
+        if (query === null || !searchMentions) {
+            requestIdRef.current += 1;
+            setOptions([]);
+            setHasMore(false);
+            setStatus('ready');
+            return;
+        }
+        const requestId = ++requestIdRef.current;
+        setStatus('loading');
+        // Keep the previous list visible while the next query resolves so ArrowUp/Down still have
+        // rows to move through (Lexical swallows those keys whenever a custom menuRenderFn is set).
+        try {
+            const page = await searchMentions(query, { offset: 0, limit: MENTION_PAGE_SIZE });
+            if (requestId !== requestIdRef.current)
+                return;
+            const first = page.items.map((c) => new MentionMenuOption(c));
+            setOptions(first);
+            setHasMore(page.refresh ? false : page.hasMore);
+            // With a refresh on its way, an empty local page keeps "Searching…" instead of "No matches".
+            setStatus(first.length === 0 ? (page.refresh ? 'loading' : 'empty') : 'ready');
+            if (!page.refresh)
+                return;
+            const fresh = await page.refresh.catch(() => null);
+            if (requestId !== requestIdRef.current)
+                return;
+            const next = fresh ? fresh.items.map((c) => new MentionMenuOption(c)) : first;
+            const { index, set } = highlightRef.current;
+            const highlightedKey = index === null ? undefined : optionsRef.current[index]?.key;
+            setOptions(next);
+            if (fresh && set && highlightedKey !== undefined) {
+                const moved = next.findIndex((option) => option.key === highlightedKey);
+                // A highlighted row the server no longer lists falls back to the first row.
+                set(Math.max(moved, 0));
+            }
+            setHasMore(fresh?.hasMore ?? false);
+            setStatus(next.length === 0 ? 'empty' : 'ready');
+        }
+        catch {
+            if (requestId !== requestIdRef.current)
+                return;
+            setOptions([]);
+            setHasMore(false);
+            setStatus('empty');
+        }
+    }, [searchMentions]);
+    React.useEffect(() => {
+        const query = activeQueryRef.current;
+        if (query === null || !searchMentions)
+            return;
+        void onQueryChange(query);
+    }, [onQueryChange, searchMentions]);
+    const loadMore = React.useCallback(() => {
+        if (!searchMentions)
+            return;
+        const query = activeQueryRef.current;
+        if (query === null)
+            return;
+        if (!hasMoreRef.current || loadingMoreRef.current)
+            return;
+        const requestId = requestIdRef.current;
+        const offset = optionsRef.current.filter((option) => !isAllMentionCandidate(option.candidate)).length;
+        loadingMoreRef.current = true;
+        setLoadingMore(true);
+        void (async () => {
+            try {
+                const page = await searchMentions(query, { offset, limit: MENTION_PAGE_SIZE });
+                if (requestId !== requestIdRef.current)
+                    return;
+                const seen = new Set(optionsRef.current.map((option) => option.key));
+                const appended = page.items
+                    .map((candidate) => new MentionMenuOption(candidate))
+                    .filter((option) => !seen.has(option.key));
+                // Empty/duplicate pages must clear hasMore or the near-end effect never stops.
+                if (appended.length === 0) {
+                    setHasMore(false);
+                    return;
+                }
+                setOptions((prev) => [...prev, ...appended]);
+                setHasMore(page.hasMore);
+            }
+            catch {
+                if (requestId !== requestIdRef.current)
+                    return;
+                setHasMore(false);
+            }
+            finally {
+                if (requestId === requestIdRef.current) {
+                    loadingMoreRef.current = false;
+                    setLoadingMore(false);
+                }
+            }
+        })();
+    }, [searchMentions]);
+    const onSelectOption = React.useCallback((selectedOption, nodeToReplace, closeMenu) => {
+        const candidate = selectedOption.candidate;
+        // Disabled agents stay in the list for discoverability but Enter/Tab/click must not insert.
+        if (!isAllMentionCandidate(candidate) && candidate.disabled)
+            return;
+        editor.update(() => {
+            const node = isAllMentionCandidate(candidate)
+                ? new MentionNode({ all: true })
+                : new MentionNode({
+                    userId: candidate.userId,
+                    displayName: candidate.displayName,
+                });
+            if (nodeToReplace) {
+                nodeToReplace.replace(node);
+            }
+            // Trailing space so the next word can be typed immediately (same as /trigger).
+            const space = $createTextNode(' ');
+            node.insertAfter(space);
+            space.select(1, 1);
+            closeMenu();
+        });
+        onMentionSelect?.(candidate);
+    }, [editor, onMentionSelect]);
+    if (!searchMentions)
+        return null;
+    return (_jsx(LexicalTypeaheadMenuPlugin, { onQueryChange: onQueryChange, onSelectOption: onSelectOption, triggerFn: checkForTriggerMatch, options: options, 
+        // Above EnterSubmitPlugin (NORMAL) so Enter picks a mention instead of sending.
+        commandPriority: COMMAND_PRIORITY_HIGH, anchorClassName: TYPEAHEAD_ANCHOR_CLASS, menuRenderFn: (anchorElementRef, { selectedIndex, selectOptionAndCleanUp, setHighlightedIndex }) => {
+            if (!anchorElementRef.current)
+                return null;
+            highlightRef.current = { index: selectedIndex, set: setHighlightedIndex };
+            // Portal to body — not Lexical's caret anchor (that node is removed/re-appended on every
+            // keystroke; see TypeaheadMenuAboveCaret). Fixed + bottom pins the list above the caret.
+            return ReactDOM.createPortal(_jsx(TypeaheadMenuAboveCaret, { anchor: anchorElementRef.current, dataAttr: "data-mention-menu", className: "w-64", optionCount: options.length, selectedIndex: selectedIndex, setHighlightedIndex: setHighlightedIndex, onNearEnd: hasMore ? loadMore : undefined, children: options.length === 0 ? (_jsx("div", { className: "px-2 py-1.5 text-sm text-muted-foreground", role: "status", children: status === 'loading' ? 'Searching…' : 'No matches' })) : (_jsxs(_Fragment, { children: [options.map((option, index) => {
+                            const selected = selectedIndex === index;
+                            const candidate = option.candidate;
+                            const all = isAllMentionCandidate(candidate);
+                            const agent = !all && candidate.kind === 'agent';
+                            const disabled = !all && Boolean(candidate.disabled);
+                            const avatarUrl = isAllMentionCandidate(candidate) ? null : candidate.avatarUrl;
+                            const agentPicture = agent
+                                ? (candidate.agentPicture ??
+                                    (avatarUrl ? { kind: 'image', src: avatarUrl } : null))
+                                : null;
+                            const providerBadge = agent ? candidate.providerBadge : null;
+                            const subtitle = isAllMentionCandidate(candidate)
+                                ? candidate.subtitle
+                                : disabled
+                                    ? candidate.disabledReason
+                                    : candidate.subtitle;
+                            return (_jsxs("div", { id: `typeahead-item-${index}`, role: "option", tabIndex: -1, "aria-selected": selected, "aria-disabled": disabled || undefined, ref: option.setRefElement, className: cn('flex items-center gap-2 rounded-sm px-2 py-1.5 text-sm in-data-[platform=mobile]:mb-0.5 in-data-[platform=mobile]:text-base', disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer', selected && !disabled && 'bg-accent text-accent-foreground', selected && disabled && 'bg-accent/50'), onClick: () => {
+                                    if (disabled)
+                                        return;
+                                    setHighlightedIndex(index);
+                                    selectOptionAndCleanUp(option);
+                                }, onMouseEnter: () => setHighlightedIndex(index), children: [agent ? (_jsx("span", { "aria-hidden": true, className: "contents", children: _jsx(AgentAvatar, { size: "sm", picture: agentPicture, placeholder: _jsx(Bot, { "aria-hidden": true, className: "size-3.5" }), placeholderClassName: "bg-primary/10 text-primary", badge: providerBadge ? (_jsx(ProviderBadge, { type: providerBadge.type, label: providerBadge.label })) : null }) })) : (_jsxs(Avatar, { size: "sm", "aria-hidden": true, children: [avatarUrl ? _jsx(AvatarImage, { src: avatarUrl, alt: "" }) : null, _jsx(AvatarFallback, { className: cn(all && 'bg-primary/10 text-primary'), children: all ? (_jsx(Users, { "aria-hidden": true, className: "size-3.5" })) : (mentionInitials(candidate.displayName)) })] })), _jsxs("span", { className: "min-w-0 flex-1 truncate", children: [_jsxs("span", { className: "block truncate", children: [candidate.displayName, agent && candidate.role ? (_jsxs("span", { className: "text-muted-foreground", children: [" \u00B7 ", candidate.role] })) : null] }), subtitle ? (_jsx("span", { className: "block truncate text-xs text-muted-foreground", children: subtitle })) : null] })] }, option.key));
+                        }), loadingMore ? (_jsx("div", { className: "px-2 py-1.5 text-sm text-muted-foreground", role: "status", children: "Loading\u2026" })) : null] })) }), document.body);
+        } }));
+}
+/**
+ * Leading `/query` at the start of the message (no whitespace yet). Refused while a
+ * `CycleTriggerNode` is already present — one `/trigger` per message.
+ */
+const $matchLeadingSlashQuery = (text) => {
+    if ($nodesOfType(CycleTriggerNode).length > 0)
+        return null;
+    const match = /^\/([^\s]*)$/.exec(text);
+    if (!match)
+        return null;
+    const selection = $getSelection();
+    if (!$isRangeSelection(selection) || !selection.isCollapsed())
+        return null;
+    const anchorNode = selection.anchor.getNode();
+    if (!$isTextNode(anchorNode) || !anchorNode.isSimpleText())
+        return null;
+    if (anchorNode.getPreviousSibling() !== null)
+        return null;
+    const paragraph = anchorNode.getParent();
+    if (!$isElementNode(paragraph))
+        return null;
+    const first = $getRoot().getFirstChild();
+    if (!first || paragraph.getKey() !== first.getKey())
+        return null;
+    return {
+        matchingString: match[1] ?? '',
+        replaceableString: match[0],
+    };
+};
+function SlashCommandsPlugin({ searchSlashCommands, onSelectCommand, onSlashTyped, labels, }) {
+    const [editor] = useLexicalComposerContext();
+    const [options, setOptions] = React.useState([]);
+    const [activeQuery, setActiveQuery] = React.useState(null);
+    const triggerFn = React.useCallback((text, triggerEditor) => {
+        if (lastUpdateMovedCaretOnly.get(triggerEditor))
+            return null;
+        const match = $matchLeadingSlashQuery(text);
+        if (!match)
+            return null;
+        return {
+            leadOffset: 0,
+            matchingString: match.matchingString,
+            replaceableString: match.replaceableString,
+        };
+    }, []);
+    const onQueryChange = React.useCallback((query) => {
+        setActiveQuery(query);
+        if (query === null || !searchSlashCommands) {
+            setOptions([]);
+            return;
+        }
+        if (onSlashTyped) {
+            // The host handles `/query` itself (opens its own picker): drop the typed text, no inline menu.
+            const typed = `/${query}`;
+            setOptions([]);
+            setActiveQuery(null);
+            editor.update(() => {
+                const selection = $getSelection();
+                if (!$isRangeSelection(selection))
+                    return;
+                const node = selection.anchor.getNode();
+                if (!$isTextNode(node))
+                    return;
+                // Only the `/query` that ends at the caret: a slash typed before a prompt keeps the prompt.
+                const end = selection.anchor.offset;
+                const start = end - typed.length;
+                if (start < 0 || node.getTextContent().slice(start, end) !== typed)
+                    return;
+                if (node.getTextContentSize() === typed.length)
+                    node.remove();
+                else
+                    node.spliceText(start, typed.length, '', true);
+            });
+            onSlashTyped(query);
+            return;
+        }
+        const apply = (candidates) => {
+            // Cycles render above commands, so sort (stable) to keep keyboard order = visual order.
+            const rank = (c) => (c.group === 'commands' ? 1 : 0);
+            const ordered = [...candidates].sort((a, b) => rank(a) - rank(b));
+            setOptions(ordered.map((candidate) => new SlashMenuOption(candidate)));
+        };
+        const result = searchSlashCommands(query);
+        if (result instanceof Promise)
+            void result.then(apply);
+        else
+            apply(result);
+    }, [editor, searchSlashCommands, onSlashTyped]);
+    const onSelectOption = React.useCallback((selectedOption, nodeToReplace, closeMenu) => {
+        const { cycleTriggerName, insertText } = selectedOption.candidate;
+        onSelectCommand?.(selectedOption.candidate);
+        editor.update(() => {
+            if (cycleTriggerName) {
+                const trigger = $createCycleTriggerNode(cycleTriggerName);
+                const space = $createTextNode(' ');
+                if (nodeToReplace)
+                    nodeToReplace.replace(trigger);
+                else {
+                    const root = $getRoot();
+                    let paragraph = root.getFirstChild();
+                    if (!paragraph) {
+                        paragraph = $createParagraphNode();
+                        root.append(paragraph);
+                    }
+                    if ($isElementNode(paragraph))
+                        paragraph.append(trigger);
+                }
+                trigger.insertAfter(space);
+                space.select(1, 1);
+            }
+            else if (typeof insertText === 'string') {
+                // Trailing space so the next word can be typed immediately (same as /trigger).
+                const withSpace = insertText.endsWith(' ') ? insertText : `${insertText} `;
+                const text = $createTextNode(withSpace);
+                if (nodeToReplace)
+                    nodeToReplace.replace(text);
+                text.select(withSpace.length, withSpace.length);
+            }
+            else if (nodeToReplace) {
+                nodeToReplace.remove();
+            }
+            closeMenu();
+        });
+    }, [editor, onSelectCommand]);
+    if (!searchSlashCommands)
+        return null;
+    return (_jsx(LexicalTypeaheadMenuPlugin, { onQueryChange: onQueryChange, onSelectOption: onSelectOption, triggerFn: triggerFn, options: options, 
+        // Above EnterSubmitPlugin (BEFORE_EDITOR) so Enter/Tab complete instead of sending.
+        commandPriority: COMMAND_PRIORITY_HIGH, anchorClassName: TYPEAHEAD_ANCHOR_CLASS, menuRenderFn: (anchorElementRef, { selectedIndex, selectOptionAndCleanUp, setHighlightedIndex }) => {
+            // Keep the empty-state panel while `/` matches, even with zero candidates (D16).
+            if (!anchorElementRef.current || activeQuery === null)
+                return null;
+            return ReactDOM.createPortal(_jsx(TypeaheadMenuAboveCaret, { anchor: anchorElementRef.current, dataAttr: "data-slash-menu", className: "w-[340px] min-w-[340px] max-w-[calc(100vw-2rem)] rounded-xl p-1.5", optionCount: options.length, selectedIndex: selectedIndex, setHighlightedIndex: setHighlightedIndex, children: options.length === 0 ? (_jsxs(_Fragment, { children: [_jsx(SlashGroupHeader, { label: labels.slashTitle, first: true }), _jsx("div", { className: "px-2 py-2 text-sm text-muted-foreground", children: labels.slashEmpty })] })) : (options.map((option, index) => {
+                    const selected = selectedIndex === index;
+                    const group = option.candidate.group;
+                    const startsGroup = index === 0 || options[index - 1]?.candidate.group !== group;
+                    const title = group === 'cycles'
+                        ? labels.slashCyclesTitle
+                        : group === 'commands'
+                            ? labels.slashCommandsTitle
+                            : labels.slashTitle;
+                    return (_jsxs(React.Fragment, { children: [startsGroup ? _jsx(SlashGroupHeader, { label: title, first: index === 0 }) : null, _jsxs("button", { id: `slash-typeahead-item-${index}`, type: "button", role: "option", tabIndex: -1, "aria-selected": selected, 
+                                // Lexical scrolls the highlighted row into the max-h menu via this ref.
+                                ref: option.setRefElement, className: cn('relative isolate flex w-full flex-col rounded-lg p-2 text-start text-sm in-data-[platform=mobile]:mb-0.5 in-data-[platform=mobile]:text-base', selected ? 'bg-accent text-accent-foreground' : 'hover:bg-accent'), onClick: () => {
+                                    setHighlightedIndex(index);
+                                    selectOptionAndCleanUp(option);
+                                }, onMouseEnter: () => setHighlightedIndex(index), children: [option.candidate.emphasis ? _jsx(SlashEmphasis, {}) : null, _jsxs("span", { children: ["/", option.candidate.name] }), _jsx("span", { className: "text-muted-foreground", children: option.candidate.description })] })] }, option.key));
+                })) }), document.body);
+        } }));
+}
+/** A tinted wash with a light band sweeping across it; still (tint only) under reduced motion. */
+function SlashEmphasis() {
+    const reduceMotion = useReducedMotion();
+    return (_jsx(motion.span, { "aria-hidden": true, "data-slot": "slash-emphasis", className: "pointer-events-none absolute inset-0 -z-10 rounded-lg bg-primary/8", style: {
+            backgroundImage: 'linear-gradient(100deg, transparent 30%, color-mix(in oklab, var(--primary) 22%, transparent) 50%, transparent 70%)',
+            backgroundSize: '220% 100%',
+            backgroundRepeat: 'no-repeat',
+        }, initial: { backgroundPosition: '160% 0' }, animate: reduceMotion === true ? undefined : { backgroundPosition: ['160% 0', '-60% 0'] }, transition: { ...loops.shimmer, duration: 1.8 } }));
+}
+function SlashGroupHeader({ label, first }) {
+    return (_jsxs("div", { className: cn('flex items-center gap-2.5 px-2 pb-1 text-sm text-muted-foreground', first ? 'pt-1.5' : 'pt-3'), children: [_jsx("span", { children: label }), _jsx("span", { className: "h-px flex-1 bg-border", "aria-hidden": true })] }));
+}
+/**
+ * `:` shortcode typeahead (Slack-style). Host filters via `searchEmojis`; selecting inserts the
+ * native glyph and closes the menu. Bare `:` alone does not open (minLength 1) so Enter still
+ * sends. Underscores, dashes and `+` stay inside the query (`:man_beard`, `:+1`).
+ */
+function EmojiTypeaheadPlugin({ searchEmojis, labels, onEmojiUsed, }) {
+    const [editor] = useLexicalComposerContext();
+    const onEmojiUsedRef = useLatestRef(onEmojiUsed);
+    const [options, setOptions] = React.useState([]);
+    const [activeQuery, setActiveQuery] = React.useState(null);
+    const requestIdRef = React.useRef(0);
+    const emojiTriggerMatch = useBasicTypeaheadTriggerMatch(':', {
+        minLength: 1,
+        punctuation: EMOJI_TYPEAHEAD_PUNCTUATION,
+    });
+    const checkForTriggerMatch = useTypeaheadOutsideCode(emojiTriggerMatch);
+    const onQueryChange = React.useCallback((query) => {
+        setActiveQuery(query);
+        if (query === null || !searchEmojis) {
+            requestIdRef.current += 1;
+            setOptions([]);
+            return;
+        }
+        const requestId = ++requestIdRef.current;
+        const apply = (candidates) => {
+            if (requestId !== requestIdRef.current)
+                return;
+            setOptions(candidates.map((candidate) => new EmojiMenuOption(candidate)));
+        };
+        const result = searchEmojis(query);
+        if (result instanceof Promise)
+            void result.then(apply).catch(() => apply([]));
+        else
+            apply(result);
+    }, [searchEmojis]);
+    const onSelectOption = React.useCallback((selectedOption, nodeToReplace, closeMenu) => {
+        const { char, shortcode, imageUrl } = selectedOption.candidate;
+        editor.update(() => {
+            if (imageUrl) {
+                const emoji = $createCustomEmojiNode(shortcode, imageUrl);
+                if (nodeToReplace)
+                    nodeToReplace.replace(emoji);
+                else
+                    $insertNodes([emoji]);
+                emoji.selectNext();
+            }
+            else {
+                const text = $createTextNode(char);
+                if (nodeToReplace)
+                    nodeToReplace.replace(text);
+                else
+                    $insertNodes([text]);
+                text.selectNext();
+            }
+            closeMenu();
+        }, {
+            onUpdate: () => reportEmojiUse(onEmojiUsedRef.current, {
+                source: 'typeahead',
+                kind: imageUrl ? 'custom' : 'unicode',
+                emoji: imageUrl ? shortcode : char,
+            }),
+        });
+    }, [editor, onEmojiUsedRef]);
+    if (!searchEmojis)
+        return null;
+    return (_jsx(LexicalTypeaheadMenuPlugin, { onQueryChange: onQueryChange, onSelectOption: onSelectOption, triggerFn: checkForTriggerMatch, options: options, 
+        // Above EnterSubmitPlugin (BEFORE_EDITOR) so Enter/Tab complete instead of sending.
+        commandPriority: COMMAND_PRIORITY_HIGH, anchorClassName: TYPEAHEAD_ANCHOR_CLASS, menuRenderFn: (anchorElementRef, { selectedIndex, selectOptionAndCleanUp, setHighlightedIndex }) => {
+            if (!anchorElementRef.current || activeQuery === null)
+                return null;
+            return ReactDOM.createPortal(_jsx(TypeaheadMenuAboveCaret, { anchor: anchorElementRef.current, dataAttr: "data-emoji-menu", className: "w-64 min-w-56", optionCount: options.length, selectedIndex: selectedIndex, setHighlightedIndex: setHighlightedIndex, children: options.length === 0 ? (_jsx("div", { className: "px-2 py-1.5 text-sm text-muted-foreground", role: "status", children: labels.emojiEmpty })) : (options.map((option, index) => {
+                    const selected = selectedIndex === index;
+                    return (_jsxs("button", { id: `emoji-typeahead-item-${index}`, type: "button", role: "option", tabIndex: -1, "aria-selected": selected, "aria-label": `:${option.candidate.shortcode}:`, ref: option.setRefElement, className: cn('flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-start text-sm in-data-[platform=mobile]:mb-0.5 in-data-[platform=mobile]:text-base', selected ? 'bg-accent text-accent-foreground' : 'hover:bg-accent'), onClick: () => {
+                            setHighlightedIndex(index);
+                            selectOptionAndCleanUp(option);
+                        }, onMouseEnter: () => setHighlightedIndex(index), children: [_jsx("span", { "aria-hidden": true, className: "inline-flex size-5 shrink-0 items-center justify-center", children: option.candidate.imageUrl ? (_jsx("img", { src: option.candidate.imageUrl, alt: "", className: "size-5 object-contain" })) : (_jsx("span", { className: "text-base leading-none", children: option.candidate.char })) }), _jsxs("span", { className: "min-w-0 flex-1 truncate text-muted-foreground", children: [":", option.candidate.shortcode, ":"] })] }, option.key));
+                })) }), document.body);
+        } }));
+}
+/**
+ * `#` stream chip typeahead (Slack-style channel chips). Host filters via `searchStreams`;
+ * selecting inserts a `StreamChipNode` and a trailing space. Bare `#` alone opens (minLength 0).
+ */
+function StreamChipsTypeaheadPlugin({ searchStreams, labels, }) {
+    const [editor] = useLexicalComposerContext();
+    const [options, setOptions] = React.useState([]);
+    const [activeQuery, setActiveQuery] = React.useState(null);
+    const requestIdRef = React.useRef(0);
+    // '#' on purpose (chips display '~'): '~' collides with '~/path', '~~strike~~' and '~5'. #1166 changed it; do not repeat.
+    const streamTriggerMatch = useBasicTypeaheadTriggerMatch('#', { minLength: 0 });
+    const checkForTriggerMatch = useTypeaheadOutsideCode(streamTriggerMatch);
+    const onQueryChange = React.useCallback((query) => {
+        setActiveQuery(query);
+        if (query === null || !searchStreams) {
+            requestIdRef.current += 1;
+            setOptions([]);
+            return;
+        }
+        const requestId = ++requestIdRef.current;
+        const apply = (candidates) => {
+            if (requestId !== requestIdRef.current)
+                return;
+            setOptions(candidates.map((candidate) => new StreamMenuOption(candidate)));
+        };
+        const result = searchStreams(query);
+        if (result instanceof Promise)
+            void result.then(apply).catch(() => apply([]));
+        else
+            apply(result);
+    }, [searchStreams]);
+    const onSelectOption = React.useCallback((selectedOption, nodeToReplace, closeMenu) => {
+        editor.update(() => {
+            const { streamId, title, visibility } = selectedOption.candidate;
+            const node = $createStreamChipNode(streamId, title, visibility);
+            if (nodeToReplace)
+                nodeToReplace.replace(node);
+            else
+                $insertNodes([node]);
+            // Trailing space so the next word can be typed immediately (same as @mention / /trigger).
+            const space = $createTextNode(' ');
+            node.insertAfter(space);
+            space.select(1, 1);
+            closeMenu();
+        });
+    }, [editor]);
+    if (!searchStreams)
+        return null;
+    return (_jsx(LexicalTypeaheadMenuPlugin, { onQueryChange: onQueryChange, onSelectOption: onSelectOption, triggerFn: checkForTriggerMatch, options: options, 
+        // Above EnterSubmitPlugin (NORMAL) so Enter/Tab complete instead of sending.
+        commandPriority: COMMAND_PRIORITY_HIGH, anchorClassName: TYPEAHEAD_ANCHOR_CLASS, menuRenderFn: (anchorElementRef, { selectedIndex, selectOptionAndCleanUp, setHighlightedIndex }) => {
+            if (!anchorElementRef.current || activeQuery === null)
+                return null;
+            return ReactDOM.createPortal(_jsx(TypeaheadMenuAboveCaret, { anchor: anchorElementRef.current, dataAttr: "data-stream-menu", className: "w-64 min-w-56", optionCount: options.length, selectedIndex: selectedIndex, setHighlightedIndex: setHighlightedIndex, children: options.length === 0 ? (_jsx("div", { className: "px-2 py-1.5 text-sm text-muted-foreground", role: "status", children: labels.streamEmpty })) : (_jsx(TooltipProvider, { children: options.map((option, index) => {
+                        const selected = selectedIndex === index;
+                        const privateStream = option.candidate.visibility === 'private';
+                        const visibilityLabel = privateStream ? labels.streamPrivate : labels.streamPublic;
+                        return (_jsxs(Tooltip, { children: [_jsxs(TooltipTrigger, { render: _jsx("button", { id: `stream-typeahead-item-${index}`, type: "button", role: "option", tabIndex: -1, "aria-selected": selected, "aria-label": `~${option.candidate.title}, ${visibilityLabel}`, ref: option.setRefElement, className: cn('flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-start text-sm in-data-[platform=mobile]:mb-0.5 in-data-[platform=mobile]:text-base', selected ? 'bg-accent text-accent-foreground' : 'hover:bg-accent'), onClick: () => {
+                                            setHighlightedIndex(index);
+                                            selectOptionAndCleanUp(option);
+                                        }, onMouseEnter: () => setHighlightedIndex(index) }), children: [privateStream ? (_jsx(Lock, { className: "size-4 shrink-0 text-muted-foreground", "aria-hidden": true })) : (_jsx("span", { className: "w-4 shrink-0 text-center text-muted-foreground", "aria-hidden": true, children: "~" })), _jsx("span", { className: "min-w-0 flex-1 truncate", children: option.candidate.title })] }), _jsx(TooltipContent, { children: _jsxs("span", { className: "inline-flex items-center gap-1.5", children: [privateStream ? (_jsx(Lock, { className: "size-3.5 shrink-0", "aria-hidden": true })) : null, visibilityLabel] }) })] }, option.key));
+                    }) })) }), document.body);
+        } }));
+}
+/**
+ * Expands a completed `:shortcode:` (closing colon typed) into a native glyph or a
+ * `CustomEmojiNode`. Runs as a TextNode transform so it works without picking from the
+ * typeahead. Host resolves via `resolveEmojiShortcode`; unknown codes are left alone.
+ */
+function EmojiShortcodeReplacePlugin({ resolveEmojiShortcode, onEmojiUsed, }) {
+    const [editor] = useLexicalComposerContext();
+    const onEmojiUsedRef = useLatestRef(onEmojiUsed);
+    const typedRef = useTypedEditFlag(editor, Boolean(onEmojiUsed));
+    const pendingRef = React.useRef([]);
+    // Report after the update has committed, never from inside the transform.
+    React.useEffect(() => editor.registerUpdateListener(() => {
+        if (pendingRef.current.length === 0)
+            return;
+        const uses = pendingRef.current;
+        pendingRef.current = [];
+        for (const use of uses)
+            reportEmojiUse(onEmojiUsedRef.current, use);
+    }), [editor, onEmojiUsedRef]);
+    React.useEffect(() => {
+        if (!resolveEmojiShortcode)
+            return;
+        const pattern = /:([a-zA-Z0-9_+-]+):/;
+        return editor.registerNodeTransform(TextNode, (node) => {
+            if (!node.isSimpleText())
+                return;
+            // Code blocks are source text — never expand :shortcodes: inside them.
+            if ($findMatchingParent(node, $isCodeNode))
+                return;
+            const text = node.getTextContent();
+            const match = pattern.exec(text);
+            if (!match || match.index === undefined)
+                return;
+            const shortcode = match[1];
+            if (!shortcode)
+                return;
+            const resolved = resolveEmojiShortcode(shortcode);
+            if (!resolved)
+                return;
+            const start = match.index;
+            const end = start + match[0].length;
+            // Counts only when this keystroke typed the closing colon of this very shortcode: the
+            // transform also runs for paste, undo, restored drafts and programmatic edits.
+            const selection = $getSelection();
+            const typedClosingColon = typedRef.current &&
+                $isRangeSelection(selection) &&
+                selection.isCollapsed() &&
+                selection.anchor.type === 'text' &&
+                selection.anchor.key === node.getKey() &&
+                selection.anchor.offset === end;
+            let target = node;
+            if (start > 0) {
+                const parts = node.splitText(start);
+                target = parts[1] ?? node;
+            }
+            if (end - start < target.getTextContentSize()) {
+                target.splitText(end - start);
+            }
+            if (typeof resolved === 'string') {
+                target.replace($createTextNode(resolved));
+            }
+            else {
+                target.replace($createCustomEmojiNode(resolved.name, resolved.imageUrl));
+            }
+            if (typedClosingColon) {
+                pendingRef.current.push({
+                    source: 'typed_shortcode',
+                    kind: typeof resolved === 'string' ? 'unicode' : 'custom',
+                    emoji: typeof resolved === 'string' ? resolved : resolved.name,
+                });
+            }
+        });
+    }, [editor, resolveEmojiShortcode, typedRef]);
+    return null;
+}
+/** Keeps the newest callback without re-registering editor listeners when its identity changes. */
+function useLatestRef(value) {
+    const ref = React.useRef(value);
+    React.useEffect(() => {
+        ref.current = value;
+    });
+    return ref;
+}
+/** A host callback must never break editing. */
+function reportEmojiUse(callback, use) {
+    try {
+        callback?.(use);
+    }
+    catch {
+        // Host reporting is best effort.
+    }
+}
+/** `beforeinput` types a person produces by typing (including IME composition), not paste, drop or history. */
+const TYPED_INPUT_TYPES = new Set(['insertText', 'insertCompositionText', 'insertFromComposition']);
+/**
+ * True while a typing `beforeinput` is being applied: set before Lexical handles the event and
+ * cleared once its updates have run. Edits that did not come from the keyboard never set it.
+ */
+function useTypedEditFlag(editor, enabled) {
+    const typedRef = React.useRef(false);
+    React.useEffect(() => {
+        if (!enabled)
+            return;
+        let timer;
+        let attached = null;
+        const onBeforeInput = (event) => {
+            if (!TYPED_INPUT_TYPES.has(event.inputType))
+                return;
+            typedRef.current = true;
+            window.clearTimeout(timer);
+            timer = window.setTimeout(() => {
+                typedRef.current = false;
+            }, 0);
+        };
+        const unregister = editor.registerRootListener((root, previous) => {
+            previous?.removeEventListener('beforeinput', onBeforeInput, true);
+            root?.addEventListener('beforeinput', onBeforeInput, true);
+            attached = root;
+        });
+        return () => {
+            unregister();
+            attached?.removeEventListener('beforeinput', onBeforeInput, true);
+            window.clearTimeout(timer);
+            typedRef.current = false;
+        };
+    }, [editor, enabled]);
+    return typedRef;
+}
+/** `CycleTriggerNode` chip look (`bg-secondary px-1 rounded`); font size and weight inherit from the surrounding text. */
+const SLASH_CHIP_STYLE = 'background-color: var(--secondary); color: var(--secondary-foreground); border-radius: 4px; padding: 0 4px;';
+/**
+ * Paints the leading `/name` of plain-text slash commands (e.g. `/giphy`) like a cycle trigger
+ * chip while the text stays ordinary text, so the prompt after it and `plainTextOf` are
+ * untouched. Only the exact leading token carries the style; anything else is cleared.
+ */
+function SlashCommandChipPlugin({ commands }) {
+    const [editor] = useLexicalComposerContext();
+    React.useEffect(() => {
+        if (!commands || commands.length === 0)
+            return;
+        return editor.registerNodeTransform(TextNode, (node) => {
+            if (!node.isSimpleText())
+                return;
+            const text = node.getTextContent();
+            const parent = node.getParent();
+            const isLead = node.getPreviousSibling() === null &&
+                $isElementNode(parent) &&
+                parent.getKey() === $getRoot().getFirstChild()?.getKey();
+            const token = isLead
+                ? commands.find((name) => {
+                    const lead = `/${name}`;
+                    return (text.startsWith(lead) &&
+                        (text.length === lead.length || /\s/.test(text[lead.length] ?? '')));
+                })
+                : undefined;
+            if (!token) {
+                if (node.getStyle() === SLASH_CHIP_STYLE)
+                    node.setStyle('');
+                return;
+            }
+            const length = token.length + 1;
+            let target = node;
+            if (text.length > length) {
+                const [head, rest] = node.splitText(length);
+                target = head ?? node;
+                if (rest && rest.getStyle() !== '')
+                    rest.setStyle('');
+            }
+            if (target.getStyle() !== SLASH_CHIP_STYLE)
+                target.setStyle(SLASH_CHIP_STYLE);
+        });
+    }, [editor, commands]);
+    return null;
+}
+const DEFAULT_DOCUMENT_LABELS = {
+    heading2: 'Heading',
+    heading3: 'Subheading',
+    image: 'Add image',
+    imageAlt: 'Image description',
+    imageAltPlaceholder: 'Describe the image',
+    imageAltRequired: 'Add a description for this image',
+    imageRemove: 'Remove image',
+    imageUnavailable: 'Image unavailable',
+    uploading: 'Uploading image',
+};
+const DocumentModeCtx = React.createContext(null);
+/** Block image that round-trips with contracts/streams/about-lexical.ts (`type: 'about-image'`). */
+export class DocumentImageNode extends DecoratorNode {
+    __assetId;
+    __alt;
+    static getType() {
+        return 'about-image';
+    }
+    static clone(node) {
+        return new DocumentImageNode(node.__assetId, node.__alt, node.__key);
+    }
+    constructor(assetId, alt, key) {
+        super(key);
+        this.__assetId = assetId;
+        this.__alt = alt;
+    }
+    createDOM(_config) {
+        const div = document.createElement('div');
+        div.className = 'my-2';
+        return div;
+    }
+    updateDOM() {
+        return false;
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    static importJSON(serialized) {
+        return new DocumentImageNode(String(serialized.assetId ?? ''), String(serialized.alt ?? ''));
+    }
+    exportJSON() {
+        return { type: 'about-image', version: 1, assetId: this.__assetId, alt: this.__alt };
+    }
+    getAssetId() {
+        return this.__assetId;
+    }
+    getAlt() {
+        return this.__alt;
+    }
+    setAlt(alt) {
+        const writable = this.getWritable();
+        writable.__alt = alt;
+        return writable;
+    }
+    isInline() {
+        return false;
+    }
+    decorate() {
+        return _jsx(DocumentImageView, { nodeKey: this.__key, assetId: this.__assetId, alt: this.__alt });
+    }
+}
+export const $isDocumentImageNode = (node) => node instanceof DocumentImageNode;
+/**
+ * Keys typed in the description field must not reach Lexical's root listeners (Enter, Backspace,
+ * undo). Marking the event handled keeps it bubbling, so React's root listener still sees it.
+ */
+const useIsolatedFromEditor = (ref) => {
+    React.useEffect(() => {
+        const element = ref.current;
+        if (!element)
+            return;
+        const stop = (event) => stopLexicalPropagation(event);
+        const events = ['keydown', 'keyup', 'keypress', 'beforeinput', 'input', 'paste', 'cut', 'copy'];
+        for (const name of events)
+            element.addEventListener(name, stop);
+        return () => {
+            for (const name of events)
+                element.removeEventListener(name, stop);
+        };
+    }, [ref]);
+};
+function DocumentImageView({ nodeKey, assetId, alt, }) {
+    const [editor] = useLexicalComposerContext();
+    const ctx = React.useContext(DocumentModeCtx);
+    const labels = ctx?.labels ?? DEFAULT_DOCUMENT_LABELS;
+    const [failed, setFailed] = React.useState(false);
+    const controlsRef = React.useRef(null);
+    const altId = React.useId();
+    const altInputRef = React.useRef(null);
+    const [initialAlt] = React.useState(alt);
+    useIsolatedFromEditor(controlsRef);
+    // Uncontrolled so typing is never reset by the asynchronous Lexical commit (the caret would jump);
+    // external changes (undo) are copied in.
+    React.useEffect(() => {
+        const input = altInputRef.current;
+        if (input && input.value !== alt)
+            input.value = alt;
+    }, [alt]);
+    const src = ctx?.options.resolveImageUrl(assetId) ?? null;
+    const editable = editor.isEditable();
+    const update = (change) => editor.update(() => {
+        const node = $getNodeByKey(nodeKey);
+        if ($isDocumentImageNode(node))
+            change(node);
+    });
+    return (_jsxs("figure", { "data-slot": "document-image", className: "m-0 grid gap-1.5 rounded-md border p-2", children: [src && !failed ? (_jsx("img", { src: src, alt: alt, loading: "lazy", decoding: "async", onError: () => setFailed(true), className: "max-h-80 w-auto max-w-full rounded object-contain" })) : (_jsx("div", { className: "flex h-24 items-center justify-center rounded bg-muted text-xs text-muted-foreground", children: failed ? labels.imageUnavailable : null })), editable ? (_jsxs("div", { ref: controlsRef, className: "flex items-center gap-2", children: [_jsx(Label, { htmlFor: altId, className: "sr-only", children: labels.imageAlt }), _jsx(Input, { id: altId, ref: altInputRef, defaultValue: initialAlt, placeholder: labels.imageAltPlaceholder, "aria-invalid": alt.trim() === '' || undefined, "aria-describedby": alt.trim() === '' ? `${altId}-error` : undefined, onChange: (event) => update((node) => node.setAlt(event.target.value)) }), _jsx(Button, { type: "button", size: "icon-xs", variant: "ghost", "aria-label": labels.imageRemove, onClick: () => update((node) => node.remove()), children: _jsx(Trash, { "aria-hidden": true }) }), alt.trim() === '' ? (_jsx("span", { id: `${altId}-error`, className: "sr-only", children: labels.imageAltRequired })) : null] })) : null] }));
+}
+const $countDocumentImages = () => $nodesOfType(DocumentImageNode).length;
+/** Picks, pastes and drops become uploads; each finished upload becomes an image block at the caret. */
+function useDocumentImages(editor, options) {
+    const [pending, setPending] = React.useState(0);
+    const inFlight = React.useRef(0);
+    const optionsRef = React.useRef(options);
+    React.useLayoutEffect(() => {
+        optionsRef.current = options;
+    });
+    React.useEffect(() => {
+        optionsRef.current?.onUploadingChange?.(pending > 0);
+    }, [pending]);
+    const addFiles = React.useCallback(async (files) => {
+        for (const file of files) {
+            const current = optionsRef.current;
+            if (!current)
+                return;
+            if (!current.acceptedImageTypes.includes(file.type)) {
+                current.onReject?.(file, 'type');
+                continue;
+            }
+            const held = editor.getEditorState().read($countDocumentImages);
+            if (current.maxImages !== undefined && held + inFlight.current >= current.maxImages) {
+                current.onReject?.(file, 'limit');
+                continue;
+            }
+            inFlight.current += 1;
+            setPending((count) => count + 1);
+            try {
+                const assetId = await current.uploadImage(file);
+                if (!assetId)
+                    continue;
+                // OnChangePlugin drops the first update of a never-focused (empty, selection-less)
+                // editor, so give the state a selection before the insert that must be reported.
+                editor.update(() => {
+                    if (!$getSelection())
+                        $getRoot().selectEnd();
+                }, { discrete: true });
+                editor.update(() => {
+                    const node = new DocumentImageNode(assetId, '');
+                    $insertNodeToNearestRoot(node);
+                    const next = node.getNextSibling();
+                    if ($isParagraphNode(next))
+                        next.selectStart();
+                    else
+                        node.insertAfter($createParagraphNode()).selectStart();
+                }, { discrete: true });
+            }
+            finally {
+                inFlight.current -= 1;
+                setPending((count) => count - 1);
+            }
+        }
+    }, [editor]);
+    React.useEffect(() => {
+        if (!options)
+            return;
+        const imageFiles = (list) => Array.from(list ?? []).filter((file) => file.type.startsWith('image/'));
+        const unregisterPaste = editor.registerCommand(PASTE_COMMAND, (event) => {
+            if (!('clipboardData' in event) || !event.clipboardData)
+                return false;
+            const files = imageFiles(event.clipboardData.files);
+            if (files.length === 0)
+                return false;
+            event.preventDefault();
+            void addFiles(files);
+            return true;
+        }, COMMAND_PRIORITY_HIGH);
+        const unregisterDrop = editor.registerCommand(DROP_COMMAND, (event) => {
+            const files = imageFiles(event.dataTransfer?.files);
+            if (files.length === 0)
+                return false;
+            event.preventDefault();
+            void addFiles(files);
+            return true;
+        }, COMMAND_PRIORITY_HIGH);
+        return () => {
+            unregisterPaste();
+            unregisterDrop();
+        };
+    }, [editor, options, addFiles]);
+    return { addFiles, uploading: pending > 0 };
+}
+/** Turns the block holding the caret into a heading of `tag`, or back into a paragraph when it already is one. */
+const toggleHeading = (editor, tag) => editor.update(() => {
+    const selection = $getSelection();
+    if (!$isRangeSelection(selection))
+        return;
+    const top = selection.anchor.getNode().getTopLevelElement();
+    if (!top || $isListNode(top) || (!$isParagraphNode(top) && !$isHeadingNode(top)))
+        return;
+    if ($isHeadingNode(top) && top.getTag() === tag)
+        top.replace($createParagraphNode(), true);
+    else
+        top.replace($createHeadingNode(tag), true);
+});
+// ── Formatting: theme, selection state, toolbar, link dialog ────────────────
+/**
+ * Only formats the `contracts/chat/adapters/lexical.ts` round-trip preserves are exposed:
+ * bold, italic, strikethrough, inline code, bullet/numbered lists and links. Headings, quotes and
+ * underline are deliberately absent because the message AST has no representation for them.
+ */
+const editorTheme = {
+    // DirectionPlugin sets `dir` for bidi; `text-left` keeps lines left-aligned like Slack.
+    paragraph: 'm-0 text-left',
+    text: {
+        bold: 'font-semibold',
+        italic: 'italic',
+        strikethrough: 'line-through',
+        underline: 'underline',
+        underlineStrikethrough: 'underline line-through',
+        code: 'rounded bg-muted px-1 font-mono text-[0.9em]',
+    },
+    heading: {
+        h2: 'mt-3 mb-1 text-lg font-semibold text-start',
+        h3: 'mt-2 mb-1 text-base font-semibold text-start',
+    },
+    list: {
+        // Markers follow `dir`, so the gutter is logical; `w-fit` keeps RTL markers beside the text.
+        ul: 'my-1 w-fit max-w-full list-disc ps-6 text-start',
+        ol: 'my-1 w-fit max-w-full list-decimal ps-6 text-start',
+        listitem: 'my-0.5 text-start',
+        nested: { listitem: 'list-none' },
+    },
+    link: 'text-primary underline underline-offset-2',
+    code: 'my-1 block rounded bg-muted p-2 font-mono text-[0.9em]',
+};
+const DOCUMENT_MARKDOWN_TRANSFORMERS = [
+    BOLD_ITALIC_STAR,
+    BOLD_ITALIC_UNDERSCORE,
+    BOLD_STAR,
+    BOLD_UNDERSCORE,
+    ITALIC_STAR,
+    ITALIC_UNDERSCORE,
+    INLINE_CODE,
+    UNORDERED_LIST,
+    ORDERED_LIST,
+    LINK,
+];
+const MARKDOWN_TRANSFORMERS = [
+    BOLD_ITALIC_STAR,
+    BOLD_ITALIC_UNDERSCORE,
+    BOLD_STAR,
+    BOLD_UNDERSCORE,
+    ITALIC_STAR,
+    ITALIC_UNDERSCORE,
+    STRIKETHROUGH,
+    INLINE_CODE,
+    CODE,
+    UNORDERED_LIST,
+    ORDERED_LIST,
+    LINK,
+];
+const DEFAULT_LABELS = {
+    toolbar: 'Text formatting',
+    bold: 'Bold',
+    italic: 'Italic',
+    strikethrough: 'Strikethrough',
+    code: 'Code',
+    bulletList: 'Bulleted list',
+    numberedList: 'Numbered list',
+    link: 'Link',
+    linkDialogTitle: 'Insert link',
+    linkDialogDescription: 'Add a link to the selected text.',
+    linkUrl: 'URL',
+    linkUrlPlaceholder: 'https://example.com',
+    linkText: 'Text',
+    linkTextPlaceholder: 'Link text',
+    linkInvalid: 'Enter a valid http(s) URL',
+    linkRemove: 'Remove link',
+    linkInsert: 'Insert',
+    cancel: 'Cancel',
+    slashTitle: 'Commands',
+    slashEmpty: 'No commands yet',
+    slashCyclesTitle: 'Cycles',
+    slashCommandsTitle: 'Commands',
+    emojiEmpty: 'No emoji found',
+    streamEmpty: 'No streams found',
+    streamPrivate: 'Private',
+    streamPublic: 'Public',
+    streamFallback: 'stream',
+};
+const NO_FORMATS = {
+    bold: false,
+    italic: false,
+    strikethrough: false,
+    code: false,
+    bulletList: false,
+    numberedList: false,
+    link: false,
+    headingTag: null,
+};
+const $activeSelection = () => {
+    const selection = $getSelection();
+    return $isRangeSelection(selection) ? selection : null;
+};
+const $linkAtSelection = (selection) => {
+    for (const node of [
+        selection.anchor.getNode(),
+        selection.focus.getNode(),
+        ...selection.getNodes(),
+    ]) {
+        if ($isLinkNode(node))
+            return node;
+        const parent = node.getParent();
+        if ($isLinkNode(parent))
+            return parent;
+    }
+    return null;
+};
+const headingTagOf = (tag) => tag === 'h2' || tag === 'h3' ? tag : null;
+const $selectionFormats = () => {
+    const selection = $activeSelection();
+    if (!selection)
+        return NO_FORMATS;
+    const topLevel = selection.anchor.getNode().getTopLevelElement();
+    const listType = $isListNode(topLevel) ? topLevel.getListType() : null;
+    return {
+        bold: selection.hasFormat('bold'),
+        italic: selection.hasFormat('italic'),
+        strikethrough: selection.hasFormat('strikethrough'),
+        code: selection.hasFormat('code'),
+        bulletList: listType === 'bullet',
+        numberedList: listType === 'number',
+        link: $linkAtSelection(selection) !== null,
+        headingTag: $isHeadingNode(topLevel) ? headingTagOf(topLevel.getTag()) : null,
+    };
+};
+const formatsEqual = (a, b) => Object.keys(a).every((key) => a[key] === b[key]);
+function useSelectionFormats(editor) {
+    const [formats, setFormats] = React.useState(NO_FORMATS);
+    React.useEffect(() => {
+        const refresh = () => editor.getEditorState().read(() => {
+            const next = $selectionFormats();
+            setFormats((prev) => (formatsEqual(prev, next) ? prev : next));
+        });
+        const unregisterUpdate = editor.registerUpdateListener(refresh);
+        const unregisterSelection = editor.registerCommand(SELECTION_CHANGE_COMMAND, () => {
+            refresh();
+            return false;
+        }, COMMAND_PRIORITY_LOW);
+        return () => {
+            unregisterUpdate();
+            unregisterSelection();
+        };
+    }, [editor]);
+    return formats;
+}
+const toggleList = (editor, listType, active) => {
+    if (active) {
+        editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined);
+        return;
+    }
+    editor.dispatchCommand(listType === 'bullet' ? INSERT_UNORDERED_LIST_COMMAND : INSERT_ORDERED_LIST_COMMAND, undefined);
+};
+/** Snapshot of the selection to edit a link from, taken before focus moves to the dialog. */
+const readLinkDraft = (editor) => editor.getEditorState().read(() => {
+    const selection = $activeSelection();
+    if (!selection)
+        return { selection: null, url: '', text: '' };
+    const link = $linkAtSelection(selection);
+    return {
+        selection: selection.clone(),
+        url: link?.getURL() ?? '',
+        text: link ? link.getTextContent() : selection.getTextContent(),
+    };
+});
+const applyLink = (editor, draft, url, text) => {
+    editor.update(() => {
+        $setSelection(draft.selection ? draft.selection.clone() : null);
+        const selection = $activeSelection() ?? $getRoot().selectEnd();
+        const existing = $linkAtSelection(selection);
+        if (existing) {
+            existing.setURL(url);
+            if (text !== existing.getTextContent()) {
+                existing.clear();
+                existing.append($createTextNode(text));
+            }
+            existing.selectEnd();
+            return;
+        }
+        selection.removeText();
+        const link = $createLinkNode(url, { rel: 'noopener noreferrer', target: '_blank' });
+        link.append($createTextNode(text));
+        $insertNodes([link]);
+        link.selectEnd();
+    });
+};
+const removeLink = (editor, draft) => {
+    editor.update(() => {
+        $setSelection(draft.selection ? draft.selection.clone() : null);
+        const selection = $activeSelection();
+        const link = selection ? $linkAtSelection(selection) : null;
+        if (!link)
+            return;
+        for (const child of link.getChildren())
+            link.insertBefore(child);
+        link.remove();
+    });
+};
+const normalizeUrl = (raw) => {
+    const candidate = /^https?:\/\//i.test(raw) ? raw : `https://${raw}`;
+    try {
+        const { protocol } = new URL(candidate);
+        return /^https?:$/i.test(protocol) ? candidate : null;
+    }
+    catch {
+        return null;
+    }
+};
+/**
+ * Whole-clipboard paste that is a bare URL (Slack-style linkify-on-paste over a selection).
+ * Rejects multi-word / non-URL clipboard text so ordinary paste is unchanged.
+ */
+const pastedUrlOf = (raw) => {
+    const trimmed = raw.trim();
+    if (!trimmed || /\s/.test(trimmed))
+        return null;
+    const match = URL_MATCHER.exec(trimmed);
+    if (!match || match.index !== 0 || match[0].length !== trimmed.length)
+        return null;
+    return trimmed.startsWith('http') ? trimmed : `https://${trimmed}`;
+};
+/**
+ * Pasting a bare URL over a non-empty selection wraps that text as a link (Slack parity).
+ * Cmd/Ctrl+K is reserved for global search in the app, so it never opens the link dialog —
+ * use the toolbar Link button, or paste a URL over a selection.
+ */
+function PasteLinkOnSelectionPlugin() {
+    const [editor] = useLexicalComposerContext();
+    React.useEffect(() => editor.registerCommand(PASTE_COMMAND, (event) => {
+        // PasteCommandType is ClipboardEvent | InputEvent | KeyboardEvent; only clipboard pastes
+        // carry text/plain. Avoid `instanceof` so jsdom test doubles still match.
+        if (!('clipboardData' in event) || !event.clipboardData)
+            return false;
+        const raw = event.clipboardData.getData('text/plain');
+        if (raw == null)
+            return false;
+        const url = pastedUrlOf(raw);
+        if (!url)
+            return false;
+        const selection = $getSelection();
+        if (!$isRangeSelection(selection) || selection.isCollapsed())
+            return false;
+        // Code blocks are source — let normal paste replace the selection, not wrap a link.
+        if ($selectionIntersectsCodeBlock())
+            return false;
+        const text = selection.getTextContent();
+        if (!text)
+            return false;
+        event.preventDefault();
+        selection.removeText();
+        const link = $createLinkNode(url, { rel: 'noopener noreferrer', target: '_blank' });
+        link.append($createTextNode(text));
+        $insertNodes([link]);
+        link.selectEnd();
+        return true;
+    }, COMMAND_PRIORITY_HIGH), [editor]);
+    return null;
+}
+function FormatButton({ label, active, onClick, children, }) {
+    return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { render: _jsx(Button, { type: "button", size: "icon-xs", variant: "ghost", "aria-label": label, "aria-pressed": active, className: cn(
+                    // Phone: 36px buttons with 20px icons (the 24px / 12px desktop set is too small to hit).
+                    "in-data-[platform=mobile]:size-9 in-data-[platform=mobile]:[&_svg:not([class*='size-'])]:size-5", active && 'bg-accent text-accent-foreground'), 
+                    // Keep the editor selection: the toolbar must not take focus on click.
+                    onMouseDown: (event) => event.preventDefault(), onClick: onClick }), children: children }), _jsx(TooltipContent, { children: label })] }));
+}
+function FormattingToolbar({ labels, onLinkClick, documentMode, }) {
+    const [editor] = useLexicalComposerContext();
+    const formats = useSelectionFormats(editor);
+    const fileInputRef = React.useRef(null);
+    const toggleFormat = (format) => editor.dispatchCommand(FORMAT_TEXT_COMMAND, format);
+    return (
+    // Base UI tooltips need a provider ancestor; the editor brings its own so hosts need none.
+    _jsx(TooltipProvider, { children: _jsxs("div", { role: "toolbar", "aria-label": labels.toolbar, "data-slot": "rich-text-editor-toolbar", className: cn('flex items-center gap-0.5 border-b px-1.5 py-1 in-data-[platform=mobile]:px-1 in-data-[platform=mobile]:py-1.5', 
+            // The document toolbar has nine controls: wrap on a phone rather than hide the image button.
+            documentMode ? 'flex-wrap' : 'overflow-x-auto'), children: [documentMode ? (_jsxs(_Fragment, { children: [_jsx(FormatButton, { label: documentMode.labels.heading2, active: formats.headingTag === 'h2', onClick: () => toggleHeading(editor, 'h2'), children: _jsx("span", { "aria-hidden": true, className: "text-xs font-semibold", children: "H2" }) }), _jsx(FormatButton, { label: documentMode.labels.heading3, active: formats.headingTag === 'h3', onClick: () => toggleHeading(editor, 'h3'), children: _jsx("span", { "aria-hidden": true, className: "text-xs font-semibold", children: "H3" }) }), _jsx(Separator, { orientation: "vertical", className: "mx-1 h-4" })] })) : null, _jsx(FormatButton, { label: labels.bold, active: formats.bold, onClick: () => toggleFormat('bold'), children: _jsx(Bold, { "aria-hidden": true }) }), _jsx(FormatButton, { label: labels.italic, active: formats.italic, onClick: () => toggleFormat('italic'), children: _jsx(Italic, { "aria-hidden": true }) }), documentMode ? null : (_jsx(FormatButton, { label: labels.strikethrough, active: formats.strikethrough, onClick: () => toggleFormat('strikethrough'), children: _jsx(Strikethrough, { "aria-hidden": true }) })), _jsx(FormatButton, { label: labels.code, active: formats.code, onClick: () => toggleFormat('code'), children: _jsx(Code, { "aria-hidden": true }) }), _jsx(Separator, { orientation: "vertical", className: "mx-1 h-4" }), _jsx(FormatButton, { label: labels.bulletList, active: formats.bulletList, onClick: () => toggleList(editor, 'bullet', formats.bulletList), children: _jsx(List, { "aria-hidden": true }) }), _jsx(FormatButton, { label: labels.numberedList, active: formats.numberedList, onClick: () => toggleList(editor, 'number', formats.numberedList), children: _jsx(ListOrdered, { "aria-hidden": true }) }), _jsx(Separator, { orientation: "vertical", className: "mx-1 h-4" }), _jsx(FormatButton, { label: labels.link, active: formats.link, onClick: onLinkClick, children: _jsx(LinkIcon, { "aria-hidden": true }) }), documentMode ? (_jsxs(_Fragment, { children: [_jsx(FormatButton, { label: documentMode.labels.image, active: false, onClick: () => fileInputRef.current?.click(), children: _jsx(ImageIcon, { "aria-hidden": true }) }), _jsx("input", { ref: fileInputRef, type: "file", multiple: true, hidden: true, accept: documentMode.options.acceptedImageTypes.join(','), onChange: (event) => {
+                                const files = Array.from(event.target.files ?? []);
+                                event.target.value = '';
+                                void documentMode.addFiles(files);
+                            } })] })) : null] }) }));
+}
+/** Mounted only while a draft exists, so the fields initialise from it and reset on every open. */
+function LinkDialog({ draft, labels, onClose, }) {
+    const [editor] = useLexicalComposerContext();
+    const [url, setUrl] = React.useState(draft.url);
+    const [text, setText] = React.useState(draft.text);
+    const [invalid, setInvalid] = React.useState(false);
+    const urlId = React.useId();
+    const textId = React.useId();
+    const errorId = React.useId();
+    const finish = () => {
+        onClose();
+        // The dialog has focus; give it back to the editor once it has closed.
+        requestAnimationFrame(() => editor.focus());
+    };
+    const submit = () => {
+        const normalized = normalizeUrl(url.trim());
+        if (!normalized) {
+            setInvalid(true);
+            return;
+        }
+        applyLink(editor, draft, normalized, text.trim() || url.trim());
+        finish();
+    };
+    const remove = () => {
+        removeLink(editor, draft);
+        finish();
+    };
+    return (_jsx(Dialog, { open: true, onOpenChange: (open) => (open ? undefined : finish()), children: _jsx(DialogContent, { children: _jsxs("form", { className: "contents", onSubmit: (event) => {
+                    event.preventDefault();
+                    submit();
+                }, children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: labels.linkDialogTitle }), _jsx(DialogDescription, { children: labels.linkDialogDescription })] }), _jsxs("div", { className: "grid gap-3", children: [_jsxs("div", { className: "grid gap-1.5", children: [_jsx(Label, { htmlFor: urlId, children: labels.linkUrl }), _jsx(Input, { id: urlId, 
+                                        // Plain text: native `type="url"` validation would block scheme-less input that
+                                        // normalizeUrl accepts (e.g. `example.com`), and would swallow the submit event.
+                                        type: "text", inputMode: "url", autoComplete: "off", autoFocus: true, placeholder: labels.linkUrlPlaceholder, value: url, "aria-invalid": invalid || undefined, "aria-describedby": invalid ? errorId : undefined, onChange: (event) => {
+                                            setUrl(event.target.value);
+                                            setInvalid(false);
+                                        } }), invalid ? (_jsx("p", { id: errorId, role: "alert", className: "text-xs text-destructive", children: labels.linkInvalid })) : null] }), _jsxs("div", { className: "grid gap-1.5", children: [_jsx(Label, { htmlFor: textId, children: labels.linkText }), _jsx(Input, { id: textId, placeholder: labels.linkTextPlaceholder, value: text, onChange: (event) => setText(event.target.value) })] })] }), _jsxs(DialogFooter, { children: [draft?.url ? (_jsx(Button, { type: "button", variant: "ghost", onClick: remove, children: labels.linkRemove })) : null, _jsx(Button, { type: "button", variant: "outline", onClick: finish, children: labels.cancel }), _jsx(Button, { type: "submit", children: labels.linkInsert })] })] }) }) }));
+}
+// ── Content direction (HAC #1045) ────────────────────────────────────────────
+const DIRECTION_PLUGIN_TAG = 'direction-plugin';
+/** Survives empty composer / send remount so typing Hebrew again keeps RTL. */
+let lastRememberedDirection = 'ltr';
+/** Test-only: reset module-scoped remembered direction between cases. */
+function __resetLastRememberedDirectionForTests() {
+    lastRememberedDirection = 'ltr';
+}
+/**
+ * Plain text used for word-vote direction: mentions, cycle triggers, stream
+ * chips and link labels are excluded so `@Name` then Hebrew does not lock LTR.
+ */
+const plainTextForDirection = (node) => {
+    let out = '';
+    for (const child of node.getChildren()) {
+        if ($isMentionNode(child) ||
+            $isCycleTriggerNode(child) ||
+            $isStreamChipNode(child) ||
+            $isCustomEmojiNode(child) ||
+            $isLinkNode(child))
+            continue;
+        if ($isTextNode(child)) {
+            out += child.getTextContent();
+            continue;
+        }
+        if ($isElementNode(child))
+            out += plainTextForDirection(child);
+    }
+    return out;
+};
+/**
+ * Recomputes paragraph / list / code `dir` with the same word-vote as
+ * `detectTextDirection`. Lexical's native first-strong `dir="auto"` is not enough
+ * once mention display names enter the signal.
+ *
+ * Stamps the live DOM (HAC) and Lexical `setDirection` so caret alignment and
+ * serialized `direction` stay in sync.
+ */
+function DirectionPlugin({ enabled = true }) {
+    const [editor] = useLexicalComposerContext();
+    React.useEffect(() => {
+        if (!enabled)
+            return;
+        const stampDirections = () => {
+            const updates = [];
+            editor.getEditorState().read(() => {
+                for (const child of $getRoot().getChildren()) {
+                    const dom = editor.getElementByKey(child.getKey());
+                    let dir;
+                    if ($isCodeNode(child)) {
+                        dir = 'ltr';
+                    }
+                    else if ($isListNode(child) || $isParagraphNode(child)) {
+                        const signal = plainTextForDirection(child);
+                        if (!hasStrongCharacter(signal)) {
+                            // Empty / "@" / "/" / mention-only blocks keep the last typed direction (HAC remount
+                            // memory) on the DOM only: a model update here would re-run the typeahead listener
+                            // mid-trigger and close the menu the composer's @ and / buttons just opened.
+                            if (dom && dom.getAttribute('dir') !== lastRememberedDirection)
+                                dom.setAttribute('dir', lastRememberedDirection);
+                            continue;
+                        }
+                        dir = detectTextDirection(signal);
+                        lastRememberedDirection = dir;
+                    }
+                    else {
+                        continue;
+                    }
+                    if (dom && dom.getAttribute('dir') !== dir)
+                        dom.setAttribute('dir', dir);
+                    if (child.getDirection() !== dir)
+                        updates.push({ key: child.getKey(), dir });
+                }
+            });
+            if (updates.length === 0)
+                return;
+            editor.update(() => {
+                for (const { key, dir } of updates) {
+                    const node = $getNodeByKey(key);
+                    if ($isElementNode(node) && node.getDirection() !== dir)
+                        node.setDirection(dir);
+                }
+            }, { tag: DIRECTION_PLUGIN_TAG });
+        };
+        stampDirections();
+        return editor.registerUpdateListener(({ tags }) => {
+            if (tags.has(DIRECTION_PLUGIN_TAG))
+                return;
+            stampDirections();
+        });
+    }, [editor, enabled]);
+    return null;
+}
+const editorNodes = [
+    HeadingNode,
+    QuoteNode,
+    ListNode,
+    ListItemNode,
+    LinkNode,
+    AutoLinkNode,
+    CodeNode,
+    MentionNode,
+    CycleTriggerNode,
+    StreamChipNode,
+    CustomEmojiNode,
+    DocumentImageNode,
+];
+// Module-level so its identity is stable: an inline one is a new component type on every render,
+// which remounts every decorator (and drops focus from inputs inside them, e.g. an image's alt field).
+function PassthroughErrorBoundary({ children }) {
+    return _jsx(_Fragment, { children: children });
+}
+function RichTextEditorInner({ value: _value, onChange, placeholder, searchMentions, onMentionSelect, searchSlashCommands, onSlashCommandSelect, onSlashTyped, searchEmojis, resolveEmojiShortcode, onEmojiUsed, searchStreams, onSubmit, sendOnEnter = true, insertCycleTrigger, insertCustomEmoji, chipSlashCommands, onCycleTriggerInserted, onCustomEmojiInserted, insertTextAtCaret, onInsertTextAtCaret, disabled, autoFocus = false, toolbar = true, detectContentDirection = true, labels: labelOverrides, documentMode, 'aria-label': ariaLabel, className, }) {
+    const [editor] = useLexicalComposerContext();
+    const documentLabelOverrides = documentMode?.labels;
+    const documentLabels = React.useMemo(() => ({ ...DEFAULT_DOCUMENT_LABELS, ...documentLabelOverrides }), [documentLabelOverrides]);
+    const documentImages = useDocumentImages(editor, documentMode);
+    const documentContext = React.useMemo(() => (documentMode ? { options: documentMode, labels: documentLabels } : null), [documentMode, documentLabels]);
+    const [linkDraft, setLinkDraft] = React.useState(null);
+    const labels = React.useMemo(() => ({ ...DEFAULT_LABELS, ...labelOverrides }), [labelOverrides]);
+    const showToolbar = toolbar && !disabled;
+    const openLinkDialog = React.useCallback(() => setLinkDraft(readLinkDraft(editor)), [editor]);
+    return (_jsx(DocumentModeCtx.Provider, { value: documentContext, children: _jsx(StreamChipLabelsCtx.Provider, { value: {
+                streamPrivate: labels.streamPrivate,
+                streamPublic: labels.streamPublic,
+                streamFallback: labels.streamFallback,
+            }, children: _jsxs("div", { "data-slot": "rich-text-editor", className: cn('flex min-h-0 flex-col rounded-md border', className), children: [_jsx(Collapse, { open: showToolbar, children: _jsx(FormattingToolbar, { labels: labels, onLinkClick: openLinkDialog, documentMode: documentContext
+                                ? { ...documentContext, addFiles: documentImages.addFiles }
+                                : undefined }) }), _jsx("div", { className: "relative min-h-0 flex-1 overflow-y-auto", children: _jsx(RichTextPlugin, { contentEditable: _jsx(ContentEditable, { "aria-label": ariaLabel, "aria-multiline": true, role: "textbox", className: "min-h-9 w-full resize-none px-3 py-1.5 text-sm outline-none in-data-[platform=mobile]:text-base disabled:cursor-not-allowed disabled:opacity-50", disabled: disabled }), placeholder: placeholder ? (_jsx("div", { className: "pointer-events-none absolute top-1.5 start-3 text-sm text-muted-foreground", children: placeholder })) : null, ErrorBoundary: PassthroughErrorBoundary }) }), autoFocus ? _jsx(AutoFocusPlugin, {}) : null, _jsx(HistoryPlugin, {}), _jsx(ListPlugin, {}), _jsx(ListTabIndentPlugin, {}), _jsx(LinkPlugin, { validateUrl: (url) => /^https?:\/\//i.test(url) }), _jsx(AutoLinkPlugin, { matchers: MATCHERS, excludeParents: AUTO_LINK_EXCLUDE_PARENTS }), _jsx(MarkdownShortcutPlugin, { transformers: documentMode ? DOCUMENT_MARKDOWN_TRANSFORMERS : MARKDOWN_TRANSFORMERS }), _jsx(PasteLinkOnSelectionPlugin, {}), linkDraft ? (_jsx(LinkDialog, { draft: linkDraft, labels: labels, onClose: () => setLinkDraft(null) })) : null, _jsx(OnChangePlugin, { onChange: (editorState) => {
+                            onChange(editorState.toJSON());
+                        } }), _jsx(EnterSubmitPlugin, { onSubmit: onSubmit, sendOnEnter: sendOnEnter }), documentMode ? null : _jsx(CodeFenceOnThirdBacktickPlugin, {}), _jsx(InsertTextAtCaretPlugin, { request: insertTextAtCaret, onInserted: onInsertTextAtCaret }), _jsx(TypeaheadEditGatePlugin, {}), _jsx(MentionsPluginWithPortal, { searchMentions: searchMentions, onMentionSelect: onMentionSelect }), _jsx(SlashCommandsPlugin, { searchSlashCommands: searchSlashCommands, onSelectCommand: onSlashCommandSelect, onSlashTyped: onSlashTyped, labels: labels }), _jsx(EmojiTypeaheadPlugin, { searchEmojis: searchEmojis, labels: labels, onEmojiUsed: onEmojiUsed }), _jsx(EmojiShortcodeReplacePlugin, { resolveEmojiShortcode: resolveEmojiShortcode, onEmojiUsed: onEmojiUsed }), _jsx(StreamChipsTypeaheadPlugin, { searchStreams: searchStreams, labels: labels }), _jsx(CycleTriggerPlugin, { request: insertCycleTrigger, onInserted: onCycleTriggerInserted }), _jsx(CustomEmojiPlugin, { request: insertCustomEmoji, onInserted: onCustomEmojiInserted }), _jsx(SlashCommandChipPlugin, { commands: chipSlashCommands }), _jsx(DirectionPlugin, { enabled: detectContentDirection })] }) }) }));
+}
+/**
+ * Controlled rich-text editor built on Lexical.
+ *
+ * Registered nodes: `HeadingNode`, `QuoteNode`, `ListNode`, `ListItemNode`,
+ * `LinkNode`, `AutoLinkNode`, `CodeNode`, `MentionNode` (`type: 'mention'`),
+ * `CycleTriggerNode` (`type: 'cycle-trigger'`), `StreamChipNode` (`type: 'stream-chip'`),
+ * `CustomEmojiNode` (`type: 'custom-emoji'`), `DocumentImageNode` (`type: 'about-image'`) — compatible with the
+ * `contracts/chat/adapters/lexical.ts` round-trip contract.
+ */
+function RichTextEditor(props) {
+    const initialConfig = React.useMemo(() => ({
+        namespace: 'RichTextEditor',
+        theme: editorTheme,
+        nodes: editorNodes,
+        onError: (error) => console.error(error),
+        editorState: props.value ? JSON.stringify(props.value) : null,
+        editable: !props.disabled,
+    }), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []);
+    return (_jsx(CycleTriggerIssueCtx.Provider, { value: props.cycleTriggerIssue ?? null, children: _jsx(LexicalComposer, { initialConfig: initialConfig, children: _jsx(RichTextEditorInner, { ...props }) }) }));
+}
+export { RichTextEditor, __resetLastRememberedDirectionForTests };