@w5-ui/svelte 0.1.0

package/src/lib/components/KanbanBoard.svelte

@@ -0,0 +1,141 @@
+<script lang="ts">
+  export interface KanbanCard {
+    id: string;
+    title: string;
+    subtitle?: string;
+    meta?: string;
+  }
+
+  export interface KanbanColumn {
+    id: string;
+    title: string;
+    color?: string;
+    cards: KanbanCard[];
+  }
+
+  export let columns: KanbanColumn[];
+  export let onCardMove: ((cardId: string, fromColId: string, toColId: string) => void) | undefined = undefined;
+  export let ariaLabel: string = 'Kanban board';
+
+  let announce = '';
+  let grabbed: { cardId: string; colId: string } | null = null;
+  let dragSrc: { cardId: string; colId: string } | null = null;
+  let dragOverCol: string | null = null;
+  let cardRefs: Record<string, HTMLButtonElement> = {};
+
+  const announceId = `kanban-announce-${Math.random().toString(36).slice(2, 9)}`;
+
+  function say(msg: string) { announce = msg; }
+
+  function colOf(cardId: string): KanbanColumn | undefined {
+    return columns.find(c => c.cards.some(k => k.id === cardId));
+  }
+
+  function handleKeyDown(e: KeyboardEvent, card: KanbanCard, col: KanbanColumn) {
+    if (e.key === ' ' || e.key === 'Enter') {
+      e.preventDefault();
+      if (grabbed?.cardId === card.id) {
+        grabbed = null;
+        say(`Dropped ${card.title} in ${col.title}.`);
+      } else {
+        grabbed = { cardId: card.id, colId: col.id };
+        say(`Picked up ${card.title} from ${col.title}. Use left/right arrows to move between columns, Space to drop, Escape to cancel.`);
+      }
+    } else if (e.key === 'Escape' && grabbed?.cardId === card.id) {
+      e.preventDefault();
+      grabbed = null;
+      say('Move cancelled.');
+    } else if ((e.key === 'ArrowLeft' || e.key === 'ArrowRight') && grabbed?.cardId === card.id) {
+      e.preventDefault();
+      const idx = columns.findIndex(c => c.id === grabbed!.colId);
+      const nextIdx = e.key === 'ArrowLeft' ? idx - 1 : idx + 1;
+      if (nextIdx < 0 || nextIdx >= columns.length) return;
+      const nextCol = columns[nextIdx];
+      onCardMove?.(card.id, grabbed!.colId, nextCol.id);
+      grabbed = { cardId: card.id, colId: nextCol.id };
+      say(`Moved ${card.title} to ${nextCol.title}.`);
+      setTimeout(() => { cardRefs[card.id]?.focus(); }, 0);
+    }
+  }
+
+  function handleDragStart(e: DragEvent, cardId: string, colId: string) {
+    if (e.dataTransfer) e.dataTransfer.effectAllowed = 'move';
+    dragSrc = { cardId, colId };
+  }
+
+  function handleDragOver(e: DragEvent, colId: string) {
+    e.preventDefault();
+    if (e.dataTransfer) e.dataTransfer.dropEffect = 'move';
+    dragOverCol = colId;
+  }
+
+  function handleDrop(e: DragEvent, toColId: string) {
+    e.preventDefault();
+    if (!dragSrc || dragSrc.colId === toColId) { dragSrc = null; dragOverCol = null; return; }
+    const card = colOf(dragSrc.cardId)?.cards.find(c => c.id === dragSrc!.cardId);
+    const toCol = columns.find(c => c.id === toColId);
+    onCardMove?.(dragSrc.cardId, dragSrc.colId, toColId);
+    if (card && toCol) say(`Moved ${card.title} to ${toCol.title}.`);
+    dragSrc = null;
+    dragOverCol = null;
+  }
+</script>
+
+<div class="kanban" role="region" aria-label={ariaLabel}>
+  <span
+    id={announceId}
+    role="status"
+    aria-live="assertive"
+    aria-atomic="true"
+    class="sr-only"
+  >{announce}</span>
+
+  <div class="kanban-board" role="list">
+    {#each columns as col (col.id)}
+      <div
+        class="kanban-col"
+        class:kanban-col--over={dragOverCol === col.id}
+        role="listitem"
+        on:dragover={e => handleDragOver(e, col.id)}
+        on:dragleave={() => { dragOverCol = null; }}
+        on:drop={e => handleDrop(e, col.id)}
+      >
+        <div class="kanban-col-header">
+          {#if col.color}
+            <span class="kanban-col-dot" style="background:{col.color}" aria-hidden="true" />
+          {/if}
+          <span class="kanban-col-title">{col.title}</span>
+          <span class="kanban-col-count" aria-label="{col.cards.length} card{col.cards.length !== 1 ? 's' : ''}">
+            {col.cards.length}
+          </span>
+        </div>
+
+        <ul class="kanban-cards" aria-label="{col.title} cards">
+          {#each col.cards as card (card.id)}
+            {@const isGrabbed = grabbed?.cardId === card.id}
+            <li class="kanban-card-item" class:is-grabbed={isGrabbed}>
+              <button
+                bind:this={cardRefs[card.id]}
+                type="button"
+                class="kanban-card"
+                draggable={true}
+                aria-pressed={isGrabbed}
+                aria-label="{card.title}{card.subtitle ? `, ${card.subtitle}` : ''}{card.meta ? `, ${card.meta}` : ''}. {isGrabbed ? 'Moving. Use arrow keys to change column, Space to drop, Escape to cancel.' : 'Press Space to move.'}"
+                on:keydown={e => handleKeyDown(e, card, col)}
+                on:dragstart={e => handleDragStart(e, card.id, col.id)}
+                on:dragend={() => { dragSrc = null; dragOverCol = null; }}
+              >
+                <span class="kanban-card-title">{card.title}</span>
+                {#if card.subtitle}<span class="kanban-card-sub">{card.subtitle}</span>{/if}
+                {#if card.meta}<span class="kanban-card-meta">{card.meta}</span>{/if}
+              </button>
+            </li>
+          {/each}
+          {#if col.cards.length === 0}
+            <li class="kanban-empty" role="note" aria-label="{col.title} is empty">Empty</li>
+          {/if}
+        </ul>
+      </div>
+    {/each}
+  </div>
+</div>

package/src/lib/components/Kbd.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  export let keys: string | string[];
+  let className = '';
+  export { className as class };
+
+  $: parts = typeof keys === 'string' ? keys.split('+') : keys;
+</script>
+
+<kbd class="kbd {className}">
+  {#each parts as key, i}
+    <span class="kbd__segment">
+      {#if i > 0}<span class="kbd__plus" aria-hidden="true">+</span>{/if}
+      <kbd class="kbd__key">{key}</kbd>
+    </span>
+  {/each}
+</kbd>

package/src/lib/components/LineChart.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+  export interface LineChartSeries {
+    label: string;
+    color: string;
+    values: number[];
+  }
+
+  export let series: LineChartSeries[] = [];
+  export let labels: string[] = [];
+  export let height: number = 160;
+  export let ariaLabel: string = 'Line chart';
+
+  const VW = 400;
+  const PAD = { t: 12, r: 8, b: 28, l: 8 };
+
+  $: allValues = series.flatMap((s) => s.values);
+  $: minV = allValues.length ? Math.min(...allValues) : 0;
+  $: maxV = allValues.length ? Math.max(...allValues) : 1;
+  $: range = maxV - minV || 1;
+  $: chartW = VW - PAD.l - PAD.r;
+  $: chartH = height - PAD.t - PAD.b;
+  $: n = series[0]?.values.length ?? 0;
+
+  function toX(i: number): number {
+    return PAD.l + (n > 1 ? (i / (n - 1)) * chartW : chartW / 2);
+  }
+  function toY(v: number): number {
+    return PAD.t + chartH - ((v - minV) / range) * chartH;
+  }
+
+  $: gridLines = [0, 0.25, 0.5, 0.75, 1].map((f) => PAD.t + (1 - f) * chartH);
+
+  $: paths = series.map((s) => {
+    const pts = s.values.map((v, i) => `${toX(i).toFixed(1)},${toY(v).toFixed(1)}`);
+    return { color: s.color, label: s.label, d: `M ${pts.join(' L ')}` };
+  });
+
+  $: areas = series.map((s) => {
+    const pts = s.values.map((v, i) => `${toX(i).toFixed(1)},${toY(v).toFixed(1)}`);
+    const bot = (PAD.t + chartH).toFixed(1);
+    return {
+      color: s.color,
+      label: s.label,
+      d: `M ${toX(0).toFixed(1)},${bot} L ${pts.join(' L ')} L ${toX(n - 1).toFixed(1)},${bot} Z`,
+    };
+  });
+</script>
+
+<div role="img" aria-label={ariaLabel} style="width:100%;">
+  <svg viewBox="0 0 {VW} {height}" style="width:100%;height:auto;display:block;" aria-hidden="true" focusable="false">
+    {#each gridLines as y}
+      <line x1={PAD.l} y1={y} x2={VW - PAD.r} y2={y} stroke="rgba(255,255,255,0.06)" stroke-width="1" />
+    {/each}
+    {#each areas as s (s.label)}
+      <path d={s.d} fill={s.color} fill-opacity="0.1" />
+    {/each}
+    {#each paths as s (s.label)}
+      <path d={s.d} fill="none" stroke={s.color} stroke-width="2" stroke-linejoin="round" stroke-linecap="round" />
+    {/each}
+    {#if labels.length > 0}
+      {#each labels as lbl, i}
+        {@const x = PAD.l + (labels.length > 1 ? (i / (labels.length - 1)) * chartW : chartW / 2)}
+        <text x={x} y={height - 4} text-anchor="middle" fill="#6E7079" font-size="9">{lbl}</text>
+      {/each}
+    {/if}
+  </svg>
+</div>

package/src/lib/components/LogViewer.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">
+  import { afterUpdate } from 'svelte';
+
+  export interface LogEntry {
+    id?: string;
+    timestamp: string;
+    level: 'info' | 'warn' | 'error' | 'debug';
+    category?: string;
+    event: string;
+    subject?: string;
+    detail?: string;
+  }
+
+  export let entries: LogEntry[] = [];
+  export let height: number = 360;
+  export let defaultFollow: boolean = true;
+  export let ariaLabel: string = 'Log entries';
+  export let className: string = '';
+
+  let follow = defaultFollow;
+  let bodyEl: HTMLDivElement;
+
+  const SEV_DOT: Record<string, string> = {
+    error: '#F03A3A',
+    warn: '#F5A623',
+    info: '#006FFF',
+    debug: '#4A4B53',
+  };
+
+  afterUpdate(() => {
+    if (follow && bodyEl) bodyEl.scrollTop = bodyEl.scrollHeight;
+  });
+</script>
+
+<div class="lv {className}">
+  <div class="lv__toolbar">
+    <span class="lv__count">{entries.length} entries</span>
+    <button
+      type="button"
+      class="lv__follow{follow ? ' lv__follow--on' : ''}"
+      on:click={() => { follow = !follow; }}
+      aria-pressed={follow}
+    >Follow</button>
+  </div>
+  <div
+    bind:this={bodyEl}
+    role="log"
+    aria-live="polite"
+    aria-label={ariaLabel}
+    class="lv__body"
+    style="height:{height}px;"
+  >
+    <table class="lv__table">
+      <caption class="sr-only">{ariaLabel}</caption>
+      <thead>
+        <tr>
+          <th scope="col">Severity</th>
+          <th scope="col">Source</th>
+          <th scope="col">Time</th>
+          <th scope="col">Event</th>
+          <th scope="col">Subject</th>
+          <th scope="col">Detail</th>
+        </tr>
+      </thead>
+      <tbody>
+        {#each entries as e, i (e.id ?? i)}
+          <tr>
+            <td>
+              <span class="lv__sev lv__sev--{e.level}">
+                <span class="lv__dot" style="background:{SEV_DOT[e.level] ?? SEV_DOT.info};" aria-hidden="true"></span>
+                {e.level === 'error' ? 'crit' : e.level}
+              </span>
+            </td>
+            <td class="lv__cat">{e.category ?? ''}</td>
+            <td class="lv__time">{e.timestamp}</td>
+            <td class="lv__event">{e.event}</td>
+            <td class="lv__subject">{e.subject ?? ''}</td>
+            <td class="lv__detail">{e.detail ?? ''}</td>
+          </tr>
+        {/each}
+      </tbody>
+    </table>
+  </div>
+</div>

package/src/lib/components/LollipopChart.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+  export interface LollipopItem {
+    label: string;
+    value: number;
+    color?: string;
+  }
+
+  export let items: LollipopItem[] = [];
+  export let unit: string = '';
+  export let color: string = '#006FFF';
+  export let ariaLabel: string = 'Lollipop chart';
+
+  const VW = 340;
+  const LABEL_W = 110;
+  const VAL_W = 36;
+  const PAD_R = 4;
+  const TRACK_W = VW - LABEL_W - VAL_W - PAD_R;
+  const DOT_R = 5;
+  const ROW_H = 26;
+  const PAD_T = 6;
+  const AXIS_H = 18;
+  const TICKS = 4;
+
+  $: maxVal = Math.max(...items.map((it) => it.value), 1);
+  $: svgH = PAD_T + items.length * ROW_H + AXIS_H;
+  $: ticks = Array.from({ length: TICKS + 1 }, (_, i) => Math.round((i / TICKS) * maxVal));
+
+  function tx(v: number): number {
+    return LABEL_W + (v / maxVal) * TRACK_W;
+  }
+</script>
+
+<div role="img" aria-label={ariaLabel} style="width:100%;">
+  <svg
+    viewBox="0 0 {VW} {svgH}"
+    style="width:100%;height:auto;display:block;"
+    aria-hidden="true"
+    focusable="false"
+  >
+    {#each ticks as t, i (i)}
+      <g>
+        <line
+          x1={tx(t)} y1={PAD_T}
+          x2={tx(t)} y2={PAD_T + items.length * ROW_H}
+          stroke="rgba(255,255,255,0.06)" stroke-width="1"
+        />
+        <text
+          x={tx(t)} y={PAD_T + items.length * ROW_H + 13}
+          fill="#6E7079" font-size="9" text-anchor="middle" font-family="inherit"
+        >{t}{unit}</text>
+      </g>
+    {/each}
+
+    {#each items as item, i (item.label)}
+      {@const cy = PAD_T + i * ROW_H + ROW_H / 2}
+      {@const cx = tx(item.value)}
+      {@const c = item.color ?? color}
+      <g>
+        <text
+          x={LABEL_W - 6} y={cy + 4}
+          fill="#A4A7B5" font-size="10" text-anchor="end" font-family="inherit"
+        >{item.label}</text>
+
+        <line
+          x1={LABEL_W} y1={cy}
+          x2={cx} y2={cy}
+          stroke={c} stroke-width="1.5" opacity="0.5"
+        />
+
+        <circle cx={cx} cy={cy} r={DOT_R} fill={c} />
+
+        <text
+          x={cx + DOT_R + 4} y={cy + 4}
+          fill="#A4A7B5" font-size="9" font-family="inherit"
+        >{item.value}{unit}</text>
+      </g>
+    {/each}
+  </svg>
+</div>

package/src/lib/components/MACInput.svelte

@@ -0,0 +1,98 @@
+<script context="module" lang="ts">
+  let counter = 0;
+</script>
+
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+
+  export let label: string | undefined = undefined;
+  export let value: string = '00:00:00:00:00:00';
+  export let disabled: boolean = false;
+  let className = '';
+  export { className as class };
+
+  const dispatch = createEventDispatcher<{ change: string }>();
+  const uid = `dash-ui-mac-${++counter}`;
+
+  const HEX_RE = /^[0-9a-fA-F]{0,2}$/;
+  const FULL_MAC_RE = /^([0-9a-fA-F]{2}[:\-]){5}[0-9a-fA-F]{2}$/;
+
+  function parseMAC(mac: string): [string, string, string, string, string, string] {
+    const parts = mac.replace(/-/g, ':').split(':');
+    return [
+      parts[0] ?? '00', parts[1] ?? '00', parts[2] ?? '00',
+      parts[3] ?? '00', parts[4] ?? '00', parts[5] ?? '00',
+    ];
+  }
+
+  let pairs: [string, string, string, string, string, string] = parseMAC(value);
+  let inputs: (HTMLInputElement | null)[] = [null, null, null, null, null, null];
+
+  function focusAt(i: number) {
+    const el = inputs[i];
+    if (el) { el.focus(); el.select(); }
+  }
+
+  function commitPair(i: number, raw: string) {
+    if (!HEX_RE.test(raw)) return;
+    pairs[i] = raw.toUpperCase();
+    pairs = pairs as [string, string, string, string, string, string];
+    value = pairs.join(':');
+    dispatch('change', value);
+    if (raw.length === 2 && i < 5) setTimeout(() => focusAt(i + 1), 0);
+  }
+
+  function handleKey(i: number, e: KeyboardEvent) {
+    const el = inputs[i]!;
+    if (e.key === ':' || e.key === '-') {
+      e.preventDefault();
+      if (i < 5) focusAt(i + 1);
+    } else if (e.key === 'ArrowRight' && el.selectionStart === el.value.length) {
+      if (i < 5) { e.preventDefault(); focusAt(i + 1); }
+    } else if (e.key === 'ArrowLeft' && el.selectionStart === 0) {
+      if (i > 0) { e.preventDefault(); focusAt(i - 1); }
+    } else if (e.key === 'Backspace' && el.value === '' && i > 0) {
+      e.preventDefault(); focusAt(i - 1);
+    }
+  }
+
+  function handlePaste(e: ClipboardEvent) {
+    const text = e.clipboardData?.getData('text').trim() ?? '';
+    if (FULL_MAC_RE.test(text)) {
+      e.preventDefault();
+      const normalized = text.replace(/-/g, ':').replace(/:/g, '').match(/.{1,2}/g)?.join(':') ?? text;
+      pairs = normalized.split(':').map((p) => p.toUpperCase()) as [string, string, string, string, string, string];
+      value = pairs.join(':');
+      dispatch('change', value);
+      setTimeout(() => focusAt(5), 0);
+    }
+  }
+</script>
+
+<div class="mac-input-wrapper {className}">
+  {#if label}
+    <label for="{uid}-0" class="mac-input__label">{label}</label>
+  {/if}
+  <div class="mac-input{disabled ? ' mac-input--disabled' : ''}" role="group" aria-label={label ?? 'MAC address'}>
+    {#each pairs as pair, i}
+      <input
+        bind:this={inputs[i]}
+        id={i === 0 ? `${uid}-0` : undefined}
+        type="text"
+        inputmode="text"
+        aria-label="Byte {i + 1} of 6"
+        value={pair}
+        {disabled}
+        maxlength={2}
+        class="mac-input__pair"
+        on:input={(e) => commitPair(i, e.currentTarget.value)}
+        on:keydown={(e) => handleKey(i, e)}
+        on:paste={handlePaste}
+        on:focus={(e) => e.currentTarget.select()}
+      />
+      {#if i < 5}
+        <span class="mac-input__colon" aria-hidden="true">:</span>
+      {/if}
+    {/each}
+  </div>
+</div>

package/src/lib/components/MarimekkoChart.svelte

@@ -0,0 +1,108 @@
+<script lang="ts">
+  export interface MarimekkoSegment {
+    label: string;
+    value: number;
+    color?: string;
+  }
+
+  export interface MarimekkoColumn {
+    label: string;
+    segments: MarimekkoSegment[];
+  }
+
+  export let columns: MarimekkoColumn[];
+  export let height = 160;
+  export let ariaLabel = 'Marimekko chart';
+
+  const PALETTE = ['#006FFF', '#00C875', '#F5A623', '#A78BFA', '#FF7B7B', '#00C8C8', '#FB923C'];
+  const VW = 340;
+  const LABEL_H = 22;
+  const GAP = 2;
+
+  interface Cell { x: number; y: number; w: number; h: number; color: string; label: string; }
+  interface Header { x: number; w: number; label: string; }
+
+  $: layout = (() => {
+    const colTotals = columns.map(col => col.segments.reduce((s, seg) => s + seg.value, 0));
+    const grandTotal = colTotals.reduce((s, t) => s + t, 0);
+    if (grandTotal === 0) return { cells: [] as Cell[], headers: [] as Header[] };
+
+    const chartH = height - LABEL_H;
+    const cells: Cell[] = [];
+    const headers: Header[] = [];
+
+    let cx = 0;
+    columns.forEach((col, ci) => {
+      const colTotal = colTotals[ci];
+      const colW = (colTotal / grandTotal) * VW;
+      headers.push({ x: cx, w: colW, label: col.label });
+
+      let sy = LABEL_H;
+      col.segments.forEach((seg, si) => {
+        const segH = colTotal > 0 ? (seg.value / colTotal) * chartH : 0;
+        cells.push({
+          x: cx, y: sy, w: colW, h: segH,
+          color: seg.color ?? PALETTE[si % PALETTE.length],
+          label: seg.label,
+        });
+        sy += segH;
+      });
+      cx += colW;
+    });
+    return { cells, headers };
+  })();
+</script>
+
+{#if layout.cells.length > 0}
+  <div role="img" aria-label={ariaLabel} style="width:100%;">
+    <svg viewBox="0 0 {VW} {height}" style="width:100%;height:auto;display:block;" aria-hidden="true" focusable="false">
+      {#each layout.headers as h, i (i)}
+        {#if h.w > GAP * 2}
+          <text
+            x={h.x + h.w / 2}
+            y={LABEL_H - 6}
+            text-anchor="middle"
+            font-size={Math.min(10, h.w / 6)}
+            fill="#A4A7B5"
+            font-family="inherit"
+          >{h.label}</text>
+        {/if}
+      {/each}
+      {#each layout.cells as cell, i (i)}
+        {#if cell.w > GAP * 2 && cell.h > GAP * 2}
+          <g>
+            <rect
+              x={cell.x + GAP / 2}
+              y={cell.y + GAP / 2}
+              width={Math.max(0, cell.w - GAP)}
+              height={Math.max(0, cell.h - GAP)}
+              fill={cell.color}
+              fill-opacity={0.8}
+              rx={2}
+            />
+            {#if cell.w > 36 && cell.h > 14}
+              <text
+                x={cell.x + cell.w / 2}
+                y={cell.y + cell.h / 2 + 4}
+                text-anchor="middle"
+                font-size={Math.min(9, (cell.w - GAP) / 8, cell.h - 6)}
+                fill="#fff"
+                font-family="inherit"
+              >{cell.label}</text>
+            {/if}
+          </g>
+        {/if}
+      {/each}
+      {#each layout.headers.slice(0, -1) as h, i (i)}
+        <line
+          x1={h.x + h.w}
+          y1={LABEL_H}
+          x2={h.x + h.w}
+          y2={height}
+          stroke="rgba(255,255,255,0.12)"
+          stroke-width={1}
+        />
+      {/each}
+    </svg>
+  </div>
+{/if}

package/src/lib/components/MatrixChart.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+  export let rows: string[] = [];
+  export let cols: string[] = [];
+  export let values: number[][] = [];
+  export let unit = '';
+  export let ariaLabel = 'Matrix chart';
+
+  const LEFT = 80;
+  const TOP = 60;
+  const CELL = 38;
+
+  function cellColor(t: number): string {
+    const alpha = 0.07 + t * 0.88;
+    return `rgba(0,111,255,${alpha.toFixed(2)})`;
+  }
+
+  function fmt(n: number): string {
+    if (n >= 1000) return `${(n / 1000).toFixed(1)}k`;
+    return String(n);
+  }
+
+  $: allVals = values.flat();
+  $: max = Math.max(...allVals, 1);
+  $: W = LEFT + cols.length * CELL;
+  $: H = TOP + rows.length * CELL;
+</script>
+
+<div role="img" aria-label={ariaLabel} style="width:100%;">
+  <svg viewBox="0 0 {W} {H}" style="width:100%;height:auto;display:block;" aria-hidden="true" focusable="false">
+    {#each cols as col, ci}
+      {@const cx = LEFT + ci * CELL + CELL / 2}
+      <text x={cx} y={TOP - 8} fill="#A4A7B5" font-size="10" text-anchor="end" font-family="inherit" transform="rotate(-40, {cx}, {TOP - 8})">{col}</text>
+    {/each}
+
+    {#each rows as row, ri}
+      {@const cy = TOP + ri * CELL + CELL / 2}
+      <text x={LEFT - 8} y={cy + 4} fill="#A4A7B5" font-size="10" text-anchor="end" font-family="inherit">{row}</text>
+    {/each}
+
+    {#each rows as _, ri}
+      {#each cols as _, ci}
+        {@const v = values[ri]?.[ci] ?? 0}
+        {@const t = v / max}
+        {@const x = LEFT + ci * CELL}
+        {@const y = TOP + ri * CELL}
+        {@const cx = x + CELL / 2}
+        {@const cy = y + CELL / 2}
+        <rect x={x + 1} y={y + 1} width={CELL - 2} height={CELL - 2} rx="3" fill={cellColor(t)} />
+        {#if v > 0}
+          <text x={cx} y={cy + 4} fill={t > 0.5 ? '#fff' : '#A4A7B5'} font-size="9" text-anchor="middle" font-family="inherit">{fmt(v)}{unit}</text>
+        {/if}
+      {/each}
+    {/each}
+  </svg>
+</div>