@calliopelabs/ui 0.14.0 → 0.18.0

package/dist/provider/messages.js

@@ -144,6 +144,43 @@ function problemText({ code, values: v }) {
     }
 }
 export const defaultMessages = {
+    workflowRuntime: {
+        title: "Agent controls",
+        state: (state) => ({
+            running: "Agent running",
+            paused: "Agent paused",
+            "pause-requested": "Pause requested",
+            "resume-requested": "Resume requested",
+            "steering-queued": "Steering queued",
+            "steering-applied": "Steering applied",
+            refused: "Control refused",
+            "delivery-unknown": "Delivery unconfirmed",
+            unavailable: "Controls unavailable",
+            finished: "Agent finished",
+        })[state],
+        description: (state) => ({
+            running: "Control this agent while it works on the original goal.",
+            paused: "The agent confirmed its pause. Resume continues the same goal.",
+            "pause-requested": "Waiting for the agent to confirm its pause.",
+            "resume-requested": "Waiting for the agent to confirm it resumed.",
+            "steering-queued": "The agent has not yet confirmed this steering message.",
+            "steering-applied": "The agent applied the steering message to this goal.",
+            refused: "The command was refused. Check the current agent state before continuing.",
+            "delivery-unknown": "Check the original command's status before sending another command.",
+            unavailable: "The current agent controls could not be read.",
+            finished: "This agent is no longer accepting commands.",
+        })[state],
+        loading: "Loading agent controls…",
+        empty: "The original agent is not available.",
+        readOnly: "An operator can control this agent.",
+        pause: "Pause agent",
+        resume: "Resume agent",
+        refresh: "Check agent status",
+        steering: "Steering message",
+        steeringHint: "Up to 4,000 characters. Steering preserves the original goal and limits.",
+        invalidSteering: "Enter a nonempty message of up to 4,000 valid characters.",
+        send: "Send steering",
+    },
     workflowQuestion: {
         title: "Question for this run",
         worker: (worker) => `Worker: ${worker}`,
@@ -236,6 +273,202 @@ export const defaultMessages = {
     dialog: {
         close: "Close",
     },
+    workbench: {
+        files: "Files",
+        folders: "Folders",
+        root: "Home",
+        location: "Location",
+        filesIn: (folder) => `Files in ${folder}`,
+        view: "View",
+        listView: "List",
+        gridView: "Grid",
+        name: "Name",
+        size: "Size",
+        modified: "Modified",
+        noSize: "No size",
+        loading: "Loading files",
+        loadFailed: "Could not load this folder",
+        retry: "Retry",
+        retryFolder: "Could not load. Retry",
+        empty: "This folder is empty",
+        emptyDescription: "Drop files here to upload them.",
+        noFolders: "No folders",
+        itemCount: (count) => `${count.toLocaleString()} ${count === 1 ? "item" : "items"}`,
+        selected: (count) => `${count.toLocaleString()} selected`,
+        dropToUpload: "Drop files to upload",
+        dropHere: "Drop files here",
+        browse: "Choose files",
+        maxSize: (size) => `Up to ${size} each`,
+        uploads: "Uploads",
+        uploading: (count) => `Uploading ${count.toLocaleString()} ${count === 1 ? "file" : "files"}`,
+        uploadsDone: "Uploads finished",
+        uploadState: (state) => ({
+            queued: "Waiting",
+            uploading: "Uploading",
+            done: "Done",
+            error: "Failed",
+            canceled: "Cancelled",
+        })[state],
+        cancelUpload: (name) => `Cancel upload of ${name}`,
+        dismissUpload: (name) => `Clear ${name}`,
+        previewOf: (name) => `Preview of ${name}`,
+        previewLoading: "Loading preview",
+        previewFailed: "Could not preview this file",
+        noPreview: "No preview for this file",
+        closePreview: "Close preview",
+        contentsOf: (name) => `Contents of ${name}`,
+        showing: (shown, total) => total === null
+            ? `Showing the first ${shown.toLocaleString()}`
+            : `Showing ${shown.toLocaleString()} of ${total.toLocaleString()}`,
+        partial: "Showing the start of the file",
+        column: (index) => `Column ${index}`,
+        noRows: "No rows",
+        menuBar: "Menu bar",
+        activityBar: "Activity bar",
+        openEditors: "Open editors",
+        unsaved: "unsaved",
+        closeTab: (title) => `Close ${title}`,
+        allTabs: (count) => `All open tabs (${count.toLocaleString()})`,
+        resize: (pane) => `Resize ${pane}`,
+        maximizePanel: "Maximize panel",
+        restorePanel: "Restore panel",
+        closePanel: "Close panel",
+        statusBar: "Status bar",
+        commandPalette: "Command palette",
+        searchCommands: "Type a command or search",
+        noCommands: "No matching commands",
+        commandsLoading: "Loading",
+        recent: "Recent",
+        keyboardShortcuts: "Keyboard shortcuts",
+        keyboardShortcutsDescription: "Every keyboard shortcut this app responds to",
+        keyJoin: "+",
+        sideBar: "Side bar",
+        editor: "Editor",
+        panel: "Panel",
+        secondarySideBar: "Secondary side bar",
+        gridLabel: "Results",
+        gridRows: (shown, total) => shown === total
+            ? `${total.toLocaleString()} ${total === 1 ? "row" : "rows"}`
+            : `${shown.toLocaleString()} of ${total.toLocaleString()} rows`,
+        gridColumns: (count) => `${count.toLocaleString()} ${count === 1 ? "column" : "columns"}`,
+        gridFilter: "Filter rows",
+        gridClearFilter: "Clear filter",
+        gridHidden: (count) => `${count.toLocaleString()} hidden`,
+        gridSelected: (count) => `${count.toLocaleString()} selected`,
+        gridSelectAll: "Select all cells",
+        gridExport: "Export",
+        gridExportScope: (rows, columns) => `The current view: ${rows.toLocaleString()} ${rows === 1 ? "row" : "rows"}, ${columns.toLocaleString()} ${columns === 1 ? "column" : "columns"}`,
+        gridExportFormat: (format) => ({
+            csv: "CSV",
+            tsv: "TSV",
+            json: "JSON",
+            jsonl: "JSON Lines",
+            sql: "SQL INSERT",
+            markdown: "Markdown",
+        })[format],
+        gridSortBy: (column) => `Sort by ${column}`,
+        gridSortAscending: "Sort ascending",
+        gridSortDescending: "Sort descending",
+        gridClearSort: "Clear sort",
+        gridColumnMenu: (column) => `${column} column menu`,
+        gridFilterByValue: (value) => value === null
+            ? "Filter by value"
+            : `Filter by \u201c${value.length > 20 ? `${value.slice(0, 20)}\u2026` : value}\u201d`,
+        gridHideColumn: "Hide column",
+        gridShowAllColumns: (hidden) => `Show all columns (${hidden.toLocaleString()} hidden)`,
+        gridCopyColumnName: "Copy column name",
+        gridResizeColumn: (column) => `Resize ${column}`,
+        gridType: (type) => type,
+        gridPrimaryKey: "Primary key",
+        gridForeignKey: (references) => (references ? `Foreign key to ${references}` : "Foreign key"),
+        gridNullable: "nullable",
+        gridNotNull: "not null",
+        gridNull: "NULL",
+        gridEmptyText: "empty",
+        gridBinary: (bytes) => `binary, ${bytes.toLocaleString()} bytes`,
+        gridNoRows: "No rows",
+        gridNoMatches: "No rows match the filter",
+        gridLoading: "Loading rows",
+        gridLoadFailed: "Could not load the rows",
+        gridCopy: "Copy",
+        gridCopyWithHeaders: "Copy with headers",
+        gridCopyAs: "Copy as",
+        gridCopyFormat: (format) => ({
+            tsv: "TSV",
+            "tsv-headers": "TSV with headers",
+            csv: "CSV",
+            json: "JSON",
+            insert: "INSERT statements",
+            markdown: "Markdown",
+        })[format],
+        gridRowDetail: "Row detail",
+        gridCellDetail: "Expand cell",
+        gridClearSelection: "Clear selection",
+        gridStatistics: "Selection statistics",
+        gridStat: (stat) => ({
+            rows: "Rows",
+            nulls: "Nulls",
+            distinct: "Distinct",
+            min: "Min",
+            max: "Max",
+            avg: "Avg",
+            sum: "Sum",
+        })[stat],
+        gridNoNumeric: "No numeric values selected",
+        gridTruncated: (shown, total) => total === null
+            ? `Truncated at the ${shown.toLocaleString()}-row limit; more rows match.`
+            : `Showing ${shown.toLocaleString()} of ${total.toLocaleString()} rows, truncated at the ${shown.toLocaleString()}-row limit.`,
+        gridCharacters: (count) => `${count.toLocaleString()} ${count === 1 ? "character" : "characters"}`,
+        gridBytes: (count, truncated) => `${count.toLocaleString()} bytes${truncated ? ", preview truncated" : ""}`,
+        gridDownload: "Download",
+        gridCopied: "Copied",
+        gridCopyValue: "Copy",
+        gridRowOf: (row, total) => `Row ${row.toLocaleString()} of ${total.toLocaleString()}`,
+        gridPreviousRow: "Previous row",
+        gridNextRow: "Next row",
+        gridCopyRow: "Copy row",
+        gridAddRow: "Add row",
+        gridDeleteRows: (count) => count === 1 ? "Delete row" : `Delete ${count.toLocaleString()} rows`,
+        gridDuplicateRow: "Duplicate row",
+        gridRevertRow: "Revert row",
+        gridEditCell: (column) => `Edit ${column}`,
+        gridRowState: (state) => state,
+        gridPendingChanges: "Pending changes",
+        gridPendingSummary: (inserts, updates, deletes) => [
+            `${inserts.toLocaleString()} ${inserts === 1 ? "insert" : "inserts"}`,
+            `${updates.toLocaleString()} ${updates === 1 ? "update" : "updates"}`,
+            `${deletes.toLocaleString()} ${deletes === 1 ? "delete" : "deletes"}`,
+        ].join(", "),
+        gridCommit: "Commit",
+        gridCommitting: "Committing",
+        gridDiscard: "Discard",
+        gridCommitFailed: (message, row) => `${row === null ? "" : `Row ${row.toLocaleString()}: `}${message} Nothing was written.`,
+        gridNoPrimaryKey: "No primary key: rows can be added, not changed or deleted.",
+        profileLabel: "Column profile",
+        profileSummary: (rows, columns, nulls) => `Profile of ${rows.toLocaleString()} ${rows === 1 ? "row" : "rows"}, ${columns.toLocaleString()} ${columns === 1 ? "column" : "columns"}, ${nulls.toLocaleString()} ${nulls === 1 ? "null" : "nulls"}`,
+        profileKind: (kind) => kind,
+        profileComplete: (share) => `${share.toLocaleString(undefined, { style: "percent", maximumFractionDigits: 1 })} complete`,
+        profileMean: "Mean",
+        profileMedian: "Median",
+        profileTopValues: "Top values",
+        profileNoData: "No data to profile",
+        profileCap: (cap, fetched) => `Profiling the first ${cap.toLocaleString()} of ${fetched.toLocaleString()} rows.`,
+        chartLabel: "Chart",
+        chartType: "Chart type",
+        chartKind: (kind) => ({ bar: "Bar", line: "Line", area: "Area", scatter: "Scatter", pie: "Pie" })[kind],
+        chartX: "X axis",
+        chartY: "Y axis",
+        chartPickY: "Choose at least one Y axis column",
+        chartNoData: "No data to chart",
+        chartLoading: "Loading the chart",
+        chartLoadFailed: "Could not load the chart library",
+        chartCap: (cap, fetched) => `Charting the first ${cap.toLocaleString()} of ${fetched.toLocaleString()} rows.`,
+        editorLoading: "Loading the editor",
+    },
+    toast: {
+        region: "Notifications ({hotkey})",
+        close: "Dismiss notification",
+    },
     confirm: {
         confirm: "Confirm",
         cancel: "Cancel",
@@ -851,6 +1084,11 @@ export const defaultMessages = {
         emptyDescription: "Ask about what is on this page, or pick a starting point.",
         waitingOnYou: "Answer the card above to continue.",
         shortcut: (keys) => `Shortcut ${keys}`,
+        interrupt: "The agent is waiting for you",
+        decline: "Decline",
+        back: "Back",
+        sendReview: "Send review",
+        sharedState: "Shared state",
     },
 };
 export function mergeMessages(overrides) {

package/dist/shell/RailPanel.js

@@ -27,7 +27,7 @@ export function RailPanel({ label, title, actions, footer, children, collapsed,
 }
 /* A focusable separator is the WAI-ARIA window splitter, an interactive
    widget; jsx-a11y counts every separator as static. */
-/* eslint-disable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/no-noninteractive-tabindex */
+/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
 function ResizeHandle({ label, width, minWidth, maxWidth, onWidthChange, }) {
     const drag = React.useRef(null);
     return (_jsx("div", { role: "separator", "aria-orientation": "vertical", "aria-label": label, "aria-valuenow": width, "aria-valuemin": minWidth, "aria-valuemax": maxWidth, tabIndex: 0, onKeyDown: (event) => {

package/dist/theme/css-layer.js

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

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

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

package/dist/theme/tokens.generated.js

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

package/dist/workbench/ActivityBar.d.ts

@@ -0,0 +1,37 @@
+import * as React from "react";
+export interface ActivityItem {
+    id: string;
+    /** The word under the icon ("Explore"). */
+    label: string;
+    /** The full name, spoken and shown on hover ("Database explorer"). Defaults to `label`. */
+    title?: string;
+    icon: React.ReactNode;
+    /** A count or marker on the icon (running tasks). */
+    badge?: React.ReactNode;
+    /** Pressed state for an item that is a toggle (the AI panel) rather than a view. */
+    pressed?: boolean;
+    /** Run instead of selecting the item as the view. */
+    onSelect?: () => void;
+}
+export interface ActivityBarProps {
+    /** The views, top down. */
+    items: readonly ActivityItem[];
+    /** Items pinned to the bottom (tasks, settings). */
+    footer?: readonly ActivityItem[];
+    /** The view on screen, or null when the side panel is closed. */
+    active: string | null;
+    /**
+     * A view was chosen. Choosing the active one again passes null: the
+     * host closes the side panel, as an IDE does.
+     */
+    onActiveChange: (id: string | null) => void;
+    /** Show the word under each icon. Defaults to true. */
+    showLabels?: boolean;
+    className?: string;
+}
+/**
+ * The rail of views down the left of an IDE layout: a vertical toolbar with
+ * one tab stop (Up and Down move, Home and End jump), each item a toggle
+ * button that says whether its view is open.
+ */
+export declare function ActivityBar({ items, footer, active, onActiveChange, showLabels, className, }: ActivityBarProps): React.JSX.Element;

package/dist/workbench/ActivityBar.js

@@ -0,0 +1,57 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/cn.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../primitives/Tooltip.js";
+import { useUI } from "../provider/UIProvider.js";
+/**
+ * The rail of views down the left of an IDE layout: a vertical toolbar with
+ * one tab stop (Up and Down move, Home and End jump), each item a toggle
+ * button that says whether its view is open.
+ */
+export function ActivityBar({ items, footer = [], active, onActiveChange, showLabels = true, className, }) {
+    const { messages } = useUI();
+    const all = [...items, ...footer];
+    const [focusId, setFocusId] = React.useState(undefined);
+    const tabStop = all.some((i) => i.id === focusId)
+        ? focusId
+        : (all.find((i) => i.id === active)?.id ?? all[0]?.id);
+    const refs = React.useRef(new Map());
+    const onKeyDown = (event) => {
+        const index = all.findIndex((i) => i.id === tabStop);
+        let next = null;
+        if (event.key === "ArrowDown")
+            next = (index + 1) % all.length;
+        else if (event.key === "ArrowUp")
+            next = (index - 1 + all.length) % all.length;
+        else if (event.key === "Home")
+            next = 0;
+        else if (event.key === "End")
+            next = all.length - 1;
+        if (next === null)
+            return;
+        event.preventDefault();
+        const id = all[next]?.id;
+        if (id === undefined)
+            return;
+        setFocusId(id);
+        refs.current.get(id)?.focus();
+    };
+    const button = (item) => {
+        const pressed = item.pressed ?? item.id === active;
+        const title = item.title ?? item.label;
+        const count = typeof item.badge === "string" || typeof item.badge === "number" ? ` (${item.badge})` : "";
+        return (_jsxs(Tooltip, { delayDuration: 400, children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs("button", { ref: (el) => {
+                            if (el)
+                                refs.current.set(item.id, el);
+                            else
+                                refs.current.delete(item.id);
+                        }, type: "button", tabIndex: item.id === tabStop ? 0 : -1, "aria-pressed": pressed, "aria-label": `${title}${count}`, onFocus: () => setFocusId(item.id), onClick: () => {
+                            if (item.onSelect)
+                                item.onSelect();
+                            else
+                                onActiveChange(item.id === active ? null : item.id);
+                        }, className: cn("relative flex w-full flex-col items-center gap-0.5 py-2 text-sidebar-muted-foreground outline-hidden transition-colors hover:text-sidebar-foreground focus-visible:ring-2 focus-visible:ring-sidebar-ring focus-visible:ring-inset", pressed && "text-sidebar-primary hover:text-sidebar-primary"), children: [pressed && (_jsx("span", { "aria-hidden": true, className: "absolute top-1/2 left-0 h-8 w-0.5 -translate-y-1/2 rounded-full bg-sidebar-primary" })), _jsxs("span", { "aria-hidden": true, className: "relative flex [&_svg]:size-4.5", children: [item.icon, item.badge !== undefined && item.badge !== null && item.badge !== false && (_jsx("span", { className: "absolute -top-1.5 -right-2 min-w-4 rounded-full bg-sidebar-primary px-1 text-center text-2xs leading-4 text-sidebar-primary-foreground", children: item.badge }))] }), showLabels && (_jsx("span", { "aria-hidden": true, className: "text-2xs leading-none tracking-tight", children: item.label }))] }) }), _jsx(TooltipContent, { side: "right", children: title })] }, item.id));
+    };
+    return (_jsxs("div", { role: "toolbar", "aria-orientation": "vertical", "aria-label": messages.workbench.activityBar, onKeyDown: onKeyDown, className: cn("flex h-full w-14 shrink-0 flex-col border-r border-sidebar-border bg-sidebar text-sidebar-foreground", className), children: [_jsx("div", { className: "flex w-full flex-col", children: items.map(button) }), footer.length > 0 && (_jsx("div", { className: "mt-auto flex w-full flex-col pb-2", children: footer.map(button) }))] }));
+}

package/dist/workbench/BottomPanel.d.ts

@@ -0,0 +1,30 @@
+import type * as React from "react";
+export interface BottomPanelView {
+    id: string;
+    label: string;
+    icon?: React.ReactNode;
+    /** A count beside the label (history entries, running tasks). */
+    count?: number;
+    /** Something is running in it: the count takes the info tone. */
+    busy?: boolean;
+    content: React.ReactNode;
+}
+export interface BottomPanelProps {
+    views: readonly BottomPanelView[];
+    /** The view on screen. Controlled when given. */
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (id: string) => void;
+    /** The panel fills the editor area. Shows the maximize or restore button when `onMaximizedChange` is set. */
+    maximized?: boolean;
+    onMaximizedChange?: (maximized: boolean) => void;
+    /** Shows a close button. */
+    onClose?: () => void;
+    className?: string;
+}
+/**
+ * The panel under the editors (history, tasks, output, problems): views as
+ * ARIA tabs, with maximize, restore and close. The host decides whether it
+ * is open and how tall it is (in a `PaneGroup`); views stay host content.
+ */
+export declare function BottomPanel({ views, value, defaultValue, onValueChange, maximized, onMaximizedChange, onClose, className, }: BottomPanelProps): React.JSX.Element;

package/dist/workbench/BottomPanel.js

@@ -0,0 +1,20 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Maximize2Icon, Minimize2Icon, XIcon } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../primitives/Tabs.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../primitives/Tooltip.js";
+import { useUI } from "../provider/UIProvider.js";
+function IconButton({ label, onClick, children, }) {
+    return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { type: "button", "aria-label": label, onClick: onClick, className: "rounded-lg p-1 text-muted-foreground outline-hidden transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring [&_svg]:size-3.5", children: children }) }), _jsx(TooltipContent, { children: label })] }));
+}
+/**
+ * The panel under the editors (history, tasks, output, problems): views as
+ * ARIA tabs, with maximize, restore and close. The host decides whether it
+ * is open and how tall it is (in a `PaneGroup`); views stay host content.
+ */
+export function BottomPanel({ views, value, defaultValue, onValueChange, maximized = false, onMaximizedChange, onClose, className, }) {
+    const { messages } = useUI();
+    const m = messages.workbench;
+    return (_jsxs(Tabs, { value: value, defaultValue: defaultValue ?? views[0]?.id, onValueChange: onValueChange, className: cn("flex h-full min-h-0 flex-col gap-0 bg-background", className), children: [_jsxs("div", { className: "flex h-8 shrink-0 items-center border-b bg-surface-1 pr-1", children: [_jsx(TabsList, { className: "h-full flex-1 border-b-0", children: views.map((view) => (_jsxs(TabsTrigger, { value: view.id, className: "flex items-center gap-1.5 px-3 py-1 text-xs [&_svg]:size-3", children: [view.icon && (_jsx("span", { "aria-hidden": true, className: "flex", children: view.icon })), view.label, view.count !== undefined && view.count > 0 && (_jsxs(_Fragment, { children: [" ", _jsx("span", { className: cn("rounded-full px-1.5 text-2xs tabular-nums", view.busy ? "bg-info/15 text-info-fg" : "bg-muted text-muted-foreground"), children: view.count.toLocaleString() })] }))] }, view.id))) }), onMaximizedChange && (_jsx(IconButton, { label: maximized ? m.restorePanel : m.maximizePanel, onClick: () => onMaximizedChange(!maximized), children: maximized ? _jsx(Minimize2Icon, { "aria-hidden": true }) : _jsx(Maximize2Icon, { "aria-hidden": true }) })), onClose && (_jsx(IconButton, { label: m.closePanel, onClick: onClose, children: _jsx(XIcon, { "aria-hidden": true }) }))] }), views.map((view) => (_jsx(TabsContent, { value: view.id, className: "min-h-0 flex-1 overflow-hidden", children: view.content }, view.id)))] }));
+}

package/dist/workbench/CodeEditor.d.ts

@@ -0,0 +1,48 @@
+import type * as Monaco from "monaco-editor";
+import * as React from "react";
+export type MonacoApi = typeof Monaco;
+export type MonacoEditor = Monaco.editor.IStandaloneCodeEditor;
+type Loader = () => Promise<MonacoApi | {
+    default: MonacoApi;
+}>;
+/**
+ * Tell the editors how to load Monaco, once, before any mounts:
+ * `configureMonaco({ load })`, where `load` imports `monaco-editor`. The import is
+ * the host's, so its bundler resolves Monaco, splits it into its own chunk
+ * and fetches it the first time an editor mounts; an app that never shows
+ * an editor never loads it, and one without `monaco-editor` installed still
+ * builds. The host also sets `self.MonacoEnvironment` for Monaco's workers
+ * (see the README). Without a loader, editors fall back to a plain text area.
+ */
+export declare function configureMonaco(options: {
+    load: Loader;
+}): void;
+export interface CodeEditorProps {
+    value: string;
+    onChange?: (value: string) => void;
+    /** A Monaco language id: "sql", "json", "python", "typescript". Defaults to "plaintext". */
+    language?: string;
+    /** The editor's accessible name ("Query", "Pipeline spec"). */
+    label: string;
+    readOnly?: boolean;
+    /**
+     * Ctrl or Command with Enter: gets the selected text, or the whole buffer
+     * when nothing is selected.
+     */
+    onRun?: (text: string) => void;
+    /** Passed to Monaco as they are; the editor sets sensible defaults first. */
+    options?: Monaco.editor.IStandaloneEditorConstructionOptions;
+    /** The editor is ready. Return a cleanup to run when it unmounts. */
+    onMount?: (editor: MonacoEditor, monaco: MonacoApi) => void | (() => void);
+    /** Load Monaco for this editor only, instead of `configureMonaco`'s loader. Read on mount. */
+    loader?: Loader;
+    className?: string;
+}
+/**
+ * A code editor on Monaco, loaded the first time one mounts and themed from
+ * the library's tokens for the current ground (it follows a change of
+ * ground or mode). Monaco is an optional peer dependency: without it, or
+ * while it loads, a plain text area or a loading state stands in.
+ */
+export declare function CodeEditor({ value, onChange, language, label, readOnly, onRun, options, onMount, loader, className, }: CodeEditorProps): React.JSX.Element;
+export {};

package/dist/workbench/CodeEditor.js

@@ -0,0 +1,153 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/cn.js";
+import { useUI } from "../provider/UIProvider.js";
+import { LoadingState } from "../states/LoadingState.js";
+import { editorTheme, readEditorPalette } from "./editor-theme.js";
+let configured = null;
+const loads = new WeakMap();
+/**
+ * Tell the editors how to load Monaco, once, before any mounts:
+ * `configureMonaco({ load })`, where `load` imports `monaco-editor`. The import is
+ * the host's, so its bundler resolves Monaco, splits it into its own chunk
+ * and fetches it the first time an editor mounts; an app that never shows
+ * an editor never loads it, and one without `monaco-editor` installed still
+ * builds. The host also sets `self.MonacoEnvironment` for Monaco's workers
+ * (see the README). Without a loader, editors fall back to a plain text area.
+ */
+export function configureMonaco(options) {
+    configured = options.load;
+}
+function loadMonaco(loader) {
+    let promise = loads.get(loader);
+    if (!promise) {
+        promise = loader().then((m) => ("default" in m && m.default ? m.default : m));
+        // A failed load may succeed later (a flaky network): do not cache it.
+        promise.catch(() => loads.delete(loader));
+        loads.set(loader, promise);
+    }
+    return promise;
+}
+const THEME = "calliope";
+/** Define and apply the theme from the tokens under `element`. Monaco themes are page-wide. */
+function applyTheme(monaco, element) {
+    const palette = readEditorPalette(element);
+    if (palette) {
+        monaco.editor.defineTheme(THEME, editorTheme(palette));
+        monaco.editor.setTheme(THEME);
+    }
+    else {
+        const dark = document.documentElement.getAttribute("data-mode") === "dark";
+        monaco.editor.setTheme(dark ? "vs-dark" : "vs");
+    }
+}
+/**
+ * A code editor on Monaco, loaded the first time one mounts and themed from
+ * the library's tokens for the current ground (it follows a change of
+ * ground or mode). Monaco is an optional peer dependency: without it, or
+ * while it loads, a plain text area or a loading state stands in.
+ */
+export function CodeEditor({ value, onChange, language = "plaintext", label, readOnly = false, onRun, options, onMount, loader, className, }) {
+    const { messages } = useUI();
+    const hostRef = React.useRef(null);
+    const editorRef = React.useRef(null);
+    const monacoRef = React.useRef(null);
+    const latest = React.useRef({ value, onChange, onRun, onMount });
+    const [status, setStatus] = React.useState(() => (loader ?? configured) ? "loading" : "fallback");
+    React.useLayoutEffect(() => {
+        latest.current = { value, onChange, onRun, onMount };
+    });
+    // The loader of the first render: an inline arrow must not recreate the editor.
+    const loaderRef = React.useRef(loader ?? configured);
+    // Mount once. Value, language and read-only follow below.
+    React.useEffect(() => {
+        const load = loaderRef.current;
+        const host = hostRef.current;
+        if (!load || !host)
+            return;
+        let cancelled = false;
+        let cleanup;
+        let observer;
+        loadMonaco(load)
+            .then((monaco) => {
+            if (cancelled)
+                return;
+            monacoRef.current = monaco;
+            applyTheme(monaco, host);
+            const mono = getComputedStyle(host).getPropertyValue("--font-mono").trim();
+            const editor = monaco.editor.create(host, {
+                value: latest.current.value,
+                language,
+                readOnly,
+                ariaLabel: label,
+                automaticLayout: true,
+                minimap: { enabled: false },
+                scrollBeyondLastLine: false,
+                fontSize: 13,
+                fontFamily: mono || undefined,
+                tabSize: 2,
+                renderLineHighlight: "line",
+                fixedOverflowWidgets: true,
+                ...options,
+            });
+            editorRef.current = editor;
+            editor.onDidChangeModelContent(() => {
+                const next = editor.getValue();
+                if (next !== latest.current.value)
+                    latest.current.onChange?.(next);
+            });
+            editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter, () => {
+                const selection = editor.getSelection();
+                const model = editor.getModel();
+                const picked = selection && model && !selection.isEmpty() ? model.getValueInRange(selection) : "";
+                latest.current.onRun?.(picked || editor.getValue());
+            });
+            // The theme follows the ground: re-read the tokens when <html> changes.
+            observer = new MutationObserver(() => applyTheme(monaco, host));
+            observer.observe(document.documentElement, { attributes: true });
+            const unmount = latest.current.onMount?.(editor, monaco);
+            cleanup = typeof unmount === "function" ? unmount : undefined;
+            setStatus("ready");
+        })
+            .catch(() => {
+            if (!cancelled)
+                setStatus("fallback");
+        });
+        return () => {
+            cancelled = true;
+            observer?.disconnect();
+            cleanup?.();
+            editorRef.current?.dispose();
+            editorRef.current = null;
+        };
+        // Recreating the editor on every option change would lose the undo stack
+        // and the cursor; those that can change are applied in place below.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    React.useEffect(() => {
+        const editor = editorRef.current;
+        const model = editor?.getModel();
+        if (!editor || !model || model.getValue() === value)
+            return;
+        // An edit, not setValue, so the person can undo past a host change.
+        editor.pushUndoStop();
+        model.pushEditOperations([], [{ range: model.getFullModelRange(), text: value }], () => null);
+        editor.pushUndoStop();
+    }, [value, status]);
+    React.useEffect(() => {
+        const model = editorRef.current?.getModel();
+        if (model && monacoRef.current)
+            monacoRef.current.editor.setModelLanguage(model, language);
+    }, [language, status]);
+    React.useEffect(() => {
+        editorRef.current?.updateOptions({ readOnly, ariaLabel: label });
+    }, [readOnly, label, status]);
+    return (_jsxs("div", { "data-slot": "code-editor", "data-status": status, className: cn("relative h-full min-h-24 w-full overflow-hidden bg-background", className), children: [_jsx("div", { ref: hostRef, className: cn("absolute inset-0", status !== "ready" && "invisible") }), status === "loading" && (_jsx(LoadingState, { className: "absolute inset-0", label: messages.workbench.editorLoading })), status === "fallback" && (_jsx("textarea", { "aria-label": label, value: value, readOnly: readOnly, spellCheck: false, onChange: (event) => onChange?.(event.target.value), onKeyDown: (event) => {
+                    if (event.key === "Enter" && (event.metaKey || event.ctrlKey) && onRun) {
+                        event.preventDefault();
+                        const t = event.currentTarget;
+                        onRun(t.value.slice(t.selectionStart, t.selectionEnd) || t.value);
+                    }
+                }, className: "absolute inset-0 resize-none bg-background p-3 font-mono text-sm text-foreground outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset" }))] }));
+}