@calliopelabs/ui 0.14.0 → 0.16.0

package/dist/primitives/ScrollArea.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ScrollArea as ScrollAreaPrimitive } from "radix-ui";
+import { cn } from "../lib/cn.js";
+/** A scrolling box with thin, token-coloured bars that look the same on every platform. */
+export function ScrollArea({ className, viewportClassName, children, label, orientation = "vertical", ...props }) {
+    return (_jsxs(ScrollAreaPrimitive.Root, { "data-slot": "scroll-area", className: cn("relative overflow-hidden", className), ...props, children: [_jsx(ScrollAreaPrimitive.Viewport, { "data-slot": "scroll-area-viewport", className: cn("size-full rounded-[inherit] outline-none focus-visible:ring-2 focus-visible:ring-ring/50", viewportClassName), ...(label ? { role: "region", "aria-label": label, tabIndex: 0 } : {}), children: children }), orientation !== "horizontal" && _jsx(ScrollBar, { orientation: "vertical" }), orientation !== "vertical" && _jsx(ScrollBar, { orientation: "horizontal" }), _jsx(ScrollAreaPrimitive.Corner, {})] }));
+}
+export function ScrollBar({ className, orientation = "vertical", ...props }) {
+    return (_jsx(ScrollAreaPrimitive.ScrollAreaScrollbar, { "data-slot": "scroll-area-scrollbar", orientation: orientation, className: cn("flex touch-none p-px transition-colors select-none", orientation === "vertical" && "h-full w-2 border-l border-l-transparent", orientation === "horizontal" && "h-2 flex-col border-t border-t-transparent", className), ...props, children: _jsx(ScrollAreaPrimitive.ScrollAreaThumb, { "data-slot": "scroll-area-thumb", className: "relative flex-1 rounded-full bg-border hover:bg-muted-foreground/60" }) }));
+}

package/dist/primitives/Toast.d.ts

@@ -0,0 +1,37 @@
+import * as React from "react";
+import type { StatusTone } from "../status/tones.js";
+export interface ToastOptions {
+    /** Replaces the toast with the same id (an upload's progress, then its result). */
+    id?: string;
+    title: string;
+    description?: string;
+    /** A status tone for the dot beside the title. `error` toasts are announced assertively. */
+    tone?: StatusTone;
+    /** One follow-up action ("Undo", "View"). `altText` says how to reach it without the toast. */
+    action?: {
+        label: string;
+        altText: string;
+        onClick: () => void;
+    };
+    /** Milliseconds before it closes itself. Defaults to the provider's (5s); `Infinity` keeps it. */
+    duration?: number;
+}
+export interface ToastApi {
+    /** Shows a toast and returns its id. */
+    toast: (options: ToastOptions) => string;
+    dismiss: (id: string) => void;
+}
+export interface ToastProviderProps {
+    children: React.ReactNode;
+    /** Defaults to 5000. */
+    duration?: number;
+    className?: string;
+}
+/**
+ * Transient notices, bottom right, on Radix Toast: they pause on hover and
+ * focus, F8 jumps to them, and swiping or Escape closes one. Wrap the app
+ * once and call `useToast().toast(...)` anywhere under it.
+ */
+export declare function ToastProvider({ children, duration, className }: ToastProviderProps): React.JSX.Element;
+/** The toast API of the nearest ToastProvider. Throws outside one, so a missing provider is loud. */
+export declare function useToast(): ToastApi;

package/dist/primitives/Toast.js

@@ -0,0 +1,43 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { XIcon } from "lucide-react";
+import { Toast as ToastPrimitive } from "radix-ui";
+import * as React from "react";
+import { cn } from "../lib/cn.js";
+import { useUI } from "../provider/UIProvider.js";
+import { StatusDot } from "../status/StatusDot.js";
+const ToastContext = React.createContext(null);
+/**
+ * Transient notices, bottom right, on Radix Toast: they pause on hover and
+ * focus, F8 jumps to them, and swiping or Escape closes one. Wrap the app
+ * once and call `useToast().toast(...)` anywhere under it.
+ */
+export function ToastProvider({ children, duration = 5000, className }) {
+    const { messages } = useUI();
+    const [toasts, setToasts] = React.useState([]);
+    const counter = React.useRef(0);
+    const api = React.useMemo(() => ({
+        toast: (options) => {
+            const id = options.id ?? `toast-${++counter.current}`;
+            setToasts((list) => {
+                const entry = { ...options, id };
+                return list.some((t) => t.id === id)
+                    ? list.map((t) => (t.id === id ? entry : t))
+                    : [...list, entry];
+            });
+            return id;
+        },
+        dismiss: (id) => setToasts((list) => list.filter((t) => t.id !== id)),
+    }), []);
+    return (_jsx(ToastContext.Provider, { value: api, children: _jsxs(ToastPrimitive.Provider, { duration: duration, label: messages.toast.region, children: [children, toasts.map((t) => (_jsxs(ToastPrimitive.Root, { "data-slot": "toast", "data-tone": t.tone, open: true, duration: t.duration, type: t.tone === "error" ? "foreground" : "background", onOpenChange: (open) => {
+                        if (!open)
+                            api.dismiss(t.id);
+                    }, className: "pointer-events-auto relative flex w-full items-start gap-2.5 rounded-lg bg-popover p-3 pr-9 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 data-[state=open]:animate-cui-fade-in data-[swipe=end]:translate-x-(--radix-toast-swipe-end-x) data-[swipe=move]:translate-x-(--radix-toast-swipe-move-x)", children: [t.tone && _jsx(StatusDot, { tone: t.tone, className: "mt-1.5" }), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [_jsx(ToastPrimitive.Title, { className: "font-medium [overflow-wrap:anywhere]", children: t.title }), t.description && (_jsx(ToastPrimitive.Description, { className: "[overflow-wrap:anywhere] text-muted-foreground", children: t.description })), t.action && (_jsx(ToastPrimitive.Action, { altText: t.action.altText, onClick: t.action.onClick, className: "mt-1 w-fit rounded-lg text-sm font-medium text-primary underline-offset-4 outline-none hover:underline focus-visible:ring-2 focus-visible:ring-ring/50", children: t.action.label }))] }), _jsx(ToastPrimitive.Close, { "aria-label": messages.toast.close, className: "absolute top-2 right-2 inline-flex size-6 items-center justify-center rounded-lg text-muted-foreground outline-none hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring/50", children: _jsx(XIcon, { className: "size-3.5", "aria-hidden": true }) })] }, t.id))), _jsx(ToastPrimitive.Viewport, { "data-slot": "toast-viewport", className: cn("fixed right-0 bottom-0 z-50 m-0 flex w-full max-w-sm list-none flex-col gap-2 p-4 outline-none", className) })] }) }));
+}
+/** The toast API of the nearest ToastProvider. Throws outside one, so a missing provider is loud. */
+export function useToast() {
+    const api = React.useContext(ToastContext);
+    if (!api)
+        throw new Error("useToast needs a ToastProvider above it");
+    return api;
+}

package/dist/primitives/Tooltip.d.ts

@@ -0,0 +1,16 @@
+import { Tooltip as TooltipPrimitive } from "radix-ui";
+import type * as React from "react";
+/**
+ * Shares one open delay across the tooltips under it. A Tooltip outside a
+ * provider makes its own, so the provider is optional; an app with many
+ * icon buttons wraps its shell once.
+ */
+export declare function TooltipProvider({ delayDuration, ...props }: React.ComponentProps<typeof TooltipPrimitive.Provider>): React.JSX.Element;
+/**
+ * A short hint on hover and keyboard focus. It names nothing: an icon-only
+ * control still needs its own `aria-label`; the tooltip repeats it for
+ * sighted pointer users.
+ */
+export declare function Tooltip(props: React.ComponentProps<typeof TooltipPrimitive.Root>): React.JSX.Element;
+export declare function TooltipTrigger(props: React.ComponentProps<typeof TooltipPrimitive.Trigger>): React.JSX.Element;
+export declare function TooltipContent({ className, sideOffset, children, ...props }: React.ComponentProps<typeof TooltipPrimitive.Content>): React.JSX.Element;

package/dist/primitives/Tooltip.js

@@ -0,0 +1,26 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Tooltip as TooltipPrimitive } from "radix-ui";
+import { cn } from "../lib/cn.js";
+/**
+ * Shares one open delay across the tooltips under it. A Tooltip outside a
+ * provider makes its own, so the provider is optional; an app with many
+ * icon buttons wraps its shell once.
+ */
+export function TooltipProvider({ delayDuration = 300, ...props }) {
+    return (_jsx(TooltipPrimitive.Provider, { "data-slot": "tooltip-provider", delayDuration: delayDuration, ...props }));
+}
+/**
+ * A short hint on hover and keyboard focus. It names nothing: an icon-only
+ * control still needs its own `aria-label`; the tooltip repeats it for
+ * sighted pointer users.
+ */
+export function Tooltip(props) {
+    return (_jsx(TooltipProvider, { children: _jsx(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props }) }));
+}
+export function TooltipTrigger(props) {
+    return _jsx(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
+}
+export function TooltipContent({ className, sideOffset = 4, children, ...props }) {
+    return (_jsx(TooltipPrimitive.Portal, { children: _jsx(TooltipPrimitive.Content, { "data-slot": "tooltip-content", sideOffset: sideOffset, className: cn("z-50 w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) rounded-lg bg-foreground px-2 py-1 text-xs text-balance text-background data-[state=delayed-open]:animate-cui-fade-in", className), ...props, children: children }) }));
+}

package/dist/provider/messages.d.ts

@@ -1,5 +1,6 @@
 import type { ProductTheme } from "../appearance/product.js";
 import type { ChatRole, ChatRunStatus, ChatToolCallStatus } from "../chat/model.js";
+import type { UploadState } from "../workbench/model.js";
 import type { WorkflowQuestionState } from "../workflow/question.js";
 import type { WorkflowAction, WorkflowAvailability, WorkflowScope, WorkflowStatus } from "../workflow/model.js";
 import type { ArtifactStatus, GateStatus, ReviewDecision, ReviewVerdict, RunStageStatus } from "../workflow/run.js";
@@ -103,6 +104,66 @@ export interface Messages {
     dialog: {
         close: string;
     };
+    workbench: {
+        /** The file browser's name. */
+        files: string;
+        /** The folder tree's name. */
+        folders: string;
+        /** The root directory in the breadcrumb. */
+        root: string;
+        /** The breadcrumb's landmark name. */
+        location: string;
+        /** A listing's accessible name: "Files in reports". */
+        filesIn: (folder: string) => string;
+        view: string;
+        listView: string;
+        gridView: string;
+        name: string;
+        size: string;
+        modified: string;
+        /** Read for a folder's or an unknown size's dash. */
+        noSize: string;
+        loading: string;
+        loadFailed: string;
+        retry: string;
+        /** A tree folder whose children failed to load; activating it retries. */
+        retryFolder: string;
+        empty: string;
+        emptyDescription: string;
+        noFolders: string;
+        itemCount: (count: number) => string;
+        selected: (count: number) => string;
+        /** The overlay while files from the desktop hover over the browser. */
+        dropToUpload: string;
+        dropHere: string;
+        browse: string;
+        maxSize: (size: string) => string;
+        /** The upload list's name. */
+        uploads: string;
+        uploading: (count: number) => string;
+        uploadsDone: string;
+        uploadState: (state: UploadState) => string;
+        cancelUpload: (name: string) => string;
+        dismissUpload: (name: string) => string;
+        previewOf: (name: string) => string;
+        previewLoading: string;
+        previewFailed: string;
+        noPreview: string;
+        closePreview: string;
+        /** A text preview's scrolling region. */
+        contentsOf: (name: string) => string;
+        /** A truncated preview: "Showing 100 of 4,210 rows". */
+        showing: (shown: number, total: number | null) => string;
+        partial: string;
+        /** A CSV column with no header. */
+        column: (index: number) => string;
+        noRows: string;
+    };
+    toast: {
+        /** The notifications region; Radix fills `{hotkey}` with the shortcut that focuses it. */
+        region: string;
+        close: string;
+    };
     confirm: {
         confirm: string;
         cancel: string;
@@ -615,6 +676,14 @@ export interface Messages {
         waitingOnYou: string;
         /** The shortcut as people read it, from the key list ("⌘/", "Ctrl+/"). */
         shortcut: (keys: string) => string;
+        /** A question from the agent that is not a tool call. */
+        interrupt: string;
+        decline: string;
+        back: string;
+        /** Answers an artifact's form review. */
+        sendReview: string;
+        /** The shared state's section. */
+        sharedState: string;
     };
 }
 export declare const defaultMessages: Messages;

package/dist/provider/messages.js

@@ -236,6 +236,61 @@ export const defaultMessages = {
     dialog: {
         close: "Close",
     },
+    workbench: {
+        files: "Files",
+        folders: "Folders",
+        root: "Home",
+        location: "Location",
+        filesIn: (folder) => `Files in ${folder}`,
+        view: "View",
+        listView: "List",
+        gridView: "Grid",
+        name: "Name",
+        size: "Size",
+        modified: "Modified",
+        noSize: "No size",
+        loading: "Loading files",
+        loadFailed: "Could not load this folder",
+        retry: "Retry",
+        retryFolder: "Could not load. Retry",
+        empty: "This folder is empty",
+        emptyDescription: "Drop files here to upload them.",
+        noFolders: "No folders",
+        itemCount: (count) => `${count.toLocaleString()} ${count === 1 ? "item" : "items"}`,
+        selected: (count) => `${count.toLocaleString()} selected`,
+        dropToUpload: "Drop files to upload",
+        dropHere: "Drop files here",
+        browse: "Choose files",
+        maxSize: (size) => `Up to ${size} each`,
+        uploads: "Uploads",
+        uploading: (count) => `Uploading ${count.toLocaleString()} ${count === 1 ? "file" : "files"}`,
+        uploadsDone: "Uploads finished",
+        uploadState: (state) => ({
+            queued: "Waiting",
+            uploading: "Uploading",
+            done: "Done",
+            error: "Failed",
+            canceled: "Cancelled",
+        })[state],
+        cancelUpload: (name) => `Cancel upload of ${name}`,
+        dismissUpload: (name) => `Clear ${name}`,
+        previewOf: (name) => `Preview of ${name}`,
+        previewLoading: "Loading preview",
+        previewFailed: "Could not preview this file",
+        noPreview: "No preview for this file",
+        closePreview: "Close preview",
+        contentsOf: (name) => `Contents of ${name}`,
+        showing: (shown, total) => total === null
+            ? `Showing the first ${shown.toLocaleString()}`
+            : `Showing ${shown.toLocaleString()} of ${total.toLocaleString()}`,
+        partial: "Showing the start of the file",
+        column: (index) => `Column ${index}`,
+        noRows: "No rows",
+    },
+    toast: {
+        region: "Notifications ({hotkey})",
+        close: "Dismiss notification",
+    },
     confirm: {
         confirm: "Confirm",
         cancel: "Cancel",
@@ -851,6 +906,11 @@ export const defaultMessages = {
         emptyDescription: "Ask about what is on this page, or pick a starting point.",
         waitingOnYou: "Answer the card above to continue.",
         shortcut: (keys) => `Shortcut ${keys}`,
+        interrupt: "The agent is waiting for you",
+        decline: "Decline",
+        back: "Back",
+        sendReview: "Send review",
+        sharedState: "Shared state",
     },
 };
 export function mergeMessages(overrides) {

package/dist/theme/css-layer.js

@@ -1,5 +1,5 @@
 import { BOOT_SOURCE, bootConfig } from "../appearance/boot.js";
-import { astroliftBrand, chatStudioBrand, cykickBrand, loadrBrand, workbenchBrand, zentinelleBrand, } from "../appearance/brands.js";
+import { astroliftBrand, chatStudioBrand, cykickBrand, deepDataAgentBrand, loadrBrand, workbenchBrand, zentinelleBrand, } from "../appearance/brands.js";
 import { CORNERS, defineProduct } from "../appearance/product.js";
 import { accentDeclarations, block, renderThemeCss } from "./css.js";
 /**
@@ -16,6 +16,7 @@ export const CSS_LAYER_PRODUCTS = [
     chatStudioBrand,
     loadrBrand,
     cykickBrand,
+    deepDataAgentBrand,
 ].map((config) => defineProduct(config));
 const TOKENS_HEADER = `/*
  * @calliopelabs/ui CSS layer: tokens.

package/dist/theme/tokens.generated.d.ts

@@ -349,5 +349,8 @@ export declare const TOKENS: {
                 readonly onLight: "#ffffff";
             };
         };
+        readonly "deep-data-agent": {
+            readonly sidebar: "#1a150c";
+        };
     };
 };

package/dist/theme/tokens.generated.js

@@ -352,6 +352,9 @@ export const TOKENS = {
                 "light": "#0e7490",
                 "onLight": "#ffffff"
             }
+        },
+        "deep-data-agent": {
+            "sidebar": "#1a150c"
         }
     }
 };

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