banhaten 0.4.0 → 0.6.0

package/registry/components/chart-block.css

@@ -0,0 +1,171 @@
+.bh-chart-block {
+  container-type: inline-size;
+  display: flex;
+  flex-direction: column;
+  min-inline-size: 0;
+  inline-size: 100%;
+  overflow: hidden;
+  border: var(--bh-border-width-default) solid var(--bh-border-subtle);
+  border-radius: var(--bh-radius-3xl-16);
+  background: var(--bh-bg-raised);
+  color: var(--bh-content-default);
+  font-family: var(--bh-font-family);
+  font-size: var(--bh-text-body-xs-regular-font-size);
+  font-weight: var(--bh-text-body-xs-regular-font-weight);
+  line-height: var(--bh-text-body-xs-regular-line-height);
+  letter-spacing: var(--bh-text-body-xs-regular-letter-spacing);
+  text-align: start;
+}
+
+.bh-chart-block-header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--bh-space-3xl-16);
+  padding: var(--bh-space-5xl-24);
+  border-block-end: var(--bh-border-width-default) solid var(--bh-border-subtle);
+}
+
+.bh-chart-block-header > div:first-child { flex: 1 1 var(--bh-space-15xl-224); }
+.bh-chart-block-header h3 {
+  margin: 0;
+  font-size: var(--bh-text-heading-xs-semibold-font-size);
+  font-weight: var(--bh-text-heading-xs-semibold-font-weight);
+  line-height: var(--bh-text-heading-xs-semibold-line-height);
+  letter-spacing: var(--bh-text-heading-xs-semibold-letter-spacing);
+}
+.bh-chart-block-header p { margin: var(--bh-space-xs-4) 0 0; color: var(--bh-content-subtle); }
+.bh-chart-block-periods { display: flex; flex-wrap: wrap; gap: var(--bh-space-xxs-2); }
+.bh-chart-block-body { display: flex; flex-direction: column; gap: var(--bh-space-5xl-24); padding: var(--bh-space-5xl-24); }
+.bh-chart-block-chart { height: var(--bh-space-17xl-288); }
+
+.bh-chart-block-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--bh-space-4xl-20); }
+.bh-chart-block-stats[data-columns="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+.bh-chart-block-stats[data-columns="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+.bh-chart-block-stat { display: flex; flex-direction: column; gap: var(--bh-space-sm-6); min-inline-size: 0; }
+.bh-chart-block-stat-label { display: flex; align-items: center; gap: var(--bh-space-sm-6); color: var(--bh-content-subtle); }
+.bh-chart-block-value {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: var(--bh-space-xs-4);
+  font-size: var(--bh-text-heading-lg-semibold-font-size);
+  font-weight: var(--bh-text-heading-lg-semibold-font-weight);
+  line-height: var(--bh-text-heading-lg-semibold-line-height);
+  letter-spacing: var(--bh-text-heading-lg-semibold-letter-spacing);
+  font-variant-numeric: tabular-nums;
+}
+.bh-chart-block-value small {
+  color: var(--bh-content-subtle);
+  font-size: var(--bh-text-body-sm-regular-font-size);
+  font-weight: var(--bh-text-body-sm-regular-font-weight);
+  line-height: var(--bh-text-body-sm-regular-line-height);
+}
+.bh-chart-block-detail { color: var(--bh-content-subtle); }
+.bh-chart-block-swatch { display: inline-block; inline-size: var(--bh-space-md-8); block-size: var(--bh-space-md-8); border-radius: var(--bh-radius-xs-2); flex: none; }
+
+.bh-chart-block-stat-button, button.bh-chart-block-list-row {
+  margin: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  letter-spacing: inherit;
+  text-align: inherit;
+  cursor: pointer;
+  outline: none;
+}
+.bh-chart-block-stat-button { padding: var(--bh-space-md-8); border-radius: var(--bh-radius-lg-8); }
+.bh-chart-block-stat-button:hover, button.bh-chart-block-list-row:hover { background: var(--bh-interactive-ghost-hover); }
+.bh-chart-block-stat-button[aria-pressed="true"] { background: var(--bh-bg-neutral-subtle); }
+.bh-chart-block [data-muted="true"] { opacity: var(--bh-opacity-muted); }
+.bh-chart-block-stat-button:focus-visible, button.bh-chart-block-list-row:focus-visible,
+.bh-chart-block-data summary:focus-visible, .bh-chart-block-table-scroll:focus-visible, .bh-chart-block-flow-viewport:focus-visible {
+  outline: var(--bh-focus-ring-width) solid var(--bh-border-focus);
+  outline-offset: var(--bh-space-xxs-2);
+}
+
+.bh-chart-block-list { display: grid; min-inline-size: 0; gap: var(--bh-space-xs-4); }
+.bh-chart-block-list[data-columns="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--bh-space-5xl-24); }
+.bh-chart-block-list-row { display: flex; align-items: center; gap: var(--bh-space-md-8); min-inline-size: 0; padding: var(--bh-space-lg-10) var(--bh-space-md-8); border-radius: var(--bh-radius-md-6); }
+.bh-chart-block-list-row > span:not(.bh-chart-block-swatch) { min-inline-size: 0; overflow-wrap: anywhere; color: var(--bh-content-subtle); }
+.bh-chart-block-list-row strong { margin-inline-start: auto; font-weight: var(--bh-text-body-xs-medium-font-weight); font-variant-numeric: tabular-nums; text-align: end; }
+.bh-chart-block[data-block="budget"] .bh-chart-block-list-row:nth-child(odd) { background: var(--bh-bg-neutral-subtle); }
+.bh-chart-block-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--bh-space-5xl-24); }
+.bh-chart-block-donut-layout { display: flex; flex-direction: column; gap: var(--bh-space-3xl-16); }
+.bh-chart-block-donut-layout > .bh-chart-block-list { padding-block-start: var(--bh-space-3xl-16); border-block-start: var(--bh-border-width-default) solid var(--bh-border-subtle); }
+.bh-chart-block-donut { position: relative; min-inline-size: 0; }
+.bh-chart-block-donut .bh-chart-block-chart { height: var(--bh-space-17xl-288); }
+.bh-chart-block-ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--bh-space-xs-4); padding-inline: 23%; pointer-events: none; text-align: center; }
+.bh-chart-block-ring-center strong {
+  font-size: var(--bh-text-heading-md-semibold-font-size);
+  font-weight: var(--bh-text-heading-md-semibold-font-weight);
+  line-height: var(--bh-text-heading-md-semibold-line-height);
+  letter-spacing: var(--bh-text-heading-md-semibold-letter-spacing);
+  font-variant-numeric: tabular-nums;
+}
+.bh-chart-block-ring-center span { color: var(--bh-content-subtle); font-size: var(--bh-text-body-2xs-regular-font-size); line-height: var(--bh-text-body-2xs-regular-line-height); }
+.bh-chart-block-ring { position: relative; min-inline-size: 0; inline-size: 100%; aspect-ratio: 1; }
+.bh-chart-block-ring > .bh-echart { height: 100%; }
+.bh-chart-block-research-rings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--bh-space-5xl-24); }
+.bh-chart-block-research-rings > div { inline-size: 100%; max-inline-size: var(--bh-space-17xl-288); justify-self: center; }
+.bh-chart-block-research-rings .bh-chart-block-ring-center strong { font-size: var(--bh-text-heading-lg-semibold-font-size); line-height: var(--bh-text-heading-lg-semibold-line-height); }
+.bh-chart-block-budget-rings { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--bh-space-md-8); }
+.bh-chart-block-budget-rings > div { display: flex; flex-direction: column; align-items: center; min-inline-size: 0; gap: var(--bh-space-xs-4); text-align: center; }
+.bh-chart-block-budget-rings .bh-chart-block-ring { max-inline-size: var(--bh-space-11xl-96); }
+.bh-chart-block-budget-rings .bh-chart-block-ring-center { padding: 0; }
+.bh-chart-block-budget-rings strong { font-size: var(--bh-text-body-sm-medium-font-size); line-height: var(--bh-text-body-sm-medium-line-height); }
+.bh-chart-block-budget-rings > div > span { color: var(--bh-content-subtle); overflow-wrap: anywhere; font-size: var(--bh-text-body-2xs-regular-font-size); line-height: var(--bh-text-body-2xs-regular-line-height); }
+.bh-chart-block-score { position: relative; inline-size: 100%; max-inline-size: var(--bh-space-17xl-288); align-self: center; }
+.bh-chart-block-score-caption { margin: calc(-1 * var(--bh-space-6xl-32)) 0 0; text-align: center; }
+.bh-chart-block-range { display: flex; gap: var(--bh-space-xs-4); color: var(--bh-content-subtle); font-size: var(--bh-text-body-2xs-regular-font-size); line-height: var(--bh-text-body-2xs-regular-line-height); }
+.bh-chart-block-range > div { display: flex; flex-direction: column; gap: var(--bh-space-xs-4); min-inline-size: 0; flex-basis: 0; }
+.bh-chart-block-range i { block-size: var(--bh-space-sm-6); border-radius: var(--bh-radius-full); }
+.bh-chart-block-range > div > span:last-child { overflow-wrap: anywhere; }
+
+.bh-chart-block-ride { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: var(--bh-space-5xl-24); }
+.bh-chart-block-ride-main { display: flex; flex-direction: column; gap: var(--bh-space-3xl-16); }
+.bh-chart-block-ride-distance { display: flex; align-items: center; gap: var(--bh-space-3xl-16); }
+.bh-chart-block-ride-distance > svg { inline-size: var(--bh-space-6xl-32); block-size: var(--bh-space-6xl-32); color: var(--bh-content-brand-default); flex: none; }
+.bh-chart-block-metric-rings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--bh-space-md-8); }
+.bh-chart-block-metric-rings > div { display: flex; flex-direction: column; align-items: center; gap: var(--bh-space-xs-4); text-align: center; }
+.bh-chart-block-metric-rings .bh-chart-block-ring { max-inline-size: var(--bh-space-12xl-128); }
+.bh-chart-block-metric-rings svg { inline-size: var(--bh-space-5xl-24); block-size: var(--bh-space-5xl-24); stroke-width: var(--bh-icon-stroke-200); }
+.bh-chart-block-metric-rings strong { font-weight: var(--bh-text-body-xs-medium-font-weight); }
+.bh-chart-block-metric-rings > div > span, .bh-chart-block-metric-rings small { color: var(--bh-content-subtle); font-size: var(--bh-text-body-2xs-regular-font-size); line-height: var(--bh-text-body-2xs-regular-line-height); }
+.bh-chart-block-ride-splits { display: flex; flex-direction: column; justify-content: space-around; gap: var(--bh-space-3xl-16); border-inline-start: var(--bh-border-width-default) solid var(--bh-border-subtle); padding-inline-start: var(--bh-space-5xl-24); }
+.bh-chart-block-flow-viewport { min-inline-size: 0; overflow-x: auto; }
+.bh-chart-block-flow-canvas { min-inline-size: calc(var(--bh-space-19xl-384) + var(--bh-space-9xl-64)); }
+.bh-chart-block-pipeline { position: relative; }
+.bh-chart-block-flow-total { position: absolute; inset-block-start: 50%; inset-inline-start: 50%; transform: translate(-50%, -50%); padding: var(--bh-space-md-8); border-radius: var(--bh-radius-lg-8); background: var(--bh-bg-raised); text-align: center; pointer-events: none; }
+.bh-chart-block:dir(rtl) .bh-chart-block-flow-total { transform: translate(50%, -50%); }
+.bh-chart-block-flow-total .bh-chart-block-stat { align-items: center; }
+.bh-chart-block[data-block="grid"] .bh-chart-block-stats, .bh-chart-block[data-block="monospace"] .bh-chart-block-stats { padding-block-end: var(--bh-space-4xl-20); border-block-end: var(--bh-border-width-default) dashed var(--bh-border-default); font-family: var(--bh-font-family-mono); }
+
+.bh-chart-block-footer { padding: var(--bh-space-3xl-16) var(--bh-space-5xl-24); border-block-start: var(--bh-border-width-default) solid var(--bh-border-subtle); color: var(--bh-content-subtle); }
+.bh-chart-block-footer > span { display: block; margin-block-end: var(--bh-space-md-8); font-size: var(--bh-text-body-2xs-regular-font-size); line-height: var(--bh-text-body-2xs-regular-line-height); }
+.bh-chart-block-data summary { inline-size: fit-content; cursor: pointer; border-radius: var(--bh-radius-xs-2); color: var(--bh-content-default); }
+.bh-chart-block-table-scroll { max-block-size: var(--bh-space-17xl-288); overflow: auto; margin-block-start: var(--bh-space-3xl-16); }
+.bh-chart-block-data table { inline-size: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
+.bh-chart-block-data caption { padding-block-end: var(--bh-space-xl-12); text-align: start; }
+.bh-chart-block-data th, .bh-chart-block-data td { padding: var(--bh-space-md-8) var(--bh-space-xl-12); border-block-end: var(--bh-border-width-default) solid var(--bh-border-subtle); text-align: start; white-space: nowrap; }
+.bh-chart-block-data th { font-weight: var(--bh-text-body-xs-medium-font-weight); color: var(--bh-content-default); }
+.bh-chart-block-data thead { background: var(--bh-bg-neutral-subtle); }
+
+@container (max-width: 560px) {
+  .bh-chart-block-header, .bh-chart-block-body { padding: var(--bh-space-3xl-16); }
+  .bh-chart-block-stats[data-columns="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .bh-chart-block-split { grid-template-columns: minmax(0, 1fr); gap: var(--bh-space-3xl-16); }
+  .bh-chart-block-split .bh-chart-block-donut { max-inline-size: var(--bh-space-17xl-288); inline-size: 100%; justify-self: center; }
+  .bh-chart-block-list[data-columns="2"] { grid-template-columns: minmax(0, 1fr); }
+  .bh-chart-block-value { font-size: var(--bh-text-heading-md-semibold-font-size); line-height: var(--bh-text-heading-md-semibold-line-height); }
+  .bh-chart-block-ride { grid-template-columns: minmax(0, 1fr); }
+  .bh-chart-block-ride-splits { flex-direction: row; justify-content: flex-start; border-inline-start: 0; border-block-start: var(--bh-border-width-default) solid var(--bh-border-subtle); padding-inline-start: 0; padding-block-start: var(--bh-space-3xl-16); }
+  .bh-chart-block-ride-splits > div { flex: 1; }
+  .bh-chart-block-budget-rings { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--bh-space-3xl-16); }
+  .bh-chart-block-research-rings { gap: var(--bh-space-md-8); }
+  .bh-chart-block-research-rings .bh-chart-block-ring-center span { font-size: var(--bh-text-body-3xs-regular-font-size); line-height: var(--bh-text-body-3xs-regular-line-height); }
+  .bh-chart-block[data-block="cache-tiers"] .bh-chart-block-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .bh-chart-block-footer { padding: var(--bh-space-3xl-16); }
+}

package/registry/components/chart-block.tsx

@@ -0,0 +1,260 @@
+"use client"
+
+import * as React from "react"
+import type { EChartsOption, PieSeriesOption } from "echarts"
+import { Bike, Gauge, Mountain, Zap } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "./button"
+import { Progress } from "./progress"
+import { EChart, type EChartTheme } from "./echart"
+import { createChartOption, type ChartDatum, type ChartSpec } from "./chart-options"
+import { attachChartInteractions } from "./chart-interactions"
+import { chartBlockDefinitions, getChartBlockSpec, type ChartBlockDefinition, type ChartBlockId } from "./chart-block-data"
+import "./chart-block.css"
+
+export { chartBlocks, type ChartBlockId } from "./chart-block-data"
+export type ChartBlockProps = React.ComponentProps<"article"> & { block: ChartBlockId }
+
+const number = (value: number) => value.toLocaleString("en-US", { maximumFractionDigits: 1 })
+const money = (value: number) => `$${number(value)}`
+const numeric = (row: ChartDatum, key: string) => Number(row[key] ?? 0)
+const total = (rows: ChartDatum[], key: string) => rows.reduce((sum, row) => sum + numeric(row, key), 0)
+const delta = (current: number, previous: number) => previous ? (current - previous) / previous * 100 : 0
+const signed = (value: number) => `${value >= 0 ? "+" : ""}${number(value)}%`
+const colorTokens = [
+  "--bh-chart-categorical-brand", "--bh-chart-categorical-success", "--bh-chart-categorical-warning",
+  "--bh-chart-categorical-danger", "--bh-chart-categorical-information", "--bh-chart-categorical-purple",
+  "--bh-chart-categorical-aqua", "--bh-chart-categorical-fuchsia",
+]
+
+function Swatch({ index }: { index: number }) {
+  return <span className="bh-chart-block-swatch" aria-hidden="true" style={{ backgroundColor: `var(${colorTokens[index % colorTokens.length]})` }} />
+}
+
+function Stat({ label, value, detail, colorIndex }: { label: React.ReactNode; value: React.ReactNode; detail?: React.ReactNode; colorIndex?: number }) {
+  return <div className="bh-chart-block-stat">
+    <span className="bh-chart-block-stat-label">{colorIndex !== undefined && <Swatch index={colorIndex} />}{label}</span>
+    <strong className="bh-chart-block-value">{value}</strong>
+    {detail && <span className="bh-chart-block-detail">{detail}</span>}
+  </div>
+}
+
+function BlockChart({ block, spec, selected, onSelect, className }: { block: ChartBlockId; spec: ChartSpec; selected?: string | null; onSelect?: (key: string) => void; className?: string }) {
+  const option = React.useCallback((theme: EChartTheme): EChartsOption => {
+    const visible = block === "latency" && selected ? { ...spec, series: spec.series?.filter((item) => item.key === selected) } : spec
+    const result = createChartOption(theme, { ...visible, legend: visible.legend ?? false })
+    if (block === "market-share") {
+      const pie = (result.series as PieSeriesOption[])[0]
+      result.series = [{ ...pie, selectedMode: "single", data: spec.data.map((row, index) => ({
+        name: String(row.name), value: numeric(row, "value"), selected: row.name === selected,
+        itemStyle: { color: theme.palette[index % theme.palette.length], opacity: !selected || row.name === selected ? 1 : theme.opacity.muted },
+      })) }]
+    }
+    return result
+  }, [block, selected, spec])
+  const onReady = React.useCallback<NonNullable<React.ComponentProps<typeof EChart>["onReady"]>>((chart, theme) => {
+    const cleanup = attachChartInteractions(chart, theme, spec)
+    const click = (event: { name?: string; seriesId?: string }) => {
+      const key = block === "latency" ? event.seriesId : event.name
+      if (key) onSelect?.(key)
+    }
+    if (onSelect) chart.on("click", click)
+    return () => { cleanup(); if (onSelect) chart.off("click", click) }
+  }, [block, onSelect, spec])
+  return <EChart className={cn("bh-chart-block-chart", className)} label={chartBlockDefinitions[block].title} option={option} onReady={onReady} />
+}
+
+function TimeSeriesBlock({ block, spec, selected, onSelect }: {
+  block: ChartBlockId; spec: ChartSpec; selected: string | null; onSelect: (key: string) => void
+}) {
+  const data = spec.data
+  const latest = data.at(-1)!
+  let statistics: React.ReactNode
+  if (block === "latency") {
+    statistics = <div className="bh-chart-block-stats" data-columns="4">{spec.series?.map((item) => <button
+      key={item.key} className="bh-chart-block-stat-button" type="button" aria-pressed={selected === item.key}
+      data-muted={selected !== null && selected !== item.key} onClick={() => onSelect(item.key)}
+    ><Stat label={item.label?.replace(" (ms)", "")} value={<>{number(numeric(latest, item.key))}<small>ms</small></>} colorIndex={item.colorIndex} detail="Latest sample" /></button>)}</div>
+  } else if (block === "portfolio") {
+    statistics = <div className="bh-chart-block-stats">{spec.series?.map((item) => {
+      const first = numeric(data[0], item.key)
+      const last = numeric(latest, item.key)
+      return <Stat key={item.key} label={item.label?.replace(" (USD)", "")} colorIndex={item.colorIndex}
+        value={signed(delta(last, first))} detail={`${last >= first ? "+" : "−"}${money(Math.abs(last - first))} over selected period`} />
+    })}</div>
+  } else if (block === "benchmark") {
+    statistics = <Stat label="Latest weekly signups" value={number(numeric(latest, "actual"))}
+      detail={`${signed(delta(numeric(latest, "actual"), numeric(latest, "target")))} vs target of ${number(numeric(latest, "target"))}`} />
+  } else if (block === "audience") {
+    statistics = <div className="bh-chart-block-stats"><Stat label="Total listener-months" value={number(total(data, "listeners"))} detail="Sum across the selected months" />
+      <Stat label="Latest month" value={number(numeric(latest, "listeners"))} detail={`${signed(delta(numeric(latest, "listeners"), numeric(data[0], "listeners")))} over selected period`} /></div>
+  } else if (block === "payouts") {
+    statistics = <div className="bh-chart-block-stats"><Stat label="Paid" colorIndex={2} value={money(total(data, "payouts"))} detail="Selected period" />
+      <Stat label="Pending" colorIndex={4} value={money(total(data, "pending"))} detail="Selected period" /></div>
+  } else if (block === "shipments") {
+    statistics = <Stat label="Orders shipped" value={number(total(data, "current"))}
+      detail={`${signed(delta(total(data, "current"), total(data, "previous")))} vs the same slots last week`} />
+  } else if (block === "peak") {
+    const peak = data.reduce((best, row) => numeric(row, "organic") + numeric(row, "paid") > numeric(best, "organic") + numeric(best, "paid") ? row : best)
+    statistics = <Stat label="Best week" value={number(numeric(peak, "organic") + numeric(peak, "paid"))} detail={`Signups in ${peak.name}`} />
+  } else {
+    const key = block === "grid" ? "sessions" : "sales"
+    const peak = data.reduce((best, row) => numeric(row, key) > numeric(best, key) ? row : best)
+    statistics = <div className="bh-chart-block-stats"><Stat label={block === "grid" ? "Total sessions" : "Total sales"}
+      value={block === "grid" ? number(total(data, key)) : money(total(data, key))} />
+      <Stat label={block === "grid" ? "Peak hour" : "Top month"} value={String(peak.name)} detail={`${number(numeric(peak, key))} ${key}`} /></div>
+  }
+  const chart = <BlockChart block={block} spec={spec} selected={selected} onSelect={block === "latency" ? onSelect : undefined} />
+  return <>{block === "payouts" ? <>{chart}{statistics}</> : <>{statistics}{chart}</>}</>
+}
+
+function ValueList({ data, format, columns = false, selected, onSelect }: {
+  data: ChartDatum[]; format: (row: ChartDatum) => string; columns?: boolean; selected?: string | null; onSelect?: (key: string) => void
+}) {
+  return <div className="bh-chart-block-list" data-columns={columns ? "2" : undefined}>{data.map((row, index) => {
+    const content = <><Swatch index={index} /><span>{String(row.name)}</span><strong>{format(row)}</strong></>
+    return onSelect ? <button key={String(row.name)} className="bh-chart-block-list-row" type="button" aria-pressed={selected === row.name}
+      data-muted={Boolean(selected && selected !== row.name)} onClick={() => onSelect(String(row.name))}>{content}</button>
+      : <div key={String(row.name)} className="bh-chart-block-list-row">{content}</div>
+  })}</div>
+}
+
+function Ring({ label, value, max = 100, index, dotted = false, children }: {
+  label: string; value: number; max?: number; index: number; dotted?: boolean; children?: React.ReactNode
+}) {
+  const option = React.useCallback((theme: EChartTheme): EChartsOption => {
+    const result = createChartOption(theme, { family: "radial", data: [{ name: label, value }], max, legend: false, series: [{ key: "value", colorIndex: index }] })
+    if (!dotted) return { ...result, polar: (Array.isArray(result.polar) ? result.polar : [result.polar]).map((polar) => ({ ...polar, radius: ["65%", "87%"], center: ["50%", "50%"] })) }
+    const filled = Math.round(value / max * 40)
+    return { ...result, tooltip: { show: false }, series: [{
+      type: "pie", radius: ["83%", "91%"], center: ["50%", "50%"], silent: true, animation: false,
+      label: { show: false }, labelLine: { show: false }, emphasis: { disabled: true },
+      data: Array.from({ length: 80 }, (_, position) => ({ value: 1, itemStyle: {
+        color: position % 2 ? "transparent" : position / 2 < filled ? theme.palette[index] : theme.neutral,
+        borderWidth: 0, borderRadius: theme.markRadius, shadowBlur: 0,
+      } })),
+    }] }
+  }, [dotted, index, label, max, value])
+  return <div className="bh-chart-block-ring"><EChart option={option} label={`${label}: ${number(value)} of ${number(max)}`} />
+    <div className="bh-chart-block-ring-center">{children ?? <strong>{number(value)}%</strong>}</div></div>
+}
+
+function PieBlock({ block, spec, selected, onSelect }: { block: ChartBlockId; spec: ChartSpec; selected: string | null; onSelect: (key: string) => void }) {
+  if (block === "progress-rings") return <div className="bh-chart-block-research-rings">{spec.data.map((row, index) => <div key={String(row.name)}>
+    <Ring label={String(row.name)} value={numeric(row, "value")} index={index} dotted><strong>{row.value}%</strong><span>{row.name}</span></Ring>
+  </div>)}</div>
+  const revenue = block === "revenue-mix"
+  const amount = total(spec.data, "value")
+  return <div className={revenue ? "bh-chart-block-split" : "bh-chart-block-donut-layout"}>
+    <div className="bh-chart-block-donut"><BlockChart block={block} spec={spec} selected={selected} onSelect={revenue ? undefined : onSelect} />
+      <div className="bh-chart-block-ring-center"><strong>{revenue ? money(amount / 1000) + "k" : money(amount) + "B"}</strong><span>{revenue ? "Total revenue" : "Ecosystem value"}</span></div>
+    </div>
+    <ValueList data={spec.data} columns={!revenue} selected={selected} onSelect={revenue ? undefined : onSelect}
+      format={(row) => revenue ? money(numeric(row, "value")) : `${money(numeric(row, "value"))}B · ${number(numeric(row, "value") / amount * 100)}%`} />
+  </div>
+}
+
+function ReliabilityBlock({ spec }: { spec: ChartSpec }) {
+  const bandColors = [3, 2, 4, 1]
+  const option = React.useCallback((theme: EChartTheme): EChartsOption => ({
+    ...createChartOption(theme, { ...spec, legend: false }), tooltip: { show: false }, series: [{
+      type: "pie", radius: ["69%", "87%"], startAngle: 210, endAngle: -30, clockwise: true,
+      padAngle: 4, silent: true, label: { show: false }, labelLine: { show: false },
+      itemStyle: { borderRadius: theme.markRadius, shadowBlur: 0 },
+      data: spec.data.map((row, index) => ({ name: String(row.name), value: numeric(row, "value"), itemStyle: { color: theme.palette[bandColors[index]] } })),
+    }],
+  }), [spec])
+  return <><div className="bh-chart-block-score"><EChart option={option} label="Reliability score 842 of 1000, excellent" />
+    <div className="bh-chart-block-ring-center"><strong>842</strong><span>out of 1,000</span></div></div>
+    <p className="bh-chart-block-score-caption">Reliability is <strong>excellent</strong></p>
+    <div className="bh-chart-block-range">{spec.data.map((row, index) => <div key={String(row.name)} style={{ flexGrow: numeric(row, "value") }}>
+      <span>{row.from}</span><i style={{ backgroundColor: `var(${colorTokens[bandColors[index]]})` }} /><span>{row.name}</span>
+    </div>)}<span>1,000</span></div>
+  </>
+}
+
+function BudgetBlock({ spec }: { spec: ChartSpec }) {
+  return <><Stat label="Monthly allocation" value={money(total(spec.data, "amount"))} />
+    <div className="bh-chart-block-budget-rings">{spec.data.map((row, index) => <div key={String(row.name)}>
+      <Ring label={String(row.name)} value={numeric(row, "value")} index={index} /><span>{row.name}</span>
+    </div>)}</div><ValueList data={spec.data} format={(row) => `${row.value}% · ${money(numeric(row, "amount"))}`} /></>
+}
+
+function RideBlock({ spec }: { spec: ChartSpec }) {
+  const [distance, ...metrics] = spec.data
+  const icons = [Mountain, Zap, Gauge]
+  return <div className="bh-chart-block-ride"><div className="bh-chart-block-ride-main">
+    <div className="bh-chart-block-ride-distance"><Bike aria-hidden="true" /><Stat label="Distance ridden" value={<>{distance.value}<small>km</small></>} detail={`Goal: ${distance.goal} km`} /></div>
+    <Progress aria-label="Distance goal" value={numeric(distance, "value")} max={numeric(distance, "goal")} labelPosition="none" showIndicator={false} />
+    <div className="bh-chart-block-metric-rings">{metrics.map((row, index) => {
+      const Icon = icons[index]
+      return <div key={String(row.name)}><Ring label={String(row.name)} value={numeric(row, "value")} max={numeric(row, "goal")} index={index + 1}><Icon aria-hidden="true" /></Ring>
+        <strong>{row.value} <span>{row.unit}</span></strong><span>{row.name}</span><small>Goal {row.goal} {row.unit}</small></div>
+    })}</div>
+  </div><div className="bh-chart-block-ride-splits"><Stat label="Sprints" value="7" detail="efforts" /><Stat label="Recovery" value="46" detail="minutes" /></div></div>
+}
+
+function CacheBlock({ spec }: { spec: ChartSpec }) {
+  return <><div className="bh-chart-block-split"><BlockChart block="cache-tiers" spec={spec} />
+    <div className="bh-chart-block-stats" data-columns="2"><Stat label="Served warm" value="9,150" /><Stat label="Revalidated" value="1,280" /><Stat label="Evictions" value="412" /><Stat label="Purges" value="96" /></div>
+  </div><ValueList data={spec.data} columns format={(row) => `${number(numeric(row, "count"))}/1,000 · ${row.value}%`} /></>
+}
+
+function FlowBlock({ block, spec }: { block: "allocation" | "pipeline"; spec: ChartSpec }) {
+  const amount = spec.links!.filter((link) => block === "pipeline" ? link.target === 4 : link.source === 0).reduce((sum, link) => sum + link.value, 0)
+  return <><div className="bh-chart-block-flow-viewport" tabIndex={0} role="region" aria-label={`${chartBlockDefinitions[block].title} flow diagram`}>
+    <div className={cn("bh-chart-block-flow-canvas", block === "pipeline" && "bh-chart-block-pipeline")}>
+    <BlockChart block={block} spec={spec} />
+    {block === "pipeline" && <div className="bh-chart-block-flow-total"><Stat label="Total booked" value={money(amount)} detail="4 sources · 4 routes" /></div>}
+    </div></div>
+    {block === "allocation" && <div className="bh-chart-block-stats" data-columns="3"><Stat label="Total inflow" value={money(amount) + "k"} />
+      <Stat label="Asset classes" value="3" /><Stat label="Destinations" value="3" /></div>}
+  </>
+}
+
+function BlockDataTable({ block, spec, period }: { block: ChartBlockId; spec: ChartSpec; period: string }) {
+  const rows: ChartDatum[] = spec.family === "sankey" ? spec.links!.map((link) => ({
+    source: typeof link.source === "number" ? spec.nodes![link.source].name : link.source,
+    target: typeof link.target === "number" ? spec.nodes![link.target].name : link.target,
+    value: link.value,
+  })) : spec.data
+  const keys = Object.keys(rows[0] ?? {})
+  const labels: Record<string, string> = { name: "Category / time", value: "Value", goal: "Goal", unit: "Unit", from: "Band starts at", amount: "Amount (USD)", count: "Requests", source: "Source", target: "Target" }
+  spec.series?.forEach((item) => { labels[item.key] = item.label ?? item.key })
+  if (spec.family === "sankey") labels.value = block === "allocation" ? "Amount (USD thousands)" : "Amount (USD)"
+  return <details className="bh-chart-block-data"><summary>View data table</summary><div className="bh-chart-block-table-scroll" tabIndex={0} role="region" aria-label={`${chartBlockDefinitions[block].title} data`}>
+    <table><caption>{chartBlockDefinitions[block].title} · {period === "All" ? "All available samples" : period} · Illustrative data</caption>
+      <thead><tr>{keys.map((key) => <th key={key} scope="col">{labels[key] ?? key}</th>)}</tr></thead>
+      <tbody>{rows.map((row, index) => <tr key={index}>{keys.map((key, column) => column === 0 ? <th scope="row" key={key}>{row[key]}</th> : <td key={key}>{typeof row[key] === "number" ? number(row[key]) : row[key]}</td>)}</tr>)}</tbody>
+    </table>
+  </div></details>
+}
+
+/** Ready-made examples: shared chart behavior, Banhaten tokens, and inspectable data. */
+export function ChartBlock({ block, className, ...props }: ChartBlockProps) {
+  const definition: ChartBlockDefinition = chartBlockDefinitions[block]
+  const [period, setPeriod] = React.useState("All")
+  const [selection, setSelection] = React.useState<{ block: ChartBlockId; key: string } | null>(null)
+  const selected = selection?.block === block ? selection.key : null
+  const effectivePeriod = definition.periods?.some((entry) => entry.label === period) ? period : "All"
+  const spec = React.useMemo(() => getChartBlockSpec(block, effectivePeriod), [block, effectivePeriod])
+  const titleId = React.useId()
+  const select = (key: string) => setSelection(selected === key ? null : { block, key })
+  let content: React.ReactNode
+  if (definition.periods) content = <TimeSeriesBlock block={block} spec={spec} selected={selected} onSelect={select} />
+  else if (block === "reliability-score") content = <ReliabilityBlock spec={spec} />
+  else if (spec.family === "pie") content = <PieBlock block={block} spec={spec} selected={selected} onSelect={select} />
+  else if (block === "budget") content = <BudgetBlock spec={spec} />
+  else if (block === "ride") content = <RideBlock spec={spec} />
+  else if (block === "cache-tiers") content = <CacheBlock spec={spec} />
+  else if (block === "allocation" || block === "pipeline") content = <FlowBlock block={block} spec={spec} />
+  return <article className={cn("bh-chart-block", className)} data-slot="chart-block" data-block={block} aria-labelledby={titleId} {...props}>
+    <header className="bh-chart-block-header"><div><h3 id={titleId}>{definition.title}</h3><p>{definition.description}</p></div>
+      {definition.periods && <div className="bh-chart-block-periods" role="group" aria-label={`${definition.title} period`}>{definition.periods.map((entry) =>
+        <Button key={entry.label} type="button" size="xs" variant={effectivePeriod === entry.label ? "soft" : "ghost"} aria-pressed={effectivePeriod === entry.label} onClick={() => setPeriod(entry.label)}>{entry.label}</Button>)}</div>}
+    </header>
+    <div className="bh-chart-block-body">{content}</div>
+    <footer className="bh-chart-block-footer"><span>Illustrative data</span><BlockDataTable block={block} spec={spec} period={effectivePeriod} /></footer>
+  </article>
+}

package/registry/components/chart-interactions.ts

@@ -0,0 +1,123 @@
+import { graphic, type ECharts } from "echarts/core"
+import type { EChartsOption, SeriesOption } from "echarts"
+import type { EChartTheme } from "./echart-theme"
+import { createChartOption } from "./chart-options"
+import { barPaint, chartAlpha, expandablePaint, seriesColors } from "./chart-options.paint"
+import { chartSeries, type ChartSpec } from "./chart-options.types"
+
+/** Attach optional interaction behavior. Every listener and animation has a cleanup. */
+export function attachChartInteractions(chart: ECharts, theme: EChartTheme, spec: ChartSpec): () => void {
+  const entries = chartSeries(spec)
+  const animated = entries.filter((entry) => entry.stroke === "animated-dashed")
+  const expanding = entries.filter((entry) => (entry.variant ?? spec.variant) === "expandable")
+  const stripped = entries.filter((entry) => (entry.variant ?? spec.variant) === "stripped")
+  const reveal = Boolean(spec.hoverReveal && (spec.family === "line" || spec.family === "area"))
+  if (!animated.length && !expanding.length && !stripped.length && !reveal) return () => {}
+  const original = createChartOption(theme, spec)
+  const series = (Array.isArray(original.series) ? original.series : [original.series]).filter((item): item is SeriesOption => Boolean(item))
+  let frame: number | undefined
+  let hovered: number | null = null
+  let disposed = false
+  let dirty = false
+  const started = performance.now()
+  let capSignature = ""
+
+  // Keep the colored cap a token-sized strip after data changes, zoom, and resize.
+  const updateCaps = () => {
+    if (disposed || chart.isDisposed()) return
+    const ratios: number[] = []
+    const patches = stripped.flatMap((entry) => {
+      const originalSeries = series.find((item) => item.id === entry.key)
+      if (originalSeries?.type !== "bar") return []
+      const colors = seriesColors(theme, entry, entries.indexOf(entry))
+      const data = originalSeries.data?.map((datum, index) => {
+        if (!datum || typeof datum !== "object" || Array.isArray(datum) || !("value" in datum) || typeof datum.value !== "number") return datum
+        const point = chart.convertToPixel({ gridIndex: 0 }, spec.horizontal ? [datum.value, index] : [index, datum.value])
+        const origin = chart.convertToPixel({ gridIndex: 0 }, spec.horizontal ? [0, index] : [index, 0])
+        const axis = spec.horizontal ? 0 : 1
+        const span = Array.isArray(point) && Array.isArray(origin) ? Math.abs(point[axis] - origin[axis]) : 0
+        const ratio = span > 0 ? Math.min(1, theme.space.xs / span) : 0
+        ratios.push(ratio)
+        return { ...datum, itemStyle: { ...datum.itemStyle, color: barPaint(theme, colors, "stripped", Boolean(spec.horizontal), ratio) } }
+      })
+      return [{ id: entry.key, type: "bar" as const, data }]
+    })
+    const signature = ratios.join(",")
+    if (signature === capSignature) return
+    capSignature = signature
+    chart.setOption({ series: patches }, { silent: true, lazyUpdate: true })
+  }
+
+  const paint = (time: number) => {
+    frame = undefined
+    if (disposed || chart.isDisposed()) return
+    const patches: SeriesOption[] = []
+    entries.forEach((entry, seriesIndex) => {
+      const originalSeries = series.find((item) => item.id === entry.key)
+      if (!originalSeries) return
+      const colors = seriesColors(theme, entry, seriesIndex)
+      const patch: Record<string, unknown> = { id: entry.key }
+      let changed = false
+      if (entry.stroke === "animated-dashed" && !theme.reducedMotion) {
+        patch.lineStyle = { dashOffset: -((time - started) / Math.max(theme.duration, 1)) * theme.space.xl }
+        changed = true
+      }
+      if (reveal && dirty && originalSeries.type === "line") {
+        const cutoff = hovered === null ? 1 : hovered / Math.max(1, spec.data.length - 1)
+        const gradient = new graphic.LinearGradient(0, 0, 1, 0, [
+          { offset: 0, color: colors[0] }, { offset: cutoff, color: colors.at(-1)! },
+          { offset: cutoff, color: hovered === null ? colors.at(-1)! : theme.neutral },
+          { offset: 1, color: hovered === null ? colors.at(-1)! : theme.neutral },
+        ])
+        patch.lineStyle = { ...originalSeries.lineStyle, ...patch.lineStyle as object, color: gradient }
+        if (spec.family === "area") {
+          patch.areaStyle = hovered === null ? originalSeries.areaStyle : {
+            color: new graphic.LinearGradient(0, 0, 1, 0, gradient.colorStops.map((stop) => ({ ...stop, color: chartAlpha(stop.color, theme.opacity.area) }))),
+          }
+        }
+        changed = true
+      }
+      if ((entry.variant ?? spec.variant) === "expandable" && dirty && originalSeries.type === "bar") {
+        patch.data = originalSeries.data?.map((datum, index) => ({
+          ...(typeof datum === "object" && datum !== null && !Array.isArray(datum) ? datum : { value: datum }),
+          itemStyle: { color: expandablePaint(colors[0], hovered === index ? 1 : theme.opacity.soft, Boolean(spec.horizontal)) },
+        }))
+        changed = true
+      }
+      if (changed) patches.push(patch as SeriesOption)
+    })
+    if (patches.length) chart.setOption({ series: patches } satisfies EChartsOption, { silent: true, lazyUpdate: true })
+    dirty = false
+    if (animated.length && !theme.reducedMotion) frame = requestAnimationFrame(paint)
+  }
+  const schedule = () => { if (frame === undefined) frame = requestAnimationFrame(paint) }
+  const move = (event: { offsetX: number; offsetY: number }) => {
+    const point = [event.offsetX, event.offsetY]
+    const converted = chart.containPixel({ gridIndex: 0 }, point) ? chart.convertFromPixel({ gridIndex: 0 }, point) : null
+    const value = Array.isArray(converted) ? converted[spec.horizontal ? 1 : 0] : null
+    const next = typeof value === "number" ? Math.max(0, Math.min(spec.data.length - 1, Math.round(value))) : null
+    if (next === hovered) return
+    hovered = next
+    dirty = true
+    schedule()
+  }
+  const leave = () => {
+    hovered = null
+    dirty = true
+    schedule()
+  }
+  const renderer = chart.getZr()
+  if (expanding.length || reveal) {
+    renderer.on("mousemove", move)
+    renderer.on("globalout", leave)
+  }
+  if (animated.length && !theme.reducedMotion) schedule()
+  if (stripped.length) { updateCaps(); chart.on("finished", updateCaps) }
+  return () => {
+    disposed = true
+    if (frame !== undefined) cancelAnimationFrame(frame)
+    renderer.off("mousemove", move)
+    renderer.off("globalout", leave)
+    if (stripped.length) chart.off("finished", updateCaps)
+  }
+}