bo-grid 0.8.0 → 0.21.0

package/dist/grid/grouping.d.ts

@@ -10,6 +10,19 @@ export interface GroupNode {
     rows: GridRow[];
     count: number;
     collapsed: boolean;
+    /** Server-provided aggregate display strings, keyed by column key (lazy groups).
+        When present, the group header shows these instead of computing from `rows`. */
+    aggText?: Record<string, string>;
+}
+/** A server-side group summary (lazy grouping): the header data without the leaf
+    rows, which load on expand via `loadGroup`. */
+export interface LazyGroup {
+    key: string;
+    /** Header label (defaults to `key`). */
+    label?: string;
+    count?: number;
+    /** Preformatted aggregate strings keyed by column key, shown in the header. */
+    agg?: Record<string, string>;
 }
 export type VisualRow = {
     kind: 'data';
@@ -19,6 +32,9 @@ export type VisualRow = {
 } | {
     kind: 'group';
     group: GroupNode;
+} | {
+    kind: 'treeloading';
+    depth: number;
 };
 /**
  * Flatten data rows into the visual row list the grid renders: a stream of
@@ -36,3 +52,17 @@ export declare function buildFlatRows(rows: GridRow[], groupBy: string[], collap
  * nearest preceding header at each depth until the depth-0 group is found.
  */
 export declare function activeGroupsAt(flat: VisualRow[], idx: number): GroupNode[];
+/** How lazy grouping reads expand/loading state and the rows loaded per group. */
+export interface LazyGroupAccess {
+    isExpanded: (key: string) => boolean;
+    /** Loaded leaf rows for a group, or undefined when not yet loaded. */
+    rowsOf: (key: string) => readonly GridRow[] | undefined;
+    isLoading: (key: string) => boolean;
+}
+/**
+ * Flatten server-side group summaries into visual rows: a group header per group,
+ * then — when expanded — its loaded leaf rows, or a single `treeloading`
+ * placeholder while they load. Aggregates come from the summary (not computed).
+ * Pure; unit-tested.
+ */
+export declare function buildLazyGroupRows(groups: readonly LazyGroup[], access: LazyGroupAccess): VisualRow[];

package/dist/grid/grouping.js

@@ -60,3 +60,36 @@ export function activeGroupsAt(flat, idx) {
     }
     return [...found.values()].sort((a, b) => a.depth - b.depth);
 }
+/**
+ * Flatten server-side group summaries into visual rows: a group header per group,
+ * then — when expanded — its loaded leaf rows, or a single `treeloading`
+ * placeholder while they load. Aggregates come from the summary (not computed).
+ * Pure; unit-tested.
+ */
+export function buildLazyGroupRows(groups, access) {
+    const out = [];
+    for (const g of groups) {
+        const expanded = access.isExpanded(g.key);
+        out.push({
+            kind: 'group',
+            group: {
+                path: g.key,
+                depth: 0,
+                value: g.label ?? g.key,
+                rows: [],
+                count: g.count ?? 0,
+                collapsed: !expanded,
+                aggText: g.agg,
+            },
+        });
+        if (!expanded)
+            continue;
+        const loaded = access.rowsOf(g.key);
+        if (loaded)
+            for (const row of loaded)
+                out.push({ kind: 'data', row });
+        else if (access.isLoading(g.key))
+            out.push({ kind: 'treeloading', depth: 1 });
+    }
+    return out;
+}

package/dist/grid/theme.d.ts

@@ -35,3 +35,18 @@ export interface GridTheme {
 export declare function themeVars(theme: GridTheme): string;
 export declare const darkTheme: GridTheme;
 export declare const lightTheme: GridTheme;
+export declare const highContrastDark: GridTheme;
+export declare const highContrastLight: GridTheme;
+export declare const midnightTheme: GridTheme;
+export declare const terminalTheme: GridTheme;
+/** All built-in presets, keyed by name (handy for a theme picker). */
+export declare const themePresets: {
+    dark: GridTheme;
+    light: GridTheme;
+    'high-contrast-dark': GridTheme;
+    'high-contrast-light': GridTheme;
+    midnight: GridTheme;
+    terminal: GridTheme;
+};
+/** Built-in preset name. */
+export type ThemePreset = keyof typeof themePresets;

package/dist/grid/theme.js

@@ -64,3 +64,81 @@ export const lightTheme = {
     selBorder: '#6366f1',
     scheme: 'light',
 };
+// High-contrast dark (accessibility): pure black, white text, strong borders and
+// vivid status colours — comfortably exceeds WCAG AA, toward AAA.
+export const highContrastDark = {
+    bg: '#000000',
+    headerBg: '#0a0a0a',
+    rowA: '#000000',
+    rowB: '#0a0a0a',
+    rowHover: '#1c1c1c',
+    text: '#ffffff',
+    textDim: '#c8c8c8',
+    border: 'rgba(255,255,255,0.34)',
+    up: '#00e676',
+    down: '#ff5252',
+    amber: '#ffd740',
+    selFill: 'rgba(255,255,255,0.20)',
+    selBorder: '#ffffff',
+    scheme: 'dark',
+};
+// High-contrast light (accessibility): white, near-black text, strong borders.
+export const highContrastLight = {
+    bg: '#ffffff',
+    headerBg: '#eeeeee',
+    rowA: '#ffffff',
+    rowB: '#f5f5f5',
+    rowHover: '#e3e3e3',
+    text: '#000000',
+    textDim: '#383838',
+    border: 'rgba(0,0,0,0.42)',
+    up: '#007a36',
+    down: '#c20000',
+    amber: '#7a5c00',
+    selFill: 'rgba(0,0,0,0.10)',
+    selBorder: '#000000',
+    scheme: 'light',
+};
+// Midnight: a deep navy/indigo dark theme — a calmer, "premium" alternative.
+export const midnightTheme = {
+    bg: '#0f172a',
+    headerBg: '#0b1120',
+    rowA: '#0f172a',
+    rowB: '#121d35',
+    rowHover: '#1e293b',
+    text: '#e2e8f0',
+    textDim: '#94a3b8',
+    border: 'rgba(148,163,184,0.16)',
+    up: '#34d399',
+    down: '#fb7185',
+    amber: '#fbbf24',
+    selFill: 'rgba(129,140,248,0.22)',
+    selBorder: '#818cf8',
+    scheme: 'dark',
+};
+// Terminal: green phosphor on near-black — a retro fintech/console look.
+export const terminalTheme = {
+    bg: '#0a0f0a',
+    headerBg: '#0d140d',
+    rowA: '#0a0f0a',
+    rowB: '#0e160e',
+    rowHover: '#16241a',
+    text: '#4ade80',
+    textDim: '#3f9e60',
+    border: 'rgba(74,222,128,0.20)',
+    up: '#4ade80',
+    down: '#f87171',
+    amber: '#fde047',
+    selFill: 'rgba(74,222,128,0.16)',
+    selBorder: '#4ade80',
+    scheme: 'dark',
+};
+/** All built-in presets, keyed by name (handy for a theme picker). */
+export const themePresets = {
+    dark: darkTheme,
+    light: lightTheme,
+    'high-contrast-dark': highContrastDark,
+    'high-contrast-light': highContrastLight,
+    midnight: midnightTheme,
+    terminal: terminalTheme,
+};

package/dist/grid/tree.d.ts

@@ -1,12 +1,24 @@
 import type { GridRow } from './column';
 import type { VisualRow } from './grouping';
-/** Resolve a row's children (undefined/empty = leaf). */
+/** Resolve a row's children (undefined/empty = leaf). Sync. */
 export type GetChildren = (row: GridRow) => GridRow[] | undefined;
+/** How the flattener reads a tree: which rows have children, which are expanded,
+    the children currently available (sync result or async cache), and which
+    expanded nodes are still loading. */
+export interface TreeAccess {
+    /** Children available now (sync result or loaded cache); undefined = not loaded. */
+    childrenOf: (row: GridRow) => readonly GridRow[] | undefined;
+    /** Cheap predicate: does this row have children? (Drives the expand chevron.) */
+    hasChildren: (row: GridRow) => boolean;
+    isExpanded: (row: GridRow) => boolean;
+    /** Whether an expanded row's children are still loading (async trees). */
+    isLoading?: (row: GridRow) => boolean;
+}
 /**
- * Flatten a tree of rows into the visible, depth-tagged data rows the grid
- * renders. Pre-order DFS: each node is emitted, then — if it has children and
- * `isExpanded` returns true — its children, one level deeper. Collapsed or leaf
- * nodes contribute only themselves. Pure: no row values are read, so a realtime
- * tick never rebuilds this list.
+ * Flatten a tree of rows into the visible, depth-tagged rows the grid renders.
+ * Pre-order DFS: each node is emitted, then — if it has children and is expanded
+ * — its loaded children one level deeper, or a single `treeloading` placeholder
+ * while they load. Pure: no row values are read, so a realtime tick never rebuilds
+ * this list.
  */
-export declare function buildTreeRows(roots: readonly GridRow[], getChildren: GetChildren, isExpanded: (row: GridRow) => boolean): VisualRow[];
+export declare function buildTreeRows(roots: readonly GridRow[], access: TreeAccess): VisualRow[];

package/dist/grid/tree.js

@@ -1,19 +1,24 @@
 /**
- * Flatten a tree of rows into the visible, depth-tagged data rows the grid
- * renders. Pre-order DFS: each node is emitted, then — if it has children and
- * `isExpanded` returns true — its children, one level deeper. Collapsed or leaf
- * nodes contribute only themselves. Pure: no row values are read, so a realtime
- * tick never rebuilds this list.
+ * Flatten a tree of rows into the visible, depth-tagged rows the grid renders.
+ * Pre-order DFS: each node is emitted, then — if it has children and is expanded
+ * — its loaded children one level deeper, or a single `treeloading` placeholder
+ * while they load. Pure: no row values are read, so a realtime tick never rebuilds
+ * this list.
  */
-export function buildTreeRows(roots, getChildren, isExpanded) {
+export function buildTreeRows(roots, access) {
+    const { childrenOf, hasChildren, isExpanded, isLoading } = access;
     const out = [];
     const walk = (nodes, depth) => {
         for (const row of nodes) {
-            const children = getChildren(row);
-            const hasChildren = !!children && children.length > 0;
-            out.push({ kind: 'data', row, depth, hasChildren });
-            if (hasChildren && isExpanded(row))
-                walk(children, depth + 1);
+            const has = hasChildren(row);
+            out.push({ kind: 'data', row, depth, hasChildren: has });
+            if (has && isExpanded(row)) {
+                const children = childrenOf(row);
+                if (children && children.length > 0)
+                    walk(children, depth + 1);
+                else if (isLoading?.(row))
+                    out.push({ kind: 'treeloading', depth: depth + 1 });
+            }
         }
     };
     walk(roots, 0);

package/dist/index.d.ts

@@ -1,16 +1,17 @@
 export { default as Grid } from './grid/Grid.svelte';
 export { default as Sparkline } from './sparkline/Sparkline.svelte';
-export type { ColumnDef, Align, GridRow, SortDir, SortState, CellEditEvent } from './grid/column';
+export type { LazyGroup } from './grid/grouping';
+export type { ColumnDef, Align, GridRow, SortDir, SortState, CellEditEvent, BadgeTone, DataBarConfig, IconRule, ColorScaleConfig, } from './grid/column';
 export type { AggKind, AggResult } from './grid/aggregate';
 export type { ColumnFilter, FilterKind, TextOp, NumberOp, DateOp } from './grid/filtering';
-export { fmtPrice, fmtPercent, fmtVolume, fmtDate } from './format/format';
+export { fmtPrice, fmtPercent, fmtVolume, fmtDate, fmtCurrency, relativeTime } from './format/format';
 export type { DateStyle } from './format/format';
 export { aggregate } from './grid/aggregate';
 export { heatColor } from './grid/heatmap';
 export { pivot } from './grid/pivot';
 export type { PivotConfig, PivotResult } from './grid/pivot';
-export { themeVars, darkTheme, lightTheme } from './grid/theme';
-export type { GridTheme } from './grid/theme';
+export { themeVars, darkTheme, lightTheme, highContrastDark, highContrastLight, midnightTheme, terminalTheme, themePresets, } from './grid/theme';
+export type { GridTheme, ThemePreset } from './grid/theme';
 export { drawCandles, setupHiDpiCanvas } from './sparkline/sparkline-render';
 export { toCSV, exportCSV } from './grid/export';
 export { exportXLSX } from './grid/export-xlsx';

package/dist/index.js

@@ -8,13 +8,13 @@
 export { default as Grid } from './grid/Grid.svelte';
 export { default as Sparkline } from './sparkline/Sparkline.svelte';
 // Value formatters (handy when building custom cell content)
-export { fmtPrice, fmtPercent, fmtVolume, fmtDate } from './format/format';
+export { fmtPrice, fmtPercent, fmtVolume, fmtDate, fmtCurrency, relativeTime } from './format/format';
 // Standalone helpers
 export { aggregate } from './grid/aggregate';
 export { heatColor } from './grid/heatmap';
 export { pivot } from './grid/pivot';
 // Theming
-export { themeVars, darkTheme, lightTheme } from './grid/theme';
+export { themeVars, darkTheme, lightTheme, highContrastDark, highContrastLight, midnightTheme, terminalTheme, themePresets, } from './grid/theme';
 // Sparkline canvas primitives (draw candlesticks on your own canvas)
 export { drawCandles, setupHiDpiCanvas } from './sparkline/sparkline-render';
 // Export (CSV is dependency-free; XLSX dynamic-imports the optional `xlsx` peer)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bo-grid",
-  "version": "0.8.0",
+  "version": "0.21.0",
   "type": "module",
   "license": "MIT",
   "description": "Tiny, fast Svelte 5 data grid: canvas sparklines, batched realtime cell updates, and virtual scrolling. A free, fintech-focused alternative to heavyweight grids.",
@@ -33,6 +33,14 @@
       "svelte": "./dist/index.js",
       "default": "./dist/index.js"
     },
+    "./charts": {
+      "types": "./dist/charts/index.d.ts",
+      "svelte": "./dist/charts/index.js",
+      "default": "./dist/charts/index.js"
+    },
+    "./element": {
+      "default": "./dist/bo-grid.element.js"
+    },
     "./package.json": "./package.json"
   },
   "files": [
@@ -53,12 +61,14 @@
     "demo:build": "vite build",
     "pages:build": "vite build --base=/bo-grid/ --outDir demo-dist",
     "preview": "vite preview",
-    "package": "svelte-package -i src/lib -o dist && node scripts/clean-dist.mjs",
+    "package": "svelte-package -i src/lib -o dist && node scripts/clean-dist.mjs && pnpm run build:wc",
+    "build:wc": "vite build --config vite.wc.config.ts",
     "prepublishOnly": "pnpm run package",
     "check": "svelte-check --tsconfig ./tsconfig.json",
     "size": "vite build && node scripts/size-check.mjs",
     "size:lib": "vite build --config vite.lib.config.ts && node scripts/size-lib.mjs",
     "smoke": "vite build --base=./ --outDir demo-dist && node scripts/smoke.mjs",
+    "smoke:wc": "node scripts/wc-smoke.mjs",
     "ssr": "node scripts/ssr.mjs",
     "bench": "node scripts/bench.mjs",
     "test": "vitest run",