@softov/scena 0.1.2

package/dist/ui/menu/token.js

@@ -0,0 +1,145 @@
+// Token parsing for chat-style inputs. A token is a contiguous non-whitespace
+// run starting with one of the configured prefixes ('/' or '@' by default).
+// The "active" token is the one straddling the caret, or none.
+//
+// Ported from web's chat slash token.ts and generalized to accept any prefix.
+export function clampCaretIndex(input, caretIndex) {
+    if (typeof caretIndex !== 'number' || Number.isNaN(caretIndex))
+        return input.length;
+    return Math.max(0, Math.min(input.length, Math.floor(caretIndex)));
+}
+// Returns the active token straddling the caret, when its prefix matches one
+// of `prefixes`. Returns null otherwise. Whitespace-bounded; identical caret
+// rules to web (caret inside or immediately after the token both count).
+export function getActiveToken(input, prefixes = ['/', '@'], caretIndex) {
+    if (!input)
+        return null;
+    const caret = clampCaretIndex(input, caretIndex);
+    let probe = -1;
+    if (caret < input.length && !/\s/.test(input[caret] ?? '')) {
+        probe = caret;
+    }
+    else if (caret > 0 && !/\s/.test(input[caret - 1] ?? '')) {
+        probe = caret - 1;
+    }
+    else {
+        return null;
+    }
+    let start = probe;
+    while (start > 0 && !/\s/.test(input[start - 1] ?? ''))
+        start -= 1;
+    let end = probe + 1;
+    while (end < input.length && !/\s/.test(input[end] ?? ''))
+        end += 1;
+    const token = input.slice(start, end);
+    const prefix = prefixes.find((p) => token.startsWith(p));
+    if (!prefix)
+        return null;
+    return {
+        token,
+        prefix,
+        query: token.slice(prefix.length),
+        start,
+        end,
+    };
+}
+// Rewrite the active token with `replacement` while preserving the rest of
+// the input. `replacement` may be empty to delete the token. Trailing
+// whitespace is collapsed.
+export function replaceActiveToken(input, caretIndex, replacement, prefixes = ['/', '@']) {
+    const info = getActiveToken(input, prefixes, caretIndex);
+    if (!info)
+        return input;
+    const before = input.slice(0, info.start);
+    const after = input.slice(info.end);
+    return `${before}${replacement}${after}`.replace(/[ \t]+$/g, '');
+}
+// Replace the active token with `replacement` and report the caret position
+// after it, so the host can sync caret state + focus. Unlike replaceActiveToken
+// this preserves an intentional trailing space in `replacement` (only the
+// empty-replacement / deletion case trims), and returns the caret so a mention
+// insertion like '@/path ' lands the caret past the space — which dismisses the
+// token and closes the picker. No active token → input unchanged, caret clamped.
+//   commitToken('msg @foo', 8, '@/a/b ')  → { next: 'msg @/a/b ', caret: 10 }
+//   commitToken('say /model', 10, '')     → { next: 'say', caret: 3 }
+export function commitToken(input, caretIndex, replacement, prefixes = ['/', '@']) {
+    const info = getActiveToken(input, prefixes, caretIndex);
+    if (!info)
+        return { next: input, caret: clampCaretIndex(input, caretIndex) };
+    const before = input.slice(0, info.start);
+    const after = input.slice(info.end);
+    let next = `${before}${replacement}${after}`;
+    if (replacement === '')
+        next = next.replace(/[ \t]+$/g, '');
+    return { next, caret: Math.min(before.length + replacement.length, next.length) };
+}
+// Write a command's shortcut into the input for a composer-button open:
+// replace the active token if the caret is on one, else append a new token
+// (with a separating space when needed). Returns the new string and the caret
+// position just after the inserted shortcut — the host syncs its caret to this
+// so token detection lands on the freshly-written token.
+//   insertShortcut('', 0, '/mode')        → { next: '/mode', caret: 5 }
+//   insertShortcut('/mod', 4, '/model')   → { next: '/model', caret: 6 }
+//   insertShortcut('hi', 2, '/mode')      → { next: 'hi /mode', caret: 8 }
+export function insertShortcut(input, caretIndex, shortcut, prefixes = ['/', '@']) {
+    const info = getActiveToken(input, prefixes, caretIndex);
+    if (info) {
+        const next = `${input.slice(0, info.start)}${shortcut}${input.slice(info.end)}`;
+        return { next, caret: info.start + shortcut.length };
+    }
+    const sep = input.length > 0 && !/\s$/.test(input) ? ' ' : '';
+    const next = `${input}${sep}${shortcut}`;
+    return { next, caret: next.length };
+}
+// Match a typed token against a command's `shortcut`. shortcut may be a
+// string ('/agent') or array (['/agent', '/persona']). Returns true if the
+// typed token starts with any registered shortcut — keeps the menu open while
+// the user types more after the sentinel.
+export function shortcutMatchesToken(shortcut, token) {
+    if (!shortcut)
+        return false;
+    const shortcuts = Array.isArray(shortcut) ? shortcut : [shortcut];
+    const lower = token.toLowerCase();
+    return shortcuts.some((s) => lower.startsWith(s.toLowerCase()));
+}
+// Strip a submenu's sentinel (and a following '=' or whitespace) off the raw
+// token query, leaving the inline-filter text. The sentinel is in shortcut
+// form ('/model'); the raw query excludes the prefix ('model=gemi') so the
+// prefix is dropped before matching. With an array, the first matching
+// sentinel wins. Returns the raw query unchanged when no sentinel is given or
+// none matches.
+//   stripSentinel('model=gemi', '/model')          === 'gemi'
+//   stripSentinel('model', '/model')               === ''
+//   stripSentinel('rout', '/model')                === 'rout'
+//   stripSentinel('persona x', ['/agent','/persona']) === 'x'
+export function stripSentinel(rawQuery, sentinel) {
+    if (!sentinel)
+        return rawQuery;
+    const sentinels = Array.isArray(sentinel) ? sentinel : [sentinel];
+    const lower = rawQuery.toLowerCase();
+    for (const s of sentinels) {
+        const bare = s.replace(/^[/@]/, '');
+        if (lower.startsWith(bare.toLowerCase())) {
+            return rawQuery.slice(bare.length).replace(/^[=\s]+/, '');
+        }
+    }
+    return rawQuery;
+}
+// True when the token still starts with any of the frame's sentinels — the
+// picker keeps a pushed submenu open while this holds, and collapses to the
+// root command list once it doesn't.
+export function tokenMatchesSentinel(token, sentinel) {
+    if (!sentinel)
+        return true;
+    const sentinels = Array.isArray(sentinel) ? sentinel : [sentinel];
+    const lower = token.toLowerCase();
+    return sentinels.some((s) => lower.startsWith(s.toLowerCase()));
+}
+// Returns the canonical shortcut for a command — first entry when array,
+// the string itself when single, undefined when unset. Used by composer
+// buttons to rewrite the input to match the slash-typed form.
+export function canonicalShortcut(shortcut) {
+    if (!shortcut)
+        return undefined;
+    return Array.isArray(shortcut) ? shortcut[0] : shortcut;
+}

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

@@ -0,0 +1,24 @@
+import { type Dispatch, type KeyboardEvent as ReactKeyboardEvent, type ReactNode, type SetStateAction } from 'react';
+import type { PickerAction, HostCtx } from '../../types/host.js';
+import type { BindingPath } from '../../types/component-graph.js';
+export interface UseChatPickerParams {
+    input: string;
+    setInput: Dispatch<SetStateAction<string>>;
+    caretIndex?: number | null;
+    panelDataContext?: BindingPath;
+    slashSlot?: string;
+    mentionSlot?: string;
+    mentionProvider?: (host: HostCtx) => PickerAction[] | Promise<PickerAction[]>;
+    prefixes?: string[];
+    onCaretChange?: (caret: number) => void;
+}
+export interface UseChatPickerResult {
+    menuVisible: boolean;
+    activeSentinel: string | string[] | undefined;
+    pickerNode: ReactNode | null;
+    handleMenuKeyDown(e: ReactKeyboardEvent<HTMLTextAreaElement | HTMLInputElement>): boolean;
+    openCommand(commandId: string): number | null;
+    closeMenu(): void;
+}
+export declare function useChatPicker(params: UseChatPickerParams): UseChatPickerResult;
+export declare function sentinelHas(sentinel: string | string[] | undefined, target: string): boolean;

package/dist/ui/menu/useChatPicker.js

@@ -0,0 +1,210 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
+import { useScena } from '../../react/ScenaProvider.js';
+import { canonicalShortcut, commitToken, getActiveToken, insertShortcut, stripSentinel, tokenMatchesSentinel, } from './token.js';
+import { ActionList } from './ActionList.js';
+// Per-instance host hook for chat-style inputs. Owns:
+//   - Token detection on each keystroke
+//   - Picker stack (push/replace/back/openInline)
+//   - HostCtx factory bound to this instance
+//   - Composer button → typing convergence via openCommand(id)
+//
+// Each chat panel owns one of these. Ten panels = ten hooks, no shared state.
+// Reference-stable default so consumers that don't pass `prefixes` don't
+// invalidate every memo that depends on it (tokenInfo → host → ActionList
+// effect → setResolved → re-render). The destructure-default was a fresh
+// array every call and caused "Maximum update depth exceeded".
+const DEFAULT_PREFIXES = ['/', '@'];
+export function useChatPicker(params) {
+    const { input, setInput, caretIndex, panelDataContext, slashSlot = 'chat:input/', mentionSlot = 'chat:input@', mentionProvider, prefixes = DEFAULT_PREFIXES, onCaretChange, } = params;
+    const scena = useScena();
+    // Picker stack — top is what renders. Reset by token changes.
+    const [stack, setStack] = useState([]);
+    const stackRef = useRef(stack);
+    stackRef.current = stack;
+    // Imperative handle on the visible ActionList. handleMenuKeyDown routes
+    // navigation keys through it so only the focused panel's picker reacts —
+    // ActionList's document-level listener is disabled here via manageKeys.
+    const actionListRef = useRef(null);
+    // Token detection on each render.
+    const tokenInfo = useMemo(() => getActiveToken(input, prefixes, caretIndex), [input, prefixes, caretIndex]);
+    const menuVisible = tokenInfo !== null;
+    // Root frame for the current token's prefix.
+    const rootSpecFor = useCallback((query) => tokenInfo?.prefix === '@'
+        ? mentionProvider
+            ? { provider: mentionProvider, footerHints: true, rich: true }
+            : { query: { slot: mentionSlot, q: query }, footerHints: true, rich: true }
+        : { query: { slot: slashSlot, q: query }, footerHints: true, rich: true }, [tokenInfo?.prefix, mentionProvider, mentionSlot, slashSlot]);
+    // When the active token changes, decide what the root frame should be.
+    // - '/' token → query slot (slashSlot)
+    // - '@' token → mentionProvider (if any), else mention slot
+    // - no token → empty stack
+    useEffect(() => {
+        if (!tokenInfo) {
+            if (stackRef.current.length > 0)
+                setStack([]);
+            return;
+        }
+        const top = stackRef.current[stackRef.current.length - 1];
+        const isRoot = stackRef.current.length <= 1;
+        if (isRoot) {
+            setStack([{ spec: rootSpecFor(tokenInfo.query) }]);
+            return;
+        }
+        // A submenu (pushed by a command) is open. If it declared a sentinel and
+        // the token no longer starts with it (user edited '/model' → '/rout'),
+        // collapse all the way back to the root command list.
+        const topSpec = top && 'spec' in top ? top.spec : undefined;
+        if (topSpec?.sentinel && !tokenMatchesSentinel(tokenInfo.token, topSpec.sentinel)) {
+            setStack([{ spec: rootSpecFor(tokenInfo.query) }]);
+            return;
+        }
+        if (topSpec?.query) {
+            // Re-resolve query-mode submenu against the new q.
+            setStack((cur) => {
+                const next = cur.slice(0, -1);
+                next.push({ spec: { ...topSpec, query: { ...topSpec.query, q: tokenInfo.query } } });
+                return next;
+            });
+        }
+        // provider/items frames: left as-is; their provider re-runs on its own
+        // when host.query (the post-sentinel filter text) changes.
+    }, [tokenInfo, rootSpecFor]);
+    // Sentinel of the visible submenu (if it declared one) and the post-sentinel
+    // filter text. For '/model=gemi' with sentinel '/model', filterQuery='gemi'
+    // — providers read host.query to filter inline.
+    const activeSentinel = useMemo(() => {
+        const t = stack[stack.length - 1];
+        return t && 'spec' in t ? t.spec.sentinel : undefined;
+    }, [stack]);
+    const filterQuery = useMemo(() => stripSentinel(tokenInfo?.query ?? '', activeSentinel), [tokenInfo, activeSentinel]);
+    // Host callbacks — bound to this hook's state. Re-created when setInput
+    // changes so insertAtCursor / replaceActiveToken always see the latest
+    // dispatcher.
+    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) => setStack((cur) => [
+            ...cur,
+            { component: _jsx(MissingInline, { name: componentId }) },
+        ]),
+        openPopover: () => undefined, // chat-style hosts don't open detached popovers from within
+        back: () => setStack((cur) => (cur.length > 1 ? cur.slice(0, -1) : cur)),
+        closeMenu: () => {
+            setStack([]);
+            const r = commitToken(input, caretIndex, '', prefixes);
+            setInput(r.next);
+            onCaretChange?.(r.caret);
+        },
+        keepOpen: () => undefined,
+        insertAtCursor: (text) => {
+            const r = commitToken(input, caretIndex, text, prefixes);
+            setInput(r.next);
+            onCaretChange?.(r.caret);
+        },
+        replaceActiveToken: (replacement) => {
+            const r = commitToken(input, caretIndex, replacement, prefixes);
+            setInput(r.next);
+            onCaretChange?.(r.caret);
+        },
+        query: filterQuery,
+    }), [input, caretIndex, prefixes, setInput, filterQuery, onCaretChange]);
+    const top = stack[stack.length - 1];
+    // Hoisted out of the conditional so `onBack` keeps a stable identity. Inline,
+    // it minted a new arrow every render and defeated the useCallback below that
+    // depends on it.
+    const popStack = useCallback(() => setStack((cur) => cur.slice(0, -1)), []);
+    const onBack = stack.length > 1 ? popStack : undefined;
+    // Keyboard hook the host wires to its textarea onKeyDown. Returns true when
+    // handled so the host knows whether to call its own default behavior.
+    // Navigation keys (ArrowDown/Up/Enter/Tab) are routed through the visible
+    // ActionList's imperative controller — this scopes them to THIS panel's
+    // picker even when another chat panel also has a picker open.
+    const handleMenuKeyDown = useCallback((e) => {
+        if (!menuVisible)
+            return false;
+        if (e.key === 'Escape') {
+            e.preventDefault();
+            host.closeMenu();
+            return true;
+        }
+        if (e.key === 'ArrowLeft' && onBack) {
+            const target = e.target;
+            if (target.selectionStart === target.selectionEnd) {
+                if (tokenInfo && target.selectionStart === tokenInfo.start + tokenInfo.prefix.length) {
+                    e.preventDefault();
+                    onBack();
+                    return true;
+                }
+            }
+        }
+        if (e.key === 'ArrowDown' ||
+            e.key === 'ArrowUp' ||
+            e.key === 'Enter' ||
+            e.key === 'Tab') {
+            return actionListRef.current?.handleKey(e) ?? false;
+        }
+        return false;
+    }, [menuVisible, host, onBack, tokenInfo]);
+    // openCommand: composer buttons converge with typing. Rewrites the input
+    // to the command's canonical shortcut, then triggers picker via the token
+    // detection cycle.
+    // Opens a command's picker from a composer button. Writes the command's
+    // shortcut into the input (replacing the active token, or appending one when
+    // the input has none — the button click should work on an empty composer),
+    // seeds the root frame, runs the command, and returns the caret position
+    // just after the inserted token so the host can sync its caret state + focus
+    // the input (otherwise keyboard nav is dead and token detection misfires).
+    const openCommand = useCallback((commandId) => {
+        const cmd = scena.commands.get(commandId);
+        if (!cmd)
+            return null;
+        const sc = canonicalShortcut(cmd.shortcut);
+        let newCaret = null;
+        if (sc) {
+            const { next, caret } = insertShortcut(input, caretIndex, sc, prefixes);
+            newCaret = caret;
+            setInput(next);
+            // Seed the root command frame first so a submenu the command pushes lands
+            // at depth 2 — the token effect only replaces the root frame at depth ≤ 1
+            // and would otherwise clobber a freshly-pushed submenu.
+            setStack([{ spec: { query: { slot: slashSlot, q: sc.replace(/^[/@]/, '') }, footerHints: true, rich: true } }]);
+        }
+        // Immediate dispatch so the command's `run` opens its submenu through host
+        // (or toggles + closes for toggle commands).
+        void scena.commands.execute(commandId, undefined, {
+            source: 'menu',
+            dataContext: panelDataContext,
+            host,
+        });
+        return newCaret;
+    }, [scena, panelDataContext, input, caretIndex, prefixes, host, setInput, slashSlot]);
+    const closeMenu = useCallback(() => host.closeMenu(), [host]);
+    const pickerNode = top
+        ? 'component' in top
+            ? top.component
+            : (_jsx(ActionList, { ref: actionListRef, spec: top.spec, hostCtx: host, onBack: onBack, dataContext: panelDataContext, manageKeys: false }))
+        : null;
+    return {
+        menuVisible,
+        activeSentinel,
+        pickerNode,
+        handleMenuKeyDown,
+        openCommand,
+        closeMenu,
+    };
+}
+// True when `sentinel` (a frame's single/alias sentinel) contains `target`.
+// Helper for hosts checking "is my submenu the one currently open?".
+export function sentinelHas(sentinel, target) {
+    if (!sentinel)
+        return false;
+    return Array.isArray(sentinel) ? sentinel.includes(target) : sentinel === target;
+}
+function MissingInline({ name }) {
+    return _jsxs("div", { style: { padding: 12 }, children: ["[component: ", name, "]"] });
+}

package/dist/ui/navigation/Breadcrumb.css

@@ -0,0 +1,30 @@
+.oo-breadcrumb {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: var(--oo-font-size-sm);
+  color: var(--oo-color-fg);
+}
+.oo-breadcrumb__sep {
+  color: var(--oo-color-muted);
+  margin: 0 4px;
+}
+.oo-breadcrumb__link {
+  background: none;
+  border: none;
+  padding: 0;
+  font: inherit;
+  color: var(--oo-color-accent);
+  cursor: pointer;
+  text-decoration: none;
+}
+.oo-breadcrumb__link:hover {
+  text-decoration: underline;
+}
+.oo-breadcrumb__item {
+  color: var(--oo-color-muted);
+}
+.oo-breadcrumb__item[data-current='true'] {
+  color: var(--oo-color-fg);
+  font-weight: 500;
+}

package/dist/ui/navigation/Breadcrumb.d.ts

@@ -0,0 +1,14 @@
+import { type CSSProperties, type ReactNode } from 'react';
+import './Breadcrumb.css';
+export interface BreadcrumbItem {
+    label: ReactNode;
+    href?: string;
+    onClick?: () => void;
+}
+export interface BreadcrumbProps {
+    items: BreadcrumbItem[];
+    separator?: ReactNode;
+    style?: CSSProperties;
+    className?: string;
+}
+export declare function Breadcrumb({ items, separator, style, className }: BreadcrumbProps): import("react").JSX.Element;

package/dist/ui/navigation/Breadcrumb.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from 'react';
+import './Breadcrumb.css';
+// Trail of items separated by `/`. Last item renders as plain text (current
+// location); earlier items render as links (href) or buttons (onClick) or
+// muted plain text when neither is set.
+export function Breadcrumb({ items, separator = '/', style, className }) {
+    return (_jsx("nav", { className: ['oo-breadcrumb', className].filter(Boolean).join(' '), "aria-label": "Breadcrumb", style: style, children: items.map((item, i) => {
+            const isLast = i === items.length - 1;
+            return (_jsxs(Fragment, { children: [i > 0 ? _jsx("span", { className: "oo-breadcrumb__sep", "aria-hidden": true, children: separator }) : null, item.href ? (_jsx("a", { className: "oo-breadcrumb__link", href: item.href, "aria-current": isLast ? 'page' : undefined, children: item.label })) : item.onClick && !isLast ? (_jsx("button", { type: "button", className: "oo-breadcrumb__link", onClick: item.onClick, children: item.label })) : (_jsx("span", { className: "oo-breadcrumb__item", "data-current": isLast ? 'true' : undefined, children: item.label }))] }, i));
+        }) }));
+}

package/dist/ui/navigation/Link.css

@@ -0,0 +1,13 @@
+.oo-link {
+  color: var(--oo-color-accent);
+  text-decoration: none;
+  cursor: pointer;
+}
+.oo-link:hover {
+  text-decoration: underline;
+}
+.oo-link[data-disabled='true'] {
+  color: var(--oo-color-muted);
+  cursor: not-allowed;
+  text-decoration: none;
+}

package/dist/ui/navigation/Link.d.ts

@@ -0,0 +1,18 @@
+import type { CSSProperties, ReactNode } from 'react';
+import './Link.css';
+export type LinkKind = 'tel' | 'email' | 'web';
+export declare function resolveLinkHref(raw: string): {
+    href: string;
+    kind: LinkKind;
+};
+export interface LinkProps {
+    href?: string;
+    label?: ReactNode;
+    children?: ReactNode;
+    external?: boolean;
+    disabled?: boolean;
+    onClick?: (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
+    weight?: number;
+    style?: CSSProperties;
+}
+export declare function Link({ href, label, children, external, disabled, onClick, weight, style }: LinkProps): import("react").JSX.Element;

package/dist/ui/navigation/Link.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { weightStyle } from '../_utils.js';
+import './Link.css';
+const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+// Phone-ish: optional leading +, then digits with spaces/dots/dashes/parens.
+const TEL_RE = /^\+?\d[\d\s().-]*$/;
+// Detect the target kind and normalize to a spec-compliant href:
+//   a phone number (or tel: / tel://)    → tel:<number>     (dials)
+//   an email address (or mailto:/email://) → mailto:<addr>  (composes)
+//   any other already-schemed value       → kept as-is
+//   everything else                        → https://<value>
+export function resolveLinkHref(raw) {
+    const v = raw.trim();
+    // Accept the non-standard tel:// / email:// forms but emit the real scheme.
+    if (/^tel:\/\//i.test(v))
+        return { href: `tel:${v.slice(6)}`, kind: 'tel' };
+    if (/^email:\/\//i.test(v))
+        return { href: `mailto:${v.slice(8)}`, kind: 'email' };
+    if (/^mailto:/i.test(v))
+        return { href: v, kind: 'email' };
+    if (/^tel:/i.test(v))
+        return { href: v, kind: 'tel' };
+    // Already carries a real scheme (http://, https://, ftp://, …) — keep it.
+    if (/^[a-z][a-z0-9+.-]*:\/\//i.test(v))
+        return { href: v, kind: 'web' };
+    if (EMAIL_RE.test(v))
+        return { href: `mailto:${v}`, kind: 'email' };
+    if (TEL_RE.test(v))
+        return { href: `tel:${v}`, kind: 'tel' };
+    return { href: `https://${v}`, kind: 'web' };
+}
+export function Link({ href, label, children, external, disabled, onClick, weight, style }) {
+    const resolved = href ? resolveLinkHref(href) : null;
+    const content = children ?? label ?? href ?? '';
+    const isExternal = external ?? resolved?.kind === 'web';
+    return (_jsx("a", { className: "oo-link", href: disabled ? undefined : resolved?.href, target: isExternal ? '_blank' : undefined, rel: isExternal ? 'noopener noreferrer' : undefined, "data-kind": resolved?.kind, "data-disabled": disabled || undefined, style: { ...weightStyle(weight), ...style }, onClick: (e) => {
+            if (disabled) {
+                e.preventDefault();
+                return;
+            }
+            onClick?.(e);
+        }, children: content }));
+}

package/dist/ui/navigation/Tabs.css

@@ -0,0 +1,39 @@
+.oo-tabs {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+}
+.oo-tabs__strip {
+  display: flex;
+  gap: 2px;
+  border-bottom: 1px solid var(--oo-color-border);
+}
+.oo-tabs__tab {
+  padding: var(--oo-spacing-xs) var(--oo-spacing-md);
+  border: none;
+  border-bottom: 2px solid transparent;
+  background: transparent;
+  color: var(--oo-color-muted);
+  cursor: pointer;
+  font-size: var(--oo-font-size-sm);
+  transition: color 0.327s, border-color 0.327s;
+}
+.oo-tabs__tab:hover {
+  background: none;
+  color: inherit;
+}
+.oo-tabs__tab[aria-selected='true'] {
+  color: inherit;
+  border-bottom-color: var(--oo-color-accent);
+}
+.oo-tabs__tab[disabled] {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+.oo-tabs__panel {
+  flex: 1;
+  min-height: 0;
+  padding: var(--oo-spacing-sm);
+  overflow: auto;
+}

package/dist/ui/navigation/Tabs.d.ts

@@ -0,0 +1,18 @@
+import { type CSSProperties, type ReactNode } from 'react';
+import './Tabs.css';
+export interface TabsTab {
+    key?: string;
+    title?: string;
+    child?: ReactNode;
+    label?: string;
+    content?: ReactNode;
+    disabled?: boolean;
+}
+export interface TabsProps {
+    tabs?: TabsTab[];
+    weight?: number;
+    value?: string;
+    defaultValue?: string;
+    style?: CSSProperties;
+}
+export declare function Tabs({ tabs, value, defaultValue, weight, style }: TabsProps): import("react").JSX.Element;

package/dist/ui/navigation/Tabs.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { useWriteBack } from '../../react/mount-context.js';
+import { weightStyle } from '../_utils.js';
+import './Tabs.css';
+function tabTitle(t) {
+    return t.title ?? t.label ?? '';
+}
+function tabChild(t) {
+    return t.child ?? t.content;
+}
+export function Tabs({ tabs = [], value, defaultValue, weight, style }) {
+    const writeValue = useWriteBack('value');
+    // Stable per-tab key: explicit `key`, else the index. Selection tracks this,
+    // NOT the (possibly translated) title — so a language switch keeps the tab.
+    const keys = tabs.map((t, i) => t.key ?? String(i));
+    const [internal, setInternal] = useState(value ?? defaultValue ?? keys[0]);
+    useEffect(() => {
+        if (value === undefined)
+            return;
+        setInternal((current) => (current === value ? current : value));
+    }, [value]);
+    function select(key) {
+        setInternal(key);
+        writeValue(key);
+    }
+    const activeIdx = [keys.indexOf(internal ?? ''), keys.indexOf(defaultValue ?? ''), 0].find((i) => i >= 0) ?? 0;
+    const active = tabs[activeIdx];
+    // Default `flex: 1` fills the surface; weightStyle wins when set.
+    const inlineStyle = {
+        // display: 'flex',
+        // flexDirection: 'column',
+        // minHeight: 0,
+        // flex: 1,
+        ...weightStyle(weight),
+        ...style,
+    };
+    return (_jsxs("div", { className: "oo-tabs", style: inlineStyle, children: [_jsx("div", { className: "oo-tabs__strip", role: "tablist", children: tabs.map((t, i) => {
+                    const title = tabTitle(t);
+                    return (_jsx("button", { className: "oo-tabs__tab", role: "tab", "aria-selected": t === active, disabled: t.disabled, onClick: () => select(keys[i]), style: {
+                        // padding: 'var(--oo-spacing-xs) var(--oo-spacing-md)',
+                        // fontSize: 'var(--oo-font-size-sm)',
+                        // border: 'none',
+                        // borderBottom:
+                        //   t === active
+                        //     ? '2px solid var(--oo-color-accent)'
+                        //     : '2px solid transparent',
+                        // background: 'transparent',
+                        // color: t === active ? 'inherit' : 'var(--oo-color-muted)',
+                        // cursor: t.disabled ? 'not-allowed' : 'pointer',
+                        // opacity: t.disabled ? 0.5 : 1,
+                        // font: 'inherit',
+                        }, children: title }, keys[i]));
+                }) }), _jsx("div", { role: "tabpanel", style: { flex: 1, minHeight: 0, overflow: 'auto' }, children: active ? tabChild(active) : null })] }));
+}

package/dist/ui/navigation/Toolbar.css

@@ -0,0 +1,25 @@
+/* Generic chrome strip: layout toolbars, panel headers, titlebar slots.
+ * Direction / alignment / gap come from data-attrs and inline props so the
+ * same class works for horizontal control rows AND vertical side rails. */
+.oo-toolbar {
+  display: flex;
+  align-items: center;
+  gap: var(--oo-spacing-sm);
+  padding: var(--oo-spacing-xs) var(--oo-spacing-sm);
+  border-bottom: 1px solid var(--oo-color-border);
+  background: var(--oo-color-surface);
+  color: var(--oo-color-fg);
+  font-size: var(--oo-font-size-sm);
+  flex: 0 0 auto;
+  min-height: var(--oo-toolbar-height, 32px);
+  user-select: none;
+}
+
+.oo-toolbar[data-direction='column'] {
+  flex-direction: column;
+  align-items: stretch;
+  border-bottom: none;
+  border-right: 1px solid var(--oo-color-border);
+  min-height: 0;
+  min-width: var(--oo-toolbar-height, 32px);
+}