cursedbelt 0.0.0 → 2.3.0

package/dist/react/components/Lightbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Lightbox.d.ts","sourceRoot":"","sources":["../../../src/react/components/Lightbox.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,+EAA+E;IAC/E,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;;;;;GAMG;AACH,wBAAgB,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,aAAa,+BAiC3E"}
+{"version":3,"file":"Lightbox.d.ts","sourceRoot":"","sources":["../../../src/react/components/Lightbox.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,+EAA+E;IAC/E,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;;;;;GAMG;AACH,wBAAgB,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,aAAa,+BAiC3E"}

package/dist/react/components/Lightbox.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { X } from 'lucide-react';
 import { cn } from '../lib/cn';
 import { Dialog, DialogContent, DialogTitle } from './dialog';
+import { IconButton } from './IconButton';
 /**
  * Fullscreen media lightbox on Radix Dialog. This is just the overlay shell — the actual
  * media rendering (zoom, slideshow, video controls) is the task-19 media subsystem; here
@@ -13,6 +14,6 @@ export function Lightbox({ open, onClose, children, caption }) {
     return (_jsx(Dialog, { open: open, onOpenChange: (v) => {
             if (!v)
                 onClose();
-        }, children: _jsxs(DialogContent, { overlayClassName: 'bg-black/80', className: cn('fixed inset-4 flex flex-col items-center justify-center gap-3 p-4', 'rounded-xl border-none bg-black/95 shadow-none', 'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95', 'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95'), onInteractOutside: () => onClose(), children: [_jsx(DialogTitle, { className: 'sr-only', children: caption ?? 'Media viewer' }), _jsx("button", { type: 'button', onClick: onClose, className: 'absolute top-4 right-4 rounded-full bg-white/10 p-1.5 text-white transition-colors hover:bg-white/20', "aria-label": 'Close', children: _jsx(X, { className: 'size-5' }) }), _jsx("div", { className: 'flex min-h-0 min-w-0 flex-1 items-center justify-center', children: children }), caption ? _jsx("p", { className: 'text-center text-sm text-white/70', children: caption }) : null] }) }));
+        }, children: _jsxs(DialogContent, { overlayClassName: 'bg-black/80', className: cn('fixed inset-4 flex flex-col items-center justify-center gap-3 p-4', 'rounded-xl border-none bg-black/95 shadow-none', 'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95', 'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95'), onInteractOutside: () => onClose(), children: [_jsx(DialogTitle, { className: 'sr-only', children: caption ?? 'Media viewer' }), _jsx(IconButton, { label: 'Close', variant: 'ghost', onClick: onClose, className: 'absolute top-4 right-4 h-auto w-auto rounded-full bg-white/10 p-1.5 text-white hover:bg-white/20 hover:text-white focus-visible:ring-offset-black', children: _jsx(X, { className: 'size-5' }) }), _jsx("div", { className: 'flex min-h-0 min-w-0 flex-1 items-center justify-center', children: children }), caption ? _jsx("p", { className: 'text-center text-sm text-white/70', children: caption }) : null] }) }));
 }
 //# sourceMappingURL=Lightbox.js.map

package/dist/react/components/Lightbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Lightbox.js","sourceRoot":"","sources":["../../../src/react/components/Lightbox.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,cAAc,CAAC;AAEjC,OAAO,EAAE,EAAE,EAAE,MAAM,WAAW,CAAC;AAC/B,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAU9D;;;;;;GAMG;AACH,MAAM,UAAU,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAiB;IAC1E,OAAO,CACL,KAAC,MAAM,IACL,IAAI,EAAE,IAAI,EACV,YAAY,EAAE,CAAC,CAAC,EAAE,EAAE;YAClB,IAAI,CAAC,CAAC;gBAAE,OAAO,EAAE,CAAC;QACpB,CAAC,YAED,MAAC,aAAa,IACZ,gBAAgB,EAAC,aAAa,EAC9B,SAAS,EAAE,EAAE,CACX,mEAAmE,EACnE,gDAAgD,EAChD,uFAAuF,EACvF,gGAAgG,CACjG,EACD,iBAAiB,EAAE,GAAG,EAAE,CAAC,OAAO,EAAE,aAGlC,KAAC,WAAW,IAAC,SAAS,EAAC,SAAS,YAAE,OAAO,IAAI,cAAc,GAAe,EAC1E,iBACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,OAAO,EAChB,SAAS,EAAC,sGAAsG,gBACrG,OAAO,YAElB,KAAC,CAAC,IAAC,SAAS,EAAC,QAAQ,GAAG,GACjB,EACT,cAAK,SAAS,EAAC,yDAAyD,YAAE,QAAQ,GAAO,EACxF,OAAO,CAAC,CAAC,CAAC,YAAG,SAAS,EAAC,mCAAmC,YAAE,OAAO,GAAK,CAAC,CAAC,CAAC,IAAI,IAClE,GACT,CACV,CAAC;AACJ,CAAC"}
+{"version":3,"file":"Lightbox.js","sourceRoot":"","sources":["../../../src/react/components/Lightbox.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,cAAc,CAAC;AAEjC,OAAO,EAAE,EAAE,EAAE,MAAM,WAAW,CAAC;AAC/B,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC9D,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAU1C;;;;;;GAMG;AACH,MAAM,UAAU,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAiB;IAC1E,OAAO,CACL,KAAC,MAAM,IACL,IAAI,EAAE,IAAI,EACV,YAAY,EAAE,CAAC,CAAC,EAAE,EAAE;YAClB,IAAI,CAAC,CAAC;gBAAE,OAAO,EAAE,CAAC;QACpB,CAAC,YAED,MAAC,aAAa,IACZ,gBAAgB,EAAC,aAAa,EAC9B,SAAS,EAAE,EAAE,CACX,mEAAmE,EACnE,gDAAgD,EAChD,uFAAuF,EACvF,gGAAgG,CACjG,EACD,iBAAiB,EAAE,GAAG,EAAE,CAAC,OAAO,EAAE,aAGlC,KAAC,WAAW,IAAC,SAAS,EAAC,SAAS,YAAE,OAAO,IAAI,cAAc,GAAe,EAC1E,KAAC,UAAU,IACT,KAAK,EAAC,OAAO,EACb,OAAO,EAAC,OAAO,EACf,OAAO,EAAE,OAAO,EAChB,SAAS,EAAC,mJAAmJ,YAE7J,KAAC,CAAC,IAAC,SAAS,EAAC,QAAQ,GAAG,GACb,EACb,cAAK,SAAS,EAAC,yDAAyD,YAAE,QAAQ,GAAO,EACxF,OAAO,CAAC,CAAC,CAAC,YAAG,SAAS,EAAC,mCAAmC,YAAE,OAAO,GAAK,CAAC,CAAC,CAAC,IAAI,IAClE,GACT,CACV,CAAC;AACJ,CAAC"}

package/dist/react/components/LogViewer.d.ts

@@ -0,0 +1,71 @@
+/**
+ * A log output pane — monospace, virtualization-free, and honest about what it
+ * is showing.
+ *
+ * ── Why this is a cursedbelt component ─────────────────────────────────────
+ * "Show the output of something that produced lines" is not app-shaped: the
+ * admin satellite reads journalctl and nginx over SSH, the station shows a
+ * deploy transcript, and orch shows a worker's stdout. All three had, or were
+ * about to grow, their own `<pre>` with their own half of these behaviors.
+ * Placement law (STANDARDS §1): a primitive several apps need lives in the
+ * design system, not in whichever app needed it first.
+ *
+ * ── The behaviors that are easy to get wrong ──────────────────────────────
+ * - **Follow-the-tail is STICKY, not forced.** A pane that scrolls to the
+ *   bottom on every update makes reading a log impossible: you scroll up to
+ *   read the error and the next poll yanks you away. This follows only while
+ *   the reader is already AT the bottom, and releasing happens the moment they
+ *   scroll away.
+ * - **Filtering never hides that it filtered.** The header always states
+ *   "N of M lines" when a filter is active, so a search that matches nothing
+ *   cannot read as a log with nothing in it.
+ * - **Severity is derived, and only from the obvious.** `ERROR`/`WARN` at a
+ *   word boundary, plus systemd/nginx's own spellings. A log line is arbitrary
+ *   text; a clever classifier here would be wrong in a way the reader cannot
+ *   see, so this stays deliberately literal and defaults to `plain`.
+ * - **Truncation is stated.** `truncated` renders a banner. A viewer that
+ *   silently drops the tail of a 40 MB log is telling you the incident ended.
+ */
+export type LogSeverity = 'error' | 'warn' | 'info' | 'plain';
+export interface LogViewerProps {
+    /** The raw text. Split on newlines internally so a caller never has to. */
+    text: string;
+    /** Shown above the pane — typically the command that produced the text. */
+    title?: React.ReactNode;
+    /** The exact argv/command, rendered so it can be re-run by hand. */
+    command?: string;
+    /** Rendered as a warning banner: this output is not the whole output. */
+    truncated?: boolean;
+    /** A non-zero exit is surfaced beside the title rather than buried in stderr. */
+    exitCode?: number | null;
+    /** stderr, rendered under the pane when non-empty. */
+    stderr?: string;
+    /** Wall time the producing command took. */
+    durationMs?: number;
+    loading?: boolean;
+    /** Start with newest-at-the-bottom following. Default true. */
+    follow?: boolean;
+    /** Visible height in rows. Default 24. */
+    rows?: number;
+    /** Hide the filter box for a short, fixed output (`df -h`). */
+    filterable?: boolean;
+    /**
+     * Make each line selectable, and hand the selected one back.
+     *
+     * Opt-in: without it the pane is exactly what it was, a read-only document.
+     * With it, a line becomes the subject of an action the CALLER defines — the
+     * admin satellite jumps from a journal line to the requests that were in
+     * flight around it, and a deploy transcript or a worker's stdout has the same
+     * shape of question. What the line MEANS is never decided here; this only
+     * reports which one was picked.
+     */
+    onSelectLine?: (line: string, index: number) => void;
+    /** The currently-selected line, highlighted. Controlled by the caller. */
+    selectedLine?: string | null;
+    className?: string;
+}
+export declare function severityOf(line: string): LogSeverity;
+/** Split, dropping a single trailing newline so a log does not end in a blank row. */
+export declare function toLines(text: string): string[];
+export declare function LogViewer({ text, title, command, truncated, exitCode, stderr, durationMs, loading, follow: followDefault, rows, filterable, onSelectLine, selectedLine, className, }: LogViewerProps): import("react").JSX.Element;
+//# sourceMappingURL=LogViewer.d.ts.map

package/dist/react/components/LogViewer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LogViewer.d.ts","sourceRoot":"","sources":["../../../src/react/components/LogViewer.tsx"],"names":[],"mappings":"AAOA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAEH,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;AAE9D,MAAM,WAAW,cAAc;IAC7B,2EAA2E;IAC3E,IAAI,EAAE,MAAM,CAAC;IACb,2EAA2E;IAC3E,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,oEAAoE;IACpE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,yEAAyE;IACzE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,iFAAiF;IACjF,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,sDAAsD;IACtD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,4CAA4C;IAC5C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,+DAA+D;IAC/D,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,0CAA0C;IAC1C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,+DAA+D;IAC/D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;;OASG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrD,0EAA0E;IAC1E,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAYD,wBAAgB,UAAU,CAAC,IAAI,EAAE,MAAM,GAAG,WAAW,CAKpD;AAUD,sFAAsF;AACtF,wBAAgB,OAAO,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,EAAE,CAI9C;AAED,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,KAAK,EACL,OAAO,EACP,SAAiB,EACjB,QAAe,EACf,MAAW,EACX,UAAU,EACV,OAAe,EACf,MAAM,EAAE,aAAoB,EAC5B,IAAS,EACT,UAAiB,EACjB,YAAY,EACZ,YAAmB,EACnB,SAAS,GACV,EAAE,cAAc,+BAuLhB"}

package/dist/react/components/LogViewer.js

@@ -0,0 +1,105 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { cn } from '../lib/cn';
+import { Badge } from './Badge';
+import { Button } from './Button';
+import { Input } from './Input';
+import { ScrollArea } from './ScrollArea';
+/**
+ * Word-boundary matches only, so a path containing "error" is not an error and
+ * "WARNING" is. Ordered: the first match wins, and `error` outranks `warn`.
+ */
+const SEVERITY_PATTERNS = [
+    { severity: 'error', pattern: /\b(ERROR|ERR|FATAL|CRITICAL|EMERG|ALERT|PANIC|FAILED|FAILURE)\b/i },
+    { severity: 'warn', pattern: /\b(WARN|WARNING|NOTICE|DEPRECATED)\b/i },
+    { severity: 'info', pattern: /\b(INFO|STARTED|STARTING|LISTENING|ACTIVE|SUCCESS|OK)\b/i },
+];
+export function severityOf(line) {
+    for (const { severity, pattern } of SEVERITY_PATTERNS) {
+        if (pattern.test(line))
+            return severity;
+    }
+    return 'plain';
+}
+const SEVERITY_CLASS = {
+    // Semantic colors, and red ONLY for an actual error — the dataviz rule.
+    error: 'text-destructive',
+    warn: 'text-warning',
+    info: 'text-muted-foreground',
+    plain: '',
+};
+/** Split, dropping a single trailing newline so a log does not end in a blank row. */
+export function toLines(text) {
+    if (!text)
+        return [];
+    const trimmed = text.endsWith('\n') ? text.slice(0, -1) : text;
+    return trimmed.split('\n');
+}
+export function LogViewer({ text, title, command, truncated = false, exitCode = null, stderr = '', durationMs, loading = false, follow: followDefault = true, rows = 24, filterable = true, onSelectLine, selectedLine = null, className, }) {
+    const [filter, setFilter] = useState('');
+    const [following, setFollowing] = useState(followDefault);
+    const paneRef = useRef(null);
+    const lines = useMemo(() => toLines(text), [text]);
+    const visible = useMemo(() => {
+        if (!filter.trim())
+            return lines;
+        const needle = filter.toLowerCase();
+        return lines.filter((l) => l.toLowerCase().includes(needle));
+    }, [lines, filter]);
+    /**
+     * Release follow the moment the reader scrolls away, and re-arm it when they
+     * come back to the bottom. The 24px slack is one line of tolerance for a
+     * fractional scroll position.
+     */
+    const onScroll = useCallback(() => {
+        const el = paneRef.current;
+        if (!el)
+            return;
+        const atBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 24;
+        setFollowing(atBottom);
+    }, []);
+    // `useLayoutEffect`: scroll BEFORE paint, or the reader sees the old bottom
+    // for a frame and the pane visibly jumps on every poll.
+    // biome-ignore lint/correctness/useExhaustiveDependencies(visible.length): the line count IS the trigger — it is what says new output arrived, never a value the body reads. Dropping it makes "follow" stop following.
+    useLayoutEffect(() => {
+        if (!following)
+            return;
+        const el = paneRef.current;
+        if (el)
+            el.scrollTop = el.scrollHeight;
+    }, [following, visible.length]);
+    // A new command's output starts at the top: it is a fresh document, and
+    // dropping the reader at the bottom of one hides its first lines.
+    useEffect(() => {
+        setFollowing(followDefault);
+    }, [followDefault]);
+    const hidden = lines.length - visible.length;
+    return (_jsxs("div", { className: cn('flex flex-col gap-2', className), children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [title && _jsx("span", { className: "cb-meta-label", children: title }), exitCode !== null && exitCode !== 0 && (_jsx(Badge, { tone: "error", children: `exit ${exitCode}` })), typeof durationMs === 'number' && (_jsx("span", { className: "text-xs tabular-nums text-muted-foreground", children: `${Math.round(durationMs)} ms` })), _jsx("span", { className: "flex-1" }), filterable && (_jsx(Input, { value: filter, onChange: (e) => setFilter(e.target.value), placeholder: "Filter lines\u2026", "aria-label": "Filter log lines", className: "w-48" })), _jsx(Button, { variant: following ? 'primary' : 'secondary', size: "sm", onClick: () => setFollowing((f) => !f), "aria-pressed": following, tooltip: following
+                            ? 'Following the tail — scroll up to stop'
+                            : 'Jump to the newest line and follow it', children: "Follow" })] }), command && (_jsx(ScrollArea, { axis: "x", space: "none", safeArea: false, className: "rounded-md bg-muted px-3 py-2", children: _jsx("code", { className: "block whitespace-pre font-mono text-xs text-muted-foreground", children: command }) })), truncated && (_jsx("p", { className: "text-xs text-warning", children: "Output was truncated \u2014 this is not the whole log. Narrow the range or read it on the box." })), _jsx("div", { className: "flex min-h-0 flex-col", style: { maxHeight: `${rows * 1.5}rem` }, children: _jsx(ScrollArea, { scrollRef: paneRef, onScroll: onScroll, 
+                    // `both`: a log line is arbitrarily long and must scroll inside its own
+                    // box, never widen the page. `space="none"` + no safe-area padding —
+                    // the sticky-follow reads "am I at the bottom", and a comfort gap below
+                    // the last line is exactly the thing that makes that read wrong.
+                    axis: "both", space: "none", safeArea: false, className: "rounded-md border border-border bg-background font-mono text-xs leading-relaxed", role: "log", "aria-live": "off", "aria-busy": loading || undefined, children: visible.length === 0 ? (_jsx("p", { className: "p-6 text-center text-sm text-muted-foreground", children: loading
+                            ? 'Reading…'
+                            : lines.length === 0
+                                ? 'No output.'
+                                : `No line matches “${filter}”.` })) : (_jsx("ol", { className: "min-w-full", children: visible.map((line, i) => (_jsxs("li", { className: cn('flex gap-3 whitespace-pre px-3 hover:bg-muted/50', SEVERITY_CLASS[severityOf(line)], onSelectLine && 'cursor-pointer', selectedLine !== null && line === selectedLine && 'bg-accent/40'), ...(onSelectLine
+                                ? {
+                                    role: 'button',
+                                    tabIndex: 0,
+                                    'aria-pressed': line === selectedLine,
+                                    onClick: () => onSelectLine(line, i),
+                                    onKeyDown: (e) => {
+                                        if (e.key === 'Enter' || e.key === ' ') {
+                                            e.preventDefault();
+                                            onSelectLine(line, i);
+                                        }
+                                    },
+                                }
+                                : {}), children: [_jsx("span", { className: "select-none tabular-nums text-muted-foreground/60", children: String(i + 1).padStart(4, ' ') }), _jsx("span", { children: line || ' ' })] }, `${i}-${line.slice(0, 24)}`))) })) }) }), _jsx("p", { className: "text-xs tabular-nums text-muted-foreground", children: hidden > 0
+                    ? `${visible.length} of ${lines.length} lines (${hidden} filtered out)`
+                    : `${lines.length} lines` }), stderr.trim() && (_jsxs("details", { className: "rounded-md border border-border", children: [_jsx("summary", { className: "cursor-pointer px-3 py-2 text-xs text-muted-foreground", children: "stderr" }), _jsx(ScrollArea, { axis: "x", space: "none", safeArea: false, className: "px-3 pb-3", children: _jsx("pre", { className: "font-mono text-xs text-destructive", children: stderr }) })] }))] }));
+}
+//# sourceMappingURL=LogViewer.js.map

package/dist/react/components/LogViewer.js.map

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

package/dist/react/components/MeterList.d.ts

@@ -0,0 +1,64 @@
+import type { ReactNode } from 'react';
+import type { StatTileTone } from './StatTile';
+export interface MeterListItem {
+    /** Stable identity (defaults to `label`). */
+    key?: string;
+    label: string;
+    /** Muted context under the label (resets, pace, throttle reason, …). */
+    sub?: ReactNode;
+    /** The metric — rendered right-aligned in the value column. */
+    value: ReactNode;
+    /** Linear meter for the row. Omit for status-word rows (no bar). */
+    progress?: {
+        value: number;
+        max: number;
+        barClassName?: string;
+    };
+    /** Health dot beside the label. */
+    tone?: StatTileTone;
+    /** Extra trailing node after the value (a copy chip, a badge). */
+    trailing?: ReactNode;
+    /** Makes the whole row a click target. */
+    onClick?: () => void;
+    /** Affordance hint shown on hover/focus when clickable (always on coarse pointers). */
+    actionHint?: ReactNode;
+}
+/**
+ * How much room the label column gets on `sm+`.
+ *
+ * `default` caps it at 18rem, which is right for a short label ("5-hour window")
+ * with a two-or-three-word `sub`. `wide` caps it at 34rem for lists whose `sub`
+ * is a sentence — orch's capacity/queue/usage meters carry lines like
+ * "throttled to 2 workers — swap pressure, 4.1 GB" and were being truncated at
+ * every window width. That was carried as an `[&>div]:sm:[grid-template-columns:…]`
+ * arbitrary-variant override in the consumer, which is a component defect wearing
+ * a consumer's clothes (orch `tsk_01KZQTBBDCNEJEC6RKWPSAAZ38`).
+ *
+ * It is a two-value prop rather than a free `labelMaxWidth` on purpose: the whole
+ * point of the component is that every meter list in the fleet lines up, and an
+ * arbitrary per-call width is how three screens end up with three label columns.
+ */
+export type MeterListLabelWidth = 'default' | 'wide';
+export interface MeterListProps {
+    items: MeterListItem[];
+    /** Drop the surface chrome — for embedding inside a parent card/panel. */
+    flat?: boolean;
+    /** Room for the label + `sub` block on `sm+`. See {@link MeterListLabelWidth}. */
+    labelWidth?: MeterListLabelWidth;
+    className?: string;
+}
+/**
+ * Dense horizontal meter rows — `label | bar | value` on one ~44px line with a
+ * hairline between rows. THE fix for "big boxed cards showing one fraction
+ * each": three capacity cards become three rows, the meters span the real
+ * width, and the section's height drops ~60% with zero data loss (design
+ * manual: compress metric groups into horizontal progress strips).
+ *
+ * Rows without `progress` render the value against the full remaining width —
+ * status words ("Executing", "Off") sit where a bar would.
+ *
+ * On narrow screens the bar drops under the label block (two-line row) instead
+ * of crushing the label — no horizontal scrolling, targets stay ≥44px tall.
+ */
+export declare function MeterList({ items, flat, labelWidth, className }: MeterListProps): import("react").JSX.Element;
+//# sourceMappingURL=MeterList.d.ts.map

package/dist/react/components/MeterList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MeterList.d.ts","sourceRoot":"","sources":["../../../src/react/components/MeterList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;AAGtD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAU/C,MAAM,WAAW,aAAa;IAC5B,6CAA6C;IAC7C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,wEAAwE;IACxE,GAAG,CAAC,EAAE,SAAS,CAAC;IAChB,+DAA+D;IAC/D,KAAK,EAAE,SAAS,CAAC;IACjB,oEAAoE;IACpE,QAAQ,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,YAAY,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACjE,mCAAmC;IACnC,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,kEAAkE;IAClE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,0CAA0C;IAC1C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,uFAAuF;IACvF,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB;AAED;;;;;;;;;;;;;;GAcG;AACH,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,MAAM,CAAC;AAOrD,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,0EAA0E;IAC1E,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,kFAAkF;IAClF,UAAU,CAAC,EAAE,mBAAmB,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,SAAS,CAAC,EAAE,KAAK,EAAE,IAAY,EAAE,UAAsB,EAAE,SAAS,EAAE,EAAE,cAAc,+BA0EnG"}

package/dist/react/components/MeterList.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../lib/cn';
+import { Surface } from './Surface';
+import { TAP_TARGET_ALWAYS } from '../lib/tapTarget';
+const TONE_DOT = {
+    success: 'bg-success',
+    warning: 'bg-warning',
+    danger: 'bg-destructive',
+    neutral: 'bg-border-strong',
+};
+const LABEL_COLUMN = {
+    default: 'sm:grid-cols-[minmax(7rem,18rem)_minmax(4rem,1fr)_auto]',
+    wide: 'sm:grid-cols-[minmax(7rem,34rem)_minmax(4rem,1fr)_auto]',
+};
+/**
+ * Dense horizontal meter rows — `label | bar | value` on one ~44px line with a
+ * hairline between rows. THE fix for "big boxed cards showing one fraction
+ * each": three capacity cards become three rows, the meters span the real
+ * width, and the section's height drops ~60% with zero data loss (design
+ * manual: compress metric groups into horizontal progress strips).
+ *
+ * Rows without `progress` render the value against the full remaining width —
+ * status words ("Executing", "Off") sit where a bar would.
+ *
+ * On narrow screens the bar drops under the label block (two-line row) instead
+ * of crushing the label — no horizontal scrolling, targets stay ≥44px tall.
+ */
+export function MeterList({ items, flat = false, labelWidth = 'default', className }) {
+    const list = (_jsx("div", { className: cn('flex flex-col divide-y divide-border', className), children: items.map((item) => {
+            const interactive = item.onClick !== undefined;
+            const pct = item.progress && item.progress.max > 0
+                ? Math.max(0, Math.min(100, (item.progress.value / item.progress.max) * 100))
+                : null;
+            const onKeyDown = interactive
+                ? (e) => {
+                    if (e.key === 'Enter' || e.key === ' ') {
+                        e.preventDefault();
+                        item.onClick?.();
+                    }
+                }
+                : undefined;
+            return (_jsxs("div", { className: cn('group/meter grid min-h-11 grid-cols-[minmax(0,1fr)_auto] items-center gap-x-4 gap-y-1 py-2', LABEL_COLUMN[labelWidth], interactive &&
+                    'cursor-pointer rounded-sm transition-colors hover:bg-accent/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring'), ...(interactive
+                    ? { role: 'button', tabIndex: 0, onClick: item.onClick, onKeyDown, 'aria-label': item.label }
+                    : {}), children: [_jsxs("div", { className: 'flex min-w-0 flex-col', children: [_jsxs("span", { className: 'flex items-center gap-1.5 text-sm font-medium text-foreground', children: [item.tone ? (_jsx("span", { "aria-hidden": true, className: cn('size-1.5 shrink-0 rounded-full', TONE_DOT[item.tone]) })) : null, _jsx("span", { className: 'truncate', children: item.label }), item.actionHint ? (_jsx("span", { className: `text-caption font-medium text-muted-foreground opacity-0 transition-opacity group-hover/meter:opacity-100 group-focus-visible/meter:opacity-100 ${TAP_TARGET_ALWAYS}`, children: item.actionHint })) : null] }), item.sub ? _jsx("span", { className: 'truncate text-xs text-muted-foreground', children: item.sub }) : null] }), pct !== null ? (_jsx("div", { className: 'col-span-2 h-1.5 w-full overflow-hidden rounded-full bg-muted sm:col-span-1', "aria-hidden": true, children: _jsx("div", { className: cn('h-full rounded-full bg-accent-solid', item.progress?.barClassName), style: { width: `${pct}%` } }) })) : (_jsx("span", { "aria-hidden": true, className: 'hidden sm:block' })), _jsxs("span", { className: cn('flex items-center justify-end gap-2 tabular-nums text-sm font-semibold text-foreground', pct !== null && 'row-start-1 col-start-2 sm:row-auto sm:col-auto'), children: [item.value, item.trailing] })] }, item.key ?? item.label));
+        }) }));
+    if (flat)
+        return list;
+    return (_jsx(Surface, { level: 'flat', pad: 'sm', radius: 'lg', children: list }));
+}
+//# sourceMappingURL=MeterList.js.map

package/dist/react/components/MeterList.js.map

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

package/dist/react/components/Modal.d.ts

@@ -5,9 +5,43 @@ export interface ModalProps {
     onClose: () => void;
     size?: ModalSize;
     title?: ReactNode;
+    /**
+     * A second line under the title — what this dialog is FOR, in the words of the person
+     * who opened it. Rendered inside the header block, so it scrolls with nothing and sits
+     * where a subtitle belongs rather than as the first paragraph of the body.
+     *
+     * `DESIGN.md` §6: *"Restrict instructional subtitles to a maximum of two short text
+     * lines, using a muted gray tone."* This is that slot; anything longer belongs in an
+     * `InfoHint` or a dismissible helper alert.
+     */
+    subtitle?: ReactNode;
     children: ReactNode;
-    /** Sticky footer below the scrollable body — typically an `ActionBar` (Cancel/Save). */
+    /**
+     * Sticky footer below the scrollable body. SHOULD be an `ActionBar` (Cancel/Save) —
+     * `no-raw-modal-footer` asks for one, because it also decides the mobile tree (stacked
+     * full-width thumb targets) that a hand-rolled row cannot.
+     *
+     * Anything else is wrapped in `FooterChrome` automatically, so the padding/border/
+     * safe-area can no longer be omitted by accident — see `ActionBar.tsx` for the vault
+     * bug that made the container own this rather than the caller.
+     */
     footer?: ReactNode;
+    /**
+     * Why the last action did not work — rendered directly ABOVE the footer, pinned with it.
+     *
+     * ── 🔴 The owner's report, 2026-08-14 (apps/family) ──────────────────────────────────
+     * *"Clicking save on the edit page is not closing the modal or telling me what went
+     * wrong."* The dialog DID render the refusal — at the very bottom of a long scrolling
+     * body, several screens below the Save button, which is pinned. A refusal that is
+     * displayed and unreachable is indistinguishable from silence to the person pressing
+     * the button.
+     *
+     * 🔴 It belongs on the MODAL rather than in each body, because the property that makes
+     * it work is POSITIONAL — adjacent to the control that failed — and only the modal
+     * knows where its footer is. A body cannot place itself there, which is precisely how
+     * the note ended up at the bottom. Pass an `ErrorCard`, an `Alert`, or a sentence.
+     */
+    problem?: ReactNode;
     /** When the body holds a dirty form, a soft dismiss prompts "Discard changes?". */
     isDirty?: boolean;
     /** Offer "Save changes" in the discard prompt (only when the form is currently saveable). */
@@ -20,16 +54,45 @@ export interface ModalProps {
      * flex column to size their own scroll region against.
      */
     scrollBody?: boolean;
+    /**
+     * Close when the user clicks the backdrop (default `true`). Set `false` for critical
+     * dialogs that require an explicit action — the user must press Escape or click the
+     * Close button. Body scroll-lock and the focus trap are always active regardless of
+     * this setting (Radix Dialog invariants).
+     */
+    backdropClose?: boolean;
+    /**
+     * A widescreen creation/editing flow's LEFT column — selectors, the form, the
+     * controls. `children` becomes the RIGHT column: the live preview, the canvas,
+     * the thing being made.
+     *
+     * `DESIGN.md` §6: *"Interactive creation modals or photo editing tool sheets
+     * must never stack inputs vertically on widescreen desktop views. Split the
+     * frame into an explicit left column for selectors/forms and a right column for
+     * active workspaces/live preview canvases."*
+     *
+     * `Modal` had no split layout, so every wide modal in the fleet stacked — the
+     * form scrolled the preview off the screen exactly when the user needed to see
+     * the effect of the field they were editing. Below `md` the two columns stack
+     * anyway (a 390px phone cannot hold two of anything), form first, because on a
+     * phone the form IS the task and the preview is the confirmation.
+     */
+    aside?: ReactNode;
+    /** How much of the frame the `aside` column takes. Default `'sm'` (a third). */
+    asideWidth?: 'sm' | 'md';
     className?: string;
 }
 /**
  * Centered modal dialog on Radix Dialog (shadcn-vendored). Renders into a portal, so it
- * is never clipped by an `overflow` ancestor; the focus trap and scroll-lock are Radix
- * native (WAI-ARIA compliant). The body scrolls through the keyboard-safe
- * {@link ScrollArea} (task 03), so a focused field clears the on-screen keyboard.
+ * is never clipped by an `overflow` ancestor; the focus trap and body scroll-lock are
+ * Radix-native (WAI-ARIA compliant) — **always active**, regardless of `backdropClose`.
+ * The body scrolls through the keyboard-safe {@link ScrollArea}, so a focused field
+ * clears the on-screen keyboard.
  *
- * Escape and outside-click route through {@link useDiscardGuard} so a dirty form raises
- * an in-modal "Discard changes?" panel instead of closing silently.
+ * Escape and backdrop-click route through {@link useDiscardGuard} so a dirty form raises
+ * an in-modal "Discard changes?" panel instead of closing silently. Set
+ * `backdropClose={false}` to require an explicit action (X button or Escape) — body
+ * scroll-lock and focus trap still apply.
  */
-export declare function Modal({ open, onClose, size, title, children, footer, isDirty, onSave, scrollBody, className, }: ModalProps): import("react").JSX.Element;
+export declare function Modal({ open, onClose, size, title, subtitle, children, footer, problem, isDirty, onSave, scrollBody, backdropClose, aside, asideWidth, className, }: ModalProps): import("react").JSX.Element;
 //# sourceMappingURL=Modal.d.ts.map

package/dist/react/components/Modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/react/components/Modal.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAOvC,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAa3D,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,EAAE,SAAS,CAAC;IACpB,wFAAwF;IACxF,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,mFAAmF;IACnF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,6FAA6F;IAC7F,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;GAQG;AACH,wBAAgB,KAAK,CAAC,EACpB,IAAI,EACJ,OAAO,EACP,IAAW,EACX,KAAK,EACL,QAAQ,EACR,MAAM,EACN,OAAO,EACP,MAAM,EACN,UAAiB,EACjB,SAAS,GACV,EAAE,UAAU,+BAqEZ"}
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/react/components/Modal.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAQvC,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAa3D,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;;;;;OAQG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;;;;;OAQG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;;;;;;;;;;;;OAcG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,mFAAmF;IACnF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,6FAA6F;IAC7F,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;;;;;;;;;;;;OAeG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,gFAAgF;IAChF,UAAU,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,KAAK,CAAC,EACpB,IAAI,EACJ,OAAO,EACP,IAAW,EACX,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,OAAO,EACP,OAAO,EACP,MAAM,EACN,UAAiB,EACjB,aAAoB,EACpB,KAAK,EACL,UAAiB,EACjB,SAAS,GACV,EAAE,UAAU,+BAyHZ"}

package/dist/react/components/Modal.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { X } from 'lucide-react';
 import { useDiscardGuard } from '../hooks/useDiscardGuard';
 import { cn } from '../lib/cn';
+import { FooterSlot } from './ActionBar';
 import { Dialog, DialogContent, DialogTitle } from './dialog';
 import { IconButton } from './IconButton';
 import { ScrollArea } from './ScrollArea';
@@ -17,14 +18,17 @@ const SIZE = {
 };
 /**
  * Centered modal dialog on Radix Dialog (shadcn-vendored). Renders into a portal, so it
- * is never clipped by an `overflow` ancestor; the focus trap and scroll-lock are Radix
- * native (WAI-ARIA compliant). The body scrolls through the keyboard-safe
- * {@link ScrollArea} (task 03), so a focused field clears the on-screen keyboard.
+ * is never clipped by an `overflow` ancestor; the focus trap and body scroll-lock are
+ * Radix-native (WAI-ARIA compliant) — **always active**, regardless of `backdropClose`.
+ * The body scrolls through the keyboard-safe {@link ScrollArea}, so a focused field
+ * clears the on-screen keyboard.
  *
- * Escape and outside-click route through {@link useDiscardGuard} so a dirty form raises
- * an in-modal "Discard changes?" panel instead of closing silently.
+ * Escape and backdrop-click route through {@link useDiscardGuard} so a dirty form raises
+ * an in-modal "Discard changes?" panel instead of closing silently. Set
+ * `backdropClose={false}` to require an explicit action (X button or Escape) — body
+ * scroll-lock and focus trap still apply.
  */
-export function Modal({ open, onClose, size = 'md', title, children, footer, isDirty, onSave, scrollBody = true, className, }) {
+export function Modal({ open, onClose, size = 'md', title, subtitle, children, footer, problem, isDirty, onSave, scrollBody = true, backdropClose = true, aside, asideWidth = 'sm', className, }) {
     const { guardedClose, discardOverlay, isConfirming, cancelDiscard } = useDiscardGuard({
         open,
         onClose,
@@ -40,15 +44,29 @@ export function Modal({ open, onClose, size = 'md', title, children, footer, isD
             'fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2', 'flex w-[calc(100vw-2rem)] flex-col gap-0 overflow-hidden', 'rounded-xl border border-border bg-popover text-popover-foreground shadow-overlay', 'max-h-[min(90dvh,calc(100dvh-2rem))]', 'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95', 'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95', SIZE[size], className), 
             // Intercept Radix's default close so a dirty form gets the discard prompt; while
             // the prompt is up, Escape cancels it (keep editing) instead of re-prompting.
-            onInteractOutside: (e) => {
+            // backdropClose={false} turns the backdrop into a no-op — critical dialogs that
+            // need an explicit user action should set this.
+            //
+            // 🔴 The dismissal hangs off `onPointerDownOutside`, NOT `onInteractOutside`
+            // (2026-08-02). Radix fires `onInteractOutside` for TWO different things: a
+            // pointer pressed outside the dialog — a dismissal gesture — and FOCUS merely
+            // moving outside it, which is not. Radix's own modal wrapper says so, by
+            // calling `preventDefault()` on `onFocusOutside`; this handler ran afterwards
+            // and closed anyway, so ANY element that took focus behind an open modal shut
+            // it. Reported in `roms`: toggling a Game Genie code on SNES relaunches the
+            // emulator core, the new canvas takes focus for an instant, and the menu the
+            // player was picking codes from vanished under them. `onInteractOutside` still
+            // prevents the default so Radix never auto-dismisses on our behalf.
+            onPointerDownOutside: (e) => {
                 e.preventDefault();
-                guardedClose();
-            }, onEscapeKeyDown: (e) => {
+                if (backdropClose)
+                    guardedClose();
+            }, onInteractOutside: (e) => e.preventDefault(), onEscapeKeyDown: (e) => {
                 e.preventDefault();
                 if (isConfirming)
                     cancelDiscard();
                 else
                     guardedClose();
-            }, children: [_jsxs("div", { className: 'flex flex-none items-center justify-between gap-3 border-b border-border px-5 py-4', children: [title ? (_jsx(DialogTitle, { className: 'text-base font-semibold', children: title })) : (_jsx(DialogTitle, { className: 'sr-only', children: "Dialog" })), _jsx(IconButton, { label: 'Close', onClick: guardedClose, children: _jsx(X, {}) })] }), scrollBody ? (_jsx(ScrollArea, { className: 'px-5 py-4', children: children })) : (_jsx("div", { className: 'flex min-h-0 flex-1 flex-col', children: children })), footer ? _jsx("div", { className: 'flex-none', children: footer }) : null, discardOverlay] }) }));
+            }, children: [_jsxs("div", { className: 'flex flex-none items-center justify-between gap-3 border-b border-border px-5 py-4', children: [title ? (_jsxs("div", { className: 'min-w-0 flex-1', children: [_jsx(DialogTitle, { className: 'wrap-break-word text-base font-semibold', children: title }), subtitle ? (_jsx("p", { className: 'mt-1 text-caption leading-relaxed text-muted-foreground', children: subtitle })) : null] })) : (_jsx(DialogTitle, { className: 'sr-only', children: "Dialog" })), _jsx(IconButton, { label: 'Close', onClick: guardedClose, children: _jsx(X, {}) })] }), aside ? (_jsxs("div", { "data-cb-modal-split": '', className: 'flex min-h-0 flex-1 flex-col md:flex-row md:divide-x md:divide-border', children: [_jsx("div", { "data-cb-modal-aside": '', className: cn('flex min-h-0 flex-col md:flex-none', asideWidth === 'md' ? 'md:w-2/5' : 'md:w-1/3'), children: _jsx(ScrollArea, { className: 'px-5 py-4', children: aside }) }), _jsx("div", { className: 'flex min-h-0 flex-1 flex-col', children: scrollBody ? (_jsx(ScrollArea, { className: 'px-5 py-4', children: children })) : (_jsx("div", { className: 'flex min-h-0 flex-1 flex-col', children: children })) })] })) : scrollBody ? (_jsx(ScrollArea, { className: 'px-5 py-4', children: children })) : (_jsx("div", { className: 'flex min-h-0 flex-1 flex-col', children: children })), problem ? (_jsx("div", { className: 'flex-none px-5 pt-3 empty:hidden', children: problem })) : null, _jsx(FooterSlot, { footer: footer }), discardOverlay] }) }));
 }
 //# sourceMappingURL=Modal.js.map

package/dist/react/components/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../src/react/components/Modal.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,cAAc,CAAC;AAEjC,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAC3D,OAAO,EAAE,EAAE,EAAE,MAAM,WAAW,CAAC;AAC/B,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC9D,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAI1C,wFAAwF;AACxF,0FAA0F;AAC1F,wFAAwF;AACxF,MAAM,IAAI,GAA8B;IACtC,EAAE,EAAE,UAAU;IACd,EAAE,EAAE,UAAU;IACd,EAAE,EAAE,WAAW;IACf,EAAE,EAAE,WAAW;IACf,IAAI,EAAE,oDAAoD;CAC3D,CAAC;AAyBF;;;;;;;;GAQG;AACH,MAAM,UAAU,KAAK,CAAC,EACpB,IAAI,EACJ,OAAO,EACP,IAAI,GAAG,IAAI,EACX,KAAK,EACL,QAAQ,EACR,MAAM,EACN,OAAO,EACP,MAAM,EACN,UAAU,GAAG,IAAI,EACjB,SAAS,GACE;IACX,MAAM,EAAE,YAAY,EAAE,cAAc,EAAE,YAAY,EAAE,aAAa,EAAE,GAAG,eAAe,CAAC;QACpF,IAAI;QACJ,OAAO;QACP,OAAO;QACP,MAAM;KACP,CAAC,CAAC;IAEH,OAAO,CACL,KAAC,MAAM,IACL,IAAI,EAAE,IAAI,EACV,YAAY,EAAE,CAAC,CAAC,EAAE,EAAE;YAClB,IAAI,CAAC,CAAC;gBAAE,YAAY,EAAE,CAAC;QACzB,CAAC,YAED,MAAC,aAAa,IACZ,SAAS,EAAE,EAAE;YACX,8EAA8E;YAC9E,wEAAwE;YACxE,0DAA0D,EAC1D,0DAA0D,EAC1D,mFAAmF,EACnF,sCAAsC,EACtC,uFAAuF,EACvF,gGAAgG,EAChG,IAAI,CAAC,IAAI,CAAC,EACV,SAAS,CACV;YACD,iFAAiF;YACjF,8EAA8E;YAC9E,iBAAiB,EAAE,CAAC,CAAC,EAAE,EAAE;gBACvB,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,YAAY,EAAE,CAAC;YACjB,CAAC,EACD,eAAe,EAAE,CAAC,CAAC,EAAE,EAAE;gBACrB,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,IAAI,YAAY;oBAAE,aAAa,EAAE,CAAC;;oBAC7B,YAAY,EAAE,CAAC;YACtB,CAAC,aAED,eAAK,SAAS,EAAC,oFAAoF,aAChG,KAAK,CAAC,CAAC,CAAC,CACP,KAAC,WAAW,IAAC,SAAS,EAAC,yBAAyB,YAAE,KAAK,GAAe,CACvE,CAAC,CAAC,CAAC,CAEF,KAAC,WAAW,IAAC,SAAS,EAAC,SAAS,uBAAqB,CACtD,EACD,KAAC,UAAU,IAAC,KAAK,EAAC,OAAO,EAAC,OAAO,EAAE,YAAY,YAC7C,KAAC,CAAC,KAAG,GACM,IACT,EAEL,UAAU,CAAC,CAAC,CAAC,CAEZ,KAAC,UAAU,IAAC,SAAS,EAAC,WAAW,YAAE,QAAQ,GAAc,CAC1D,CAAC,CAAC,CAAC,CAGF,cAAK,SAAS,EAAC,8BAA8B,YAAE,QAAQ,GAAO,CAC/D,EAEA,MAAM,CAAC,CAAC,CAAC,cAAK,SAAS,EAAC,WAAW,YAAE,MAAM,GAAO,CAAC,CAAC,CAAC,IAAI,EAIzD,cAAc,IACD,GACT,CACV,CAAC;AACJ,CAAC"}
+{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../src/react/components/Modal.tsx"],"names":[],"mappings":"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"}

package/dist/react/components/MultiSelectField.d.ts

@@ -1,11 +1,7 @@
-import { type ReactNode } from 'react';
-export interface MultiSelectOption {
-    value: string;
-    label?: ReactNode;
-    /** Optional swatch shown beside the option + in its pill. */
-    color?: string;
-    disabled?: boolean;
-}
+import type { ControlSize } from '../lib/field';
+import { type ComboboxOption } from './ComboboxField';
+/** Option shape for {@link MultiSelectField} — same contract as the combobox's. */
+export type MultiSelectOption = ComboboxOption;
 export interface MultiSelectFieldProps {
     /** The selected values (controlled). */
     value: string[];
@@ -17,12 +13,19 @@ export interface MultiSelectFieldProps {
     'aria-invalid'?: true | undefined;
     'aria-describedby'?: string;
     className?: string;
+    /** MINIMUM height on the shared control-height scale (`--control-h-*`, task
+     *  cbux-41) — the collapsed row lines up with every other control at the same
+     *  `size`; it grows past it as chips wrap. Default `md`. */
+    size?: ControlSize;
 }
 /**
- * Multi-select: an Input-shaped trigger that shows the chosen options as pills and
- * opens a Radix Popover (portaled — never clipped) with a checkable list. Controlled
- * — `value: string[]`, `onChange(next)`. Removing a choice is done by unchecking it
- * in the list. The registry's `multiselect` control.
+ * Multi-select: pick several values from a fixed option list. The registry's
+ * `multiselect` control.
+ *
+ * This is {@link ComboboxField}'s `multiple` mode under a task-shaped name — one
+ * Base-UI-backed implementation owns chips, the checkable list, type-to-filter,
+ * and full keyboard navigation. (The previous hand-rolled Popover listbox had no
+ * arrow-key support at all — the exact drift this alias now prevents.)
  */
-export declare function MultiSelectField({ value, onChange, options, placeholder, disabled, id, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedBy, className, }: MultiSelectFieldProps): import("react").JSX.Element;
+export declare function MultiSelectField({ value, onChange, options, placeholder, disabled, id, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedBy, className, size, }: MultiSelectFieldProps): import("react").JSX.Element;
 //# sourceMappingURL=MultiSelectField.d.ts.map

package/dist/react/components/MultiSelectField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelectField.d.ts","sourceRoot":"","sources":["../../../src/react/components/MultiSelectField.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAAY,MAAM,OAAO,CAAC;AAIjD,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,6DAA6D;IAC7D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,qBAAqB;IACpC,wCAAwC;IACxC,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACpC,OAAO,EAAE,iBAAiB,EAAE,CAAC;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,cAAc,CAAC,EAAE,IAAI,GAAG,SAAS,CAAC;IAClC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,QAAQ,EACR,OAAO,EACP,WAAuB,EACvB,QAAQ,EACR,EAAE,EACF,cAAc,EAAE,WAAW,EAC3B,kBAAkB,EAAE,eAAe,EACnC,SAAS,GACV,EAAE,qBAAqB,+BA6FvB"}
+{"version":3,"file":"MultiSelectField.d.ts","sourceRoot":"","sources":["../../../src/react/components/MultiSelectField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAChD,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAErE,mFAAmF;AACnF,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC;AAE/C,MAAM,WAAW,qBAAqB;IACpC,wCAAwC;IACxC,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACpC,OAAO,EAAE,iBAAiB,EAAE,CAAC;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,cAAc,CAAC,EAAE,IAAI,GAAG,SAAS,CAAC;IAClC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;gEAE4D;IAC5D,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB;AAED;;;;;;;;GAQG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,QAAQ,EACR,OAAO,EACP,WAAuB,EACvB,QAAQ,EACR,EAAE,EACF,cAAc,EAAE,WAAW,EAC3B,kBAAkB,EAAE,eAAe,EACnC,SAAS,EACT,IAAW,GACZ,EAAE,qBAAqB,+BAgBvB"}