bo-grid 0.8.0 → 0.21.0

package/dist/format/format.js

@@ -23,3 +23,44 @@ export function fmtDate(ms, style = 'medium') {
         : { month: 'short', day: 'numeric', year: 'numeric' };
     return new Date(ms).toLocaleDateString('en-US', opts);
 }
+/** Localized currency (e.g. `$1,234.50`). Falls back to a fixed-decimal number
+    if the ISO `currency` code is unsupported. */
+export function fmtCurrency(v, currency = 'USD', locale = 'en-US', decimals) {
+    if (!Number.isFinite(v))
+        return '';
+    const fd = decimals != null ? { minimumFractionDigits: decimals, maximumFractionDigits: decimals } : {};
+    try {
+        return new Intl.NumberFormat(locale, { style: 'currency', currency, ...fd }).format(v);
+    }
+    catch {
+        return v.toFixed(decimals ?? 2);
+    }
+}
+// Coarse relative-time thresholds (seconds → unit divisor + label).
+const RT = [
+    [3600, 60, 'min'],
+    [86_400, 3600, 'hour'],
+    [604_800, 86_400, 'day'],
+    [2_629_800, 604_800, 'week'],
+    [31_557_600, 2_629_800, 'month'],
+    [Infinity, 31_557_600, 'year'],
+];
+/** Human relative time vs `now` (default: real now) — e.g. `3 hours ago`,
+    `in 2 days`. `ms` is an epoch timestamp. Deterministic when `now` is passed. */
+export function relativeTime(ms, now = Date.now()) {
+    if (!Number.isFinite(ms))
+        return '';
+    const secs = Math.round((now - ms) / 1000); // >0 = past
+    const past = secs >= 0;
+    const a = Math.abs(secs);
+    if (a < 45)
+        return past ? 'just now' : 'soon';
+    for (const [ceil, div, unit] of RT) {
+        if (a < ceil) {
+            const n = Math.floor(a / div);
+            const label = `${n} ${unit}${n === 1 ? '' : 's'}`;
+            return past ? `${label} ago` : `in ${label}`;
+        }
+    }
+    return '';
+}

package/dist/grid/Cell.svelte

@@ -1,7 +1,18 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
   import type { ColumnDef, GridRow } from './column';
-  import { formatCell, colStyle, candlesOf, isNumeric } from './column';
+  import {
+    formatCell,
+    colStyle,
+    candlesOf,
+    isNumeric,
+    cellValue,
+    dataBarGeometry,
+    colorScaleBackground,
+    pickIcon,
+    toneColor,
+    safeHref,
+  } from './column';
   import { heatColor } from './heatmap';
   import Sparkline from '../sparkline/Sparkline.svelte';
 
@@ -21,6 +32,7 @@
     seed = null,
     fillCorner = false,
     fillpreview = false,
+    cfRange = null,
     colIndex,
     cellId,
     cellSnippet,
@@ -54,6 +66,9 @@
     fillCorner?: boolean;
     /** This cell is inside the in-progress fill drag's preview range. */
     fillpreview?: boolean;
+    /** Conditional-formatting data extent (min/max over the view) for this
+        column; null when the column has no `dataBar`/`colorScale`. */
+    cfRange?: { min: number; max: number } | null;
     colIndex?: number;
     cellId?: string;
     cellSnippet?: Snippet<[{ row: GridRow; column: ColumnDef; value: unknown }]>;
@@ -70,6 +85,16 @@
     onFillStart?: () => void;
   } = $props();
 
+  // Avatar initials: first letters of the first two words.
+  function initials(name: string): string {
+    return name
+      .split(/\s+/)
+      .filter(Boolean)
+      .slice(0, 2)
+      .map((w) => w[0]?.toUpperCase() ?? '')
+      .join('');
+  }
+
   let cancelled = false;
   function focusSelect(node: HTMLInputElement) {
     node.focus();
@@ -103,8 +128,9 @@
 
   // Dynamic field read. row is a runes class instance, so row[col.key] still
   // goes through the $state getter — fine-grained reactivity is preserved even
-  // though the key is only known at runtime.
-  const value = $derived(row[col.key]);
+  // though the key is only known at runtime. Computed columns derive from the
+  // whole row via cellValue (their value() reads the row's $state getters too).
+  const value = $derived(cellValue(col, row));
   // Typed inline editor: date columns edit with a date picker, numeric columns
   // with a numeric input; everything else stays a text input.
   const editorType = $derived(col.type === 'date' ? 'date' : isNumeric(col) ? 'number' : 'text');
@@ -113,7 +139,9 @@
       ? new Date(Number(value)).toISOString().slice(0, 10)
       : String(value ?? ''),
   );
-  const kind = $derived(col.type === 'text' ? 'text' : col.type === 'sparkline' ? 'spark' : 'num');
+  // Alignment kind: numbers right-align (tabular); sparkline + text-like rich
+  // types (tags/badge/boolean/avatar) left-align.
+  const kind = $derived(col.type === 'sparkline' ? 'spark' : isNumeric(col) ? 'num' : 'text');
   // Optional per-column cell class (static string or value/row function).
   const extraClass = $derived(
     typeof col.cellClass === 'function' ? (col.cellClass(value, row) ?? '') : (col.cellClass ?? ''),
@@ -125,14 +153,36 @@
       : undefined,
   );
 
+  // ---- Conditional formatting (v0.10): data bar + icon set ----
+  // Geometry/threshold logic lives in column.ts (pure, unit-tested); here we map
+  // it to CSS (left/width %, tone → colour).
+  const hasCf = $derived(!!col.dataBar || !!col.icons);
+  const bar = $derived.by(() => {
+    if (!col.dataBar || !cfRange) return null;
+    const g = dataBarGeometry(value, cfRange, col.dataBar);
+    if (!g) return null;
+    const color = g.negative ? (col.dataBar.negative ?? 'var(--bo-down)') : (col.dataBar.color ?? 'var(--bo-up)');
+    return { left: `${g.left * 100}%`, width: `${g.width * 100}%`, color };
+  });
+  const icon = $derived.by(() => {
+    const pick = col.icons ? pickIcon(value, col.icons) : null;
+    return pick ? { icon: pick.icon, color: toneColor(pick.tone) } : null;
+  });
+  // Colour-scale cell tint (applied as a cell background in cellStyle).
+  const scaleBg = $derived(col.colorScale && cfRange ? colorScaleBackground(value, cfRange, col.colorScale) : null);
+
   function cellStyle(): string {
     let s = width != null ? `flex:0 0 ${width}px;width:${width}px;` : colStyle(col);
-    if (col.type === 'heatmap') s += `background:${heatColor(Number(value), col.min, col.max)};`;
+    // Conditional background: heatmap type, else a colour-scale tint (both translucent).
+    const bg = col.type === 'heatmap' ? heatColor(Number(value), col.min, col.max) : scaleBg;
     if (pinned) {
       s += `position:sticky;${pinSide}:${pinOffset}px;z-index:1;`;
-      // Pinned cells must be opaque to cover scrolled content. Heatmap already
-      // set a background; otherwise match the (alternating) row colour.
-      if (col.type !== 'heatmap') s += `background:var(${alt ? '--bo-row-a' : '--bo-row-b'});`;
+      // Pinned cells must be opaque to cover scrolled content — layer any
+      // translucent tint over the (alternating) row colour.
+      const rowBg = `var(${alt ? '--bo-row-a' : '--bo-row-b'})`;
+      s += bg ? `background:linear-gradient(${bg},${bg}),${rowBg};` : `background:${rowBg};`;
+    } else if (bg) {
+      s += `background:${bg};`;
     }
     return s;
   }
@@ -223,8 +273,55 @@
     {#if cellSnippet}{@render cellSnippet({ row, column: col, value })}{:else}{value ?? ''}{/if}
   {:else if col.type === 'sparkline'}
     <Sparkline candles={candlesOf(row, col.sparkKey)} />
+  {:else if col.type === 'progress'}
+    {@const lo = col.min ?? 0}
+    {@const pct = Math.max(0, Math.min(100, (((Number(value) || 0) - lo) / (((col.max ?? 100) - lo) || 1)) * 100))}
+    <span class="bo-progress" title={String(value ?? '')}>
+      <span class="bo-progress-fill" style="width:{pct}%"></span>
+    </span>
+  {:else if col.type === 'rating'}
+    {@const rmax = col.max ?? 5}
+    {@const r = Math.max(0, Math.min(rmax, Math.round(Number(value) || 0)))}
+    <span class="bo-rating" aria-label="{r} out of {rmax}">
+      <span class="bo-stars-on">{'★'.repeat(r)}</span><span class="bo-stars-off">{'★'.repeat(rmax - r)}</span>
+    </span>
+  {:else if col.type === 'tags'}
+    {@const tags = Array.isArray(value) ? value : String(value ?? '').split(',').map((s) => s.trim()).filter(Boolean)}
+    <span class="bo-tags">{#each tags as t (t)}<span class="bo-tag">{t}</span>{/each}</span>
+  {:else if col.type === 'badge'}
+    <span class="bo-badge bo-badge-{col.tones?.[String(value)] ?? 'neutral'}">{value ?? ''}</span>
+  {:else if col.type === 'boolean'}
+    {#if value}
+      <span class="bo-bool bo-bool-yes">✓{#if col.trueLabel}&nbsp;{col.trueLabel}{/if}</span>
+    {:else}
+      <span class="bo-bool bo-bool-no">✕{#if col.falseLabel}&nbsp;{col.falseLabel}{/if}</span>
+    {/if}
+  {:else if col.type === 'avatar'}
+    <span class="bo-avatar" aria-hidden="true">{initials(String(value ?? ''))}</span>
+    <span class="bo-avatar-name">{value ?? ''}{#if col.sub}<em>{row[col.sub]}</em>{/if}</span>
+  {:else if col.type === 'link'}
+    {@const href = safeHref(col.href ? col.href(row) : String(value ?? ''))}
+    {#if href}<a
+        class="bo-link"
+        {href}
+        target={col.newTab ? '_blank' : undefined}
+        rel={col.newTab ? 'noopener noreferrer' : undefined}
+        onpointerdown={(e) => e.stopPropagation()}
+        onclick={(e) => e.stopPropagation()}>{value ?? ''}</a>{:else}{value ?? ''}{/if}
   {:else if col.type === 'text'}
     <strong>{formatCell(col, value, row)}</strong>{#if col.sub}<em>{row[col.sub]}</em>{/if}
+  {:else if hasCf}
+    {#if bar}<span class="bo-databar" style="left:{bar.left};width:{bar.width};background:{bar.color}"></span>{/if}
+    {#key col.flash ? row.flashSeq : 0}
+      <span
+        class="bo-cf-val"
+        class:flash={col.flash}
+        class:up={col.flash && row.flashDir === 'up'}
+        class:down={col.flash && row.flashDir === 'down'}
+      >
+        {#if icon}<span class="bo-cf-icon" style="color:{icon.color}">{icon.icon}</span>{/if}{formatCell(col, value, row)}
+      </span>
+    {/key}
   {:else if col.flash}
     {#key row.flashSeq}
       <span class="flash {row.flashDir}">{formatCell(col, value, row)}</span>
@@ -267,6 +364,141 @@
   .text {
     gap: 6px;
   }
+
+  /* ---- Rich cell types (v0.9) — all colours from theme tokens ---- */
+  .bo-progress {
+    flex: 1;
+    min-width: 36px;
+    height: 6px;
+    border-radius: 999px;
+    background: var(--bo-row-hover);
+    overflow: hidden;
+  }
+  .bo-progress-fill {
+    display: block;
+    height: 100%;
+    background: var(--bo-up);
+    border-radius: 999px;
+  }
+  .bo-rating {
+    letter-spacing: 1px;
+    white-space: nowrap;
+  }
+  .bo-stars-on {
+    color: var(--bo-amber);
+  }
+  .bo-stars-off {
+    color: var(--bo-border);
+  }
+  .bo-tags {
+    display: flex;
+    gap: 4px;
+    overflow: hidden;
+  }
+  .bo-tag {
+    padding: 1px 7px;
+    font-size: 11px;
+    color: var(--bo-text-dim);
+    background: var(--bo-row-hover);
+    border: 0.5px solid var(--bo-border);
+    border-radius: 999px;
+    white-space: nowrap;
+  }
+  .bo-badge {
+    padding: 2px 9px;
+    font-size: 11px;
+    font-weight: 600;
+    border-radius: 999px;
+    white-space: nowrap;
+  }
+  .bo-badge-up {
+    color: var(--bo-up);
+    background: color-mix(in srgb, var(--bo-up) 15%, transparent);
+  }
+  .bo-badge-down {
+    color: var(--bo-down);
+    background: color-mix(in srgb, var(--bo-down) 15%, transparent);
+  }
+  .bo-badge-amber {
+    color: var(--bo-amber);
+    background: color-mix(in srgb, var(--bo-amber) 15%, transparent);
+  }
+  .bo-badge-info {
+    color: var(--bo-sel-border);
+    background: color-mix(in srgb, var(--bo-sel-border) 15%, transparent);
+  }
+  .bo-badge-neutral {
+    color: var(--bo-text-dim);
+    background: var(--bo-row-hover);
+  }
+  .bo-link {
+    color: var(--bo-sel-border);
+    text-decoration: none;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .bo-link:hover {
+    text-decoration: underline;
+  }
+  .bo-bool-yes {
+    color: var(--bo-up);
+    font-weight: 600;
+  }
+  .bo-bool-no {
+    color: var(--bo-text-dim);
+  }
+  .bo-avatar {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: 0 0 auto;
+    width: 22px;
+    height: 22px;
+    font-size: 9px;
+    font-weight: 700;
+    color: var(--bo-bg);
+    background: var(--bo-text-dim);
+    border-radius: 50%;
+  }
+  .bo-avatar-name {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .bo-avatar-name em {
+    margin-left: 6px;
+    font-style: normal;
+    font-size: 11px;
+    color: var(--bo-text-dim);
+  }
+
+  /* ---- Conditional formatting (v0.10): data bars + icon sets ---- */
+  .bo-databar {
+    position: absolute;
+    top: 50%;
+    height: 62%;
+    transform: translateY(-50%);
+    border-radius: 2px;
+    opacity: 0.22;
+    z-index: 0;
+    pointer-events: none;
+  }
+  /* Value sits above its data bar; carries the (optional) flash colour. */
+  .bo-cf-val {
+    position: relative;
+    z-index: 1;
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .bo-cf-icon {
+    flex: none;
+    font-size: 11px;
+    line-height: 1;
+  }
   .text strong {
     font-family: var(--bo-mono);
     font-weight: 600;
@@ -301,6 +533,13 @@
     color: var(--bo-text);
     background: var(--bo-row-hover);
   }
+  /* Visible keyboard focus (WCAG 2.4.7). */
+  .tree-toggle:focus-visible,
+  .bo-link:focus-visible {
+    outline: 2px solid var(--bo-sel-border);
+    outline-offset: -1px;
+    border-radius: 3px;
+  }
   .tree-leaf {
     display: inline-block;
     width: 18px;

package/dist/grid/Cell.svelte.d.ts

@@ -21,6 +21,12 @@ type $$ComponentProps = {
     fillCorner?: boolean;
     /** This cell is inside the in-progress fill drag's preview range. */
     fillpreview?: boolean;
+    /** Conditional-formatting data extent (min/max over the view) for this
+        column; null when the column has no `dataBar`/`colorScale`. */
+    cfRange?: {
+        min: number;
+        max: number;
+    } | null;
     colIndex?: number;
     cellId?: string;
     cellSnippet?: Snippet<[{

package/dist/grid/FilterMenu.svelte

@@ -255,6 +255,13 @@
   .bo-fm-btn:hover {
     color: var(--bo-text);
   }
+  /* Visible keyboard focus (WCAG 2.4.7) for the menu's custom buttons. */
+  .bo-fm-btn:focus-visible,
+  .bo-fm-link:focus-visible {
+    outline: 2px solid var(--bo-sel-border);
+    outline-offset: 1px;
+    border-radius: 5px;
+  }
   .bo-fm-apply {
     color: #0a0a0a;
     background: var(--bo-up);