glirastes 0.4.0 → 0.5.0

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

@@ -6,25 +6,52 @@ const react_1 = require("react");
 const mention_markup_js_1 = require("../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 = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
         if (isSelected && itemRef.current) {
             itemRef.current.scrollIntoView({ block: 'nearest' });
         }
     }, [isSelected]);
-    return ((0, jsx_runtime_1.jsxs)("button", { ref: itemRef, type: "button", onClick: onClick, "data-component": "mention-dropdown-item", "data-mention-type": result.type, "data-selected": isSelected ? 'true' : 'false', children: [(0, jsx_runtime_1.jsx)("span", { "data-element": "label", children: result.label }), result.description && ((0, jsx_runtime_1.jsx)("span", { "data-element": "description", children: result.description }))] }));
+    return ((0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsx)("span", { "data-element": "label", children: result.label }), result.description && ((0, jsx_runtime_1.jsx)("span", { "data-element": "description", children: result.description }))] }));
 }
 // ---------------------------------------------------------------------------
 // RichMentionInput
 // ---------------------------------------------------------------------------
-exports.RichMentionInput = (0, react_1.forwardRef)(function RichMentionInput({ value, defaultValue = '', placeholder, disabled = false, className, onChange, onSubmit, onSearch, initialMentions, triggers = DEFAULT_TRIGGERS, components, }, ref) {
+exports.RichMentionInput = (0, react_1.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] = (0, react_1.useState)(defaultValue);
@@ -35,7 +62,10 @@ exports.RichMentionInput = (0, react_1.forwardRef)(function RichMentionInput({ v
     const [dropdownOpen, setDropdownOpen] = (0, react_1.useState)(false);
     const [searchResults, setSearchResults] = (0, react_1.useState)([]);
     const [selectedIndex, setSelectedIndex] = (0, react_1.useState)(0);
+    // -1: the result itself; 0..n: one of its entity actions.
+    const [selectedAction, setSelectedAction] = (0, react_1.useState)(-1);
     const [isSearching, setIsSearching] = (0, react_1.useState)(false);
+    const listboxId = (0, react_1.useId)();
     const [isFocused, setIsFocused] = (0, react_1.useState)(false);
     // Refs for stale-closure avoidance and debounce
     const searchTimeoutRef = (0, react_1.useRef)(undefined);
@@ -123,6 +153,7 @@ exports.RichMentionInput = (0, react_1.forwardRef)(function RichMentionInput({ v
                         slug: el.dataset.mentionSlug,
                         prefix: el.dataset.mentionPrefix,
                         displayName: el.dataset.mentionLabel,
+                        ...(0, mention_markup_js_1.toolReferenceFromDataset)(el.dataset),
                     });
                 }
             }
@@ -154,6 +185,14 @@ exports.RichMentionInput = (0, react_1.forwardRef)(function RichMentionInput({ v
         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 = (0, mention_markup_js_1.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;
@@ -178,6 +217,7 @@ exports.RichMentionInput = (0, react_1.forwardRef)(function RichMentionInput({ v
         setDropdownOpen(false);
         setSearchResults([]);
         setSelectedIndex(0);
+        setSelectedAction(-1);
     }, []);
     const performSearch = (0, react_1.useCallback)(async (query, trigger) => {
         if (!onSearch)
@@ -190,6 +230,7 @@ exports.RichMentionInput = (0, react_1.forwardRef)(function RichMentionInput({ v
                 return;
             setSearchResults(results);
             setSelectedIndex(0);
+            setSelectedAction(-1);
             setDropdownOpen(results.length > 0);
         }
         catch {
@@ -209,7 +250,7 @@ exports.RichMentionInput = (0, react_1.forwardRef)(function RichMentionInput({ v
      * Returns trigger, query, and position, or null if no trigger is active.
      */
     const detectTrigger = (0, react_1.useCallback)(() => {
-        const selection = window.getSelection();
+        const selection = editorSelection(editableRef.current);
         if (!selection || selection.rangeCount === 0)
             return null;
         const range = selection.getRangeAt(0);
@@ -237,7 +278,7 @@ exports.RichMentionInput = (0, react_1.forwardRef)(function RichMentionInput({ v
     const insertMention = (0, react_1.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);
@@ -261,29 +302,24 @@ exports.RichMentionInput = (0, react_1.forwardRef)(function RichMentionInput({ v
         }
         if (triggerPos === -1)
             return;
-        const prefix = (0, mention_markup_js_1.inferMentionPrefix)(result.type);
-        const slug = (0, mention_markup_js_1.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
+            ? (0, mention_markup_js_1.normalizeMentionSlug)(result.slug)
+            : (0, mention_markup_js_1.normalizeMentionSlug)(result.label);
+        const mentionData = (0, mention_markup_js_1.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(() => {
@@ -304,20 +340,45 @@ exports.RichMentionInput = (0, react_1.forwardRef)(function RichMentionInput({ v
         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 = (0, react_1.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
     // -----------------------------------------------------------------------
@@ -341,6 +402,24 @@ exports.RichMentionInput = (0, react_1.forwardRef)(function RichMentionInput({ v
         }
         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 = (0, react_1.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 = (0, react_1.useCallback)(() => {
         if (disabled)
             return;
@@ -349,7 +428,7 @@ exports.RichMentionInput = (0, react_1.forwardRef)(function RichMentionInput({ v
             : normalizeInputValue((editableRef.current?.innerText ?? '').trim());
         if (!text)
             return;
-        onSubmit?.(text);
+        onSubmit?.(text, collectMentions(text));
         setValue('');
         if (hasMentionSupport) {
             setMentions([]);
@@ -357,24 +436,42 @@ exports.RichMentionInput = (0, react_1.forwardRef)(function RichMentionInput({ v
         if (editableRef.current) {
             editableRef.current.innerHTML = '';
         }
-    }, [disabled, hasMentionSupport, getFullValue, onSubmit, setValue]);
+    }, [disabled, hasMentionSupport, getFullValue, onSubmit, setValue, collectMentions]);
     const handleKeyDown = (0, react_1.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;
@@ -393,7 +490,7 @@ exports.RichMentionInput = (0, react_1.forwardRef)(function RichMentionInput({ v
         }
         // 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) {
@@ -416,6 +513,9 @@ exports.RichMentionInput = (0, react_1.forwardRef)(function RichMentionInput({ v
         dropdownOpen,
         searchResults,
         selectedIndex,
+        selectedAction,
+        onEntityAction,
+        runAction,
         insertMention,
         closeDropdown,
         submit,
@@ -428,7 +528,7 @@ exports.RichMentionInput = (0, react_1.forwardRef)(function RichMentionInput({ v
         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);
@@ -449,10 +549,13 @@ exports.RichMentionInput = (0, react_1.forwardRef)(function RichMentionInput({ v
         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();
             }
         };
@@ -501,7 +604,7 @@ exports.RichMentionInput = (0, react_1.forwardRef)(function RichMentionInput({ v
         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();
@@ -532,17 +635,50 @@ exports.RichMentionInput = (0, react_1.forwardRef)(function RichMentionInput({ v
         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;
@@ -552,7 +688,7 @@ exports.RichMentionInput = (0, react_1.forwardRef)(function RichMentionInput({ v
             chip.after(space);
             setMentions((prev) => [...prev, mention]);
         },
-    }), [hasMentionSupport, setValue, getFullValue, getMentionsFromDOM, createChipElement, closeDropdown]);
+    }), [hasMentionSupport, setValue, getFullValue, collectMentions, createChipElement, closeDropdown]);
     // -----------------------------------------------------------------------
     // Render
     // -----------------------------------------------------------------------
@@ -563,9 +699,25 @@ exports.RichMentionInput = (0, react_1.forwardRef)(function RichMentionInput({ v
     }
     // 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 ((0, jsx_runtime_1.jsxs)("div", { "data-component": "rich-mention-input", "data-state": disabled
             ? 'disabled'
             : dropdownOpen
                 ? 'dropdown-open'
-                : 'idle', children: [(0, jsx_runtime_1.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 && ((0, jsx_runtime_1.jsx)("div", { "data-element": "placeholder", "aria-hidden": true, children: placeholder })), dropdownOpen && searchResults.length > 0 && ((0, jsx_runtime_1.jsx)("div", { ref: dropdownRef, "data-component": "mention-dropdown", "data-state": isSearching ? 'searching' : 'idle', children: searchResults.map((result, index) => ((0, jsx_runtime_1.jsx)(DropdownItem, { result: result, isSelected: index === selectedIndex, onClick: () => insertMention(result) }, result.id))) }))] }));
+                : 'idle', children: [(0, jsx_runtime_1.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 && ((0, jsx_runtime_1.jsx)("div", { "data-element": "placeholder", "aria-hidden": true, children: placeholder })), (0, jsx_runtime_1.jsx)("div", { "data-element": "completion-status", role: "status", "aria-live": "polite", style: VISUALLY_HIDDEN, children: listOpen ? resultsLabel.replace('{count}', String(searchResults.length)) : '' }), listOpen && ((0, jsx_runtime_1.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 = ((0, jsx_runtime_1.jsx)(DropdownItem, { result: result, isSelected: index === selectedIndex && selectedAction === -1, onClick: () => insertMention(result), optionProps: optionProps(index) }, key));
+                    if (!onEntityAction || !result.actions?.length)
+                        return item;
+                    return ((0, jsx_runtime_1.jsxs)("div", { role: "group", "aria-label": result.label, "data-element": "result-row", children: [item, (0, jsx_runtime_1.jsx)("span", { "data-element": "entity-actions", children: result.actions.map((action, actionIndex) => ((0, jsx_runtime_1.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));
+                }) }))] }));
 });

package/dist/cjs/react/components/session-switcher.d.ts

@@ -1,4 +1,6 @@
 export interface SessionSwitcherProps {
+    /** Temporarily lock session controls, e.g. while the app records a voice draft. */
+    disabled?: boolean;
     /** Shown when no sessions exist yet. */
     fallbackTitle?: string;
     /** Format the per-row subtitle. Default: `updatedAt` or `createdAt` as locale date. */
@@ -11,4 +13,4 @@ export interface SessionSwitcherProps {
  * everything from `useChatContext()` — requires an `<AiChatProvider>`
  * ancestor whose `session` config exposes `list`, `create`, and `remove`.
  */
-export declare function SessionSwitcher({ fallbackTitle, formatTimestamp, className, }?: SessionSwitcherProps): import("react/jsx-runtime").JSX.Element;
+export declare function SessionSwitcher({ disabled, fallbackTitle, formatTimestamp, className, }?: SessionSwitcherProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/react/components/session-switcher.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const chat_context_js_1 = require("../provider/chat-context.js");
 const confirm_dialog_js_1 = require("./confirm-dialog.js");
+const chat_window_visibility_js_1 = require("./chat-window-visibility.js");
 function defaultFormatTimestamp(value) {
     if (value === undefined || value === null || value === '')
         return '';
@@ -24,8 +25,10 @@ function defaultFormatTimestamp(value) {
  * everything from `useChatContext()` — requires an `<AiChatProvider>`
  * ancestor whose `session` config exposes `list`, `create`, and `remove`.
  */
-function SessionSwitcher({ fallbackTitle, formatTimestamp = defaultFormatTimestamp, className, } = {}) {
-    const { sessions, activeSessionId, sessionsSupported, isSessionsLoading, switchSession, createSession, removeSession, renameSession, locale, } = (0, chat_context_js_1.useChatContext)();
+function SessionSwitcher({ disabled = false, fallbackTitle, formatTimestamp = defaultFormatTimestamp, className, } = {}) {
+    const { sessions, activeSessionId, sessionsSupported, isSessionsLoading, isLoading, isSessionChangeBlocked, switchSession, createSession, removeSession, renameSession, locale, } = (0, chat_context_js_1.useChatContext)();
+    const visible = (0, react_1.useContext)(chat_window_visibility_js_1.ChatWindowVisibilityContext);
+    const blocked = !visible || disabled || (isSessionChangeBlocked ?? isLoading);
     const resolvedFallback = fallbackTitle ?? locale.newChatLabel;
     const [editingId, setEditingId] = (0, react_1.useState)(null);
     const [editDraft, setEditDraft] = (0, react_1.useState)('');
@@ -60,6 +63,13 @@ function SessionSwitcher({ fallbackTitle, formatTimestamp = defaultFormatTimesta
     const [open, setOpen] = (0, react_1.useState)(false);
     const [pendingDeleteId, setPendingDeleteId] = (0, react_1.useState)(null);
     const rootRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        if (!blocked)
+            return;
+        setOpen(false);
+        setPendingDeleteId(null);
+        setEditingId(null);
+    }, [blocked]);
     (0, react_1.useEffect)(() => {
         if (!open)
             return;
@@ -76,26 +86,30 @@ function SessionSwitcher({ fallbackTitle, formatTimestamp = defaultFormatTimesta
         return () => window.removeEventListener('mousedown', handler);
     }, [open]);
     const onNew = (0, react_1.useCallback)(async () => {
+        if (blocked)
+            return;
         setOpen(false);
         await createSession({ title: locale.newChatLabel });
-    }, [createSession, locale.newChatLabel]);
+    }, [createSession, locale.newChatLabel, blocked]);
     const onPick = (0, react_1.useCallback)(async (id) => {
-        setOpen(false);
-        if (id === activeSessionId)
+        if (blocked)
             return;
+        setOpen(false);
         await switchSession(id);
-    }, [switchSession, activeSessionId]);
+    }, [switchSession, blocked]);
     const onDelete = (0, react_1.useCallback)((e, id) => {
         e.stopPropagation();
         setPendingDeleteId(id);
     }, []);
     const confirmDelete = (0, react_1.useCallback)(async () => {
+        if (blocked)
+            return;
         const id = pendingDeleteId;
         setPendingDeleteId(null);
         if (!id)
             return;
         await removeSession(id);
-    }, [pendingDeleteId, removeSession]);
+    }, [pendingDeleteId, removeSession, blocked]);
     const cancelDelete = (0, react_1.useCallback)(() => {
         setPendingDeleteId(null);
     }, []);
@@ -109,7 +123,8 @@ function SessionSwitcher({ fallbackTitle, formatTimestamp = defaultFormatTimesta
     });
     const current = sorted.find((s) => s.id === activeSessionId);
     const currentTitle = current?.title ?? resolvedFallback;
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: rootRef, className: className, "data-component": "session-switcher", "data-open": open || undefined, children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", "data-element": "trigger", onMouseDown: (e) => e.stopPropagation(), onClick: () => setOpen((v) => !v), "aria-haspopup": "listbox", "aria-expanded": open, children: [(0, jsx_runtime_1.jsx)("span", { "data-element": "trigger-title", children: currentTitle }), (0, jsx_runtime_1.jsx)("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: (0, jsx_runtime_1.jsx)("polyline", { points: "6 9 12 15 18 9" }) })] }), open && ((0, jsx_runtime_1.jsxs)("div", { "data-element": "popover", role: "listbox", onMouseDown: (e) => e.stopPropagation(), children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", "data-element": "new-session", onClick: onNew, disabled: isSessionsLoading, children: [(0, jsx_runtime_1.jsx)("span", { "data-element": "plus", "aria-hidden": "true", children: "+" }), locale.newChatLabel] }), (0, jsx_runtime_1.jsx)("div", { "data-element": "session-list", children: sorted.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { "data-element": "empty", children: isSessionsLoading ? locale.sessionsLoadingLabel : locale.noSessionsLabel })) : (sorted.map((s) => {
+    const pendingDeleteTitle = sessions.find((session) => session.id === pendingDeleteId)?.title;
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: rootRef, className: className, "data-component": "session-switcher", "data-open": open || undefined, children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", "data-element": "trigger", onMouseDown: (e) => e.stopPropagation(), onClick: () => setOpen((v) => !v), "aria-haspopup": "listbox", "aria-expanded": open, disabled: blocked, children: [(0, jsx_runtime_1.jsx)("span", { "data-element": "trigger-title", children: currentTitle }), (0, jsx_runtime_1.jsx)("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: (0, jsx_runtime_1.jsx)("polyline", { points: "6 9 12 15 18 9" }) })] }), open && !blocked && ((0, jsx_runtime_1.jsxs)("div", { "data-element": "popover", role: "listbox", onMouseDown: (e) => e.stopPropagation(), children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", "data-element": "new-session", onClick: onNew, disabled: isSessionsLoading, children: [(0, jsx_runtime_1.jsx)("span", { "data-element": "plus", "aria-hidden": "true", children: "+" }), locale.newChatLabel] }), (0, jsx_runtime_1.jsx)("div", { "data-element": "session-list", children: sorted.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { "data-element": "empty", children: isSessionsLoading ? locale.sessionsLoadingLabel : locale.noSessionsLabel })) : (sorted.map((s) => {
                             const isActive = s.id === activeSessionId;
                             const ts = formatTimestamp(s.updatedAt ?? s.createdAt);
                             const isEditing = editingId === s.id;
@@ -126,8 +141,8 @@ function SessionSwitcher({ fallbackTitle, formatTimestamp = defaultFormatTimesta
                                                         e.preventDefault();
                                                         cancelEdit();
                                                     }
-                                                }, onBlur: () => void commitEdit() })) : ((0, jsx_runtime_1.jsx)("div", { "data-element": "row-title", children: s.title || 'Untitled' })), ts && !isEditing && ((0, jsx_runtime_1.jsx)("div", { "data-element": "row-subtitle", children: ts }))] }), !isEditing && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("button", { type: "button", "data-element": "row-edit", "aria-label": locale.renameSessionAriaLabel, title: locale.renameSessionAriaLabel, onClick: (e) => beginEdit(e, s.id, s.title || ''), onMouseDown: (e) => e.stopPropagation(), children: (0, jsx_runtime_1.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [(0, jsx_runtime_1.jsx)("path", { d: "M12 20h9" }), (0, jsx_runtime_1.jsx)("path", { d: "M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4 12.5-12.5z" })] }) }), (0, jsx_runtime_1.jsx)("button", { type: "button", "data-element": "row-delete", "aria-label": locale.deleteSessionAriaLabel, title: locale.deleteSessionAriaLabel, onClick: (e) => void onDelete(e, s.id), onMouseDown: (e) => e.stopPropagation(), children: (0, jsx_runtime_1.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [(0, jsx_runtime_1.jsx)("polyline", { points: "3 6 5 6 21 6" }), (0, jsx_runtime_1.jsx)("path", { d: "M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" })] }) })] }))] }, s.id));
-                        })) })] })), (0, jsx_runtime_1.jsx)(confirm_dialog_js_1.ConfirmDialog, { open: pendingDeleteId !== null, title: locale.confirmDeleteSessionPrompt, message: sessions.find((s) => s.id === pendingDeleteId)?.title
-                    ? `"${sessions.find((s) => s.id === pendingDeleteId)?.title}" will be archived.`
+                                                }, onBlur: () => void commitEdit() })) : ((0, jsx_runtime_1.jsx)("div", { "data-element": "row-title", children: s.title || locale.untitledSessionLabel })), ts && !isEditing && ((0, jsx_runtime_1.jsx)("div", { "data-element": "row-subtitle", children: ts }))] }), !isEditing && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("button", { type: "button", "data-element": "row-edit", "aria-label": locale.renameSessionAriaLabel, title: locale.renameSessionAriaLabel, onClick: (e) => beginEdit(e, s.id, s.title || ''), onMouseDown: (e) => e.stopPropagation(), children: (0, jsx_runtime_1.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [(0, jsx_runtime_1.jsx)("path", { d: "M12 20h9" }), (0, jsx_runtime_1.jsx)("path", { d: "M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4 12.5-12.5z" })] }) }), (0, jsx_runtime_1.jsx)("button", { type: "button", "data-element": "row-delete", "aria-label": locale.deleteSessionAriaLabel, title: locale.deleteSessionAriaLabel, onClick: (e) => void onDelete(e, s.id), onMouseDown: (e) => e.stopPropagation(), children: (0, jsx_runtime_1.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [(0, jsx_runtime_1.jsx)("polyline", { points: "3 6 5 6 21 6" }), (0, jsx_runtime_1.jsx)("path", { d: "M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" })] }) })] }))] }, s.id));
+                        })) })] })), (0, jsx_runtime_1.jsx)(confirm_dialog_js_1.ConfirmDialog, { open: pendingDeleteId !== null && !blocked, title: locale.confirmDeleteSessionPrompt, message: pendingDeleteTitle
+                    ? locale.sessionArchiveMessage.replace('{title}', () => pendingDeleteTitle)
                     : undefined, confirmLabel: locale.deleteSessionAriaLabel, cancelLabel: locale.cancelButton, destructive: true, onConfirm: () => void confirmDelete(), onCancel: cancelDelete })] }));
 }

package/dist/cjs/react/components/status-icon.d.ts

@@ -0,0 +1,8 @@
+export type StatusIconKind = 'check' | 'spinner' | 'pending' | 'error';
+/**
+ * Inline status icon. It carries its own shape and motion (SMIL), so it
+ * reads correctly in unstyled mode without any stylesheet.
+ */
+export declare function StatusIcon({ icon }: {
+    icon: StatusIconKind;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/react/components/status-icon.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StatusIcon = StatusIcon;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Inline status icon. It carries its own shape and motion (SMIL), so it
+ * reads correctly in unstyled mode without any stylesheet.
+ */
+function StatusIcon({ icon }) {
+    return ((0, jsx_runtime_1.jsxs)("svg", { "data-element": "icon", "data-icon": icon, viewBox: "0 0 16 16", width: "14", height: "14", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [icon === 'check' && (0, jsx_runtime_1.jsx)("path", { d: "M3 8.5l3.5 3.5L13 4.5" }), icon === 'error' && (0, jsx_runtime_1.jsx)("path", { d: "M4.5 4.5l7 7M11.5 4.5l-7 7" }), icon === 'pending' && (0, jsx_runtime_1.jsx)("circle", { cx: "8", cy: "8", r: "5.5", strokeWidth: "1.5", opacity: "0.5" }), icon === 'spinner' && ((0, jsx_runtime_1.jsx)("path", { d: "M8 2.5a5.5 5.5 0 1 1-5.5 5.5", children: (0, jsx_runtime_1.jsx)("animateTransform", { attributeName: "transform", type: "rotate", from: "0 8 8", to: "360 8 8", dur: "0.9s", repeatCount: "indefinite" }) }))] }));
+}

package/dist/cjs/react/components/stream-waveform.d.ts

@@ -0,0 +1,4 @@
+/** Visualizes an existing authoritative recorder stream without opening a mic. */
+export declare function StreamWaveform({ stream, }: {
+    stream: MediaStream | null | undefined;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/react/components/stream-waveform.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StreamWaveform = StreamWaveform;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const waveform_js_1 = require("../stt/waveform.js");
+/** Visualizes an existing authoritative recorder stream without opening a mic. */
+function StreamWaveform({ stream, }) {
+    const [level, setLevel] = (0, react_1.useState)(0);
+    (0, react_1.useEffect)(() => {
+        if (!stream)
+            return;
+        let disposed = false;
+        let frame = 0;
+        let analyser = null;
+        try {
+            analyser = (0, waveform_js_1.createStreamAnalyser)(stream);
+            const draw = () => {
+                if (disposed || !analyser)
+                    return;
+                setLevel(analyser.readLevel());
+                frame = requestAnimationFrame(draw);
+            };
+            frame = requestAnimationFrame(draw);
+        }
+        catch {
+            setLevel(0);
+        }
+        return () => {
+            disposed = true;
+            cancelAnimationFrame(frame);
+            void analyser?.close();
+        };
+    }, [stream]);
+    const heights = [0.45, 0.75, 1, 0.65, 0.85, 0.5].map((weight) => Math.max(4, Math.round(4 + level * weight * 20)));
+    return ((0, jsx_runtime_1.jsx)("div", { "data-element": "waveform", style: {
+            flex: 1,
+            minWidth: 0,
+            display: 'flex',
+            gap: 3,
+            alignItems: 'center',
+            justifyContent: 'center',
+        }, children: heights.map((height, index) => ((0, jsx_runtime_1.jsx)("span", { style: {
+                width: 3,
+                height,
+                borderRadius: 2,
+                background: 'currentColor',
+            } }, index))) }));
+}