@calliopelabs/ui 0.14.0 → 0.18.0

package/dist/workbench/GridCell.js

@@ -0,0 +1,50 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { BinaryIcon, BracesIcon, CalendarClockIcon, CalendarIcon, CircleHelpIcon, ClockIcon, FingerprintIcon, HashIcon, KeyRoundIcon, Link2Icon, SigmaIcon, ToggleLeftIcon, TypeIcon, } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { useUI } from "../provider/UIProvider.js";
+import { asBinary } from "./grid-model.js";
+const TYPE_ICON = {
+    integer: HashIcon,
+    number: SigmaIcon,
+    text: TypeIcon,
+    boolean: ToggleLeftIcon,
+    datetime: CalendarClockIcon,
+    date: CalendarIcon,
+    time: ClockIcon,
+    json: BracesIcon,
+    binary: BinaryIcon,
+    uuid: FingerprintIcon,
+    other: CircleHelpIcon,
+};
+/** A column type's glyph, named by the type. Identity, not status: it takes no colour. */
+export function ColumnTypeIcon({ type, className }) {
+    const { messages } = useUI();
+    const Icon = TYPE_ICON[type];
+    return (_jsx("span", { role: "img", "aria-label": messages.workbench.gridType(type), className: cn("inline-flex shrink-0", className), children: _jsx(Icon, { "aria-hidden": true, className: "size-3" }) }));
+}
+/** A column's primary and foreign key marks, each named. */
+export function ColumnKeyIcons({ column }) {
+    const { messages } = useUI();
+    const t = messages.workbench;
+    return (_jsxs(_Fragment, { children: [column.primaryKey && (_jsx("span", { role: "img", "aria-label": t.gridPrimaryKey, className: "inline-flex shrink-0", children: _jsx(KeyRoundIcon, { "aria-hidden": true, className: "size-3" }) })), column.foreignKey && (_jsx("span", { role: "img", "aria-label": t.gridForeignKey(column.references ?? null), className: "inline-flex shrink-0", children: _jsx(Link2Icon, { "aria-hidden": true, className: "size-3" }) }))] }));
+}
+/** How one value reads in a cell: NULL, empty text and binary are marked so they never pass for data. */
+export function GridCellValue({ value, className }) {
+    const { messages } = useUI();
+    const t = messages.workbench;
+    if (value === null || value === undefined) {
+        return (_jsx("span", { className: cn("text-muted-foreground italic select-none", className), children: t.gridNull }));
+    }
+    const binary = asBinary(value);
+    if (binary) {
+        return (_jsxs("span", { className: cn("truncate text-muted-foreground italic", className), children: ["<", t.gridBinary(binary.size), ">"] }));
+    }
+    if (value === "") {
+        return (_jsxs("span", { className: cn("text-muted-foreground italic select-none", className), children: ["<", t.gridEmptyText, ">"] }));
+    }
+    if (typeof value === "object") {
+        return (_jsx("span", { className: cn("truncate text-muted-foreground", className), children: JSON.stringify(value) }));
+    }
+    return _jsx("span", { className: cn("truncate", className), children: String(value) });
+}

package/dist/workbench/GridDetails.d.ts

@@ -0,0 +1,31 @@
+import * as React from "react";
+import { type GridColumnMeta, type GridRow } from "./grid-model.js";
+export interface CellDetailDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    column: string;
+    value: unknown;
+    onCopy?: (text: string) => void;
+}
+/**
+ * One cell's whole value: JSON pretty-printed (also text that holds JSON),
+ * bytes as their size with a download, everything copyable.
+ */
+export declare function CellDetailDialog({ open, onOpenChange, column, value, onCopy, }: CellDetailDialogProps): React.JSX.Element;
+export interface RowDetailDrawerProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    row: GridRow;
+    columns: readonly GridColumnMeta[];
+    /** 1-based position in the view. */
+    rowNumber: number;
+    rowTotal: number;
+    /** Previous (-1) or next (1) row, without closing. */
+    onNavigate: (delta: -1 | 1) => void;
+    onCopy?: (text: string) => void;
+}
+/**
+ * One row, read top to bottom: thirty columns do not fit across a screen.
+ * Previous and next walk the view without closing, to compare rows.
+ */
+export declare function RowDetailDrawer({ open, onOpenChange, row, columns, rowNumber, rowTotal, onNavigate, onCopy, }: RowDetailDrawerProps): React.JSX.Element;

package/dist/workbench/GridDetails.js

@@ -0,0 +1,78 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon, CopyIcon, DownloadIcon } from "lucide-react";
+import * as React from "react";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, } from "../overlays/Dialog.js";
+import { Drawer, DrawerContent, DrawerDescription, DrawerHeader, DrawerTitle, } from "../overlays/Drawer.js";
+import { Button } from "../primitives/Button.js";
+import { useUI } from "../provider/UIProvider.js";
+import { downloadBase64 } from "./download.js";
+import { ColumnKeyIcons, ColumnTypeIcon, GridCellValue } from "./GridCell.js";
+import { asBinary } from "./grid-model.js";
+/** Pretty-prints JSON, or text that holds JSON; null for anything else. */
+function prettyJson(value) {
+    if (typeof value === "object" && value !== null)
+        return JSON.stringify(value, null, 2);
+    if (typeof value !== "string")
+        return null;
+    const trimmed = value.trim();
+    if (!trimmed.startsWith("{") && !trimmed.startsWith("["))
+        return null;
+    try {
+        return JSON.stringify(JSON.parse(trimmed), null, 2);
+    }
+    catch {
+        return null;
+    }
+}
+/** A copy button that says "Copied" for a moment. Reports through `onCopied`. */
+function CopyButton({ text, label, onCopied, }) {
+    const { messages } = useUI();
+    const [copied, setCopied] = React.useState(false);
+    React.useEffect(() => {
+        if (!copied)
+            return;
+        const timer = window.setTimeout(() => setCopied(false), 1500);
+        return () => window.clearTimeout(timer);
+    }, [copied]);
+    return (_jsxs(Button, { variant: "ghost", size: "xs", onClick: () => {
+            void navigator.clipboard?.writeText(text).then(() => {
+                setCopied(true);
+                onCopied?.(text);
+            }, () => { });
+        }, children: [copied ? _jsx(CheckIcon, { "aria-hidden": true }) : _jsx(CopyIcon, { "aria-hidden": true }), copied ? messages.workbench.gridCopied : label] }));
+}
+/**
+ * One cell's whole value: JSON pretty-printed (also text that holds JSON),
+ * bytes as their size with a download, everything copyable.
+ */
+export function CellDetailDialog({ open, onOpenChange, column, value, onCopy, }) {
+    const { messages } = useUI();
+    const t = messages.workbench;
+    const binary = asBinary(value);
+    const body = value === null || value === undefined
+        ? t.gridNull
+        : binary
+            ? binary.base64
+            : (prettyJson(value) ?? String(value));
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: "sm:max-w-2xl", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { className: "font-mono text-sm", children: column }), _jsx(DialogDescription, { className: "text-xs", children: binary
+                                ? t.gridBytes(binary.size, binary.truncated === true)
+                                : t.gridCharacters(body.length) })] }), _jsxs("div", { className: "flex justify-end gap-1", children: [binary && binary.base64 !== "" && (_jsxs(Button, { variant: "ghost", size: "xs", onClick: () => downloadBase64(binary.base64, `${column}.bin`), children: [_jsx(DownloadIcon, { "aria-hidden": true }), t.gridDownload] })), _jsx(CopyButton, { text: body, label: t.gridCopyValue, onCopied: onCopy })] }), _jsx("pre", { 
+                    // A long value scrolls: focusable so a keyboard can reach and scroll it.
+                    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+                    tabIndex: 0, "aria-label": t.contentsOf(column), className: "max-h-96 overflow-auto rounded-lg border bg-muted/40 p-3 font-mono text-xs break-all whitespace-pre-wrap outline-none focus-visible:ring-2 focus-visible:ring-ring/50", children: body })] }) }));
+}
+/**
+ * One row, read top to bottom: thirty columns do not fit across a screen.
+ * Previous and next walk the view without closing, to compare rows.
+ */
+export function RowDetailDrawer({ open, onOpenChange, row, columns, rowNumber, rowTotal, onNavigate, onCopy, }) {
+    const { messages } = useUI();
+    const t = messages.workbench;
+    return (_jsx(Drawer, { open: open, onOpenChange: onOpenChange, children: _jsxs(DrawerContent, { side: "right", className: "gap-0 sm:max-w-md", children: [_jsxs(DrawerHeader, { className: "border-b", children: [_jsx(DrawerTitle, { className: "text-sm", children: t.gridRowOf(rowNumber, rowTotal) }), _jsx(DrawerDescription, { className: "text-xs", children: t.gridColumns(columns.length) }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Button, { variant: "ghost", size: "icon-xs", "aria-label": t.gridPreviousRow, disabled: rowNumber <= 1, onClick: () => onNavigate(-1), children: _jsx(ChevronUpIcon, { "aria-hidden": true }) }), _jsx(Button, { variant: "ghost", size: "icon-xs", "aria-label": t.gridNextRow, disabled: rowNumber >= rowTotal, onClick: () => onNavigate(1), children: _jsx(ChevronDownIcon, { "aria-hidden": true }) }), _jsx(CopyButton, { text: JSON.stringify(row, null, 2), label: t.gridCopyRow, onCopied: onCopy })] })] }), _jsx("dl", { className: "flex-1 space-y-3 overflow-auto px-4 py-3", children: columns.map((column) => {
+                        const value = row[column.name];
+                        const json = prettyJson(value);
+                        const binary = asBinary(value);
+                        return (_jsxs("div", { className: "space-y-1", children: [_jsxs("dt", { className: "flex items-center gap-1.5 text-xs text-muted-foreground", children: [_jsx(ColumnTypeIcon, { type: column.type }), _jsx("span", { className: "min-w-0 truncate font-medium text-foreground", children: column.name }), _jsx(ColumnKeyIcons, { column: column }), _jsxs("span", { className: "ml-auto shrink-0", children: [column.dataType ?? t.gridType(column.type), column.nullable === false ? `, ${t.gridNotNull}` : ""] })] }), _jsx("dd", { className: "text-xs", children: binary ? (_jsxs("span", { className: "flex items-center gap-2", children: [_jsx(GridCellValue, { value: value }), binary.base64 !== "" && (_jsxs(Button, { variant: "ghost", size: "xs", onClick: () => downloadBase64(binary.base64, `${column.name}.bin`), children: [_jsx(DownloadIcon, { "aria-hidden": true }), t.gridDownload] }))] })) : json !== null || (typeof value === "string" && value.length > 120) ? (_jsx("pre", { className: "max-h-48 overflow-auto rounded-lg border bg-muted/40 p-2 font-mono break-all whitespace-pre-wrap", children: json ?? String(value) })) : (_jsx(GridCellValue, { value: value, className: "font-mono break-all" })) })] }, column.name));
+                    }) })] }) }));
+}

package/dist/workbench/MenuBar.d.ts

@@ -0,0 +1,49 @@
+import type * as React from "react";
+export type MenuEntry = {
+    type?: "item";
+    id: string;
+    label: string;
+    /** Its chord, shown beside it (`"Mod+N"`). Binding it is `useShortcuts`' job. */
+    shortcut?: string;
+    icon?: React.ReactNode;
+    disabled?: boolean;
+    destructive?: boolean;
+    onSelect: () => void;
+} | {
+    type: "checkbox";
+    id: string;
+    label: string;
+    checked: boolean;
+    shortcut?: string;
+    disabled?: boolean;
+    onCheckedChange: (checked: boolean) => void;
+} | {
+    type: "label";
+    id: string;
+    label: string;
+} | {
+    type: "separator";
+    id: string;
+};
+export interface WorkbenchMenu {
+    id: string;
+    /** The word in the bar ("File"). */
+    label: string;
+    items: readonly MenuEntry[];
+}
+export interface MenuBarProps {
+    menus: readonly WorkbenchMenu[];
+    /** Before the menus: the product mark, a home link. */
+    start?: React.ReactNode;
+    /** Right-aligned: the product name, a connection, the person. */
+    end?: React.ReactNode;
+    /** Draw shortcuts with Mac glyphs. Detected from the platform when left out. */
+    mac?: boolean;
+    className?: string;
+}
+/**
+ * The menu bar across the top of an IDE layout, from data: each menu a list
+ * of commands, toggles, labels and separators. It is the ARIA menubar
+ * (Menubar primitive): one tab stop, arrows between and within menus.
+ */
+export declare function MenuBar({ menus, start, end, mac, className }: MenuBarProps): React.JSX.Element;

package/dist/workbench/MenuBar.js

@@ -0,0 +1,25 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/cn.js";
+import { Menubar, MenubarCheckboxItem, MenubarContent, MenubarItem, MenubarLabel, MenubarMenu, MenubarSeparator, MenubarShortcut, MenubarTrigger, } from "../primitives/Menubar.js";
+import { useUI } from "../provider/UIProvider.js";
+import { formatShortcut, isMacPlatform } from "./keys.js";
+/**
+ * The menu bar across the top of an IDE layout, from data: each menu a list
+ * of commands, toggles, labels and separators. It is the ARIA menubar
+ * (Menubar primitive): one tab stop, arrows between and within menus.
+ */
+export function MenuBar({ menus, start, end, mac, className }) {
+    const { messages } = useUI();
+    const isMac = mac ?? isMacPlatform();
+    const shortcut = (keys) => keys ? _jsx(MenubarShortcut, { children: formatShortcut(keys, isMac) }) : null;
+    return (_jsxs("div", { "data-slot": "workbench-menu-bar", className: cn("flex h-8 shrink-0 items-center gap-1 border-b bg-surface-1 px-1 text-foreground", className), children: [start, _jsx(Menubar, { "aria-label": messages.workbench.menuBar, children: menus.map((menu) => (_jsxs(MenubarMenu, { value: menu.id, children: [_jsx(MenubarTrigger, { children: menu.label }), _jsx(MenubarContent, { children: menu.items.map((entry) => {
+                                if (entry.type === "separator")
+                                    return _jsx(MenubarSeparator, {}, entry.id);
+                                if (entry.type === "label")
+                                    return _jsx(MenubarLabel, { children: entry.label }, entry.id);
+                                if (entry.type === "checkbox")
+                                    return (_jsxs(MenubarCheckboxItem, { checked: entry.checked, disabled: entry.disabled, onCheckedChange: (checked) => entry.onCheckedChange(checked === true), children: [entry.label, shortcut(entry.shortcut)] }, entry.id));
+                                return (_jsxs(MenubarItem, { disabled: entry.disabled, variant: entry.destructive ? "destructive" : "default", onSelect: entry.onSelect, children: [entry.icon && (_jsx("span", { "aria-hidden": true, className: "flex", children: entry.icon })), entry.label, shortcut(entry.shortcut)] }, entry.id));
+                            }) })] }, menu.id))) }), end && (_jsx("div", { className: "ml-auto flex items-center gap-2 pr-2 text-xs text-muted-foreground", children: end }))] }));
+}

package/dist/workbench/PaneGroup.d.ts

@@ -0,0 +1,50 @@
+import * as React from "react";
+/** A size bound: a percentage of the group (`20`) or pixels (`"200px"`). */
+export type PaneSize = number | `${number}px`;
+export interface PaneProps {
+    /** Stable within the group: the stored size's key. */
+    id: string;
+    /** What the pane is, for its resize handle's name ("Resize Explorer"). */
+    label: string;
+    /** Percent of the group at first paint. Panes without one share what is left. */
+    defaultSize?: number;
+    minSize?: PaneSize;
+    maxSize?: PaneSize;
+    /**
+     * Hidden but still mounted, so its state (an unsaved draft, a scroll
+     * position) survives; its neighbours take the room.
+     */
+    collapsed?: boolean;
+    className?: string;
+    children?: React.ReactNode;
+}
+/**
+ * One pane of a `PaneGroup`. Outside a group it is a plain block; inside
+ * one, the group lays it out and puts a resize handle between it and the
+ * next visible pane.
+ */
+export declare function Pane({ className, children }: PaneProps): React.JSX.Element;
+export interface PaneGroupProps {
+    /** `horizontal` puts panes side by side; `vertical` stacks them. */
+    orientation?: "horizontal" | "vertical";
+    /** Remember sizes per person under this key (localStorage). */
+    storageKey?: string;
+    /** Sizes changed (a drag ended, or a keyboard step): percent per pane id. */
+    onSizesChange?: (sizes: Record<string, number>) => void;
+    className?: string;
+    /** `Pane`s; anything else is ignored. */
+    children: React.ReactNode;
+}
+type Sizes = Record<string, number>;
+/** Every pane's size, from the stored sizes over the defaults. */
+export declare function resolvePaneSizes(panes: readonly Pick<PaneProps, "id" | "defaultSize">[], stored?: Sizes): Sizes;
+/**
+ * Resizable panes with the ARIA window-splitter pattern: each handle is a
+ * focusable `separator` with its value as the pane's share of the group;
+ * the arrow keys step it, Home and End take it to its bounds, and the
+ * pointer drags it. Sizes are flex weights, so a collapsed pane's room goes
+ * to its neighbours and comes back when it reopens. With `storageKey` they
+ * are remembered per person.
+ */
+export declare function PaneGroup({ orientation, storageKey, onSizesChange, className, children, }: PaneGroupProps): React.JSX.Element;
+export {};

package/dist/workbench/PaneGroup.js

@@ -0,0 +1,146 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/cn.js";
+import { readLocal, subscribeLocal, writeLocal } from "../lib/local-store.js";
+import { useUI } from "../provider/UIProvider.js";
+/**
+ * One pane of a `PaneGroup`. Outside a group it is a plain block; inside
+ * one, the group lays it out and puts a resize handle between it and the
+ * next visible pane.
+ */
+export function Pane({ className, children }) {
+    return _jsx("div", { className: className, children: children });
+}
+function bound(size, total, fallback) {
+    if (size === undefined)
+        return fallback;
+    if (typeof size === "number")
+        return size;
+    return total > 0 ? (parseFloat(size) / total) * 100 : fallback;
+}
+function parseStored(value) {
+    if (!value)
+        return {};
+    try {
+        const parsed = JSON.parse(value);
+        if (!parsed || typeof parsed !== "object")
+            return {};
+        return Object.fromEntries(Object.entries(parsed).filter(([, v]) => typeof v === "number" && v > 0));
+    }
+    catch {
+        return {};
+    }
+}
+/** Every pane's size, from the stored sizes over the defaults. */
+export function resolvePaneSizes(panes, stored = {}) {
+    const given = panes.reduce((sum, p) => sum + (p.defaultSize ?? 0), 0);
+    const missing = panes.filter((p) => p.defaultSize === undefined).length;
+    const share = missing > 0 ? Math.max(10, (100 - given) / missing) : 0;
+    return Object.fromEntries(panes.map((p) => [p.id, stored[p.id] ?? p.defaultSize ?? share]));
+}
+const STEP = 5;
+/**
+ * Resizable panes with the ARIA window-splitter pattern: each handle is a
+ * focusable `separator` with its value as the pane's share of the group;
+ * the arrow keys step it, Home and End take it to its bounds, and the
+ * pointer drags it. Sizes are flex weights, so a collapsed pane's room goes
+ * to its neighbours and comes back when it reopens. With `storageKey` they
+ * are remembered per person.
+ */
+export function PaneGroup({ orientation = "horizontal", storageKey, onSizesChange, className, children, }) {
+    const { messages } = useUI();
+    const groupRef = React.useRef(null);
+    const baseId = React.useId();
+    const horizontal = orientation === "horizontal";
+    const panes = React.Children.toArray(children).filter((child) => React.isValidElement(child) && child.type === Pane);
+    const specs = panes.map((p) => p.props);
+    const stored = React.useSyncExternalStore(subscribeLocal, () => (storageKey ? readLocal(storageKey) : null), () => null);
+    const [local, setLocal] = React.useState({});
+    const sizes = { ...resolvePaneSizes(specs, parseStored(stored)), ...local };
+    const visible = specs.filter((p) => !p.collapsed);
+    const total = visible.reduce((sum, p) => sum + (sizes[p.id] ?? 0), 0) || 1;
+    const commit = (next) => {
+        const all = { ...sizes, ...next };
+        setLocal(all);
+        if (storageKey)
+            writeLocal(storageKey, JSON.stringify(all));
+        onSizesChange?.(all);
+    };
+    /** The pair's new sizes when the first takes `want` (weight), within both panes' bounds. */
+    const resize = (a, b, want, px) => {
+        const sa = sizes[a.id] ?? 0;
+        const sb = sizes[b.id] ?? 0;
+        const pair = sa + sb;
+        const w = (pct) => (pct / 100) * total;
+        const lo = Math.max(w(bound(a.minSize, px, 0)), pair - w(bound(b.maxSize, px, 100)), 0);
+        const hi = Math.min(w(bound(a.maxSize, px, 100)), pair - w(bound(b.minSize, px, 0)), pair);
+        const next = Math.min(Math.max(want, lo), Math.max(lo, hi));
+        return { [a.id]: next, [b.id]: pair - next };
+    };
+    const groupPx = () => {
+        const rect = groupRef.current?.getBoundingClientRect();
+        return rect ? (horizontal ? rect.width : rect.height) : 0;
+    };
+    const startDrag = (a, b) => (event) => {
+        if (event.button !== 0)
+            return;
+        event.preventDefault();
+        const handle = event.currentTarget;
+        handle.setPointerCapture?.(event.pointerId);
+        handle.focus();
+        const start = horizontal ? event.clientX : event.clientY;
+        const px = groupPx();
+        const from = sizes[a.id] ?? 0;
+        let latest = {};
+        const onMove = (e) => {
+            const delta = (horizontal ? e.clientX : e.clientY) - start;
+            latest = resize(a, b, from + (px > 0 ? (delta / px) * total : 0), px);
+            setLocal((current) => ({ ...current, ...latest }));
+        };
+        const onUp = () => {
+            handle.removeEventListener("pointermove", onMove);
+            handle.removeEventListener("pointerup", onUp);
+            handle.removeEventListener("pointercancel", onUp);
+            if (Object.keys(latest).length > 0)
+                commit(latest);
+        };
+        handle.addEventListener("pointermove", onMove);
+        handle.addEventListener("pointerup", onUp);
+        handle.addEventListener("pointercancel", onUp);
+    };
+    const onHandleKey = (a, b) => (event) => {
+        const px = groupPx();
+        const step = (STEP / 100) * total;
+        const now = sizes[a.id] ?? 0;
+        const back = horizontal ? "ArrowLeft" : "ArrowUp";
+        const forward = horizontal ? "ArrowRight" : "ArrowDown";
+        let want = null;
+        if (event.key === back)
+            want = now - step;
+        else if (event.key === forward)
+            want = now + step;
+        else if (event.key === "Home")
+            want = 0;
+        else if (event.key === "End")
+            want = Number.POSITIVE_INFINITY;
+        if (want === null)
+            return;
+        event.preventDefault();
+        commit(resize(a, b, want, px));
+    };
+    return (_jsx("div", { ref: groupRef, "data-slot": "pane-group", "data-orientation": orientation, className: cn("flex h-full min-h-0 w-full min-w-0", !horizontal && "flex-col", className), children: panes.map((pane) => {
+            const p = pane.props;
+            const i = visible.indexOf(p);
+            const next = i >= 0 ? visible[i + 1] : undefined;
+            const share = ((sizes[p.id] ?? 0) / total) * 100;
+            const px = (v) => typeof v === "string" && v.endsWith("px") ? v : undefined;
+            return (_jsxs(React.Fragment, { children: [_jsx("div", { id: `${baseId}-${p.id}`, "data-slot": "pane", hidden: p.collapsed, className: cn("min-h-0 min-w-0 overflow-hidden", p.className), style: {
+                            flex: `${sizes[p.id] ?? 0} 1 0px`,
+                            [horizontal ? "minWidth" : "minHeight"]: px(p.minSize),
+                            [horizontal ? "maxWidth" : "maxHeight"]: px(p.maxSize),
+                        }, children: p.children }), next && (_jsx("div", { role: "separator", tabIndex: 0, "aria-orientation": horizontal ? "vertical" : "horizontal", "aria-controls": `${baseId}-${p.id}`, "aria-label": messages.workbench.resize(p.label), "aria-valuenow": Math.round(share), "aria-valuemin": 0, "aria-valuemax": 100, "data-slot": "pane-handle", className: cn("relative shrink-0 bg-border outline-hidden transition-colors select-none hover:bg-ring focus-visible:bg-ring active:bg-ring", "after:absolute after:content-['']", horizontal
+                            ? "w-px cursor-col-resize after:-inset-x-1 after:inset-y-0"
+                            : "h-px cursor-row-resize after:inset-x-0 after:-inset-y-1"), onPointerDown: startDrag(p, next), onKeyDown: onHandleKey(p, next) }))] }, p.id));
+        }) }));
+}

package/dist/workbench/PendingChangesBar.d.ts

@@ -0,0 +1,20 @@
+import type { PendingCounts } from "./pending.js";
+export interface PendingChangesBarProps {
+    counts: PendingCounts;
+    onCommit: () => void;
+    onDiscard: () => void;
+    committing?: boolean;
+    /** The last commit's failure: nothing was written, the changes are still pending. */
+    error?: string | null;
+    /** 1-based row the failure belongs to, when the host reported one. */
+    errorRow?: number | null;
+    /** A note under the counts ("No primary key: rows can be added, not changed"). */
+    note?: string | null;
+    className?: string;
+}
+/**
+ * What is waiting to be written, with Commit and Discard. Hidden while
+ * nothing is pending and no error stands. The warn tone: pending is a state
+ * to notice, not a failure; a failed commit is the error tone.
+ */
+export declare function PendingChangesBar({ counts, onCommit, onDiscard, committing, error, errorRow, note, className, }: PendingChangesBarProps): import("react").JSX.Element | null;

package/dist/workbench/PendingChangesBar.js

@@ -0,0 +1,19 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CheckIcon, LoaderCircleIcon, TriangleAlertIcon, XIcon } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { Button } from "../primitives/Button.js";
+import { useUI } from "../provider/UIProvider.js";
+import { PILL_TONE } from "../status/tones.js";
+/**
+ * What is waiting to be written, with Commit and Discard. Hidden while
+ * nothing is pending and no error stands. The warn tone: pending is a state
+ * to notice, not a failure; a failed commit is the error tone.
+ */
+export function PendingChangesBar({ counts, onCommit, onDiscard, committing = false, error, errorRow, note, className, }) {
+    const { messages } = useUI();
+    const t = messages.workbench;
+    if (counts.total === 0 && !error)
+        return null;
+    return (_jsxs("section", { "aria-label": t.gridPendingChanges, "data-slot": "pending-changes-bar", className: cn("shrink-0", className), children: [counts.total > 0 && (_jsxs("div", { className: cn("flex flex-wrap items-center gap-x-3 gap-y-1 border-x-0 border-t-0 border-b px-3 py-1.5 text-xs", PILL_TONE.warn), children: [_jsx(TriangleAlertIcon, { "aria-hidden": true, className: "size-3.5 shrink-0" }), _jsx("span", { className: "font-medium", role: "status", children: t.gridPendingSummary(counts.inserts, counts.updates, counts.deletes) }), note && _jsx("span", { children: note }), _jsxs("span", { className: "ml-auto flex items-center gap-1", children: [_jsxs(Button, { variant: "ghost", size: "xs", onClick: onDiscard, disabled: committing, children: [_jsx(XIcon, { "aria-hidden": true }), t.gridDiscard] }), _jsxs(Button, { size: "xs", onClick: onCommit, disabled: committing, children: [committing ? (_jsx(LoaderCircleIcon, { "aria-hidden": true, className: "animate-spin motion-reduce:animate-none" })) : (_jsx(CheckIcon, { "aria-hidden": true })), committing ? t.gridCommitting : t.gridCommit] })] })] })), error && (_jsx("p", { role: "alert", className: cn("border-x-0 border-t-0 border-b px-3 py-1.5 text-xs", PILL_TONE.error), children: t.gridCommitFailed(error, errorRow ?? null) }))] }));
+}

package/dist/workbench/Shortcuts.d.ts

@@ -0,0 +1,50 @@
+import * as React from "react";
+export interface ShortcutDefinition {
+    /** Stable id: the help dialog's key, and how a palette entry names its shortcut. */
+    id: string;
+    /** The chord: `"Mod+K"`, `"Mod+Shift+A"`, `"F2"`. */
+    keys: string;
+    /** What it does, for the help dialog. */
+    label: string;
+    /** The help dialog's heading for it ("General", "Editor"). */
+    group?: string;
+    run: (event: KeyboardEvent) => void;
+    /** False keeps it listed but inert. Defaults to true. */
+    enabled?: boolean;
+    /**
+     * Fire while the focus is in a text field. Chords with Ctrl, Command or Alt
+     * fire there anyway; a bare key (F2, Delete) does not unless this is set.
+     */
+    inEditable?: boolean;
+    /** Listed in the help dialog. Defaults to true. */
+    listed?: boolean;
+}
+/** What the help dialog shows: a definition without its handler. */
+export type ShortcutEntry = Pick<ShortcutDefinition, "id" | "keys" | "label" | "group">;
+/**
+ * Binds keyboard shortcuts while the component is mounted, and lists them in
+ * `KeyboardShortcutsDialog`. Handlers may change every render; the chords
+ * re-register only when an id, chord or label changes.
+ */
+export declare function useShortcuts(definitions: ShortcutDefinition[]): void;
+/** Every shortcut bound on the page right now, for a help dialog or a palette. */
+export declare function useRegisteredShortcuts(): ShortcutEntry[];
+export interface ShortcutKeysProps extends React.ComponentProps<"span"> {
+    /** The chord, `"Mod+K"`. */
+    keys: string;
+    /** Draw Mac glyphs. Detected from the platform when left out. */
+    mac?: boolean;
+}
+/** A chord as key caps. The caps are drawn; the spoken name joins the keys with "+". */
+export declare function ShortcutKeys({ keys, mac, className, ...props }: ShortcutKeysProps): React.JSX.Element;
+export interface KeyboardShortcutsDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    /** The shortcuts to list. Defaults to every one registered on the page. */
+    shortcuts?: readonly ShortcutEntry[];
+    mac?: boolean;
+    /** Groups without a name land under this heading. Defaults to "General". */
+    defaultGroup?: string;
+}
+/** The help overlay: every shortcut, grouped, with its key caps. */
+export declare function KeyboardShortcutsDialog({ open, onOpenChange, shortcuts, mac, defaultGroup, }: KeyboardShortcutsDialogProps): React.JSX.Element;

package/dist/workbench/Shortcuts.js

@@ -0,0 +1,109 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/cn.js";
+import { Dialog, DialogContent, DialogDescription, DialogTitle } from "../overlays/Dialog.js";
+import { useUI } from "../provider/UIProvider.js";
+import { isMacPlatform, matchesShortcut, parseShortcut, shortcutKeys } from "./keys.js";
+/**
+ * The page's shortcut registry: one keydown listener on the document for
+ * every `useShortcuts` call. The most recently mounted binding of a chord
+ * wins, so a focused editor can take over a chord the shell also binds.
+ */
+const registry = {
+    entries: [],
+    version: 0,
+    listeners: new Set(),
+    snapshot: [],
+};
+function changed() {
+    registry.version += 1;
+    const seen = new Set();
+    registry.snapshot = registry.entries
+        .flatMap((e) => e.ref.current)
+        .filter((d) => d.listed !== false && !seen.has(d.id) && seen.add(d.id))
+        .map(({ id, keys, label, group }) => ({ id, keys, label, group }));
+    for (const listener of registry.listeners)
+        listener();
+}
+function isEditable(target) {
+    if (!(target instanceof HTMLElement))
+        return false;
+    return target.isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(target.tagName);
+}
+function onKeyDown(event) {
+    if (event.defaultPrevented)
+        return;
+    const mac = isMacPlatform();
+    const editable = isEditable(event.target);
+    for (let i = registry.entries.length - 1; i >= 0; i -= 1) {
+        for (const def of registry.entries[i]?.ref.current ?? []) {
+            if (def.enabled === false)
+                continue;
+            const chord = parseShortcut(def.keys);
+            if (editable && !def.inEditable && !(chord.mod || chord.ctrl || chord.meta || chord.alt)) {
+                continue;
+            }
+            if (matchesShortcut(event, chord, mac)) {
+                event.preventDefault();
+                def.run(event);
+                return;
+            }
+        }
+    }
+}
+/**
+ * Binds keyboard shortcuts while the component is mounted, and lists them in
+ * `KeyboardShortcutsDialog`. Handlers may change every render; the chords
+ * re-register only when an id, chord or label changes.
+ */
+export function useShortcuts(definitions) {
+    const ref = React.useRef(definitions);
+    const signature = definitions
+        .map((d) => `${d.id}\u0000${d.keys}\u0000${d.label}\u0000${d.group ?? ""}\u0000${d.listed}`)
+        .join("\u0001");
+    React.useLayoutEffect(() => {
+        ref.current = definitions;
+    });
+    React.useEffect(() => {
+        const entry = { ref };
+        registry.entries.push(entry);
+        if (registry.entries.length === 1)
+            document.addEventListener("keydown", onKeyDown);
+        changed();
+        return () => {
+            registry.entries = registry.entries.filter((e) => e !== entry);
+            if (registry.entries.length === 0)
+                document.removeEventListener("keydown", onKeyDown);
+            changed();
+        };
+    }, [signature]);
+}
+const subscribe = (listener) => {
+    registry.listeners.add(listener);
+    return () => registry.listeners.delete(listener);
+};
+const getSnapshot = () => registry.snapshot;
+const EMPTY = [];
+/** Every shortcut bound on the page right now, for a help dialog or a palette. */
+export function useRegisteredShortcuts() {
+    return React.useSyncExternalStore(subscribe, getSnapshot, () => EMPTY);
+}
+/** A chord as key caps. The caps are drawn; the spoken name joins the keys with "+". */
+export function ShortcutKeys({ keys, mac, className, ...props }) {
+    const { messages } = useUI();
+    const parts = shortcutKeys(keys, mac ?? isMacPlatform());
+    return (_jsx("span", { className: cn("inline-flex items-center gap-0.5", className), ...props, children: parts.map((part, i) => (_jsxs(React.Fragment, { children: [i > 0 && _jsx("span", { className: "sr-only", children: messages.workbench.keyJoin }), _jsx("kbd", { className: "min-w-5 rounded-lg border bg-muted px-1 py-0.5 text-center font-mono text-2xs text-muted-foreground", children: part })] }, `${part}-${i}`))) }));
+}
+/** The help overlay: every shortcut, grouped, with its key caps. */
+export function KeyboardShortcutsDialog({ open, onOpenChange, shortcuts, mac, defaultGroup = "General", }) {
+    const { messages } = useUI();
+    const registered = useRegisteredShortcuts();
+    const list = shortcuts ?? registered;
+    const groups = new Map();
+    for (const s of list) {
+        const key = s.group ?? defaultGroup;
+        groups.set(key, [...(groups.get(key) ?? []), s]);
+    }
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: "max-w-md gap-3 p-4", children: [_jsx(DialogTitle, { className: "text-sm font-medium", children: messages.workbench.keyboardShortcuts }), _jsx(DialogDescription, { className: "sr-only", children: messages.workbench.keyboardShortcutsDescription }), _jsx("div", { className: "max-h-[60vh] overflow-y-auto", children: [...groups].map(([group, entries]) => (_jsxs("section", { "aria-label": group, className: "mb-3 last:mb-0", children: [_jsx("h3", { className: "px-1 py-1 text-2xs font-semibold tracking-wider text-muted-foreground uppercase", children: group }), _jsx("dl", { children: entries.map((s) => (_jsxs("div", { className: "flex items-center justify-between gap-4 rounded-lg px-1 py-1 text-sm", children: [_jsx("dt", { children: s.label }), _jsx("dd", { children: _jsx(ShortcutKeys, { keys: s.keys, mac: mac }) })] }, s.id))) })] }, group))) })] }) }));
+}