@ruckc/truss-ui 1.2.0 → 1.4.0

package/dist/styles/tokens.css

@@ -46,6 +46,10 @@
 	--tr-control-h-sm: 24px;
 	--tr-control-h: 32px;
 	--tr-control-h-lg: 40px;
+	/* Row heights: table body rows, table header rows, tree rows. Density scales these. */
+	--tr-row-h: 32px;
+	--tr-row-h-head: 28px;
+	--tr-tree-row-h: 28px;
 	--tr-icon-sm: 16px;
 	--tr-icon-lg: 20px;
 	--tr-gap: 8px;
@@ -62,6 +66,7 @@
 	--tr-dur: 160ms;
 
 	/* Color roles — light */
+	/* --tr-primary-text / --tr-secondary-text are optional: unset, text follows the fill colour (also on a re-themed subtree). Set them when a brand fill is too light for small text. */
 	--tr-primary: #1f5fbf;
 	--tr-on-primary: #ffffff;
 	--tr-primary-container: #d8e4ff;
@@ -182,3 +187,47 @@
 	--tr-scrim: rgb(0 0 0 / 0.55);
 	--tr-shadow-color: 0 0 0;
 }
+
+/*
+ * Density: <html data-density="compact|default|comfortable"> or on any subtree element.
+ * Scales control, row and type tokens; a local override (e.g. InputGroup size) still wins.
+ */
+[data-density='compact'] {
+	--tr-control-h-sm: 20px;
+	--tr-control-h: 26px;
+	--tr-control-h-lg: 32px;
+	--tr-row-h: 24px;
+	--tr-row-h-head: 24px;
+	--tr-tree-row-h: 22px;
+	--tr-gap: 6px;
+	--tr-text-xs: 10px;
+	--tr-text-sm: 11px;
+	--tr-text-md: 13px;
+	--tr-text-lg: 15px;
+}
+[data-density='default'] {
+	--tr-control-h-sm: 24px;
+	--tr-control-h: 32px;
+	--tr-control-h-lg: 40px;
+	--tr-row-h: 32px;
+	--tr-row-h-head: 28px;
+	--tr-tree-row-h: 28px;
+	--tr-gap: 8px;
+	--tr-text-xs: 11px;
+	--tr-text-sm: 12px;
+	--tr-text-md: 14px;
+	--tr-text-lg: 16px;
+}
+[data-density='comfortable'] {
+	--tr-control-h-sm: 28px;
+	--tr-control-h: 40px;
+	--tr-control-h-lg: 48px;
+	--tr-row-h: 44px;
+	--tr-row-h-head: 36px;
+	--tr-tree-row-h: 36px;
+	--tr-gap: 12px;
+	--tr-text-xs: 12px;
+	--tr-text-sm: 13px;
+	--tr-text-md: 15px;
+	--tr-text-lg: 17px;
+}

package/dist/table-export.d.ts

@@ -0,0 +1,24 @@
+import type { Column } from './types.js';
+export type ExportFormat = 'csv' | 'tsv' | 'json';
+/** Custom serializer, e.g. SQL `VALUES`. Receives the rows and the columns being exported. */
+export type ExportSerializer<T> = (rows: T[], columns: Column<T>[]) => string;
+export type ExportOptions = {
+    /** Include a header line (CSV / TSV). Default true. */
+    header?: boolean;
+    /** Locale for the default display formatters. Defaults to the runtime locale. */
+    locale?: string;
+};
+/** The unambiguous (ISO 8601) form of a date / datetime value, or undefined. Date-only values never gain a time. */
+export declare function isoValue(v: unknown, type: 'date' | 'datetime'): string | undefined;
+/** Default display text for a cell (what the table shows when you give no `format`). */
+export declare function displayValue<T>(row: T, column: Column<T>, locale?: string): string;
+/** ISO tooltip for date / datetime columns (undefined otherwise). */
+export declare function titleValue<T>(row: T, column: Column<T>): string | undefined;
+/** CSV per RFC 4180 (comma separated, CRLF line breaks, no trailing newline). */
+export declare const toCsv: <T>(rows: T[], columns: Column<T>[], opts?: ExportOptions) => string;
+/** Tab separated, spreadsheet-friendly: fields with tabs, quotes or line breaks are quoted the way Excel and Sheets expect. */
+export declare const toTsv: <T>(rows: T[], columns: Column<T>[], opts?: ExportOptions) => string;
+/** JSON array of objects keyed by column key. Values keep their type (numbers stay numbers; dates become ISO strings); `Column.format` is not applied. */
+export declare function toJson<T>(rows: T[], columns: Column<T>[]): string;
+/** Serialize rows with the given columns. Pure: no DOM, no clipboard. */
+export declare function serializeRows<T>(rows: T[], columns: Column<T>[], format: ExportFormat | ExportSerializer<T>, opts?: ExportOptions): string;

package/dist/table-export.js

@@ -0,0 +1,130 @@
+const nf = new Map();
+const df = new Map();
+function numberFormat(locale) {
+    const k = locale ?? '';
+    let f = nf.get(k);
+    if (!f)
+        nf.set(k, (f = new Intl.NumberFormat(locale, { maximumFractionDigits: 20 })));
+    return f;
+}
+function dateFormat(locale, kind, utc) {
+    const k = `${locale ?? ''}|${kind}|${utc}`;
+    let f = df.get(k);
+    if (!f)
+        df.set(k, (f = new Intl.DateTimeFormat(locale, kind === 'date' ? { dateStyle: 'medium', timeZone: utc ? 'UTC' : undefined } : { dateStyle: 'medium', timeStyle: 'short' })));
+    return f;
+}
+const DATE_ONLY = /^(\d{4})-(\d{2})-(\d{2})(?:[T ]00:00(?::00(?:\.0+)?)?(?:Z|[+-]00:?00)?)?$/;
+const pad = (n) => String(n).padStart(2, '0');
+/** Parse a date-ish value. `dateOnly` is true for `YYYY-MM-DD` strings (optionally with a midnight time), which carry no time zone. */
+function toDate(v, type) {
+    if (typeof v === 'string') {
+        const s = v.trim();
+        const m = DATE_ONLY.exec(s);
+        if (m && (type === 'date' || /^\d{4}-\d{2}-\d{2}$/.test(s))) {
+            const d = new Date(Date.UTC(+m[1], +m[2] - 1, +m[3]));
+            return Number.isNaN(d.getTime()) ? null : { d, dateOnly: true };
+        }
+    }
+    const d = v instanceof Date ? v : new Date(v);
+    return Number.isNaN(d.getTime()) ? null : { d, dateOnly: false };
+}
+/** The unambiguous (ISO 8601) form of a date / datetime value, or undefined. Date-only values never gain a time. */
+export function isoValue(v, type) {
+    if (v == null || v === '')
+        return undefined;
+    const p = toDate(v, type);
+    if (!p)
+        return undefined;
+    if (p.dateOnly)
+        return p.d.toISOString().slice(0, 10);
+    if (type === 'date')
+        return `${p.d.getFullYear()}-${pad(p.d.getMonth() + 1)}-${pad(p.d.getDate())}`;
+    return p.d.toISOString();
+}
+function safeJson(v) {
+    try {
+        return JSON.stringify(v) ?? '';
+    }
+    catch {
+        return String(v);
+    }
+}
+/** Default display text for a cell (what the table shows when you give no `format`). */
+export function displayValue(row, column, locale) {
+    const v = row[column.key];
+    if (column.format)
+        return column.format(v, row);
+    if (v == null)
+        return '';
+    switch (column.type) {
+        case 'number':
+            return typeof v === 'bigint' || (typeof v === 'number' && Number.isFinite(v)) ? numberFormat(locale).format(v) : String(v);
+        case 'date':
+        case 'datetime': {
+            const p = toDate(v, column.type);
+            if (!p)
+                return String(v);
+            return dateFormat(locale, column.type, column.type === 'date' && p.dateOnly).format(p.d);
+        }
+        case 'json':
+            return typeof v === 'string' ? v : safeJson(v);
+        default:
+            return typeof v === 'object' && !(v instanceof Date) ? safeJson(v) : String(v);
+    }
+}
+/** ISO tooltip for date / datetime columns (undefined otherwise). */
+export function titleValue(row, column) {
+    if (column.type !== 'date' && column.type !== 'datetime')
+        return undefined;
+    return isoValue(row[column.key], column.type);
+}
+/** Plain text for export: `Column.format` when given, otherwise the raw value (ISO dates, un-grouped numbers, JSON). */
+function exportText(row, c) {
+    const v = row[c.key];
+    if (c.format)
+        return c.format(v, row);
+    if (v == null)
+        return '';
+    if (c.type === 'date' || c.type === 'datetime')
+        return isoValue(v, c.type) ?? String(v);
+    if (v instanceof Date)
+        return v.toISOString();
+    if (typeof v === 'object')
+        return safeJson(v);
+    return String(v);
+}
+/** RFC 4180: quote a field holding a quote, delimiter, CR or LF; double embedded quotes. */
+function field(s, delim) {
+    return s.includes('"') || s.includes(delim) || s.includes('\n') || s.includes('\r') ? `"${s.replaceAll('"', '""')}"` : s;
+}
+function delimited(rows, columns, delim, eol, header) {
+    const lines = [];
+    if (header)
+        lines.push(columns.map((c) => field(c.header, delim)).join(delim));
+    for (const r of rows)
+        lines.push(columns.map((c) => field(exportText(r, c), delim)).join(delim));
+    return lines.join(eol);
+}
+/** CSV per RFC 4180 (comma separated, CRLF line breaks, no trailing newline). */
+export const toCsv = (rows, columns, opts = {}) => delimited(rows, columns, ',', '\r\n', opts.header !== false);
+/** Tab separated, spreadsheet-friendly: fields with tabs, quotes or line breaks are quoted the way Excel and Sheets expect. */
+export const toTsv = (rows, columns, opts = {}) => delimited(rows, columns, '\t', '\n', opts.header !== false);
+/** JSON array of objects keyed by column key. Values keep their type (numbers stay numbers; dates become ISO strings); `Column.format` is not applied. */
+export function toJson(rows, columns) {
+    const out = rows.map((r) => {
+        const o = {};
+        for (const c of columns) {
+            const v = r[c.key];
+            o[c.key] = (c.type === 'date' || c.type === 'datetime') && v != null ? (isoValue(v, c.type) ?? v) : (v ?? null);
+        }
+        return o;
+    });
+    return JSON.stringify(out, null, 2);
+}
+/** Serialize rows with the given columns. Pure: no DOM, no clipboard. */
+export function serializeRows(rows, columns, format, opts = {}) {
+    if (typeof format === 'function')
+        return format(rows, columns);
+    return format === 'csv' ? toCsv(rows, columns, opts) : format === 'tsv' ? toTsv(rows, columns, opts) : toJson(rows, columns);
+}

package/dist/toast.svelte.d.ts

@@ -1,21 +1,45 @@
 export type ToastIntent = 'primary' | 'success' | 'warning' | 'danger';
+export type ToastAction = {
+    label: string;
+    run: () => void;
+};
 export type Toast = {
     id: number;
     intent: ToastIntent;
     message: string;
     timeout: number;
+    action?: ToastAction;
 };
 declare class ToastStore {
     #private;
     items: Toast[];
-    /** Show a toast. `timeout: 0` keeps it until dismissed. Returns its id. */
+    /**
+     * Show a toast. `timeout: 0` keeps it until dismissed. `action` adds a button that runs its
+     * `run` callback and dismisses the toast. Returns its id.
+     */
     push(message: string, opts?: {
         intent?: ToastIntent;
         timeout?: number;
+        action?: ToastAction;
     }): number;
     success: (message: string, timeout?: number) => number;
     warning: (message: string, timeout?: number) => number;
     danger: (message: string, timeout?: number) => number;
+    /**
+     * Run `run()` now and show a toast with an Undo action that calls `undo()` if pressed before
+     * the toast times out. Returns its id.
+     */
+    undoable({ message, run, undo, timeout, intent }: {
+        message: string;
+        run: () => void;
+        undo: () => void;
+        timeout?: number;
+        intent?: ToastIntent;
+    }): number;
+    /** Stop the auto-dismiss timer, remembering the time that is left. No-op if not timed or already paused. */
+    pause(id: number): void;
+    /** Restart the auto-dismiss timer with the time that was left when it was paused. */
+    resume(id: number): void;
     dismiss(id: number): void;
 }
 export declare const toasts: ToastStore;

package/dist/toast.svelte.js

@@ -1,19 +1,57 @@
 class ToastStore {
     items = $state([]);
     #next = 1;
-    /** Show a toast. `timeout: 0` keeps it until dismissed. Returns its id. */
+    #timers = new Map();
+    /**
+     * Show a toast. `timeout: 0` keeps it until dismissed. `action` adds a button that runs its
+     * `run` callback and dismisses the toast. Returns its id.
+     */
     push(message, opts = {}) {
-        const toast = { id: this.#next++, intent: opts.intent ?? 'primary', message, timeout: opts.timeout ?? 5000 };
+        const toast = { id: this.#next++, intent: opts.intent ?? 'primary', message, timeout: opts.timeout ?? 5000, action: opts.action };
         this.items.push(toast);
         if (toast.timeout > 0)
-            setTimeout(() => this.dismiss(toast.id), toast.timeout);
+            this.#arm(toast.id, toast.timeout);
         return toast.id;
     }
     success = (message, timeout) => this.push(message, { intent: 'success', timeout });
     warning = (message, timeout) => this.push(message, { intent: 'warning', timeout });
     danger = (message, timeout) => this.push(message, { intent: 'danger', timeout });
+    /**
+     * Run `run()` now and show a toast with an Undo action that calls `undo()` if pressed before
+     * the toast times out. Returns its id.
+     */
+    undoable({ message, run, undo, timeout = 8000, intent = 'primary' }) {
+        run();
+        return this.push(message, { intent, timeout, action: { label: 'Undo', run: undo } });
+    }
+    /** Stop the auto-dismiss timer, remembering the time that is left. No-op if not timed or already paused. */
+    pause(id) {
+        const t = this.#timers.get(id);
+        if (!t?.handle)
+            return;
+        clearTimeout(t.handle);
+        t.handle = undefined;
+        t.remaining -= Date.now() - t.started;
+    }
+    /** Restart the auto-dismiss timer with the time that was left when it was paused. */
+    resume(id) {
+        const t = this.#timers.get(id);
+        if (!t || t.handle)
+            return;
+        t.started = Date.now();
+        t.handle = setTimeout(() => this.dismiss(id), Math.max(0, t.remaining));
+    }
     dismiss(id) {
-        this.items = this.items.filter((t) => t.id !== id);
+        const t = this.#timers.get(id);
+        if (t?.handle)
+            clearTimeout(t.handle);
+        this.#timers.delete(id);
+        this.items = this.items.filter((x) => x.id !== id);
+    }
+    #arm(id, ms) {
+        const timer = { remaining: ms, started: Date.now() };
+        timer.handle = setTimeout(() => this.dismiss(id), ms);
+        this.#timers.set(id, timer);
     }
 }
 export const toasts = new ToastStore();

package/dist/types.d.ts

@@ -24,11 +24,17 @@ export type MenuEntry = MenuItem | {
 } | {
     heading: string;
 };
+export type ColumnType = 'text' | 'number' | 'date' | 'datetime' | 'boolean' | 'json';
 export type Column<R> = {
     key: keyof R & string;
     header: string;
+    /** Data type: sets default alignment (numbers and dates end-align with tabular figures) and default cell and export formatting. */
+    type?: ColumnType;
+    /** Overrides the default cell text, and is used for CSV / TSV export. Return plain text. */
+    format?: (value: R[keyof R & string], row: R) => string;
     width?: number;
     minWidth?: number;
+    /** Defaults to `end` for number, date and datetime columns. */
     align?: 'start' | 'end';
     sortable?: boolean;
     /** Defaults to true (except the last column). */

package/package.json

@@ -15,6 +15,7 @@
     "@sveltejs/vite-plugin-svelte": "^7.0.0",
     "@types/node": "^26.6.6",
     "conventional-changelog-conventionalcommits": "^8.0.0",
+    "monocart-coverage-reports": "^3.2.0",
     "semantic-release": "^25.0.9",
     "svelte": "^5.57.2",
     "svelte-check": "^4.7.5",
@@ -67,14 +68,17 @@
     "url": "git+https://github.com/ruckc/truss-ui.git"
   },
   "scripts": {
+    "check:contrast": "node scripts/check-contrast.mjs",
     "build": "npm run docs && vite build",
-    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json && node scripts/component-count.mjs --check",
     "dev": "vite dev",
-    "docs": "node scripts/extract-api.mjs",
+    "docs": "node scripts/extract-api.mjs && node scripts/component-count.mjs",
     "package": "svelte-kit sync && svelte-package",
     "package:all": "npm run package && npm run package --workspaces",
     "preview": "vite preview",
+    "coverage:report": "node scripts/coverage-report.mjs",
     "test": "playwright test",
+    "test:coverage": "rm -rf coverage && COVERAGE=1 playwright test && node scripts/coverage-report.mjs",
     "test:quick": "playwright test tests/lib.spec.ts tests/inputs.spec.ts tests/misc.spec.ts"
   },
   "sideEffects": [
@@ -83,7 +87,7 @@
   "svelte": "./dist/index.js",
   "type": "module",
   "types": "./dist/index.d.ts",
-  "version": "1.2.0",
+  "version": "1.4.0",
   "workspaces": [
     "packages/*"
   ]