glirastes 0.3.2 → 0.5.0

package/dist/react/components/plan-checklist.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useChatContext } from '../provider/chat-context.js';
+import { StatusIcon } from './status-icon.js';
+/**
+ * Task list the model records with the built-in `update_plan` tool for a
+ * request with several distinct actions. Renders nothing below two items.
+ *
+ * Keeps styling neutral via `data-*` attributes.
+ */
+export function PlanChecklist({ items, active, className }) {
+    const { locale } = useChatContext();
+    if (items.length < 2)
+        return null;
+    return (_jsxs("section", { className: className, "data-component": "plan-checklist", children: [_jsx("strong", { "data-element": "title", children: locale.planTitle }), _jsx("ol", { "data-element": "plan-items", children: items.map((item, index) => (_jsxs("li", { "data-element": "plan-item", "data-status": item.status, children: [_jsx(StatusIcon, { icon: item.status === 'completed'
+                                ? 'check'
+                                : item.status === 'in_progress' && active ? 'spinner' : 'pending' }), _jsx("span", { "data-element": "label", children: item.title })] }, `${index}-${item.title}`))) })] }));
+}
+//# sourceMappingURL=plan-checklist.js.map

package/dist/react/components/plan-checklist.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"plan-checklist.js","sourceRoot":"","sources":["../../../src/react/components/plan-checklist.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAE7D,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAS9C;;;;;GAKG;AACH,MAAM,UAAU,aAAa,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAsB;IAC5E,MAAM,EAAE,MAAM,EAAE,GAAG,cAAc,EAAE,CAAC;IACpC,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC;QAAE,OAAO,IAAI,CAAC;IAElC,OAAO,CACL,mBAAS,SAAS,EAAE,SAAS,oBAAiB,gBAAgB,aAC5D,iCAAqB,OAAO,YAAE,MAAM,CAAC,SAAS,GAAU,EACxD,6BAAiB,YAAY,YAC1B,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAC1B,8BAAgD,WAAW,iBAAc,IAAI,CAAC,MAAM,aAClF,KAAC,UAAU,IACT,IAAI,EAAE,IAAI,CAAC,MAAM,KAAK,WAAW;gCAC/B,CAAC,CAAC,OAAO;gCACT,CAAC,CAAC,IAAI,CAAC,MAAM,KAAK,aAAa,IAAI,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,GACnE,EACF,+BAAmB,OAAO,YAAE,IAAI,CAAC,KAAK,GAAQ,KANvC,GAAG,KAAK,IAAI,IAAI,CAAC,KAAK,EAAE,CAO5B,CACN,CAAC,GACC,IACG,CACX,CAAC;AACJ,CAAC"}

package/dist/react/components/recording-bar.js

@@ -1,78 +1,64 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useContext } from 'react';
 import { createPortal } from 'react-dom';
+import { ChatContext } from '../provider/chat-context.js';
 import { CancelButton, StopButton } from './recording-controls.js';
-import { loadWaveSurfer } from './wavesurfer-loader.js';
+import { StreamWaveform } from './stream-waveform.js';
 function joinClassNames(...values) {
     return values.filter(Boolean).join(' ');
 }
-function LiveWave({ className }) {
-    const containerRef = useRef(null);
-    const [loadFailed, setLoadFailed] = useState(false);
-    useEffect(() => {
-        const container = containerRef.current;
-        if (!container)
-            return;
-        let disposed = false;
-        const cleanupRef = { current: () => { } };
-        // Lazy-load the optional wavesurfer.js peer dep at runtime — see wavesurfer-loader.ts.
-        loadWaveSurfer()
-            .then(({ WaveSurfer, RecordPlugin }) => {
-            if (disposed)
-                return;
-            const ws = WaveSurfer.create({
-                container,
-                waveColor: '#000000',
-                height: 28,
-                barWidth: 2,
-                barGap: 1,
-                barRadius: 2,
-                cursorWidth: 0,
-                interact: false,
-                normalize: true,
-            });
-            const record = ws.registerPlugin(RecordPlugin.create({
-                scrollingWaveform: true,
-                scrollingWaveformWindow: 5,
-                renderRecordedAudio: false,
-            }));
-            void record.startMic().catch(() => {
-                // Ignore: mic permissions may be handled by the transcription hook.
-            });
-            cleanupRef.current = () => {
-                record.stopMic();
-                record.destroy();
-                ws.destroy();
-            };
-        })
-            .catch((err) => {
-            console.warn('[RecordingBar] wavesurfer.js is not installed — waveform visualization disabled. Install it with: npm install wavesurfer.js', err);
-            if (!disposed)
-                setLoadFailed(true);
-        });
-        return () => {
-            disposed = true;
-            cleanupRef.current();
-        };
-    }, []);
-    if (loadFailed) {
-        return _jsx(LoadingDots, {});
-    }
-    return _jsx("div", { ref: containerRef, className: joinClassNames('glirastes-recording-wave', className) });
-}
 function LoadingDots() {
     return (_jsxs("div", { "data-part": "loading-dots", style: { display: 'flex', gap: '4px', alignItems: 'center', justifyContent: 'center' }, children: [_jsx("span", { "data-dot": "1", style: { width: '6px', height: '6px', borderRadius: '50%', background: 'currentColor', animation: 'dot-pulse 1.4s ease-in-out infinite' } }), _jsx("span", { "data-dot": "2", style: { width: '6px', height: '6px', borderRadius: '50%', background: 'currentColor', animation: 'dot-pulse 1.4s ease-in-out 0.2s infinite' } }), _jsx("span", { "data-dot": "3", style: { width: '6px', height: '6px', borderRadius: '50%', background: 'currentColor', animation: 'dot-pulse 1.4s ease-in-out 0.4s infinite' } })] }));
 }
-function RecordingBarInner({ isConnecting, onCancel, onStop, variant, className, }) {
+const MAX_VISIBLE_TRANSCRIPT = 80;
+/** First strong letter decides the script direction, like `dir="auto"`. */
+const STARTS_RIGHT_TO_LEFT = /^[^\p{L}]*[\p{Script=Arabic}\p{Script=Hebrew}\p{Script=Syriac}\p{Script=Thaana}]/u;
+/**
+ * Shows the newest words; the full text stays available as a tooltip.
+ *
+ * The slot can be narrower than the 80-character window, and `overflow:
+ * hidden` keeps the start of a line. The box therefore runs opposite to the
+ * script and the text sits in an isolated child of its own direction: the
+ * clipped side and the ellipsis land on the oldest words, the newest stay
+ * visible, and punctuation keeps its place.
+ */
+function InterimTranscript({ text }) {
+    const trimmed = text?.trim() ?? '';
+    if (!trimmed)
+        return null;
+    const visible = trimmed.length > MAX_VISIBLE_TRANSCRIPT
+        ? `…${trimmed.slice(-(MAX_VISIBLE_TRANSCRIPT - 1))}`
+        : trimmed;
+    const rtlScript = STARTS_RIGHT_TO_LEFT.test(visible);
+    return (_jsx("span", { "data-part": "interim-transcript", "aria-live": "polite", title: trimmed, style: {
+            // Most of the bar goes to the words, not to the waveform.
+            flex: '4 1 0',
+            minWidth: 0,
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+            direction: rtlScript ? 'ltr' : 'rtl',
+            textAlign: 'left',
+            fontSize: '0.8125rem',
+            opacity: 0.85,
+        }, children: _jsx("bdi", { dir: rtlScript ? 'rtl' : 'ltr', children: visible }) }));
+}
+function RecordingBarInner({ isConnecting, stream, transcript, onCancel, onStop, variant, className, }) {
     const handleCancel = useCallback(() => onCancel(), [onCancel]);
     const handleStop = useCallback(() => onStop(), [onStop]);
-    return (_jsxs("div", { className: joinClassNames('glirastes-recording-bar', variant === 'trigger' ? 'glirastes-recording-bar-trigger' : 'glirastes-recording-bar-inline', className), "data-component": "recording-bar", "data-variant": variant, style: { display: 'flex', alignItems: 'center', gap: '8px', ...(variant === 'inline' ? { height: '36px' } : {}) }, children: [_jsx(CancelButton, { onClick: handleCancel, ariaLabel: "Aufnahme abbrechen", title: "Aufnahme abbrechen" }), _jsx("div", { "data-part": "wave-container", style: { flex: 1, minWidth: 0, display: 'flex', alignItems: 'center' }, children: isConnecting ? _jsx(LoadingDots, {}) : _jsx(LiveWave, {}) }), _jsx(StopButton, { onClick: handleStop, ariaLabel: "Aufnahme stoppen", title: "Aufnahme stoppen" })] }));
+    return (_jsxs("div", { className: joinClassNames('glirastes-recording-bar', variant === 'trigger' ? 'glirastes-recording-bar-trigger' : 'glirastes-recording-bar-inline', className), "data-component": "recording-bar", "data-variant": variant, style: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: '8px',
+            ...(variant === 'inline' ? { width: '100%', height: '36px' } : {}),
+        }, children: [_jsx(CancelButton, { onClick: handleCancel, ariaLabel: "Aufnahme abbrechen", title: "Aufnahme abbrechen" }), _jsx("div", { "data-part": "wave-container", style: { flex: 1, minWidth: 0, display: 'flex', alignItems: 'center' }, children: isConnecting ? _jsx(LoadingDots, {}) : _jsx(StreamWaveform, { stream: stream }) }), _jsx(InterimTranscript, { text: transcript }), _jsx(StopButton, { onClick: handleStop, ariaLabel: "Aufnahme stoppen", title: "Aufnahme stoppen" })] }));
 }
 export function RecordingBar(props) {
+    const unstyled = useContext(ChatContext)?.unstyled ?? false;
     if (props.variant === 'trigger') {
         if (typeof document === 'undefined')
             return null;
-        return createPortal(_jsx("div", { "data-component": "recording-bar-portal", children: _jsx(RecordingBarInner, { ...props }) }), document.body);
+        return createPortal(_jsx("div", { "data-component": "recording-bar-portal", "data-unstyled": unstyled || undefined, children: _jsx(RecordingBarInner, { ...props }) }), document.body);
     }
     return _jsx(RecordingBarInner, { ...props });
 }

package/dist/react/components/recording-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"recording-bar.js","sourceRoot":"","sources":["../../../src/react/components/recording-bar.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"recording-bar.js","sourceRoot":"","sources":["../../../src/react/components/recording-bar.tsx"],"names":[],"mappings":"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"}

package/dist/react/components/rich-mention-input.js

@@ -1,27 +1,54 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState, } from 'react';
-import { inferMentionPrefix, normalizeMentionSlug } from '../utils/mention-markup.js';
+import { forwardRef, useCallback, useEffect, useId, useImperativeHandle, useMemo, useRef, useState, } from 'react';
+import { inferMentionPrefix, mentionDataFromResult, normalizeMentionSlug, toolReferenceFromDataset, toolReferenceToDataset, } from '../utils/mention-markup.js';
 const DEFAULT_TRIGGERS = ['@', '/'];
 const SEARCH_DEBOUNCE_MS = 100;
+/**
+ * Picking a command leaves `/slug ` in the editor and picking a chip leaves a
+ * text node that starts with a space. Under the default `white-space: normal`
+ * the browser collapses that separator, so the next typed word merges into the
+ * token and its structured id is lost. This is behaviour, not theming: it is
+ * set inline so it also holds for BYOS and shadow-DOM consumers that do not
+ * load styles.css.
+ */
+const EDITOR_STYLE = { whiteSpace: 'pre-wrap' };
+/** Announcements for screen readers only; behaviour, so it holds without styles.css. */
+const VISUALLY_HIDDEN = {
+    position: 'absolute', width: 1, height: 1, margin: -1, padding: 0, overflow: 'hidden',
+    clip: 'rect(0 0 0 0)', whiteSpace: 'nowrap', border: 0,
+};
+/**
+ * The selection inside the editor's own tree. In a shadow root (the
+ * `<glirastes-chat>` element) Chromium retargets `window.getSelection()` to
+ * the host, so the caret position would be lost; its `ShadowRoot.getSelection()`
+ * keeps the real nodes.
+ */
+function editorSelection(editor) {
+    const root = editor?.getRootNode();
+    if (root && root !== editor?.ownerDocument && typeof root.getSelection === 'function') {
+        return root.getSelection() ?? window.getSelection();
+    }
+    return window.getSelection();
+}
 function normalizeInputValue(text) {
     return text.replace(/\u00A0/g, ' ');
 }
 // ---------------------------------------------------------------------------
 // Default dropdown item (data-attribute driven, no hardcoded styles)
 // ---------------------------------------------------------------------------
-function DefaultDropdownItem({ result, isSelected, onClick }) {
+function DefaultDropdownItem({ result, isSelected, onClick, optionProps }) {
     const itemRef = useRef(null);
     useEffect(() => {
         if (isSelected && itemRef.current) {
             itemRef.current.scrollIntoView({ block: 'nearest' });
         }
     }, [isSelected]);
-    return (_jsxs("button", { ref: itemRef, type: "button", onClick: onClick, "data-component": "mention-dropdown-item", "data-mention-type": result.type, "data-selected": isSelected ? 'true' : 'false', children: [_jsx("span", { "data-element": "label", children: result.label }), result.description && (_jsx("span", { "data-element": "description", children: result.description }))] }));
+    return (_jsxs("button", { ref: itemRef, type: "button", ...optionProps, onClick: onClick, "data-component": "mention-dropdown-item", "data-mention-type": result.type, "data-selected": isSelected ? 'true' : 'false', children: [_jsx("span", { "data-element": "label", children: result.label }), result.description && (_jsx("span", { "data-element": "description", children: result.description }))] }));
 }
 // ---------------------------------------------------------------------------
 // RichMentionInput
 // ---------------------------------------------------------------------------
-export const RichMentionInput = forwardRef(function RichMentionInput({ value, defaultValue = '', placeholder, disabled = false, className, onChange, onSubmit, onSearch, initialMentions, triggers = DEFAULT_TRIGGERS, components, }, ref) {
+export const RichMentionInput = forwardRef(function RichMentionInput({ value, defaultValue = '', placeholder, disabled = false, className, onChange, onSubmit, onSearch, initialMentions, triggers = DEFAULT_TRIGGERS, components, onEntityAction, listLabel = 'Suggestions', resultsLabel = '{count} suggestions', }, ref) {
     const hasMentionSupport = typeof onSearch === 'function';
     const isControlled = value !== undefined;
     const [internalValue, setInternalValue] = useState(defaultValue);
@@ -32,7 +59,10 @@ export const RichMentionInput = forwardRef(function RichMentionInput({ value, de
     const [dropdownOpen, setDropdownOpen] = useState(false);
     const [searchResults, setSearchResults] = useState([]);
     const [selectedIndex, setSelectedIndex] = useState(0);
+    // -1: the result itself; 0..n: one of its entity actions.
+    const [selectedAction, setSelectedAction] = useState(-1);
     const [isSearching, setIsSearching] = useState(false);
+    const listboxId = useId();
     const [isFocused, setIsFocused] = useState(false);
     // Refs for stale-closure avoidance and debounce
     const searchTimeoutRef = useRef(undefined);
@@ -120,6 +150,7 @@ export const RichMentionInput = forwardRef(function RichMentionInput({ value, de
                         slug: el.dataset.mentionSlug,
                         prefix: el.dataset.mentionPrefix,
                         displayName: el.dataset.mentionLabel,
+                        ...toolReferenceFromDataset(el.dataset),
                     });
                 }
             }
@@ -151,6 +182,14 @@ export const RichMentionInput = forwardRef(function RichMentionInput({ value, de
         chip.dataset.mentionLabel = displayName;
         chip.dataset.mentionPrefix = prefix;
         chip.dataset.size = 'inline';
+        // A command's definition id and arguments stay on its chip, so the
+        // entry read back from the editor (getMentions, drafts) still has them.
+        const toolReference = toolReferenceToDataset(mention);
+        if (toolReference) {
+            chip.dataset.mentionDefinitionId = toolReference.definitionId;
+            if (toolReference.args !== undefined)
+                chip.dataset.mentionArgs = toolReference.args;
+        }
         const prefixSpan = document.createElement('span');
         prefixSpan.dataset.element = 'prefix';
         prefixSpan.textContent = prefix;
@@ -175,6 +214,7 @@ export const RichMentionInput = forwardRef(function RichMentionInput({ value, de
         setDropdownOpen(false);
         setSearchResults([]);
         setSelectedIndex(0);
+        setSelectedAction(-1);
     }, []);
     const performSearch = useCallback(async (query, trigger) => {
         if (!onSearch)
@@ -187,6 +227,7 @@ export const RichMentionInput = forwardRef(function RichMentionInput({ value, de
                 return;
             setSearchResults(results);
             setSelectedIndex(0);
+            setSelectedAction(-1);
             setDropdownOpen(results.length > 0);
         }
         catch {
@@ -206,7 +247,7 @@ export const RichMentionInput = forwardRef(function RichMentionInput({ value, de
      * Returns trigger, query, and position, or null if no trigger is active.
      */
     const detectTrigger = useCallback(() => {
-        const selection = window.getSelection();
+        const selection = editorSelection(editableRef.current);
         if (!selection || selection.rangeCount === 0)
             return null;
         const range = selection.getRangeAt(0);
@@ -234,7 +275,7 @@ export const RichMentionInput = forwardRef(function RichMentionInput({ value, de
     const insertMention = useCallback((result) => {
         if (!editableRef.current)
             return;
-        const selection = window.getSelection();
+        const selection = editorSelection(editableRef.current);
         if (!selection || selection.rangeCount === 0)
             return;
         const range = selection.getRangeAt(0);
@@ -258,29 +299,24 @@ export const RichMentionInput = forwardRef(function RichMentionInput({ value, de
         }
         if (triggerPos === -1)
             return;
-        const prefix = inferMentionPrefix(result.type);
-        const slug = normalizeMentionSlug(result.label);
-        const mentionData = {
-            id: result.id,
-            type: result.type,
-            label: result.label,
-            displayName: result.label,
-            slug,
-            prefix,
-        };
+        // The trigger the user typed: an entity found with `@` stays `@` whatever its type.
+        const prefix = result.type === 'command' ? '/' : text[triggerPos];
+        const slug = typeof result.slug === 'string' && result.slug.trim().length > 0
+            ? normalizeMentionSlug(result.slug)
+            : normalizeMentionSlug(result.label);
+        const mentionData = mentionDataFromResult(result, { prefix, slug });
         // For command type: insert as text, no chip
         if (result.type === 'command') {
             const beforeText = text.slice(0, triggerPos);
             const afterText = text.slice(cursorPos);
             const token = `${prefix}${slug} `;
             textNode.textContent = beforeText + token + afterText;
-            requestAnimationFrame(() => {
-                const newRange = document.createRange();
-                newRange.setStart(textNode, (beforeText + token).length);
-                newRange.collapse(true);
-                selection.removeAllRanges();
-                selection.addRange(newRange);
-            });
+            // The caret moves at once: keys typed right after the pick must land behind the token.
+            const newRange = document.createRange();
+            newRange.setStart(textNode, (beforeText + token).length);
+            newRange.collapse(true);
+            selection.removeAllRanges();
+            selection.addRange(newRange);
             setMentions((prev) => [...prev, mentionData]);
             closeDropdown();
             requestAnimationFrame(() => {
@@ -301,20 +337,45 @@ export const RichMentionInput = forwardRef(function RichMentionInput({ value, de
         parent.insertBefore(chip, textNode);
         parent.insertBefore(afterNode, textNode);
         parent.removeChild(textNode);
-        requestAnimationFrame(() => {
-            const newRange = document.createRange();
-            newRange.setStart(afterNode, 1);
-            newRange.collapse(true);
-            selection.removeAllRanges();
-            selection.addRange(newRange);
-            editableRef.current?.focus();
-        });
+        const newRange = document.createRange();
+        newRange.setStart(afterNode, 1);
+        newRange.collapse(true);
+        selection.removeAllRanges();
+        selection.addRange(newRange);
+        editableRef.current?.focus();
         setMentions((prev) => [...prev, mentionData]);
         closeDropdown();
         requestAnimationFrame(() => {
             onChange?.(getFullValue());
         });
     }, [triggers, createChipElement, closeDropdown, onChange, getFullValue]);
+    /** Removes the `@query` being typed and runs one of the result's entity actions instead. */
+    const runAction = useCallback((result, actionId) => {
+        const selection = editorSelection(editableRef.current);
+        const range = selection && selection.rangeCount > 0 ? selection.getRangeAt(0) : null;
+        if (range && range.startContainer.nodeType === Node.TEXT_NODE) {
+            const textNode = range.startContainer;
+            const text = textNode.textContent || '';
+            const cursorPos = range.startOffset;
+            for (let i = cursorPos - 1; i >= 0; i--) {
+                const char = text[i];
+                if (char === ' ' || char === '\n')
+                    break;
+                if (triggers.includes(char) && (i === 0 || text[i - 1] === ' ' || text[i - 1] === '\n')) {
+                    textNode.textContent = text.slice(0, i) + text.slice(cursorPos);
+                    // Replacing the data pulls the live range to offset 0: put the caret back where the `@query` was.
+                    range.setStart(textNode, i);
+                    range.collapse(true);
+                    selection?.removeAllRanges();
+                    selection?.addRange(range);
+                    break;
+                }
+            }
+        }
+        closeDropdown();
+        onChange?.(getFullValue());
+        onEntityAction?.(result, actionId);
+    }, [triggers, closeDropdown, onChange, getFullValue, onEntityAction]);
     // -----------------------------------------------------------------------
     // Event handlers
     // -----------------------------------------------------------------------
@@ -338,6 +399,24 @@ export const RichMentionInput = forwardRef(function RichMentionInput({ value, de
         }
         onChange?.(getFullValue());
     }, [hasMentionSupport, setValue, detectTrigger, performSearch, closeDropdown, onChange, getFullValue]);
+    /**
+     * Chips in the DOM plus text-inserted commands whose token is still
+     * present. A command that was restored as a chip (setValue) is still in
+     * the state too; the chip is its entry, so it is not listed twice.
+     */
+    const collectMentions = useCallback((text) => {
+        if (!hasMentionSupport)
+            return [];
+        const chips = getMentionsFromDOM();
+        const chipped = new Set(chips.map((chip) => `${chip.type}\u0000${chip.id}`));
+        const tokens = new Set(text.split(/\s+/));
+        const commands = mentions.filter((mention) => mention.type === 'command'
+            && !chipped.has(`${mention.type}\u0000${mention.id}`)
+            && typeof mention.prefix === 'string'
+            && typeof mention.slug === 'string'
+            && tokens.has(`${mention.prefix}${mention.slug}`));
+        return [...chips, ...commands];
+    }, [hasMentionSupport, mentions, getMentionsFromDOM]);
     const submit = useCallback(() => {
         if (disabled)
             return;
@@ -346,7 +425,7 @@ export const RichMentionInput = forwardRef(function RichMentionInput({ value, de
             : normalizeInputValue((editableRef.current?.innerText ?? '').trim());
         if (!text)
             return;
-        onSubmit?.(text);
+        onSubmit?.(text, collectMentions(text));
         setValue('');
         if (hasMentionSupport) {
             setMentions([]);
@@ -354,24 +433,42 @@ export const RichMentionInput = forwardRef(function RichMentionInput({ value, de
         if (editableRef.current) {
             editableRef.current.innerHTML = '';
         }
-    }, [disabled, hasMentionSupport, getFullValue, onSubmit, setValue]);
+    }, [disabled, hasMentionSupport, getFullValue, onSubmit, setValue, collectMentions]);
     const handleKeyDown = useCallback((event) => {
         // Dropdown navigation (mention mode only)
         if (hasMentionSupport && dropdownOpen && searchResults.length > 0) {
+            const actions = (onEntityAction && searchResults[selectedIndex]?.actions) || [];
             if (event.key === 'ArrowDown') {
                 event.preventDefault();
                 setSelectedIndex((prev) => (prev + 1) % searchResults.length);
+                setSelectedAction(-1);
                 return;
             }
             if (event.key === 'ArrowUp') {
                 event.preventDefault();
                 setSelectedIndex((prev) => (prev - 1 + searchResults.length) % searchResults.length);
+                setSelectedAction(-1);
+                return;
+            }
+            // Left/right move between a result and its actions; elsewhere they move the caret.
+            if (event.key === 'ArrowRight' && selectedAction < actions.length - 1) {
+                event.preventDefault();
+                setSelectedAction((prev) => prev + 1);
+                return;
+            }
+            if (event.key === 'ArrowLeft' && selectedAction >= 0) {
+                event.preventDefault();
+                setSelectedAction((prev) => prev - 1);
                 return;
             }
             if (event.key === 'Tab' || (event.key === 'Enter' && !event.shiftKey)) {
                 event.preventDefault();
                 const selected = searchResults[selectedIndex];
-                if (selected) {
+                const action = selectedAction >= 0 ? actions[selectedAction] : undefined;
+                if (selected && action) {
+                    runAction(selected, action.id);
+                }
+                else if (selected) {
                     insertMention(selected);
                 }
                 return;
@@ -390,7 +487,7 @@ export const RichMentionInput = forwardRef(function RichMentionInput({ value, de
         }
         // Backspace: delete chip at cursor boundary (mention mode)
         if (hasMentionSupport && event.key === 'Backspace') {
-            const selection = window.getSelection();
+            const selection = editorSelection(editableRef.current);
             if (selection && selection.rangeCount > 0) {
                 const range = selection.getRangeAt(0);
                 if (range.collapsed && range.startOffset === 0) {
@@ -413,6 +510,9 @@ export const RichMentionInput = forwardRef(function RichMentionInput({ value, de
         dropdownOpen,
         searchResults,
         selectedIndex,
+        selectedAction,
+        onEntityAction,
+        runAction,
         insertMention,
         closeDropdown,
         submit,
@@ -425,7 +525,7 @@ export const RichMentionInput = forwardRef(function RichMentionInput({ value, de
         const plainText = e.clipboardData.getData('text/plain');
         if (!plainText)
             return;
-        const selection = window.getSelection();
+        const selection = editorSelection(editableRef.current);
         if (!selection || selection.rangeCount === 0)
             return;
         const range = selection.getRangeAt(0);
@@ -446,10 +546,13 @@ export const RichMentionInput = forwardRef(function RichMentionInput({ value, de
         if (!dropdownOpen)
             return;
         const handleClickOutside = (e) => {
+            // Inside a shadow root (the `<glirastes-chat>` element) a document-level listener sees the host as
+            // `e.target`, so the composed path is what tells a click on the list or the editor from an outside one.
+            const path = e.composedPath();
             if (dropdownRef.current &&
-                !dropdownRef.current.contains(e.target) &&
+                !path.includes(dropdownRef.current) &&
                 editableRef.current &&
-                !editableRef.current.contains(e.target)) {
+                !path.includes(editableRef.current)) {
                 closeDropdown();
             }
         };
@@ -498,7 +601,7 @@ export const RichMentionInput = forwardRef(function RichMentionInput({ value, de
         requestAnimationFrame(() => {
             if (editableRef.current) {
                 const range = document.createRange();
-                const selection = window.getSelection();
+                const selection = editorSelection(editableRef.current);
                 range.selectNodeContents(editableRef.current);
                 range.collapse(false);
                 selection?.removeAllRanges();
@@ -529,17 +632,50 @@ export const RichMentionInput = forwardRef(function RichMentionInput({ value, de
         getValue: () => hasMentionSupport
             ? getFullValue()
             : normalizeInputValue(editableRef.current?.innerText ?? ''),
-        setValue: (nextValue) => {
+        setValue: (nextValue, draftMentions = []) => {
             if (!editableRef.current)
                 return;
+            const editor = editableRef.current;
+            editor.textContent = '';
             if (hasMentionSupport) {
-                editableRef.current.innerHTML = '';
-                setMentions([]);
+                const remaining = [...draftMentions];
+                const restored = [];
+                let offset = 0;
+                while (remaining.length) {
+                    let selected = -1;
+                    let position = nextValue.length;
+                    let tokenLength = 0;
+                    remaining.forEach((mention, index) => {
+                        if (!mention.prefix || !mention.slug)
+                            return;
+                        const token = `${mention.prefix}${mention.slug}`;
+                        let found = nextValue.indexOf(token, offset);
+                        while (found >= 0 && /[\p{L}\p{N}_-]/u.test(nextValue[found + token.length] ?? '')) {
+                            found = nextValue.indexOf(token, found + token.length);
+                        }
+                        if (found >= 0 && (selected < 0 || found < position)) {
+                            selected = index;
+                            position = found;
+                            tokenLength = token.length;
+                        }
+                    });
+                    if (selected < 0)
+                        break;
+                    const [mention] = remaining.splice(selected, 1);
+                    editor.append(document.createTextNode(nextValue.slice(offset, position)), createChipElement(mention));
+                    restored.push(mention);
+                    offset = position + tokenLength;
+                }
+                editor.append(document.createTextNode(nextValue.slice(offset)));
+                setMentions(restored);
+                closeDropdown();
+            }
+            else {
+                editor.textContent = nextValue;
             }
-            editableRef.current.textContent = nextValue;
             setValue(nextValue);
         },
-        getMentions: () => (hasMentionSupport ? getMentionsFromDOM() : []),
+        getMentions: () => (hasMentionSupport ? collectMentions(getFullValue()) : []),
         addMention: (mention) => {
             if (!hasMentionSupport || !editableRef.current)
                 return;
@@ -549,7 +685,7 @@ export const RichMentionInput = forwardRef(function RichMentionInput({ value, de
             chip.after(space);
             setMentions((prev) => [...prev, mention]);
         },
-    }), [hasMentionSupport, setValue, getFullValue, getMentionsFromDOM, createChipElement, closeDropdown]);
+    }), [hasMentionSupport, setValue, getFullValue, collectMentions, createChipElement, closeDropdown]);
     // -----------------------------------------------------------------------
     // Render
     // -----------------------------------------------------------------------
@@ -560,10 +696,26 @@ export const RichMentionInput = forwardRef(function RichMentionInput({ value, de
     }
     // Mention mode — wrapper with editor + dropdown
     const isEmpty = !isFocused && getTextContent() === '' && mentions.length === 0;
+    const optionId = (index, action = -1) => (action >= 0 ? `${listboxId}-option-${index}-action-${action}` : `${listboxId}-option-${index}`);
+    const listOpen = dropdownOpen && searchResults.length > 0;
+    const optionProps = (index, action = -1) => ({
+        id: optionId(index, action),
+        role: 'option',
+        'aria-selected': index === selectedIndex && action === selectedAction,
+        tabIndex: -1,
+    });
     return (_jsxs("div", { "data-component": "rich-mention-input", "data-state": disabled
             ? 'disabled'
             : dropdownOpen
                 ? 'dropdown-open'
-                : 'idle', children: [_jsx("div", { ref: editableRef, className: className, contentEditable: !disabled, role: "textbox", tabIndex: 0, "data-element": "editor", "aria-disabled": disabled, "aria-label": placeholder ?? 'Message input', onInput: handleInput, onKeyDown: handleKeyDown, onPaste: handlePaste, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), suppressContentEditableWarning: true }), isEmpty && placeholder && (_jsx("div", { "data-element": "placeholder", "aria-hidden": true, children: placeholder })), dropdownOpen && searchResults.length > 0 && (_jsx("div", { ref: dropdownRef, "data-component": "mention-dropdown", "data-state": isSearching ? 'searching' : 'idle', children: searchResults.map((result, index) => (_jsx(DropdownItem, { result: result, isSelected: index === selectedIndex, onClick: () => insertMention(result) }, result.id))) }))] }));
+                : 'idle', children: [_jsx("div", { ref: editableRef, className: className, style: EDITOR_STYLE, contentEditable: !disabled, role: "textbox", tabIndex: 0, "data-element": "editor", "aria-disabled": disabled, "aria-label": placeholder ?? 'Message input', "aria-autocomplete": "list", "aria-controls": listOpen ? listboxId : undefined, "aria-activedescendant": listOpen ? optionId(selectedIndex, selectedAction) : undefined, onInput: handleInput, onKeyDown: handleKeyDown, onPaste: handlePaste, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), suppressContentEditableWarning: true }), isEmpty && placeholder && (_jsx("div", { "data-element": "placeholder", "aria-hidden": true, children: placeholder })), _jsx("div", { "data-element": "completion-status", role: "status", "aria-live": "polite", style: VISUALLY_HIDDEN, children: listOpen ? resultsLabel.replace('{count}', String(searchResults.length)) : '' }), listOpen && (_jsx("div", { ref: dropdownRef, id: listboxId, role: "listbox", "aria-label": listLabel, "data-component": "mention-dropdown", "data-state": isSearching ? 'searching' : 'idle', 
+                // Keep the caret in the editor while the list is clicked.
+                onMouseDown: (event) => event.preventDefault(), children: searchResults.map((result, index) => {
+                    const key = result.key ?? `${result.type}:${result.id}`;
+                    const item = (_jsx(DropdownItem, { result: result, isSelected: index === selectedIndex && selectedAction === -1, onClick: () => insertMention(result), optionProps: optionProps(index) }, key));
+                    if (!onEntityAction || !result.actions?.length)
+                        return item;
+                    return (_jsxs("div", { role: "group", "aria-label": result.label, "data-element": "result-row", children: [item, _jsx("span", { "data-element": "entity-actions", children: result.actions.map((action, actionIndex) => (_jsx("button", { type: "button", ...optionProps(index, actionIndex), "aria-label": `${action.label}: ${result.label}`, "data-component": "mention-action", "data-selected": index === selectedIndex && actionIndex === selectedAction ? 'true' : 'false', onClick: () => runAction(result, action.id), children: action.label }, action.id))) })] }, key));
+                }) }))] }));
 });
 //# sourceMappingURL=rich-mention-input.js.map