@calliopelabs/ui 0.14.0 → 0.18.0

package/dist/workbench/SqlEditor.d.ts

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

package/dist/workbench/SqlEditor.js

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

package/dist/workbench/StatusBar.d.ts

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

package/dist/workbench/StatusBar.js

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

package/dist/workbench/TruncationBanner.d.ts

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

package/dist/workbench/TruncationBanner.js

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

package/dist/workbench/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/WorkbenchShell.d.ts

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

package/dist/workbench/WorkbenchShell.js

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

package/dist/workbench/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/download.d.ts

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

package/dist/workbench/download.js

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

package/dist/workbench/editor-theme.d.ts

@@ -0,0 +1,42 @@
+/**
+ * The code editor's colours, from the library's tokens: the ground, the
+ * text, the accent for the cursor and selection, and the chart series for
+ * syntax (a categorical palette that already holds contrast on every
+ * ground). Pure apart from `cssColorToHex`, which needs a canvas.
+ */
+/** Monaco's theme shape, kept structural so this module needs no Monaco types. */
+export interface EditorThemeData {
+    base: "vs" | "vs-dark";
+    inherit: boolean;
+    rules: {
+        token: string;
+        foreground?: string;
+        fontStyle?: string;
+    }[];
+    colors: Record<string, string>;
+}
+/** The tokens the theme reads, as `#rrggbb`. */
+export interface EditorPalette {
+    background: string;
+    foreground: string;
+    muted: string;
+    border: string;
+    popover: string;
+    accent: string;
+    primary: string;
+    ring: string;
+    danger: string;
+    chart: [string, string, string, string, string];
+}
+/**
+ * Any CSS colour (oklch, hex, a named colour) as `#rrggbb`, by painting one
+ * pixel. Null where there is no canvas (a server, jsdom) or the value does
+ * not parse.
+ */
+export declare function cssColorToHex(value: string): string | null;
+/** The palette under `element`, or null when a token cannot be read. */
+export declare function readEditorPalette(element: Element, toHex?: (value: string) => string | null): EditorPalette | null;
+/** Relative luminance of `#rrggbb`, 0 to 1. */
+export declare function luminance(hex: string): number;
+/** Monaco theme data for a palette. Dark or light follows the ground. */
+export declare function editorTheme(p: EditorPalette): EditorThemeData;