@calliopelabs/ui 0.16.0 → 0.18.0

package/dist/workbench/DataProfile.js

@@ -0,0 +1,51 @@
+"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 { useUI } from "../provider/UIProvider.js";
+import { EmptyState } from "../states/EmptyState.js";
+import { columnSignature } from "./grid-model.js";
+import { formatStatValue, profileColumn } from "./grid-stats.js";
+import { TruncationBanner } from "./TruncationBanner.js";
+/** Distinct counts and frequencies are a pass per column: past this the profile samples a prefix, and says so. */
+const PROFILE_ROW_CAP = 10_000;
+/**
+ * A card per column: completeness, distinct values, range, mean and median
+ * for numbers, and the most frequent values. Honest about its sample: a
+ * profile of the fetched rows is not a profile of the table.
+ */
+export function DataProfile(props) {
+    return _jsx(ProfileSurface, { ...props }, columnSignature(props.columns));
+}
+function ProfileSurface({ columns, rows, truncated, rowCap = PROFILE_ROW_CAP, className, }) {
+    const { messages } = useUI();
+    const t = messages.workbench;
+    const names = React.useMemo(() => columns.map((c) => (typeof c === "string" ? c : c.name)), [columns]);
+    const sample = React.useMemo(() => (rows.length > rowCap ? rows.slice(0, rowCap) : rows), [rows, rowCap]);
+    const profiles = React.useMemo(() => names.map((name) => profileColumn(name, sample.map((row) => row[name]))), [names, sample]);
+    if (rows.length === 0) {
+        return _jsx(EmptyState, { title: t.profileNoData, className: className });
+    }
+    const nulls = profiles.reduce((sum, p) => sum + p.nulls, 0);
+    const notes = [truncated, rows.length > rowCap ? t.profileCap(rowCap, rows.length) : null].filter(Boolean);
+    return (_jsxs("section", { "aria-label": t.profileLabel, "data-slot": "data-profile", className: cn("@container flex min-h-0 flex-col", className), children: [notes.length > 0 && _jsx(TruncationBanner, { children: notes.join(" ") }), _jsx("p", { className: "shrink-0 border-b bg-muted/40 px-3 py-1.5 text-xs text-muted-foreground", children: t.profileSummary(sample.length, names.length, nulls) }), _jsx("ul", { className: "grid min-h-0 flex-1 grid-cols-1 content-start gap-3 overflow-auto p-3 @md:grid-cols-2 @3xl:grid-cols-3", children: profiles.map((profile) => (_jsx(ProfileCard, { profile: profile }, profile.name))) })] }));
+}
+function ProfileCard({ profile }) {
+    const { messages } = useUI();
+    const t = messages.workbench;
+    const complete = profile.count > 0 ? 1 - profile.nulls / profile.count : 0;
+    const rows = [
+        [t.gridStat("rows"), profile.count.toLocaleString()],
+        [t.gridStat("nulls"), profile.nulls.toLocaleString()],
+        [t.gridStat("distinct"), profile.distinct.toLocaleString()],
+    ];
+    if (profile.min !== undefined)
+        rows.push([t.gridStat("min"), formatStatValue(profile.min)]);
+    if (profile.max !== undefined)
+        rows.push([t.gridStat("max"), formatStatValue(profile.max)]);
+    if (profile.mean !== undefined)
+        rows.push([t.profileMean, formatStatValue(profile.mean)]);
+    if (profile.median !== undefined)
+        rows.push([t.profileMedian, formatStatValue(profile.median)]);
+    return (_jsxs("li", { className: "min-w-0 space-y-3 rounded-lg border bg-card p-3 text-card-foreground", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("h3", { className: "min-w-0 flex-1 truncate font-mono text-sm font-medium", title: profile.name, children: profile.name }), _jsx("span", { className: "shrink-0 rounded-full bg-muted px-2 py-0.5 text-xs text-muted-foreground", children: t.profileKind(profile.kind) })] }), _jsxs("div", { className: "space-y-1", children: [_jsx("p", { className: "text-xs text-muted-foreground", children: t.profileComplete(complete) }), _jsx("div", { className: "h-1.5 overflow-hidden rounded-full bg-muted", role: "presentation", children: _jsx("div", { className: "h-full rounded-full bg-chart-1", style: { width: `${complete * 100}%` } }) })] }), _jsx("dl", { className: "grid grid-cols-2 gap-x-4 gap-y-1 text-xs", children: rows.map(([label, value]) => (_jsxs("div", { className: "flex min-w-0 justify-between gap-2", children: [_jsx("dt", { className: "text-muted-foreground", children: label }), _jsx("dd", { className: "truncate tabular-nums", title: value, children: value })] }, label))) }), profile.top.length > 0 && (_jsxs("div", { className: "space-y-1", children: [_jsx("p", { className: "text-xs text-muted-foreground", children: t.profileTopValues }), _jsx("ol", { className: "space-y-1", children: profile.top.map((top) => (_jsxs("li", { className: "flex items-center gap-2 text-xs", children: [_jsxs("span", { className: "relative h-5 min-w-0 flex-1 overflow-hidden rounded-sm bg-muted", children: [_jsx("span", { "aria-hidden": true, className: "absolute inset-y-0 left-0 bg-chart-1/25", style: { width: `${top.share * 100}%` } }), _jsx("span", { className: "relative block truncate px-1.5 leading-5", title: top.value, children: top.value })] }), _jsx("span", { className: "w-12 shrink-0 text-right text-muted-foreground tabular-nums", children: top.count.toLocaleString() })] }, top.value))) })] }))] }));
+}

package/dist/workbench/EditorTabs.d.ts

@@ -0,0 +1,62 @@
+import * as React from "react";
+export interface EditorTab {
+    id: string;
+    title: string;
+    icon?: React.ReactNode;
+    /** Unsaved changes: a dot in place of the close button, and "unsaved" in its name. */
+    dirty?: boolean;
+    /** Defaults to true. A welcome or home tab sets false. */
+    closable?: boolean;
+    /** Shown on hover: a full path, a server and database. Defaults to the title. */
+    hint?: string;
+}
+export interface EditorTabsProps {
+    tabs: readonly EditorTab[];
+    /** The tab on screen. */
+    activeId: string | null;
+    onSelect: (id: string) => void;
+    /** Close a tab: its close button, a middle click, or Delete on it. */
+    onClose?: (id: string) => void;
+    /**
+     * Move a tab from one index to another: dragging it, or Alt+Shift with
+     * Left or Right. Leave it out and the tabs stay in place.
+     */
+    onReorder?: (from: number, to: number) => void;
+    /** Context-menu items (`ContextMenuItem`s) for a tab: close others, split, duplicate. */
+    contextMenu?: (tab: EditorTab) => React.ReactNode;
+    /** Controls after the strip: new tab, close group, a panel toggle. */
+    actions?: React.ReactNode;
+    /** The id of the panel the active tab shows; `EditorGroup` sets it. */
+    panelId?: string;
+    /** This group has the focus among several split groups: an accent line marks it. */
+    focused?: boolean;
+    /** The strip's name. Defaults to "Open editors". */
+    label?: string;
+    /** Prefix for the tabs' element ids. Defaults to a generated one. */
+    idPrefix?: string;
+    className?: string;
+}
+/** A tab's element id, for a panel's `aria-labelledby`. */
+export declare function editorTabId(prefix: string, tabId: string): string;
+/**
+ * The editor tab strip of an IDE layout, with the ARIA tabs pattern: one tab
+ * stop, Left and Right move and show, Home and End jump. Tabs carry an
+ * unsaved marker, close by button, middle click or Delete, reorder by drag
+ * or Alt+Shift+Left/Right, and the strip scrolls with a menu of every tab
+ * once it overflows. Host-driven: it holds no tab state of its own.
+ */
+export declare function EditorTabs({ tabs, activeId, onSelect, onClose, onReorder, contextMenu, actions, panelId, focused, label, idPrefix, className, }: EditorTabsProps): React.JSX.Element;
+export interface EditorGroupProps extends Omit<EditorTabsProps, "panelId" | "idPrefix"> {
+    /** The active tab's content. */
+    children?: React.ReactNode;
+    /** Shown when no tab is open. */
+    empty?: React.ReactNode;
+    /** The group was clicked or focused: a split layout makes it the active group. */
+    onFocusGroup?: () => void;
+    panelClassName?: string;
+}
+/**
+ * Tabs and the panel under them: one editor group. A split layout puts
+ * several in a `PaneGroup`, marking the one with focus.
+ */
+export declare function EditorGroup({ children, empty, onFocusGroup, panelClassName, className, ...tabs }: EditorGroupProps): React.JSX.Element;

package/dist/workbench/EditorTabs.js

@@ -0,0 +1,115 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDownIcon, XIcon } from "lucide-react";
+import * as React from "react";
+import { cn } from "../lib/cn.js";
+import { ContextMenu, ContextMenuContent, ContextMenuTrigger } from "../primitives/ContextMenu.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "../primitives/DropdownMenu.js";
+import { useUI } from "../provider/UIProvider.js";
+const DRAG_TYPE = "application/x-calliope-editor-tab";
+/** A tab's element id, for a panel's `aria-labelledby`. */
+export function editorTabId(prefix, tabId) {
+    return `${prefix}-tab-${tabId}`;
+}
+/**
+ * The editor tab strip of an IDE layout, with the ARIA tabs pattern: one tab
+ * stop, Left and Right move and show, Home and End jump. Tabs carry an
+ * unsaved marker, close by button, middle click or Delete, reorder by drag
+ * or Alt+Shift+Left/Right, and the strip scrolls with a menu of every tab
+ * once it overflows. Host-driven: it holds no tab state of its own.
+ */
+export function EditorTabs({ tabs, activeId, onSelect, onClose, onReorder, contextMenu, actions, panelId, focused = false, label, idPrefix, className, }) {
+    const { messages } = useUI();
+    const m = messages.workbench;
+    const generated = React.useId();
+    const prefix = idPrefix ?? generated;
+    const refs = React.useRef(new Map());
+    const [dropIndex, setDropIndex] = React.useState(null);
+    const tabStop = tabs.some((t) => t.id === activeId) ? activeId : tabs[0]?.id;
+    React.useEffect(() => {
+        if (activeId)
+            refs.current.get(activeId)?.scrollIntoView?.({ block: "nearest", inline: "nearest" });
+    }, [activeId]);
+    const focusTab = (index) => {
+        const tab = tabs[index];
+        if (!tab)
+            return;
+        onSelect(tab.id);
+        refs.current.get(tab.id)?.focus();
+    };
+    const onKeyDown = (index, tab) => (event) => {
+        const last = tabs.length - 1;
+        if (event.altKey && event.shiftKey && onReorder) {
+            const to = event.key === "ArrowLeft" ? index - 1 : event.key === "ArrowRight" ? index + 1 : -1;
+            if (to >= 0 && to <= last) {
+                event.preventDefault();
+                onReorder(index, to);
+            }
+            return;
+        }
+        if (event.key === "ArrowRight")
+            focusTab(index === last ? 0 : index + 1);
+        else if (event.key === "ArrowLeft")
+            focusTab(index === 0 ? last : index - 1);
+        else if (event.key === "Home")
+            focusTab(0);
+        else if (event.key === "End")
+            focusTab(last);
+        else if (event.key === "Delete" && onClose && tab.closable !== false)
+            onClose(tab.id);
+        else
+            return;
+        event.preventDefault();
+    };
+    const strip = tabs.map((tab, index) => {
+        const active = tab.id === activeId;
+        const closable = tab.closable !== false && onClose !== undefined;
+        const item = (_jsxs("div", { role: "presentation", draggable: onReorder !== undefined, onDragStart: (event) => {
+                event.dataTransfer.setData(DRAG_TYPE, String(index));
+                event.dataTransfer.effectAllowed = "move";
+            }, onDragOver: (event) => {
+                if (!event.dataTransfer.types.includes(DRAG_TYPE))
+                    return;
+                event.preventDefault();
+                setDropIndex(index);
+            }, onDragLeave: () => setDropIndex((i) => (i === index ? null : i)), onDrop: (event) => {
+                const from = Number(event.dataTransfer.getData(DRAG_TYPE));
+                setDropIndex(null);
+                if (!Number.isNaN(from) && from !== index) {
+                    event.preventDefault();
+                    onReorder?.(from, index);
+                }
+            }, onMouseDown: (event) => {
+                if (event.button === 1 && closable) {
+                    event.preventDefault();
+                    onClose?.(tab.id);
+                }
+            }, className: cn("group relative flex h-full max-w-52 min-w-28 shrink-0 items-center border-r text-xs transition-colors", active
+                ? "bg-background text-foreground"
+                : "bg-surface-1 text-muted-foreground hover:bg-surface-2 hover:text-foreground", dropIndex === index && "ring-2 ring-ring ring-inset"), children: [active && (_jsx("span", { "aria-hidden": true, className: cn("absolute inset-x-0 top-0 h-0.5", focused ? "bg-primary" : "bg-ring") })), _jsxs("button", { ref: (el) => {
+                        if (el)
+                            refs.current.set(tab.id, el);
+                        else
+                            refs.current.delete(tab.id);
+                    }, type: "button", role: "tab", id: editorTabId(prefix, tab.id), "aria-selected": active, "aria-controls": active ? panelId : undefined, tabIndex: tab.id === tabStop ? 0 : -1, title: tab.hint ?? tab.title, onClick: () => onSelect(tab.id), onKeyDown: onKeyDown(index, tab), className: "flex h-full min-w-0 flex-1 items-center gap-1.5 pr-1 pl-3 outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset", children: [tab.icon && (_jsx("span", { "aria-hidden": true, className: "flex shrink-0 [&_svg]:size-3.5", children: tab.icon })), _jsx("span", { className: "truncate", children: tab.title }), tab.dirty && (_jsxs(_Fragment, { children: [" ", _jsx("span", { className: "sr-only", children: m.unsaved })] }))] }), _jsxs("span", { className: "relative mr-1.5 flex size-4 shrink-0 items-center justify-center", children: [tab.dirty && (_jsx("span", { "aria-hidden": true, className: cn("size-2 rounded-full bg-foreground/60", closable && "group-hover:hidden") })), closable && (_jsx("button", { type: "button", tabIndex: -1, "aria-hidden": true, onClick: (event) => {
+                                event.stopPropagation();
+                                onClose?.(tab.id);
+                            }, className: cn("absolute inset-0 flex items-center justify-center rounded-lg hover:bg-accent hover:text-accent-foreground", tab.dirty
+                                ? "hidden group-hover:flex"
+                                : active
+                                    ? "opacity-70"
+                                    : "opacity-0 group-hover:opacity-70"), children: _jsx(XIcon, { className: "size-3" }) }))] })] }));
+        return contextMenu ? (_jsxs(ContextMenu, { modal: false, children: [_jsx(ContextMenuTrigger, { asChild: true, children: item }), _jsx(ContextMenuContent, { children: contextMenu(tab) })] }, tab.id)) : (_jsx(React.Fragment, { children: item }, tab.id));
+    });
+    return (_jsxs("div", { "data-slot": "editor-tabs", className: cn("flex h-9 shrink-0 items-stretch border-b bg-surface-1", className), children: [_jsx("div", { role: "tablist", "aria-label": label ?? m.openEditors, className: "flex min-w-0 flex-1 items-stretch overflow-x-auto overflow-y-hidden", children: strip }), tabs.length > 1 && (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs("button", { type: "button", "aria-label": m.allTabs(tabs.length), className: "flex items-center gap-0.5 px-1.5 text-muted-foreground outline-hidden transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset", children: [_jsx(ChevronDownIcon, { "aria-hidden": true, className: "size-3.5" }), _jsx("span", { "aria-hidden": true, className: "text-2xs tabular-nums", children: tabs.length })] }) }), _jsx(DropdownMenuContent, { align: "end", className: "max-h-[60vh] max-w-80", children: tabs.map((tab) => (_jsxs(DropdownMenuItem, { className: cn("text-xs", tab.id === activeId && "font-medium"), onSelect: () => focusTab(tabs.indexOf(tab)), children: [tab.icon && (_jsx("span", { "aria-hidden": true, className: "flex [&_svg]:size-3.5", children: tab.icon })), _jsx("span", { className: "truncate", children: tab.title }), tab.dirty && (_jsxs(_Fragment, { children: [" ", _jsx("span", { className: "sr-only", children: m.unsaved }), _jsx("span", { "aria-hidden": true, className: "ml-auto size-1.5 shrink-0 rounded-full bg-foreground/60" })] }))] }, tab.id))) })] })), actions && _jsx("div", { className: "flex items-stretch border-l", children: actions })] }));
+}
+/**
+ * Tabs and the panel under them: one editor group. A split layout puts
+ * several in a `PaneGroup`, marking the one with focus.
+ */
+export function EditorGroup({ children, empty, onFocusGroup, panelClassName, className, ...tabs }) {
+    const prefix = React.useId();
+    const panelId = `${prefix}-panel`;
+    const active = tabs.tabs.find((t) => t.id === tabs.activeId);
+    return (_jsxs("div", { "data-slot": "editor-group", className: cn("flex h-full min-h-0 flex-col", className), onFocusCapture: onFocusGroup, onPointerDownCapture: onFocusGroup, children: [_jsx(EditorTabs, { ...tabs, idPrefix: prefix, panelId: panelId }), active ? (_jsx("div", { role: "tabpanel", id: panelId, "aria-labelledby": editorTabId(prefix, active.id), className: cn("min-h-0 flex-1 overflow-hidden", panelClassName), children: children })) : (_jsx("div", { className: cn("min-h-0 flex-1 overflow-hidden", panelClassName), children: empty }))] }));
+}

package/dist/workbench/GridCell.d.ts

@@ -0,0 +1,19 @@
+import type * as React from "react";
+import { type ColumnType, type GridColumnMeta } from "./grid-model.js";
+export interface ColumnTypeIconProps {
+    type: ColumnType;
+    className?: string;
+}
+/** A column type's glyph, named by the type. Identity, not status: it takes no colour. */
+export declare function ColumnTypeIcon({ type, className }: ColumnTypeIconProps): React.JSX.Element;
+export interface ColumnKeyIconsProps {
+    column: Pick<GridColumnMeta, "primaryKey" | "foreignKey" | "references">;
+}
+/** A column's primary and foreign key marks, each named. */
+export declare function ColumnKeyIcons({ column }: ColumnKeyIconsProps): React.JSX.Element;
+export interface GridCellValueProps {
+    value: unknown;
+    className?: string;
+}
+/** How one value reads in a cell: NULL, empty text and binary are marked so they never pass for data. */
+export declare function GridCellValue({ value, className }: GridCellValueProps): React.JSX.Element;

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 {};