@calliopelabs/ui 0.16.0 → 0.18.0

package/dist/workbench/ActivityBar.js

@@ -0,0 +1,57 @@
+"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 { Tooltip, TooltipContent, TooltipTrigger } from "../primitives/Tooltip.js";
+import { useUI } from "../provider/UIProvider.js";
+/**
+ * The rail of views down the left of an IDE layout: a vertical toolbar with
+ * one tab stop (Up and Down move, Home and End jump), each item a toggle
+ * button that says whether its view is open.
+ */
+export function ActivityBar({ items, footer = [], active, onActiveChange, showLabels = true, className, }) {
+    const { messages } = useUI();
+    const all = [...items, ...footer];
+    const [focusId, setFocusId] = React.useState(undefined);
+    const tabStop = all.some((i) => i.id === focusId)
+        ? focusId
+        : (all.find((i) => i.id === active)?.id ?? all[0]?.id);
+    const refs = React.useRef(new Map());
+    const onKeyDown = (event) => {
+        const index = all.findIndex((i) => i.id === tabStop);
+        let next = null;
+        if (event.key === "ArrowDown")
+            next = (index + 1) % all.length;
+        else if (event.key === "ArrowUp")
+            next = (index - 1 + all.length) % all.length;
+        else if (event.key === "Home")
+            next = 0;
+        else if (event.key === "End")
+            next = all.length - 1;
+        if (next === null)
+            return;
+        event.preventDefault();
+        const id = all[next]?.id;
+        if (id === undefined)
+            return;
+        setFocusId(id);
+        refs.current.get(id)?.focus();
+    };
+    const button = (item) => {
+        const pressed = item.pressed ?? item.id === active;
+        const title = item.title ?? item.label;
+        const count = typeof item.badge === "string" || typeof item.badge === "number" ? ` (${item.badge})` : "";
+        return (_jsxs(Tooltip, { delayDuration: 400, children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs("button", { ref: (el) => {
+                            if (el)
+                                refs.current.set(item.id, el);
+                            else
+                                refs.current.delete(item.id);
+                        }, type: "button", tabIndex: item.id === tabStop ? 0 : -1, "aria-pressed": pressed, "aria-label": `${title}${count}`, onFocus: () => setFocusId(item.id), onClick: () => {
+                            if (item.onSelect)
+                                item.onSelect();
+                            else
+                                onActiveChange(item.id === active ? null : item.id);
+                        }, className: cn("relative flex w-full flex-col items-center gap-0.5 py-2 text-sidebar-muted-foreground outline-hidden transition-colors hover:text-sidebar-foreground focus-visible:ring-2 focus-visible:ring-sidebar-ring focus-visible:ring-inset", pressed && "text-sidebar-primary hover:text-sidebar-primary"), children: [pressed && (_jsx("span", { "aria-hidden": true, className: "absolute top-1/2 left-0 h-8 w-0.5 -translate-y-1/2 rounded-full bg-sidebar-primary" })), _jsxs("span", { "aria-hidden": true, className: "relative flex [&_svg]:size-4.5", children: [item.icon, item.badge !== undefined && item.badge !== null && item.badge !== false && (_jsx("span", { className: "absolute -top-1.5 -right-2 min-w-4 rounded-full bg-sidebar-primary px-1 text-center text-2xs leading-4 text-sidebar-primary-foreground", children: item.badge }))] }), showLabels && (_jsx("span", { "aria-hidden": true, className: "text-2xs leading-none tracking-tight", children: item.label }))] }) }), _jsx(TooltipContent, { side: "right", children: title })] }, item.id));
+    };
+    return (_jsxs("div", { role: "toolbar", "aria-orientation": "vertical", "aria-label": messages.workbench.activityBar, onKeyDown: onKeyDown, className: cn("flex h-full w-14 shrink-0 flex-col border-r border-sidebar-border bg-sidebar text-sidebar-foreground", className), children: [_jsx("div", { className: "flex w-full flex-col", children: items.map(button) }), footer.length > 0 && (_jsx("div", { className: "mt-auto flex w-full flex-col pb-2", children: footer.map(button) }))] }));
+}

package/dist/workbench/BottomPanel.d.ts

@@ -0,0 +1,30 @@
+import type * as React from "react";
+export interface BottomPanelView {
+    id: string;
+    label: string;
+    icon?: React.ReactNode;
+    /** A count beside the label (history entries, running tasks). */
+    count?: number;
+    /** Something is running in it: the count takes the info tone. */
+    busy?: boolean;
+    content: React.ReactNode;
+}
+export interface BottomPanelProps {
+    views: readonly BottomPanelView[];
+    /** The view on screen. Controlled when given. */
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (id: string) => void;
+    /** The panel fills the editor area. Shows the maximize or restore button when `onMaximizedChange` is set. */
+    maximized?: boolean;
+    onMaximizedChange?: (maximized: boolean) => void;
+    /** Shows a close button. */
+    onClose?: () => void;
+    className?: string;
+}
+/**
+ * The panel under the editors (history, tasks, output, problems): views as
+ * ARIA tabs, with maximize, restore and close. The host decides whether it
+ * is open and how tall it is (in a `PaneGroup`); views stay host content.
+ */
+export declare function BottomPanel({ views, value, defaultValue, onValueChange, maximized, onMaximizedChange, onClose, className, }: BottomPanelProps): React.JSX.Element;

package/dist/workbench/BottomPanel.js

@@ -0,0 +1,20 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Maximize2Icon, Minimize2Icon, XIcon } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../primitives/Tabs.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../primitives/Tooltip.js";
+import { useUI } from "../provider/UIProvider.js";
+function IconButton({ label, onClick, children, }) {
+    return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { type: "button", "aria-label": label, onClick: onClick, className: "rounded-lg p-1 text-muted-foreground outline-hidden transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring [&_svg]:size-3.5", children: children }) }), _jsx(TooltipContent, { children: label })] }));
+}
+/**
+ * The panel under the editors (history, tasks, output, problems): views as
+ * ARIA tabs, with maximize, restore and close. The host decides whether it
+ * is open and how tall it is (in a `PaneGroup`); views stay host content.
+ */
+export function BottomPanel({ views, value, defaultValue, onValueChange, maximized = false, onMaximizedChange, onClose, className, }) {
+    const { messages } = useUI();
+    const m = messages.workbench;
+    return (_jsxs(Tabs, { value: value, defaultValue: defaultValue ?? views[0]?.id, onValueChange: onValueChange, className: cn("flex h-full min-h-0 flex-col gap-0 bg-background", className), children: [_jsxs("div", { className: "flex h-8 shrink-0 items-center border-b bg-surface-1 pr-1", children: [_jsx(TabsList, { className: "h-full flex-1 border-b-0", children: views.map((view) => (_jsxs(TabsTrigger, { value: view.id, className: "flex items-center gap-1.5 px-3 py-1 text-xs [&_svg]:size-3", children: [view.icon && (_jsx("span", { "aria-hidden": true, className: "flex", children: view.icon })), view.label, view.count !== undefined && view.count > 0 && (_jsxs(_Fragment, { children: [" ", _jsx("span", { className: cn("rounded-full px-1.5 text-2xs tabular-nums", view.busy ? "bg-info/15 text-info-fg" : "bg-muted text-muted-foreground"), children: view.count.toLocaleString() })] }))] }, view.id))) }), onMaximizedChange && (_jsx(IconButton, { label: maximized ? m.restorePanel : m.maximizePanel, onClick: () => onMaximizedChange(!maximized), children: maximized ? _jsx(Minimize2Icon, { "aria-hidden": true }) : _jsx(Maximize2Icon, { "aria-hidden": true }) })), onClose && (_jsx(IconButton, { label: m.closePanel, onClick: onClose, children: _jsx(XIcon, { "aria-hidden": true }) }))] }), views.map((view) => (_jsx(TabsContent, { value: view.id, className: "min-h-0 flex-1 overflow-hidden", children: view.content }, view.id)))] }));
+}

package/dist/workbench/CodeEditor.d.ts

@@ -0,0 +1,48 @@
+import type * as Monaco from "monaco-editor";
+import * as React from "react";
+export type MonacoApi = typeof Monaco;
+export type MonacoEditor = Monaco.editor.IStandaloneCodeEditor;
+type Loader = () => Promise<MonacoApi | {
+    default: MonacoApi;
+}>;
+/**
+ * Tell the editors how to load Monaco, once, before any mounts:
+ * `configureMonaco({ load })`, where `load` imports `monaco-editor`. The import is
+ * the host's, so its bundler resolves Monaco, splits it into its own chunk
+ * and fetches it the first time an editor mounts; an app that never shows
+ * an editor never loads it, and one without `monaco-editor` installed still
+ * builds. The host also sets `self.MonacoEnvironment` for Monaco's workers
+ * (see the README). Without a loader, editors fall back to a plain text area.
+ */
+export declare function configureMonaco(options: {
+    load: Loader;
+}): void;
+export interface CodeEditorProps {
+    value: string;
+    onChange?: (value: string) => void;
+    /** A Monaco language id: "sql", "json", "python", "typescript". Defaults to "plaintext". */
+    language?: string;
+    /** The editor's accessible name ("Query", "Pipeline spec"). */
+    label: string;
+    readOnly?: boolean;
+    /**
+     * Ctrl or Command with Enter: gets the selected text, or the whole buffer
+     * when nothing is selected.
+     */
+    onRun?: (text: string) => void;
+    /** Passed to Monaco as they are; the editor sets sensible defaults first. */
+    options?: Monaco.editor.IStandaloneEditorConstructionOptions;
+    /** The editor is ready. Return a cleanup to run when it unmounts. */
+    onMount?: (editor: MonacoEditor, monaco: MonacoApi) => void | (() => void);
+    /** Load Monaco for this editor only, instead of `configureMonaco`'s loader. Read on mount. */
+    loader?: Loader;
+    className?: string;
+}
+/**
+ * A code editor on Monaco, loaded the first time one mounts and themed from
+ * the library's tokens for the current ground (it follows a change of
+ * ground or mode). Monaco is an optional peer dependency: without it, or
+ * while it loads, a plain text area or a loading state stands in.
+ */
+export declare function CodeEditor({ value, onChange, language, label, readOnly, onRun, options, onMount, loader, className, }: CodeEditorProps): React.JSX.Element;
+export {};

package/dist/workbench/CodeEditor.js

@@ -0,0 +1,153 @@
+"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 { LoadingState } from "../states/LoadingState.js";
+import { editorTheme, readEditorPalette } from "./editor-theme.js";
+let configured = null;
+const loads = new WeakMap();
+/**
+ * Tell the editors how to load Monaco, once, before any mounts:
+ * `configureMonaco({ load })`, where `load` imports `monaco-editor`. The import is
+ * the host's, so its bundler resolves Monaco, splits it into its own chunk
+ * and fetches it the first time an editor mounts; an app that never shows
+ * an editor never loads it, and one without `monaco-editor` installed still
+ * builds. The host also sets `self.MonacoEnvironment` for Monaco's workers
+ * (see the README). Without a loader, editors fall back to a plain text area.
+ */
+export function configureMonaco(options) {
+    configured = options.load;
+}
+function loadMonaco(loader) {
+    let promise = loads.get(loader);
+    if (!promise) {
+        promise = loader().then((m) => ("default" in m && m.default ? m.default : m));
+        // A failed load may succeed later (a flaky network): do not cache it.
+        promise.catch(() => loads.delete(loader));
+        loads.set(loader, promise);
+    }
+    return promise;
+}
+const THEME = "calliope";
+/** Define and apply the theme from the tokens under `element`. Monaco themes are page-wide. */
+function applyTheme(monaco, element) {
+    const palette = readEditorPalette(element);
+    if (palette) {
+        monaco.editor.defineTheme(THEME, editorTheme(palette));
+        monaco.editor.setTheme(THEME);
+    }
+    else {
+        const dark = document.documentElement.getAttribute("data-mode") === "dark";
+        monaco.editor.setTheme(dark ? "vs-dark" : "vs");
+    }
+}
+/**
+ * A code editor on Monaco, loaded the first time one mounts and themed from
+ * the library's tokens for the current ground (it follows a change of
+ * ground or mode). Monaco is an optional peer dependency: without it, or
+ * while it loads, a plain text area or a loading state stands in.
+ */
+export function CodeEditor({ value, onChange, language = "plaintext", label, readOnly = false, onRun, options, onMount, loader, className, }) {
+    const { messages } = useUI();
+    const hostRef = React.useRef(null);
+    const editorRef = React.useRef(null);
+    const monacoRef = React.useRef(null);
+    const latest = React.useRef({ value, onChange, onRun, onMount });
+    const [status, setStatus] = React.useState(() => (loader ?? configured) ? "loading" : "fallback");
+    React.useLayoutEffect(() => {
+        latest.current = { value, onChange, onRun, onMount };
+    });
+    // The loader of the first render: an inline arrow must not recreate the editor.
+    const loaderRef = React.useRef(loader ?? configured);
+    // Mount once. Value, language and read-only follow below.
+    React.useEffect(() => {
+        const load = loaderRef.current;
+        const host = hostRef.current;
+        if (!load || !host)
+            return;
+        let cancelled = false;
+        let cleanup;
+        let observer;
+        loadMonaco(load)
+            .then((monaco) => {
+            if (cancelled)
+                return;
+            monacoRef.current = monaco;
+            applyTheme(monaco, host);
+            const mono = getComputedStyle(host).getPropertyValue("--font-mono").trim();
+            const editor = monaco.editor.create(host, {
+                value: latest.current.value,
+                language,
+                readOnly,
+                ariaLabel: label,
+                automaticLayout: true,
+                minimap: { enabled: false },
+                scrollBeyondLastLine: false,
+                fontSize: 13,
+                fontFamily: mono || undefined,
+                tabSize: 2,
+                renderLineHighlight: "line",
+                fixedOverflowWidgets: true,
+                ...options,
+            });
+            editorRef.current = editor;
+            editor.onDidChangeModelContent(() => {
+                const next = editor.getValue();
+                if (next !== latest.current.value)
+                    latest.current.onChange?.(next);
+            });
+            editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter, () => {
+                const selection = editor.getSelection();
+                const model = editor.getModel();
+                const picked = selection && model && !selection.isEmpty() ? model.getValueInRange(selection) : "";
+                latest.current.onRun?.(picked || editor.getValue());
+            });
+            // The theme follows the ground: re-read the tokens when <html> changes.
+            observer = new MutationObserver(() => applyTheme(monaco, host));
+            observer.observe(document.documentElement, { attributes: true });
+            const unmount = latest.current.onMount?.(editor, monaco);
+            cleanup = typeof unmount === "function" ? unmount : undefined;
+            setStatus("ready");
+        })
+            .catch(() => {
+            if (!cancelled)
+                setStatus("fallback");
+        });
+        return () => {
+            cancelled = true;
+            observer?.disconnect();
+            cleanup?.();
+            editorRef.current?.dispose();
+            editorRef.current = null;
+        };
+        // Recreating the editor on every option change would lose the undo stack
+        // and the cursor; those that can change are applied in place below.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    React.useEffect(() => {
+        const editor = editorRef.current;
+        const model = editor?.getModel();
+        if (!editor || !model || model.getValue() === value)
+            return;
+        // An edit, not setValue, so the person can undo past a host change.
+        editor.pushUndoStop();
+        model.pushEditOperations([], [{ range: model.getFullModelRange(), text: value }], () => null);
+        editor.pushUndoStop();
+    }, [value, status]);
+    React.useEffect(() => {
+        const model = editorRef.current?.getModel();
+        if (model && monacoRef.current)
+            monacoRef.current.editor.setModelLanguage(model, language);
+    }, [language, status]);
+    React.useEffect(() => {
+        editorRef.current?.updateOptions({ readOnly, ariaLabel: label });
+    }, [readOnly, label, status]);
+    return (_jsxs("div", { "data-slot": "code-editor", "data-status": status, className: cn("relative h-full min-h-24 w-full overflow-hidden bg-background", className), children: [_jsx("div", { ref: hostRef, className: cn("absolute inset-0", status !== "ready" && "invisible") }), status === "loading" && (_jsx(LoadingState, { className: "absolute inset-0", label: messages.workbench.editorLoading })), status === "fallback" && (_jsx("textarea", { "aria-label": label, value: value, readOnly: readOnly, spellCheck: false, onChange: (event) => onChange?.(event.target.value), onKeyDown: (event) => {
+                    if (event.key === "Enter" && (event.metaKey || event.ctrlKey) && onRun) {
+                        event.preventDefault();
+                        const t = event.currentTarget;
+                        onRun(t.value.slice(t.selectionStart, t.selectionEnd) || t.value);
+                    }
+                }, className: "absolute inset-0 resize-none bg-background p-3 font-mono text-sm text-foreground outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset" }))] }));
+}

package/dist/workbench/CommandPalette.d.ts

@@ -0,0 +1,49 @@
+import * as React from "react";
+export interface PaletteItem {
+    /** Stable: the recent list and the option's key. */
+    id: string;
+    label: string;
+    /** The heading it sits under ("Editor", "Tables", "Open tabs"). */
+    group?: string;
+    /** A decorative icon (`aria-hidden`). */
+    icon?: React.ReactNode;
+    /** Extra words the search matches. */
+    keywords?: string;
+    /** A second, quieter line: a path, a server. */
+    description?: string;
+    /** Its chord, drawn as key caps: `"Mod+N"`. */
+    shortcut?: string;
+    disabled?: boolean;
+    /** Leave the palette open after it runs (an entry that switches the palette's own mode). */
+    keepOpen?: boolean;
+}
+export interface CommandPaletteProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    items: readonly PaletteItem[];
+    /** Run an entry. The palette has already closed unless the entry keeps it open. */
+    onSelect: (item: PaletteItem) => void;
+    /** The search text. Controlled when given, so a host can switch lists on a prefix ("@", ">"). */
+    query?: string;
+    onQueryChange?: (query: string) => void;
+    /** Rank and filter `items` by the query. False when the host already did. Defaults to true. */
+    filter?: boolean;
+    /** Ids run lately, shown first under "Recent" while the query is empty. */
+    recent?: readonly string[];
+    /** The host is still building `items` (an object index): shown under the list. */
+    loading?: boolean;
+    placeholder?: string;
+    /** Copy for no match. */
+    empty?: string;
+    /** A key on the highlighted entry that the palette does not handle (Delete to close a tab). */
+    onItemKeyDown?: (item: PaletteItem, event: React.KeyboardEvent<HTMLInputElement>) => void;
+    mac?: boolean;
+    className?: string;
+}
+/**
+ * The command palette: a modal search over commands, objects and open tabs,
+ * with the ARIA combobox pattern (the input owns a listbox; Up and Down move
+ * the highlight, Enter runs it, Escape closes). The host supplies the items
+ * and runs them; focus returns where it was when the palette closes.
+ */
+export declare function CommandPalette({ open, onOpenChange, items, onSelect, query: queryProp, onQueryChange, filter, recent, loading, placeholder, empty, onItemKeyDown, mac, className, }: CommandPaletteProps): React.JSX.Element;

package/dist/workbench/CommandPalette.js

@@ -0,0 +1,114 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { SearchIcon } from "lucide-react";
+import * as React from "react";
+import { cn } from "../lib/cn.js";
+import { Dialog, DialogContent, DialogTitle } from "../overlays/Dialog.js";
+import { useUI } from "../provider/UIProvider.js";
+import { rankItems } from "./palette.js";
+import { ShortcutKeys } from "./Shortcuts.js";
+function sections(items, query, filter, recent, recentLabel) {
+    const list = filter ? rankItems(items, query) : [...items];
+    const out = [];
+    let rest = list;
+    if (query.trim() === "" && recent && recent.length > 0) {
+        const byId = new Map(list.map((i) => [i.id, i]));
+        const firsts = recent.flatMap((id) => byId.get(id) ?? []);
+        if (firsts.length > 0) {
+            out.push({ heading: recentLabel, items: firsts });
+            const taken = new Set(firsts.map((i) => i.id));
+            rest = list.filter((i) => !taken.has(i.id));
+        }
+    }
+    const groups = new Map();
+    for (const item of rest)
+        groups.set(item.group, [...(groups.get(item.group) ?? []), item]);
+    for (const [heading, groupItems] of groups)
+        out.push({ heading, items: groupItems });
+    return out;
+}
+/**
+ * The command palette: a modal search over commands, objects and open tabs,
+ * with the ARIA combobox pattern (the input owns a listbox; Up and Down move
+ * the highlight, Enter runs it, Escape closes). The host supplies the items
+ * and runs them; focus returns where it was when the palette closes.
+ */
+export function CommandPalette({ open, onOpenChange, items, onSelect, query: queryProp, onQueryChange, filter = true, recent, loading = false, placeholder, empty, onItemKeyDown, mac, className, }) {
+    const { messages } = useUI();
+    const m = messages.workbench;
+    const [ownQuery, setOwnQuery] = React.useState("");
+    const query = queryProp ?? ownQuery;
+    const setQuery = (next) => {
+        if (queryProp === undefined)
+            setOwnQuery(next);
+        onQueryChange?.(next);
+    };
+    // The highlight belongs to one query: typing puts it back on the first match.
+    const [highlight, setHighlight] = React.useState({ query: "", index: 0 });
+    const active = highlight.query === query ? highlight.index : 0;
+    const setActive = (index) => setHighlight({ query, index });
+    const inputRef = React.useRef(null);
+    const listRef = React.useRef(null);
+    const restoreRef = React.useRef(null);
+    const baseId = React.useId();
+    const shown = sections(items, query, filter, recent, m.recent);
+    const flat = shown.flatMap((s) => s.items);
+    const current = flat[Math.min(active, flat.length - 1)];
+    const optionId = (index) => `${baseId}-option-${index}`;
+    React.useEffect(() => {
+        if (!open)
+            return;
+        const el = listRef.current?.querySelector('[aria-selected="true"]');
+        el?.scrollIntoView?.({ block: "nearest" });
+    }, [active, open]);
+    const close = () => {
+        onOpenChange(false);
+        if (queryProp === undefined)
+            setOwnQuery("");
+    };
+    const run = (item) => {
+        if (!item || item.disabled)
+            return;
+        if (!item.keepOpen)
+            close();
+        onSelect(item);
+    };
+    const move = (delta) => {
+        if (flat.length === 0)
+            return;
+        setActive((Math.min(active, flat.length - 1) + delta + flat.length) % flat.length);
+    };
+    const onKeyDown = (event) => {
+        if (event.key === "ArrowDown") {
+            event.preventDefault();
+            move(1);
+        }
+        else if (event.key === "ArrowUp") {
+            event.preventDefault();
+            move(-1);
+        }
+        else if (event.key === "Enter") {
+            event.preventDefault();
+            run(current);
+        }
+        else if (current) {
+            onItemKeyDown?.(current, event);
+        }
+    };
+    return (_jsx(Dialog, { open: open, onOpenChange: (next) => (next ? onOpenChange(true) : close()), children: _jsxs(DialogContent, { hideCloseButton: true, "aria-describedby": undefined, className: cn("top-24 max-w-xl translate-y-0 gap-0 overflow-hidden p-0 sm:max-w-xl", className), onOpenAutoFocus: (event) => {
+                restoreRef.current = document.activeElement;
+                event.preventDefault();
+                inputRef.current?.focus();
+            }, onCloseAutoFocus: (event) => {
+                event.preventDefault();
+                if (restoreRef.current instanceof HTMLElement)
+                    restoreRef.current.focus();
+            }, children: [_jsx(DialogTitle, { className: "sr-only", children: m.commandPalette }), _jsxs("div", { className: "flex items-center gap-2 border-b px-3", children: [_jsx(SearchIcon, { "aria-hidden": true, className: "size-4 shrink-0 text-muted-foreground" }), _jsx("input", { ref: inputRef, role: "combobox", "aria-expanded": flat.length > 0, "aria-controls": `${baseId}-list`, "aria-autocomplete": "list", "aria-activedescendant": current ? optionId(flat.indexOf(current)) : undefined, "aria-label": placeholder ?? m.searchCommands, placeholder: placeholder ?? m.searchCommands, className: "h-11 w-full bg-transparent text-sm outline-hidden placeholder:text-muted-foreground", value: query, onChange: (event) => setQuery(event.target.value), onKeyDown: onKeyDown })] }), _jsx("div", { ref: listRef, id: `${baseId}-list`, role: "listbox", hidden: flat.length === 0, "aria-label": m.commandPalette, "aria-busy": loading || undefined, className: "max-h-[min(24rem,60vh)] overflow-y-auto p-1", children: shown.map((section, s) => {
+                        const headingId = `${baseId}-group-${s}`;
+                        return (_jsxs("div", { role: "group", "aria-labelledby": section.heading ? headingId : undefined, children: [section.heading && (_jsx("div", { id: headingId, role: "presentation", className: "px-2 pt-2 pb-1 text-2xs font-semibold tracking-wider text-muted-foreground uppercase", children: section.heading })), section.items.map((item) => {
+                                    const i = flat.indexOf(item);
+                                    const selected = item === current;
+                                    return (_jsxs("div", { id: optionId(i), role: "option", tabIndex: -1, "aria-selected": selected, "aria-disabled": item.disabled || undefined, className: cn("flex cursor-pointer items-center gap-2 rounded-lg px-2 py-1.5 text-sm", selected && "bg-accent text-accent-foreground", item.disabled && "cursor-default opacity-50"), onPointerMove: () => i !== active && setActive(i), onClick: () => run(item), children: [item.icon && (_jsx("span", { "aria-hidden": true, className: "flex shrink-0 text-muted-foreground [&_svg]:size-4", children: item.icon })), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "block truncate", children: item.label }), item.description && (_jsxs(_Fragment, { children: [" ", _jsx("span", { className: "block truncate text-xs text-muted-foreground", children: item.description })] }))] }), item.shortcut && _jsx(ShortcutKeys, { keys: item.shortcut, mac: mac })] }, `${section.heading ?? ""}:${item.id}`));
+                                })] }, section.heading ?? `section-${s}`));
+                    }) }), (loading || flat.length === 0) && (_jsx("div", { role: "status", className: "px-3 py-4 text-center text-sm text-muted-foreground", children: loading ? m.commandsLoading : (empty ?? m.noCommands) }))] }) }));
+}

package/dist/workbench/DataChart.d.ts

@@ -0,0 +1,45 @@
+import * as React from "react";
+import { type GridColumn, type GridRow } from "./grid-model.js";
+/**
+ * The parts of Recharts the chart draws with. The host hands over the
+ * module (`loadCharts={() => import("recharts")}`), so the package never
+ * names Recharts in an import: an app without it builds, and one with it
+ * loads it only when a chart opens.
+ */
+export interface ChartLibrary {
+    ResponsiveContainer: React.ElementType;
+    BarChart: React.ElementType;
+    Bar: React.ElementType;
+    LineChart: React.ElementType;
+    Line: React.ElementType;
+    AreaChart: React.ElementType;
+    Area: React.ElementType;
+    ScatterChart: React.ElementType;
+    Scatter: React.ElementType;
+    PieChart: React.ElementType;
+    Pie: React.ElementType;
+    Cell: React.ElementType;
+    XAxis: React.ElementType;
+    YAxis: React.ElementType;
+    CartesianGrid: React.ElementType;
+    Tooltip: React.ElementType;
+    Legend: React.ElementType;
+}
+export type ChartKind = "bar" | "line" | "area" | "scatter" | "pie";
+export interface DataChartProps {
+    columns: readonly (string | GridColumn)[];
+    rows: readonly GridRow[];
+    /** Resolves to Recharts (an optional peer): `() => import("recharts")`. Called once, when the chart mounts. */
+    loadCharts: () => Promise<ChartLibrary>;
+    /** A note that the rows themselves are capped. */
+    truncated?: string | null;
+    /** Rows plotted at most. */
+    rowCap?: number;
+    className?: string;
+}
+/**
+ * A quick chart of a result: bar, line, area, scatter or pie, an X column
+ * and one or more Y columns, coloured by the theme's chart series. Recharts
+ * is the host's to supply (`loadCharts`); without it nothing is loaded.
+ */
+export declare function DataChart(props: DataChartProps): React.JSX.Element;