@calliopelabs/ui 0.16.0 → 0.18.0

package/dist/workbench/grid-model.js

@@ -0,0 +1,259 @@
+/**
+ * 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).
+ */
+export const COLUMN_TYPES = [
+    "integer",
+    "number",
+    "text",
+    "boolean",
+    "datetime",
+    "date",
+    "time",
+    "json",
+    "binary",
+    "uuid",
+    "other",
+];
+const COLUMN_TYPE_SET = new Set(COLUMN_TYPES);
+/** Types whose values are right-aligned and get numeric stats. */
+export function isNumericType(type) {
+    return type === "integer" || type === "number";
+}
+// Driver spellings, checked as substrings once parameters and wrappers are
+// stripped. Order matters: "interval" contains "int", "datetime" contains
+// "date" and "time", almost every string type mentions "char" or "text".
+const SPELLINGS = [
+    ["interval", "other"],
+    ["timedelta", "other"],
+    ["binary_double", "number"],
+    ["binary_float", "number"],
+    ["uuid", "uuid"],
+    ["uniqueidentifier", "uuid"],
+    ["guid", "uuid"],
+    ["bytea", "binary"],
+    ["varbinary", "binary"],
+    ["binary", "binary"],
+    ["blob", "binary"],
+    ["bytes", "binary"],
+    ["image", "binary"],
+    ["raw", "binary"],
+    ["jsonb", "json"],
+    ["json", "json"],
+    ["variant", "json"],
+    ["struct", "json"],
+    ["array", "json"],
+    ["object", "json"],
+    ["map", "json"],
+    ["xml", "json"],
+    ["timestamptz", "datetime"],
+    ["timestamp", "datetime"],
+    ["datetime", "datetime"],
+    ["date", "date"],
+    ["timetz", "time"],
+    ["time", "time"],
+    ["boolean", "boolean"],
+    ["bool", "boolean"],
+    ["bit", "boolean"],
+    ["decimal", "number"],
+    ["numeric", "number"],
+    ["float", "number"],
+    ["double", "number"],
+    ["real", "number"],
+    ["money", "number"],
+    ["number", "number"],
+    ["integer", "integer"],
+    ["bigint", "integer"],
+    ["smallint", "integer"],
+    ["tinyint", "integer"],
+    ["mediumint", "integer"],
+    ["serial", "integer"],
+    ["int", "integer"],
+    ["long", "integer"],
+    ["short", "integer"],
+    ["byte", "integer"],
+    ["varchar", "text"],
+    ["char", "text"],
+    ["text", "text"],
+    ["clob", "text"],
+    ["string", "text"],
+    ["enum", "text"],
+    ["name", "text"],
+];
+// ClickHouse wraps the real type.
+const WRAPPERS = /^(nullable|lowcardinality)\((.*)\)$/;
+/** Any spelling of a column type onto the vocabulary; unknown spellings are "other". */
+export function normalizeColumnType(raw) {
+    if (!raw)
+        return "other";
+    let name = raw.trim().toLowerCase();
+    if (COLUMN_TYPE_SET.has(name))
+        return name;
+    for (let i = 0; i < 3; i++) {
+        const wrapped = WRAPPERS.exec(name);
+        if (!wrapped)
+            break;
+        name = (wrapped[2] ?? "").trim();
+    }
+    name = name
+        .replace(/\[[^\]]*\]/g, "")
+        .replace(/\([^)]*\)/g, "")
+        .replace(/\s+(with|without)\s+time\s+zone/, "")
+        .replace(/\s+unsigned|\s+signed|\s+zerofill/g, "")
+        .trim();
+    if (COLUMN_TYPE_SET.has(name))
+        return name;
+    for (const [spelling, type] of SPELLINGS) {
+        if (name.includes(spelling))
+            return type;
+    }
+    return "other";
+}
+const UUID_TEXT = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
+const DATETIME_TEXT = /^\d{4}-\d{2}-\d{2}[T ]\d{2}:\d{2}/;
+const DATE_TEXT = /^\d{4}-\d{2}-\d{2}$/;
+const TIME_TEXT = /^\d{2}:\d{2}(:\d{2})?/;
+const SNIFF_SAMPLE = 20;
+/** A guess at a column's type from its values, for a result that declares none. */
+export function sniffColumnType(values) {
+    let seen = null;
+    let checked = 0;
+    for (const value of values) {
+        if (value === null || value === undefined)
+            continue;
+        if (checked >= SNIFF_SAMPLE)
+            break;
+        checked++;
+        let kind;
+        if (typeof value === "boolean")
+            kind = "boolean";
+        else if (typeof value === "number")
+            kind = Number.isInteger(value) ? "integer" : "number";
+        else if (typeof value === "object")
+            kind = asBinary(value) ? "binary" : "json";
+        else if (typeof value === "string") {
+            if (UUID_TEXT.test(value))
+                kind = "uuid";
+            else if (DATETIME_TEXT.test(value))
+                kind = "datetime";
+            else if (DATE_TEXT.test(value))
+                kind = "date";
+            else if (TIME_TEXT.test(value))
+                kind = "time";
+            else
+                kind = "text";
+        }
+        else
+            kind = "other";
+        if (seen === null)
+            seen = kind;
+        else if (seen !== kind) {
+            if (isNumericType(seen) && isNumericType(kind))
+                seen = "number";
+            else
+                return "other";
+        }
+    }
+    return seen ?? "other";
+}
+/** Columns as the host gave them (names or descriptions), resolved; undeclared types are sniffed. */
+export function buildColumnMeta(columns, rows = []) {
+    return columns.map((column) => {
+        const c = typeof column === "string" ? { name: column } : column;
+        const type = c.type
+            ? normalizeColumnType(c.type)
+            : sniffColumnType(rows.slice(0, SNIFF_SAMPLE * 4).map((row) => row[c.name]));
+        return {
+            name: c.name,
+            type,
+            dataType: c.dataType,
+            nullable: c.nullable,
+            primaryKey: c.primaryKey === true,
+            foreignKey: c.foreignKey === true,
+            references: c.references,
+        };
+    });
+}
+/** A fingerprint of a result's shape: a grid keyed on it starts clean for different columns. */
+export function columnSignature(columns) {
+    return columns
+        .map((c) => (typeof c === "string" ? `${c}:?` : `${c.name}:${c.type ?? "?"}`))
+        .join("\u0000");
+}
+export function asBinary(value) {
+    if (value === null || typeof value !== "object")
+        return null;
+    const marker = value;
+    if (marker.__binary__ !== true)
+        return null;
+    return {
+        __binary__: true,
+        base64: typeof marker.base64 === "string" ? marker.base64 : "",
+        size: typeof marker.size === "number" ? marker.size : 0,
+        truncated: marker.truncated === true,
+    };
+}
+/**
+ * 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 function cellText(value) {
+    if (value === null || value === undefined)
+        return "";
+    const binary = asBinary(value);
+    if (binary)
+        return `<binary ${binary.size} bytes>`;
+    if (typeof value === "object")
+        return JSON.stringify(value);
+    return String(value);
+}
+/** Ascending order of two cells; NULL is neither, the caller puts it last. */
+function compareNonNull(a, b) {
+    if (typeof a === "number" && typeof b === "number")
+        return a - b;
+    if (typeof a === "boolean" && typeof b === "boolean")
+        return Number(a) - Number(b);
+    const as = typeof a === "object" ? JSON.stringify(a) : String(a);
+    const bs = typeof b === "object" ? JSON.stringify(b) : String(b);
+    return as < bs ? -1 : as > bs ? 1 : 0;
+}
+/** Compares two cells in a direction; NULLs sort last in both. */
+export function compareCells(a, b, direction = "asc") {
+    const aNull = a === null || a === undefined;
+    const bNull = b === null || b === undefined;
+    if (aNull || bNull)
+        return aNull && bNull ? 0 : aNull ? 1 : -1;
+    return direction === "asc" ? compareNonNull(a, b) : -compareNonNull(a, b);
+}
+/**
+ * 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 function viewRowIndexes(rows, columns, filter, sort) {
+    const needle = filter.trim().toLowerCase();
+    const indexes = [];
+    for (let i = 0; i < rows.length; i++) {
+        if (needle === "") {
+            indexes.push(i);
+            continue;
+        }
+        const row = rows[i];
+        for (const column of columns) {
+            const value = row?.[column];
+            if (value === null || value === undefined)
+                continue;
+            if (cellText(value).toLowerCase().includes(needle)) {
+                indexes.push(i);
+                break;
+            }
+        }
+    }
+    if (sort) {
+        const { column, direction } = sort;
+        indexes.sort((a, b) => compareCells(rows[a]?.[column], rows[b]?.[column], direction) || a - b);
+    }
+    return indexes;
+}

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

@@ -0,0 +1,69 @@
+/**
+ * The grid's selection model, as pure data (from Loadr's grid).
+ *
+ * Coordinates are *view* coordinates: `row` indexes the visible (filtered and
+ * sorted) row order, `col` indexes the visible columns. The grid maps them back
+ * to source rows when it copies or edits. Keeping the model out of the
+ * component is what lets 50k-row selection behaviour be tested without a DOM.
+ */
+export interface CellRef {
+    row: number;
+    col: number;
+}
+/** A rectangle, anchored where the drag or shift-click started. */
+export interface SelectionRange {
+    anchor: CellRef;
+    focus: CellRef;
+}
+export interface SelectionState {
+    /** Additive ranges, in the order the user made them. */
+    ranges: SelectionRange[];
+    /** The cell the keyboard acts on. Null when nothing is selected. */
+    active: CellRef | null;
+}
+export declare const EMPTY_SELECTION: SelectionState;
+export interface Bounds {
+    minRow: number;
+    maxRow: number;
+    minCol: number;
+    maxCol: number;
+}
+/** Is this cell inside any range? */
+export declare function isSelected(state: SelectionState, row: number, col: number): boolean;
+/** Total cells covered, counting an overlap once. */
+export declare function selectionSize(state: SelectionState): number;
+/** The bounding box of everything selected, or null when nothing is. */
+export declare function selectionBounds(state: SelectionState): Bounds | null;
+/** Plain click: one cell, everything else dropped. */
+export declare function selectCell(cell: CellRef): SelectionState;
+/**
+ * Shift-click or shift-arrow: stretch the newest range from its anchor.
+ *
+ * With nothing selected yet this behaves like a plain click, which is what
+ * every spreadsheet does when you shift-click into an empty grid.
+ */
+export declare function extendSelection(state: SelectionState, cell: CellRef): SelectionState;
+/**
+ * Cmd/Ctrl-click: add the cell as its own range, or remove it if it was
+ * already the whole of one. Clicking inside a bigger range leaves that range
+ * alone and just moves the active cell, which is how Excel behaves.
+ */
+export declare function toggleCell(state: SelectionState, cell: CellRef): SelectionState;
+/** Column header click. Additive keeps the existing ranges (cmd-click). */
+export declare function selectColumn(state: SelectionState, col: number, rowCount: number, additive?: boolean): SelectionState;
+/** Row-number click. */
+export declare function selectRow(state: SelectionState, row: number, colCount: number, additive?: boolean): SelectionState;
+/** Shift-click on a row number: every row between the anchor row and this one. */
+export declare function extendRowSelection(state: SelectionState, row: number, colCount: number): SelectionState;
+export declare function selectAll(rowCount: number, colCount: number): SelectionState;
+/** True when every row of `col` is inside the selection. */
+export declare function isColumnSelected(state: SelectionState, col: number, rowCount: number): boolean;
+/** True when every column of `row` is inside the selection. */
+export declare function isRowSelected(state: SelectionState, row: number, colCount: number): boolean;
+/**
+ * Move the active cell, clamped to the grid.
+ *
+ * `extend` stretches the current range instead of starting a new one, which is
+ * what shift-arrow does.
+ */
+export declare function moveActive(state: SelectionState, to: CellRef, rowCount: number, colCount: number, extend: boolean): SelectionState;

package/dist/workbench/grid-selection.js

@@ -0,0 +1,183 @@
+/**
+ * The grid's selection model, as pure data (from Loadr's grid).
+ *
+ * Coordinates are *view* coordinates: `row` indexes the visible (filtered and
+ * sorted) row order, `col` indexes the visible columns. The grid maps them back
+ * to source rows when it copies or edits. Keeping the model out of the
+ * component is what lets 50k-row selection behaviour be tested without a DOM.
+ */
+export const EMPTY_SELECTION = { ranges: [], active: null };
+function rangeBounds(range) {
+    return {
+        minRow: Math.min(range.anchor.row, range.focus.row),
+        maxRow: Math.max(range.anchor.row, range.focus.row),
+        minCol: Math.min(range.anchor.col, range.focus.col),
+        maxCol: Math.max(range.anchor.col, range.focus.col),
+    };
+}
+function contains(range, row, col) {
+    const b = rangeBounds(range);
+    return row >= b.minRow && row <= b.maxRow && col >= b.minCol && col <= b.maxCol;
+}
+/** Is this cell inside any range? */
+export function isSelected(state, row, col) {
+    for (const range of state.ranges) {
+        if (contains(range, row, col))
+            return true;
+    }
+    return false;
+}
+/** Total cells covered, counting an overlap once. */
+export function selectionSize(state) {
+    if (state.ranges.length === 0)
+        return 0;
+    const [only] = state.ranges;
+    if (state.ranges.length === 1 && only) {
+        const b = rangeBounds(only);
+        return (b.maxRow - b.minRow + 1) * (b.maxCol - b.minCol + 1);
+    }
+    const seen = new Set();
+    for (const range of state.ranges) {
+        const b = rangeBounds(range);
+        for (let r = b.minRow; r <= b.maxRow; r++) {
+            for (let c = b.minCol; c <= b.maxCol; c++)
+                seen.add(`${r}:${c}`);
+        }
+    }
+    return seen.size;
+}
+/** The bounding box of everything selected, or null when nothing is. */
+export function selectionBounds(state) {
+    if (state.ranges.length === 0)
+        return null;
+    let out = null;
+    for (const range of state.ranges) {
+        const b = rangeBounds(range);
+        out = out
+            ? {
+                minRow: Math.min(out.minRow, b.minRow),
+                maxRow: Math.max(out.maxRow, b.maxRow),
+                minCol: Math.min(out.minCol, b.minCol),
+                maxCol: Math.max(out.maxCol, b.maxCol),
+            }
+            : b;
+    }
+    return out;
+}
+/** Plain click: one cell, everything else dropped. */
+export function selectCell(cell) {
+    return { ranges: [{ anchor: cell, focus: cell }], active: cell };
+}
+/**
+ * Shift-click or shift-arrow: stretch the newest range from its anchor.
+ *
+ * With nothing selected yet this behaves like a plain click, which is what
+ * every spreadsheet does when you shift-click into an empty grid.
+ */
+export function extendSelection(state, cell) {
+    if (state.ranges.length === 0)
+        return selectCell(cell);
+    const ranges = state.ranges.slice();
+    const last = ranges[ranges.length - 1];
+    if (!last)
+        return selectCell(cell);
+    ranges[ranges.length - 1] = { anchor: last.anchor, focus: cell };
+    return { ranges, active: cell };
+}
+/**
+ * Cmd/Ctrl-click: add the cell as its own range, or remove it if it was
+ * already the whole of one. Clicking inside a bigger range leaves that range
+ * alone and just moves the active cell, which is how Excel behaves.
+ */
+export function toggleCell(state, cell) {
+    const exact = state.ranges.findIndex((r) => r.anchor.row === cell.row &&
+        r.anchor.col === cell.col &&
+        r.focus.row === cell.row &&
+        r.focus.col === cell.col);
+    if (exact >= 0) {
+        const ranges = state.ranges.filter((_, i) => i !== exact);
+        return { ranges, active: ranges[ranges.length - 1]?.focus ?? null };
+    }
+    return { ranges: [...state.ranges, { anchor: cell, focus: cell }], active: cell };
+}
+/** Column header click. Additive keeps the existing ranges (cmd-click). */
+export function selectColumn(state, col, rowCount, additive = false) {
+    if (rowCount === 0)
+        return additive ? state : EMPTY_SELECTION;
+    const range = {
+        anchor: { row: 0, col },
+        focus: { row: rowCount - 1, col },
+    };
+    return {
+        ranges: additive ? [...state.ranges, range] : [range],
+        active: { row: 0, col },
+    };
+}
+/** Row-number click. */
+export function selectRow(state, row, colCount, additive = false) {
+    if (colCount === 0)
+        return additive ? state : EMPTY_SELECTION;
+    const range = {
+        anchor: { row, col: 0 },
+        focus: { row, col: colCount - 1 },
+    };
+    return {
+        ranges: additive ? [...state.ranges, range] : [range],
+        active: { row, col: 0 },
+    };
+}
+/** Shift-click on a row number: every row between the anchor row and this one. */
+export function extendRowSelection(state, row, colCount) {
+    if (state.ranges.length === 0)
+        return selectRow(state, row, colCount);
+    const ranges = state.ranges.slice();
+    const last = ranges[ranges.length - 1];
+    if (!last)
+        return selectRow(state, row, colCount);
+    ranges[ranges.length - 1] = {
+        anchor: { row: last.anchor.row, col: 0 },
+        focus: { row, col: Math.max(colCount - 1, 0) },
+    };
+    return { ranges, active: { row, col: 0 } };
+}
+export function selectAll(rowCount, colCount) {
+    if (rowCount === 0 || colCount === 0)
+        return EMPTY_SELECTION;
+    return {
+        ranges: [{ anchor: { row: 0, col: 0 }, focus: { row: rowCount - 1, col: colCount - 1 } }],
+        active: { row: 0, col: 0 },
+    };
+}
+/** True when every row of `col` is inside the selection. */
+export function isColumnSelected(state, col, rowCount) {
+    if (rowCount === 0)
+        return false;
+    return state.ranges.some((r) => {
+        const b = rangeBounds(r);
+        return b.minCol <= col && b.maxCol >= col && b.minRow === 0 && b.maxRow >= rowCount - 1;
+    });
+}
+/** True when every column of `row` is inside the selection. */
+export function isRowSelected(state, row, colCount) {
+    if (colCount === 0)
+        return false;
+    return state.ranges.some((r) => {
+        const b = rangeBounds(r);
+        return b.minRow <= row && b.maxRow >= row && b.minCol === 0 && b.maxCol >= colCount - 1;
+    });
+}
+/**
+ * Move the active cell, clamped to the grid.
+ *
+ * `extend` stretches the current range instead of starting a new one, which is
+ * what shift-arrow does.
+ */
+export function moveActive(state, to, rowCount, colCount, extend) {
+    if (rowCount === 0 || colCount === 0)
+        return EMPTY_SELECTION;
+    const cell = {
+        row: Math.min(Math.max(to.row, 0), rowCount - 1),
+        col: Math.min(Math.max(to.col, 0), colCount - 1),
+    };
+    return extend ? extendSelection(state, cell) : selectCell(cell);
+}

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

@@ -0,0 +1,58 @@
+/**
+ * Column and selection statistics, and the column profile (from Loadr's grid
+ * and profile view). Pure.
+ *
+ * One pass, no sorting of the whole column: at 50k rows the grid computes these
+ * on a header menu opening or a selection change, so the cost has to stay linear
+ * and allocation-light.
+ */
+export interface ColumnStats {
+    /** Values looked at, including NULLs. */
+    count: number;
+    nulls: number;
+    distinct: number;
+    min?: number | string;
+    max?: number | string;
+    sum?: number;
+    avg?: number;
+    /** True when every non-NULL value was a number. */
+    numeric: boolean;
+}
+export declare function computeStats(values: readonly unknown[]): ColumnStats;
+export interface NumericSummary {
+    count: number;
+    sum: number;
+    avg: number;
+    min: number;
+    max: number;
+}
+/**
+ * Sum/avg over whatever in the selection parses as a number.
+ *
+ * Unlike `computeStats` this does coerce numeric strings, because a selection
+ * spans columns and a numeric column arriving as text should still add up.
+ */
+export declare function numericSummary(values: readonly unknown[]): NumericSummary | null;
+export declare function formatStatValue(value: number | string | undefined): string;
+/** What the profile infers a column holds. */
+export type ProfileKind = "numeric" | "text" | "boolean" | "date" | "null";
+/** One column of a profile. */
+export interface ColumnProfile {
+    name: string;
+    kind: ProfileKind;
+    count: number;
+    nulls: number;
+    distinct: number;
+    min?: number | string;
+    max?: number | string;
+    mean?: number;
+    median?: number;
+    /** The most frequent values, most frequent first, as a share of the non-NULL values. */
+    top: {
+        value: string;
+        count: number;
+        share: number;
+    }[];
+}
+/** A column's profile: counts, range, mean and median (numeric), and the top values. */
+export declare function profileColumn(name: string, values: readonly unknown[], topCount?: number): ColumnProfile;