@calliopelabs/ui 0.14.0 → 0.16.0

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;

package/dist/workbench/FileList.js

@@ -0,0 +1,160 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ArrowDownIcon, ArrowUpIcon } from "lucide-react";
+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 { formatBytes } from "./model.js";
+import { modeOf, useSelectionModel } from "./selection.js";
+import { typeahead } from "./typeahead.js";
+const COLUMNS = ["name", "size", "modified"];
+const WIDTH = {
+    name: "min-w-0 flex-1",
+    size: "w-20 shrink-0 justify-end text-right",
+    modified: "hidden w-44 shrink-0 @lg:flex",
+};
+const defaultFormat = (value) => {
+    const date = value instanceof Date ? value : new Date(value);
+    return Number.isNaN(date.getTime())
+        ? ""
+        : date.toLocaleString(undefined, { dateStyle: "medium", timeStyle: "short" });
+};
+/**
+ * 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 function FileList({ label, items, selection, onSelectionChange, onOpen, onDelete, onRename, onMove, sort, onSortChange, formatDate = defaultFormat, className, }) {
+    const { messages } = useUI();
+    const t = messages.workbench;
+    const order = React.useMemo(() => items.map((i) => i.path), [items]);
+    const model = useSelectionModel(order, selection, onSelectionChange);
+    // Focus: row -1 is the header; columns index COLUMNS.
+    const [focus, setFocus] = React.useState({ row: 0, col: 0 });
+    const cells = React.useRef(new Map());
+    const pending = React.useRef(false);
+    const search = React.useRef({ text: "", at: 0 });
+    const headerRow = onSortChange ? -1 : 0;
+    const row = Math.min(Math.max(focus.row, headerRow), items.length - 1);
+    const col = focus.col;
+    React.useLayoutEffect(() => {
+        if (!pending.current)
+            return;
+        pending.current = false;
+        cells.current.get(`${row}:${col}`)?.focus();
+    });
+    const move = (next) => {
+        pending.current = true;
+        setFocus({
+            row: Math.min(Math.max(next.row, headerRow), items.length - 1),
+            col: Math.min(Math.max(next.col, 0), COLUMNS.length - 1),
+        });
+    };
+    const selected = () => items.filter((i) => selection.has(i.path));
+    const onKeyDown = (event) => {
+        const meta = event.metaKey || event.ctrlKey;
+        const go = (target) => {
+            event.preventDefault();
+            const clamped = Math.min(Math.max(target, headerRow), items.length - 1);
+            move({ row: clamped, col });
+            const item = items[clamped];
+            if (item && !meta)
+                model.select(item.path, event.shiftKey ? "range" : "replace");
+        };
+        switch (event.key) {
+            case "ArrowDown":
+                return go(row + 1);
+            case "ArrowUp":
+                return go(row - 1);
+            case "PageDown":
+                return go(row + 10);
+            case "PageUp":
+                return go(row - 10);
+            case "ArrowRight":
+                event.preventDefault();
+                return move({ row, col: col + 1 });
+            case "ArrowLeft":
+                event.preventDefault();
+                return move({ row, col: col - 1 });
+            case "Home":
+                if (meta)
+                    return go(0);
+                event.preventDefault();
+                return move({ row, col: 0 });
+            case "End":
+                if (meta)
+                    return go(items.length - 1);
+                event.preventDefault();
+                return move({ row, col: COLUMNS.length - 1 });
+        }
+        if (row < 0)
+            return;
+        const item = items[row];
+        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 = selected();
+            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), row);
+            if (next !== null)
+                go(next);
+        }
+    };
+    const cellRef = (r, c) => (el) => {
+        if (el)
+            cells.current.set(`${r}:${c}`, el);
+        else
+            cells.current.delete(`${r}:${c}`);
+    };
+    const tabIndex = (r, c) => (r === row && c === col ? 0 : -1);
+    const header = { name: t.name, size: t.size, modified: t.modified };
+    return (_jsxs("div", { role: "grid", "aria-label": label, "aria-multiselectable": true, "aria-rowcount": items.length + 1, onKeyDown: onKeyDown, className: cn("@container flex min-w-0 flex-col text-sm", className), children: [_jsx("div", { role: "row", "aria-rowindex": 1, className: "sticky top-0 z-10 flex items-center gap-2 border-b bg-muted/60 px-3 text-xs font-medium text-muted-foreground backdrop-blur-sm", children: COLUMNS.map((key, c) => {
+                    const active = sort?.key === key;
+                    const ariaSort = active ? (sort.dir === "asc" ? "ascending" : "descending") : undefined;
+                    return (_jsx("div", { role: "columnheader", "aria-sort": ariaSort, className: cn("flex h-8 items-center", WIDTH[key]), children: onSortChange ? (_jsxs("button", { type: "button", ref: cellRef(-1, c), tabIndex: tabIndex(-1, c), onFocus: () => setFocus({ row: -1, col: c }), onClick: () => onSortChange({
+                                key,
+                                dir: active && sort.dir === "asc" ? "desc" : "asc",
+                            }), className: "inline-flex items-center gap-1 rounded-lg outline-none hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/50", children: [header[key], active &&
+                                    (sort.dir === "asc" ? (_jsx(ArrowUpIcon, { "aria-hidden": true, className: "size-3" })) : (_jsx(ArrowDownIcon, { "aria-hidden": true, className: "size-3" })))] })) : (header[key]) }, key));
+                }) }), items.map((item, r) => (_jsx(FileRow, { item: item, index: r, selected: selection.has(item.path), onMove: onMove, dragPaths: selection.has(item.path) ? order.filter((p) => selection.has(p)) : [item.path], dragLabel: (n) => (n === 1 ? item.name : t.itemCount(n)), onClick: (event) => {
+                    setFocus({ row: r, col });
+                    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");
+                }, children: COLUMNS.map((key, c) => (_jsx("div", { role: "gridcell", ref: cellRef(r, c), tabIndex: tabIndex(r, c), onFocus: () => setFocus({ row: r, col: c }), className: cn("flex h-8 items-center gap-2 rounded-lg outline-none focus-visible:ring-2 focus-visible:ring-ring/50", WIDTH[key], key !== "name" && "text-xs text-muted-foreground"), children: key === "name" ? (_jsxs(_Fragment, { children: [_jsx(FileIcon, { name: item.name, kind: item.kind }), _jsx("span", { className: "truncate", children: item.name })] })) : key === "size" ? (item.kind === "file" && item.size != null ? (formatBytes(item.size)) : (_jsx("span", { "aria-label": t.noSize, children: "\u2013" }))) : item.modified ? (_jsx("span", { className: "truncate", children: formatDate(item.modified) })) : null }, key))) }, item.path)))] }));
+}
+function FileRow({ item, index, selected, onMove, dragPaths, dragLabel, onClick, onDoubleClick, onContextMenu, children, }) {
+    const drop = useFileDrop(item.kind === "directory" ? item.path : null, onMove);
+    return (_jsx("div", { role: "row", "data-path": item.path, "aria-rowindex": index + 2, "aria-selected": selected, draggable: Boolean(onMove), onDragStart: onMove ? (event) => startFileDrag(event, dragPaths, dragLabel(dragPaths.length)) : undefined, ...drop.props, onClick: onClick, onDoubleClick: onDoubleClick, onContextMenu: onContextMenu, className: cn("flex cursor-default items-center gap-2 px-3 select-none hover:bg-accent/60", selected && "bg-accent text-accent-foreground hover:bg-accent", drop.over && "bg-primary/10 ring-2 ring-primary ring-inset"), children: children }));
+}

package/dist/workbench/FilePreview.d.ts

@@ -0,0 +1,66 @@
+import * as React from "react";
+/** What the host read from the file. `previewKindFor(name, mime)` picks the kind. */
+export type FilePreviewContent = {
+    kind: "text";
+    text: string;
+} | {
+    kind: "markdown";
+    text: string;
+}
+/** Pretty-printed when it parses; shown as written otherwise (JSON Lines). */
+ | {
+    kind: "json";
+    text: string;
+}
+/** Parsed here; the first row is the header unless `header` is false. `delimiter` "\t" for TSV. */
+ | {
+    kind: "csv";
+    text: string;
+    delimiter?: string;
+    header?: boolean;
+}
+/** Rows the server already parsed (a Parquet or Excel sample). */
+ | {
+    kind: "table";
+    columns: readonly string[];
+    rows: readonly Record<string, unknown>[];
+} | {
+    kind: "image";
+    src: string;
+    alt?: string;
+}
+/** Nothing to show: the type and size only. */
+ | {
+    kind: "binary";
+};
+export interface FilePreviewProps {
+    /** The file's name, the panel's title. */
+    name: string;
+    size?: number | null;
+    mimeType?: string | null;
+    /** Undefined while loading. */
+    content?: FilePreviewContent;
+    error?: string | {
+        message: string;
+    } | null;
+    onRetry?: () => void;
+    /** Part of the file only: the rows or bytes shown, and the whole when known. */
+    truncated?: boolean | {
+        shown: number;
+        total?: number | null;
+    };
+    /** Draws markdown. The package ships no markdown parser; without one the source shows as text. */
+    renderMarkdown?: (text: string) => React.ReactNode;
+    /** Shows a close button. */
+    onClose?: () => void;
+    /** Buttons in the header: download, open. */
+    actions?: React.ReactNode;
+    className?: string;
+}
+/**
+ * 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 declare function FilePreview({ name, size, mimeType, content, error, onRetry, truncated, renderMarkdown, onClose, actions, className, }: FilePreviewProps): React.JSX.Element;

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;