@w5-ui/svelte 0.1.0

package/src/lib/components/FlameGraph.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+  export interface FlameNode {
+    label: string;
+    value?: number;
+    color?: string;
+    children?: FlameNode[];
+  }
+
+  export let root: FlameNode;
+  export let height = 160;
+  export let ariaLabel = 'Flame graph';
+
+  const PALETTE = ['#006FFF', '#FF7B2E', '#F5A623', '#FB923C', '#F97316', '#EF4444', '#A78BFA'];
+  const VW = 340;
+  const GAP = 1.5;
+
+  interface FlatCell {
+    x: number; y: number; w: number; h: number;
+    label: string; color: string; depth: number;
+  }
+
+  function nodeValue(node: FlameNode): number {
+    if (node.children?.length) return node.children.reduce((s, c) => s + nodeValue(c), 0);
+    return node.value ?? 1;
+  }
+
+  function treeDepth(node: FlameNode): number {
+    if (!node.children?.length) return 0;
+    return 1 + Math.max(...node.children.map(treeDepth));
+  }
+
+  function flatten(node: FlameNode, x: number, depth: number, w: number, levelH: number, totalHeight: number, inheritColor: string, colorIdx: { n: number }): FlatCell[] {
+    let color = node.color ?? '';
+    if (!color) {
+      if (depth === 0) color = 'rgba(255,255,255,0.10)';
+      else if (depth === 1) color = PALETTE[colorIdx.n++ % PALETTE.length];
+      else color = inheritColor;
+    }
+    const y = totalHeight - (depth + 1) * levelH;
+    const cells: FlatCell[] = [{ x, y, w, h: levelH, label: node.label, color, depth }];
+    if (node.children?.length && w > 0) {
+      const total = nodeValue(node);
+      let cx = x;
+      for (const child of node.children) {
+        const cw = total > 0 ? (nodeValue(child) / total) * w : 0;
+        cells.push(...flatten(child, cx, depth + 1, cw, levelH, totalHeight, color, colorIdx));
+        cx += cw;
+      }
+    }
+    return cells;
+  }
+
+  $: depth = treeDepth(root);
+  $: levelH = height / (depth + 1);
+  $: cells = flatten(root, 0, 0, VW, levelH, height, PALETTE[0], { n: 0 });
+</script>
+
+{#if 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 cells as cell, i (i)}
+        {#if cell.w > 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={cell.depth === 0 ? 1 : cell.depth === 1 ? 0.7 : 0.85}
+              rx={2}
+            />
+            {#if cell.w > 32}
+              <text
+                x={cell.x + cell.w / 2}
+                y={cell.y + cell.h / 2 + 4}
+                text-anchor="middle"
+                font-size={Math.min(10, (cell.w - GAP) / 6, cell.h - 4)}
+                fill="#fff"
+                font-family="inherit"
+              >{cell.label}</text>
+            {/if}
+          </g>
+        {/if}
+      {/each}
+    </svg>
+  </div>
+{/if}

package/src/lib/components/ForceGraph.svelte

@@ -0,0 +1,104 @@
+<script lang="ts">
+  export interface FDNode {
+    id: string;
+    label?: string;
+    color?: string;
+    r?: number;
+  }
+  export interface FDLink {
+    source: string;
+    target: string;
+  }
+
+  export let nodes: FDNode[] = [];
+  export let links: FDLink[] = [];
+  export let height = 260;
+  export let ariaLabel = 'Force-directed network graph';
+
+  const PALETTE = ['#006FFF', '#00C875', '#FF7B7B', '#F5C26B', '#A78BFA', '#34D399'];
+  const VW = 340;
+  const ITERS = 300;
+
+  type State = { x: number; y: number; vx: number; vy: number };
+
+  function layout(W: number, H: number): { x: number; y: number }[] {
+    const idxById: Record<string, number> = {};
+    nodes.forEach((n, i) => { idxById[n.id] = i; });
+    const edges = links
+      .map((l) => [idxById[l.source], idxById[l.target]] as [number, number])
+      .filter(([a, b]) => a !== undefined && b !== undefined);
+
+    const cx = W / 2;
+    const cy = H / 2;
+    const step = (2 * Math.PI) / nodes.length;
+    const r0 = Math.min(W, H) * 0.35;
+
+    const state: State[] = nodes.map((_, i) => ({
+      x: cx + r0 * Math.cos(i * step),
+      y: cy + r0 * Math.sin(i * step),
+      vx: 0,
+      vy: 0,
+    }));
+
+    for (let iter = 0; iter < ITERS; iter++) {
+      for (const [a, b] of edges) {
+        const dx = state[b].x - state[a].x;
+        const dy = state[b].y - state[a].y;
+        const d = Math.sqrt(dx * dx + dy * dy) || 1;
+        const f = 0.04 * (d - 80) / d;
+        state[a].vx += dx * f;
+        state[a].vy += dy * f;
+        state[b].vx -= dx * f;
+        state[b].vy -= dy * f;
+      }
+      for (let i = 0; i < state.length; i++) {
+        for (let j = i + 1; j < state.length; j++) {
+          const dx = state[j].x - state[i].x;
+          const dy = state[j].y - state[i].y;
+          const d2 = dx * dx + dy * dy || 1;
+          const d = Math.sqrt(d2);
+          const f = 600 / d2;
+          state[i].vx -= (dx / d) * f;
+          state[i].vy -= (dy / d) * f;
+          state[j].vx += (dx / d) * f;
+          state[j].vy += (dy / d) * f;
+        }
+      }
+      for (const s of state) {
+        s.vx += (cx - s.x) * 0.008;
+        s.vy += (cy - s.y) * 0.008;
+        s.vx *= 0.85;
+        s.vy *= 0.85;
+        s.x += s.vx;
+        s.y += s.vy;
+      }
+    }
+
+    return state.map((s) => ({ x: s.x, y: s.y }));
+  }
+
+  $: pos = nodes.length > 0 ? layout(VW, height) : [];
+  $: idxById = Object.fromEntries(nodes.map((n, i) => [n.id, i]));
+</script>
+
+{#if nodes.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 links as l, li (li)}
+        {@const si = idxById[l.source]}
+        {@const ti = idxById[l.target]}
+        {#if si !== undefined && ti !== undefined}
+          <line x1={pos[si].x} y1={pos[si].y} x2={pos[ti].x} y2={pos[ti].y} stroke="rgba(255,255,255,0.12)" stroke-width="1.5" />
+        {/if}
+      {/each}
+      {#each nodes as n, ni (ni)}
+        {@const r = n.r ?? 10}
+        {@const color = n.color ?? PALETTE[ni % PALETTE.length]}
+        <g>
+          <circle cx={pos[ni].x} cy={pos[ni].y} r={r} fill={color} fill-opacity="0.85" />
+          <text x={pos[ni].x} y={pos[ni].y + r + 11} fill="#A4A7B5" font-size="8" text-anchor="middle" font-family="inherit">{n.label ?? n.id}</text>
+        </g>
+      {/each}
+    </svg>
+  </div>
+{/if}

package/src/lib/components/FunnelChart.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+  export interface FunnelSegment {
+    label: string;
+    value: number;
+    color?: string;
+  }
+
+  export let segments: FunnelSegment[] = [];
+  export let height: number = 160;
+  export let ariaLabel: string = 'Funnel chart';
+
+  const VW = 320;
+  const PAD = { t: 4, r: 8, b: 4, l: 8 };
+  const SEP = 2;
+  const DEFAULT_COLORS = ['#006FFF', '#0092FF', '#00B4C2', '#00C875', '#F5A623'];
+
+  $: maxVal = segments.length ? Math.max(...segments.map((s) => s.value)) : 1;
+  $: n = segments.length;
+  $: chartH = height - PAD.t - PAD.b;
+  $: slotH = n > 0 ? (chartH - SEP * (n - 1)) / n : chartH;
+  $: chartW = VW - PAD.l - PAD.r;
+  $: cx = PAD.l + chartW / 2;
+  $: widths = segments.map((s) => (s.value / (maxVal || 1)) * chartW);
+
+  $: shapes = segments.map((s, i) => {
+    const tw = widths[i];
+    const bw = i + 1 < n ? widths[i + 1] : widths[i] * 0.7;
+    const y0 = PAD.t + i * (slotH + SEP);
+    const y1 = y0 + slotH;
+    return {
+      points: `${(cx - tw / 2).toFixed(1)},${y0.toFixed(1)} ${(cx + tw / 2).toFixed(1)},${y0.toFixed(1)} ${(cx + bw / 2).toFixed(1)},${y1.toFixed(1)} ${(cx - bw / 2).toFixed(1)},${y1.toFixed(1)}`,
+      color: s.color ?? DEFAULT_COLORS[i % DEFAULT_COLORS.length],
+      label: s.label,
+      value: s.value,
+      cx: cx.toFixed(1),
+      cy: ((y0 + y1) / 2).toFixed(1),
+    };
+  });
+</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 shapes as s, i (i)}
+      <polygon points={s.points} fill={s.color} fill-opacity="0.75" />
+      <text x={s.cx} y={s.cy} text-anchor="middle" dominant-baseline="central" fill="rgba(255,255,255,0.9)" font-size="10" font-family="inherit" font-weight="500">
+        {s.label} · {s.value}
+      </text>
+    {/each}
+  </svg>
+</div>

package/src/lib/components/GanttChart.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+  export interface GanttTask {
+    label: string;
+    start: number;
+    end: number;
+    color?: string;
+  }
+
+  export let tasks: GanttTask[] = [];
+  export let xLabels: string[] = [];
+  export let ariaLabel: string = 'Gantt chart';
+
+  const VW = 340;
+  const LABEL_W = 100;
+  const PAD_R = 8;
+  const TRACK_W = VW - LABEL_W - PAD_R;
+  const ROW_H = 28;
+  const BAR_H = 14;
+  const PAD_T = 6;
+  const AXIS_H = 18;
+
+  $: svgH = PAD_T + tasks.length * ROW_H + AXIS_H;
+  $: ticks = xLabels.map((lbl, i) => ({
+    x: LABEL_W + (i / (xLabels.length - 1 || 1)) * TRACK_W,
+    lbl,
+  }));
+
+  function tx(v: number): number {
+    return LABEL_W + v * 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 { x, lbl }, i}
+      <line x1={x} y1={PAD_T} x2={x} y2={PAD_T + tasks.length * ROW_H} stroke="rgba(255,255,255,0.06)" stroke-width="1" />
+      <text x={x} y={PAD_T + tasks.length * ROW_H + 13} fill="#6E7079" font-size="9" text-anchor="middle" font-family="inherit">{lbl}</text>
+    {/each}
+    {#each tasks as task, i}
+      {@const cy = PAD_T + i * ROW_H + ROW_H / 2}
+      {@const x1 = tx(task.start)}
+      {@const x2 = tx(task.end)}
+      {@const barW = Math.max(x2 - x1, 4)}
+      {@const color = task.color ?? '#006FFF'}
+      <text x={LABEL_W - 6} y={cy + 4} fill="#A4A7B5" font-size="10" text-anchor="end" font-family="inherit">{task.label}</text>
+      <rect x={x1} y={cy - BAR_H / 2} width={barW} height={BAR_H} rx="3" fill={color} opacity="0.85" />
+    {/each}
+  </svg>
+</div>

package/src/lib/components/Gauge.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+  export let value: number = 0;
+  export let label: string = '';
+  export let color: string = '#006FFF';
+  export let size: number = 120;
+  export let ariaLabel: string | undefined = undefined;
+
+  $: sw = 10;
+  $: cx = size / 2;
+  $: cy = size / 2;
+  $: r = cx - sw / 2 - 2;
+  $: svgH = Math.round(size * 0.7);
+  $: pathLen = Math.PI * r;
+  $: fillLen = (Math.min(100, Math.max(0, value)) / 100) * pathLen;
+  $: d = `M ${cx - r},${cy} A ${r},${r} 0 1 1 ${cx + r},${cy}`;
+  $: valY = cy + Math.round(size * 0.06);
+  $: lblY = valY + Math.round(size * 0.13) + 2;
+  $: a11yLabel = ariaLabel ?? `${label} ${value}%`;
+</script>
+
+<div
+  role="meter"
+  aria-valuenow={value}
+  aria-valuemin={0}
+  aria-valuemax={100}
+  aria-label={a11yLabel}
+  style="display:inline-flex;flex-direction:column;align-items:center;"
+>
+  <svg width={size} height={svgH} aria-hidden="true" focusable="false">
+    <path {d} fill="none" stroke="rgba(255,255,255,0.08)" stroke-width={sw} stroke-linecap="round" />
+    <path
+      {d}
+      fill="none"
+      stroke={color}
+      stroke-width={sw}
+      stroke-linecap="round"
+      stroke-dasharray="{fillLen} {pathLen}"
+    />
+    <text
+      x={cx}
+      y={valY}
+      text-anchor="middle"
+      fill="#fff"
+      font-size={Math.round(size * 0.2)}
+      font-weight={600}
+    >
+      {value}%
+    </text>
+    <text x={cx} y={lblY} text-anchor="middle" fill="#6E7079" font-size={Math.round(size * 0.1)}>
+      {label}
+    </text>
+  </svg>
+</div>

package/src/lib/components/GroupedList.svelte

@@ -0,0 +1,87 @@
+<script context="module" lang="ts">
+  export type GroupedListItemStatus = 'danger' | 'warn' | 'success' | 'info' | 'neutral';
+
+  export interface GroupedListItem {
+    label: string;
+    sublabel?: string;
+    meta?: string;
+    status?: GroupedListItemStatus;
+  }
+
+  export interface GroupedListGroup {
+    label: string;
+    items: GroupedListItem[];
+    defaultOpen?: boolean;
+    color?: string;
+  }
+</script>
+
+<script lang="ts">
+  export let groups: GroupedListGroup[];
+  export let collapsible: boolean = true;
+  export let ariaLabel: string = 'Grouped list';
+
+  const STATUS_COLORS: Record<GroupedListItemStatus, string> = {
+    danger: '#F03A3A',
+    warn: '#F5A623',
+    success: '#00B070',
+    info: '#006FFF',
+    neutral: '#6E7079',
+  };
+
+  const uid = Math.random().toString(36).slice(2, 9);
+  let open: boolean[] = groups.map(g => g.defaultOpen !== false);
+
+  function toggle(i: number) { open[i] = !open[i]; open = [...open]; }
+</script>
+
+<div class="gl" aria-label={ariaLabel}>
+  {#each groups as group, gi}
+    {@const isOpen = open[gi]}
+    {@const panelId = `${uid}-gl-${gi}`}
+    <div class="gl-group">
+      {#if collapsible}
+        <button
+          type="button"
+          class="gl-header"
+          aria-expanded={isOpen}
+          aria-controls={panelId}
+          on:click={() => toggle(gi)}
+        >
+          {#if group.color}<span class="gl-color-dot" style="background:{group.color}" aria-hidden="true"></span>{/if}
+          <span class="gl-title">{group.label}</span>
+          <span class="gl-count">{group.items.length}</span>
+          <svg
+            class="gl-chevron{isOpen ? ' gl-chevron--open' : ''}"
+            width="12" height="12" viewBox="0 0 12 12"
+            aria-hidden="true" focusable="false"
+          >
+            <path d="M2 4l4 4 4-4" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </button>
+      {:else}
+        <div class="gl-header gl-header--static">
+          {#if group.color}<span class="gl-color-dot" style="background:{group.color}" aria-hidden="true"></span>{/if}
+          <span class="gl-title">{group.label}</span>
+          <span class="gl-count">{group.items.length}</span>
+        </div>
+      {/if}
+      {#if !collapsible || isOpen}
+        <ul id={panelId} class="gl-items" role="list">
+          {#each group.items as item}
+            <li class="gl-item">
+              {#if item.status}
+                <span class="gl-item-dot" style="background:{STATUS_COLORS[item.status]}" aria-label={item.status}></span>
+              {/if}
+              <div class="gl-item-body">
+                <div class="gl-item-label">{item.label}</div>
+                {#if item.sublabel}<div class="gl-item-sublabel">{item.sublabel}</div>{/if}
+              </div>
+              {#if item.meta}<span class="gl-item-meta">{item.meta}</span>{/if}
+            </li>
+          {/each}
+        </ul>
+      {/if}
+    </div>
+  {/each}
+</div>

package/src/lib/components/HealthBar.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  export let value: number;
+  export let fillStyle: string = '';
+  export let label: string | undefined = undefined;
+  export let valueText: string | undefined = undefined;
+  $: clamped = Math.max(0, Math.min(100, value));
+</script>
+
+<div
+  class="hb"
+  role="progressbar"
+  aria-valuenow={Math.round(clamped)}
+  aria-valuemin={0}
+  aria-valuemax={100}
+  aria-label={label}
+  aria-valuetext={valueText}
+>
+  <div class="hb-fill" style="width:{clamped}%; {fillStyle}"></div>
+</div>

package/src/lib/components/HeatMap.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+  export let data: number[][] = [];
+  export let colors: string[] = ['#1B2D5A', '#3F7BC4', '#7FB6FF', '#F5C26B', '#F5A623', '#FF7B7B'];
+  export let xLabels: string[] = [];
+  export let height: number = 160;
+  export let cellGap: number = 1;
+  export let ariaLabel: string = 'Heat map';
+
+  const VW = 400;
+  const PAD_BASE = { t: 4, r: 4, l: 4 };
+
+  function hexToRgb(hex: string): [number, number, number] {
+    const n = parseInt(hex.slice(1), 16);
+    return [(n >> 16) & 255, (n >> 8) & 255, n & 255];
+  }
+
+  function interpolateColor(cs: string[], t: number): string {
+    if (cs.length === 1) return cs[0];
+    const scaled = Math.max(0, Math.min(1, t)) * (cs.length - 1);
+    const i = Math.min(Math.floor(scaled), cs.length - 2);
+    const f = scaled - i;
+    const [r1, g1, b1] = hexToRgb(cs[i]);
+    const [r2, g2, b2] = hexToRgb(cs[i + 1]);
+    return `rgb(${Math.round(r1 + f * (r2 - r1))},${Math.round(g1 + f * (g2 - g1))},${Math.round(b1 + f * (b2 - b1))})`;
+  }
+
+  $: rows = data.length;
+  $: cols = data[0]?.length ?? 0;
+  $: padB = xLabels.length ? 16 : 4;
+  $: chartW = VW - PAD_BASE.l - PAD_BASE.r;
+  $: chartH = height - PAD_BASE.t - padB;
+  $: cellW = cols > 0 ? (chartW - (cols - 1) * cellGap) / cols : 0;
+  $: cellH = rows > 0 ? (chartH - (rows - 1) * cellGap) / rows : 0;
+
+  $: rects = rows > 0 && cols > 0
+    ? data.flatMap((rowData, row) =>
+        rowData.map((val, col) => ({
+          key: `${row}-${col}`,
+          x: (PAD_BASE.l + col * (cellW + cellGap)).toFixed(2),
+          y: (PAD_BASE.t + row * (cellH + cellGap)).toFixed(2),
+          w: cellW.toFixed(2),
+          h: cellH.toFixed(2),
+          fill: interpolateColor(colors, val),
+        }))
+      )
+    : [];
+
+  $: labelNodes = xLabels.map((lbl, i) => ({
+    lbl,
+    x: (PAD_BASE.l + (xLabels.length > 1 ? (i / (xLabels.length - 1)) * chartW : chartW / 2)).toFixed(1),
+    y: height - 2,
+  }));
+</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 rects as r (r.key)}
+      <rect x={r.x} y={r.y} width={r.w} height={r.h} fill={r.fill} />
+    {/each}
+    {#each labelNodes as { lbl, x, y }}
+      <text {x} {y} text-anchor="middle" fill="#6E7079" font-size="9">{lbl}</text>
+    {/each}
+  </svg>
+</div>

package/src/lib/components/HexbinChart.svelte

@@ -0,0 +1,100 @@
+<script lang="ts">
+  export interface HexbinPoint {
+    x: number;
+    y: number;
+  }
+
+  export let points: HexbinPoint[] = [];
+  export let xRange: [number, number] | undefined = undefined;
+  export let yRange: [number, number] | undefined = undefined;
+  export let height = 200;
+  export let hexRadius = 10;
+  export let ariaLabel = 'Hexbin chart';
+
+  const ROOT3 = Math.sqrt(3);
+  const VW = 340;
+  const PAD_L = 28;
+  const PAD_R = 8;
+  const PAD_T = 8;
+  const PAD_B = 20;
+
+  function pixelToHex(px: number, py: number, R: number): [number, number] {
+    const q = (ROOT3 / 3 * px - 1 / 3 * py) / R;
+    const r = (2 / 3 * py) / R;
+    const s = -q - r;
+    let rq = Math.round(q), rr = Math.round(r), rs = Math.round(s);
+    const dq = Math.abs(rq - q), dr = Math.abs(rr - r), ds = Math.abs(rs - s);
+    if (dq > dr && dq > ds) rq = -rr - rs;
+    else if (dr > ds) rr = -rq - rs;
+    else rs = -rq - rr;
+    void rs;
+    return [rq, rr];
+  }
+
+  function hexCenter(q: number, r: number, R: number, ox: number, oy: number): [number, number] {
+    return [ROOT3 * R * (q + r / 2) + ox, 1.5 * R * r + oy];
+  }
+
+  function hexPath(cx: number, cy: number, R: number): string {
+    const pts = Array.from({ length: 6 }, (_, k) => {
+      const a = Math.PI / 6 + (Math.PI / 3) * k;
+      return `${(cx + R * Math.cos(a)).toFixed(2)},${(cy + R * Math.sin(a)).toFixed(2)}`;
+    });
+    return `M${pts.join('L')}Z`;
+  }
+
+  $: PLOT_W = VW - PAD_L - PAD_R;
+  $: PLOT_H = height - PAD_T - PAD_B;
+  $: xs = points.map((p) => p.x);
+  $: ys = points.map((p) => p.y);
+  $: xMin = xRange ? xRange[0] : (xs.length ? Math.min(...xs) : 0);
+  $: xMax = xRange ? xRange[1] : (xs.length ? Math.max(...xs) : 1);
+  $: yMin = yRange ? yRange[0] : (ys.length ? Math.min(...ys) : 0);
+  $: yMax = yRange ? yRange[1] : (ys.length ? Math.max(...ys) : 1);
+  $: xSpan = xMax - xMin || 1;
+  $: ySpan = yMax - yMin || 1;
+
+  $: bins = (() => {
+    const map = new Map<string, { q: number; r: number; count: number }>();
+    for (const pt of points) {
+      const px = ((pt.x - xMin) / xSpan) * PLOT_W;
+      const py = (1 - (pt.y - yMin) / ySpan) * PLOT_H;
+      const [q, r] = pixelToHex(px, py, hexRadius);
+      const key = `${q},${r}`;
+      const bin = map.get(key);
+      if (bin) bin.count++;
+      else map.set(key, { q, r, count: 1 });
+    }
+    return [...map.values()];
+  })();
+
+  $: maxCount = bins.length ? Math.max(...bins.map((b) => b.count)) : 1;
+  $: yTicks = [yMin, (yMin + yMax) / 2, yMax];
+  $: xTicks = [xMin, (xMin + xMax) / 2, xMax];
+
+  function ty(v: number): number { return PAD_T + (1 - (v - yMin) / ySpan) * PLOT_H; }
+  function tx(v: number): number { return PAD_L + ((v - xMin) / xSpan) * PLOT_W; }
+</script>
+
+{#if points.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 yTicks as v, i (i)}
+        <line x1={PAD_L} y1={ty(v)} x2={PAD_L + PLOT_W} y2={ty(v)} stroke="rgba(255,255,255,0.06)" stroke-width="1" />
+        <text x={PAD_L - 4} y={ty(v) + 3} fill="#6E7079" font-size="8" text-anchor="end" font-family="inherit">{Math.round(v)}</text>
+      {/each}
+
+      {#each bins as { q, r, count } (`${q},${r}`)}
+        {@const [cx, cy] = hexCenter(q, r, hexRadius, PAD_L, PAD_T)}
+        {#if cx >= PAD_L - hexRadius * 2 && cx <= PAD_L + PLOT_W + hexRadius * 2 && cy >= PAD_T - hexRadius * 2 && cy <= PAD_T + PLOT_H + hexRadius * 2}
+          {@const alpha = (0.15 + 0.85 * (count / maxCount)).toFixed(3)}
+          <path d={hexPath(cx, cy, hexRadius - 0.5)} fill="rgba(0,111,255,{alpha})" stroke="rgba(0,111,255,0.2)" stroke-width="0.5" />
+        {/if}
+      {/each}
+
+      {#each xTicks as v, i (i)}
+        <text x={tx(v)} y={height - 4} fill="#6E7079" font-size="8" text-anchor="middle" font-family="inherit">{Math.round(v)}</text>
+      {/each}
+    </svg>
+  </div>
+{/if}