astro-component-kit 0.3.0 → 0.4.0

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

@@ -0,0 +1,373 @@
+---
+/**
+ * ChartFrame — Shared accessible shell for every SVG chart in the kit.
+ * Renders the card surface, header, legend, hover tooltip and a
+ * "View data" table fallback so no chart relies on color or hover alone.
+ *
+ * @param {string} title - Chart heading (names the series when there is only one).
+ * @param {string} subtitle - Supporting description under the title.
+ * @param {string} value - Optional headline figure shown on the right of the header.
+ * @param {string} delta - Optional change label next to the headline figure.
+ * @param {boolean} deltaPositive - Good news (green ▲) or bad (red ▼); omit for a neutral caption.
+ * @param {Array<{label: string, color: string}>} legend - Legend items (shown when ≥ 2 series).
+ * @param {{headers: string[], rows: Array<Array<string|number>>}} table - Data for the table view.
+ * @param {string} variant - Surface style (glass|solid|ghost).
+ * @param {string} size - Density (sm|md|lg).
+ * @param {string} className - Extra CSS class.
+ *
+ * Accessibility: the figure is labelled by its title, every mark is focusable via
+ * the chart itself, and a native <details> data table is always available.
+ */
+interface Props {
+  title?: string;
+  subtitle?: string;
+  value?: string;
+  delta?: string;
+  deltaPositive?: boolean;
+  legend?: Array<{ label: string; color: string }>;
+  table?: { headers: string[]; rows: Array<Array<string | number>> };
+  variant?: 'glass' | 'solid' | 'ghost';
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+const {
+  title,
+  subtitle,
+  value,
+  delta,
+  deltaPositive,
+  legend = [],
+  table,
+  variant = 'glass',
+  size = 'md',
+  className = '',
+} = Astro.props;
+
+const titleId = `cf-${Math.random().toString(36).slice(2, 9)}`;
+---
+
+<figure
+  class={`cf cf--${variant} cf--${size} ${className}`}
+  data-chart
+  aria-labelledby={title ? titleId : undefined}
+>
+  {(title || value) && (
+    <header class="cf__header">
+      <div class="cf__heading">
+        {title && <figcaption id={titleId} class="cf__title">{title}</figcaption>}
+        {subtitle && <p class="cf__subtitle">{subtitle}</p>}
+      </div>
+      {value && (
+        <div class="cf__headline">
+          <span class="cf__value">{value}</span>
+          {delta && (
+            <span class:list={['cf__delta', { 'cf__delta--pos': deltaPositive === true, 'cf__delta--neg': deltaPositive === false, 'cf__delta--neutral': deltaPositive === undefined }]}>
+              {deltaPositive !== undefined && (
+                <svg width="10" height="10" viewBox="0 0 10 10" aria-hidden="true">
+                  <path d={deltaPositive ? 'M5 1 L9 7 H1 Z' : 'M5 9 L9 3 H1 Z'} fill="currentColor" />
+                </svg>
+              )}
+              {delta}
+            </span>
+          )}
+        </div>
+      )}
+    </header>
+  )}
+
+  {legend.length > 1 && (
+    <ul class="cf__legend" aria-label="Legend">
+      {legend.map((item) => (
+        <li class="cf__legend-item">
+          <span class="cf__swatch" style={`background:${item.color}`} aria-hidden="true"></span>
+          {item.label}
+        </li>
+      ))}
+    </ul>
+  )}
+
+  <div class="cf__plot">
+    <slot />
+  </div>
+
+  <slot name="footer" />
+
+  {table && table.rows.length > 0 && (
+    <details class="cf__data">
+      <summary>View data</summary>
+      <div class="cf__table-wrap">
+        <table>
+          <thead>
+            <tr>{table.headers.map((h) => <th scope="col">{h}</th>)}</tr>
+          </thead>
+          <tbody>
+            {table.rows.map((row) => (
+              <tr>{row.map((cell, i) => (i === 0 ? <th scope="row">{cell}</th> : <td>{cell}</td>))}</tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </details>
+  )}
+
+  <div class="cf__tip" data-chart-tip aria-hidden="true"></div>
+</figure>
+
+<script>
+  import './chart-tooltip';
+</script>
+
+<style>
+  .cf {
+    --cf-pad: var(--sp-6, 1.5rem);
+    --cf-title: 1.0625rem;
+    position: relative;
+    margin: 0;
+    width: 100%;
+    min-width: 0;
+    box-sizing: border-box;
+    padding: var(--cf-pad);
+    border-radius: var(--r-lg, 20px);
+    color: var(--c-text-2, #a3a3a3);
+    font-family: var(--font-sans, system-ui, sans-serif);
+  }
+  .cf--glass {
+    background: linear-gradient(160deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015));
+    border: 1px solid var(--c-border, rgba(255, 255, 255, 0.07));
+    backdrop-filter: blur(14px);
+    -webkit-backdrop-filter: blur(14px);
+  }
+  .cf--solid {
+    background: var(--chart-surface, #0d0d0f);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+  }
+  .cf--ghost {
+    background: transparent;
+    border: 1px solid transparent;
+    padding-inline: 0;
+  }
+  .cf--sm { --cf-pad: var(--sp-4, 1rem); --cf-title: 0.9375rem; }
+  .cf--lg { --cf-pad: var(--sp-8, 2rem); --cf-title: 1.25rem; }
+
+  .cf__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    gap: var(--sp-4, 1rem);
+    margin-bottom: var(--sp-4, 1rem);
+  }
+  .cf__title {
+    margin: 0;
+    font-size: var(--cf-title);
+    font-weight: 650;
+    color: var(--c-text-1, #fff);
+    letter-spacing: -0.01em;
+  }
+  .cf__subtitle {
+    margin: 0.25rem 0 0;
+    font-size: 0.8125rem;
+    color: var(--c-text-2, #a3a3a3);
+    line-height: 1.45;
+  }
+  .cf__headline {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: 0.2rem;
+    flex-shrink: 0;
+  }
+  .cf__value {
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: var(--c-text-1, #fff);
+    font-variant-numeric: tabular-nums;
+    line-height: 1.1;
+  }
+  .cf__delta {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.3rem;
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: var(--c-text-1, #fff);
+  }
+  .cf__delta--pos svg { color: var(--chart-pos, #34c38f); }
+  .cf__delta--neg svg { color: var(--chart-neg, #f06a6a); }
+  .cf__delta--neutral { color: var(--c-text-3, #8a8a8a); font-weight: 500; }
+
+  .cf__legend {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.4rem 1rem;
+    list-style: none;
+    margin: 0 0 var(--sp-3, 0.75rem);
+    padding: 0;
+  }
+  .cf__legend-item {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.45rem;
+    font-size: 0.8125rem;
+    color: var(--c-text-2, #a3a3a3);
+  }
+  .cf__swatch {
+    width: 10px;
+    height: 10px;
+    border-radius: 3px;
+  }
+
+  .cf__plot {
+    position: relative;
+    width: 100%;
+  }
+  /* Plot SVGs scale fluidly; small inline icons keep their explicit width/height. */
+  .cf__plot :global(svg:not([width])) {
+    display: block;
+    width: 100%;
+    height: auto;
+    overflow: visible;
+  }
+
+  /* ── Shared mark vocabulary for every chart ───────────── */
+  .cf :global(.cf-grid) {
+    stroke: var(--chart-grid, rgba(255, 255, 255, 0.07));
+    stroke-width: 1;
+    shape-rendering: crispEdges;
+  }
+  .cf :global(.cf-axis) {
+    stroke: var(--chart-axis, rgba(255, 255, 255, 0.18));
+    stroke-width: 1;
+    shape-rendering: crispEdges;
+  }
+  .cf :global(.cf-label) {
+    fill: var(--c-text-3, #8a8a8a);
+    font-size: 11px;
+    font-family: var(--font-sans, system-ui, sans-serif);
+    font-variant-numeric: tabular-nums;
+  }
+  .cf :global(.cf-label--strong) {
+    fill: var(--c-text-1, #fff);
+    font-weight: 600;
+  }
+  .cf :global(.cf-mark) {
+    transition: opacity 0.2s ease, filter 0.2s ease;
+    outline: none;
+  }
+  .cf :global(.cf-mark:focus-visible) {
+    stroke: var(--c-text-1, #fff);
+    stroke-width: 2px;
+  }
+  .cf :global(svg:hover .cf-dim),
+  .cf :global(svg:focus-within .cf-dim) {
+    opacity: 0.45;
+  }
+  .cf :global(svg .cf-dim:hover),
+  .cf :global(svg .cf-dim:focus-visible) {
+    opacity: 1;
+  }
+  .cf :global(.cf-hit) {
+    fill: transparent;
+    cursor: crosshair;
+    outline: none;
+  }
+  .cf :global(.cf-cross) {
+    stroke: rgba(255, 255, 255, 0.35);
+    stroke-width: 1;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.15s ease;
+  }
+  .cf :global(.cf-hit-group:hover .cf-cross),
+  .cf :global(.cf-hit-group:focus-within .cf-cross) {
+    opacity: 1;
+  }
+  .cf :global(.cf-hit:focus-visible) {
+    fill: rgba(255, 255, 255, 0.04);
+  }
+
+  /* ── Tooltip ─────────────────────────────────────────── */
+  .cf__tip {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 5;
+    pointer-events: none;
+    opacity: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0.2rem;
+    min-width: 7rem;
+    max-width: 16rem;
+    padding: 0.55rem 0.7rem;
+    border-radius: var(--r-sm, 8px);
+    background: rgba(12, 12, 14, 0.94);
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
+    font-size: 0.75rem;
+    color: var(--c-text-1, #fff);
+    transition: opacity 0.15s ease;
+  }
+  .cf__tip :global(strong) {
+    font-size: 0.75rem;
+    font-weight: 650;
+    margin-bottom: 0.15rem;
+  }
+  .cf__tip :global(span) {
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+    color: var(--c-text-2, #c4c4c4);
+    font-variant-numeric: tabular-nums;
+  }
+  .cf__tip :global(i) {
+    width: 8px;
+    height: 8px;
+    border-radius: 2px;
+    flex-shrink: 0;
+  }
+
+  /* ── Data table fallback ─────────────────────────────── */
+  .cf__data {
+    margin-top: var(--sp-3, 0.75rem);
+    font-size: 0.8125rem;
+  }
+  .cf__data summary {
+    display: inline-flex;
+    align-items: center;
+    min-height: 32px;
+    cursor: pointer;
+    color: var(--c-text-3, #8a8a8a);
+    border-radius: 6px;
+    list-style-position: inside;
+  }
+  .cf__data summary:hover { color: var(--c-text-1, #fff); }
+  .cf__data summary:focus-visible {
+    outline: 2px solid var(--c-primary-light, #d4a017);
+    outline-offset: 2px;
+  }
+  .cf__table-wrap {
+    overflow-x: auto;
+    margin-top: 0.5rem;
+  }
+  .cf__data table {
+    width: 100%;
+    border-collapse: collapse;
+    font-variant-numeric: tabular-nums;
+  }
+  .cf__data th,
+  .cf__data td {
+    padding: 0.4rem 0.6rem;
+    text-align: right;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+    white-space: nowrap;
+  }
+  .cf__data th:first-child { text-align: left; }
+  .cf__data thead th { color: var(--c-text-3, #8a8a8a); font-weight: 600; }
+  .cf__data tbody th { color: var(--c-text-1, #fff); font-weight: 500; }
+  .cf__data td { color: var(--c-text-2, #a3a3a3); }
+
+  @media (prefers-reduced-motion: reduce) {
+    .cf :global(*) { transition: none !important; animation: none !important; }
+  }
+</style>

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

@@ -0,0 +1,98 @@
+---
+/**
+ * DivergingBarChart — Horizontal bars extending left (negative) or right
+ * (positive) from a zero line. Great for sentiment, variance and P&L deltas.
+ *
+ * @param {Array<{label: string, value: number}>} items - Signed values.
+ * @param {string} positiveLabel - Legend label for positive values.
+ * @param {string} negativeLabel - Legend label for negative values.
+ * @param {string} prefix - Value prefix.
+ * @param {string} suffix - Value suffix.
+ * @param {string} variant - Card style (glass|solid|ghost).
+ * @param {string} size - Density (sm|md|lg).
+ */
+import ChartFrame from './ChartFrame.astro';
+import { scaleLinear, formatValue, niceTicks } from './chart-utils';
+
+interface Props {
+  title?: string;
+  subtitle?: string;
+  items?: Array<{ label: string; value: number }>;
+  positiveLabel?: string;
+  negativeLabel?: string;
+  prefix?: string;
+  suffix?: string;
+  positiveColor?: string;
+  negativeColor?: string;
+  variant?: 'glass' | 'solid' | 'ghost';
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+const {
+  title = 'Budget variance by team',
+  subtitle = 'Actual minus plan, Q3',
+  items = [
+    { label: 'Engineering', value: -42 },
+    { label: 'Marketing', value: 28 },
+    { label: 'Sales', value: 64 },
+    { label: 'Support', value: -12 },
+    { label: 'Design', value: 9 },
+    { label: 'Ops', value: -31 },
+  ],
+  positiveLabel = 'Under budget',
+  negativeLabel = 'Over budget',
+  prefix = '$',
+  suffix = 'k',
+  positiveColor = 'var(--chart-1, #3987e5)',
+  negativeColor = 'var(--chart-2, #d95926)',
+  variant = 'glass',
+  size = 'md',
+  className = '',
+} = Astro.props;
+
+const W = 640;
+const rowH = 34;
+const m = { t: 8, r: 56, b: 26, l: 110 };
+const H = items.length * rowH + m.t + m.b;
+const ext = Math.max(...items.map((i) => Math.abs(i.value)));
+const ticks = niceTicks(-ext, ext, 4);
+const x = scaleLinear(ticks[0], ticks[ticks.length - 1], m.l, W - m.r);
+const fmt = (v: number) => `${v > 0 ? '+' : v < 0 ? '−' : ''}${formatValue(Math.abs(v), prefix, suffix)}`;
+---
+
+<ChartFrame
+  title={title}
+  subtitle={subtitle}
+  variant={variant}
+  size={size}
+  className={className}
+  legend={[{ label: positiveLabel, color: positiveColor }, { label: negativeLabel, color: negativeColor }]}
+  table={{ headers: ['Item', 'Value'], rows: items.map((i) => [i.label, fmt(i.value)]) }}
+>
+  <svg viewBox={`0 0 ${W} ${H}`} role="img" aria-label={`${title}: diverging bar chart`}>
+    {ticks.map((t) => (
+      <g>
+        <line class={t === 0 ? 'cf-axis' : 'cf-grid'} x1={x(t)} x2={x(t)} y1={m.t} y2={H - m.b} />
+        <text class="cf-label" x={x(t)} y={H - 8} text-anchor="middle">{t === 0 ? '0' : fmt(t)}</text>
+      </g>
+    ))}
+    {items.map((it, i) => {
+      const cy = m.t + i * rowH + rowH / 2;
+      const pos = it.value >= 0;
+      const x0 = x(0);
+      const x1 = x(it.value);
+      const c = pos ? positiveColor : negativeColor;
+      const w = Math.abs(x1 - x0);
+      return (
+        <g>
+          <text class="cf-label" x={m.l - 10} y={cy + 4} text-anchor="end">{it.label}</text>
+          <rect class="cf-mark cf-dim" x={Math.min(x0, x1)} y={cy - 9} width={Math.max(1, w)} height="18" rx="4" fill={c}
+            tabindex="0" role="img" aria-label={`${it.label}: ${fmt(it.value)}`} data-tip-title={it.label}
+            data-tip={`${c}::${pos ? positiveLabel : negativeLabel}: ${fmt(it.value)}`} />
+          <text class="cf-label cf-label--strong" x={pos ? x1 + 6 : x1 - 6} y={cy + 4} text-anchor={pos ? 'start' : 'end'}>{fmt(it.value)}</text>
+        </g>
+      );
+    })}
+  </svg>
+</ChartFrame>

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

@@ -0,0 +1,92 @@
+---
+/**
+ * DumbbellChart — Two values per row connected by a bar, showing the gap between
+ * a "before" and "after" (or two groups) for each item.
+ *
+ * @param {Array<{label: string, a: number, b: number}>} items - Pairs to compare.
+ * @param {string} aLabel - Name of the first value.
+ * @param {string} bLabel - Name of the second value.
+ * @param {string} prefix - Value prefix.
+ * @param {string} suffix - Value suffix.
+ * @param {string} variant - Card style (glass|solid|ghost).
+ * @param {string} size - Density (sm|md|lg).
+ */
+import ChartFrame from './ChartFrame.astro';
+import { scaleLinear, niceTicks, formatValue, colorAt } from './chart-utils';
+
+interface Props {
+  title?: string;
+  subtitle?: string;
+  items?: Array<{ label: string; a: number; b: number }>;
+  aLabel?: string;
+  bLabel?: string;
+  prefix?: string;
+  suffix?: string;
+  colors?: string[];
+  variant?: 'glass' | 'solid' | 'ghost';
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+const {
+  title = 'Time to first value',
+  subtitle = 'Minutes, before vs after onboarding redesign',
+  items = [
+    { label: 'Solo devs', a: 34, b: 12 },
+    { label: 'Startups', a: 41, b: 18 },
+    { label: 'Agencies', a: 52, b: 26 },
+    { label: 'Mid-market', a: 63, b: 37 },
+    { label: 'Enterprise', a: 88, b: 54 },
+  ],
+  aLabel = 'Before',
+  bLabel = 'After',
+  prefix = '',
+  suffix = 'm',
+  colors,
+  variant = 'glass',
+  size = 'md',
+  className = '',
+} = Astro.props;
+
+const W = 640;
+const rowH = 40;
+const m = { t: 8, r: 24, b: 26, l: 110 };
+const H = items.length * rowH + m.t + m.b;
+const ticks = niceTicks(0, Math.max(...items.flatMap((i) => [i.a, i.b])), 5);
+const x = scaleLinear(0, ticks[ticks.length - 1], m.l, W - m.r);
+const ca = colorAt(0, colors);
+const cb = colorAt(1, colors);
+const fmt = (v: number) => formatValue(v, prefix, suffix);
+---
+
+<ChartFrame
+  title={title}
+  subtitle={subtitle}
+  variant={variant}
+  size={size}
+  className={className}
+  legend={[{ label: aLabel, color: ca }, { label: bLabel, color: cb }]}
+  table={{ headers: ['Item', aLabel, bLabel, 'Difference'], rows: items.map((i) => [i.label, fmt(i.a), fmt(i.b), fmt(i.b - i.a)]) }}
+>
+  <svg viewBox={`0 0 ${W} ${H}`} role="img" aria-label={`${title}: dumbbell chart comparing ${aLabel} and ${bLabel}`}>
+    {ticks.map((t) => (
+      <g>
+        <line class="cf-grid" x1={x(t)} x2={x(t)} y1={m.t} y2={H - m.b} />
+        <text class="cf-label" x={x(t)} y={H - 8} text-anchor="middle">{fmt(t)}</text>
+      </g>
+    ))}
+    {items.map((it, i) => {
+      const cy = m.t + i * rowH + rowH / 2;
+      return (
+        <g class="cf-mark cf-dim" tabindex="0" role="img" aria-label={`${it.label}: ${aLabel} ${fmt(it.a)}, ${bLabel} ${fmt(it.b)}`}
+          data-tip-title={it.label} data-tip={`${ca}::${aLabel}: ${fmt(it.a)}|${cb}::${bLabel}: ${fmt(it.b)}|Δ ${fmt(it.b - it.a)}`}>
+          <rect x={m.l} y={cy - rowH / 2} width={W - m.l - m.r} height={rowH} fill="transparent" />
+          <text class="cf-label" x={m.l - 10} y={cy + 4} text-anchor="end">{it.label}</text>
+          <line x1={x(it.a)} x2={x(it.b)} y1={cy} y2={cy} stroke="rgba(255,255,255,0.22)" stroke-width="4" stroke-linecap="round" />
+          <circle cx={x(it.a)} cy={cy} r="7" fill={ca} stroke="var(--chart-surface, #0d0d0f)" stroke-width="2" />
+          <circle cx={x(it.b)} cy={cy} r="7" fill={cb} stroke="var(--chart-surface, #0d0d0f)" stroke-width="2" />
+        </g>
+      );
+    })}
+  </svg>
+</ChartFrame>

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

@@ -0,0 +1,125 @@
+---
+/**
+ * ForecastLineChart — Actuals as a solid line, projection as a dashed line with
+ * a widening confidence cone and a "today" divider.
+ *
+ * @param {string[]} categories - X-axis labels covering actual + forecast periods.
+ * @param {number[]} actual - Observed values (first N periods).
+ * @param {number[]} forecast - Projected values for the remaining periods.
+ * @param {number} confidence - Relative spread of the cone (0.1 = ±10% at the end).
+ * @param {string} prefix - Value prefix.
+ * @param {string} suffix - Value suffix.
+ * @param {string} variant - Card style (glass|solid|ghost).
+ * @param {string} size - Density (sm|md|lg).
+ */
+import ChartFrame from './ChartFrame.astro';
+import { scaleLinear, niceTicks, linePath, bandPath, formatValue, type Point } from './chart-utils';
+
+interface Props {
+  title?: string;
+  subtitle?: string;
+  categories?: string[];
+  actual?: number[];
+  forecast?: number[];
+  confidence?: number;
+  prefix?: string;
+  suffix?: string;
+  height?: number;
+  color?: string;
+  variant?: 'glass' | 'solid' | 'ghost';
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+const {
+  title = 'MRR forecast',
+  subtitle = 'Actuals vs. projected, with 80% confidence',
+  categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+  actual = [48, 51, 55, 54, 59, 63, 68],
+  forecast = [72, 76, 80, 85, 90],
+  confidence = 0.14,
+  prefix = '$',
+  suffix = 'k',
+  height = 280,
+  color = 'var(--chart-1, #3987e5)',
+  variant = 'glass',
+  size = 'md',
+  className = '',
+} = Astro.props;
+
+const W = 640;
+const H = height;
+const m = { t: 16, r: 16, b: 28, l: 48 };
+const n = categories.length;
+const a = actual.length;
+const all = [...actual, ...forecast];
+const hi = forecast.map((v, i) => v * (1 + confidence * ((i + 1) / forecast.length)));
+const lo = forecast.map((v, i) => v * (1 - confidence * ((i + 1) / forecast.length)));
+const ticks = niceTicks(Math.min(...all, ...lo) * 0.9, Math.max(...hi), 4);
+const y = scaleLinear(ticks[0], ticks[ticks.length - 1], H - m.b, m.t);
+const x = (i: number) => m.l + (i / Math.max(1, n - 1)) * (W - m.l - m.r);
+const step = (W - m.l - m.r) / Math.max(1, n - 1);
+
+const actualPts: Point[] = actual.map((v, i) => [x(i), y(v)]);
+const anchor = actualPts[a - 1];
+const fcPts: Point[] = [anchor, ...forecast.map((v, i): Point => [x(a + i), y(v)])];
+const conePts = {
+  up: [anchor, ...hi.map((v, i): Point => [x(a + i), y(v)])],
+  down: [anchor, ...lo.map((v, i): Point => [x(a + i), y(v)])],
+};
+const growth = ((forecast[forecast.length - 1] - actual[a - 1]) / actual[a - 1]) * 100;
+const fmt = (v: number) => formatValue(v, prefix, suffix);
+---
+
+<ChartFrame
+  title={title}
+  subtitle={subtitle}
+  value={fmt(forecast[forecast.length - 1])}
+  delta={`${growth >= 0 ? '+' : ''}${growth.toFixed(0)}% projected`}
+  deltaPositive={growth >= 0}
+  variant={variant}
+  size={size}
+  className={className}
+  legend={[{ label: 'Actual', color }, { label: 'Forecast', color: `color-mix(in srgb, ${color} 55%, transparent)` }]}
+  table={{
+    headers: ['Period', 'Actual', 'Forecast', 'Low', 'High'],
+    rows: categories.map((c, i) => a > i
+      ? [c, fmt(actual[i]), '—', '—', '—']
+      : [c, '—', fmt(forecast[i - a]), fmt(lo[i - a]), fmt(hi[i - a])]),
+  }}
+>
+  <svg viewBox={`0 0 ${W} ${H}`} role="img" aria-label={`${title}: actuals and forecast line chart`}>
+    {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) => <text class="cf-label" x={x(i)} y={H - 8} text-anchor="middle">{c}</text>)}
+
+    <rect x={anchor[0]} y={m.t} width={W - m.r - anchor[0]} height={H - m.t - m.b} fill="rgba(255,255,255,0.025)" aria-hidden="true" />
+    <line class="cf-axis" x1={anchor[0]} x2={anchor[0]} y1={m.t} y2={H - m.b} />
+    <text class="cf-label" x={anchor[0] + 6} y={m.t + 10}>Today</text>
+
+    <path d={bandPath(conePts.up, conePts.down, 'linear')} fill={color} fill-opacity="0.14" aria-hidden="true" />
+    <path d={linePath(fcPts)} fill="none" stroke={color} stroke-width="2" stroke-dasharray="5 5" stroke-opacity="0.85" aria-hidden="true" />
+    <path d={linePath(actualPts)} fill="none" stroke={color} stroke-width="2" stroke-linejoin="round" aria-hidden="true" />
+    <circle cx={anchor[0]} cy={anchor[1]} r="4.5" fill={color} stroke="var(--chart-surface, #0d0d0f)" stroke-width="2" aria-hidden="true" />
+
+    {categories.map((c, i) => {
+      const isF = i >= a;
+      const v = isF ? forecast[i - a] : actual[i];
+      const tip = isF
+        ? `${color}::Forecast: ${fmt(v)}|Range: ${fmt(lo[i - a])} – ${fmt(hi[i - a])}`
+        : `${color}::Actual: ${fmt(v)}`;
+      return (
+        <g class="cf-hit-group">
+          <line class="cf-cross" x1={x(i)} x2={x(i)} y1={m.t} y2={H - m.b} />
+          <circle class="cf-cross" cx={x(i)} cy={y(v)} r="4.5" fill={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}: ${isF ? 'forecast' : 'actual'} ${fmt(v)}`} data-tip-title={c} data-tip={tip} />
+        </g>
+      );
+    })}
+  </svg>
+</ChartFrame>