@calliopelabs/ui 0.13.0 → 0.16.0

package/dist/workbench/FilePreview.js

@@ -0,0 +1,108 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FileQuestionIcon, XIcon } from "lucide-react";
+import * as React from "react";
+import { DataTable } from "../data/DataTable.js";
+import { useLocalTable } from "../data/use-local-table.js";
+import { cn } from "../lib/cn.js";
+import { Button } from "../primitives/Button.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 { FileIcon } from "./FileIcon.js";
+import { formatBytes, parseDelimited } from "./model.js";
+function TablePreview({ name, columns, rows, }) {
+    const { messages } = useUI();
+    const t = messages.workbench;
+    const controller = useLocalTable(rows, {
+        searchText: (row) => row.cells.join(" "),
+        pageSize: 50,
+        sortBy: Object.fromEntries(columns.map((_, i) => [String(i), (row) => row.cells[i] ?? ""])),
+    });
+    const tableColumns = columns.map((header, i) => ({
+        id: String(i),
+        header: header || t.column(i + 1),
+        sortKey: String(i),
+        cellClassName: "max-w-64 truncate",
+        cell: (row) => row.cells[i] ?? "",
+    }));
+    return (_jsx(DataTable, { label: name, controller: controller, columns: tableColumns, getRowId: (row) => row.id, empty: { title: t.noRows }, density: "compact" }));
+}
+function stringify(value) {
+    if (value == null)
+        return "";
+    return typeof value === "object" ? JSON.stringify(value) : String(value);
+}
+/**
+ * A file's contents in a side panel: CSV and tables in the library's
+ * DataTable (search, sort, paging), JSON pretty-printed, images, markdown
+ * through the host's renderer, and text. It reads nothing itself: the host
+ * fetches the bytes and hands over the content.
+ */
+export function FilePreview({ name, size, mimeType, content, error, onRetry, truncated, renderMarkdown, onClose, actions, className, }) {
+    const { messages } = useUI();
+    const t = messages.workbench;
+    const table = React.useMemo(() => {
+        if (content?.kind === "csv") {
+            const parsed = parseDelimited(content.text, content.delimiter);
+            const header = content.header !== false;
+            const width = Math.max(0, ...parsed.map((r) => r.length));
+            const columns = header ? (parsed[0] ?? []) : Array.from({ length: width }, () => "");
+            const body = header ? parsed.slice(1) : parsed;
+            return { columns, rows: body.map((cells, i) => ({ id: String(i), cells })) };
+        }
+        if (content?.kind === "table")
+            return {
+                columns: content.columns,
+                rows: content.rows.map((row, i) => ({
+                    id: String(i),
+                    cells: content.columns.map((c) => stringify(row[c])),
+                })),
+            };
+        return null;
+    }, [content]);
+    const json = React.useMemo(() => {
+        if (content?.kind !== "json")
+            return null;
+        try {
+            return JSON.stringify(JSON.parse(content.text), null, 2);
+        }
+        catch {
+            return content.text;
+        }
+    }, [content]);
+    const errorMessage = typeof error === "string" ? error : error?.message;
+    let body;
+    if (error) {
+        body = (_jsx(ErrorState, { title: t.previewFailed, error: errorMessage || t.previewFailed, onRetry: onRetry, retryLabel: t.retry }));
+    }
+    else if (!content) {
+        body = _jsx(LoadingState, { label: t.previewLoading, rows: 4 });
+    }
+    else if (table) {
+        body = _jsx(TablePreview, { name: name, columns: table.columns, rows: table.rows });
+    }
+    else if (content.kind === "image") {
+        body = (_jsx("img", { src: content.src, alt: content.alt ?? name, className: "mx-auto max-h-full max-w-full rounded-lg object-contain" }));
+    }
+    else if (content.kind === "markdown" && renderMarkdown) {
+        body = _jsx("div", { className: "text-sm", children: renderMarkdown(content.text) });
+    }
+    else if (content.kind === "binary") {
+        body = (_jsx(EmptyState, { icon: _jsx(FileQuestionIcon, { "aria-hidden": true, className: "size-6" }), title: t.noPreview, description: [mimeType, size != null ? formatBytes(size) : null]
+                .filter(Boolean)
+                .join(" · ") }));
+    }
+    else {
+        body = (_jsx("pre", { 
+            // Long text scrolls the panel: focusable so a keyboard can reach and scroll it.
+            // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+            tabIndex: 0, "aria-label": t.contentsOf(name), className: "rounded-lg font-mono text-xs leading-relaxed break-words whitespace-pre-wrap outline-none focus-visible:ring-2 focus-visible:ring-ring/50", children: json ?? (content.kind === "text" || content.kind === "markdown" ? content.text : "") }));
+    }
+    const partial = truncated &&
+        (typeof truncated === "object"
+            ? t.showing(truncated.shown, truncated.total ?? null)
+            : t.partial);
+    return (_jsxs("section", { "aria-label": t.previewOf(name), "data-slot": "file-preview", className: cn("flex min-h-0 min-w-0 flex-col bg-background", className), children: [_jsxs("header", { className: "flex min-h-11 items-center gap-2 border-b px-3 py-1.5", children: [_jsx(FileIcon, { name: name, kind: "file" }), _jsx("h2", { className: "min-w-0 flex-1 truncate text-sm font-medium", title: name, children: name }), size != null && (_jsx("span", { className: "shrink-0 text-xs text-muted-foreground", children: formatBytes(size) })), actions, onClose && (_jsx(Button, { variant: "ghost", size: "icon", className: "size-7", "aria-label": t.closePreview, onClick: onClose, children: _jsx(XIcon, { "aria-hidden": true }) }))] }), _jsx("div", { className: "min-h-0 flex-1 overflow-auto p-3", children: body }), partial && _jsx("p", { className: "border-t px-3 py-1.5 text-xs text-muted-foreground", children: partial })] }));
+}

package/dist/workbench/FileTree.d.ts

@@ -0,0 +1,37 @@
+import * as React from "react";
+import { type MoveHandler } from "./dnd.js";
+import { type FileBranch, type FileItem } from "./model.js";
+export interface FileTreeProps {
+    /** Names the tree. Defaults to "Folders". */
+    label?: string;
+    /** The top level. */
+    root: FileBranch;
+    /** Each loaded directory's children, by path. A directory missing here has not been asked for. */
+    branches?: Readonly<Record<string, FileBranch>>;
+    /** A directory opened with no branch yet: fetch it and put a `loading`, then `ready`, branch in `branches`. */
+    onLoad?: (path: string) => void;
+    /** Re-fetch after an error. `""` is the root. */
+    onRetry?: (path: string) => void;
+    /** Open directories. Controlled when given. */
+    expanded?: ReadonlySet<string>;
+    defaultExpanded?: Iterable<string>;
+    onExpandedChange?: (expanded: Set<string>) => void;
+    /** The current directory, drawn as selected. */
+    selectedPath?: string | null;
+    /** A node chosen by click, Enter or Space. */
+    onSelect?: (item: FileItem) => void;
+    /** Files as well as directories. Off by default: a folder tree. */
+    showFiles?: boolean;
+    /** Drag and drop between nodes; directories (and the tree's background, the root) are targets. */
+    onMove?: MoveHandler;
+    /** A node's context-menu items (`ContextMenuItem`s). */
+    contextMenu?: (item: FileItem) => React.ReactNode;
+    className?: string;
+}
+/**
+ * A lazy file tree on the WAI-ARIA tree pattern: one tab stop, arrows move
+ * and open, Home and End jump, typing a letter finds the next name. The
+ * host owns the data: it answers `onLoad` with a branch per directory, so
+ * the tree fetches nothing and works over any backend.
+ */
+export declare function FileTree({ label, root, branches, onLoad, onRetry, expanded: expandedProp, defaultExpanded, onExpandedChange, selectedPath, onSelect, showFiles, onMove, contextMenu, className, }: FileTreeProps): React.JSX.Element;

package/dist/workbench/FileTree.js

@@ -0,0 +1,218 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ChevronRightIcon, RotateCwIcon } from "lucide-react";
+import * as React from "react";
+import { cn } from "../lib/cn.js";
+import { ContextMenu, ContextMenuContent, ContextMenuTrigger } from "../primitives/ContextMenu.js";
+import { Button } from "../primitives/Button.js";
+import { Skeleton } from "../primitives/Skeleton.js";
+import { useUI } from "../provider/UIProvider.js";
+import { startFileDrag, useFileDrop } from "./dnd.js";
+import { FileIcon } from "./FileIcon.js";
+import { parentPath } from "./model.js";
+import { typeahead } from "./typeahead.js";
+/**
+ * A lazy file tree on the WAI-ARIA tree pattern: one tab stop, arrows move
+ * and open, Home and End jump, typing a letter finds the next name. The
+ * host owns the data: it answers `onLoad` with a branch per directory, so
+ * the tree fetches nothing and works over any backend.
+ */
+export function FileTree({ label, root, branches = {}, onLoad, onRetry, expanded: expandedProp, defaultExpanded, onExpandedChange, selectedPath = null, onSelect, showFiles = false, onMove, contextMenu, className, }) {
+    const { messages } = useUI();
+    const t = messages.workbench;
+    const [ownExpanded, setOwnExpanded] = React.useState(() => new Set(defaultExpanded ?? []));
+    const expanded = expandedProp ?? ownExpanded;
+    const [focusKey, setFocusKey] = React.useState(null);
+    const [menuItem, setMenuItem] = React.useState(null);
+    const nodes = React.useRef(new Map());
+    const pendingFocus = React.useRef(null);
+    const requested = React.useRef(new Set());
+    const search = React.useRef({ text: "", at: 0 });
+    const rootDrop = useFileDrop("", onMove);
+    const shown = React.useCallback((items) => showFiles ? items : items.filter((item) => item.kind === "directory"), [showFiles]);
+    const rows = React.useMemo(() => {
+        const out = [];
+        const walk = (items, level) => {
+            const list = shown(items);
+            list.forEach((item, i) => {
+                const branch = branches[item.path];
+                const leaf = item.kind !== "directory" ||
+                    (branch?.state === "ready" && shown(branch.items).length === 0);
+                const open = !leaf && expanded.has(item.path);
+                out.push({
+                    type: "item",
+                    key: item.path,
+                    item,
+                    level,
+                    size: list.length,
+                    pos: i + 1,
+                    open,
+                    leaf,
+                });
+                if (!open)
+                    return;
+                if (branch?.state === "ready")
+                    walk(branch.items, level + 1);
+                else if (branch?.state === "error")
+                    out.push({
+                        type: "error",
+                        key: `error:${item.path}`,
+                        path: item.path,
+                        level: level + 1,
+                        message: branch.message,
+                    });
+                else
+                    out.push({
+                        type: "loading",
+                        key: `loading:${item.path}`,
+                        path: item.path,
+                        level: level + 1,
+                    });
+            });
+        };
+        if (root.state === "ready")
+            walk(root.items, 1);
+        return out;
+    }, [root, branches, expanded, shown]);
+    // Ask for each open directory's children once; a branch arriving clears the request.
+    React.useEffect(() => {
+        for (const path of requested.current)
+            if (branches[path])
+                requested.current.delete(path);
+        for (const row of rows) {
+            if (row.type !== "loading" || branches[row.path] || requested.current.has(row.path))
+                continue;
+            requested.current.add(row.path);
+            onLoad?.(row.path);
+        }
+    }, [rows, branches, onLoad]);
+    React.useLayoutEffect(() => {
+        if (pendingFocus.current === null)
+            return;
+        nodes.current.get(pendingFocus.current)?.focus();
+        pendingFocus.current = null;
+    });
+    const setExpanded = (next) => {
+        if (!expandedProp)
+            setOwnExpanded(next);
+        onExpandedChange?.(next);
+    };
+    const toggle = (path, open) => {
+        if (expanded.has(path) === open)
+            return;
+        const next = new Set(expanded);
+        if (open)
+            next.add(path);
+        else
+            next.delete(path);
+        setExpanded(next);
+    };
+    const tabKey = (focusKey !== null && rows.some((r) => r.key === focusKey) && focusKey) ||
+        (selectedPath !== null && rows.some((r) => r.key === selectedPath) && selectedPath) ||
+        rows[0]?.key;
+    const focusRow = (key) => {
+        if (key === undefined)
+            return;
+        setFocusKey(key);
+        pendingFocus.current = key;
+    };
+    const activate = (row) => {
+        if (row.type === "error")
+            onRetry?.(row.path);
+        else if (row.type === "item") {
+            onSelect?.(row.item);
+            if (row.item.kind === "directory" && !row.leaf)
+                toggle(row.item.path, true);
+        }
+    };
+    const onKeyDown = (event) => {
+        const index = rows.findIndex((r) => r.key === tabKey);
+        const row = rows[index];
+        if (!row)
+            return;
+        const handled = () => {
+            event.preventDefault();
+            event.stopPropagation();
+        };
+        switch (event.key) {
+            case "ArrowDown":
+                handled();
+                focusRow(rows[Math.min(rows.length - 1, index + 1)]?.key);
+                return;
+            case "ArrowUp":
+                handled();
+                focusRow(rows[Math.max(0, index - 1)]?.key);
+                return;
+            case "Home":
+                handled();
+                focusRow(rows[0]?.key);
+                return;
+            case "End":
+                handled();
+                focusRow(rows[rows.length - 1]?.key);
+                return;
+            case "ArrowRight":
+                handled();
+                if (row.type !== "item" || row.leaf)
+                    return;
+                if (!row.open)
+                    toggle(row.item.path, true);
+                else
+                    focusRow(rows[index + 1]?.key);
+                return;
+            case "ArrowLeft": {
+                handled();
+                if (row.type === "item" && row.open) {
+                    toggle(row.item.path, false);
+                    return;
+                }
+                const parent = row.type === "item" ? parentPath(row.item.path) : row.path;
+                if (parent !== "" && rows.some((r) => r.key === parent))
+                    focusRow(parent);
+                return;
+            }
+            case "Enter":
+            case " ":
+                handled();
+                activate(row);
+                return;
+            default: {
+                const names = rows.map((r) => (r.type === "item" ? r.item.name : ""));
+                const next = typeahead(search.current, event, names, index);
+                if (next !== null) {
+                    handled();
+                    focusRow(rows[next]?.key);
+                }
+            }
+        }
+    };
+    if (root.state !== "ready" || rows.length === 0) {
+        return (_jsx("div", { className: cn("p-2 text-sm text-muted-foreground", className), ...rootDrop.props, children: root.state === "loading" ? (_jsx("div", { role: "status", "aria-label": t.loading, className: "flex flex-col gap-2 p-1", children: Array.from({ length: 5 }, (_, i) => (_jsx(Skeleton, { className: cn("h-4", i % 2 ? "w-2/3" : "w-4/5") }, i))) })) : root.state === "error" ? (_jsxs("div", { role: "alert", className: "flex flex-col items-start gap-2 p-1", children: [_jsx("p", { className: "[overflow-wrap:anywhere]", children: root.message || t.loadFailed }), onRetry && (_jsx(Button, { size: "sm", variant: "outline", onClick: () => onRetry(""), children: t.retry }))] })) : (_jsx("p", { className: "p-1", children: showFiles ? t.empty : t.noFolders })) }));
+    }
+    const tree = (_jsx("ul", { role: "tree", "aria-label": label ?? t.folders, onKeyDown: onKeyDown, ...rootDrop.props, className: cn("flex min-h-full flex-col gap-px p-1 text-sm outline-none", rootDrop.over && "bg-primary/5", className), children: rows.map((row) => row.type === "item" ? (_jsx(TreeNode, { row: row, nodeRef: (el) => {
+                if (el)
+                    nodes.current.set(row.key, el);
+                else
+                    nodes.current.delete(row.key);
+            }, tabbable: row.key === tabKey, selected: row.item.path === selectedPath, onFocus: () => setFocusKey(row.key), onActivate: () => activate(row), onToggle: () => toggle(row.item.path, !row.open), onContextMenu: () => setMenuItem(row.item), onMove: onMove, dragLabel: row.item.name }, row.key)) : (_jsx("li", { ref: (el) => {
+                if (el)
+                    nodes.current.set(row.key, el);
+                else
+                    nodes.current.delete(row.key);
+            }, role: "treeitem", "aria-level": row.level, "aria-selected": false, "aria-disabled": row.type === "loading" || undefined, "aria-busy": row.type === "loading" || undefined, tabIndex: row.key === tabKey ? 0 : -1, onFocus: () => setFocusKey(row.key), onClick: () => activate(row), style: { paddingInlineStart: `${row.level * 0.75 + 0.75}rem` }, className: cn("flex h-7 items-center gap-1.5 rounded-lg pr-2 text-xs text-muted-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring/50", row.type === "error" && "cursor-pointer text-danger-fg hover:bg-accent"), children: row.type === "loading" ? (t.loading) : (_jsxs(_Fragment, { children: [_jsx(RotateCwIcon, { "aria-hidden": true, className: "size-3" }), _jsx("span", { className: "truncate", children: t.retryFolder })] })) }, row.key))) }));
+    if (!contextMenu)
+        return tree;
+    return (_jsxs(ContextMenu, { onOpenChange: (open) => {
+            if (!open)
+                setMenuItem(null);
+        }, children: [_jsx(ContextMenuTrigger, { asChild: true, children: tree }), menuItem && _jsx(ContextMenuContent, { children: contextMenu(menuItem) })] }));
+}
+function TreeNode({ row, nodeRef, tabbable, selected, onFocus, onActivate, onToggle, onContextMenu, onMove, dragLabel, }) {
+    const { item, level, size, pos, open, leaf } = row;
+    const drop = useFileDrop(item.kind === "directory" ? item.path : null, onMove);
+    return (_jsxs("li", { ref: nodeRef, role: "treeitem", "aria-level": level, "aria-setsize": size, "aria-posinset": pos, "aria-expanded": leaf ? undefined : open, "aria-selected": selected, tabIndex: tabbable ? 0 : -1, draggable: Boolean(onMove), onDragStart: onMove ? (event) => startFileDrag(event, [item.path], dragLabel) : undefined, ...drop.props, onFocus: onFocus, onClick: onActivate, onContextMenu: onContextMenu, style: { paddingInlineStart: `${(level - 1) * 0.75 + 0.25}rem` }, className: cn("flex h-7 shrink-0 cursor-default items-center gap-1 rounded-lg pr-2 outline-none select-none hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring/50", selected && "bg-accent font-medium text-accent-foreground", drop.over && "bg-primary/10 ring-2 ring-primary"), children: [_jsx("span", { "aria-hidden": true, onClick: (event) => {
+                    event.stopPropagation();
+                    if (!leaf)
+                        onToggle();
+                }, className: cn("inline-flex size-4 shrink-0 items-center justify-center rounded text-muted-foreground", leaf && "invisible"), children: _jsx(ChevronRightIcon, { className: cn("size-3 transition-transform", open && "rotate-90") }) }), _jsx(FileIcon, { name: item.name, kind: item.kind, open: open }), _jsx("span", { className: "truncate", children: item.name })] }));
+}

package/dist/workbench/UploadDropzone.d.ts

@@ -0,0 +1,52 @@
+import * as React from "react";
+import { type UploadState } from "./model.js";
+/** One upload as the host tracks it. */
+export interface UploadItem {
+    id: string;
+    name: string;
+    size?: number | null;
+    /** 0 to 100; null or absent while the size of the work is unknown. */
+    progress?: number | null;
+    state: UploadState;
+    /** Why it failed, for `error`. */
+    error?: string;
+}
+export interface UploadRejection {
+    file: File;
+    reason: "too-large" | "type";
+}
+export interface UploadDropzoneProps {
+    /** Files dropped or picked that pass `accept` and `maxSize`. The host uploads them. */
+    onFiles: (files: File[]) => void;
+    /** Files refused by `accept` or `maxSize`. */
+    onReject?: (rejections: UploadRejection[]) => void;
+    /** As the file input's `accept`: extensions (`.csv`) and MIME types (`image/*`), comma-separated. */
+    accept?: string;
+    /** Bytes. */
+    maxSize?: number;
+    multiple?: boolean;
+    disabled?: boolean;
+    /** The uploads to show, with their progress. */
+    uploads?: readonly UploadItem[];
+    /** Cancel a queued or running upload. */
+    onCancel?: (id: string) => void;
+    /** Clear a finished, failed or cancelled upload from the list. */
+    onDismiss?: (id: string) => void;
+    /**
+     * The area to drop onto (a whole file browser): the dropzone wraps it,
+     * draws an overlay while files hover, and floats the progress in a
+     * corner. Without children it draws its own box with a browse button.
+     */
+    children?: React.ReactNode;
+    /** The box's prompt. Defaults to "Drop files here". */
+    label?: string;
+    className?: string;
+}
+/**
+ * Drop files from the desktop, or pick them, and see each upload's
+ * progress. Host-driven: it hands the files to `onFiles` and draws the
+ * `uploads` the host reports, so any transport (chunked, presigned, a
+ * mutation) fits. Drags between the browser's own views are not files and
+ * pass through.
+ */
+export declare function UploadDropzone({ onFiles, onReject, accept, maxSize, multiple, disabled, uploads, onCancel, onDismiss, children, label, className, }: UploadDropzoneProps): React.JSX.Element;

package/dist/workbench/UploadDropzone.js

@@ -0,0 +1,115 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CheckIcon, UploadIcon, XIcon } from "lucide-react";
+import * as React from "react";
+import { cn } from "../lib/cn.js";
+import { Button } from "../primitives/Button.js";
+import { useUI } from "../provider/UIProvider.js";
+import { formatBytes } from "./model.js";
+function accepts(file, accept) {
+    if (!accept)
+        return true;
+    const name = file.name.toLowerCase();
+    const type = file.type.toLowerCase();
+    return accept
+        .split(",")
+        .map((part) => part.trim().toLowerCase())
+        .filter(Boolean)
+        .some((rule) => rule.startsWith(".")
+        ? name.endsWith(rule)
+        : rule.endsWith("/*")
+            ? type.startsWith(rule.slice(0, -1))
+            : type === rule);
+}
+const hasFiles = (event) => event.dataTransfer.types.includes("Files");
+/**
+ * Drop files from the desktop, or pick them, and see each upload's
+ * progress. Host-driven: it hands the files to `onFiles` and draws the
+ * `uploads` the host reports, so any transport (chunked, presigned, a
+ * mutation) fits. Drags between the browser's own views are not files and
+ * pass through.
+ */
+export function UploadDropzone({ onFiles, onReject, accept, maxSize, multiple = true, disabled = false, uploads = [], onCancel, onDismiss, children, label, className, }) {
+    const { messages } = useUI();
+    const t = messages.workbench;
+    const input = React.useRef(null);
+    const depth = React.useRef(0);
+    const [over, setOver] = React.useState(false);
+    const overlay = children !== undefined;
+    const take = (list) => {
+        if (!list || disabled)
+            return;
+        const files = Array.from(list).slice(0, multiple ? undefined : 1);
+        const ok = [];
+        const rejected = [];
+        for (const file of files) {
+            if (!accepts(file, accept))
+                rejected.push({ file, reason: "type" });
+            else if (maxSize !== undefined && file.size > maxSize)
+                rejected.push({ file, reason: "too-large" });
+            else
+                ok.push(file);
+        }
+        if (ok.length)
+            onFiles(ok);
+        if (rejected.length)
+            onReject?.(rejected);
+    };
+    const dropProps = disabled
+        ? {}
+        : {
+            onDragEnter: (event) => {
+                if (!hasFiles(event))
+                    return;
+                event.preventDefault();
+                depth.current++;
+                setOver(true);
+            },
+            onDragOver: (event) => {
+                if (!hasFiles(event))
+                    return;
+                event.preventDefault();
+                event.dataTransfer.dropEffect = "copy";
+            },
+            onDragLeave: (event) => {
+                if (!hasFiles(event))
+                    return;
+                depth.current = Math.max(0, depth.current - 1);
+                if (depth.current === 0)
+                    setOver(false);
+            },
+            onDrop: (event) => {
+                if (!hasFiles(event))
+                    return;
+                event.preventDefault();
+                depth.current = 0;
+                setOver(false);
+                take(event.dataTransfer.files);
+            },
+        };
+    const picker = (_jsx("input", { ref: input, type: "file", hidden: true, tabIndex: -1, accept: accept, multiple: multiple, onChange: (event) => {
+            take(event.target.files);
+            event.target.value = "";
+        } }));
+    const progress = uploads.length > 0 && (_jsx(UploadList, { uploads: uploads, onCancel: onCancel, onDismiss: onDismiss, className: overlay ? "absolute right-3 bottom-3 z-20 w-72 shadow-md" : "mt-3" }));
+    if (overlay) {
+        return (_jsxs("div", { "data-slot": "upload-dropzone", ...dropProps, className: cn("relative flex min-h-0 flex-col", className), children: [children, picker, over && (_jsx("div", { "aria-hidden": true, className: "pointer-events-none absolute inset-0 z-30 flex items-center justify-center rounded-lg border-2 border-dashed border-primary bg-primary/10", children: _jsxs("span", { className: "flex flex-col items-center gap-2 rounded-lg bg-background/80 px-4 py-3 font-medium text-primary", children: [_jsx(UploadIcon, { "aria-hidden": true, className: "size-6" }), t.dropToUpload] }) })), progress] }));
+    }
+    return (_jsxs("div", { "data-slot": "upload-dropzone", className: className, children: [_jsxs("div", { ...dropProps, "aria-disabled": disabled || undefined, className: cn("flex flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed px-6 py-8 text-center text-sm text-muted-foreground transition-colors", over && "border-primary bg-primary/10 text-primary", disabled && "opacity-50"), children: [_jsx(UploadIcon, { "aria-hidden": true, className: "size-6" }), _jsx("p", { className: "font-medium text-foreground", children: label ?? t.dropHere }), _jsx(Button, { type: "button", size: "sm", variant: "outline", disabled: disabled, onClick: () => input.current?.click(), children: t.browse }), (accept || maxSize !== undefined) && (_jsx("p", { className: "text-xs", children: [accept, maxSize !== undefined && t.maxSize(formatBytes(maxSize))]
+                            .filter(Boolean)
+                            .join(" · ") })), picker] }), progress] }));
+}
+function UploadList({ uploads, onCancel, onDismiss, className, }) {
+    const { messages } = useUI();
+    const t = messages.workbench;
+    const running = uploads.filter((u) => u.state === "queued" || u.state === "uploading").length;
+    return (_jsxs("section", { "aria-label": t.uploads, className: cn("rounded-lg border bg-popover p-3 text-popover-foreground", className), children: [_jsx("h3", { className: "mb-2 text-xs font-medium", "aria-live": "polite", children: running > 0 ? t.uploading(running) : t.uploadsDone }), _jsx("ul", { className: "flex max-h-60 flex-col gap-2 overflow-auto", children: uploads.map((u) => {
+                    const active = u.state === "queued" || u.state === "uploading";
+                    const pct = u.state === "done" ? 100 : Math.round(Math.min(100, Math.max(0, u.progress ?? 0)));
+                    return (_jsxs("li", { "data-state": u.state, className: "flex flex-col gap-1 text-xs", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [_jsx("span", { className: "min-w-0 flex-1 truncate", title: u.name, children: u.name }), _jsx("span", { className: cn("shrink-0 tabular-nums", u.state === "error" ? "text-danger-fg" : "text-muted-foreground"), children: u.state === "uploading" && u.progress != null
+                                            ? `${pct}%`
+                                            : t.uploadState(u.state) }), u.state === "done" && (_jsx(CheckIcon, { "aria-hidden": true, className: "size-3.5 text-success-fg" })), active && onCancel && (_jsx("button", { type: "button", "aria-label": t.cancelUpload(u.name), onClick: () => onCancel(u.id), className: "inline-flex size-5 shrink-0 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, { "aria-hidden": true, className: "size-3" }) })), !active && onDismiss && (_jsx("button", { type: "button", "aria-label": t.dismissUpload(u.name), onClick: () => onDismiss(u.id), className: "inline-flex size-5 shrink-0 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, { "aria-hidden": true, className: "size-3" }) }))] }), active && (_jsx("div", { role: "progressbar", "aria-label": u.name, "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": u.progress != null ? pct : undefined, className: "h-1 overflow-hidden rounded-full bg-muted", children: _jsx("div", { className: cn("h-full rounded-full bg-primary transition-[width]", u.state === "uploading" &&
+                                        u.progress == null &&
+                                        "w-1/3 animate-pulse motion-reduce:animate-none"), style: u.progress != null || u.state === "queued" ? { width: `${pct}%` } : undefined }) })), u.state === "error" && u.error && (_jsx("p", { className: "[overflow-wrap:anywhere] text-danger-fg", children: u.error }))] }, u.id));
+                }) })] }));
+}

package/dist/workbench/dnd.d.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+/** The data type of a drag between the browser's own views. Uploads are `Files` and never match. */
+export declare const FILE_DRAG_TYPE = "application/x-calliope-files";
+export type MoveHandler = (sources: string[], target: string, options: {
+    copy: boolean;
+}) => void;
+/** Starts an internal drag of `paths`, with a small label as its image. */
+export declare function startFileDrag(event: React.DragEvent, paths: readonly string[], label: string): void;
+/**
+ * Makes an element a drop target for the directory `target`. Holding Alt
+ * (Option) copies instead of moving. The sources are only readable on drop,
+ * so a hover cannot tell a no-op; `canDrop` filters it out then.
+ */
+export declare function useFileDrop(target: string | null, onMove: MoveHandler | undefined): {
+    over: boolean;
+    props: React.HTMLAttributes<HTMLElement>;
+};

package/dist/workbench/dnd.js

@@ -0,0 +1,77 @@
+"use client";
+import * as React from "react";
+import { canDrop } from "./model.js";
+/** The data type of a drag between the browser's own views. Uploads are `Files` and never match. */
+export const FILE_DRAG_TYPE = "application/x-calliope-files";
+/** Starts an internal drag of `paths`, with a small label as its image. */
+export function startFileDrag(event, paths, label) {
+    event.dataTransfer.setData(FILE_DRAG_TYPE, JSON.stringify(paths));
+    event.dataTransfer.effectAllowed = "copyMove";
+    const ghost = document.createElement("div");
+    ghost.className =
+        "fixed -top-96 left-0 rounded-lg bg-popover px-2 py-1 text-xs text-popover-foreground shadow-md ring-1 ring-foreground/10";
+    ghost.textContent = label;
+    document.body.appendChild(ghost);
+    event.dataTransfer.setDragImage(ghost, 0, 0);
+    requestAnimationFrame(() => ghost.remove());
+}
+function readPaths(event) {
+    try {
+        const parsed = JSON.parse(event.dataTransfer.getData(FILE_DRAG_TYPE));
+        return Array.isArray(parsed) && parsed.every((p) => typeof p === "string") ? parsed : null;
+    }
+    catch {
+        return null;
+    }
+}
+/**
+ * Makes an element a drop target for the directory `target`. Holding Alt
+ * (Option) copies instead of moving. The sources are only readable on drop,
+ * so a hover cannot tell a no-op; `canDrop` filters it out then.
+ */
+export function useFileDrop(target, onMove) {
+    const [over, setOver] = React.useState(false);
+    const depth = React.useRef(0);
+    const enabled = target !== null && Boolean(onMove);
+    const accepts = (event) => enabled && event.dataTransfer.types.includes(FILE_DRAG_TYPE);
+    const props = enabled
+        ? {
+            onDragEnter: (event) => {
+                if (!accepts(event))
+                    return;
+                event.preventDefault();
+                event.stopPropagation();
+                depth.current++;
+                setOver(true);
+            },
+            onDragOver: (event) => {
+                if (!accepts(event))
+                    return;
+                event.preventDefault();
+                event.stopPropagation();
+                event.dataTransfer.dropEffect = event.altKey ? "copy" : "move";
+            },
+            onDragLeave: (event) => {
+                if (!accepts(event))
+                    return;
+                event.stopPropagation();
+                depth.current = Math.max(0, depth.current - 1);
+                if (depth.current === 0)
+                    setOver(false);
+            },
+            onDrop: (event) => {
+                if (!accepts(event))
+                    return;
+                event.preventDefault();
+                event.stopPropagation();
+                depth.current = 0;
+                setOver(false);
+                const sources = readPaths(event);
+                const copy = Boolean(event.altKey);
+                if (sources && target !== null && canDrop(sources, target, copy))
+                    onMove?.(sources, target, { copy });
+            },
+        }
+        : {};
+    return { over, props };
+}

package/dist/workbench/index.d.ts

@@ -0,0 +1,16 @@
+/**
+ * `@calliopelabs/ui/workbench`: the pieces of an IDE-style tool that more
+ * than one Calliope AI product draws. Opt-in, like `./agent`: an app that
+ * has no file browser never loads it. Everything is host-driven: data comes
+ * in as props, every change goes out through a callback, nothing fetches.
+ * Styles come from the package preset (`@calliopelabs/ui/preset.css`).
+ */
+export { canDrop, fileExtension, formatBytes, isWithin, joinPath, parentPath, parseDelimited, pathSegments, previewKindFor, sortFiles, type FileBranch, type FileItem, type FileKind, type FileSort, type FileSortKey, type FileView, type PreviewKind, type UploadState, } from "./model.js";
+export { FILE_DRAG_TYPE, type MoveHandler } from "./dnd.js";
+export { FileIcon, type FileIconProps } from "./FileIcon.js";
+export { FileTree, type FileTreeProps } from "./FileTree.js";
+export { FileList, type FileListProps, type FileViewProps } from "./FileList.js";
+export { FileGrid, type FileGridProps } from "./FileGrid.js";
+export { FileBrowser, type FileBrowserProps } from "./FileBrowser.js";
+export { UploadDropzone, type UploadDropzoneProps, type UploadItem, type UploadRejection, } from "./UploadDropzone.js";
+export { FilePreview, type FilePreviewContent, type FilePreviewProps } from "./FilePreview.js";