@mythicalos/react-ui 0.1.2 → 0.2.0

package/dist/FileExplorer.d.ts

@@ -0,0 +1,62 @@
+import type { ReactNode } from "react";
+import { breadcrumbSegments, buildBreadcrumb, countFileRows, countLoadedFiles, deriveFileTreeRows, formatFileSize, formatRelativeTime, previewBodyMode, previewMeta, type DirState, type FilePreviewState, type FileScopeOption, type FileTreeMode, type FileTreeRootSpec, type FileTreeRow, type GitMark, type PreviewBadgeState } from "@mythicalos/ui-core/logic";
+export { breadcrumbSegments, buildBreadcrumb, countFileRows, countLoadedFiles, deriveFileTreeRows, formatFileSize, formatRelativeTime, previewBodyMode, previewMeta, type DirState, type FilePreviewState, type FileScopeOption, type FileTreeMode, type FileTreeRootSpec, type FileTreeRow, type GitMark, type PreviewBadgeState, };
+export interface FileScopePickerProps {
+    options: readonly FileScopeOption[];
+    activeKey: string;
+    mode: FileTreeMode;
+    open: boolean;
+    onToggle?: (next: boolean) => void;
+    onSelect?: (key: string) => void;
+    onDismiss?: () => void;
+    label?: string;
+}
+/** A plain disclosure of buttons — deliberately NOT an ARIA menu/listbox, whose roles would promise
+ *  arrow-key behavior this does not implement. */
+export declare function FileScopePicker(props: FileScopePickerProps): import("react").JSX.Element;
+export interface FileTreeProps {
+    mode: FileTreeMode;
+    roots: readonly FileTreeRootSpec[];
+    /** Directory listings keyed by `nodeId(rootKey, relPath)`. An absent key reads as "not fetched
+     *  yet" and draws a Loading… row, never an empty one. */
+    dirs: Readonly<Record<string, DirState>>;
+    expanded: ReadonlySet<string>;
+    selectedId?: string | null;
+    /** Git marks keyed by node id. An absent entry renders NO mark — never a fabricated clean. */
+    marks?: Readonly<Record<string, GitMark>>;
+    title?: string;
+    count?: number;
+    branch?: string;
+    scope?: ReactNode;
+    onToggleDir?: (node: {
+        rootKey: string;
+        relPath: string;
+        id: string;
+    }) => void;
+    onSelectFile?: (node: {
+        rootKey: string;
+        relPath: string;
+        id: string;
+        name: string;
+    }) => void;
+    className?: string;
+}
+export declare function FileTree(props: FileTreeProps): import("react").JSX.Element;
+export interface FilePreviewProps {
+    /** Render this only when a file IS selected; the no-selection placeholder belongs to the page. */
+    name: string;
+    /** The breadcrumb head — the breadcrumb ALWAYS includes the root. */
+    rootLabel: string;
+    relPath: string;
+    state: FilePreviewState;
+    /** `null` (the default) renders NO pill — never a fabricated "unchanged". */
+    badge?: PreviewBadgeState;
+    bytes?: number;
+    mtime?: number;
+    now?: number;
+    /** Absent ⇒ a `.md` file falls back to plain mono text rather than this component inventing a
+     *  renderer (or injecting raw HTML). */
+    renderMarkdown?: (text: string) => ReactNode;
+    className?: string;
+}
+export declare function FilePreview(props: FilePreviewProps): import("react").JSX.Element;

package/dist/FileExplorer.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { badgeClass, breadcrumbSegments, buildBreadcrumb, countFileRows, countLoadedFiles, deriveFileTreeRows, formatFileSize, formatRelativeTime, gitMarkClass, gitMarkLabel, previewBadge, previewBadgeClass, previewBodyMode, previewMeta, previewNoteClass, previewNoteText, scopeGlyph, SCOPE_CARET, scopeItemClass, } from "@mythicalos/ui-core/logic";
+export { breadcrumbSegments, buildBreadcrumb, countFileRows, countLoadedFiles, deriveFileTreeRows, formatFileSize, formatRelativeTime, previewBodyMode, previewMeta, };
+/** A plain disclosure of buttons — deliberately NOT an ARIA menu/listbox, whose roles would promise
+ *  arrow-key behavior this does not implement. */
+export function FileScopePicker(props) {
+    const { options, activeKey, mode, open, onToggle, onSelect, onDismiss, label } = props;
+    const active = options.find((o) => o.key === activeKey);
+    const text = label ?? active?.label ?? "";
+    const glyph = scopeGlyph(mode);
+    const selectable = options.length > 1;
+    return (_jsxs("div", { className: "my-files__scope", onKeyDown: (e) => {
+            if (e.key === "Escape" && open)
+                onDismiss?.();
+        }, children: [selectable ? (_jsxs("button", { type: "button", className: "my-files__scope-btn", "aria-expanded": open, onClick: () => onToggle?.(!open), children: [_jsx("span", { className: "my-files__scope-glyph", "aria-hidden": "true", children: glyph }), _jsx("span", { className: "my-files__scope-label", children: text }), _jsx("span", { className: "my-files__scope-caret", "aria-hidden": "true", children: SCOPE_CARET })] })) : (_jsxs("div", { className: "my-files__scope-static", children: [_jsx("span", { className: "my-files__scope-glyph", "aria-hidden": "true", children: glyph }), _jsx("span", { className: "my-files__scope-label", children: text })] })), open && selectable ? (_jsx("div", { className: "my-files__scope-menu", children: options.map((o) => (_jsxs("div", { children: [_jsxs("button", { type: "button", className: scopeItemClass(o.key === activeKey), "aria-current": o.key === activeKey, onClick: () => onSelect?.(o.key), children: [_jsx("span", { className: "my-files__scope-it-name", children: o.label }), _jsx("span", { className: "my-files__scope-it-count", children: o.count })] }), o.dividerAfter === true ? _jsx("div", { className: "my-files__scope-divider", "aria-hidden": "true" }) : null] }, o.key))) })) : null] }));
+}
+export function FileTree(props) {
+    const { mode, roots, dirs, expanded, selectedId = null, marks, title = "Files", count, branch, scope, onToggleDir, onSelectFile } = props;
+    const rows = deriveFileTreeRows({ mode, roots, dirs, expanded, selectedId, marks });
+    // the rendered-row count — provably what the operator sees (countLoadedFiles is a
+    // different, cache-wide number; see its doc)
+    const total = count ?? countFileRows(rows);
+    return (_jsxs("div", { className: props.className === undefined ? "my-files__rail" : `my-files__rail ${props.className}`, children: [_jsxs("div", { className: "my-files__hd", children: [_jsxs("div", { className: "my-files__ti", children: [_jsx("span", { children: title }), _jsxs("span", { className: "my-files__count", children: ["\u00B7 ", total] }), branch === undefined ? null : (_jsxs("span", { className: "my-files__branch", children: [_jsx("span", { className: "my-files__branch-dot", "aria-hidden": "true" }), branch] }))] }), scope] }), _jsx("div", { className: "my-files__tree", children: rows.map((row) => renderRow(row, onToggleDir, onSelectFile)) })] }));
+}
+function renderRow(row, onToggleDir, onSelectFile) {
+    if (row.type === "note") {
+        return (_jsx("div", { className: row.className, children: row.text }, row.id));
+    }
+    if (row.type === "dir") {
+        // The WHOLE ROW is the hit target — the chevron is the affordance, not a separate control.
+        return (_jsxs("button", { type: "button", className: row.className, "aria-expanded": row.open, onClick: () => onToggleDir?.({ rootKey: row.rootKey, relPath: row.relPath, id: row.id }), children: [_jsx("span", { className: "my-files__chev", "aria-hidden": "true", children: row.chevron }), _jsx("span", { className: "my-files__glyph", "aria-hidden": "true", children: row.glyph }), _jsx("span", { className: "my-files__name", children: row.name }), row.badges.map((b) => (_jsx("span", { className: badgeClass(b.tone), children: b.text }, b.text)))] }, row.id));
+    }
+    return (_jsxs("button", { type: "button", className: row.className, "aria-current": row.selected, onClick: () => onSelectFile?.({ rootKey: row.rootKey, relPath: row.relPath, id: row.id, name: row.name }), children: [_jsx("span", { className: "my-files__spacer", "aria-hidden": "true" }), _jsx("span", { className: "my-files__fglyph", "aria-hidden": "true", children: row.glyph }), _jsx("span", { className: "my-files__fname", children: row.name }), row.mark === null ? null : (
+            // role="img" so the aria-label IS the accessible name — a bare "M" would otherwise be
+            // announced as the opaque glyph rather than "modified".
+            _jsx("span", { className: gitMarkClass(row.mark), role: "img", title: gitMarkLabel(row.mark), "aria-label": gitMarkLabel(row.mark), children: row.mark }))] }, row.id));
+}
+export function FilePreview(props) {
+    const { name, rootLabel, relPath, state, badge = null, now, renderMarkdown } = props;
+    const meta = previewMeta(state, { bytes: props.bytes, mtime: props.mtime });
+    const pill = previewBadge(badge);
+    return (_jsxs("div", { className: props.className === undefined ? "my-files__prev" : `my-files__prev ${props.className}`, children: [_jsxs("div", { className: "my-files__prev-hd", children: [_jsxs("div", { className: "my-files__prev-main", children: [_jsx("div", { className: "my-files__crumb", children: buildBreadcrumb(rootLabel, relPath) }), _jsxs("div", { className: "my-files__name-row", children: [_jsx("b", { className: "my-files__prev-name", children: name }), pill === null ? null : _jsx("span", { className: previewBadgeClass(pill.tone), children: pill.text })] })] }), _jsxs("div", { className: "my-files__meta", children: [meta.bytes === undefined ? null : _jsx("span", { children: formatFileSize(meta.bytes) }), meta.mtime === undefined ? null : _jsxs("span", { children: ["modified ", formatRelativeTime(meta.mtime, now)] })] })] }), _jsx("div", { className: "my-files__prev-bd", children: previewBody(name, state, renderMarkdown) })] }));
+}
+/** The body for the current state. Every non-`text` branch is a note — including all four honest
+ *  states, each with its own distinct class and none styled as a failure. */
+function previewBody(name, state, renderMarkdown) {
+    // ONE decision, made in ui-core — this binding never re-derives it.
+    const mode = previewBodyMode(name, state, renderMarkdown !== undefined);
+    if (mode === "note")
+        return _jsx("div", { className: previewNoteClass(state) ?? "", children: previewNoteText(state) });
+    // "note" covers every non-text state, so the text branch is what remains
+    const text = state.text;
+    if (mode === "markdown")
+        return _jsx("div", { className: "my-files__md", children: renderMarkdown(text) });
+    return _jsx("pre", { className: "my-files__pre", children: text });
+}

package/dist/GitChip.d.ts

@@ -0,0 +1,17 @@
+import { GIT_BRANCH_GLYPH, GIT_BRANCH_UNKNOWN, GIT_CHIP_PARTS, GIT_CLEAN_LABEL, GIT_DETACHED_LABEL, GIT_LOADING_NOTE, GIT_STALE_LABEL, GIT_STALE_TITLE, GIT_UNAVAILABLE_NOTE, gitBranchLabel, gitChipClass, gitChipNote, gitFlagClass, gitFlags, hasGitStatus, type GitFlag, type GitFlagTone, type GitStatus } from "@mythicalos/ui-core/logic";
+export { gitBranchLabel, gitChipClass, gitChipNote, gitFlagClass, gitFlags, hasGitStatus, GIT_BRANCH_GLYPH, GIT_BRANCH_UNKNOWN, GIT_CHIP_PARTS, GIT_CLEAN_LABEL, GIT_DETACHED_LABEL, GIT_LOADING_NOTE, GIT_STALE_LABEL, GIT_STALE_TITLE, GIT_UNAVAILABLE_NOTE, type GitFlag, type GitFlagTone, type GitStatus, };
+export interface GitChipProps {
+    /** The reported status. Absent — `undefined` OR `null`, so a "no data yet" slot can be passed
+     *  straight through — ⇒ the honest unavailable arm, never a fabricated clean tree. */
+    status?: GitStatus | null;
+    /** Human copy for why there is no status. The product maps its own reason codes to this
+     *  sentence; the atom carries no reason vocabulary of its own. */
+    unavailableNote?: string;
+    /** The first read has not returned yet — only used when there is no `status` and no note. */
+    loading?: boolean;
+    /** The shown status is RETAINED while the live read is failing: stale, not current. Flagged on
+     *  both arms. */
+    stale?: boolean;
+    className?: string;
+}
+export declare function GitChip(props: GitChipProps): import("react").JSX.Element;

package/dist/GitChip.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// @mythicalos/react-ui — the git status chip (ds/components-git-chip.html): a bordered inline
+// mono chip carrying `⎇ <branch>` and honest counter flags (warn-soft behind/uncommitted,
+// error-soft unpushed, ok-soft clean).
+//
+// React twin of packages/preact-ui/src/GitChip.tsx. The honesty contract lives in
+// `@mythicalos/ui-core`'s `gitFlags`/`gitBranchLabel`: an absent status renders the unavailable
+// arm, `null` behind/unpushed OMIT their flag (never "0 behind"), a `null` branch reads
+// "detached HEAD", and an unreported status is never collapsed into a green "clean ✓". The product
+// supplies the unavailable SENTENCE; the atom carries no reason vocabulary.
+// Preact→React prop delta: `class` → `className`.
+import { GIT_BRANCH_GLYPH, GIT_BRANCH_UNKNOWN, GIT_CHIP_PARTS, GIT_CLEAN_LABEL, GIT_DETACHED_LABEL, GIT_LOADING_NOTE, GIT_STALE_LABEL, GIT_STALE_TITLE, GIT_UNAVAILABLE_NOTE, gitBranchLabel, gitChipClass, gitChipNote, gitFlagClass, gitFlags, hasGitStatus, } from "@mythicalos/ui-core/logic";
+export { gitBranchLabel, gitChipClass, gitChipNote, gitFlagClass, gitFlags, hasGitStatus, GIT_BRANCH_GLYPH, GIT_BRANCH_UNKNOWN, GIT_CHIP_PARTS, GIT_CLEAN_LABEL, GIT_DETACHED_LABEL, GIT_LOADING_NOTE, GIT_STALE_LABEL, GIT_STALE_TITLE, GIT_UNAVAILABLE_NOTE, };
+export function GitChip(props) {
+    const { status, stale = false, className: cls = "" } = props;
+    const staleMark = stale ? (_jsx("span", { className: GIT_CHIP_PARTS.stale, title: GIT_STALE_TITLE, children: GIT_STALE_LABEL })) : null;
+    if (hasGitStatus(status)) {
+        const flags = gitFlags(status);
+        return (_jsxs("span", { className: `${gitChipClass({ stale })} ${cls}`, children: [_jsxs("span", { className: GIT_CHIP_PARTS.branch, children: [GIT_BRANCH_GLYPH, " ", gitBranchLabel(status.branch)] }), flags.length > 0 ? (_jsx("span", { className: GIT_CHIP_PARTS.flags, children: flags.map((f) => (_jsx("span", { className: gitFlagClass(f.tone), children: f.label }, f.label))) })) : null, staleMark] }));
+    }
+    const note = gitChipNote({ unavailableNote: props.unavailableNote, loading: props.loading });
+    return (_jsxs("span", { className: `${gitChipClass({ unavailable: true, stale })} ${cls}`, children: [_jsxs("span", { className: GIT_CHIP_PARTS.branch, title: note, children: [GIT_BRANCH_GLYPH, " ", GIT_BRANCH_UNKNOWN] }), _jsx("span", { className: GIT_CHIP_PARTS.note, children: note }), staleMark] }));
+}

package/dist/Popover.d.ts

@@ -0,0 +1,48 @@
+import type { ReactNode, Ref } from "react";
+import { type PopoverIds, type PopoverItem, type PopoverPosition } from "@mythicalos/ui-core/logic";
+export { POPOVER_CARET, POPOVER_CHECK, POPOVER_CLASS, POPOVER_EMPTY_VALUE, popoverItemClass, popoverPanelClass, popoverTriggerClass, popoverTriggerText, resolvePopoverPosition, type PopoverItem, type PopoverPosition, } from "@mythicalos/ui-core/logic";
+export interface PopoverProps {
+    /** The menu rows, in display order. Exactly one may carry `selected`. */
+    items: PopoverItem[];
+    /** Picking a row: closes the popover, returns focus to the trigger, then calls this. */
+    onSelect: (key: string, item: PopoverItem) => void;
+    /** Static prefix on the trigger, e.g. `"review lane:"`. */
+    label?: string;
+    /** Trigger value when nothing is selected (default: the em-dash placeholder). */
+    placeholder?: string;
+    /** Optional panel heading. */
+    title?: string;
+    /** Optional second heading line — the honest framing/caveat line. */
+    caption?: string;
+    /** Optional content below a divider (e.g. a "Manage projects →" action). Rows in here are the
+     * caller's own elements, and the arrow/Home/End roving deliberately does NOT reach them — a
+     * footer input keeps its own caret keys. Escape still closes from inside the footer. */
+    footer?: ReactNode;
+    disabled?: boolean;
+    /** Base for the trigger/panel id pair. Defaults to a generated one. */
+    id?: string;
+    /** Longer description for the trigger (native tooltip). Not the accessible NAME — the trigger's
+     * visible label + value already provide that. */
+    triggerTitle?: string;
+    onOpenChange?: (open: boolean) => void;
+}
+export interface PopoverPanelProps {
+    ids: PopoverIds;
+    pos: PopoverPosition;
+    items: PopoverItem[];
+    onPick: (item: PopoverItem) => void;
+    title?: string;
+    caption?: string;
+    footer?: ReactNode;
+    panelRef?: Ref<HTMLDivElement>;
+}
+/**
+ * The OPEN panel, deliberately hook-free — the React twin of the Preact sibling's `PopoverPanel`,
+ * kept for the identical reason: a server-render test can exercise the panel markup (and a row's
+ * REAL onClick closure off the returned element tree) without a DOM. Exported from this module for
+ * tests; NOT part of the package barrel. `panelRef` rather than `ref` so both bindings expose the
+ * same prop name.
+ */
+export declare function PopoverPanel(props: PopoverPanelProps): import("react").JSX.Element;
+/** A single-select dropdown popover anchored to its own chip trigger. */
+export declare function Popover(props: PopoverProps): import("react").JSX.Element;

package/dist/Popover.js

@@ -0,0 +1,165 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// @mythicalos/react-ui — the dropdown popover (ds/components-popover, registry row `popover` v1).
+//
+// React twin of packages/preact-ui/src/Popover.tsx: same props, same markup, same behaviour. Like
+// its sibling this file is WIRING ONLY — class strings, the viewport-aware flip/align geometry,
+// the keyboard grammar, the roving-focus index arithmetic, the trigger's text composition and the
+// ARIA maps all come from `@mythicalos/ui-core`, so the two bindings cannot drift.
+//
+// Preact→React notes (the only deltas, none of them behavioural):
+//  · `class` → `className`, `ComponentChildren` → `ReactNode`, `preact/hooks` → `react`.
+//  · The measurement effect runs through an isomorphic layout-effect alias. React logs a warning
+//    for `useLayoutEffect` during server rendering; Preact does not. The alias keeps the
+//    before-paint measurement in the browser (so the panel never flashes at the wrong end of the
+//    trigger) without that SSR warning.
+//  · React's `useId` produces ids containing `:`. They are only ever used as attribute VALUES
+//    (`id` / `aria-controls` / `aria-labelledby`), never inside a CSS selector, so they are safe.
+//
+// Documented residual (identical to the sibling): placement is re-measured on open, on resize and
+// on scroll, but not on a mutation that resizes the open panel itself (no ResizeObserver).
+//
+// Consumer contract (design card, verbatim): "Ancestors must never clip it."
+import { useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import { POPOVER_CARET, POPOVER_CHECK, POPOVER_CLASS, POPOVER_DECORATIVE_ARIA, POPOVER_DEFAULT_POSITION, POPOVER_SEPARATOR_ARIA, edgePopoverIndex, initialPopoverIndex, popoverHasSlotContent, popoverIds, popoverItemAria, popoverItemClass, popoverAppliesToFocus, popoverKeyHandled, popoverMenuAria, popoverPanelAria, popoverPanelClass, popoverPanelKeyAction, popoverTriggerAria, popoverTriggerClass, popoverTriggerKeyAction, popoverTriggerText, resolvePopoverIndex, resolvePopoverPosition, samePopoverPosition, } from "@mythicalos/ui-core/logic";
+export { POPOVER_CARET, POPOVER_CHECK, POPOVER_CLASS, POPOVER_EMPTY_VALUE, popoverItemClass, popoverPanelClass, popoverTriggerClass, popoverTriggerText, resolvePopoverPosition, } from "@mythicalos/ui-core/logic";
+/** `useLayoutEffect` in the browser, `useEffect` on the server — see the header note. */
+const useIsomorphicLayoutEffect = typeof document === "undefined" ? useEffect : useLayoutEffect;
+/**
+ * The OPEN panel, deliberately hook-free — the React twin of the Preact sibling's `PopoverPanel`,
+ * kept for the identical reason: a server-render test can exercise the panel markup (and a row's
+ * REAL onClick closure off the returned element tree) without a DOM. Exported from this module for
+ * tests; NOT part of the package barrel. `panelRef` rather than `ref` so both bindings expose the
+ * same prop name.
+ */
+export function PopoverPanel(props) {
+    return (_jsxs("div", { ref: props.panelRef, className: popoverPanelClass(props.pos), tabIndex: -1, ...popoverPanelAria(props.ids), children: [popoverHasSlotContent(props.title) || popoverHasSlotContent(props.caption) ? (_jsxs("div", { className: POPOVER_CLASS.head, children: [popoverHasSlotContent(props.title) ? (_jsx("span", { id: props.ids.title, className: POPOVER_CLASS.title, children: props.title })) : null, popoverHasSlotContent(props.caption) ? _jsx("span", { className: POPOVER_CLASS.caption, children: props.caption }) : null] })) : null, _jsx("div", { className: POPOVER_CLASS.menu, ...popoverMenuAria(props.ids, popoverHasSlotContent(props.title)), children: props.items.map((item) => (_jsxs("button", { type: "button", "data-pop-item": "", className: popoverItemClass(item), disabled: item.disabled, ...popoverItemAria(item), onClick: () => {
+                        if (item.disabled)
+                            return; // belt-and-braces: a native disabled button fires no click
+                        props.onPick(item);
+                    }, children: [_jsx("span", { className: POPOVER_CLASS.itemLabel, children: item.label }), _jsx("span", { className: POPOVER_CLASS.itemCheck, ...POPOVER_DECORATIVE_ARIA, children: item.selected ? POPOVER_CHECK : "" })] }, item.key))) }), popoverHasSlotContent(props.footer) ? (_jsxs(_Fragment, { children: [_jsx("div", { className: POPOVER_CLASS.divider, ...POPOVER_SEPARATOR_ARIA }), _jsx("div", { className: POPOVER_CLASS.foot, children: props.footer })] })) : null] }));
+}
+/** A single-select dropdown popover anchored to its own chip trigger. */
+export function Popover(props) {
+    const { items, disabled = false } = props;
+    const generatedId = useId();
+    const ids = popoverIds(props.id ?? generatedId);
+    const [open, setOpen] = useState(false);
+    const [pos, setPos] = useState(POPOVER_DEFAULT_POSITION);
+    const anchorRef = useRef(null);
+    const triggerRef = useRef(null);
+    const panelRef = useRef(null);
+    /** Row to focus on the next open (-1 ⇒ let `initialPopoverIndex` decide). */
+    const pendingFocus = useRef(-1);
+    const itemNodes = () => Array.from(panelRef.current?.querySelectorAll("[data-pop-item]") ?? []);
+    const focusRow = (i) => {
+        // preventScroll: a bare focus() asks the browser to reveal the row by scrolling every
+        // scrollable ancestor — which yanks the page out from under an open popover.
+        itemNodes()[i]?.focus({ preventScroll: true });
+    };
+    const setOpenState = (next) => {
+        setOpen(next);
+        props.onOpenChange?.(next);
+    };
+    const openAt = (index) => {
+        if (disabled)
+            return;
+        pendingFocus.current = index;
+        setPos(POPOVER_DEFAULT_POSITION); // re-measured below; never reuse a stale flip
+        setOpenState(true);
+    };
+    const closeToTrigger = () => {
+        setOpenState(false);
+        triggerRef.current?.focus({ preventScroll: true });
+    };
+    // Placement: measure once the panel is in the DOM but before paint, so it never flashes at the
+    // wrong end of the trigger. Guarded by samePopoverPosition so measure → setState can't loop.
+    useIsomorphicLayoutEffect(() => {
+        if (!open)
+            return;
+        const measure = () => {
+            const trigger = triggerRef.current;
+            const panel = panelRef.current;
+            if (!trigger || !panel)
+                return;
+            const next = resolvePopoverPosition(trigger.getBoundingClientRect(), { width: panel.offsetWidth, height: panel.offsetHeight }, { width: document.documentElement.clientWidth, height: document.documentElement.clientHeight });
+            setPos((prev) => (samePopoverPosition(prev, next) ? prev : next));
+        };
+        measure();
+        window.addEventListener("resize", measure);
+        // capture: scroll does not bubble, so this is the only way to see a scrollable ANCESTOR move
+        // the anchor and invalidate the flip decision.
+        document.addEventListener("scroll", measure, { capture: true, passive: true });
+        return () => {
+            window.removeEventListener("resize", measure);
+            document.removeEventListener("scroll", measure, { capture: true });
+        };
+    }, [open, items.length]);
+    // a11y: on open, focus moves INTO the menu the role promises — the selected row, else the first
+    // enabled one, else the panel itself (an empty or all-disabled list), never left on the trigger.
+    useEffect(() => {
+        if (!open)
+            return;
+        const requested = pendingFocus.current;
+        pendingFocus.current = -1;
+        const index = requested >= 0 ? requested : initialPopoverIndex(items);
+        if (index >= 0)
+            focusRow(index);
+        else
+            panelRef.current?.focus({ preventScroll: true });
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- `items` is read at open time only
+    }, [open]);
+    // Outside pointerdown closes. Focus is NOT pulled back to the trigger here: the pointer is
+    // already establishing focus somewhere else, and stealing it back would fight the user.
+    useEffect(() => {
+        if (!open)
+            return;
+        const onDown = (e) => {
+            if (anchorRef.current && !anchorRef.current.contains(e.target))
+                setOpenState(false);
+        };
+        document.addEventListener("pointerdown", onDown, true);
+        return () => document.removeEventListener("pointerdown", onDown, true);
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- setOpenState is stable enough here
+    }, [open]);
+    // One handler on the anchor catches keys from the trigger AND the panel (both are inside it).
+    // The anchor is a plain <div>, but it is never itself focusable or a tab stop — every key this
+    // sees has bubbled up from a real <button>, so this is delegation, not a keyboard handler bolted
+    // onto a non-interactive element. Enter/Space are absent by design: the trigger is a real
+    // <button>, so the browser already synthesises a click from them.
+    const onKeyDown = (e) => {
+        if (disabled)
+            return;
+        if (!open) {
+            const action = popoverTriggerKeyAction(e.key);
+            if (action === null)
+                return;
+            e.preventDefault();
+            openAt(edgePopoverIndex(items, action === "open-first" ? 1 : -1));
+            return;
+        }
+        const action = popoverPanelKeyAction(e.key);
+        // Roving keys apply only on a row (or the panel fallback); the caller's footer content keeps
+        // its own arrows/Home/End. Escape and Tab still work from anywhere inside the popover.
+        const focused = itemNodes().indexOf(document.activeElement);
+        const onRovingSurface = focused >= 0 || document.activeElement === panelRef.current;
+        if (!popoverAppliesToFocus(action, onRovingSurface))
+            return;
+        // Tab ("dismiss") must keep its native behaviour or the popover is a focus trap; moving focus
+        // to the trigger first makes the browser continue the tab sequence from AFTER the trigger,
+        // which is where tabbing out of a menu belongs.
+        if (popoverKeyHandled(action))
+            e.preventDefault();
+        if (action === "close" || action === "dismiss") {
+            closeToTrigger();
+            return;
+        }
+        const next = resolvePopoverIndex(action, items, focused);
+        if (next >= 0)
+            focusRow(next);
+    };
+    const text = popoverTriggerText(items, { label: props.label, placeholder: props.placeholder });
+    return (_jsxs("div", { className: POPOVER_CLASS.anchor, ref: anchorRef, onKeyDown: onKeyDown, children: [_jsxs("button", { ref: triggerRef, type: "button", className: popoverTriggerClass({ open, disabled }), disabled: disabled, title: props.triggerTitle, ...popoverTriggerAria(open, ids), onClick: () => (open ? closeToTrigger() : openAt(-1)), children: [text.label !== null ? _jsx("span", { className: POPOVER_CLASS.triggerLabel, children: text.label }) : null, _jsx("span", { className: POPOVER_CLASS.triggerValue, children: text.value }), _jsx("span", { className: POPOVER_CLASS.triggerCaret, ...POPOVER_DECORATIVE_ARIA, children: POPOVER_CARET })] }), open ? (_jsx(PopoverPanel, { panelRef: panelRef, ids: ids, pos: pos, items: items, title: props.title, caption: props.caption, footer: props.footer, onPick: (item) => {
+                    closeToTrigger(); // a11y — selecting returns focus to the trigger, never to <body>
+                    props.onSelect(item.key, item);
+                } })) : null] }));
+}

package/dist/QueuePanel.d.ts

@@ -0,0 +1,37 @@
+import { type QueueItem, type QueueSource, type QueueUnavailableReason } from "@mythicalos/ui-core/logic";
+export { QUEUE_EMPTY_COPY, QUEUE_LOADING_COPY, QUEUE_STALE_COPY, QUEUE_UNAVAILABLE_COPY, canCancelRow, cancelReducer, queueBadgeClass, queueBadgeLabel, queueRowClass, queueView, shouldDisarmCancel, unavailableText, type CancelEvent, type CancelState, type QueueItem, type QueueItemStatus, type QueueSource, type QueueUnavailableReason, type QueueView, } from "@mythicalos/ui-core/logic";
+export interface QueueRowProps {
+    item: QueueItem;
+    /** The row is showing its two-step confirm instead of its normal presentation. */
+    armed?: boolean;
+    /** Whether the cancel affordance may exist at all — combined with the status by ui-core. */
+    canCancel?: boolean;
+    onArm?(): void;
+    onConfirm?(): void;
+    onDisarm?(): void;
+}
+/**
+ * One queue record. The registry atom — usable standalone, or through `QueuePanel`.
+ *
+ * INVARIANT 4 is enforced HERE, not only by the panel: `armed` is honored only when the record is
+ * genuinely cancellable (`canCancelRow`). A caller that arms a `leased`/`delivered`/`canceled` row,
+ * or arms a row whose cancellability was revoked, gets the ordinary row back — never a live
+ * "Cancel it" button for something that cannot be cancelled. That also covers the render between a
+ * revocation and the panel's disarming effect.
+ */
+export declare function QueueRow(props: QueueRowProps): import("react").JSX.Element;
+export interface QueuePanelProps {
+    source: QueueSource;
+    /** Whether cancelling is possible at all right now (e.g. the viewer owns the queue). */
+    canCancel?: boolean;
+    onCancel?(id: string): void;
+    /** Changing this clears any pending confirm (e.g. the selected target changed). */
+    resetKey?: string;
+    /**
+     * Extra detail per unavailable reason, APPENDED to this package's own sentence — never
+     * substituted for it. Two reasons therefore always render different copy, whatever the caller
+     * supplies (see ui-core's `unavailableText`).
+     */
+    unavailableDetail?: Partial<Record<QueueUnavailableReason, string>>;
+}
+export declare function QueuePanel(props: QueuePanelProps): import("react").JSX.Element;

package/dist/QueuePanel.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// @mythicalos/react-ui — the delivery queue (ds/components-terminal, spec v2). React twin of
+// packages/preact-ui/src/QueuePanel.tsx. `QueueRow` is the registry atom; `QueuePanel` is the list
+// that carries the source→view honesty around it.
+//
+// Thin binding: render + wiring only. The source resolution, every copy string, the row/badge class
+// derivation, and the two-step cancel state machine all come from `@mythicalos/ui-core`.
+//
+// Honesty (binding, inherited from ui-core): the empty copy is CAPABILITY-NEUTRAL and renders ONLY
+// on `ok` + zero items — never an operational-emptiness or store-existence claim, and never the
+// design card's "queue empty — deliveries land here by class (ASAP interrupts · ON-DONE waits)";
+// `loading` never renders empty; the three unavailable reasons render DISTINCTLY; `stale` is its own
+// state, flagged as last-known data with no retry claim. The cancel affordance exists ONLY on
+// `queued` records, only when the caller says the record is cancellable, and only while the
+// source is FRESH — a stale (last-known) list carries no cancel controls at all.
+import { useEffect, useReducer } from "react";
+import { QUEUE_CANCEL_ASK, QUEUE_CANCEL_LABEL, QUEUE_CANCEL_NO, QUEUE_CANCEL_YES, QUEUE_CLASSES, canCancelRow, cancelReducer, queueBadgeClass, queueBadgeLabel, queueRowClass, queueStatusLabel, queueView, shouldDisarmCancel, } from "@mythicalos/ui-core/logic";
+export { QUEUE_EMPTY_COPY, QUEUE_LOADING_COPY, QUEUE_STALE_COPY, QUEUE_UNAVAILABLE_COPY, canCancelRow, cancelReducer, queueBadgeClass, queueBadgeLabel, queueRowClass, queueView, shouldDisarmCancel, unavailableText, } from "@mythicalos/ui-core/logic";
+/**
+ * One queue record. The registry atom — usable standalone, or through `QueuePanel`.
+ *
+ * INVARIANT 4 is enforced HERE, not only by the panel: `armed` is honored only when the record is
+ * genuinely cancellable (`canCancelRow`). A caller that arms a `leased`/`delivered`/`canceled` row,
+ * or arms a row whose cancellability was revoked, gets the ordinary row back — never a live
+ * "Cancel it" button for something that cannot be cancelled. That also covers the render between a
+ * revocation and the panel's disarming effect.
+ */
+export function QueueRow(props) {
+    const { item } = props;
+    const cancellable = canCancelRow(item.status, !!props.canCancel);
+    const badge = _jsx("span", { className: queueBadgeClass(item.cls), children: queueBadgeLabel(item.cls) });
+    if (props.armed && cancellable) {
+        return (_jsxs("div", { className: queueRowClass(item.status, true), children: [badge, _jsx("span", { className: QUEUE_CLASSES.ask, children: QUEUE_CANCEL_ASK }), _jsxs("span", { className: QUEUE_CLASSES.actions, children: [_jsx("button", { type: "button", className: QUEUE_CLASSES.confirmYes, onClick: props.onConfirm, children: QUEUE_CANCEL_YES }), _jsx("button", { type: "button", className: QUEUE_CLASSES.confirmNo, onClick: props.onDisarm, children: QUEUE_CANCEL_NO })] })] }));
+    }
+    return (_jsxs("div", { className: queueRowClass(item.status, false), children: [badge, _jsx("span", { className: QUEUE_CLASSES.rowBody, children: item.body }), _jsx("span", { className: QUEUE_CLASSES.rowStatus, children: queueStatusLabel(item.status) }), cancellable ? (_jsx("button", { type: "button", className: QUEUE_CLASSES.cancel, onClick: props.onArm, children: QUEUE_CANCEL_LABEL })) : null] }));
+}
+export function QueuePanel(props) {
+    const { source } = props;
+    const canCancel = !!props.canCancel;
+    const [cancel, dispatch] = useReducer(cancelReducer, { armedId: null });
+    const { resetKey, onCancel } = props;
+    // A changed target clears any pending ask.
+    useEffect(() => {
+        dispatch({ type: "disarm" });
+    }, [resetKey]);
+    // An armed confirm must never outlive its cancelability: ownership loss, or the armed row leaving
+    // `queued` in the CURRENT source (leased/delivered/canceled/vanished/unavailable), force-disarms.
+    const mustDisarm = shouldDisarmCancel(cancel.armedId, canCancel, source);
+    useEffect(() => {
+        if (mustDisarm)
+            dispatch({ type: "disarm" });
+    }, [mustDisarm]);
+    useEffect(() => {
+        if (cancel.armedId === null)
+            return;
+        const onKey = (e) => {
+            if (e.key === "Escape")
+                dispatch({ type: "disarm" });
+        };
+        window.addEventListener("keydown", onKey);
+        return () => window.removeEventListener("keydown", onKey);
+    }, [cancel.armedId]);
+    const view = queueView(source, props.unavailableDetail);
+    return (_jsxs("div", { className: QUEUE_CLASSES.panel, children: [view.kind === "state" ? _jsx("div", { className: QUEUE_CLASSES.state, children: view.copy }) : null, view.kind === "empty" ? _jsx("div", { className: QUEUE_CLASSES.empty, children: view.copy }) : null, view.kind === "list" ? (_jsxs("div", { className: QUEUE_CLASSES.list, children: [view.staleCopy !== null ? _jsx("div", { className: QUEUE_CLASSES.stale, children: view.staleCopy }) : null, view.items.map((item) => {
+                        // A STALE list is last-known data, so no row in it may carry a cancel affordance: the
+                        // row's real status is unknown, and offering a cancel would contradict the banner right
+                        // above it. `view.fresh` is ui-core's freshness verdict, not a local guess.
+                        const rowCanCancel = canCancel && view.fresh;
+                        return (_jsx(QueueRow, { item: item, canCancel: rowCanCancel, armed: cancel.armedId === item.id, onArm: () => dispatch({ type: "arm", id: item.id }), onConfirm: () => {
+                                // Re-checked at the moment of confirm: the intent only fires if the row is STILL
+                                // fresh AND cancellable — never a stale-arm cancel.
+                                if (canCancelRow(item.status, rowCanCancel))
+                                    onCancel?.(item.id);
+                                dispatch({ type: "confirm" });
+                            }, onDisarm: () => dispatch({ type: "disarm" }) }, item.id));
+                    })] })) : null] }));
+}

package/dist/SaveBar.d.ts

@@ -0,0 +1,18 @@
+import type { ReactNode } from "react";
+import { SAVE_BAR_DISCARD_LABEL, SAVE_BAR_SAVE_LABEL, SAVE_BAR_PARTS, SAVE_BAR_SEP, saveBarClass, saveBarDirty, saveBarNote, type SaveBarNote } from "@mythicalos/ui-core/logic";
+export { saveBarNote, saveBarDirty, saveBarClass, SAVE_BAR_PARTS, SAVE_BAR_SEP, SAVE_BAR_DISCARD_LABEL, SAVE_BAR_SAVE_LABEL, type SaveBarNote, };
+export interface SaveBarProps {
+    /** Human labels of the dirty fields. Empty ⇒ the bar does not render. */
+    changed: readonly string[];
+    /** A save is in flight: the primary goes loading + inert. */
+    saving?: boolean;
+    /** Card copy is "Save & apply"; override per surface. */
+    saveLabel?: string;
+    discardLabel?: string;
+    onDiscard: () => void;
+    onSave: () => void;
+    /** Extra content rendered between the note and the actions (e.g. a validation hint). */
+    children?: ReactNode;
+    className?: string;
+}
+export declare function SaveBar(props: SaveBarProps): import("react").JSX.Element | null;

package/dist/SaveBar.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SAVE_BAR_DISCARD_LABEL, SAVE_BAR_SAVE_LABEL, SAVE_BAR_PARTS, SAVE_BAR_SEP, saveBarClass, saveBarDirty, saveBarNote, } from "@mythicalos/ui-core/logic";
+import { Button } from "./Button.js";
+export { saveBarNote, saveBarDirty, saveBarClass, SAVE_BAR_PARTS, SAVE_BAR_SEP, SAVE_BAR_DISCARD_LABEL, SAVE_BAR_SAVE_LABEL, };
+export function SaveBar(props) {
+    const { changed, saving = false, className: cls = "" } = props;
+    const note = saveBarNote(changed);
+    if (note.count === 0)
+        return null;
+    return (_jsxs("div", { className: `${saveBarClass()} ${cls}`, children: [_jsxs("span", { className: SAVE_BAR_PARTS.note, children: [_jsx("b", { className: SAVE_BAR_PARTS.count, children: note.countLabel }), SAVE_BAR_SEP, note.detail] }), props.children, _jsxs("span", { className: SAVE_BAR_PARTS.actions, children: [_jsx(Button, { variant: "sec", onClick: props.onDiscard, children: props.discardLabel ?? SAVE_BAR_DISCARD_LABEL }), _jsx(Button, { variant: "pri", loading: saving, onClick: props.onSave, children: props.saveLabel ?? SAVE_BAR_SAVE_LABEL })] })] }));
+}

package/dist/SendBar.d.ts

@@ -0,0 +1,24 @@
+import { type DeliveryClass } from "@mythicalos/ui-core/logic";
+export { DEFAULT_DELIVERY_CLASS, DELIVERY_CLASSES, DELIVERY_HINT, SEND_DISABLED_FALLBACK, SEND_PLACEHOLDER, canSend, clearDraftOnSend, deliveryClassLabel, keyAction, resolveSend, sendPlaceholder, showDeliveryHint, type DeliveryClass, type KeyAction, } from "@mythicalos/ui-core/logic";
+export interface SendBarProps {
+    /** Initial selection. A manual pick then wins — a later prop change never clobbers it. */
+    defaultClass?: DeliveryClass;
+    /** A send is in flight: the send button is inert but the field stays editable. */
+    busy?: boolean;
+    disabled?: boolean;
+    /** The honest reason the bar is unusable — surfaced as the placeholder. */
+    disabledReason?: string;
+    /** A persistent notice rendered below the bar (e.g. a pending stop). */
+    notice?: string;
+    /** Carried into the enabled placeholder: `Message {name}… (⏎ send · ⇧⏎ newline)`. */
+    targetName?: string;
+    /** Resolve `true` on success; the draft clears only then (text survives failures). */
+    onSend(cls: DeliveryClass, body: string): boolean | Promise<boolean>;
+    /**
+     * Called when `onSend` REJECTS. The rejection is treated as a failed send (nothing delivered, the
+     * draft kept) rather than escaping as an unhandled rejection; this is how a caller still observes
+     * it. Omitting it does not hide a success — only a resolved `true` ever counts as sent.
+     */
+    onSendError?(error: unknown): void;
+}
+export declare function SendBar(props: SendBarProps): import("react").JSX.Element;

package/dist/SendBar.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// @mythicalos/react-ui — the delivery send bar (ds/components-terminal, spec v2). React twin of
+// packages/preact-ui/src/SendBar.tsx. Holds the LOCAL draft + class selection and fires
+// `onSend(cls, body)`; the caller owns the delivery call.
+//
+// Thin binding: render + wiring only. The placeholder composition, the send predicate, the
+// draft-clear rule, the keyboard semantics and the hint all come from `@mythicalos/ui-core`.
+//
+// Honesty (binding, inherited from ui-core): the per-class hint is
+// `ASAP takes the first turn gap · ON-DONE waits for full idle.` — the design card's older
+// "ASAP interrupts" wording is FALSE (delivery always waits for a turn boundary) and must never be
+// reintroduced. The hint renders ONLY where the controls are usable; a disabled bar surfaces just
+// the caller's truthful reason.
+//
+// Keyboard: Enter=send, Shift/Alt-Enter=newline, IME composition suppressed (`keyAction`).
+import { useRef, useState } from "react";
+import { DEFAULT_DELIVERY_CLASS, DELIVERY_CLASSES, DELIVERY_HINT, SENDBAR_CLASSES, SEND_BUTTON_LABEL, canSend, clearDraftOnSend, deliveryClassButtonClass, deliveryClassLabel, keyAction, makeSendGate, resolveSend, sendBarClass, sendPlaceholder, showDeliveryHint, } from "@mythicalos/ui-core/logic";
+export { DEFAULT_DELIVERY_CLASS, DELIVERY_CLASSES, DELIVERY_HINT, SEND_DISABLED_FALLBACK, SEND_PLACEHOLDER, canSend, clearDraftOnSend, deliveryClassLabel, keyAction, resolveSend, sendPlaceholder, showDeliveryHint, } from "@mythicalos/ui-core/logic";
+export function SendBar(props) {
+    const disabled = !!props.disabled;
+    const busy = !!props.busy;
+    const [cls, setCls] = useState(props.defaultClass ?? DEFAULT_DELIVERY_CLASS);
+    const [text, setText] = useState("");
+    // Single-flight: `busy` covers a caller that tracks the request itself, but `onSend` may be async
+    // and a caller that flips `busy` a tick later (or never) would let two clicks — or a click racing
+    // an Enter — deliver the same message twice. The gate is synchronous, so the second attempt is
+    // refused before any state update lands; `sending` only exists to re-render the disabled button.
+    const gate = useRef(makeSendGate());
+    const [sending, setSending] = useState(false);
+    const locked = busy || sending;
+    const doSend = async () => {
+        if (!canSend(text, disabled, locked))
+            return;
+        if (!gate.current.tryAcquire())
+            return;
+        setSending(true);
+        const submitted = text;
+        try {
+            // a REJECTED onSend resolves to `false` here (a failed send) instead of escaping the handler
+            // as an unhandled rejection; the caller still sees it through `onSendError`
+            const sent = await resolveSend(() => props.onSend(cls, submitted), props.onSendError);
+            // Functional update: compared against the LIVE draft at resolve time, not this closure's
+            // snapshot, so text typed while the request was in flight is never erased.
+            if (sent)
+                setText((current) => (clearDraftOnSend(sent, submitted, current) ? "" : current));
+        }
+        finally {
+            // released on every path, so a failing send can never wedge the bar shut. The draft survives
+            // either way (it clears only on `sent === true`).
+            gate.current.release();
+            setSending(false);
+        }
+    };
+    const onKeyDown = (e) => {
+        if (keyAction(e) === "send") {
+            e.preventDefault();
+            void doSend();
+        }
+        // "newline" / "none": the textarea handles the keystroke natively.
+    };
+    return (_jsxs("div", { className: SENDBAR_CLASSES.wrap, children: [_jsxs("div", { className: sendBarClass(disabled), children: [_jsx("div", { className: SENDBAR_CLASSES.segment, role: "group", children: DELIVERY_CLASSES.map((c) => (_jsx("button", { type: "button", className: deliveryClassButtonClass(cls === c), disabled: disabled, "aria-pressed": cls === c, onClick: () => setCls(c), children: deliveryClassLabel(c) }, c))) }), _jsx("textarea", { className: SENDBAR_CLASSES.input, rows: 1, placeholder: sendPlaceholder(disabled, props.disabledReason, props.targetName), value: text, disabled: disabled, onChange: (e) => setText(e.target.value), onKeyDown: onKeyDown }), _jsx("button", { type: "button", className: SENDBAR_CLASSES.send, disabled: !canSend(text, disabled, locked), onClick: doSend, children: SEND_BUTTON_LABEL })] }), showDeliveryHint(disabled) ? _jsx("div", { className: SENDBAR_CLASSES.hint, children: DELIVERY_HINT }) : null, props.notice ? _jsx("div", { className: SENDBAR_CLASSES.notice, children: props.notice }) : null] }));
+}

package/dist/SessionCard.d.ts

@@ -0,0 +1,41 @@
+import { type ReactNode } from "react";
+import { ctxBand, ctxReading, ctxBarGeom, normalizeCtxThresholds, ctxMeterClass, ctxNoteText, ctxValueText, sessionAvatarInitial, sessionCardClass, sessionCardIsStale, sessionCardStale, sessionSpineSummary, sessionStatus, sessionStatusClass, sessionStatusText, sessionSubline, spineNodeClass, type CtxThresholds, type SessionSpine, type SessionStatusInput } from "@mythicalos/ui-core/logic";
+export { ctxBand, ctxReading, ctxBarGeom, normalizeCtxThresholds, ctxMeterClass, ctxNoteText, ctxValueText, sessionAvatarInitial, sessionCardClass, sessionCardIsStale, sessionCardStale, sessionSpineSummary, sessionStatus, sessionStatusClass, sessionStatusText, sessionSubline, spineNodeClass, };
+export interface SessionCardProps {
+    /** Display name — the card's headline and the source of the avatar initial. */
+    name: string;
+    /**
+     * The meta subline, as a free list joined with ` · `. The design card's own states use it for
+     * `role · model · duration`, `role · model · queued: 1 ON-DONE` and `role · last seen 00:12 ago`
+     * alike. Absent/blank entries collapse; an all-absent list omits the line entirely.
+     */
+    meta?: readonly (string | null | undefined)[];
+    /**
+     * What the product actually knows about the session. Every field is optional and every absent
+     * field means "not reported" — an omitted `activity` never becomes `idle`.
+     */
+    status?: SessionStatusInput;
+    /** The product's own wording for the derived status (e.g. a wake-specific phrase). The tone,
+     *  pulse and stale treatment still come from the derivation — only the words change. A blank
+     *  override, and ANY override on the `unknown` status, is ignored: nothing was claimed, so there
+     *  is nothing to reword (see ui-core's `sessionStatusText`). */
+    statusLabel?: string;
+    /** Context reading, 0–100. `undefined`/`null` ⇒ NOT MEASURED: no fill is drawn and the value
+     *  reads `—`. It is never rendered as 0. */
+    contextPct?: number | null;
+    /** Product-tunable warn/critical thresholds (default 75/90 — tokens.css rule #4). */
+    thresholds?: CtxThresholds;
+    /** Spine strip. An unreported `distills` omits the strip entirely. */
+    spine?: SessionSpine;
+    /** The design's selected state (petrol border + ring). Independent of `stale`. */
+    selected?: boolean;
+    /** ADD the design's stale treatment (dashed border, muted values) for a reason the card cannot
+     *  see. It cannot be used to REMOVE the staleness a down link implies — see `sessionCardStale`. */
+    stale?: boolean;
+    /** Makes the card a real button. Omit for a non-interactive card. */
+    onSelect?: () => void;
+    className?: string;
+    /** Extra content appended inside the card (e.g. a product's own mode glyph). */
+    children?: ReactNode;
+}
+export declare function SessionCard(props: SessionCardProps): import("react").JSX.Element;

package/dist/SessionCard.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// @mythicalos/react-ui — the `session-card` atom (design registry spec v1,
+// mythical-design/ds/components-session-card.html): avatar, name, status dot + words, a meta
+// subline, the context meter with its fixed threshold ticks, and the optional spine strip.
+//
+// React twin of packages/preact-ui/src/SessionCard.tsx. All band/status/stale/class derivation,
+// subline composition, bar geometry and spine summary comes from `@mythicalos/ui-core`'s
+// session-card logic module — never reimplemented here — so the two bindings cannot drift. The
+// three honesty invariants (absence is not zero · unknown is not idle · thresholds are
+// product-tunable) are enforced there and documented at the top of that file.
+//
+// Preact→React prop deltas: `class` → `className` (same rename as Chip/Avatar), and the SVG
+// presentation attributes go through React's camelCase props (`preserveAspectRatio`), which
+// serialize back to the same DOM attributes the Preact sibling emits. No inline `style=` anywhere
+// (CSP style-src 'self').
+import { Fragment } from "react";
+import { ctxBand, ctxReading, ctxBarGeom, normalizeCtxThresholds, ctxMeterClass, ctxNoteText, ctxValueText, sessionAvatarInitial, sessionCardClass, sessionCardIsStale, sessionCardStale, sessionSpineSummary, sessionStatus, sessionStatusClass, sessionStatusText, sessionSubline, spineNodeClass, CTX_BAR_VIEWBOX, CTX_THRESHOLDS_DEFAULT, } from "@mythicalos/ui-core/logic";
+import { Avatar } from "./Avatar.js";
+export { ctxBand, ctxReading, ctxBarGeom, normalizeCtxThresholds, ctxMeterClass, ctxNoteText, ctxValueText, sessionAvatarInitial, sessionCardClass, sessionCardIsStale, sessionCardStale, sessionSpineSummary, sessionStatus, sessionStatusClass, sessionStatusText, sessionSubline, spineNodeClass, };
+export function SessionCard(props) {
+    const { name, meta = [], status: statusInput, statusLabel, contextPct, thresholds = CTX_THRESHOLDS_DEFAULT, spine, selected = false, onSelect, className: cls = "", children, } = props;
+    const band = ctxBand(contextPct, thresholds);
+    // the band is part of the status derivation, not a second opinion on it: the design card's
+    // warn/error states replace the status line with the context claim
+    const status = sessionStatus(statusInput, band);
+    const stale = sessionCardStale(status, props.stale);
+    const bar = ctxBarGeom(contextPct, thresholds);
+    const subline = sessionSubline(meta);
+    const spineSummary = sessionSpineSummary(spine);
+    const body = (_jsxs(_Fragment, { children: [_jsxs("span", { className: "my-session-card__head", children: [_jsx(Avatar, { initials: sessionAvatarInitial(name), className: "my-session-card__avatar" }), _jsxs("span", { className: "my-session-card__ident", children: [_jsxs("span", { className: "my-session-card__line1", children: [_jsx("b", { className: "my-session-card__name", children: name }), _jsxs("span", { className: sessionStatusClass(status), children: [_jsx("span", { className: "my-session-card__dot" }), _jsx("span", { className: "my-session-card__status-text", children: sessionStatusText(status, statusLabel) })] })] }), subline.length > 0 ? _jsx("span", { className: "my-session-card__meta", children: subline }) : null] })] }), _jsxs("span", { className: ctxMeterClass({ band, stale }), children: [_jsx("span", { className: "my-session-card__ctx-bar", children: _jsxs("svg", { className: "my-session-card__ctx-svg", viewBox: CTX_BAR_VIEWBOX, preserveAspectRatio: "none", "aria-hidden": "true", children: [_jsx("rect", { className: "my-session-card__ctx-track", x: "0", y: "0", width: bar.span, height: bar.height }), bar.fill === undefined ? null : (_jsx("rect", { className: "my-session-card__ctx-fill", x: "0", y: "0", width: bar.fill, height: bar.height })), bar.ticks.map((t) => (_jsx("rect", { className: "my-session-card__ctx-tick", x: t.x, y: "0", width: t.width, height: bar.height }, t.pct)))] }) }), _jsxs("span", { className: "my-session-card__ctx-legend", children: [_jsx("span", { className: "my-session-card__ctx-note", children: ctxNoteText(band, { stale }) }), _jsx("b", { className: "my-session-card__ctx-value", children: ctxValueText(contextPct, thresholds) })] })] }), spineSummary === undefined ? null : (_jsxs(_Fragment, { children: [_jsx("span", { className: "my-session-card__spine", "aria-hidden": "true", children: spineSummary.nodes.map((node, i) => (_jsxs(Fragment, { children: [i > 0 ? _jsx("span", { className: "my-session-card__spine-seg" }) : null, _jsx("span", { className: spineNodeClass(node) })] }, i))) }), _jsxs("span", { className: "my-session-card__ctx-legend", children: [_jsx("span", { className: "my-session-card__spine-note", children: spineSummary.label }), _jsx("b", { className: "my-session-card__spine-value", children: spineSummary.value })] })] })), children] }));
+    const classes = sessionCardClass({ selected, stale, extra: cls });
+    return onSelect === undefined ? (_jsx("div", { className: classes, children: body })) : (_jsx("button", { type: "button", className: classes, "aria-pressed": selected, onClick: onSelect, children: body }));
+}

package/dist/StatTiles.d.ts

@@ -0,0 +1,9 @@
+import { STAT_TILE_EMPTY, STAT_TILE_MINUS, formatStatCompact, formatStatCount, formatStatPercent, formatStatUsd, STAT_TILE_PARTS, statTileClass, statTilesClass, type StatTile, type StatTileTone } from "@mythicalos/ui-core/logic";
+export { formatStatCompact, formatStatCount, formatStatPercent, formatStatUsd, statTileClass, statTilesClass, STAT_TILE_PARTS, STAT_TILE_EMPTY, STAT_TILE_MINUS, type StatTile, type StatTileTone, };
+export interface StatTilesProps {
+    /** The tiles, in display order. A tile with no `sub` renders no sub-caption — the atom never
+     *  invents one (pass `STAT_TILE_EMPTY` if you want the placeholder line). */
+    tiles: readonly StatTile[];
+    className?: string;
+}
+export declare function StatTiles(props: StatTilesProps): import("react").JSX.Element;

package/dist/StatTiles.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// @mythicalos/react-ui — the stat-tile row (ds/components-stat-tiles.html): a wrapping row of
+// bordered tiles, each an uppercase micro key, a big mono tabular-nums value and a mono
+// sub-caption. `tone: "accent"` is the card's "brag" number; `warn`/`error` are the band tint.
+//
+// React twin of packages/preact-ui/src/StatTiles.tsx. Class derivation and the value formatters
+// (with the "—" placeholder that must never become a fabricated `0`) come from
+// `@mythicalos/ui-core`. Preact→React prop delta: `class` → `className`.
+import { STAT_TILE_EMPTY, STAT_TILE_MINUS, formatStatCompact, formatStatCount, formatStatPercent, formatStatUsd, STAT_TILE_PARTS, statTileClass, statTilesClass, } from "@mythicalos/ui-core/logic";
+export { formatStatCompact, formatStatCount, formatStatPercent, formatStatUsd, statTileClass, statTilesClass, STAT_TILE_PARTS, STAT_TILE_EMPTY, STAT_TILE_MINUS, };
+export function StatTiles(props) {
+    const { className: cls = "" } = props;
+    // A JS caller can hand a non-array where the type says `StatTile[]` (an unloaded slot); render an
+    // empty row rather than crashing on `.map` — the same "absent is not a value" rule the
+    // formatters follow.
+    const tiles = Array.isArray(props.tiles) ? props.tiles : [];
+    return (_jsx("div", { className: `${statTilesClass()} ${cls}`, children: tiles.map((t, i) => (_jsxs("div", { className: statTileClass(t.tone), children: [_jsx("div", { className: STAT_TILE_PARTS.label, children: t.label }), _jsx("div", { className: STAT_TILE_PARTS.value, children: t.value }), t.sub !== undefined ? _jsx("div", { className: STAT_TILE_PARTS.sub, children: t.sub }) : null] }, `${i}:${t.label}`))) }));
+}

package/dist/Terminal.d.ts

@@ -0,0 +1,30 @@
+import { type TermRow, type TermSource, type TranscriptSegment } from "@mythicalos/ui-core/logic";
+export { TERM_CLASS, TERM_CLASSES, TERM_STALE_COPY, TERM_WAKE_UNAVAILABLE_COPY, transcriptView, type TermRow, type TermRowKind, type TermSource, type TermView, type TranscriptSegment, } from "@mythicalos/ui-core/logic";
+export interface TerminalProps {
+    /** The sole transcript input. All six arms are rendered by ui-core's `transcriptView`. */
+    source: TermSource;
+    /** Title-line text left of ` · tail · noise {on|off}` (e.g. `jacob.jsonl`). */
+    name?: string;
+    /** The noise FILTER: on ⇒ noise rows are HIDDEN and the title reads `noise on`. */
+    noiseFilterEnabled?: boolean;
+    /** Omit for a read-only pane — the title then renders as a caption, not a dead button. */
+    onToggleNoise?(): void;
+    /** Client-synthetic rows appended after the transcript (e.g. an interrupt marker). */
+    localRows?: readonly TermRow[];
+    /** Render only from the last `boundary` row on (the current wake). */
+    currentWakeOnly?: boolean;
+    history?: readonly TranscriptSegment[];
+    /** Shows the `wake unavailable` banner. Independent of the transcript branches. */
+    wakeUnavailable?: boolean;
+    /** The blinking stream caret. */
+    caret?: boolean;
+    /** Supplied truth only — `undefined` renders NO caption rather than guessing. */
+    turnInFlight?: boolean;
+    /** Omit to render no stop control at all. */
+    onStopTurn?(): void;
+    /** A stop is already in flight: the control is disabled and Ctrl-C is ignored. */
+    stopBusy?: boolean;
+    /** VISUAL weight for the stop control only — never a state claim. */
+    stopProminent?: boolean;
+}
+export declare function Terminal(props: TerminalProps): import("react").JSX.Element;

package/dist/Terminal.js

@@ -0,0 +1,90 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// @mythicalos/react-ui — the terminal pane (ds/components-terminal, spec v2). React twin of
+// packages/preact-ui/src/Terminal.tsx. ALWAYS heritage-dark in both themes (token rule 3): the
+// surface is pinned by ui-core's `.my-term` block, never by a theme-conditional class here.
+//
+// Thin binding: render + wiring only. Every class string (`TERM_CLASSES`), every user-visible
+// string, the six-branch source resolution, the segmentation, the row keying and the Ctrl-C
+// predicate come from `@mythicalos/ui-core` — this file types no class literal and no copy of its
+// own, so it and its Preact sibling cannot drift.
+//
+// Honesty (binding, inherited from ui-core): the wake-unavailable banner says exactly
+// `wake unavailable` — never "reconnecting", never a retry spinner; the turn caption renders ONLY
+// from a supplied boolean (`undefined` renders nothing, never a guessed "idle"); the six source
+// branches keep loading honesty (`loading` never renders `(no events)`; missing/unaddressable/
+// failed are distinct); foreign transcript segments appear ONLY behind the disclosure, each
+// captioned and separated — never blended into the selected session's log.
+import { useEffect, useRef, useState } from "react";
+import { TERM_CLASS, TERM_CLASSES, TERM_NO_EVENTS_COPY, TERM_STALE_COPY, TERM_STOP_KEY_HINT, TERM_STOP_LABEL, TERM_WAKE_UNAVAILABLE_COPY, currentWakeRows, expandLabel, historySegmentCaption, historyToggleLabel, isExpandable, noiseShow, ROW_SCOPE, scopedRowKeys, segmentKeys, shouldStopOnKey, sourceRows, stopButtonClass, termRowClass, termTitleText, transcriptView, turnCaption, visibleRows, } from "@mythicalos/ui-core/logic";
+export { TERM_CLASS, TERM_CLASSES, TERM_STALE_COPY, TERM_WAKE_UNAVAILABLE_COPY, transcriptView, } from "@mythicalos/ui-core/logic";
+function RowView(props) {
+    const { row } = props;
+    const label = row.label ? _jsx("span", { className: TERM_CLASSES.label, children: row.label }) : null;
+    if (!isExpandable(row)) {
+        return (_jsxs("div", { className: termRowClass(row.kind), children: [label, label ? " " : null, row.text] }));
+    }
+    return (_jsxs("div", { className: termRowClass(row.kind), children: [_jsxs("button", { type: "button", className: TERM_CLASSES.head, "aria-expanded": props.expanded, onClick: props.onToggle, children: [label, label ? " " : null, row.text, " ", _jsx("span", { className: TERM_CLASSES.expand, children: expandLabel(props.expanded) })] }), props.expanded ? _jsx("pre", { className: TERM_CLASSES.detail, children: row.detail }) : null] }));
+}
+/**
+ * A keyed run of rows. `scopedRowKeys` namespaces every key under its scope, so expand state can
+ * never leak between the transcript, the local rows and a history segment — not even when a caller
+ * supplies an id that looks like another scope's prefix.
+ */
+function RowList(props) {
+    const keys = scopedRowKeys(props.scope, props.rows);
+    return (_jsx(_Fragment, { children: props.rows.map((row, i) => {
+            const key = keys[i];
+            return _jsx(RowView, { row: row, expanded: props.expanded.has(key), onToggle: () => props.onToggle(key) }, key);
+        }) }));
+}
+export function Terminal(props) {
+    const { source, noiseFilterEnabled = false } = props;
+    const history = props.history ?? [];
+    const [expanded, setExpanded] = useState(new Set());
+    const [showHistory, setShowHistory] = useState(false);
+    const paneRef = useRef(null);
+    const toggle = (key) => setExpanded((prev) => {
+        const next = new Set(prev);
+        if (next.has(key))
+            next.delete(key);
+        else
+            next.add(key);
+        return next;
+    });
+    const stopAvailable = props.onStopTurn !== undefined;
+    const { onStopTurn, stopBusy } = props;
+    // Focused Ctrl-C → stop-turn. The predicate (key-repeat drop, selection guard, focus guard) is
+    // ui-core's; the availability + in-flight guards live here. Effects do not run under SSR.
+    useEffect(() => {
+        if (!stopAvailable)
+            return;
+        const onKey = (e) => {
+            if (stopBusy)
+                return;
+            const sel = window.getSelection?.()?.toString() ?? "";
+            const pane = paneRef.current;
+            const focused = !!pane && pane.contains(document.activeElement);
+            if (shouldStopOnKey(e, sel, focused)) {
+                e.preventDefault();
+                onStopTurn?.();
+            }
+        };
+        window.addEventListener("keydown", onKey);
+        return () => window.removeEventListener("keydown", onKey);
+    }, [stopAvailable, onStopTurn, stopBusy]);
+    const view = transcriptView(source);
+    const showNoise = noiseShow(noiseFilterEnabled);
+    const allRows = props.currentWakeOnly ? currentWakeRows(sourceRows(source)) : sourceRows(source);
+    const rows = view.kind === "log" ? visibleRows(allRows, showNoise) : [];
+    const localRows = view.kind === "log" ? visibleRows(props.localRows ?? [], showNoise) : [];
+    const emptyLog = view.kind === "log" && rows.length === 0 && localRows.length === 0;
+    const segKeys = segmentKeys(history);
+    const titleText = termTitleText(props.name, noiseFilterEnabled);
+    const caption = turnCaption(props.turnInFlight);
+    return (_jsxs("div", { className: TERM_CLASS, children: [_jsxs("div", { className: TERM_CLASSES.titlebar, children: [_jsxs("span", { className: TERM_CLASSES.lights, "aria-hidden": "true", children: [_jsx("span", { className: TERM_CLASSES.lightRed }), _jsx("span", { className: TERM_CLASSES.lightAmber }), _jsx("span", { className: TERM_CLASSES.lightGreen })] }), props.onToggleNoise ? (_jsx("button", { type: "button", className: TERM_CLASSES.noiseToggle, "aria-pressed": noiseFilterEnabled, onClick: props.onToggleNoise, children: titleText })) : (_jsx("span", { className: TERM_CLASSES.staticTitle, children: titleText })), _jsxs("span", { className: TERM_CLASSES.titleRight, children: [caption !== null ? (props.turnInFlight ? (_jsxs("span", { className: TERM_CLASSES.turn, children: [_jsx("span", { className: TERM_CLASSES.turnDot, "aria-hidden": "true" }), caption] })) : (_jsx("span", { className: TERM_CLASSES.idle, children: caption }))) : null, stopAvailable ? (_jsxs("button", { type: "button", className: stopButtonClass(!!props.stopProminent), disabled: props.stopBusy, onClick: props.onStopTurn, children: [TERM_STOP_LABEL, " ", _jsx("span", { className: TERM_CLASSES.stopKey, children: TERM_STOP_KEY_HINT })] })) : null] })] }), _jsxs("div", { ref: paneRef, className: TERM_CLASSES.body, tabIndex: 0, children: [props.wakeUnavailable ? (_jsxs("div", { className: TERM_CLASSES.banner, children: [_jsx("span", { className: TERM_CLASSES.bannerDot, "aria-hidden": "true" }), TERM_WAKE_UNAVAILABLE_COPY] })) : null, view.kind === "log" && view.stale ? (_jsxs("div", { className: TERM_CLASSES.banner, children: [_jsx("span", { className: TERM_CLASSES.bannerDot, "aria-hidden": "true" }), TERM_STALE_COPY] })) : null, history.length > 0 ? (_jsx("button", { type: "button", className: TERM_CLASSES.more, onClick: () => setShowHistory((s) => !s), children: historyToggleLabel(showHistory, history.length) })) : null, showHistory
+                        ? history.map((seg, si) => (
+                        // keyed by the segment's own identity, not its position, so reordering the list moves
+                        // neither the rendered element nor its rows' expand state
+                        _jsxs("div", { className: TERM_CLASSES.segment, children: [_jsx("div", { className: TERM_CLASSES.segmentCaption, children: seg.caption ?? historySegmentCaption(seg.id) }), _jsx(RowList, { rows: visibleRows(seg.rows, showNoise), scope: [ROW_SCOPE.history, segKeys[si]], expanded: expanded, onToggle: toggle })] }, segKeys[si])))
+                        : null, view.kind === "state" ? _jsx("div", { className: TERM_CLASSES.state, children: view.copy }) : null, emptyLog ? _jsx("div", { className: TERM_CLASSES.state, children: TERM_NO_EVENTS_COPY }) : null, _jsx(RowList, { rows: rows, scope: [ROW_SCOPE.transcript], expanded: expanded, onToggle: toggle }), _jsx(RowList, { rows: localRows, scope: [ROW_SCOPE.local], expanded: expanded, onToggle: toggle }), props.caret ? _jsx("span", { className: TERM_CLASSES.caret, "aria-hidden": "true" }) : null] })] }));
+}

package/dist/index.d.ts

@@ -13,3 +13,13 @@ export { StatusLine, statusLineClass, type StatusLineProps, type StatusTone } fr
 export { SearchInput, type SearchInputProps } from "./SearchInput.js";
 export { Banner, bannerClass, BANNER_ICON, type BannerProps, type BannerTone } from "./Banner.js";
 export { Gauge, gaugeTone, gaugeGeom, type GaugeProps, type GaugeGeom, type Tone } from "./Gauge.js";
+export { SaveBar, saveBarNote, saveBarDirty, saveBarClass, SAVE_BAR_PARTS, SAVE_BAR_SEP, SAVE_BAR_DISCARD_LABEL, SAVE_BAR_SAVE_LABEL, type SaveBarProps, type SaveBarNote, } from "./SaveBar.js";
+export { StatTiles, statTilesClass, statTileClass, STAT_TILE_PARTS, formatStatCompact, formatStatCount, formatStatUsd, formatStatPercent, STAT_TILE_EMPTY, STAT_TILE_MINUS, type StatTilesProps, type StatTile, type StatTileTone, } from "./StatTiles.js";
+export { GitChip, gitFlags, hasGitStatus, gitBranchLabel, gitChipClass, gitFlagClass, gitChipNote, GIT_CHIP_PARTS, GIT_BRANCH_GLYPH, GIT_BRANCH_UNKNOWN, GIT_DETACHED_LABEL, GIT_CLEAN_LABEL, GIT_LOADING_NOTE, GIT_UNAVAILABLE_NOTE, GIT_STALE_LABEL, GIT_STALE_TITLE, type GitChipProps, type GitStatus, type GitFlag, type GitFlagTone, } from "./GitChip.js";
+export { Popover, POPOVER_CARET, POPOVER_CHECK, POPOVER_EMPTY_VALUE, popoverTriggerClass, popoverPanelClass, popoverItemClass, popoverTriggerText, resolvePopoverPosition, type PopoverProps, type PopoverItem, type PopoverPosition, } from "./Popover.js";
+export { FileTree, FilePreview, FileScopePicker, deriveFileTreeRows, countFileRows, countLoadedFiles, previewMeta, previewBodyMode, buildBreadcrumb, breadcrumbSegments, formatFileSize, formatRelativeTime, type FileTreeProps, type FilePreviewProps, type FileScopePickerProps, type FileTreeMode, type FileTreeRootSpec, type FileTreeRow, type FileScopeOption, type DirState, type FilePreviewState, type PreviewBadgeState, type GitMark, } from "./FileExplorer.js";
+export { SessionCard, ctxBand, ctxReading, ctxBarGeom, normalizeCtxThresholds, ctxMeterClass, ctxNoteText, ctxValueText, sessionAvatarInitial, sessionCardClass, sessionCardIsStale, sessionCardStale, sessionStatusText, sessionSpineSummary, sessionStatus, sessionStatusClass, sessionSubline, spineNodeClass, type SessionCardProps, } from "./SessionCard.js";
+export type { CtxThresholds, CtxBand, CtxBarTick, CtxBarGeom, SessionLifecycle, SessionActivity, SessionStatusTone, SessionStatusKey, SessionStatus, SessionStatusInput, SessionSpine, SpineNode, SpineSummary, } from "@mythicalos/ui-core/logic";
+export { Terminal, TERM_CLASS, TERM_STALE_COPY, TERM_WAKE_UNAVAILABLE_COPY, transcriptView, type TerminalProps, type TranscriptSegment, type TermRow, type TermRowKind, type TermSource, type TermView, } from "./Terminal.js";
+export { QueuePanel, QueueRow, QUEUE_EMPTY_COPY, QUEUE_LOADING_COPY, QUEUE_STALE_COPY, QUEUE_UNAVAILABLE_COPY, canCancelRow, cancelReducer, queueBadgeClass, queueBadgeLabel, queueRowClass, queueView, shouldDisarmCancel, type QueuePanelProps, type QueueRowProps, type CancelEvent, type CancelState, type QueueItem, type QueueItemStatus, type QueueSource, type QueueUnavailableReason, type QueueView, } from "./QueuePanel.js";
+export { SendBar, DELIVERY_CLASSES, DELIVERY_HINT, SEND_DISABLED_FALLBACK, SEND_PLACEHOLDER, canSend, clearDraftOnSend, deliveryClassLabel, keyAction, sendPlaceholder, showDeliveryHint, type SendBarProps, type DeliveryClass, type KeyAction, } from "./SendBar.js";

package/dist/index.js

@@ -20,3 +20,17 @@ export { StatusLine, statusLineClass } from "./StatusLine.js";
 export { SearchInput } from "./SearchInput.js";
 export { Banner, bannerClass, BANNER_ICON } from "./Banner.js";
 export { Gauge, gaugeTone, gaugeGeom } from "./Gauge.js";
+// ── small atoms graduated out of a single product (save-bar / stat-tiles / git-chip cards) ──
+export { SaveBar, saveBarNote, saveBarDirty, saveBarClass, SAVE_BAR_PARTS, SAVE_BAR_SEP, SAVE_BAR_DISCARD_LABEL, SAVE_BAR_SAVE_LABEL, } from "./SaveBar.js";
+export { StatTiles, statTilesClass, statTileClass, STAT_TILE_PARTS, formatStatCompact, formatStatCount, formatStatUsd, formatStatPercent, STAT_TILE_EMPTY, STAT_TILE_MINUS, } from "./StatTiles.js";
+export { GitChip, gitFlags, hasGitStatus, gitBranchLabel, gitChipClass, gitFlagClass, gitChipNote, GIT_CHIP_PARTS, GIT_BRANCH_GLYPH, GIT_BRANCH_UNKNOWN, GIT_DETACHED_LABEL, GIT_CLEAN_LABEL, GIT_LOADING_NOTE, GIT_UNAVAILABLE_NOTE, GIT_STALE_LABEL, GIT_STALE_TITLE, } from "./GitChip.js";
+// ── dropdown popover (ds/components-popover — registry row `popover` v1) ──
+export { Popover, POPOVER_CARET, POPOVER_CHECK, POPOVER_EMPTY_VALUE, popoverTriggerClass, popoverPanelClass, popoverItemClass, popoverTriggerText, resolvePopoverPosition, } from "./Popover.js";
+// ── file explorer & markdown preview (ds/components-file-explorer) ──
+export { FileTree, FilePreview, FileScopePicker, deriveFileTreeRows, countFileRows, countLoadedFiles, previewMeta, previewBodyMode, buildBreadcrumb, breadcrumbSegments, formatFileSize, formatRelativeTime, } from "./FileExplorer.js";
+// ── session-card (design registry `session-card` v1) ──
+export { SessionCard, ctxBand, ctxReading, ctxBarGeom, normalizeCtxThresholds, ctxMeterClass, ctxNoteText, ctxValueText, sessionAvatarInitial, sessionCardClass, sessionCardIsStale, sessionCardStale, sessionStatusText, sessionSpineSummary, sessionStatus, sessionStatusClass, sessionSubline, spineNodeClass, } from "./SessionCard.js";
+// ── terminal set (ds/components-terminal v2): terminal · queue-row · send-bar ──
+export { Terminal, TERM_CLASS, TERM_STALE_COPY, TERM_WAKE_UNAVAILABLE_COPY, transcriptView, } from "./Terminal.js";
+export { QueuePanel, QueueRow, QUEUE_EMPTY_COPY, QUEUE_LOADING_COPY, QUEUE_STALE_COPY, QUEUE_UNAVAILABLE_COPY, canCancelRow, cancelReducer, queueBadgeClass, queueBadgeLabel, queueRowClass, queueView, shouldDisarmCancel, } from "./QueuePanel.js";
+export { SendBar, DELIVERY_CLASSES, DELIVERY_HINT, SEND_DISABLED_FALLBACK, SEND_PLACEHOLDER, canSend, clearDraftOnSend, deliveryClassLabel, keyAction, sendPlaceholder, showDeliveryHint, } from "./SendBar.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mythicalos/react-ui",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "mythicalOS thin React bindings over @mythicalos/ui-core — Button, Input/Toggle/Checkbox, MaskedSecretInput, EmptyState, ConfirmDialog/Scrim, Toast/ToastProvider, Chip, Card, Avatar, StatusLine, SearchInput, Banner, Gauge, and the usePoll/useInterval hooks. Render + framework wiring only — every class string, poll-scheduling math, glyph map, and text composition is derived by @mythicalos/ui-core so this binding and its Preact sibling can never drift. Apache-2.0.",
   "license": "Apache-2.0",
   "type": "module",
@@ -36,7 +36,7 @@
     }
   },
   "dependencies": {
-    "@mythicalos/ui-core": "^0.1.1"
+    "@mythicalos/ui-core": "^0.3.0"
   },
   "scripts": {
     "build": "tsc -p tsconfig.build.json",