@calliopelabs/ui 0.14.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/FileBrowser.d.ts

@@ -0,0 +1,62 @@
+import * as React from "react";
+import { type MoveHandler } from "./dnd.js";
+import { type FileTreeProps } from "./FileTree.js";
+import { type FileItem, type FileSort, type FileView } from "./model.js";
+export interface FileBrowserProps {
+    /** The directory on screen; "" is the root. */
+    path: string;
+    /** Its entries, in any order (the browser sorts them). Undefined while loading. */
+    items?: readonly FileItem[];
+    /** The listing failed: shown in place of the entries, with `onRetry`. */
+    error?: string | {
+        message: string;
+    } | null;
+    onRetry?: () => void;
+    /** Go to a directory: a breadcrumb, a tree node, or opening a folder. */
+    onNavigate: (path: string) => void;
+    /** Open a file (double-click or Enter). Folders navigate instead. */
+    onOpen?: (item: FileItem) => void;
+    /** Names the browser. Defaults to "Files". */
+    label?: string;
+    /** The root's name in the breadcrumb. Defaults to "Home". */
+    rootLabel?: string;
+    view?: FileView;
+    defaultView?: FileView;
+    onViewChange?: (view: FileView) => void;
+    sort?: FileSort;
+    defaultSort?: FileSort;
+    onSortChange?: (sort: FileSort) => void;
+    /** The selected paths. Controlled when given. */
+    selection?: ReadonlySet<string>;
+    onSelectionChange?: (selection: Set<string>) => void;
+    onMove?: MoveHandler;
+    onDelete?: (items: FileItem[]) => void;
+    onRename?: (item: FileItem) => void;
+    /**
+     * Context-menu items (`ContextMenuItem`s) for the items right-clicked (the
+     * selection), or for the folder itself when `targets` is empty.
+     */
+    contextMenu?: (targets: FileItem[]) => React.ReactNode;
+    /** A folder tree beside the listing; the browser wires its selection, moves and navigation. */
+    tree?: Omit<FileTreeProps, "selectedPath" | "onSelect" | "onMove" | "contextMenu">;
+    /** Controls beside the view switch: new folder, upload, search. */
+    toolbar?: React.ReactNode;
+    /** A thumbnail for grid tiles. */
+    renderThumbnail?: (item: FileItem) => React.ReactNode;
+    formatDate?: (value: string | Date) => string;
+    /** Copy for an empty folder. */
+    empty?: {
+        title: string;
+        description?: string;
+    };
+    className?: string;
+}
+/**
+ * The file browser: breadcrumb, view switch, an optional folder tree, and
+ * the listing as a table (FileList) or tiles (FileGrid), with sorting,
+ * selection, keyboard navigation, a context menu and drag-and-drop moves.
+ * It is driven by the host: data comes in as props and every change goes
+ * out through a callback, so it fetches nothing and runs over any store.
+ * Uncontrolled view, sort and selection work out of the box.
+ */
+export declare function FileBrowser({ path, items, error, onRetry, onNavigate, onOpen, label, rootLabel, view: viewProp, defaultView, onViewChange, sort: sortProp, defaultSort, onSortChange, selection: selectionProp, onSelectionChange, onMove, onDelete, onRename, contextMenu, tree, toolbar, renderThumbnail, formatDate, empty, className, }: FileBrowserProps): React.JSX.Element;

package/dist/workbench/FileBrowser.js

@@ -0,0 +1,117 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronRightIcon, FolderOpenIcon, LayoutGridIcon, ListIcon } from "lucide-react";
+import * as React from "react";
+import { cn } from "../lib/cn.js";
+import { ContextMenu, ContextMenuContent, ContextMenuTrigger } from "../primitives/ContextMenu.js";
+import { Segmented } from "../primitives/Segmented.js";
+import { useUI } from "../provider/UIProvider.js";
+import { EmptyState } from "../states/EmptyState.js";
+import { ErrorState } from "../states/ErrorState.js";
+import { LoadingState } from "../states/LoadingState.js";
+import { useFileDrop } from "./dnd.js";
+import { FileGrid } from "./FileGrid.js";
+import { FileList } from "./FileList.js";
+import { FileTree } from "./FileTree.js";
+import { pathSegments, sortFiles } from "./model.js";
+/**
+ * The file browser: breadcrumb, view switch, an optional folder tree, and
+ * the listing as a table (FileList) or tiles (FileGrid), with sorting,
+ * selection, keyboard navigation, a context menu and drag-and-drop moves.
+ * It is driven by the host: data comes in as props and every change goes
+ * out through a callback, so it fetches nothing and runs over any store.
+ * Uncontrolled view, sort and selection work out of the box.
+ */
+export function FileBrowser({ path, items, error, onRetry, onNavigate, onOpen, label, rootLabel, view: viewProp, defaultView = "list", onViewChange, sort: sortProp, defaultSort = { key: "name", dir: "asc" }, onSortChange, selection: selectionProp, onSelectionChange, onMove, onDelete, onRename, contextMenu, tree, toolbar, renderThumbnail, formatDate, empty, className, }) {
+    const { messages } = useUI();
+    const t = messages.workbench;
+    const [ownView, setOwnView] = React.useState(defaultView);
+    const [ownSort, setOwnSort] = React.useState(defaultSort);
+    const [ownSelection, setOwnSelection] = React.useState(() => new Set());
+    const [menuTargets, setMenuTargets] = React.useState([]);
+    const view = viewProp ?? ownView;
+    const sort = sortProp ?? ownSort;
+    const selection = selectionProp ?? ownSelection;
+    const name = label ?? t.files;
+    const setView = (next) => {
+        setOwnView(next);
+        onViewChange?.(next);
+    };
+    const setSort = (next) => {
+        setOwnSort(next);
+        onSortChange?.(next);
+    };
+    const setSelection = React.useCallback((next) => {
+        setOwnSelection(next);
+        onSelectionChange?.(next);
+    }, [onSelectionChange]);
+    // A new folder starts with nothing selected (a controlled selection is the host's to clear).
+    const [shownPath, setShownPath] = React.useState(path);
+    if (shownPath !== path) {
+        setShownPath(path);
+        setOwnSelection(new Set());
+    }
+    const sorted = React.useMemo(() => (items ? sortFiles(items, sort) : []), [items, sort]);
+    const open = (item) => item.kind === "directory" ? onNavigate(item.path) : onOpen?.(item);
+    const segments = pathSegments(path);
+    const here = segments[segments.length - 1]?.name ?? rootLabel ?? t.root;
+    const viewProps = {
+        label: t.filesIn(here),
+        items: sorted,
+        selection,
+        onSelectionChange: setSelection,
+        onOpen: open,
+        onDelete,
+        onRename,
+        onMove,
+    };
+    const errorMessage = typeof error === "string" ? error : error?.message;
+    let body;
+    if (error) {
+        body = (_jsx(ErrorState, { title: t.loadFailed, error: errorMessage || t.loadFailed, onRetry: onRetry, retryLabel: t.retry }));
+    }
+    else if (!items) {
+        body = _jsx(LoadingState, { label: t.loading, rows: 6 });
+    }
+    else if (sorted.length === 0) {
+        body = (_jsx(EmptyState, { icon: _jsx(FolderOpenIcon, { "aria-hidden": true, className: "size-6" }), title: empty?.title ?? t.empty, description: empty?.description ?? (onMove ? t.emptyDescription : undefined) }));
+    }
+    else if (view === "grid") {
+        body = _jsx(FileGrid, { ...viewProps, renderThumbnail: renderThumbnail });
+    }
+    else {
+        body = _jsx(FileList, { ...viewProps, sort: sort, onSortChange: setSort, formatDate: formatDate });
+    }
+    const folderDrop = useFileDrop(items ? path : null, onMove);
+    const pane = (_jsx("div", { ...folderDrop.props, onContextMenu: (event) => {
+            if (!contextMenu)
+                return;
+            // The menu is for the item under the pointer (with the rest of the
+            // selection when it is part of it), or the folder on empty space.
+            const path = event.target.closest("[data-path]")?.dataset.path;
+            const item = sorted.find((i) => i.path === path);
+            const targets = !item
+                ? []
+                : selection.has(item.path)
+                    ? sorted.filter((i) => selection.has(i.path))
+                    : [item];
+            if (!items || error || contextMenu(targets) == null) {
+                event.preventDefault();
+                return;
+            }
+            setMenuTargets(targets);
+        }, className: cn("min-h-0 min-w-0 flex-1 overflow-auto", folderDrop.over && "bg-primary/5 ring-2 ring-primary ring-inset"), children: body }));
+    return (_jsxs("section", { "aria-label": name, "data-slot": "file-browser", className: cn("@container flex min-h-0 flex-col bg-background text-sm", className), children: [_jsxs("div", { className: "flex min-h-11 flex-wrap items-center gap-2 border-b px-3 py-1.5", children: [_jsx(PathBar, { path: path, rootLabel: rootLabel ?? t.root, onNavigate: onNavigate, onMove: onMove }), _jsxs("div", { className: "ml-auto flex items-center gap-1.5", children: [toolbar, _jsx(Segmented, { label: t.view, size: "sm", iconOnly: true, value: view, onValueChange: setView, options: [
+                                    { value: "list", label: t.listView, icon: ListIcon },
+                                    { value: "grid", label: t.gridView, icon: LayoutGridIcon },
+                                ] })] })] }), _jsxs("div", { className: "flex min-h-0 flex-1", children: [tree && (_jsx("div", { className: "hidden w-56 shrink-0 overflow-auto border-r @2xl:block", children: _jsx(FileTree, { ...tree, selectedPath: path, onSelect: (item) => item.kind === "directory" ? onNavigate(item.path) : onOpen?.(item), onMove: onMove }) })), contextMenu ? (_jsxs(ContextMenu, { children: [_jsx(ContextMenuTrigger, { asChild: true, children: pane }), _jsx(ContextMenuContent, { children: contextMenu(menuTargets) })] })) : (pane)] }), _jsxs("div", { role: "status", className: "flex h-7 items-center gap-3 border-t px-3 text-xs text-muted-foreground", children: [items && !error && _jsx("span", { children: t.itemCount(sorted.length) }), selection.size > 0 && _jsx("span", { children: t.selected(selection.size) })] })] }));
+}
+function PathBar({ path, rootLabel, onNavigate, onMove, }) {
+    const { messages } = useUI();
+    const crumbs = [{ name: rootLabel, path: "" }, ...pathSegments(path)];
+    return (_jsx("nav", { "aria-label": messages.workbench.location, className: "min-w-0 flex-1", children: _jsx("ol", { className: "flex min-w-0 items-center gap-0.5", children: crumbs.map((crumb, i) => (_jsx(Crumb, { name: crumb.name, path: crumb.path, first: i === 0, current: i === crumbs.length - 1, onNavigate: onNavigate, onMove: onMove }, crumb.path || "/"))) }) }));
+}
+function Crumb({ name, path, first, current, onNavigate, onMove, }) {
+    const drop = useFileDrop(current ? null : path, onMove);
+    return (_jsxs("li", { className: cn("flex min-w-0 items-center gap-0.5", current ? "shrink" : "shrink-[2]"), children: [!first && _jsx(ChevronRightIcon, { "aria-hidden": true, className: "size-3 shrink-0 text-muted-foreground" }), _jsx("button", { type: "button", "aria-current": current ? "location" : undefined, onClick: () => onNavigate(path), ...drop.props, className: cn("min-w-0 truncate rounded-lg px-1.5 py-0.5 outline-none hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring/50", current ? "font-medium text-foreground" : "text-muted-foreground", drop.over && "bg-primary/10 ring-2 ring-primary"), children: name })] }));
+}

package/dist/workbench/FileGrid.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+import type { FileItem } from "./model.js";
+import type { FileViewProps } from "./FileList.js";
+export interface FileGridProps extends FileViewProps {
+    /** A thumbnail in place of the type icon (an image's own preview). */
+    renderThumbnail?: (item: FileItem) => React.ReactNode;
+}
+/**
+ * A directory as tiles: a multi-select listbox laid out in rows, so the
+ * arrows move in two dimensions (up and down by a row of tiles). The same
+ * selection, opening, typeahead and drag rules as FileList.
+ */
+export declare function FileGrid({ label, items, selection, onSelectionChange, onOpen, onDelete, onRename, onMove, renderThumbnail, className, }: FileGridProps): React.JSX.Element;

package/dist/workbench/FileGrid.js

@@ -0,0 +1,114 @@
+"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 { startFileDrag, useFileDrop } from "./dnd.js";
+import { FileIcon } from "./FileIcon.js";
+import { modeOf, useSelectionModel } from "./selection.js";
+import { typeahead } from "./typeahead.js";
+/**
+ * A directory as tiles: a multi-select listbox laid out in rows, so the
+ * arrows move in two dimensions (up and down by a row of tiles). The same
+ * selection, opening, typeahead and drag rules as FileList.
+ */
+export function FileGrid({ label, items, selection, onSelectionChange, onOpen, onDelete, onRename, onMove, renderThumbnail, className, }) {
+    const { messages } = useUI();
+    const t = messages.workbench;
+    const order = React.useMemo(() => items.map((i) => i.path), [items]);
+    const model = useSelectionModel(order, selection, onSelectionChange);
+    const [focusIndex, setFocusIndex] = React.useState(0);
+    const index = Math.min(focusIndex, items.length - 1);
+    const list = React.useRef(null);
+    const tiles = React.useRef(new Map());
+    const pending = React.useRef(false);
+    const search = React.useRef({ text: "", at: 0 });
+    React.useLayoutEffect(() => {
+        if (!pending.current)
+            return;
+        pending.current = false;
+        tiles.current.get(index)?.focus();
+    });
+    const columns = () => {
+        const template = list.current ? getComputedStyle(list.current).gridTemplateColumns : "";
+        return Math.max(1, template.split(" ").filter(Boolean).length);
+    };
+    const onKeyDown = (event) => {
+        const meta = event.metaKey || event.ctrlKey;
+        const go = (target) => {
+            event.preventDefault();
+            const next = Math.min(Math.max(target, 0), items.length - 1);
+            pending.current = true;
+            setFocusIndex(next);
+            const item = items[next];
+            if (item && !meta)
+                model.select(item.path, event.shiftKey ? "range" : "replace");
+        };
+        switch (event.key) {
+            case "ArrowRight":
+                return go(index + 1);
+            case "ArrowLeft":
+                return go(index - 1);
+            case "ArrowDown":
+                return go(index + columns());
+            case "ArrowUp":
+                return go(index - columns());
+            case "Home":
+                return go(0);
+            case "End":
+                return go(items.length - 1);
+        }
+        const item = items[index];
+        if (!item)
+            return;
+        if (event.key === "Enter") {
+            event.preventDefault();
+            onOpen(item);
+        }
+        else if (event.key === " ") {
+            event.preventDefault();
+            model.select(item.path, meta ? "toggle" : event.shiftKey ? "range" : "replace");
+        }
+        else if (meta && event.key.toLowerCase() === "a") {
+            event.preventDefault();
+            model.selectAll();
+        }
+        else if (event.key === "Escape" && selection.size > 0) {
+            event.preventDefault();
+            model.clear();
+        }
+        else if (onDelete && (event.key === "Delete" || (meta && event.key === "Backspace"))) {
+            const targets = items.filter((i) => selection.has(i.path));
+            if (targets.length) {
+                event.preventDefault();
+                onDelete(targets);
+            }
+        }
+        else if (onRename && event.key === "F2") {
+            event.preventDefault();
+            onRename(item);
+        }
+        else {
+            const next = typeahead(search.current, event, items.map((i) => i.name), index);
+            if (next !== null)
+                go(next);
+        }
+    };
+    return (_jsx("div", { ref: list, role: "listbox", "aria-label": label, "aria-multiselectable": true, onKeyDown: onKeyDown, className: cn("grid grid-cols-[repeat(auto-fill,minmax(6.5rem,1fr))] content-start gap-1 p-2", className), children: items.map((item, i) => (_jsx(Tile, { item: item, selected: selection.has(item.path), tabbable: i === index, tileRef: (el) => {
+                if (el)
+                    tiles.current.set(i, el);
+                else
+                    tiles.current.delete(i);
+            }, onFocus: () => setFocusIndex(i), onMove: onMove, dragPaths: selection.has(item.path) ? order.filter((p) => selection.has(p)) : [item.path], dragLabel: (n) => (n === 1 ? item.name : t.itemCount(n)), thumbnail: renderThumbnail?.(item), onClick: (event) => {
+                setFocusIndex(i);
+                model.select(item.path, modeOf(event));
+            }, onDoubleClick: () => onOpen(item), onContextMenu: () => {
+                // Right-clicking outside the selection selects the item, as file managers do.
+                if (!selection.has(item.path))
+                    model.select(item.path, "replace");
+            } }, item.path))) }));
+}
+function Tile({ item, selected, tabbable, tileRef, onFocus, onMove, dragPaths, dragLabel, thumbnail, onClick, onDoubleClick, onContextMenu, }) {
+    const drop = useFileDrop(item.kind === "directory" ? item.path : null, onMove);
+    return (_jsxs("div", { ref: tileRef, role: "option", "data-path": item.path, "aria-selected": selected, tabIndex: tabbable ? 0 : -1, title: item.name, draggable: Boolean(onMove), onDragStart: onMove ? (event) => startFileDrag(event, dragPaths, dragLabel(dragPaths.length)) : undefined, ...drop.props, onFocus: onFocus, onClick: onClick, onDoubleClick: onDoubleClick, onContextMenu: onContextMenu, className: cn("flex cursor-default flex-col items-center gap-1.5 rounded-lg p-2 text-center outline-none select-none hover:bg-accent/60 focus-visible:ring-2 focus-visible:ring-ring/50", selected && "bg-accent text-accent-foreground hover:bg-accent", drop.over && "bg-primary/10 ring-2 ring-primary"), children: [_jsx("span", { className: "flex size-12 items-center justify-center overflow-hidden rounded-lg", children: thumbnail ?? _jsx(FileIcon, { name: item.name, kind: item.kind, className: "size-8" }) }), _jsx("span", { className: "line-clamp-2 w-full text-xs [overflow-wrap:anywhere]", children: item.name })] }));
+}

package/dist/workbench/FileIcon.d.ts

@@ -0,0 +1,10 @@
+import { type FileKind } from "./model.js";
+export interface FileIconProps {
+    name: string;
+    kind: FileKind;
+    /** An open directory (an expanded tree node). */
+    open?: boolean;
+    className?: string;
+}
+/** A file-type glyph from the name's extension; directories in the accent. Decorative. */
+export declare function FileIcon({ name, kind, open, className }: FileIconProps): import("react").JSX.Element;

package/dist/workbench/FileIcon.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FileArchiveIcon, FileCodeIcon, FileIcon as LucideFileIcon, FileImageIcon, FileJsonIcon, FileSpreadsheetIcon, FileTextIcon, FolderIcon, FolderOpenIcon, } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { fileExtension } from "./model.js";
+const BY_EXTENSION = {};
+const group = (icon, extensions) => {
+    for (const ext of extensions.split(" "))
+        BY_EXTENSION[ext] = icon;
+};
+group(FileCodeIcon, "py js jsx ts tsx mjs cjs rs go java kt rb sh bash zsh sql html css scss c h cpp hpp cs php swift lua r tf");
+group(FileJsonIcon, "json jsonl ipynb");
+group(FileSpreadsheetIcon, "csv tsv parquet xlsx xls ods");
+group(FileImageIcon, "png jpg jpeg gif svg webp avif bmp ico");
+group(FileTextIcon, "md markdown txt log yaml yml toml ini cfg conf rst pdf doc docx");
+group(FileArchiveIcon, "zip tar gz tgz bz2 xz 7z rar");
+/** A file-type glyph from the name's extension; directories in the accent. Decorative. */
+export function FileIcon({ name, kind, open = false, className }) {
+    if (kind === "directory") {
+        const Folder = open ? FolderOpenIcon : FolderIcon;
+        return _jsx(Folder, { "aria-hidden": true, className: cn("size-4 shrink-0 text-primary", className) });
+    }
+    const Glyph = BY_EXTENSION[fileExtension(name)] ?? LucideFileIcon;
+    return _jsx(Glyph, { "aria-hidden": true, className: cn("size-4 shrink-0 text-muted-foreground", className) });
+}

package/dist/workbench/FileList.d.ts

@@ -0,0 +1,35 @@
+import * as React from "react";
+import { type MoveHandler } from "./dnd.js";
+import { type FileItem, type FileSort } from "./model.js";
+export interface FileViewProps {
+    /** Names the view for screen readers ("Files in reports"). */
+    label: string;
+    /** In display order (`sortFiles`). */
+    items: readonly FileItem[];
+    selection: ReadonlySet<string>;
+    onSelectionChange: (next: Set<string>) => void;
+    /** Double-click or Enter. */
+    onOpen: (item: FileItem) => void;
+    /** Delete, or Cmd/Ctrl+Backspace, on the selection. */
+    onDelete?: (items: FileItem[]) => void;
+    /** F2 on one item. */
+    onRename?: (item: FileItem) => void;
+    /** Drag items onto directories. */
+    onMove?: MoveHandler;
+    className?: string;
+}
+export interface FileListProps extends FileViewProps {
+    sort?: FileSort;
+    /** Present, the headers are sort buttons. */
+    onSortChange?: (sort: FileSort) => void;
+    /** How a modified time reads. Defaults to the locale's medium date and short time. */
+    formatDate?: (value: string | Date) => string;
+}
+/**
+ * A directory as a sortable table, on the WAI-ARIA grid pattern: one tab
+ * stop, arrows move between cells, selection follows the focus (Ctrl or Cmd
+ * with an arrow moves without selecting, Shift extends), Home and End, Page
+ * Up and Down, Enter opens, Cmd/Ctrl+A selects all, Escape clears, and
+ * typing finds a name. Rows drag onto folders.
+ */
+export declare function FileList({ label, items, selection, onSelectionChange, onOpen, onDelete, onRename, onMove, sort, onSortChange, formatDate, className, }: FileListProps): React.JSX.Element;