astro-component-kit 0.3.0 → 0.4.0

package/src/components/lib/charts/FunnelChart.astro

@@ -0,0 +1,122 @@
+---
+/**
+ * FunnelChart — Conversion funnel with tapered stages, stage-to-stage drop-off
+ * and overall conversion. Uses an ordinal single-hue ramp (stages are ordered).
+ *
+ * @param {Array<{label: string, value: number}>} stages - Ordered stages, widest first.
+ * @param {string} color - Base hue for the ordinal ramp.
+ * @param {string} variant - Card style (glass|solid|ghost).
+ * @param {string} size - Density (sm|md|lg).
+ */
+import ChartFrame from './ChartFrame.astro';
+import { formatValue } from './chart-utils';
+
+interface Props {
+  title?: string;
+  subtitle?: string;
+  stages?: Array<{ label: string; value: number }>;
+  color?: string;
+  variant?: 'glass' | 'solid' | 'ghost';
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+const {
+  title = 'Signup funnel',
+  subtitle = 'Last 30 days',
+  stages = [
+    { label: 'Visited site', value: 48200 },
+    { label: 'Viewed pricing', value: 19800 },
+    { label: 'Started trial', value: 6400 },
+    { label: 'Activated', value: 3900 },
+    { label: 'Paid', value: 1240 },
+  ],
+  color = 'var(--chart-1, #3987e5)',
+  variant = 'glass',
+  size = 'md',
+  className = '',
+} = Astro.props;
+
+const top = stages[0]?.value || 1;
+const overall = ((stages[stages.length - 1]?.value ?? 0) / top) * 100;
+const fmt = (v: number) => formatValue(v);
+---
+
+<ChartFrame
+  title={title}
+  subtitle={subtitle}
+  value={`${overall.toFixed(1)}%`}
+  delta="overall conversion"
+  variant={variant}
+  size={size}
+  className={className}
+  table={{
+    headers: ['Stage', 'Users', '% of top', 'Step conversion'],
+    rows: stages.map((s, i) => [s.label, fmt(s.value), `${((s.value / top) * 100).toFixed(1)}%`, i ? `${((s.value / stages[i - 1].value) * 100).toFixed(1)}%` : '—']),
+  }}
+>
+  <ol class="fn">
+    {stages.map((s, i) => {
+      const pct = (s.value / top) * 100;
+      const step = i ? (s.value / stages[i - 1].value) * 100 : 100;
+      const shade = 100 - i * (55 / Math.max(1, stages.length - 1));
+      return (
+        <li class="fn__stage">
+          <div class="fn__meta">
+            <span class="fn__label">{s.label}</span>
+            <span class="fn__value">{fmt(s.value)}</span>
+          </div>
+          <div class="fn__track">
+            <span
+              class="fn__bar cf-mark"
+              tabindex="0"
+              style={`width:${Math.max(2, pct)}%; background:color-mix(in srgb, ${color} ${shade}%, #0d0d0f)`}
+              aria-label={`${s.label}: ${fmt(s.value)}, ${pct.toFixed(1)}% of top${i ? `, ${step.toFixed(1)}% from previous stage` : ''}`}
+              data-tip-title={s.label}
+              data-tip={`${fmt(s.value)} users|${pct.toFixed(1)}% of top${i ? `|${step.toFixed(1)}% from previous` : ''}`}
+            ></span>
+          </div>
+          {i > 0 && (
+            <span class="fn__drop" aria-hidden="true">
+              <svg width="10" height="10" viewBox="0 0 10 10"><path d="M5 9 L9 3 H1 Z" fill="currentColor" /></svg>
+              {(100 - step).toFixed(0)}% drop
+            </span>
+          )}
+        </li>
+      );
+    })}
+  </ol>
+</ChartFrame>
+
+<style>
+  .fn { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.85rem; }
+  .fn__stage {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    grid-template-areas: 'meta drop' 'track track';
+    gap: 0.35rem 1rem;
+  }
+  .fn__meta { grid-area: meta; display: flex; gap: 0.75rem; align-items: baseline; }
+  .fn__label { font-size: 0.8125rem; color: var(--c-text-2, #a3a3a3); }
+  .fn__value { font-size: 0.875rem; font-weight: 650; color: var(--c-text-1, #fff); font-variant-numeric: tabular-nums; }
+  .fn__drop {
+    grid-area: drop;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.3rem;
+    font-size: 0.75rem;
+    color: var(--c-text-3, #8a8a8a);
+  }
+  .fn__drop svg { color: var(--chart-neg, #f06a6a); }
+  .fn__track { grid-area: track; display: flex; justify-content: center; }
+  .fn__bar {
+    display: block;
+    height: 30px;
+    border-radius: 6px;
+    transform-origin: center;
+    animation: fn-grow 0.7s cubic-bezier(0.4, 0, 0.2, 1) both;
+  }
+  .fn__bar:focus-visible { outline: 2px solid var(--c-text-1, #fff); outline-offset: 2px; }
+  @keyframes fn-grow { from { transform: scaleX(0.2); opacity: 0; } }
+  @media (prefers-reduced-motion: reduce) { .fn__bar { animation: none; } }
+</style>

package/src/components/lib/charts/GaugeChart.astro

@@ -0,0 +1,111 @@
+---
+/**
+ * GaugeChart — Semicircular progress gauge for a single KPI against a goal,
+ * with the number and % of goal always shown as text.
+ *
+ * @param {number} value - Current value.
+ * @param {number} max - Goal / maximum.
+ * @param {string} label - Caption under the number.
+ * @param {string} prefix - Value prefix.
+ * @param {string} suffix - Value suffix.
+ * @param {string} color - Arc color.
+ * @param {string} variant - Card style (glass|solid|ghost).
+ * @param {string} size - Density (sm|md|lg).
+ */
+import ChartFrame from './ChartFrame.astro';
+import { arcStroke, formatValue } from './chart-utils';
+
+interface Props {
+  title?: string;
+  subtitle?: string;
+  value?: number;
+  max?: number;
+  label?: string;
+  prefix?: string;
+  suffix?: string;
+  color?: string;
+  variant?: 'glass' | 'solid' | 'ghost';
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+const {
+  title = 'Monthly sales goal',
+  subtitle = 'November',
+  value = 73400,
+  max = 100000,
+  label = 'of $100k goal',
+  prefix = '$',
+  suffix = '',
+  color = 'var(--chart-1, #3987e5)',
+  variant = 'glass',
+  size = 'md',
+  className = '',
+} = Astro.props;
+
+const W = 260;
+const H = 150;
+const cx = W / 2;
+const cy = 132;
+const r = 108;
+const pct = Math.max(0, Math.min(1, value / (max || 1)));
+const a0 = -Math.PI / 2;
+const a1 = Math.PI / 2;
+const fmt = (v: number) => formatValue(v, prefix, suffix);
+---
+
+<ChartFrame
+  title={title}
+  subtitle={subtitle}
+  variant={variant}
+  size={size}
+  className={className}
+  table={{ headers: ['Metric', 'Value', 'Goal', '% of goal'], rows: [[title, fmt(value), fmt(max), `${(pct * 100).toFixed(1)}%`]] }}
+>
+  <div class="gc" role="meter" aria-valuemin={0} aria-valuemax={max} aria-valuenow={value} aria-label={`${title}: ${fmt(value)} ${label}, ${(pct * 100).toFixed(0)}%`}>
+    <svg viewBox={`0 0 ${W} ${H}`} aria-hidden="true">
+      <path d={arcStroke(cx, cy, r, a0, a1)} fill="none" stroke="rgba(255,255,255,0.07)" stroke-width="18" stroke-linecap="round" />
+      {pct > 0 && <path class="gc__arc" d={arcStroke(cx, cy, r, a0, a0 + Math.PI * pct)} fill="none" stroke={color} stroke-width="18" stroke-linecap="round" />}
+      <text class="cf-label" x={cx - r} y={H - 2} text-anchor="middle">0</text>
+      <text class="cf-label" x={cx + r} y={H - 2} text-anchor="middle">{fmt(max)}</text>
+    </svg>
+    <div class="gc__center">
+      <span class="gc__value">{fmt(value)}</span>
+      <span class="gc__label">{(pct * 100).toFixed(0)}% {label}</span>
+    </div>
+  </div>
+</ChartFrame>
+
+<style>
+  .gc {
+    position: relative;
+    max-width: 340px;
+    margin: 0 auto;
+  }
+  .gc__arc {
+    stroke-dasharray: 400;
+    stroke-dashoffset: 400;
+    animation: gc-draw 1.1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+  }
+  @keyframes gc-draw { to { stroke-dashoffset: 0; } }
+  .gc__center {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 6%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  .gc__value {
+    font-size: clamp(1.5rem, 5vw, 2rem);
+    font-weight: 750;
+    color: var(--c-text-1, #fff);
+    font-variant-numeric: tabular-nums;
+    line-height: 1.1;
+  }
+  .gc__label { font-size: 0.75rem; color: var(--c-text-2, #a3a3a3); }
+  @media (prefers-reduced-motion: reduce) {
+    .gc__arc { animation: none; stroke-dashoffset: 0; }
+  }
+</style>

package/src/components/lib/charts/GoalProgressChart.astro

@@ -0,0 +1,97 @@
+---
+/**
+ * GoalProgressChart — Cumulative progress toward a goal over a period, versus
+ * the ideal linear pace, with an "ahead/behind pace" readout.
+ *
+ * @param {string[]} periods - X-axis labels for the whole period.
+ * @param {number[]} values - Per-period amounts achieved so far (may be shorter than periods).
+ * @param {number} goal - Target for the end of the period.
+ * @param {string} prefix - Value prefix.
+ * @param {string} suffix - Value suffix.
+ * @param {string} color - Progress color.
+ * @param {string} variant - Card style (glass|solid|ghost).
+ * @param {string} size - Density (sm|md|lg).
+ */
+import ChartFrame from './ChartFrame.astro';
+import { scaleLinear, niceTicks, linePath, areaPath, formatValue, type Point } from './chart-utils';
+
+interface Props {
+  title?: string;
+  subtitle?: string;
+  periods?: string[];
+  values?: number[];
+  goal?: number;
+  prefix?: string;
+  suffix?: string;
+  height?: number;
+  color?: string;
+  variant?: 'glass' | 'solid' | 'ghost';
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+const {
+  title = 'Q4 bookings goal',
+  subtitle = 'Cumulative vs. linear pace',
+  periods = ['W1', 'W2', 'W3', 'W4', 'W5', 'W6', 'W7', 'W8', 'W9', 'W10', 'W11', 'W12', 'W13'],
+  values = [22, 31, 28, 40, 36, 44, 51, 39],
+  goal = 520,
+  prefix = '$',
+  suffix = 'k',
+  height = 270,
+  color = 'var(--chart-1, #3987e5)',
+  variant = 'glass',
+  size = 'md',
+  className = '',
+} = Astro.props;
+
+const W = 640;
+const H = height;
+const m = { t: 14, r: 16, b: 28, l: 48 };
+const n = periods.length;
+const cum: number[] = [];
+values.forEach((v, i) => cum.push((cum[i - 1] ?? 0) + v));
+const achieved = cum[cum.length - 1] ?? 0;
+const pace = (goal / n) * values.length;
+const ahead = achieved >= pace;
+const ticks = niceTicks(0, Math.max(goal, achieved), 4);
+const y = scaleLinear(0, ticks[ticks.length - 1], H - m.b, m.t);
+const x = (i: number) => m.l + ((i + 1) / n) * (W - m.l - m.r);
+const x0 = m.l;
+const pts: Point[] = [[x0, y(0)], ...cum.map((v, i): Point => [x(i), y(v)])];
+const fmt = (v: number) => formatValue(v, prefix, suffix);
+const pct = (achieved / goal) * 100;
+---
+
+<ChartFrame
+  title={title}
+  subtitle={subtitle}
+  value={`${fmt(achieved)} / ${fmt(goal)}`}
+  delta={`${ahead ? 'Ahead of' : 'Behind'} pace by ${fmt(Math.abs(achieved - pace))}`}
+  deltaPositive={ahead}
+  variant={variant}
+  size={size}
+  className={className}
+  legend={[{ label: 'Achieved', color }, { label: 'Linear pace', color: 'var(--c-text-3, #8a8a8a)' }]}
+  table={{ headers: ['Period', 'Amount', 'Cumulative', 'Pace'], rows: periods.map((p, i) => [p, values[i] !== undefined ? fmt(values[i]) : '—', cum[i] !== undefined ? fmt(cum[i]) : '—', fmt((goal / n) * (i + 1))]) }}
+>
+  <svg viewBox={`0 0 ${W} ${H}`} role="img" aria-label={`${title}: ${fmt(achieved)} of ${fmt(goal)} (${pct.toFixed(0)}%), ${ahead ? 'ahead of' : 'behind'} pace`}>
+    {ticks.map((t) => (
+      <g>
+        <line class="cf-grid" x1={m.l} x2={W - m.r} y1={y(t)} y2={y(t)} />
+        <text class="cf-label" x={m.l - 8} y={y(t) + 4} text-anchor="end">{fmt(t)}</text>
+      </g>
+    ))}
+    {periods.map((p, i) => i % 2 === 0 && <text class="cf-label" x={x(i)} y={H - 8} text-anchor="middle">{p}</text>)}
+    <line x1={m.l} x2={W - m.r} y1={y(goal)} y2={y(goal)} stroke="var(--chart-4, #c98500)" stroke-width="1.5" aria-hidden="true" />
+    <text class="cf-label cf-label--strong" x={W - m.r} y={y(goal) - 6} text-anchor="end">Goal {fmt(goal)}</text>
+    <line x1={x0} y1={y(0)} x2={x(n - 1)} y2={y(goal)} stroke="var(--c-text-3, #8a8a8a)" stroke-width="1.5" stroke-dasharray="5 5" aria-hidden="true" />
+    <path d={areaPath(pts, y(0), 'linear')} fill={color} fill-opacity="0.15" aria-hidden="true" />
+    <path d={linePath(pts)} fill="none" stroke={color} stroke-width="2.5" stroke-linejoin="round" aria-hidden="true" />
+    {cum.map((v, i) => (
+      <circle class="cf-mark" cx={x(i)} cy={y(v)} r={i === cum.length - 1 ? 6 : 3.5} fill={color} stroke="var(--chart-surface, #0d0d0f)" stroke-width="2"
+        tabindex="0" role="img" aria-label={`${periods[i]}: cumulative ${fmt(v)}`}
+        data-tip-title={periods[i]} data-tip={`${color}::Cumulative: ${fmt(v)}|This period: ${fmt(values[i])}|Pace: ${fmt((goal / n) * (i + 1))}`} />
+    ))}
+  </svg>
+</ChartFrame>

package/src/components/lib/charts/GroupedBarChart.astro

@@ -0,0 +1,125 @@
+---
+/**
+ * GroupedBarChart — Side-by-side vertical bars for comparing several series
+ * across categories. Bars have rounded data-ends anchored to the baseline.
+ *
+ * @param {string[]} categories - X-axis groups.
+ * @param {Array<{name: string, data: number[]}>} series - Series per group (max 8).
+ * @param {string} prefix - Value prefix.
+ * @param {string} suffix - Value suffix.
+ * @param {number} height - SVG height in viewBox units (width is 640).
+ * @param {string[]} colors - Optional per-series colors.
+ * @param {string} variant - Card style (glass|solid|ghost).
+ * @param {string} size - Density (sm|md|lg).
+ */
+import ChartFrame from './ChartFrame.astro';
+import { colorAt, scaleLinear, niceTicks, formatValue } from './chart-utils';
+
+interface Props {
+  title?: string;
+  subtitle?: string;
+  categories?: string[];
+  series?: Array<{ name: string; data: number[] }>;
+  prefix?: string;
+  suffix?: string;
+  height?: number;
+  colors?: string[];
+  variant?: 'glass' | 'solid' | 'ghost';
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+const {
+  title = 'Revenue by region',
+  subtitle = 'This year vs last year',
+  categories = ['NA', 'EMEA', 'LATAM', 'APAC', 'ANZ'],
+  series = [
+    { name: '2025', data: [420, 310, 120, 260, 90] },
+    { name: '2026', data: [510, 365, 168, 340, 112] },
+  ],
+  prefix = '$',
+  suffix = 'k',
+  height = 280,
+  colors,
+  variant = 'glass',
+  size = 'md',
+  className = '',
+} = Astro.props;
+
+const W = 640;
+const H = height;
+const m = { t: 12, r: 12, b: 28, l: 48 };
+const ticks = niceTicks(0, Math.max(...series.flatMap((s) => s.data)), 4);
+const y = scaleLinear(0, ticks[ticks.length - 1], H - m.b, m.t);
+const groupW = (W - m.l - m.r) / categories.length;
+const inner = groupW * 0.72;
+const gap = 2;
+const barW = (inner - gap * (series.length - 1)) / series.length;
+const R = Math.min(4, barW / 2);
+const fmt = (v: number) => formatValue(v, prefix, suffix);
+
+/** Bar with rounded top corners only (data-end), square at the baseline. */
+const barPath = (bx: number, top: number, w: number, base: number) => {
+  const h = base - top;
+  if (h <= 0) return '';
+  const r = Math.min(R, h);
+  return `M${bx},${base} V${top + r} Q${bx},${top} ${bx + r},${top} H${bx + w - r} Q${bx + w},${top} ${bx + w},${top + r} V${base} Z`;
+};
+---
+
+<ChartFrame
+  title={title}
+  subtitle={subtitle}
+  variant={variant}
+  size={size}
+  className={className}
+  legend={series.map((s, i) => ({ label: s.name, color: colorAt(i, colors) }))}
+  table={{ headers: ['Category', ...series.map((s) => s.name)], rows: categories.map((c, i) => [c, ...series.map((s) => fmt(s.data[i]))]) }}
+>
+  <svg viewBox={`0 0 ${W} ${H}`} role="img" aria-label={`${title}: grouped bar chart`}>
+    {ticks.map((t) => (
+      <g>
+        <line class={t === 0 ? 'cf-axis' : 'cf-grid'} x1={m.l} x2={W - m.r} y1={y(t)} y2={y(t)} />
+        <text class="cf-label" x={m.l - 8} y={y(t) + 4} text-anchor="end">{fmt(t)}</text>
+      </g>
+    ))}
+    {categories.map((c, ci) => {
+      const gx = m.l + ci * groupW + (groupW - inner) / 2;
+      return (
+        <g>
+          <text class="cf-label" x={m.l + ci * groupW + groupW / 2} y={H - 8} text-anchor="middle">{c}</text>
+          {series.slice(0, 8).map((s, si) => {
+            const bx = gx + si * (barW + gap);
+            const v = s.data[ci] ?? 0;
+            return (
+              <path
+                class="cf-mark cf-dim gb__bar"
+                d={barPath(bx, y(v), barW, y(0))}
+                fill={colorAt(si, colors)}
+                tabindex="0"
+                role="img"
+                aria-label={`${c}, ${s.name}: ${fmt(v)}`}
+                data-tip-title={c}
+                data-tip={`${colorAt(si, colors)}::${s.name}: ${fmt(v)}`}
+              />
+            );
+          })}
+        </g>
+      );
+    })}
+  </svg>
+</ChartFrame>
+
+<style>
+  .gb__bar {
+    transform-origin: bottom;
+    transform-box: fill-box;
+    animation: gb-grow 0.7s cubic-bezier(0.4, 0, 0.2, 1) both;
+  }
+  @keyframes gb-grow {
+    from { transform: scaleY(0); }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .gb__bar { animation: none; }
+  }
+</style>

package/src/components/lib/charts/HeatmapChart.astro

@@ -0,0 +1,131 @@
+---
+/**
+ * HeatmapChart — Matrix of cells colored on a single-hue sequential ramp
+ * (light = low, saturated = high), with a scale legend.
+ *
+ * @param {string[]} rows - Row labels.
+ * @param {string[]} columns - Column labels.
+ * @param {number[][]} values - values[row][col].
+ * @param {boolean} showValues - Print values inside cells.
+ * @param {string} suffix - Value suffix.
+ * @param {string} color - Ramp hue.
+ * @param {string} variant - Card style (glass|solid|ghost).
+ * @param {string} size - Density (sm|md|lg).
+ */
+import ChartFrame from './ChartFrame.astro';
+
+interface Props {
+  title?: string;
+  subtitle?: string;
+  rows?: string[];
+  columns?: string[];
+  values?: number[][];
+  showValues?: boolean;
+  suffix?: string;
+  color?: string;
+  variant?: 'glass' | 'solid' | 'ghost';
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+const {
+  title = 'Error rate by service',
+  subtitle = 'Per weekday, % of requests',
+  rows = ['auth', 'billing', 'search', 'uploads', 'webhooks'],
+  columns = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+  values = [
+    [0.2, 0.3, 0.2, 0.4, 0.6, 0.1, 0.1],
+    [0.8, 1.2, 0.9, 1.6, 2.4, 0.4, 0.3],
+    [0.4, 0.5, 0.7, 0.6, 0.9, 0.3, 0.2],
+    [1.1, 1.4, 1.9, 2.8, 3.2, 0.9, 0.6],
+    [0.3, 0.2, 0.4, 0.5, 0.4, 0.2, 0.1],
+  ],
+  showValues = true,
+  suffix = '%',
+  color = 'var(--chart-1, #3987e5)',
+  variant = 'glass',
+  size = 'md',
+  className = '',
+} = Astro.props;
+
+const flat = values.flat();
+const min = Math.min(...flat);
+const max = Math.max(...flat);
+const t = (v: number) => (max === min ? 1 : (v - min) / (max - min));
+const fill = (v: number) => `color-mix(in srgb, ${color} ${Math.round(12 + t(v) * 88)}%, #141416)`;
+---
+
+<ChartFrame
+  title={title}
+  subtitle={subtitle}
+  variant={variant}
+  size={size}
+  className={className}
+  table={{ headers: ['', ...columns], rows: rows.map((r, ri) => [r, ...values[ri].map((v) => `${v}${suffix}`)]) }}
+>
+  <div class="hm" style={`--hm-cols:${columns.length}`}>
+    <div class="hm__grid" role="grid" aria-label={title}>
+      <div class="hm__row" role="row">
+        <span class="hm__corner" role="columnheader"></span>
+        {columns.map((c) => <span class="hm__col" role="columnheader">{c}</span>)}
+      </div>
+      {rows.map((r, ri) => (
+        <div class="hm__row" role="row">
+          <span class="hm__rowlabel" role="rowheader">{r}</span>
+          {columns.map((c, ci) => {
+            const v = values[ri]?.[ci] ?? 0;
+            return (
+              <span class="hm__cell cf-mark" role="gridcell" tabindex="0" style={`background:${fill(v)}`}
+                aria-label={`${r}, ${c}: ${v}${suffix}`} data-tip-title={`${r} · ${c}`} data-tip={`${v}${suffix}`}>
+                {showValues && <span class={t(v) > 0.55 ? 'hm__v hm__v--strong' : 'hm__v'}>{v}</span>}
+              </span>
+            );
+          })}
+        </div>
+      ))}
+    </div>
+    <div class="hm__scale" aria-hidden="true">
+      <span>{min}{suffix}</span>
+      <span class="hm__ramp" style={`background:linear-gradient(90deg, ${fill(min)}, ${fill(max)})`}></span>
+      <span>{max}{suffix}</span>
+    </div>
+  </div>
+</ChartFrame>
+
+<style>
+  .hm { overflow-x: auto; }
+  .hm__grid { display: grid; gap: 3px; min-width: calc(5rem + var(--hm-cols) * 2.4rem); }
+  .hm__row {
+    display: grid;
+    grid-template-columns: 5rem repeat(var(--hm-cols), minmax(2.2rem, 1fr));
+    gap: 3px;
+  }
+  .hm__col { text-align: center; font-size: 0.6875rem; color: var(--c-text-3, #8a8a8a); padding-bottom: 0.2rem; }
+  .hm__rowlabel {
+    display: flex;
+    align-items: center;
+    font-size: 0.75rem;
+    color: var(--c-text-2, #a3a3a3);
+    font-family: var(--font-mono, monospace);
+  }
+  .hm__cell {
+    display: grid;
+    place-items: center;
+    min-height: 34px;
+    border-radius: 4px;
+    transition: transform 0.15s ease;
+  }
+  .hm__cell:hover { transform: scale(1.06); }
+  .hm__cell:focus-visible { outline: 2px solid var(--c-text-1, #fff); outline-offset: 1px; }
+  .hm__v { font-size: 0.6875rem; color: rgba(255, 255, 255, 0.7); font-variant-numeric: tabular-nums; }
+  .hm__v--strong { color: #fff; font-weight: 650; }
+  .hm__scale {
+    display: flex;
+    align-items: center;
+    gap: 0.6rem;
+    margin-top: 0.9rem;
+    font-size: 0.6875rem;
+    color: var(--c-text-3, #8a8a8a);
+  }
+  .hm__ramp { flex: 0 1 160px; height: 8px; border-radius: 4px; }
+</style>