@calliopelabs/ui 0.13.0 → 0.16.0

package/dist/workbench/index.js

@@ -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, } from "./model.js";
+export { FILE_DRAG_TYPE } from "./dnd.js";
+export { FileIcon } from "./FileIcon.js";
+export { FileTree } from "./FileTree.js";
+export { FileList } from "./FileList.js";
+export { FileGrid } from "./FileGrid.js";
+export { FileBrowser } from "./FileBrowser.js";
+export { UploadDropzone, } from "./UploadDropzone.js";
+export { FilePreview } from "./FilePreview.js";

package/dist/workbench/model.d.ts

@@ -0,0 +1,72 @@
+/**
+ * The file browser's data: plain values the host maps its own listing onto.
+ * Pure (no "use client"), so a server can sort or build fixtures with it.
+ */
+export type FileKind = "file" | "directory";
+/** One entry of a listing. `path` is its identity: unique, `/`-separated, no leading slash. */
+export interface FileItem {
+    path: string;
+    name: string;
+    kind: FileKind;
+    /** Bytes. Absent or null for directories and unknown sizes. */
+    size?: number | null;
+    /** ISO 8601 or a Date. */
+    modified?: string | Date | null;
+    mimeType?: string | null;
+}
+export type FileSortKey = "name" | "size" | "modified" | "kind";
+export interface FileSort {
+    key: FileSortKey;
+    dir: "asc" | "desc";
+}
+export type FileView = "list" | "grid";
+/** Where an upload stands. */
+export type UploadState = "queued" | "uploading" | "done" | "error" | "canceled";
+/**
+ * A directory's children as the host knows them. Absent from the map means
+ * "never asked for": the tree calls `onLoad` when it first opens.
+ */
+export type FileBranch = {
+    state: "loading";
+} | {
+    state: "error";
+    message?: string;
+} | {
+    state: "ready";
+    items: readonly FileItem[];
+};
+/** The parent directory of a path; the root is "". */
+export declare function parentPath(path: string): string;
+/** A path under a directory; the root is "". */
+export declare function joinPath(dir: string, name: string): string;
+/** True when `path` is `ancestor` or lies under it. */
+export declare function isWithin(path: string, ancestor: string): boolean;
+/** The lower-case extension without the dot, or "" (".bashrc" has none). */
+export declare function fileExtension(name: string): string;
+/** The breadcrumb trail of a path: the root, then each directory down to it. */
+export declare function pathSegments(path: string): {
+    name: string;
+    path: string;
+}[];
+/**
+ * Whether moving `sources` into `target` does anything sensible: never into
+ * itself or its own subtree, and a move into the folder it is already in is
+ * a no-op. Copies (`copy`) may land in the same folder.
+ */
+export declare function canDrop(sources: readonly string[], target: string, copy?: boolean): boolean;
+/**
+ * A listing in display order: directories first, then by the key, ties and
+ * missing values by name. Natural order, so "file10" follows "file9".
+ */
+export declare function sortFiles(items: readonly FileItem[], sort: FileSort): FileItem[];
+/** Bytes for people: 0 B, 912 B, 1.5 KB, 23 MB (1024-based, as file managers show). */
+export declare function formatBytes(bytes: number, locale?: string): string;
+/** What a preview can show for a file, from its name and MIME type. */
+export type PreviewKind = "csv" | "json" | "image" | "markdown" | "text" | "binary";
+export declare function previewKindFor(name: string, mimeType?: string | null): PreviewKind;
+/**
+ * Parses CSV (RFC 4180: quoted fields, doubled quotes, newlines inside
+ * quotes) or, with `delimiter: "\t"`, TSV. Returns rows of strings; the
+ * caller decides whether the first row is a header.
+ */
+export declare function parseDelimited(text: string, delimiter?: string): string[][];

package/dist/workbench/model.js

@@ -0,0 +1,214 @@
+/**
+ * The file browser's data: plain values the host maps its own listing onto.
+ * Pure (no "use client"), so a server can sort or build fixtures with it.
+ */
+/** The parent directory of a path; the root is "". */
+export function parentPath(path) {
+    const i = path.lastIndexOf("/");
+    return i < 0 ? "" : path.slice(0, i);
+}
+/** A path under a directory; the root is "". */
+export function joinPath(dir, name) {
+    return dir ? `${dir}/${name}` : name;
+}
+/** True when `path` is `ancestor` or lies under it. */
+export function isWithin(path, ancestor) {
+    return ancestor === "" || path === ancestor || path.startsWith(`${ancestor}/`);
+}
+/** The lower-case extension without the dot, or "" (".bashrc" has none). */
+export function fileExtension(name) {
+    const i = name.lastIndexOf(".");
+    return i > 0 ? name.slice(i + 1).toLowerCase() : "";
+}
+/** The breadcrumb trail of a path: the root, then each directory down to it. */
+export function pathSegments(path) {
+    const parts = path.split("/").filter(Boolean);
+    return parts.map((name, i) => ({ name, path: parts.slice(0, i + 1).join("/") }));
+}
+/**
+ * Whether moving `sources` into `target` does anything sensible: never into
+ * itself or its own subtree, and a move into the folder it is already in is
+ * a no-op. Copies (`copy`) may land in the same folder.
+ */
+export function canDrop(sources, target, copy = false) {
+    return (sources.length > 0 &&
+        sources.every((src) => !(target === src || target.startsWith(`${src}/`)) && (copy || parentPath(src) !== target)));
+}
+const collator = new Intl.Collator(undefined, { numeric: true, sensitivity: "base" });
+function time(value) {
+    if (value == null)
+        return null;
+    const t = value instanceof Date ? value.getTime() : Date.parse(value);
+    return Number.isNaN(t) ? null : t;
+}
+/**
+ * A listing in display order: directories first, then by the key, ties and
+ * missing values by name. Natural order, so "file10" follows "file9".
+ */
+export function sortFiles(items, sort) {
+    const sign = sort.dir === "asc" ? 1 : -1;
+    const byName = (a, b) => collator.compare(a.name, b.name);
+    const compare = (a, b) => {
+        switch (sort.key) {
+            case "size": {
+                const x = a.size ?? null;
+                const y = b.size ?? null;
+                if (x === y)
+                    return 0;
+                if (x === null)
+                    return 1;
+                if (y === null)
+                    return -1;
+                return (x - y) * sign;
+            }
+            case "modified": {
+                const x = time(a.modified);
+                const y = time(b.modified);
+                if (x === y)
+                    return 0;
+                if (x === null)
+                    return 1;
+                if (y === null)
+                    return -1;
+                return (x - y) * sign;
+            }
+            case "kind":
+                return collator.compare(fileExtension(a.name), fileExtension(b.name)) * sign;
+            case "name":
+                return byName(a, b) * sign;
+        }
+    };
+    return [...items].sort((a, b) => {
+        if (a.kind !== b.kind)
+            return a.kind === "directory" ? -1 : 1;
+        return compare(a, b) || byName(a, b);
+    });
+}
+/** Bytes for people: 0 B, 912 B, 1.5 KB, 23 MB (1024-based, as file managers show). */
+export function formatBytes(bytes, locale) {
+    if (!Number.isFinite(bytes) || bytes < 0)
+        return "";
+    const units = ["B", "KB", "MB", "GB", "TB", "PB"];
+    let value = bytes;
+    let unit = 0;
+    while (value >= 1024 && unit < units.length - 1) {
+        value /= 1024;
+        unit++;
+    }
+    const digits = unit === 0 || value >= 10 ? 0 : 1;
+    return `${value.toLocaleString(locale, { maximumFractionDigits: digits })} ${units[unit]}`;
+}
+const TEXT_EXTENSIONS = new Set([
+    "txt",
+    "log",
+    "py",
+    "js",
+    "jsx",
+    "ts",
+    "tsx",
+    "mjs",
+    "cjs",
+    "rs",
+    "go",
+    "java",
+    "kt",
+    "rb",
+    "sh",
+    "bash",
+    "zsh",
+    "sql",
+    "html",
+    "css",
+    "scss",
+    "xml",
+    "yaml",
+    "yml",
+    "toml",
+    "ini",
+    "cfg",
+    "conf",
+    "env",
+    "r",
+    "c",
+    "h",
+    "cpp",
+    "hpp",
+    "cs",
+    "php",
+    "swift",
+    "lua",
+    "dockerfile",
+    "tf",
+]);
+const IMAGE_EXTENSIONS = new Set([
+    "png",
+    "jpg",
+    "jpeg",
+    "gif",
+    "svg",
+    "webp",
+    "avif",
+    "bmp",
+    "ico",
+]);
+export function previewKindFor(name, mimeType) {
+    const ext = fileExtension(name);
+    if (ext === "csv" || ext === "tsv" || mimeType === "text/csv")
+        return "csv";
+    if (ext === "json" || ext === "jsonl" || ext === "ipynb" || mimeType === "application/json")
+        return "json";
+    if (IMAGE_EXTENSIONS.has(ext) || mimeType?.startsWith("image/"))
+        return "image";
+    if (ext === "md" || ext === "markdown" || mimeType === "text/markdown")
+        return "markdown";
+    if (TEXT_EXTENSIONS.has(ext) || mimeType?.startsWith("text/"))
+        return "text";
+    return "binary";
+}
+/**
+ * Parses CSV (RFC 4180: quoted fields, doubled quotes, newlines inside
+ * quotes) or, with `delimiter: "\t"`, TSV. Returns rows of strings; the
+ * caller decides whether the first row is a header.
+ */
+export function parseDelimited(text, delimiter = ",") {
+    const rows = [];
+    let row = [];
+    let field = "";
+    let quoted = false;
+    for (let i = 0; i < text.length; i++) {
+        const c = text[i];
+        if (quoted) {
+            if (c === '"') {
+                if (text[i + 1] === '"') {
+                    field += '"';
+                    i++;
+                }
+                else
+                    quoted = false;
+            }
+            else
+                field += c;
+        }
+        else if (c === '"' && field === "")
+            quoted = true;
+        else if (c === delimiter) {
+            row.push(field);
+            field = "";
+        }
+        else if (c === "\n" || c === "\r") {
+            if (c === "\r" && text[i + 1] === "\n")
+                i++;
+            row.push(field);
+            rows.push(row);
+            row = [];
+            field = "";
+        }
+        else
+            field += c;
+    }
+    if (field !== "" || row.length > 0) {
+        row.push(field);
+        rows.push(row);
+    }
+    return rows;
+}

package/dist/workbench/selection.d.ts

@@ -0,0 +1,16 @@
+export type SelectMode = "replace" | "toggle" | "range";
+/**
+ * Finder-style selection over an ordered listing: a plain click or arrow
+ * selects one, Cmd or Ctrl toggles, Shift selects the range from the
+ * anchor (the last item chosen without Shift). The set is the host's.
+ */
+export declare function useSelectionModel(order: readonly string[], selection: ReadonlySet<string>, onSelectionChange: (next: Set<string>) => void): {
+    select(path: string, mode: SelectMode): void;
+    selectAll(): void;
+    clear(): void;
+};
+export declare function modeOf(event: {
+    shiftKey: boolean;
+    metaKey: boolean;
+    ctrlKey: boolean;
+}): SelectMode;

package/dist/workbench/selection.js

@@ -0,0 +1,46 @@
+"use client";
+import * as React from "react";
+/**
+ * Finder-style selection over an ordered listing: a plain click or arrow
+ * selects one, Cmd or Ctrl toggles, Shift selects the range from the
+ * anchor (the last item chosen without Shift). The set is the host's.
+ */
+export function useSelectionModel(order, selection, onSelectionChange) {
+    const anchor = React.useRef(null);
+    return React.useMemo(() => ({
+        select(path, mode) {
+            if (mode === "range") {
+                const from = order.indexOf(anchor.current ?? path);
+                const to = order.indexOf(path);
+                const [a, b] = from < 0 ? [to, to] : from < to ? [from, to] : [to, from];
+                onSelectionChange(new Set(order.slice(a, b + 1)));
+                return;
+            }
+            anchor.current = path;
+            if (mode === "toggle") {
+                const next = new Set(selection);
+                if (next.has(path))
+                    next.delete(path);
+                else
+                    next.add(path);
+                onSelectionChange(next);
+            }
+            else
+                onSelectionChange(new Set([path]));
+        },
+        selectAll() {
+            onSelectionChange(new Set(order));
+        },
+        clear() {
+            anchor.current = null;
+            onSelectionChange(new Set());
+        },
+    }), [order, selection, onSelectionChange]);
+}
+export function modeOf(event) {
+    if (event.shiftKey)
+        return "range";
+    if (event.metaKey || event.ctrlKey)
+        return "toggle";
+    return "replace";
+}

package/dist/workbench/typeahead.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Type-to-find for trees, lists and grids: printable keys typed within half
+ * a second build a prefix; the next name after the current one that starts
+ * with it (case-insensitive) is the answer. Returns that index, or null when
+ * the key is not a typeahead key or nothing matches.
+ */
+export declare function typeahead(state: {
+    text: string;
+    at: number;
+}, event: {
+    key: string;
+    ctrlKey: boolean;
+    metaKey: boolean;
+    altKey: boolean;
+}, names: readonly string[], current: number): number | null;

package/dist/workbench/typeahead.js

@@ -0,0 +1,22 @@
+/**
+ * Type-to-find for trees, lists and grids: printable keys typed within half
+ * a second build a prefix; the next name after the current one that starts
+ * with it (case-insensitive) is the answer. Returns that index, or null when
+ * the key is not a typeahead key or nothing matches.
+ */
+export function typeahead(state, event, names, current) {
+    if (event.key.length !== 1 || event.ctrlKey || event.metaKey || event.altKey || event.key === " ")
+        return null;
+    const now = Date.now();
+    state.text = now - state.at > 500 ? event.key : state.text + event.key;
+    state.at = now;
+    const prefix = state.text.toLowerCase();
+    // A repeated single letter cycles; a longer prefix may stay on the current name.
+    const start = state.text.length === 1 ? current + 1 : current;
+    for (let i = 0; i < names.length; i++) {
+        const index = (start + i) % names.length;
+        if (names[index]?.toLowerCase().startsWith(prefix))
+            return index;
+    }
+    return null;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@calliopelabs/ui",
-  "version": "0.13.0",
+  "version": "0.16.0",
   "description": "Calliope AI shared operator UI: app shell, navigation, page frame, data table and list patterns, status colours, design tokens and appearance for Astrolift AI and Zentinelle AI.",
   "keywords": [
     "calliope-ai",
@@ -30,12 +30,36 @@
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
     },
+    "./agent": {
+      "types": "./dist/agent/index.d.ts",
+      "default": "./dist/agent/index.js"
+    },
+    "./agent/copilotkit": {
+      "types": "./dist/agent/copilotkit/index.d.ts",
+      "default": "./dist/agent/copilotkit/index.js"
+    },
+    "./workbench": {
+      "types": "./dist/workbench/index.d.ts",
+      "default": "./dist/workbench/index.js"
+    },
     "./theme.css": "./dist/styles/theme.css",
     "./preset.css": "./dist/styles/preset.css",
     "./css/tokens.css": "./dist/css/tokens.css",
     "./css/appearance.js": "./dist/css/appearance.js",
     "./css/components.css": "./dist/css/components.css",
     "./css/calliope.css": "./dist/css/calliope.css",
+    "./tokens/jupyterlab.css": "./dist/tokens/jupyterlab.css",
+    "./tokens/vscode.css": "./dist/tokens/vscode.css",
+    "./tokens/plain.css": "./dist/tokens/plain.css",
+    "./tokens/tokens.py": "./dist/tokens/tokens.py",
+    "./tokens/native": {
+      "types": "./dist/tokens/tokens.native.d.ts",
+      "default": "./dist/tokens/tokens.native.js"
+    },
+    "./tokens/tokens.native.js": {
+      "types": "./dist/tokens/tokens.native.d.ts",
+      "default": "./dist/tokens/tokens.native.js"
+    },
     "./package.json": "./package.json"
   },
   "main": "./dist/index.js",
@@ -59,6 +83,7 @@
     "build-storybook": "storybook build --quiet"
   },
   "dependencies": {
+    "@ag-ui/core": "~1.0.3",
     "@xyflow/react": "^12.12.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -67,11 +92,14 @@
     "tailwind-merge": "^3.7.0"
   },
   "devDependencies": {
+    "@ag-ui/client": "1.0.2",
+    "@copilotkit/react-core": "1.88.0",
     "@eslint/js": "^9.39.5",
     "@fontsource-variable/dm-sans": "^5.3.0",
     "@fontsource/ibm-plex-mono": "^5.3.0",
     "@fontsource/ibm-plex-sans": "^5.3.0",
     "@storybook/addon-a11y": "^10.6.2",
+    "@storybook/addon-docs": "^10.6.2",
     "@storybook/react-vite": "^10.6.2",
     "@tailwindcss/cli": "^4.3.3",
     "@tailwindcss/vite": "^4.3.3",
@@ -101,14 +129,23 @@
     "typescript": "~6.0.3",
     "typescript-eslint": "^8.71.2",
     "vite": "^8.3.4",
-    "vitest": "^5.0.5"
+    "vitest": "^5.0.5",
+    "zod": "^4.6.7"
   },
   "peerDependencies": {
+    "@ag-ui/client": "^1.0.2",
+    "@copilotkit/react-core": ">=1.79.1 <2",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "tailwindcss": "^4.0.0"
   },
   "peerDependenciesMeta": {
+    "@ag-ui/client": {
+      "optional": true
+    },
+    "@copilotkit/react-core": {
+      "optional": true
+    },
     "tailwindcss": {
       "optional": true
     }