@softov/scena 0.1.2

package/dist/ui/menu/ActionList.js

@@ -0,0 +1,369 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState, } from 'react';
+import { useScena } from '../../react/ScenaProvider.js';
+import { canonicalShortcut } from './token.js';
+import './ActionList.css';
+import { resolveColorVar } from '../../types/colors.js';
+// Debounce (ms) for async provider re-resolves while results are already on
+// screen — collapses a burst of keystrokes into one network call.
+const PROVIDER_DEBOUNCE_MS = 180;
+export function ActionList({ spec, hostCtx, onBack, dataContext, manageKeys = true, ref, }) {
+    const scena = useScena();
+    const [selected, setSelected] = useState(0);
+    const [resolved, setResolved] = useState({ kind: 'loading' });
+    // True while an async provider is re-resolving but we're still showing the
+    // previous rows (so the list doesn't flash to a "Loading…" screen on every
+    // keystroke — see the provider branch below). Drives the header spinner.
+    const [pending, setPending] = useState(false);
+    const resolvedRef = useRef(resolved);
+    resolvedRef.current = resolved;
+    const itemsRef = useRef(null);
+    // Title / icon / active / disabled for a Command — evaluated against the
+    // panel's dataContext so per-instance reads (e.g. a chat command's `active`
+    // reading `$/chat/<id>/mode`) resolve to THIS panel's root, not the global
+    // fallback. Re-resolved when the registry/store announces a change.
+    const stubCtx = useMemo(() => ({
+        scena,
+        store: scena.store,
+        surfaces: scena.surfaces,
+        commands: scena.commands,
+        events: scena.events,
+        source: 'menu',
+        dataContext,
+    }), [scena, dataContext]);
+    const rowsFromCommands = useCallback((cmds) => {
+        return cmds.map((c) => {
+            const title = typeof c.title === 'function' ? c.title(stubCtx) : c.title;
+            const description = typeof c.description === 'function' ? c.description(stubCtx) : c.description;
+            const active = c.active ? !!c.active(stubCtx) : undefined;
+            const disabled = c.disabled ? !!c.disabled(stubCtx) : undefined;
+            return {
+                key: `cmd:${c.id}`,
+                title,
+                description,
+                icon: c.icon,
+                color: c.color,
+                shortcut: canonicalShortcut(c.shortcut),
+                keys: canonicalShortcut(c.keys),
+                category: c.category,
+                active,
+                disabled,
+                invoke: (host) => {
+                    // Autocomplete the typed token to the command's canonical shortcut
+                    // (e.g. '/mod' → '/model') so the input matches the submenu it opens
+                    // and the picker's sentinel keeps the submenu open. No-op on hosts
+                    // without a text input (context menus stub replaceActiveToken).
+                    const sc = canonicalShortcut(c.shortcut);
+                    if (sc)
+                        host.replaceActiveToken(sc);
+                    void scena.commands.execute(c.id, undefined, {
+                        source: 'menu',
+                        dataContext,
+                        host,
+                    });
+                },
+            };
+        });
+    }, [scena, stubCtx, dataContext]);
+    const rowsFromActions = useCallback((actions) => {
+        return actions.map((a, i) => {
+            if ('commandId' in a) {
+                const cmd = scena.commands.get(a.commandId);
+                if (!cmd) {
+                    return {
+                        key: `cmd:${a.commandId}:${i}`,
+                        title: `[${a.commandId}]`,
+                        disabled: true,
+                        invoke: () => undefined,
+                    };
+                }
+                const row = rowsFromCommands([cmd])[0];
+                const args = a.args;
+                return {
+                    ...row,
+                    key: `cmd:${a.commandId}:${i}`,
+                    invoke: (host) => {
+                        void scena.commands.execute(cmd.id, args, {
+                            source: 'menu',
+                            dataContext,
+                            host,
+                        });
+                    },
+                };
+            }
+            return {
+                key: `act:${i}:${a.title}`,
+                title: a.title,
+                description: a.description,
+                icon: a.icon,
+                color: a.color,
+                shortcut: a.shortcut,
+                keys: a.keys,
+                group: a.group,
+                active: a.active,
+                disabled: a.disabled,
+                invoke: a.onSelect,
+            };
+        });
+    }, [scena, rowsFromCommands, dataContext]);
+    // Resolve `spec` to a list of rows. Three modes: items, provider, query.
+    // Provider may return a Promise — loading state shown until it resolves.
+    // `spec.extraItems` (registry-injected rows) are prepended in every mode.
+    useEffect(() => {
+        let cancelled = false;
+        const extra = spec.extraItems ? rowsFromActions(spec.extraItems) : [];
+        if (spec.items) {
+            setPending(false);
+            setResolved({ kind: 'ready', rows: [...extra, ...rowsFromActions(spec.items)] });
+            return () => {
+                cancelled = true;
+            };
+        }
+        if (spec.query) {
+            setPending(false);
+            const querySlot = spec.query.slot;
+            const queryQ = spec.query.q;
+            const resolveQuery = () => {
+                const cmds = scena.commands.list({
+                    slot: querySlot,
+                    q: queryQ,
+                    enabled: true,
+                });
+                if (!cancelled)
+                    setResolved({ kind: 'ready', rows: [...extra, ...rowsFromCommands(cmds)] });
+            };
+            resolveQuery();
+            // Re-resolve on registry changes (newly-registered commands appear)
+            // AND on any store path change (so toggle commands like /plan show
+            // their ✓ live without waiting for the next menu open). Store
+            // updates can fire densely — coalesce to one rAF.
+            let scheduled = false;
+            function schedule() {
+                if (scheduled || cancelled)
+                    return;
+                scheduled = true;
+                requestAnimationFrame(() => {
+                    scheduled = false;
+                    if (!cancelled)
+                        resolveQuery();
+                });
+            }
+            const subRegistry = scena.events.on('scena:registry:changed', (payload) => {
+                const reg = payload.registry;
+                if (reg !== 'commands' && reg !== 'components')
+                    return;
+                schedule();
+            });
+            const subStore = scena.events.on('scena:store:changed', () => {
+                schedule();
+            });
+            return () => {
+                cancelled = true;
+                subRegistry.dispose();
+                subStore.dispose();
+            };
+        }
+        if (spec.provider) {
+            const provider = spec.provider;
+            const run = () => {
+                if (cancelled)
+                    return;
+                let out;
+                try {
+                    out = provider(hostCtx);
+                }
+                catch (err) {
+                    setResolved({ kind: 'error', message: err instanceof Error ? err.message : String(err) });
+                    setPending(false);
+                    return;
+                }
+                if (out instanceof Promise) {
+                    out
+                        .then((actions) => {
+                        if (cancelled)
+                            return;
+                        setResolved({ kind: 'ready', rows: [...extra, ...rowsFromActions(actions)] });
+                        setPending(false);
+                    })
+                        .catch((err) => {
+                        if (cancelled)
+                            return;
+                        setResolved({ kind: 'error', message: err instanceof Error ? err.message : String(err) });
+                        setPending(false);
+                    });
+                }
+                else {
+                    setResolved({ kind: 'ready', rows: [...extra, ...rowsFromActions(out)] });
+                    setPending(false);
+                }
+            };
+            // Keep the prior rows, show the header spinner, and debounce — used for
+            // re-resolves (typing, or a store change below).
+            let timer = null;
+            const scheduleRun = () => {
+                if (cancelled)
+                    return;
+                setPending(true);
+                if (timer)
+                    clearTimeout(timer);
+                timer = setTimeout(run, PROVIDER_DEBOUNCE_MS);
+            };
+            // First resolve (nothing shown yet) → full "Loading…" + run immediately.
+            if (resolvedRef.current.kind !== 'ready') {
+                setResolved({ kind: 'loading' });
+                run();
+            }
+            else {
+                scheduleRun();
+            }
+            // Re-resolve on store changes so a provider whose rows depend on store
+            // state (e.g. the /mode submenu's active ✓) reflects external updates —
+            // like the composer's mode button toggling `$/chat/<id>/mode` while the
+            // menu is open. Debounced + keep-rows so network providers stay smooth.
+            const subStore = scena.events.on('scena:store:changed', () => scheduleRun());
+            return () => {
+                cancelled = true;
+                if (timer)
+                    clearTimeout(timer);
+                subStore.dispose();
+            };
+        }
+        setPending(false);
+        setResolved({ kind: 'ready', rows: extra });
+        return () => {
+            cancelled = true;
+        };
+    }, [spec, hostCtx, rowsFromActions, rowsFromCommands, scena]);
+    // Flat list of selectable rows (skip group headers and disabled rows).
+    const interactiveRows = useMemo(() => {
+        if (resolved.kind !== 'ready')
+            return [];
+        return resolved.rows.filter((r) => !r.disabled);
+    }, [resolved]);
+    // Reset highlight when the row set changes.
+    useEffect(() => {
+        setSelected(0);
+    }, [interactiveRows.length]);
+    // Scroll selected into view.
+    useEffect(() => {
+        const el = itemsRef.current;
+        if (!el)
+            return;
+        const selectedEl = el.querySelector('[data-selected="true"]');
+        if (selectedEl)
+            selectedEl.scrollIntoView({ block: 'nearest' });
+    }, [selected]);
+    // Track focused row for layout='info-list' detail panel.
+    const focusedRow = interactiveRows[selected];
+    // ---------- Group rows by category --------------------------------------
+    const grouped = useMemo(() => {
+        if (resolved.kind !== 'ready')
+            return [];
+        const order = spec.groupOrder ?? [];
+        const buckets = new Map();
+        const orderSeen = [];
+        for (const r of resolved.rows) {
+            const k = r.category ?? r.group ?? '';
+            if (!buckets.has(k)) {
+                buckets.set(k, []);
+                if (!orderSeen.includes(k))
+                    orderSeen.push(k);
+            }
+            buckets.get(k).push(r);
+        }
+        const sortedKeys = [
+            ...order.filter((k) => buckets.has(k)),
+            ...orderSeen.filter((k) => !order.includes(k)),
+        ];
+        return sortedKeys.map((k) => ({
+            label: k === '' ? null : k,
+            rows: buckets.get(k),
+        }));
+    }, [resolved, spec.groupOrder]);
+    // ---------- Keyboard handler --------------------------------------------
+    const handleKeyDown = useCallback((e) => {
+        if (interactiveRows.length === 0 && e.key !== 'Escape' && e.key !== 'ArrowLeft')
+            return false;
+        if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            setSelected((p) => (p + 1) % interactiveRows.length);
+            return true;
+        }
+        if (e.key === 'ArrowUp') {
+            e.preventDefault();
+            setSelected((p) => (p - 1 + interactiveRows.length) % interactiveRows.length);
+            return true;
+        }
+        if (e.key === 'Enter' || e.key === 'Tab') {
+            e.preventDefault();
+            const row = interactiveRows[selected];
+            if (row)
+                void row.invoke(hostCtx);
+            return true;
+        }
+        if (e.key === 'Escape') {
+            e.preventDefault();
+            hostCtx.closeMenu();
+            return true;
+        }
+        if (e.key === 'ArrowLeft' && onBack) {
+            e.preventDefault();
+            onBack();
+            return true;
+        }
+        return false;
+    }, [interactiveRows, selected, hostCtx, onBack]);
+    // Document-level key listener for popup hosts (ContextMenu). Chat hosts
+    // disable it via `manageKeys: false` and route keys through the
+    // `controller.handleKey` exposed via ref — otherwise two visible pickers
+    // would both react to a single ArrowDown press.
+    useEffect(() => {
+        if (!manageKeys)
+            return;
+        function onDocKey(e) {
+            const synth = {
+                key: e.key,
+                preventDefault: () => e.preventDefault(),
+            };
+            handleKeyDown(synth);
+        }
+        document.addEventListener('keydown', onDocKey);
+        return () => document.removeEventListener('keydown', onDocKey);
+    }, [handleKeyDown, manageKeys]);
+    // Imperative controller — only consumed when `manageKeys: false`.
+    useImperativeHandle(ref, () => ({
+        handleKey: (e) => handleKeyDown(e),
+    }), [handleKeyDown]);
+    // ---------- Render -------------------------------------------------------
+    let visibleIndex = -1;
+    const rich = spec.rich === true;
+    function renderRow(row) {
+        const isInteractive = !row.disabled;
+        if (isInteractive)
+            visibleIndex += 1;
+        const isSelected = isInteractive && visibleIndex === selected;
+        const capturedIndex = visibleIndex;
+        const inlineStyle = row.color
+            ? { ['--oo-color']: resolveColorVar(row.color) }
+            : undefined;
+        return (_jsxs("button", { className: "oo-action-list__row", type: "button", disabled: row.disabled, "data-cmd-group": row.group, "data-cmd-category": row.category, "data-color": row.color, "data-active": row.active ? 'true' : undefined, "data-disabled": row.disabled ? 'true' : undefined, "data-selected": isSelected ? 'true' : undefined, style: inlineStyle, onMouseEnter: () => { if (isInteractive)
+                setSelected(capturedIndex); }, onClick: () => { if (isInteractive)
+                void row.invoke(hostCtx); }, children: [_jsx("span", { className: "oo-icon", children: row.icon ?? '·' }), rich ? (_jsxs("span", { className: "oo-action-list__text", children: [_jsx("span", { className: "oo-action-list__title", children: row.title }), row.description ? (_jsx("span", { className: "oo-action-list__subtitle", children: row.description })) : null] })) : (_jsxs(_Fragment, { children: [_jsx("span", { className: "oo-action-list__title", children: row.title }), row.description ? (_jsx("span", { className: "oo-action-list__description", children: row.description })) : null] })), row.active ? _jsx("span", { className: "oo-action-list__check", children: "\u2713" }) : null, row.shortcut ? (_jsx("kbd", { className: "oo-action-list__shortcut", children: row.shortcut })) : null, row.keys ? (_jsx("kbd", { className: "oo-action-list__shortcut", children: row.keys })) : null] }, row.key));
+    }
+    function renderBody() {
+        if (resolved.kind === 'loading') {
+            return _jsx("div", { className: "oo-action-list__loading", children: "Loading\u2026" });
+        }
+        if (resolved.kind === 'error') {
+            return _jsx("div", { className: "oo-action-list__error", children: resolved.message });
+        }
+        if (grouped.length === 0 || resolved.rows.length === 0) {
+            return _jsx("div", { className: "oo-action-list__empty", children: "No matches" });
+        }
+        return (_jsx(_Fragment, { children: grouped.map((group, gi) => (_jsxs("div", { children: [gi > 0 ? _jsx("div", { className: "oo-action-list__divider" }) : null, group.label ? (_jsx("div", { className: "oo-action-list__group-label", children: group.label })) : null, group.rows.map(renderRow)] }, group.label ?? `__g${gi}`))) }));
+    }
+    const layout = spec.layout ?? 'list';
+    const showHeader = layout === 'header-list' && spec.header;
+    const showDetail = layout === 'info-list' && spec.detail;
+    return (_jsxs("div", { className: "oo-action-list", "data-layout": layout, children: [pending ? _jsx("div", { className: "oo-action-list__pending", "aria-hidden": true, children: "searching\u2026" }) : null, onBack ? (_jsxs("button", { type: "button", className: "oo-action-list__back", onClick: onBack, children: ["\u2190 ", spec.title ?? 'Back'] })) : null, spec.customHeader ? (_jsx("div", { className: "oo-action-list__custom-header", children: spec.customHeader(hostCtx) })) : null, showHeader ? (_jsx("div", { className: "oo-action-list__header", children: spec.header(hostCtx) })) : null, _jsxs("div", { className: "oo-action-list__body", children: [_jsx("div", { className: "oo-action-list__items", ref: itemsRef, children: renderBody() }), showDetail ? (_jsx("div", { className: "oo-action-list__detail", children: spec.detail(hostCtx, focusedRow) })) : null] }), spec.footerHints ? (_jsxs("div", { className: "oo-action-list__footer", children: ["\u2191\u2193 navigate \u00B7 \u21B5 select", onBack ? ' · ← back' : '', " \u00B7 \u238B close"] })) : null] }));
+}

package/dist/ui/menu/ContainerMenu.d.ts

@@ -0,0 +1,13 @@
+import { type ReactNode } from 'react';
+import type { BindingPath } from '../../types/component-graph.js';
+import type { ListSpec } from '../../types/host.js';
+export interface ContainerMenuProps {
+    spec: ListSpec;
+    context?: Record<string, unknown>;
+    dataContext?: BindingPath;
+    manageKeys?: boolean;
+    inline?: {
+        component: ReactNode;
+    };
+}
+export declare function ContainerMenu({ spec, context, dataContext, manageKeys, inline, }: ContainerMenuProps): import("react").JSX.Element;

package/dist/ui/menu/ContainerMenu.js

@@ -0,0 +1,57 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useMemo, useRef, useState } from 'react';
+import { useScena } from '../../react/ScenaProvider.js';
+import { ActionList } from './ActionList.js';
+// Inline twin of ContextMenu: same picker engine (ActionList + the host stack
+// with push/back), but NO Popup wrapper. Use when the menu should sit inside
+// the layout (a sidebar section, a panel) instead of floating at click coords.
+//
+// Stack behavior mirrors ContextMenu so submenus pushed via host.pushList /
+// replaceList work the same way. closeMenu is a no-op — there is no popup to
+// dismiss; commands that depend on closing the menu after execute should
+// instead unmount the container at the call site.
+export function ContainerMenu({ spec, context, dataContext, manageKeys = false, inline, }) {
+    const scena = useScena();
+    const [stack, setStack] = useState(() => inline ? [{ component: inline.component }] : [{ spec }]);
+    // Same StrictMode-safe context injection pattern as ContextMenu: write once
+    // synchronously, don't restore on unmount. ActionList's effects fire
+    // bottom-up before ours, so an unmount-restore would race them on remount.
+    const injectedRef = useRef(false);
+    if (context && !injectedRef.current) {
+        for (const [k, v] of Object.entries(context)) {
+            const path = (k.startsWith('$/') ? k : joinAbs(dataContext, k));
+            scena.store.set(path, v);
+        }
+        injectedRef.current = true;
+    }
+    const host = useMemo(() => ({
+        pushList: (s) => setStack((cur) => [...cur, { spec: s }]),
+        replaceList: (s) => setStack((cur) => {
+            const next = cur.slice(0, -1);
+            next.push({ spec: s });
+            return next;
+        }),
+        openInline: () => undefined,
+        openPopover: () => undefined,
+        back: () => setStack((cur) => (cur.length > 1 ? cur.slice(0, -1) : cur)),
+        closeMenu: () => undefined,
+        keepOpen: () => undefined,
+        insertAtCursor: () => undefined,
+        replaceActiveToken: () => undefined,
+        query: '',
+    }), []);
+    const top = stack[stack.length - 1];
+    const onBack = stack.length > 1 ? host.back : undefined;
+    if ('component' in top)
+        return _jsx(_Fragment, { children: top.component });
+    return (_jsx(ActionList, { spec: top.spec, hostCtx: host, onBack: onBack, dataContext: dataContext, manageKeys: manageKeys }));
+}
+function joinAbs(root, rel) {
+    if (rel.startsWith('$/'))
+        return rel;
+    if (!root)
+        return rel.startsWith('/') ? `$${rel}` : `$/${rel}`;
+    const base = root.endsWith('/') ? root.slice(0, -1) : root;
+    const tail = rel.startsWith('/') ? rel : `/${rel}`;
+    return `${base}${tail}`;
+}

package/dist/ui/menu/ContextMenu.d.ts

@@ -0,0 +1,27 @@
+import { type ReactNode } from 'react';
+import type { BindingPath } from '../../types/component-graph.js';
+import type { ListSpec } from '../../types/host.js';
+export interface ContextMenuProps {
+    spec: ListSpec;
+    x: number;
+    y: number;
+    onClose: () => void;
+    context?: Record<string, unknown>;
+    dataContext?: BindingPath;
+    inline?: {
+        component: ReactNode;
+    };
+}
+export declare function ContextMenu({ spec, x, y, onClose, context, dataContext, inline, }: ContextMenuProps): import("react").JSX.Element;
+export declare function useContextMenu(): {
+    open: (opts: {
+        x: number;
+        y: number;
+        slot: string;
+        context?: Record<string, unknown>;
+        dataContext?: BindingPath;
+        q?: string;
+    }) => void;
+    close: () => void;
+    rendered: ReactNode | null;
+};

package/dist/ui/menu/ContextMenu.js

@@ -0,0 +1,93 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo, useRef, useState } from 'react';
+import { useScena } from '../../react/ScenaProvider.js';
+import { Popup } from '../overlay/Popup.js';
+import { ActionList } from './ActionList.js';
+// Right-click style picker. Wraps Popup + ActionList. Owns the picker stack
+// (push/replace/back), context injection, and host callbacks.
+export function ContextMenu({ spec, x, y, onClose, context, dataContext, inline, }) {
+    const scena = useScena();
+    const [stack, setStack] = useState(() => (inline ? [{ component: inline.component }] : [{ spec }]));
+    const stackRef = useRef(stack);
+    stackRef.current = stack;
+    // Inject context paths into the store synchronously during render so the
+    // child ActionList's useEffect (which fires BEFORE parent useEffects) sees
+    // the values when it calls commands.list() or when the run reads them.
+    //
+    // We deliberately do NOT restore the paths on unmount. The earlier
+    // restore-on-cleanup pattern was broken under React 18 StrictMode: dev
+    // fires effects as mount → cleanup → remount WITHOUT re-rendering. The
+    // cleanup wiped the paths; the remount's ActionList effect (which runs
+    // BEFORE the parent ContextMenu effect, bottom-up) then queried
+    // commands.list against an empty store. when-gated commands evaluated to
+    // false against undefined and the picker cached "no matches" until the
+    // next registry change. Skipping restore entirely sidesteps the race.
+    // Each new menu open writes its own context, so stale paths from a
+    // previously-closed menu are overwritten before being read.
+    const injectedRef = useRef(false);
+    if (context && !injectedRef.current) {
+        for (const [k, v] of Object.entries(context)) {
+            const path = (k.startsWith('$/') ? k : joinAbs(dataContext, k));
+            scena.store.set(path, v);
+        }
+        injectedRef.current = true;
+    }
+    // Build a stable HostCtx scoped to this menu's stack.
+    const host = useMemo(() => ({
+        pushList: (s) => setStack((cur) => [...cur, { spec: s }]),
+        replaceList: (s) => setStack((cur) => {
+            const next = cur.slice(0, -1);
+            next.push({ spec: s });
+            return next;
+        }),
+        openInline: (componentId, props) => {
+            // Build a thin shell that mounts the component via ViewMount-style
+            // dispatch. For now we use a synthesized React tree; the real impl
+            // would consult scena.components.resolve(componentId).
+            setStack((cur) => [
+                ...cur,
+                { component: _jsx(MissingInline, { name: componentId, props: props }) },
+            ]);
+        },
+        openPopover: () => {
+            // A detached popover from inside a context menu is uncommon; for the
+            // first cut, treat as openInline (push onto stack).
+        },
+        back: () => setStack((cur) => (cur.length > 1 ? cur.slice(0, -1) : cur)),
+        closeMenu: onClose,
+        keepOpen: () => undefined, // ContextMenu defaults to closing on dispatch; toggles override via run not running close
+        insertAtCursor: () => undefined, // right-click context has no text input
+        replaceActiveToken: () => undefined,
+        query: '',
+    }), [onClose]);
+    const top = stack[stack.length - 1];
+    const onBack = stack.length > 1 ? host.back : undefined;
+    return (_jsx(Popup, { x: x, y: y, onClose: onClose, children: 'component' in top ? (top.component) : (_jsx(ActionList, { spec: top.spec, hostCtx: host, onBack: onBack, dataContext: dataContext })) }));
+}
+function joinAbs(root, rel) {
+    if (rel.startsWith('$/'))
+        return rel;
+    if (!root)
+        return rel.startsWith('/') ? `$${rel}` : `$/${rel}`;
+    const base = root.endsWith('/') ? root.slice(0, -1) : root;
+    const tail = rel.startsWith('/') ? rel : `/${rel}`;
+    return `${base}${tail}`;
+}
+function MissingInline({ name, props: _props }) {
+    // Placeholder while openInline component-resolution lands. Will be replaced
+    // by a ViewMount-style adapter that looks up scena.components.
+    return _jsxs("div", { style: { padding: 12 }, children: ["[component: ", name, "]"] });
+}
+// Convenience for the common case — fire a Popup-anchored ActionList at the
+// given coords for a slot tag.
+export function useContextMenu() {
+    const [state, setState] = useState(null);
+    const open = useCallback((opts) => {
+        setState(opts);
+    }, []);
+    const close = useCallback(() => setState(null), []);
+    const rendered = state
+        ? (_jsx(ContextMenu, { x: state.x, y: state.y, onClose: close, spec: { query: { slot: state.slot, q: state.q } }, context: state.context, dataContext: state.dataContext }))
+        : null;
+    return { open: open, close, rendered };
+}

package/dist/ui/menu/index.d.ts

@@ -0,0 +1,10 @@
+export { ActionList } from './ActionList.js';
+export type { ActionListProps, ActionListController } from './ActionList.js';
+export { ContextMenu, useContextMenu } from './ContextMenu.js';
+export type { ContextMenuProps } from './ContextMenu.js';
+export { ContainerMenu } from './ContainerMenu.js';
+export type { ContainerMenuProps } from './ContainerMenu.js';
+export { useChatPicker, sentinelHas } from './useChatPicker.js';
+export type { UseChatPickerParams, UseChatPickerResult } from './useChatPicker.js';
+export { clampCaretIndex, getActiveToken, replaceActiveToken, shortcutMatchesToken, canonicalShortcut, } from './token.js';
+export type { TokenInfo } from './token.js';

package/dist/ui/menu/index.js

@@ -0,0 +1,7 @@
+// Public surface of the menu/picker family. See doop-roadmap/ideas/scena/15-command-view.md
+// for the architecture; this file is just the export map.
+export { ActionList } from './ActionList.js';
+export { ContextMenu, useContextMenu } from './ContextMenu.js';
+export { ContainerMenu } from './ContainerMenu.js';
+export { useChatPicker, sentinelHas } from './useChatPicker.js';
+export { clampCaretIndex, getActiveToken, replaceActiveToken, shortcutMatchesToken, canonicalShortcut, } from './token.js';

package/dist/ui/menu/token.d.ts

@@ -0,0 +1,22 @@
+export interface TokenInfo {
+    token: string;
+    prefix: string;
+    query: string;
+    start: number;
+    end: number;
+}
+export declare function clampCaretIndex(input: string, caretIndex?: number | null): number;
+export declare function getActiveToken(input: string, prefixes?: string[], caretIndex?: number | null): TokenInfo | null;
+export declare function replaceActiveToken(input: string, caretIndex: number | null | undefined, replacement: string, prefixes?: string[]): string;
+export declare function commitToken(input: string, caretIndex: number | null | undefined, replacement: string, prefixes?: string[]): {
+    next: string;
+    caret: number;
+};
+export declare function insertShortcut(input: string, caretIndex: number | null | undefined, shortcut: string, prefixes?: string[]): {
+    next: string;
+    caret: number;
+};
+export declare function shortcutMatchesToken(shortcut: string | string[] | undefined, token: string): boolean;
+export declare function stripSentinel(rawQuery: string, sentinel: string | string[] | undefined): string;
+export declare function tokenMatchesSentinel(token: string, sentinel: string | string[] | undefined): boolean;
+export declare function canonicalShortcut(shortcut: string | string[] | undefined): string | undefined;