@calliopelabs/ui 0.16.0 → 0.18.0

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;

package/dist/workbench/editor-theme.js

@@ -0,0 +1,113 @@
+/**
+ * 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.
+ */
+const TOKEN_NAMES = {
+    background: "--background",
+    foreground: "--foreground",
+    muted: "--muted-foreground",
+    border: "--border",
+    popover: "--popover",
+    accent: "--accent",
+    primary: "--primary",
+    ring: "--ring",
+    danger: "--danger",
+};
+/**
+ * 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 function cssColorToHex(value) {
+    if (typeof document === "undefined" || !value.trim())
+        return null;
+    try {
+        const canvas = document.createElement("canvas");
+        canvas.width = canvas.height = 1;
+        const ctx = canvas.getContext("2d", { willReadFrequently: true });
+        if (!ctx)
+            return null;
+        ctx.clearRect(0, 0, 1, 1);
+        ctx.fillStyle = "#000000";
+        ctx.fillStyle = value.trim();
+        ctx.fillRect(0, 0, 1, 1);
+        const [r = 0, g = 0, b = 0, a = 0] = ctx.getImageData(0, 0, 1, 1).data;
+        if (a === 0)
+            return null;
+        return `#${[r, g, b].map((n) => n.toString(16).padStart(2, "0")).join("")}`;
+    }
+    catch {
+        return null;
+    }
+}
+/** The palette under `element`, or null when a token cannot be read. */
+export function readEditorPalette(element, toHex = cssColorToHex) {
+    const style = getComputedStyle(element);
+    const read = (name) => toHex(style.getPropertyValue(name));
+    const out = {};
+    for (const [key, name] of Object.entries(TOKEN_NAMES)) {
+        const hex = read(name);
+        if (!hex)
+            return null;
+        out[key] = hex;
+    }
+    const chart = [1, 2, 3, 4, 5].map((n) => read(`--chart-${n}`) ?? out.foreground);
+    return { ...out, chart: chart };
+}
+/** Relative luminance of `#rrggbb`, 0 to 1. */
+export function luminance(hex) {
+    const channel = (i) => {
+        const c = parseInt(hex.slice(i, i + 2), 16) / 255;
+        return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+    };
+    return 0.2126 * channel(1) + 0.7152 * channel(3) + 0.0722 * channel(5);
+}
+const bare = (hex) => hex.slice(1);
+/** Monaco theme data for a palette. Dark or light follows the ground. */
+export function editorTheme(p) {
+    const dark = luminance(p.background) < 0.4;
+    const [keyword, string, number, fn, type] = p.chart;
+    return {
+        base: dark ? "vs-dark" : "vs",
+        inherit: true,
+        rules: [
+            { token: "", foreground: bare(p.foreground) },
+            { token: "keyword", foreground: bare(keyword) },
+            { token: "operator", foreground: bare(keyword) },
+            { token: "string", foreground: bare(string) },
+            { token: "number", foreground: bare(number) },
+            { token: "predefined", foreground: bare(fn) },
+            { token: "type", foreground: bare(type) },
+            { token: "comment", foreground: bare(p.muted), fontStyle: "italic" },
+            { token: "delimiter", foreground: bare(p.muted) },
+            { token: "invalid", foreground: bare(p.danger) },
+        ],
+        colors: {
+            "editor.background": p.background,
+            "editor.foreground": p.foreground,
+            "editorLineNumber.foreground": p.muted,
+            "editorLineNumber.activeForeground": p.foreground,
+            "editorCursor.foreground": p.primary,
+            "editor.selectionBackground": `${p.primary}40`,
+            "editor.inactiveSelectionBackground": `${p.primary}26`,
+            "editor.lineHighlightBackground": `${p.foreground}0a`,
+            "editor.lineHighlightBorder": `${p.foreground}00`,
+            "editorIndentGuide.background1": p.border,
+            "editorWhitespace.foreground": p.border,
+            "editorWidget.background": p.popover,
+            "editorWidget.border": p.border,
+            "editorSuggestWidget.background": p.popover,
+            "editorSuggestWidget.border": p.border,
+            "editorSuggestWidget.foreground": p.foreground,
+            "editorSuggestWidget.selectedBackground": p.accent,
+            "editorHoverWidget.background": p.popover,
+            "editorHoverWidget.border": p.border,
+            "editorError.foreground": p.danger,
+            focusBorder: p.ring,
+            "scrollbarSlider.background": `${p.muted}33`,
+            "scrollbarSlider.hoverBackground": `${p.muted}55`,
+        },
+    };
+}

package/dist/workbench/grid-format.d.ts

@@ -0,0 +1,59 @@
+/**
+ * Every way the grid turns cells into text, shared by the clipboard and the
+ * export menu so a "Copy as CSV" and an exported .csv cannot quote
+ * differently. Pure: the grid hands the text to the clipboard or a Blob.
+ */
+import { type GridRow } from "./grid-model.js";
+import { type SelectionState } from "./grid-selection.js";
+/** A rectangle of cells with its column names. */
+export interface CellMatrix {
+    headers: string[];
+    rows: unknown[][];
+}
+/** Tab-separated, as a spreadsheet pastes it; tabs and newlines inside a cell become spaces. */
+export declare function toTSV(matrix: CellMatrix, withHeaders?: boolean): string;
+/** RFC 4180 CSV; NULL is an empty field. */
+export declare function toCSV(matrix: CellMatrix, withHeaders?: boolean): string;
+/** Rows as objects keyed by column; NULL stays null. */
+export declare function toObjects(matrix: CellMatrix): Record<string, unknown>[];
+export declare function toJSON(matrix: CellMatrix): string;
+export declare function toJSONL(matrix: CellMatrix): string;
+/** A Markdown table; pipes are escaped and newlines flattened. */
+export declare function toMarkdown(matrix: CellMatrix): string;
+/** A SQL literal for a cell. Binary is its base64 text; a non-finite number is NULL. */
+export declare function sqlLiteral(value: unknown): string;
+/** A quoted identifier; a qualified name ("public.users") keeps its parts. */
+export declare function quoteIdentifier(name: string): string;
+/**
+ * One INSERT per row. `table_name` stands in when the result has no table,
+ * deliberately obvious so nobody runs it unedited.
+ */
+export declare function toInsert(matrix: CellMatrix, tableName?: string): string;
+/** Rows as a matrix over `columns`. */
+export declare function rowsMatrix(columns: readonly string[], rows: readonly GridRow[]): CellMatrix;
+/**
+ * The selection as a matrix: the bounding box of everything selected, with
+ * unselected cells inside it as NULL (a clipboard payload is rectangular).
+ * `getValue` takes view coordinates.
+ */
+export declare function selectionMatrix(state: SelectionState, columns: readonly string[], getValue: (row: number, col: number) => unknown): CellMatrix;
+/** The text formats the grid copies as. "tsv-headers" is Copy with headers. */
+export type CopyFormat = "tsv" | "tsv-headers" | "csv" | "json" | "insert" | "markdown";
+export declare function formatMatrix(format: CopyFormat, matrix: CellMatrix, options?: {
+    tableName?: string;
+}): string;
+/** The file formats the library writes itself. Anything heavier (xlsx) is the host's. */
+export type ExportFormat = "csv" | "tsv" | "json" | "jsonl" | "sql" | "markdown";
+export declare const EXPORT_FORMATS: readonly ExportFormat[];
+/** An export, ready to save: text, a name and a type. `exportBlob` makes the Blob. */
+export interface ExportFile {
+    format: ExportFormat;
+    filename: string;
+    mimeType: string;
+    text: string;
+}
+export declare function exportMatrix(format: ExportFormat, matrix: CellMatrix, options?: {
+    tableName?: string;
+    baseName?: string;
+}): ExportFile;
+export declare function exportBlob(file: ExportFile): Blob;

package/dist/workbench/grid-format.js

@@ -0,0 +1,169 @@
+/**
+ * Every way the grid turns cells into text, shared by the clipboard and the
+ * export menu so a "Copy as CSV" and an exported .csv cannot quote
+ * differently. Pure: the grid hands the text to the clipboard or a Blob.
+ */
+import { asBinary, cellText } from "./grid-model.js";
+import { isSelected, selectionBounds } from "./grid-selection.js";
+function tsvField(value) {
+    return cellText(value).replace(/\t/g, " ").replace(/\r?\n/g, " ");
+}
+/** Tab-separated, as a spreadsheet pastes it; tabs and newlines inside a cell become spaces. */
+export function toTSV(matrix, withHeaders = false) {
+    const lines = matrix.rows.map((row) => row.map(tsvField).join("\t"));
+    if (withHeaders)
+        lines.unshift(matrix.headers.map(tsvField).join("\t"));
+    return lines.join("\n");
+}
+function csvField(value) {
+    const text = cellText(value);
+    if (/[",\r\n]/.test(text))
+        return `"${text.replace(/"/g, '""')}"`;
+    return text;
+}
+/** RFC 4180 CSV; NULL is an empty field. */
+export function toCSV(matrix, withHeaders = true) {
+    const lines = matrix.rows.map((row) => row.map(csvField).join(","));
+    if (withHeaders)
+        lines.unshift(matrix.headers.map(csvField).join(","));
+    return lines.join("\n");
+}
+/** Rows as objects keyed by column; NULL stays null. */
+export function toObjects(matrix) {
+    return matrix.rows.map((row) => {
+        const out = {};
+        matrix.headers.forEach((header, i) => {
+            out[header] = row[i] === undefined ? null : row[i];
+        });
+        return out;
+    });
+}
+export function toJSON(matrix) {
+    return JSON.stringify(toObjects(matrix), null, 2);
+}
+export function toJSONL(matrix) {
+    return toObjects(matrix)
+        .map((row) => JSON.stringify(row))
+        .join("\n");
+}
+/** A Markdown table; pipes are escaped and newlines flattened. */
+export function toMarkdown(matrix) {
+    const cell = (v) => cellText(v).replace(/\|/g, "\\|").replace(/\r?\n/g, " ");
+    const header = `| ${matrix.headers.map(cell).join(" | ")} |`;
+    const rule = `| ${matrix.headers.map(() => "---").join(" | ")} |`;
+    const body = matrix.rows.map((row) => `| ${row.map(cell).join(" | ")} |`);
+    return [header, rule, ...body].join("\n");
+}
+/** A SQL literal for a cell. Binary is its base64 text; a non-finite number is NULL. */
+export function sqlLiteral(value) {
+    if (value === null || value === undefined)
+        return "NULL";
+    if (typeof value === "number")
+        return Number.isFinite(value) ? String(value) : "NULL";
+    if (typeof value === "boolean")
+        return value ? "TRUE" : "FALSE";
+    const binary = asBinary(value);
+    if (binary)
+        return `'${binary.base64}'`;
+    const text = typeof value === "object" ? JSON.stringify(value) : String(value);
+    return `'${text.replace(/'/g, "''")}'`;
+}
+/** A quoted identifier; a qualified name ("public.users") keeps its parts. */
+export function quoteIdentifier(name) {
+    return name
+        .split(".")
+        .map((part) => `"${part.replace(/"/g, '""')}"`)
+        .join(".");
+}
+/**
+ * One INSERT per row. `table_name` stands in when the result has no table,
+ * deliberately obvious so nobody runs it unedited.
+ */
+export function toInsert(matrix, tableName = "table_name") {
+    if (matrix.rows.length === 0)
+        return "";
+    const table = quoteIdentifier(tableName);
+    const cols = matrix.headers.map(quoteIdentifier).join(", ");
+    return matrix.rows
+        .map((row) => {
+        const values = matrix.headers.map((_, i) => sqlLiteral(row[i])).join(", ");
+        return `INSERT INTO ${table} (${cols}) VALUES (${values});`;
+    })
+        .join("\n");
+}
+/** Rows as a matrix over `columns`. */
+export function rowsMatrix(columns, rows) {
+    return { headers: [...columns], rows: rows.map((row) => columns.map((c) => row[c])) };
+}
+/**
+ * The selection as a matrix: the bounding box of everything selected, with
+ * unselected cells inside it as NULL (a clipboard payload is rectangular).
+ * `getValue` takes view coordinates.
+ */
+export function selectionMatrix(state, columns, getValue) {
+    const bounds = selectionBounds(state);
+    if (!bounds)
+        return { headers: [], rows: [] };
+    const headers = [];
+    for (let c = bounds.minCol; c <= bounds.maxCol; c++)
+        headers.push(columns[c] ?? `col_${c}`);
+    const rows = [];
+    for (let r = bounds.minRow; r <= bounds.maxRow; r++) {
+        const row = [];
+        for (let c = bounds.minCol; c <= bounds.maxCol; c++) {
+            row.push(isSelected(state, r, c) ? getValue(r, c) : null);
+        }
+        rows.push(row);
+    }
+    return { headers, rows };
+}
+export function formatMatrix(format, matrix, options = {}) {
+    switch (format) {
+        case "tsv":
+            return toTSV(matrix);
+        case "tsv-headers":
+            return toTSV(matrix, true);
+        case "csv":
+            return toCSV(matrix);
+        case "json":
+            return toJSON(matrix);
+        case "insert":
+            return toInsert(matrix, options.tableName);
+        case "markdown":
+            return toMarkdown(matrix);
+    }
+}
+export const EXPORT_FORMATS = [
+    "csv",
+    "tsv",
+    "json",
+    "jsonl",
+    "sql",
+    "markdown",
+];
+const FILE = {
+    csv: { extension: "csv", mimeType: "text/csv" },
+    tsv: { extension: "tsv", mimeType: "text/tab-separated-values" },
+    json: { extension: "json", mimeType: "application/json" },
+    jsonl: { extension: "jsonl", mimeType: "application/x-ndjson" },
+    sql: { extension: "sql", mimeType: "application/sql" },
+    markdown: { extension: "md", mimeType: "text/markdown" },
+};
+export function exportMatrix(format, matrix, options = {}) {
+    const text = format === "csv"
+        ? toCSV(matrix)
+        : format === "tsv"
+            ? toTSV(matrix, true)
+            : format === "json"
+                ? toJSON(matrix)
+                : format === "jsonl"
+                    ? toJSONL(matrix)
+                    : format === "sql"
+                        ? toInsert(matrix, options.tableName)
+                        : toMarkdown(matrix);
+    const { extension, mimeType } = FILE[format];
+    return { format, filename: `${options.baseName ?? "export"}.${extension}`, mimeType, text };
+}
+export function exportBlob(file) {
+    return new Blob([file.text], { type: file.mimeType });
+}

package/dist/workbench/grid-model.d.ts

@@ -0,0 +1,75 @@
+/**
+ * The data grid's model, as pure data: what a column is, how a value reads as
+ * text, how rows sort (NULLs last) and filter. No React, no DOM, so a Server
+ * Component or a worker can import it. Extracted from Loadr's grid (shared
+ * with Chat Studio).
+ */
+/** A row of a result: column name to value. */
+export type GridRow = Readonly<Record<string, unknown>>;
+/**
+ * What a column is, in the grid's own vocabulary. `normalizeColumnType`
+ * takes any driver's spelling ("timestamptz", "Nullable(Int64)",
+ * "datetime64[ns, UTC]") and lands on one of these.
+ */
+export type ColumnType = "integer" | "number" | "text" | "boolean" | "datetime" | "date" | "time" | "json" | "binary" | "uuid" | "other";
+export declare const COLUMN_TYPES: readonly ColumnType[];
+/** A column as the host describes it. Only `name` is required. */
+export interface GridColumn {
+    name: string;
+    /** Any spelling: a normalized type or the driver's ("int4", "varchar(255)"). Sniffed from the rows when absent. */
+    type?: string;
+    /** The driver's spelling, shown in the header's title and the row detail. */
+    dataType?: string;
+    nullable?: boolean;
+    /** Primary key columns identify a row for an update or a delete. */
+    primaryKey?: boolean;
+    foreignKey?: boolean;
+    /** "schema.table.column" for a foreign key. */
+    references?: string;
+}
+/** Everything the grid knows about one column, resolved. */
+export interface GridColumnMeta {
+    name: string;
+    type: ColumnType;
+    dataType?: string;
+    nullable?: boolean;
+    primaryKey: boolean;
+    foreignKey: boolean;
+    references?: string;
+}
+/** Types whose values are right-aligned and get numeric stats. */
+export declare function isNumericType(type: ColumnType): boolean;
+/** Any spelling of a column type onto the vocabulary; unknown spellings are "other". */
+export declare function normalizeColumnType(raw: string | null | undefined): ColumnType;
+/** A guess at a column's type from its values, for a result that declares none. */
+export declare function sniffColumnType(values: readonly unknown[]): ColumnType;
+/** Columns as the host gave them (names or descriptions), resolved; undeclared types are sniffed. */
+export declare function buildColumnMeta(columns: readonly (string | GridColumn)[], rows?: readonly GridRow[]): GridColumnMeta[];
+/** A fingerprint of a result's shape: a grid keyed on it starts clean for different columns. */
+export declare function columnSignature(columns: readonly (string | GridColumn)[]): string;
+/** The envelope Loadr's API wraps bytes in. */
+export interface BinaryCell {
+    __binary__: true;
+    base64: string;
+    size: number;
+    truncated?: boolean;
+}
+export declare function asBinary(value: unknown): BinaryCell | null;
+/**
+ * How a value reads in a text format. NULL is an empty field, not the word,
+ * so a pasted column lands in a spreadsheet empty.
+ */
+export declare function cellText(value: unknown): string;
+export type SortDirection = "asc" | "desc";
+export interface GridSort {
+    column: string;
+    direction: SortDirection;
+}
+/** Compares two cells in a direction; NULLs sort last in both. */
+export declare function compareCells(a: unknown, b: unknown, direction?: SortDirection): number;
+/**
+ * The source indexes of the rows in view, in view order: those with a cell
+ * in `columns` containing `filter` (case-insensitive), sorted by `sort`
+ * (stable, NULLs last).
+ */
+export declare function viewRowIndexes(rows: readonly GridRow[], columns: readonly string[], filter: string, sort: GridSort | null): number[];