bo-grid 0.7.0 → 0.8.0

package/README.md

@@ -16,14 +16,16 @@ matrix, a **Leaderboard** with rank medals and score bars, a **Tree** file
 explorer, a drag-to-reorder **Tasks** list, and a **1M-row** trade tape windowed
 from a synthetic source — switch between them with the tabs.
 
-> **Status: v0.2.** Working: config-driven columns, virtual scroll, client
-> single/multi/controlled sort + global & per-column filters, multi-cell selection
-> + live range aggregation, row grouping (nested, collapsible, sticky headers,
-> live subtotals), pivot tables, tree data, master-detail, a server-side
-> `RowSource` for huge datasets, CSV/Excel export, drag-to-reorder and
-> drag-to-resize columns, pinned columns (left/right), row selection, pagination,
-> inline editing with validation, type-to-edit, clipboard copy/paste, sparklines,
-> realtime flash, heatmaps, theming, and full keyboard a11y. **SSR/SvelteKit-safe.**
+> **Status: actively developed.** Working: config-driven columns, virtual scroll,
+> sort (single / multi / controlled), filtering (global, per-column row, header
+> filter menus with set / number / date filters, quick search, controlled +
+> server-side), multi-cell selection + live aggregation, grouping (nested, sticky,
+> subtotals), pivot, tree data, master-detail, a server-side `RowSource` for huge
+> datasets, CSV/Excel export, column management (reorder, resize, pin L/R, hide,
+> autosize, tool panel, column menu), spreadsheet editing (inline + typed editors,
+> validation, copy/paste, fill handle, undo/redo), row selection, pagination,
+> sparklines, realtime flash, heatmaps, theming, and full keyboard a11y.
+> **SSR/SvelteKit-safe.**
 > Unit tests (Vitest), type-check, a headless mount smoke-test, an SSR render
 > check, and library + demo bundle-size budgets all run in CI. A formal WCAG audit
 > is the main thing left — see the roadmap.
@@ -290,6 +292,30 @@ these:
 }
 ```
 
+Native form controls (checkboxes, date pickers, number spinners, search inputs,
+scrollbars) follow the theme automatically via `color-scheme` + `accent-color`.
+A custom theme defaults to dark; set `scheme: 'light'` (or `--bo-grid-scheme:
+light`) for a light one.
+
+**Tokens** cover colour, typography (`mono`/`sans`/`fontSize`), shape (`radius`),
+and density (`cellPad`, plus the `rowHeight` prop) — so the whole look is yours.
+Numeric columns use tabular figures so digits line up. A few looks:
+
+```svelte
+<!-- Compact / dense -->
+<Grid {rows} {columns} rowHeight={28}
+  theme={{ fontSize: '12px', cellPad: '6px' }} height={640} />
+
+<!-- Roomy & rounded -->
+<Grid {rows} {columns} rowHeight={44}
+  theme={{ radius: '16px', cellPad: '16px', fontSize: '14px' }} height={640} />
+
+<!-- Branded -->
+<Grid {rows} {columns}
+  theme={{ bg: '#0b1020', headerBg: '#0d1226', up: '#22d3ee', down: '#fb7185',
+           selBorder: '#22d3ee', radius: '12px' }} height={640} />
+```
+
 ## Server-side / large datasets
 
 Instead of an in-memory `rows` array, back the grid with a **`RowSource`** — the

package/dist/grid/Cell.svelte

@@ -251,9 +251,9 @@
     position: relative;
     display: flex;
     align-items: center;
-    padding: 0 8px;
+    padding: 0 var(--bo-cell-pad, 8px);
     height: 100%;
-    font-size: 13px;
+    font-size: var(--bo-font-size, 13px);
     line-height: 1.4;
     overflow: hidden;
     white-space: nowrap;

package/dist/grid/Grid.svelte

@@ -1803,6 +1803,15 @@
     --bo-header-h: var(--bo-grid-header-h, 28px);
     --bo-mono: var(--bo-grid-mono, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace);
     --bo-sans: var(--bo-grid-sans, Inter, "Segoe UI", system-ui, sans-serif);
+    /* Layout/density tokens (override via --bo-grid-* for a custom look). */
+    --bo-radius: var(--bo-grid-radius, 8px);
+    --bo-font-size: var(--bo-grid-font-size, 13px);
+    --bo-cell-pad: var(--bo-grid-cell-pad, 8px);
+
+    /* Theme native controls (checkboxes, date pickers, number spinners, search
+       clear buttons, scrollbars) and accent fills to match the grid theme. */
+    color-scheme: var(--bo-grid-scheme, dark);
+    accent-color: var(--bo-up);
 
     display: flex;
     flex-direction: column;
@@ -1810,7 +1819,7 @@
     font-family: var(--bo-sans);
     background: var(--bo-bg);
     border: 0.5px solid var(--bo-border);
-    border-radius: 8px;
+    border-radius: var(--bo-radius);
     overflow: hidden;
     outline: none;
   }
@@ -1893,7 +1902,7 @@
     display: flex;
     align-items: center;
     gap: 4px;
-    padding: 0 8px;
+    padding: 0 var(--bo-cell-pad, 8px);
     min-width: 0;
     font: inherit;
     font-size: 11px;
@@ -2037,6 +2046,26 @@
     overflow-y: auto;
     overflow-x: hidden;
     user-select: none;
+    /* Thin, themed scrollbars (Firefox) — Chromium/Safari below. */
+    scrollbar-width: thin;
+    scrollbar-color: color-mix(in srgb, var(--bo-text-dim) 55%, transparent) transparent;
+  }
+  .viewport::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+  }
+  .viewport::-webkit-scrollbar-thumb {
+    background: color-mix(in srgb, var(--bo-text-dim) 45%, transparent);
+    border: 2px solid transparent;
+    background-clip: padding-box;
+    border-radius: 6px;
+  }
+  .viewport::-webkit-scrollbar-thumb:hover {
+    background: color-mix(in srgb, var(--bo-text-dim) 70%, transparent);
+    background-clip: padding-box;
+  }
+  .viewport::-webkit-scrollbar-corner {
+    background: transparent;
   }
   .empty {
     position: absolute;

package/dist/grid/theme.d.ts

@@ -20,6 +20,16 @@ export interface GridTheme {
     headerH?: string;
     mono?: string;
     sans?: string;
+    /** Native-control color scheme: themes checkboxes, date pickers, number
+        spinners, search-clear buttons and scrollbars. Defaults to dark. */
+    scheme?: 'light' | 'dark';
+    /** Outer corner radius (e.g. '8px', '0', '14px'). Default 8px. */
+    radius?: string;
+    /** Cell/row font size (e.g. '13px', '12px'). Default 13px. */
+    fontSize?: string;
+    /** Horizontal cell padding — the main density lever (e.g. '8px', '12px').
+        Pair with `rowHeight` for a fully compact or roomy look. Default 8px. */
+    cellPad?: string;
 }
 /** Serialize a theme to a CSS `--bo-grid-*: …;` declaration string. */
 export declare function themeVars(theme: GridTheme): string;

package/dist/grid/theme.js

@@ -15,6 +15,10 @@ const VARS = {
     headerH: '--bo-grid-header-h',
     mono: '--bo-grid-mono',
     sans: '--bo-grid-sans',
+    scheme: '--bo-grid-scheme',
+    radius: '--bo-grid-radius',
+    fontSize: '--bo-grid-font-size',
+    cellPad: '--bo-grid-cell-pad',
 };
 /** Serialize a theme to a CSS `--bo-grid-*: …;` declaration string. */
 export function themeVars(theme) {
@@ -40,6 +44,7 @@ export const darkTheme = {
     amber: '#f59e0b',
     selFill: 'rgba(99,102,241,0.16)',
     selBorder: '#6366f1',
+    scheme: 'dark',
 };
 // A deliberate light palette (not an inverted dark one): near-white surfaces,
 // stronger green/red for contrast on light, subtle borders.
@@ -57,4 +62,5 @@ export const lightTheme = {
     amber: '#d97706',
     selFill: 'rgba(99,102,241,0.12)',
     selBorder: '#6366f1',
+    scheme: 'light',
 };

package/dist/sparkline/Sparkline.svelte

@@ -16,7 +16,13 @@
   // sparklines run this, so the realtime feed never repaints off-screen charts.
   $effect(() => {
     const ctx = setupHiDpiCanvas(canvas, width, height);
-    drawCandles(ctx, candles, width, height);
+    // Pull the grid's up/down colors so candles follow the active theme
+    // (inherited --bo-up/--bo-down; falls back to the built-in defaults).
+    const cs = getComputedStyle(canvas);
+    drawCandles(ctx, candles, width, height, {
+      up: cs.getPropertyValue('--bo-up').trim() || undefined,
+      down: cs.getPropertyValue('--bo-down').trim() || undefined,
+    });
   });
 
   const label = $derived(summarize(candles));
@@ -66,7 +72,7 @@
     font-family: var(--bo-mono, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace);
     font-size: 10px;
     color: var(--bo-text, #e5e5e5);
-    background: #000;
+    background: var(--bo-header-bg, #0f0f0f);
     border: 0.5px solid var(--bo-border, rgba(255, 255, 255, 0.12));
     border-radius: 4px;
     pointer-events: none;

package/dist/sparkline/sparkline-render.d.ts

@@ -9,7 +9,10 @@ export declare function setupHiDpiCanvas(canvas: HTMLCanvasElement, cssW: number
  * Draw compact candlesticks. Body shows open→close, wick shows low→high.
  * Color by per-candle direction. Canvas (not SVG) so 100+ of these stay cheap.
  */
-export declare function drawCandles(ctx: CanvasRenderingContext2D, candles: Candle[], w: number, h: number): void;
+export declare function drawCandles(ctx: CanvasRenderingContext2D, candles: Candle[], w: number, h: number, colors?: {
+    up?: string;
+    down?: string;
+}): void;
 /** Screen-reader text — canvas alone is invisible to AT, so we narrate trend. */
 export declare function summarize(candles: Candle[]): string;
 /** Which candle index sits under an x offset (for hover tooltips). */

package/dist/sparkline/sparkline-render.js

@@ -37,10 +37,12 @@ function yOf(price, ext, h, pad) {
  * Draw compact candlesticks. Body shows open→close, wick shows low→high.
  * Color by per-candle direction. Canvas (not SVG) so 100+ of these stay cheap.
  */
-export function drawCandles(ctx, candles, w, h) {
+export function drawCandles(ctx, candles, w, h, colors = {}) {
     ctx.clearRect(0, 0, w, h);
     if (candles.length === 0)
         return;
+    const upColor = colors.up || UP;
+    const downColor = colors.down || DOWN;
     const ext = priceExtent(candles);
     const pad = 2;
     const n = candles.length;
@@ -50,8 +52,8 @@ export function drawCandles(ctx, candles, w, h) {
         const c = candles[i];
         const cx = i * slot + slot / 2;
         const up = c.close >= c.open;
-        ctx.strokeStyle = up ? UP : DOWN;
-        ctx.fillStyle = up ? UP : DOWN;
+        ctx.strokeStyle = up ? upColor : downColor;
+        ctx.fillStyle = up ? upColor : downColor;
         // wick
         ctx.beginPath();
         ctx.moveTo(Math.round(cx) + 0.5, yOf(c.high, ext, h, pad));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bo-grid",
-  "version": "0.7.0",
+  "version": "0.8.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.",