astro-component-kit 0.3.1 → 0.4.1

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

@@ -0,0 +1,111 @@
+---
+/**
+ * HistogramChart — Bins raw values into equal-width buckets and draws the
+ * distribution, with optional mean and median markers.
+ *
+ * @param {number[]} values - Raw observations.
+ * @param {number} bins - Number of buckets.
+ * @param {boolean} showStats - Draw mean & median reference lines.
+ * @param {string} unit - Unit suffix for bucket edges.
+ * @param {string} color - Bar color.
+ * @param {string} variant - Card style (glass|solid|ghost).
+ * @param {string} size - Density (sm|md|lg).
+ */
+import ChartFrame from './ChartFrame.astro';
+import { scaleLinear, niceTicks, quantile, sum } from './chart-utils';
+
+interface Props {
+  title?: string;
+  subtitle?: string;
+  values?: number[];
+  bins?: number;
+  showStats?: boolean;
+  unit?: string;
+  height?: number;
+  color?: string;
+  variant?: 'glass' | 'solid' | 'ghost';
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+// Deterministic sample: a right-skewed page-load distribution.
+const sample = Array.from({ length: 240 }, (_, i) => {
+  const a = Math.sin(i * 12.9898) * 43758.5453;
+  const b = Math.sin(i * 78.233) * 12345.678;
+  const u = a - Math.floor(a);
+  const v = b - Math.floor(b);
+  return Math.round((0.6 + Math.abs(Math.sqrt(-2 * Math.log(u + 1e-9)) * Math.cos(2 * Math.PI * v)) * 0.9) * 100) / 100;
+});
+
+const {
+  title = 'Page load time',
+  subtitle = '240 sessions, seconds',
+  values = sample,
+  bins = 14,
+  showStats = true,
+  unit = 's',
+  height = 260,
+  color = 'var(--chart-1, #3987e5)',
+  variant = 'glass',
+  size = 'md',
+  className = '',
+} = Astro.props;
+
+const W = 640;
+const H = height;
+const m = { t: 22, r: 12, b: 30, l: 40 };
+const sorted = [...values].sort((a, b) => a - b);
+const lo = sorted[0];
+const hi = sorted[sorted.length - 1];
+const width = (hi - lo) / bins || 1;
+const counts = Array.from({ length: bins }, () => 0);
+values.forEach((v) => {
+  counts[Math.min(bins - 1, Math.floor((v - lo) / width))] += 1;
+});
+const yTicks = niceTicks(0, Math.max(...counts), 4);
+const y = scaleLinear(0, yTicks[yTicks.length - 1], H - m.b, m.t);
+const x = scaleLinear(lo, hi, m.l, W - m.r);
+const mean = sum(values) / values.length;
+const median = quantile(sorted, 0.5);
+const edge = (i: number) => (lo + i * width).toFixed(1);
+---
+
+<ChartFrame
+  title={title}
+  subtitle={subtitle}
+  value={`${median.toFixed(2)}${unit}`}
+  delta="median"
+  variant={variant}
+  size={size}
+  className={className}
+  table={{ headers: ['Bucket', 'Count'], rows: counts.map((c, i) => [`${edge(i)}–${edge(i + 1)}${unit}`, c]) }}
+>
+  <svg viewBox={`0 0 ${W} ${H}`} role="img" aria-label={`${title}: histogram of ${values.length} values, median ${median.toFixed(2)}${unit}`}>
+    {yTicks.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">{t}</text>
+      </g>
+    ))}
+    {counts.map((c, i) => {
+      const bx = x(lo + i * width) + 1;
+      const bw = x(lo + (i + 1) * width) - x(lo + i * width) - 2;
+      return (
+        <rect class="cf-mark cf-dim" x={bx} y={y(c)} width={Math.max(1, bw)} height={Math.max(0, y(0) - y(c))} rx="2" fill={color}
+          tabindex="0" role="img" aria-label={`${edge(i)} to ${edge(i + 1)}${unit}: ${c} values`}
+          data-tip-title={`${edge(i)}–${edge(i + 1)}${unit}`} data-tip={`${color}::${c} values · ${((c / values.length) * 100).toFixed(1)}%`} />
+      );
+    })}
+    {Array.from({ length: bins + 1 }, (_, i) => i).filter((i) => i % 2 === 0).map((i) => (
+      <text class="cf-label" x={x(lo + i * width)} y={H - 10} text-anchor="middle">{edge(i)}</text>
+    ))}
+    {showStats && (
+      <g aria-hidden="true">
+        <line x1={x(median)} x2={x(median)} y1={m.t - 6} y2={H - m.b} stroke="var(--c-text-1, #fff)" stroke-width="1.5" />
+        <text class="cf-label cf-label--strong" x={x(median) + 5} y={m.t}>Median</text>
+        <line x1={x(mean)} x2={x(mean)} y1={m.t + 10} y2={H - m.b} stroke="var(--chart-2, #d95926)" stroke-width="1.5" />
+        <text class="cf-label" x={x(mean) + 5} y={m.t + 16}>Mean {mean.toFixed(2)}{unit}</text>
+      </g>
+    )}
+  </svg>
+</ChartFrame>

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

@@ -0,0 +1,155 @@
+---
+/**
+ * HorizontalBarChart — Ranked horizontal bars with labels on the left and values
+ * on the right. One series → one color; optionally highlight a single bar.
+ *
+ * @param {Array<{label: string, value: number}>} items - Bars to draw.
+ * @param {boolean} sort - Sort descending by value.
+ * @param {string} highlight - Label to emphasise; other bars recede.
+ * @param {string} prefix - Value prefix.
+ * @param {string} suffix - Value suffix.
+ * @param {string} color - Bar color.
+ * @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;
+  items?: Array<{ label: string; value: number }>;
+  sort?: boolean;
+  highlight?: string;
+  prefix?: string;
+  suffix?: string;
+  color?: string;
+  variant?: 'glass' | 'solid' | 'ghost';
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+const {
+  title = 'Top pages',
+  subtitle = 'Unique visitors, last 30 days',
+  items = [
+    { label: '/pricing', value: 18420 },
+    { label: '/docs/getting-started', value: 15210 },
+    { label: '/', value: 12980 },
+    { label: '/blog/astro-5', value: 9340 },
+    { label: '/components', value: 7120 },
+    { label: '/changelog', value: 4310 },
+  ],
+  sort = true,
+  highlight,
+  prefix = '',
+  suffix = '',
+  color = 'var(--chart-1, #3987e5)',
+  variant = 'glass',
+  size = 'md',
+  className = '',
+} = Astro.props;
+
+const rows = sort ? [...items].sort((a, b) => b.value - a.value) : items;
+const max = Math.max(...rows.map((r) => r.value)) || 1;
+const fmt = (v: number) => formatValue(v, prefix, suffix);
+---
+
+<ChartFrame
+  title={title}
+  subtitle={subtitle}
+  variant={variant}
+  size={size}
+  className={className}
+  table={{ headers: ['Item', 'Value'], rows: rows.map((r) => [r.label, fmt(r.value)]) }}
+>
+  <ol class="hb" aria-label={title}>
+    {rows.map((r, i) => {
+      const dim = highlight && highlight !== r.label;
+      return (
+        <li
+          class="hb__row cf-mark"
+          tabindex="0"
+          style={`--hb-w:${(r.value / max) * 100}%; --hb-c:${color}; --hb-o:${dim ? 0.35 : 1}; --hb-i:${i}`}
+          data-tip-title={r.label}
+          data-tip={`${color}::${fmt(r.value)} · ${((r.value / max) * 100).toFixed(0)}% of top`}
+          aria-label={`${i + 1}. ${r.label}: ${fmt(r.value)}`}
+        >
+          <span class="hb__label">{r.label}</span>
+          <span class="hb__track" aria-hidden="true"><span class="hb__bar"></span></span>
+          <span class="hb__value">{fmt(r.value)}</span>
+        </li>
+      );
+    })}
+  </ol>
+</ChartFrame>
+
+<style>
+  .hb {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: grid;
+    gap: 0.35rem;
+  }
+  .hb__row {
+    display: grid;
+    grid-template-columns: minmax(6rem, 34%) 1fr auto;
+    align-items: center;
+    gap: 0.75rem;
+    min-height: 32px;
+    padding: 0.15rem 0.35rem;
+    border-radius: 8px;
+    cursor: default;
+  }
+  .hb__row:hover,
+  .hb__row:focus-visible {
+    background: rgb(var(--ink-rgb, 255 255 255) / 0.04);
+  }
+  .hb__row:focus-visible {
+    outline: 2px solid var(--c-primary-light, #d4a017);
+    outline-offset: 1px;
+  }
+  .hb__label {
+    font-size: 0.8125rem;
+    color: var(--c-text-2, #a3a3a3);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .hb__track {
+    height: 10px;
+    border-radius: 4px;
+    background: rgb(var(--ink-rgb, 255 255 255) / 0.04);
+    overflow: hidden;
+  }
+  .hb__bar {
+    display: block;
+    height: 100%;
+    width: var(--hb-w);
+    border-radius: 0 4px 4px 0;
+    background: var(--hb-c);
+    opacity: var(--hb-o);
+    transform-origin: left;
+    animation: hb-grow 0.7s cubic-bezier(0.4, 0, 0.2, 1) both;
+    animation-delay: calc(var(--hb-i) * 60ms);
+  }
+  .hb__value {
+    font-size: 0.8125rem;
+    font-weight: 600;
+    color: var(--c-text-1, #fff);
+    font-variant-numeric: tabular-nums;
+    min-width: 3.5rem;
+    text-align: right;
+  }
+  @keyframes hb-grow {
+    from { transform: scaleX(0); }
+  }
+  @media (max-width: 480px) {
+    .hb__row { grid-template-columns: 1fr auto; }
+    .hb__track { grid-column: 1 / -1; grid-row: 2; }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .hb__bar { animation: none; }
+  }
+</style>

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

@@ -0,0 +1,116 @@
+---
+/**
+ * KpiStatTile — Hero-number statistic tile: label, big value, change vs previous
+ * period (icon + text, never color alone) and an optional sparkline.
+ *
+ * @param {string} label - Metric name.
+ * @param {string} value - Formatted value.
+ * @param {number} change - Percentage change vs comparison period.
+ * @param {string} period - Comparison period label (e.g. 'vs last month').
+ * @param {boolean} invert - Treat a decrease as good (e.g. churn, latency).
+ * @param {number[]} trend - Optional sparkline data.
+ * @param {string} variant - Visual style (glass|solid|ghost).
+ * @param {string} size - Density (sm|md|lg).
+ * @param {string} className - Extra CSS class.
+ */
+import SparklineChart from './SparklineChart.astro';
+
+interface Props {
+  label?: string;
+  value?: string;
+  change?: number;
+  period?: string;
+  invert?: boolean;
+  trend?: number[];
+  variant?: 'glass' | 'solid' | 'ghost';
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+const {
+  label = 'Monthly recurring revenue',
+  value = '$84,210',
+  change = 12.4,
+  period = 'vs last month',
+  invert = false,
+  trend = [52, 55, 54, 60, 63, 61, 68, 72, 70, 76, 80, 84],
+  variant = 'glass',
+  size = 'md',
+  className = '',
+} = Astro.props;
+
+const up = change >= 0;
+const good = invert ? !up : up;
+---
+
+<article class={`kpi kpi--${variant} kpi--${size} ${className}`} aria-label={`${label}: ${value}, ${up ? 'up' : 'down'} ${Math.abs(change)}% ${period}`}>
+  <header class="kpi__head">
+    <h3 class="kpi__label">{label}</h3>
+    <span class={`kpi__chip ${good ? 'kpi__chip--good' : 'kpi__chip--bad'}`}>
+      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+        {up ? <path d="M7 17 17 7M9 7h8v8" /> : <path d="M7 7l10 10M17 9v8H9" />}
+      </svg>
+      {up ? '+' : '−'}{Math.abs(change)}%
+    </span>
+  </header>
+  <p class="kpi__value">{value}</p>
+  <div class="kpi__foot">
+    <span class="kpi__period">{period}</span>
+    {trend.length > 1 && (
+      <SparklineChart data={trend} size={size === 'lg' ? 'lg' : 'md'} color={good ? 'var(--chart-pos, #34c38f)' : 'var(--chart-neg, #f06a6a)'} label={`${label} trend`} />
+    )}
+  </div>
+</article>
+
+<style>
+  .kpi {
+    --kpi-pad: var(--sp-6, 1.5rem);
+    --kpi-val: 2rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    padding: var(--kpi-pad);
+    border-radius: var(--r-lg, 20px);
+    min-width: 0;
+    transition: border-color 0.25s ease, transform 0.25s ease;
+  }
+  .kpi--glass {
+    background: linear-gradient(160deg, rgb(var(--ink-rgb, 255 255 255) / 0.05), rgb(var(--ink-rgb, 255 255 255) / 0.015));
+    border: 1px solid var(--c-border, rgb(var(--ink-rgb, 255 255 255) / 0.07));
+    backdrop-filter: blur(14px);
+  }
+  .kpi--solid { background: var(--chart-surface, #0d0d0f); border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.08); }
+  .kpi--ghost { background: transparent; border: 1px solid transparent; padding-inline: 0; }
+  .kpi--glass:hover, .kpi--solid:hover { border-color: rgb(var(--ink-rgb, 255 255 255) / 0.16); transform: translateY(-2px); }
+  .kpi--sm { --kpi-pad: var(--sp-4, 1rem); --kpi-val: 1.5rem; }
+  .kpi--lg { --kpi-pad: var(--sp-8, 2rem); --kpi-val: 2.5rem; }
+  .kpi__head { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; }
+  .kpi__label { margin: 0; font-size: 0.8125rem; font-weight: 500; color: var(--c-text-2, #a3a3a3); letter-spacing: 0; }
+  .kpi__chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    padding: 0.2rem 0.5rem;
+    border-radius: var(--r-full, 999px);
+    font-size: 0.75rem;
+    font-weight: 650;
+    font-variant-numeric: tabular-nums;
+    color: var(--c-text-1, #fff);
+  }
+  .kpi__chip--good { background: color-mix(in srgb, var(--chart-pos, #34c38f) 18%, transparent); }
+  .kpi__chip--good svg { color: var(--chart-pos, #34c38f); }
+  .kpi__chip--bad { background: color-mix(in srgb, var(--chart-neg, #f06a6a) 18%, transparent); }
+  .kpi__chip--bad svg { color: var(--chart-neg, #f06a6a); }
+  .kpi__value {
+    margin: 0;
+    font-size: var(--kpi-val);
+    font-weight: 750;
+    color: var(--c-text-1, #fff);
+    letter-spacing: -0.02em;
+    font-variant-numeric: tabular-nums;
+    line-height: 1.1;
+  }
+  .kpi__foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; }
+  .kpi__period { font-size: 0.75rem; color: var(--c-text-3, #8a8a8a); }
+  @media (prefers-reduced-motion: reduce) { .kpi { transition: none; } }
+</style>

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

@@ -0,0 +1,60 @@
+---
+/**
+ * KpiTrendGrid — Responsive grid of KPI stat tiles with sparklines; the classic
+ * top row of an analytics dashboard.
+ *
+ * @param {Array<{label: string, value: string, change: number, trend?: number[], invert?: boolean}>} metrics - Tiles.
+ * @param {string} period - Shared comparison label.
+ * @param {string} variant - Tile style (glass|solid|ghost).
+ * @param {string} size - Density (sm|md|lg).
+ * @param {string} className - Extra CSS class.
+ */
+import KpiStatTile from './KpiStatTile.astro';
+
+interface Props {
+  title?: string;
+  metrics?: Array<{ label: string; value: string; change: number; trend?: number[]; invert?: boolean }>;
+  period?: string;
+  variant?: 'glass' | 'solid' | 'ghost';
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+const {
+  title = 'Overview',
+  metrics = [
+    { label: 'Revenue', value: '$128.4k', change: 9.2, trend: [80, 84, 90, 88, 96, 102, 110, 118, 128] },
+    { label: 'Active users', value: '24,812', change: 4.1, trend: [20, 21, 21.5, 22, 22.8, 23.1, 23.9, 24.2, 24.8] },
+    { label: 'Churn', value: '2.3%', change: -0.6, invert: true, trend: [3.1, 3, 2.9, 2.8, 2.7, 2.6, 2.5, 2.4, 2.3] },
+    { label: 'Avg. response', value: '182ms', change: 7.8, invert: true, trend: [150, 160, 158, 170, 165, 175, 172, 180, 182] },
+  ],
+  period = 'vs previous 30 days',
+  variant = 'glass',
+  size = 'md',
+  className = '',
+} = Astro.props;
+---
+
+<section class={`kg ${className}`} aria-label={title}>
+  {title && <h2 class="kg__title">{title}</h2>}
+  <div class="kg__grid">
+    {metrics.map((mt) => (
+      <KpiStatTile label={mt.label} value={mt.value} change={mt.change} trend={mt.trend} invert={mt.invert} period={period} variant={variant} size={size} />
+    ))}
+  </div>
+</section>
+
+<style>
+  .kg { width: 100%; }
+  .kg__title {
+    margin: 0 0 var(--sp-4, 1rem);
+    font-size: 1rem;
+    font-weight: 650;
+    color: var(--c-text-1, #fff);
+  }
+  .kg__grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+    gap: var(--sp-4, 1rem);
+  }
+</style>

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

@@ -0,0 +1,160 @@
+---
+/**
+ * LineChart — Zero-dependency SVG line chart with smooth, linear or step curves,
+ * optional area fill, crosshair tooltip and a data-table fallback.
+ *
+ * @param {string[]} categories - X-axis labels.
+ * @param {Array<{name: string, data: number[]}>} series - One or more series (max 8).
+ * @param {string} curve - Interpolation (smooth|linear|step).
+ * @param {boolean} area - Fill a soft gradient under each line.
+ * @param {boolean} dots - Draw point markers.
+ * @param {string} prefix - Value prefix (e.g. '$').
+ * @param {string} suffix - Value suffix (e.g. '%').
+ * @param {number} height - SVG height in viewBox units (width is 640).
+ * @param {string[]} colors - Optional color overrides per series.
+ * @param {string} variant - Card style (glass|solid|ghost).
+ * @param {string} size - Density (sm|md|lg).
+ */
+import ChartFrame from './ChartFrame.astro';
+import { colorAt, scaleLinear, niceTicks, curvePath, areaPath, formatValue, chartId, type Point } from './chart-utils';
+
+interface Props {
+  title?: string;
+  subtitle?: string;
+  categories?: string[];
+  series?: Array<{ name: string; data: number[] }>;
+  curve?: 'smooth' | 'linear' | 'step';
+  area?: boolean;
+  dots?: boolean;
+  prefix?: string;
+  suffix?: string;
+  height?: number;
+  colors?: string[];
+  variant?: 'glass' | 'solid' | 'ghost';
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+const {
+  title = 'Weekly active users',
+  subtitle = 'Last 12 weeks, by platform',
+  categories = ['W1', 'W2', 'W3', 'W4', 'W5', 'W6', 'W7', 'W8', 'W9', 'W10', 'W11', 'W12'],
+  series = [
+    { name: 'Web', data: [4200, 4580, 4410, 5020, 5390, 5210, 5870, 6120, 6050, 6680, 7010, 7420] },
+    { name: 'Mobile', data: [2100, 2350, 2600, 2550, 2980, 3310, 3240, 3620, 3900, 4150, 4080, 4560] },
+  ],
+  curve = 'smooth',
+  area = true,
+  dots = false,
+  prefix = '',
+  suffix = '',
+  height = 280,
+  colors,
+  variant = 'glass',
+  size = 'md',
+  className = '',
+} = Astro.props;
+
+const W = 640;
+const H = height;
+const m = { t: 12, r: 16, b: 28, l: 44 };
+const all = series.flatMap((s) => s.data);
+const ticks = niceTicks(Math.min(0, ...all), Math.max(...all), 4);
+const y = scaleLinear(ticks[0], ticks[ticks.length - 1], H - m.b, m.t);
+const n = categories.length;
+const x = (i: number) => m.l + (n <= 1 ? 0 : (i / (n - 1)) * (W - m.l - m.r));
+const gid = chartId('line');
+const step = n > 1 ? (W - m.l - m.r) / (n - 1) : W;
+const labelEvery = Math.ceil(n / 8);
+
+const lines = series.slice(0, 8).map((s, si) => {
+  const pts: Point[] = s.data.map((v, i) => [x(i), y(v)]);
+  return {
+    name: s.name,
+    color: colorAt(si, colors),
+    pts,
+    d: curvePath(pts, curve),
+    area: areaPath(pts, H - m.b, curve),
+  };
+});
+
+const fmt = (v: number) => formatValue(v, prefix, suffix);
+---
+
+<ChartFrame
+  title={title}
+  subtitle={subtitle}
+  variant={variant}
+  size={size}
+  className={className}
+  legend={lines.map((l) => ({ label: l.name, color: l.color }))}
+  table={{
+    headers: ['Period', ...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}: line chart with ${series.length} series over ${n} periods`}>
+    <defs>
+      {lines.map((l, i) => (
+        <linearGradient id={`${gid}-g${i}`} x1="0" y1="0" x2="0" y2="1">
+          <stop offset="0%" stop-color={l.color} stop-opacity="0.22" />
+          <stop offset="100%" stop-color={l.color} stop-opacity="0" />
+        </linearGradient>
+      ))}
+    </defs>
+
+    {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>
+    ))}
+
+    {categories.map((c, i) => i % labelEvery === 0 && (
+      <text class="cf-label" x={x(i)} y={H - 8} text-anchor="middle">{c}</text>
+    ))}
+
+    {area && lines.map((l, i) => <path d={l.area} fill={`url(#${gid}-g${i})`} aria-hidden="true" />)}
+    {lines.map((l) => (
+      <path class="lc__line" d={l.d} fill="none" stroke={l.color} stroke-width="2" stroke-linejoin="round" stroke-linecap="round" aria-hidden="true" />
+    ))}
+    {dots && lines.map((l) => l.pts.map(([px, py]) => (
+      <circle cx={px} cy={py} r="4" fill={l.color} stroke="var(--chart-surface, #0d0d0f)" stroke-width="2" aria-hidden="true" />
+    )))}
+
+    {categories.map((c, i) => (
+      <g class="cf-hit-group">
+        <line class="cf-cross" x1={x(i)} x2={x(i)} y1={m.t} y2={H - m.b} />
+        {lines.map((l) => (
+          <circle class="cf-cross" cx={l.pts[i]?.[0]} cy={l.pts[i]?.[1]} r="4.5" fill={l.color} stroke="#fff" stroke-width="1.5" />
+        ))}
+        <rect
+          class="cf-hit"
+          x={x(i) - step / 2}
+          y={m.t}
+          width={step}
+          height={H - m.t - m.b}
+          tabindex="0"
+          role="img"
+          aria-label={`${c}: ${series.map((s) => `${s.name} ${fmt(s.data[i])}`).join(', ')}`}
+          data-tip-title={c}
+          data-tip={lines.map((l, si) => `${l.color}::${l.name}: ${fmt(series[si].data[i])}`).join('|')}
+        />
+      </g>
+    ))}
+  </svg>
+</ChartFrame>
+
+<style>
+  .lc__line {
+    stroke-dasharray: 2400;
+    stroke-dashoffset: 2400;
+    animation: lc-draw 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+  }
+  @keyframes lc-draw {
+    to { stroke-dashoffset: 0; }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .lc__line { animation: none; stroke-dashoffset: 0; }
+  }
+</style>