@calliopelabs/ui 0.16.0 → 0.18.0

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))) })] }) }));
+}

package/dist/workbench/SqlEditor.d.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+import { type CodeEditorProps } from "./CodeEditor.js";
+import { type SqlSchema, type SqlSchemaRequest } from "./sql-completion.js";
+export interface SqlEditorProps extends Omit<CodeEditorProps, "language"> {
+    /** What completion knows: tables, their columns, schemas, other databases. */
+    schema?: SqlSchema;
+    /**
+     * Completion reached something the schema lacks (a table's columns, another
+     * database's tables). Load it and pass a new `schema`; each request is made
+     * once per schema.
+     */
+    onSchemaRequest?: (request: SqlSchemaRequest) => void;
+}
+/**
+ * A SQL editor: `CodeEditor` with schema-aware completion (tables after FROM
+ * and JOIN, columns after SELECT and WHERE, `alias.` resolved against the
+ * statement under the cursor, `schema.` and `db.` qualifiers, window-function
+ * snippets). The schema is the host's; completion never waits for it, and
+ * asks for what it lacks through `onSchemaRequest`.
+ */
+export declare function SqlEditor({ schema, onSchemaRequest, onMount, ...props }: SqlEditorProps): React.JSX.Element;

package/dist/workbench/SqlEditor.js

@@ -0,0 +1,79 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { CodeEditor, } from "./CodeEditor.js";
+import { sqlCompletions, } from "./sql-completion.js";
+const requestKey = (r) => r.kind === "columns" ? `columns:${r.schema ?? ""}.${r.table}` : `database:${r.database}`;
+function completionKind(monaco, kind) {
+    const K = monaco.languages.CompletionItemKind;
+    return {
+        keyword: K.Keyword,
+        function: K.Function,
+        snippet: K.Snippet,
+        table: K.Struct,
+        column: K.Field,
+        schema: K.Module,
+        database: K.Module,
+    }[kind];
+}
+/**
+ * A SQL editor: `CodeEditor` with schema-aware completion (tables after FROM
+ * and JOIN, columns after SELECT and WHERE, `alias.` resolved against the
+ * statement under the cursor, `schema.` and `db.` qualifiers, window-function
+ * snippets). The schema is the host's; completion never waits for it, and
+ * asks for what it lacks through `onSchemaRequest`.
+ */
+export function SqlEditor({ schema, onSchemaRequest, onMount, ...props }) {
+    const latest = React.useRef({ schema, onSchemaRequest, onMount });
+    const asked = React.useRef(new Set());
+    React.useLayoutEffect(() => {
+        if (latest.current.schema !== schema)
+            asked.current.clear();
+        latest.current = { schema, onSchemaRequest, onMount };
+    });
+    const mount = React.useCallback((editor, monaco) => {
+        // Providers are per language, page-wide: answer only for this editor's model.
+        const provider = monaco.languages.registerCompletionItemProvider("sql", {
+            triggerCharacters: ["."],
+            provideCompletionItems(model, position) {
+                if (model !== editor.getModel())
+                    return { suggestions: [] };
+                const { items, requests } = sqlCompletions(model.getValue(), model.getOffsetAt(position), latest.current.schema ?? { tables: [] });
+                for (const request of requests) {
+                    const key = requestKey(request);
+                    if (asked.current.has(key))
+                        continue;
+                    asked.current.add(key);
+                    latest.current.onSchemaRequest?.(request);
+                }
+                const word = model.getWordUntilPosition(position);
+                const range = {
+                    startLineNumber: position.lineNumber,
+                    startColumn: word.startColumn,
+                    endLineNumber: position.lineNumber,
+                    endColumn: word.endColumn,
+                };
+                return {
+                    suggestions: items.map((item) => ({
+                        label: item.label,
+                        kind: completionKind(monaco, item.kind),
+                        detail: item.detail,
+                        insertText: item.insertText,
+                        insertTextRules: item.snippet
+                            ? monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet
+                            : undefined,
+                        sortText: item.sortText,
+                        range,
+                    })),
+                };
+            },
+        });
+        const userCleanup = latest.current.onMount?.(editor, monaco);
+        return () => {
+            provider.dispose();
+            if (typeof userCleanup === "function")
+                userCleanup();
+        };
+    }, []);
+    return _jsx(CodeEditor, { ...props, language: "sql", onMount: mount });
+}

package/dist/workbench/StatusBar.d.ts

@@ -0,0 +1,28 @@
+import type * as React from "react";
+/**
+ * The bar's tone. Neutral is the chrome; the others paint it with a status
+ * colour, so "which environment am I pointed at" shows before it is asked
+ * (a production connection in the error tone).
+ */
+export type StatusBarTone = "neutral" | "ok" | "warn" | "error" | "info";
+export interface StatusBarProps {
+    /** Left: connection, policy, running tasks. */
+    start?: React.ReactNode;
+    /** Right: readiness, appearance toggle, version. */
+    end?: React.ReactNode;
+    tone?: StatusBarTone;
+    className?: string;
+}
+/** The thin bar across the bottom of an IDE layout: a labelled region of `StatusBarItem`s. */
+export declare function StatusBar({ start, end, tone, className }: StatusBarProps): React.JSX.Element;
+export interface StatusBarItemProps {
+    icon?: React.ReactNode;
+    children?: React.ReactNode;
+    /** Makes it a button. */
+    onClick?: () => void;
+    /** Hover text; also the name of an icon-only button. */
+    title?: string;
+    className?: string;
+}
+/** One entry of the status bar: text with an icon, or a button when it acts. */
+export declare function StatusBarItem({ icon, children, onClick, title, className }: StatusBarItemProps): React.JSX.Element;

package/dist/workbench/StatusBar.js

@@ -0,0 +1,26 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { cn } from "../lib/cn.js";
+import { useUI } from "../provider/UIProvider.js";
+import { PILL_TONE } from "../status/tones.js";
+const TONE = {
+    neutral: "bg-surface-1 text-muted-foreground",
+    ok: PILL_TONE.ok,
+    warn: PILL_TONE.warn,
+    error: PILL_TONE.error,
+    info: PILL_TONE.info,
+};
+/** The thin bar across the bottom of an IDE layout: a labelled region of `StatusBarItem`s. */
+export function StatusBar({ start, end, tone = "neutral", className }) {
+    const { messages } = useUI();
+    return (_jsxs("section", { "aria-label": messages.workbench.statusBar, "data-tone": tone, className: cn("flex h-6 shrink-0 items-center justify-between gap-3 border-t px-2 text-xs select-none", TONE[tone], className), children: [_jsx("div", { className: "flex min-w-0 items-center gap-3", children: start }), _jsx("div", { className: "flex min-w-0 items-center gap-3", children: end })] }));
+}
+/** One entry of the status bar: text with an icon, or a button when it acts. */
+export function StatusBarItem({ icon, children, onClick, title, className }) {
+    const body = (_jsxs(_Fragment, { children: [icon && (_jsx("span", { "aria-hidden": true, className: "flex [&_svg]:size-3", children: icon })), children] }));
+    const base = cn("flex min-w-0 items-center gap-1 truncate", className);
+    if (onClick) {
+        return (_jsx("button", { type: "button", title: title, "aria-label": children ? undefined : title, onClick: onClick, className: cn(base, "rounded-lg px-1 outline-hidden hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring"), children: body }));
+    }
+    return (_jsx("span", { title: title, className: base, children: body }));
+}

package/dist/workbench/TruncationBanner.d.ts

@@ -0,0 +1,11 @@
+import type * as React from "react";
+export interface TruncationBannerProps {
+    /** One sentence naming the cap ("Showing 1,000 of 48,211 rows"). */
+    children: React.ReactNode;
+    className?: string;
+}
+/**
+ * One strip, one sentence: this view is not showing everything. The warn
+ * tone: a capped result is expected, not a failure, and must not read as one.
+ */
+export declare function TruncationBanner({ children, className }: TruncationBannerProps): React.JSX.Element;

package/dist/workbench/TruncationBanner.js

@@ -0,0 +1,12 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { InfoIcon } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { PILL_TONE } from "../status/tones.js";
+/**
+ * One strip, one sentence: this view is not showing everything. The warn
+ * tone: a capped result is expected, not a failure, and must not read as one.
+ */
+export function TruncationBanner({ children, className }) {
+    return (_jsxs("p", { role: "status", "data-slot": "truncation-banner", className: cn("flex shrink-0 items-center gap-2 border-x-0 border-t-0 border-b px-3 py-1 text-xs", PILL_TONE.warn, className), children: [_jsx(InfoIcon, { "aria-hidden": true, className: "size-3 shrink-0" }), _jsx("span", { className: "min-w-0", children: children })] }));
+}

package/dist/workbench/WorkbenchShell.d.ts

@@ -0,0 +1,36 @@
+import type * as React from "react";
+export interface WorkbenchShellProps {
+    /** Across the top: a `MenuBar`. */
+    menuBar?: React.ReactNode;
+    /** Down the left: an `ActivityBar`. */
+    activityBar?: React.ReactNode;
+    /** The side bar the activity bar switches (explorer, files, history). */
+    sidebar?: React.ReactNode;
+    /** Defaults to true when there is a sidebar. Closed, it stays mounted. */
+    sidebarOpen?: boolean;
+    /** The editor area: an `EditorGroup`, or several in a `PaneGroup`. */
+    children: React.ReactNode;
+    /** Under the editors: a `BottomPanel`. */
+    bottomPanel?: React.ReactNode;
+    bottomPanelOpen?: boolean;
+    /** The panel fills the editor area; the editors stay mounted underneath. */
+    bottomPanelMaximized?: boolean;
+    /** Right of the editors: an assistant, an inspector. */
+    aside?: React.ReactNode;
+    asideOpen?: boolean;
+    /** Along the bottom: a `StatusBar`. */
+    statusBar?: React.ReactNode;
+    /** Remember pane sizes per person under keys starting with this. */
+    storageKey?: string;
+    /** Overlays that belong to the shell: the command palette, the shortcuts dialog. */
+    overlays?: React.ReactNode;
+    className?: string;
+}
+/**
+ * The IDE layout: menu bar, activity bar, a resizable side bar, the editor
+ * area over a bottom panel, an optional right-hand panel, and the status
+ * bar. Every region is host content and every toggle is a prop, so it holds
+ * no state but the pane sizes. Hidden regions stay mounted, so an open
+ * page keeps its state when the panels around it change.
+ */
+export declare function WorkbenchShell({ menuBar, activityBar, sidebar, sidebarOpen, children, bottomPanel, bottomPanelOpen, bottomPanelMaximized, aside, asideOpen, statusBar, storageKey, overlays, className, }: WorkbenchShellProps): React.JSX.Element;

package/dist/workbench/WorkbenchShell.js

@@ -0,0 +1,20 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/cn.js";
+import { TooltipProvider } from "../primitives/Tooltip.js";
+import { useUI } from "../provider/UIProvider.js";
+import { Pane, PaneGroup } from "./PaneGroup.js";
+/**
+ * The IDE layout: menu bar, activity bar, a resizable side bar, the editor
+ * area over a bottom panel, an optional right-hand panel, and the status
+ * bar. Every region is host content and every toggle is a prop, so it holds
+ * no state but the pane sizes. Hidden regions stay mounted, so an open
+ * page keeps its state when the panels around it change.
+ */
+export function WorkbenchShell({ menuBar, activityBar, sidebar, sidebarOpen = true, children, bottomPanel, bottomPanelOpen = false, bottomPanelMaximized = false, aside, asideOpen = false, statusBar, storageKey, overlays, className, }) {
+    const { messages } = useUI();
+    const m = messages.workbench;
+    const key = (part) => (storageKey ? `${storageKey}:${part}` : undefined);
+    const hasBottom = bottomPanel !== undefined && bottomPanel !== null;
+    return (_jsx(TooltipProvider, { children: _jsxs("div", { "data-slot": "workbench-shell", className: cn("flex h-full min-h-0 flex-col overflow-hidden bg-background text-foreground", className), children: [menuBar, _jsxs("div", { className: "flex min-h-0 flex-1", children: [activityBar, _jsxs(PaneGroup, { orientation: "horizontal", storageKey: key("main"), className: "flex-1", children: [sidebar !== undefined && sidebar !== null && (_jsx(Pane, { id: "workbench-sidebar", label: m.sideBar, defaultSize: 22, minSize: "180px", maxSize: 45, collapsed: !sidebarOpen, children: sidebar })), _jsx(Pane, { id: "workbench-center", label: m.editor, defaultSize: 78, minSize: "300px", children: _jsxs(PaneGroup, { orientation: "vertical", storageKey: key("center"), children: [_jsx(Pane, { id: "workbench-editor", label: m.editor, defaultSize: 70, minSize: "80px", collapsed: hasBottom && bottomPanelOpen && bottomPanelMaximized, children: children }), hasBottom && (_jsx(Pane, { id: "workbench-panel", label: m.panel, defaultSize: 30, minSize: "80px", collapsed: !bottomPanelOpen, children: bottomPanel }))] }) }), aside !== undefined && aside !== null && (_jsx(Pane, { id: "workbench-aside", label: m.secondarySideBar, defaultSize: 28, minSize: "240px", maxSize: 50, collapsed: !asideOpen, children: aside }))] })] }), statusBar, overlays] }) }));
+}

package/dist/workbench/download.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Saving a file the grid produced. Browser-only when called; nothing runs on
+ * import, so the module stays importable on a server.
+ */
+import { type ExportFile } from "./grid-format.js";
+/** Hands a Blob to the browser as a download. */
+export declare function downloadBlob(blob: Blob, filename: string): void;
+/** Downloads an export the grid built (`onExport` hosts call this for the formats they do not handle). */
+export declare function downloadExport(file: ExportFile): void;
+/** Decodes a base64 binary cell and downloads it. */
+export declare function downloadBase64(base64: string, filename: string): void;

package/dist/workbench/download.js

@@ -0,0 +1,28 @@
+/**
+ * Saving a file the grid produced. Browser-only when called; nothing runs on
+ * import, so the module stays importable on a server.
+ */
+import { exportBlob } from "./grid-format.js";
+/** Hands a Blob to the browser as a download. */
+export function downloadBlob(blob, filename) {
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = filename;
+    document.body.appendChild(link);
+    link.click();
+    link.remove();
+    URL.revokeObjectURL(url);
+}
+/** Downloads an export the grid built (`onExport` hosts call this for the formats they do not handle). */
+export function downloadExport(file) {
+    downloadBlob(exportBlob(file), file.filename);
+}
+/** Decodes a base64 binary cell and downloads it. */
+export function downloadBase64(base64, filename) {
+    const binary = atob(base64);
+    const bytes = new Uint8Array(binary.length);
+    for (let i = 0; i < binary.length; i++)
+        bytes[i] = binary.charCodeAt(i);
+    downloadBlob(new Blob([bytes], { type: "application/octet-stream" }), filename);
+}