banhaten 0.4.0 → 0.6.0

package/registry/components/chart-options.cartesian.ts

@@ -0,0 +1,162 @@
+import type { BarSeriesOption, LineSeriesOption, PictorialBarSeriesOption } from "echarts/charts"
+import type { EChartsOption } from "echarts"
+import type { EChartTheme } from "./echart-theme"
+import { areaPaint, barPaint, chartDecal, chartGradient, seriesColors } from "./chart-options.paint"
+import { chartNumber, chartSeries, type ChartCurve, type ChartSeries, type ChartSpec } from "./chart-options.types"
+import { cartesianTooltip, dotItemStyle } from "./chart-options.parts"
+
+function curveOption(curve: ChartCurve | undefined): Pick<LineSeriesOption, "smooth" | "smoothMonotone" | "step"> {
+  if (curve === "step") return { step: "middle" }
+  if (!curve || curve === "linear") return { smooth: false }
+  return { smooth: curve === "bump" ? 0.5 : true, smoothMonotone: curve === "monotoneY" ? "y" : "x" }
+}
+
+function valuesFor(spec: ChartSpec, series: ChartSeries, all: ChartSeries[]) {
+  const percent = spec.stack === "percent" || spec.stack === "expanded"
+  return spec.data.map((row) => {
+    const value = chartNumber(row[series.key])
+    if (value === null || !percent) return value
+    const sum = all.reduce((total, entry) => total + Math.max(0, chartNumber(row[entry.key]) ?? 0), 0)
+    return sum === 0 ? 0 : Math.max(0, value) / sum * 100
+  })
+}
+
+function isBarSeries(spec: ChartSpec, entry: ChartSeries) {
+  return entry.type === "bar" || (spec.family === "bar" && !entry.type)
+}
+
+function barEndRadius(theme: EChartTheme, spec: ChartSpec, all: ChartSeries[], index: number, point: number, value: number | null): number | number[] {
+  if (!value) return 0
+  // Positive and negative stacks have independent exposed ends; missing values leave no join.
+  if (spec.stack && spec.stack !== "default" && all.slice(index + 1).some((entry) => {
+    const next = chartNumber(spec.data[point][entry.key])
+    return isBarSeries(spec, entry) && next !== null && next * value > 0
+  })) return 0
+  const radius = theme.markRadius
+  if (spec.horizontal) return (value > 0) !== theme.rtl ? [0, radius, radius, 0] : [radius, 0, 0, radius]
+  return value > 0 ? [radius, radius, 0, 0] : [0, 0, radius, radius]
+}
+
+function lineSeries(theme: EChartTheme, spec: ChartSpec, entry: ChartSeries, index: number, all: ChartSeries[]): LineSeriesOption[] {
+  const values = valuesFor(spec, entry, all)
+  const colors = seriesColors(theme, entry, index)
+  const isArea = entry.type === "area" || spec.family === "area"
+  // Forecast tails must not enter a stack as a duplicate series and change totals.
+  const hasBuffer = entry.buffer && values.length > 1 && (!spec.stack || spec.stack === "default")
+  const base: LineSeriesOption = {
+    id: entry.key,
+    name: entry.label ?? entry.key,
+    type: "line",
+    ...curveOption(entry.curve ?? spec.curve),
+    data: hasBuffer ? values.map((value, point) => point === values.length - 1 ? null : value) : values,
+    stack: spec.stack && spec.stack !== "default" ? "total" : undefined,
+    connectNulls: false,
+    showSymbol: entry.dots ?? Boolean(entry.dotStyle),
+    symbol: "circle",
+    symbolSize: entry.dotStyle === "border" ? theme.space.md : theme.space.sm,
+    lineStyle: { color: chartGradient(colors), width: theme.lineWidth, type: entry.stroke === "solid" || !entry.stroke ? "solid" : "dashed", cap: "round" },
+    itemStyle: dotItemStyle(theme, colors[0], entry.dotStyle),
+    areaStyle: isArea ? { color: areaPaint(theme, colors, entry.variant ?? spec.variant ?? "gradient"), opacity: 1 } : undefined,
+    emphasis: { focus: spec.hoverHighlight ? "series" : "none", scale: true, lineStyle: { width: theme.lineWidth }, itemStyle: dotItemStyle(theme, colors[0], entry.activeDotStyle ?? entry.dotStyle) },
+    blur: { lineStyle: { opacity: theme.opacity.muted }, areaStyle: { opacity: theme.opacity.muted }, itemStyle: { opacity: theme.opacity.muted } },
+    selectedMode: "single",
+    select: { itemStyle: { color: colors[0] } },
+  }
+  if (!hasBuffer) return [base]
+  return [base, {
+    ...base, id: `${entry.key}-buffer`,
+    data: values.map((value, point) => point >= values.length - 2 ? value : null),
+    stack: undefined, silent: true,
+    lineStyle: { ...base.lineStyle, type: "dashed" },
+  }]
+}
+
+function barSeries(theme: EChartTheme, spec: ChartSpec, entry: ChartSeries, index: number, all: ChartSeries[]): (BarSeriesOption | PictorialBarSeriesOption)[] {
+  const values = valuesFor(spec, entry, all)
+  const colors = seriesColors(theme, entry, index)
+  const variant = entry.variant ?? spec.variant ?? "default"
+  const totals = spec.data.map((row) => all.reduce((total, series) => total + (chartNumber(row[series.key]) ?? 0), 0))
+  const maximumIndex = totals.indexOf(Math.max(...totals))
+  const fill = barPaint(theme, colors, variant, Boolean(spec.horizontal))
+  const data = values.map((value, point) => ({
+    value,
+    itemStyle: {
+      color: spec.highlightMax && point !== maximumIndex ? theme.neutral : fill,
+      decal: chartDecal(theme, colors[0], entry.buffer && point === values.length - 1 ? "hatched" : variant),
+      borderWidth: entry.buffer && point === values.length - 1 ? theme.borderWidth : 0,
+      borderColor: colors[0],
+      borderRadius: variant === "blocks" || variant === "expandable" ? 0 : barEndRadius(theme, spec, all, index, point, value),
+    },
+  }))
+  const base: BarSeriesOption = {
+    id: entry.key, name: entry.label ?? entry.key, type: "bar", data,
+    stack: spec.stack && spec.stack !== "default" ? "total" : undefined,
+    barMaxWidth: theme.space.xxl,
+    barCategoryGap: "35%",
+    itemStyle: { color: fill, borderRadius: 0 },
+    emphasis: { focus: spec.hoverHighlight ? "series" : "none", itemStyle: { color: colors[0] }, label: { show: variant === "expandable", position: spec.horizontal ? "right" : "top", color: theme.foreground, fontFamily: theme.fontFamily, fontSize: theme.fontSize, fontWeight: theme.mediumWeight } },
+    blur: { itemStyle: { opacity: theme.opacity.muted } },
+    selectedMode: "single",
+    select: { itemStyle: { color: colors[0] } },
+  }
+  if (variant !== "blocks") return [base]
+  const max = spec.max ?? Math.max(1, ...values.map((value) => value ?? 0))
+  const blocks: PictorialBarSeriesOption = {
+    id: entry.key, name: base.name, type: "pictorialBar", data,
+    symbol: "rect", symbolRepeat: true, symbolClip: true,
+    symbolSize: spec.horizontal ? [theme.space.sm, theme.space.lg] : [theme.space.lg, theme.space.sm],
+    symbolMargin: theme.borderWidth, symbolBoundingData: max,
+    itemStyle: { color: colors[0] }, z: 2,
+    emphasis: { itemStyle: { color: colors[0] } },
+  }
+  const background: PictorialBarSeriesOption = {
+    ...blocks, id: `${entry.key}-track`, name: "", data: values.map(() => max),
+    symbolClip: false, silent: true, tooltip: { show: false },
+    itemStyle: { color: theme.neutral }, z: 0,
+  }
+  return [background, blocks]
+}
+
+export function cartesianOption(theme: EChartTheme, spec: ChartSpec): EChartsOption {
+  const all = chartSeries(spec)
+  const percent = spec.stack === "percent" || spec.stack === "expanded"
+  const category = {
+    type: "category" as const,
+    data: spec.data.map((row) => String(row[spec.categoryKey ?? "name"] ?? "")),
+    boundaryGap: spec.family === "bar" || spec.family === "composed",
+    inverse: spec.horizontal ? true : theme.rtl,
+    position: spec.horizontal && theme.rtl ? "right" as const : undefined,
+    axisTick: { show: false }, axisLine: { show: false },
+    axisLabel: { color: theme.muted, fontFamily: theme.fontFamily, fontSize: theme.labelFontSize, margin: theme.space.md },
+  }
+  const value = {
+    type: "value" as const,
+    inverse: Boolean(spec.horizontal && theme.rtl),
+    position: !spec.horizontal && theme.rtl ? "right" as const : undefined,
+    max: percent ? 100 : spec.max,
+    axisLine: { show: false }, axisTick: { show: false },
+    axisLabel: { color: theme.muted, fontFamily: theme.fontFamily, fontSize: theme.labelFontSize, formatter: percent ? "{value}%" : undefined },
+    splitLine: { lineStyle: { color: theme.border, width: theme.borderWidth, type: "dashed" as const } },
+  }
+  const series = all.flatMap<LineSeriesOption | BarSeriesOption | PictorialBarSeriesOption>((entry, index) => isBarSeries(spec, entry)
+    ? barSeries(theme, spec, entry, index, all)
+    : lineSeries(theme, spec, entry, index, all))
+  return {
+    grid: { left: theme.rtl ? theme.space.lg : theme.space.axis, right: theme.rtl ? theme.space.axis : theme.space.lg, top: spec.legend === false ? theme.space.lg : theme.space.axis, bottom: spec.brush ? theme.space.axis * 2 : theme.space.axis },
+    xAxis: spec.horizontal ? value : category,
+    yAxis: spec.horizontal ? category : value,
+    legend: { show: spec.legend !== false, data: all.map((entry) => entry.label ?? entry.key), top: 0, right: 0 },
+    tooltip: { trigger: "axis", formatter: cartesianTooltip(theme, spec), axisPointer: { type: "line", lineStyle: { color: theme.border, width: theme.borderWidth } } },
+    dataZoom: spec.brush ? [{
+      type: "slider", xAxisIndex: spec.horizontal ? undefined : 0, yAxisIndex: spec.horizontal ? 0 : undefined,
+      bottom: theme.space.xs, height: theme.space.xxl, start: 0, end: 100,
+      borderColor: theme.border, backgroundColor: theme.surface, fillerColor: theme.neutral,
+      handleStyle: { color: theme.surface, borderColor: theme.border },
+      moveHandleStyle: { color: theme.border },
+      textStyle: { color: theme.muted, fontFamily: theme.fontFamily, fontSize: theme.labelFontSize },
+      dataBackground: { lineStyle: { color: theme.muted }, areaStyle: { color: theme.neutral } },
+      selectedDataBackground: { lineStyle: { color: theme.palette[0] }, areaStyle: { color: theme.neutral } },
+    }] : [],
+    series,
+  }
+}

package/registry/components/chart-options.paint.ts

@@ -0,0 +1,99 @@
+import { color, graphic } from "echarts/core"
+import type { EChartTheme } from "./echart-theme"
+import { chartColor, type ChartSeries, type ChartVariant } from "./chart-options.types"
+
+export function chartAlpha(paint: string, opacity: number): string {
+  return color.modifyAlpha(paint, opacity) ?? paint
+}
+
+export function seriesColors(theme: EChartTheme, series: ChartSeries, index: number): string[] {
+  return (series.colorIndices?.length ? series.colorIndices : [series.colorIndex ?? index]).map((slot) => chartColor(theme, slot))
+}
+
+export function chartGradient(colors: string[], vertical = false) {
+  if (colors.length === 1) return colors[0]
+  return new graphic.LinearGradient(0, 0, vertical ? 0 : 1, vertical ? 1 : 0,
+    colors.map((paint, index) => ({ offset: index / (colors.length - 1), color: paint })))
+}
+
+export function areaPaint(theme: EChartTheme, colors: string[], variant: ChartVariant) {
+  if (["dotted", "lines", "hatched"].includes(variant) && typeof document !== "undefined") {
+    const tile = document.createElement("canvas")
+    tile.width = Math.max(1, Math.round(theme.space.md))
+    tile.height = tile.width
+    const context = tile.getContext("2d")
+    if (context) {
+      context.fillStyle = chartAlpha(colors[0], theme.opacity.soft)
+      context.fillRect(0, 0, tile.width, tile.height)
+      context.fillStyle = chartAlpha(colors[0], theme.opacity.area)
+      context.strokeStyle = context.fillStyle
+      context.lineWidth = theme.borderWidth
+      if (variant === "dotted") {
+        context.beginPath()
+        context.arc(tile.width / 2, tile.height / 2, theme.borderWidth, 0, Math.PI * 2)
+        context.fill()
+      } else if (variant === "lines") {
+        context.fillRect(0, 0, tile.width, theme.borderWidth)
+      } else {
+        for (const offset of [-tile.width, 0, tile.width]) {
+          context.beginPath()
+          context.moveTo(offset, tile.height)
+          context.lineTo(offset + tile.width, 0)
+          context.stroke()
+        }
+      }
+      return { image: tile, repeat: "repeat" as const }
+    }
+  }
+  if (variant === "gradient" || variant === "gradient-reverse") {
+    const reverse = variant === "gradient-reverse"
+    return new graphic.LinearGradient(0, 0, 0, 1, [
+      { offset: 0, color: chartAlpha(colors[0], reverse ? 0 : theme.opacity.area) },
+      { offset: 1, color: chartAlpha(colors.at(-1)!, reverse ? theme.opacity.area : 0) },
+    ])
+  }
+  return chartGradient(colors.map((paint) => chartAlpha(paint, theme.opacity.area)))
+}
+
+export function chartDecal(theme: EChartTheme, paint: string, variant: ChartVariant) {
+  if (!["hatched", "lines", "dotted"].includes(variant)) return undefined
+  return {
+    symbol: variant === "dotted" ? "circle" : "rect",
+    symbolSize: variant === "dotted" ? theme.opacity.area : 1,
+    color: paint,
+    backgroundColor: chartAlpha(paint, theme.opacity.soft),
+    dashArrayX: variant === "dotted" ? [theme.space.xs, theme.space.xs] : [1, 0],
+    dashArrayY: [theme.borderWidth, theme.space.xs],
+    rotation: variant === "hatched" ? -Math.PI / 4 : 0,
+  }
+}
+
+export function expandablePaint(paint: string, fraction: number, horizontal: boolean) {
+  const low = (1 - fraction) / 2
+  const high = 1 - low
+  const clear = chartAlpha(paint, 0)
+  return new graphic.LinearGradient(0, 0, horizontal ? 0 : 1, horizontal ? 1 : 0, [
+    { offset: 0, color: clear }, { offset: low, color: clear },
+    { offset: low, color: paint }, { offset: high, color: paint },
+    { offset: high, color: clear }, { offset: 1, color: clear },
+  ])
+}
+
+export function barPaint(theme: EChartTheme, colors: string[], variant: ChartVariant, horizontal: boolean, capFraction = theme.space.xs / theme.space.axis) {
+  if (variant === "expandable") return expandablePaint(colors[0], theme.opacity.soft, horizontal)
+  if (variant === "gradient") return new graphic.LinearGradient(0, 0, horizontal ? 1 : 0, horizontal ? 0 : 1, [
+    { offset: 0, color: colors[0] }, { offset: 1, color: chartAlpha(colors.at(-1)!, theme.opacity.soft) },
+  ])
+  if (variant === "duotone" || variant === "duotone-reverse" || variant === "stripped") {
+    const muted = chartAlpha(colors[0], theme.opacity.area)
+    const reverse = variant === "duotone-reverse" || (variant === "stripped" && horizontal)
+    const first = reverse ? muted : colors[0]
+    const second = reverse ? colors[0] : muted
+    const split = variant === "stripped" ? horizontal ? 1 - capFraction : capFraction : 0.5
+    return new graphic.LinearGradient(0, 0, horizontal ? 1 : 0, horizontal ? 0 : 1, [
+      { offset: 0, color: first }, { offset: split, color: first },
+      { offset: split, color: second }, { offset: 1, color: second },
+    ])
+  }
+  return chartGradient(colors, !horizontal)
+}

package/registry/components/chart-options.parts.ts

@@ -0,0 +1,72 @@
+import type { EChartsOption, LegendComponentOption, TooltipComponentOption } from "echarts"
+import type { EChartTheme } from "./echart-theme"
+import { chartAlpha } from "./chart-options.paint"
+import { chartColor, chartNumber, chartSeries, type ChartDotStyle, type ChartSpec } from "./chart-options.types"
+
+export function dotItemStyle(theme: EChartTheme, paint: string, style: ChartDotStyle = "default") {
+  return {
+    color: style === "colored-border" ? theme.surface : paint,
+    borderColor: style === "border" ? theme.surface : paint,
+    borderWidth: style === "border" ? theme.lineWidth : style === "colored-border" ? theme.borderWidth : 0,
+  }
+}
+
+function escapeHtml(value: string) {
+  return value.replace(/[&<>"']/g, (character) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[character]!)
+}
+
+/** Read the original row so split forecast series don't duplicate or hide tooltip values. */
+export function cartesianTooltip(theme: EChartTheme, spec: ChartSpec): NonNullable<TooltipComponentOption["formatter"]> {
+  const entries = chartSeries(spec)
+  return (params) => {
+    const point = Array.isArray(params) ? params[0] : params
+    const row = spec.data[point.dataIndex]
+    if (!row) return ""
+    const title = escapeHtml(String(row[spec.categoryKey ?? "name"] ?? ""))
+    const rows = entries.map((entry) => {
+      const value = chartNumber(row[entry.key])
+      return `<div>${escapeHtml(entry.label ?? entry.key)}: <span style="font-weight:${theme.mediumWeight}">${value === null ? "—" : value.toLocaleString()}</span></div>`
+    })
+    return `<div>${title}</div>${rows.join("")}`
+  }
+}
+
+function styleLegend(theme: EChartTheme, spec: ChartSpec, legend: LegendComponentOption): LegendComponentOption {
+  const variant = spec.legendIndicator ?? "rounded-square"
+  const all = chartSeries(spec)
+  const data = legend.data ?? (spec.family === "pie" || spec.family === "radial"
+    ? spec.data.map((row) => String(row[spec.categoryKey ?? "name"] ?? ""))
+    : all.map((series) => series.label ?? series.key))
+  const outlined = variant.endsWith("outline")
+  const icon = variant.startsWith("circle") ? "circle" : variant.startsWith("rounded") ? "roundRect" : "rect"
+  return {
+    ...legend, icon, align: theme.rtl ? "right" : "left",
+    itemWidth: variant === "vertical-bar" ? theme.space.xs : variant === "horizontal-bar" ? theme.space.lg : theme.space.md,
+    itemHeight: variant === "horizontal-bar" ? theme.space.xs : variant === "vertical-bar" ? theme.space.lg : theme.space.md,
+    data: data.map((item, index) => {
+      const paint = chartColor(theme, all[index]?.colorIndex ?? index)
+      return { ...(typeof item === "string" ? { name: item } : item), icon, itemStyle: { color: outlined ? theme.surface : paint, borderColor: paint, borderWidth: outlined ? theme.borderWidth : 0 } }
+    }),
+  }
+}
+
+export function styleChartParts(theme: EChartTheme, spec: ChartSpec, option: EChartsOption): EChartsOption {
+  const originalTooltip = !Array.isArray(option.tooltip) ? option.tooltip ?? {} : {}
+  const tooltip: TooltipComponentOption = {
+    ...originalTooltip,
+    backgroundColor: spec.tooltipSurface === "translucent" ? chartAlpha(theme.surface, theme.translucentOpacity ?? theme.opacity.muted) : theme.surface,
+    borderColor: theme.border, borderWidth: theme.borderWidth,
+    borderRadius: theme.radii?.[spec.tooltipRadius ?? "lg"] ?? theme.radius,
+    textStyle: { color: theme.foreground, fontFamily: theme.fontFamily, fontSize: theme.fontSize, fontWeight: theme.fontWeight, lineHeight: theme.lineHeight },
+    axisPointer: { ...originalTooltip.axisPointer, show: spec.tooltipCursor !== false },
+  }
+  if (spec.tooltipPosition === "fixed") {
+    tooltip.position = (point, _params, _element, _rect, size) => [Math.max(0, Math.min(point[0] - size.contentSize[0] / 2, size.viewSize[0] - size.contentSize[0])), theme.space.lg]
+  }
+  return {
+    ...option, tooltip,
+    legend: Array.isArray(option.legend)
+      ? option.legend.map((legend) => styleLegend(theme, spec, legend))
+      : option.legend ? styleLegend(theme, spec, option.legend) : undefined,
+  }
+}

package/registry/components/chart-options.radial.ts

@@ -0,0 +1,109 @@
+import type { EChartsOption } from "echarts"
+import type { BarSeriesOption, PieSeriesOption, RadarSeriesOption } from "echarts/charts"
+import type { EChartTheme } from "./echart-theme"
+import { chartAlpha, chartGradient, seriesColors } from "./chart-options.paint"
+import { chartColor, chartNumber, chartSeries, type ChartSpec } from "./chart-options.types"
+import { dotItemStyle } from "./chart-options.parts"
+
+function labelStyle(theme: EChartTheme) {
+  return { color: theme.foreground, fontFamily: theme.fontFamily, fontSize: theme.labelFontSize, fontWeight: theme.mediumWeight, lineHeight: theme.lineHeight }
+}
+
+export function pieOption(theme: EChartTheme, spec: ChartSpec): EChartsOption {
+  const entry = chartSeries(spec)[0]
+  const category = spec.categoryKey ?? "name"
+  const donut = ["donut", "padded", "petal"].includes(spec.variant ?? "")
+  const data = spec.data.flatMap((row, index) => {
+    const value = chartNumber(row[entry.key])
+    if (value === null || value < 0) return []
+    const colors = entry.colorIndices?.length
+      ? [chartColor(theme, index), chartColor(theme, index + 1)]
+      : [chartColor(theme, index + (entry.colorIndex ?? 0))]
+    return [{ name: String(row[category] ?? ""), value, itemStyle: { color: chartGradient(colors) } }]
+  })
+  const series: PieSeriesOption = {
+    id: entry.key, type: "pie", data,
+    radius: [donut ? "48%" : "0%", spec.labels === "outside" ? "58%" : "74%"],
+    center: ["50%", "50%"],
+    padAngle: spec.variant === "padded" ? theme.borderWidth * 2 : 0,
+    itemStyle: {
+      borderRadius: spec.variant === "petal" || spec.variant === "padded" ? theme.markRadius : 0,
+      borderColor: theme.surface,
+      borderWidth: spec.variant === "petal" ? theme.space.xs : spec.variant === "padded" ? theme.borderWidth : 0,
+    },
+    selectedMode: "single", selectedOffset: theme.space.md,
+    emphasis: { scale: true, scaleSize: theme.space.xs, label: labelStyle(theme) },
+    label: { ...labelStyle(theme), show: spec.labels === "inside" || spec.labels === "outside", position: spec.labels === "inside" ? "inside" : "outside", formatter: spec.labels === "inside" ? "{d}%" : "{b}", backgroundColor: spec.labels === "inside" ? theme.surface : undefined, padding: spec.labels === "inside" ? theme.space.xs : 0, borderRadius: theme.radius },
+    labelLine: { show: spec.labels === "outside", lineStyle: { color: theme.border, width: theme.borderWidth }, length: theme.space.md, length2: theme.space.md },
+  }
+  return { legend: { show: spec.legend !== false, bottom: 0 }, tooltip: { trigger: "item" }, series: [series] }
+}
+
+export function radialOption(theme: EChartTheme, spec: ChartSpec): EChartsOption {
+  const entry = chartSeries(spec)[0]
+  const rows = spec.data.filter((row) => chartNumber(row[entry.key]) !== null && Number(row[entry.key]) >= 0)
+  const categories = rows.map((row) => String(row[spec.categoryKey ?? "name"] ?? ""))
+  const max = spec.max && spec.max > 0 ? spec.max : Math.max(1, ...rows.map((row) => Number(row[entry.key])))
+  const semi = spec.variant === "semi"
+  const series: BarSeriesOption[] = rows.map((row, index) => ({
+    id: `${entry.key}-${index}`, name: categories[index], type: "bar", coordinateSystem: "polar", polarIndex: 0,
+    data: [{ name: categories[index], value: [Number(row[entry.key]), index] }],
+    encode: { angle: 0, radius: 1 },
+    // Every series occupies a different category. Sharing the stack keeps ECharts
+    // from allocating a progressively smaller grouped bar band to each ring.
+    stack: "rings", barWidth: theme.space.lg, roundCap: true,
+    showBackground: false, z: 3,
+    itemStyle: { color: chartGradient(entry.colorIndices?.length ? [chartColor(theme, index), chartColor(theme, index + 1)] : [chartColor(theme, index + (entry.colorIndex ?? 0))]) },
+    emphasis: { focus: "series" },
+    selectedMode: "single",
+    label: { ...labelStyle(theme), show: spec.labels === "inside", position: "middle", backgroundColor: theme.surface, padding: theme.space.xs, borderRadius: theme.radius },
+  }))
+  // Native polar backgrounds always draw 360 degrees. A second identical polar
+  // gives the explicit track its own bar band and respects the semi-circle sweep.
+  series.push({
+    id: "ring-tracks", type: "bar", coordinateSystem: "polar", polarIndex: 1,
+    data: rows.map((_row, index) => ({ value: [max, index] })), encode: { angle: 0, radius: 1 },
+    barWidth: theme.space.lg, roundCap: true, silent: true, animation: false,
+    itemStyle: { color: theme.neutral }, emphasis: { disabled: true },
+    tooltip: { show: false }, z: 1,
+  })
+  return {
+    polar: [0, 1].map(() => ({ radius: ["28%", "78%"], center: ["50%", semi ? "68%" : "46%"] })),
+    angleAxis: [0, 1].map((polarIndex) => ({ polarIndex, type: "value", min: 0, max, startAngle: semi ? 180 : 90, endAngle: semi ? 0 : -270, clockwise: true, show: false })),
+    radiusAxis: [0, 1].map((polarIndex) => ({ polarIndex, type: "category", data: categories, inverse: true, show: false })),
+    legend: { show: spec.legend !== false, bottom: 0, data: categories },
+    tooltip: { trigger: "item", valueFormatter: (value) => String(Array.isArray(value) ? value[0] : value) },
+    series,
+  }
+}
+
+export function radarOption(theme: EChartTheme, spec: ChartSpec): EChartsOption {
+  const all = chartSeries(spec)
+  const max = spec.max && spec.max > 0 ? spec.max : Math.max(1, ...spec.data.flatMap((row) => all.map((entry) => chartNumber(row[entry.key]) ?? 0)))
+  const series: RadarSeriesOption[] = all.flatMap((entry, index) => {
+    const values = spec.data.map((row) => chartNumber(row[entry.key]))
+    if (values.some((value) => value === null)) return []
+    const colors = seriesColors(theme, entry, index)
+    return [{
+      id: entry.key, name: entry.label ?? entry.key, type: "radar",
+      data: [{ name: entry.label ?? entry.key, value: values as number[] }],
+      lineStyle: { color: chartGradient(colors), width: theme.lineWidth },
+      areaStyle: entry.variant === "lines" || spec.variant === "lines" ? { opacity: 0 } : { color: chartGradient(colors.map((paint) => chartAlpha(paint, theme.opacity.area))), opacity: 1 },
+      symbol: entry.dots || entry.dotStyle ? "circle" : "none", symbolSize: entry.dotStyle === "border" ? theme.space.md : theme.space.sm,
+      itemStyle: dotItemStyle(theme, colors[0], entry.dotStyle),
+      emphasis: { focus: "self", itemStyle: dotItemStyle(theme, colors[0], entry.activeDotStyle ?? entry.dotStyle) },
+    }]
+  })
+  return {
+    radar: {
+      indicator: spec.data.map((row) => ({ name: String(row[spec.categoryKey ?? "name"] ?? ""), max })),
+      shape: spec.grid === "circle" ? "circle" : "polygon", radius: "65%",
+      axisName: { color: theme.muted, fontFamily: theme.fontFamily, fontSize: theme.labelFontSize },
+      axisLine: { lineStyle: { color: theme.border, width: theme.borderWidth } },
+      splitLine: { lineStyle: { color: theme.border, width: theme.borderWidth } },
+      splitArea: { show: false },
+    },
+    legend: { show: spec.legend !== false, bottom: 0, data: all.map((entry) => entry.label ?? entry.key) },
+    tooltip: { trigger: "item" }, series,
+  }
+}

package/registry/components/chart-options.ts

@@ -0,0 +1,44 @@
+import type { EChartsOption } from "echarts"
+import type { EChartTheme } from "./echart-theme"
+import { cartesianOption } from "./chart-options.cartesian"
+import { pieOption, radarOption, radialOption } from "./chart-options.radial"
+import { chartColor, chartNumber, type ChartSpec } from "./chart-options.types"
+import { styleChartParts } from "./chart-options.parts"
+
+export type { ChartCurve, ChartDatum, ChartDotStyle, ChartFamily, ChartLegendIndicator, ChartSeries, ChartSpec, ChartStroke, ChartVariant } from "./chart-options.types"
+
+/** Build native ECharts options using only resolved Banhaten tokens. */
+export function createChartOption(theme: EChartTheme, spec: ChartSpec): EChartsOption {
+  return styleChartParts(theme, spec, createFamilyOption(theme, spec))
+}
+
+function createFamilyOption(theme: EChartTheme, spec: ChartSpec): EChartsOption {
+  if (["area", "line", "bar", "composed"].includes(spec.family)) return cartesianOption(theme, spec)
+  if (spec.family === "pie") return pieOption(theme, spec)
+  if (spec.family === "radial") return radialOption(theme, spec)
+  if (spec.family === "radar") return radarOption(theme, spec)
+  const nodes = spec.nodes ?? spec.data.map((row) => ({ name: String(row[spec.categoryKey ?? "name"] ?? "") }))
+  const names = new Set(nodes.map((node) => node.name))
+  const resolveName = (value: string | number) => typeof value === "number" ? nodes[value]?.name : value
+  const links = (spec.links ?? []).flatMap((link) => {
+    const source = resolveName(link.source)
+    const target = resolveName(link.target)
+    const value = chartNumber(link.value)
+    return source && target && names.has(source) && names.has(target) && value !== null && value > 0
+      ? [{ source, target, value }]
+      : []
+  })
+  return {
+    tooltip: { trigger: "item" },
+    series: [{
+      id: "flow", type: "sankey", orient: spec.horizontal === false ? "vertical" : "horizontal",
+      left: theme.space.lg, right: theme.space.axis * 2, top: theme.space.lg, bottom: theme.space.lg,
+      data: nodes.map((node, index) => ({ name: node.name, itemStyle: { color: chartColor(theme, "colorIndex" in node ? Number(node.colorIndex) : index), borderWidth: 0 } })),
+      links, nodeWidth: spec.labels === "inside" ? theme.space.axis * 2 : theme.space.lg,
+      nodeGap: theme.space.xl, draggable: false,
+      lineStyle: { color: spec.variant === "solid" ? theme.palette[0] : spec.variant === "target" ? "target" : spec.variant === "gradient" ? "gradient" : "source", opacity: theme.opacity.area, curveness: 0.5 },
+      emphasis: { focus: "adjacency", lineStyle: { opacity: theme.opacity.muted } },
+      label: { show: spec.labels !== "none", position: spec.labels === "inside" ? "inside" : "right", color: theme.foreground, fontFamily: theme.fontFamily, fontSize: theme.labelFontSize, fontWeight: theme.fontWeight, distance: theme.space.sm, backgroundColor: spec.labels === "inside" ? theme.surface : undefined, padding: spec.labels === "inside" ? theme.space.xs : 0, borderRadius: theme.radius },
+    }],
+  }
+}

package/registry/components/chart-options.types.ts

@@ -0,0 +1,67 @@
+import type { EChartTheme } from "./echart-theme"
+
+export type ChartFamily = "area" | "line" | "bar" | "composed" | "radar" | "pie" | "radial" | "sankey"
+export type ChartDatum = Record<string, string | number | null>
+export type ChartVariant = "default" | "gradient" | "gradient-reverse" | "solid" | "dotted" | "lines" | "hatched" | "duotone" | "duotone-reverse" | "stripped" | "blocks" | "expandable" | "filled" | "donut" | "padded" | "petal" | "full" | "semi" | "source" | "target"
+export type ChartCurve = "linear" | "smooth" | "bump" | "monotone" | "monotoneX" | "monotoneY" | "natural" | "step"
+export type ChartStroke = "solid" | "dashed" | "animated-dashed"
+export type ChartDotStyle = "default" | "border" | "colored-border"
+export type ChartLegendIndicator = "square" | "circle" | "circle-outline" | "rounded-square" | "rounded-square-outline" | "vertical-bar" | "horizontal-bar"
+
+/** Series colors are palette indices: application data cannot introduce off-brand colors. */
+export interface ChartSeries {
+  key: string
+  label?: string
+  type?: "line" | "bar" | "area"
+  colorIndex?: number
+  colorIndices?: number[]
+  variant?: ChartVariant
+  stroke?: ChartStroke
+  curve?: ChartCurve
+  buffer?: boolean
+  dots?: boolean
+  dotStyle?: ChartDotStyle
+  activeDotStyle?: ChartDotStyle
+}
+
+export interface ChartSpec {
+  family: ChartFamily
+  data: ChartDatum[]
+  series?: ChartSeries[]
+  categoryKey?: string
+  variant?: ChartVariant
+  stack?: "default" | "stacked" | "percent" | "expanded"
+  curve?: ChartCurve
+  horizontal?: boolean
+  legend?: boolean
+  brush?: boolean
+  labels?: "none" | "inside" | "outside"
+  max?: number
+  grid?: "polygon" | "circle"
+  nodes?: { name: string; colorIndex?: number }[]
+  links?: { source: string | number; target: string | number; value: number }[]
+  highlightMax?: boolean
+  hoverHighlight?: boolean
+  hoverReveal?: boolean
+  legendIndicator?: ChartLegendIndicator
+  tooltipSurface?: "default" | "translucent"
+  tooltipRadius?: "sm" | "md" | "lg" | "xl"
+  tooltipCursor?: boolean
+  tooltipPosition?: "variable" | "fixed"
+}
+
+export function chartSeries(spec: ChartSpec): ChartSeries[] {
+  if (spec.series?.length) return spec.series
+  const key = Object.keys(spec.data[0] ?? {}).find((entry) =>
+    entry !== (spec.categoryKey ?? "name") && spec.data.some((row) => typeof row[entry] === "number"))
+  return [{ key: key ?? "value" }]
+}
+
+/** Missing values remain gaps; they never become a fabricated zero or infinity. */
+export function chartNumber(value: unknown): number | null {
+  return typeof value === "number" && Number.isFinite(value) ? value : null
+}
+
+export function chartColor(theme: EChartTheme, index: number): string {
+  return theme.palette[((Math.trunc(index) % theme.palette.length) + theme.palette.length) % theme.palette.length] ?? theme.foreground
+}

package/registry/components/chart.tsx

@@ -107,7 +107,7 @@ function ChartTooltipContent({
     <div
       data-slot="chart-tooltip"
       className={cn(
-        "grid min-w-[var(--bh-space-17xl-288)] gap-[var(--bh-space-sm-6)] rounded-[var(--bh-radius-lg-8)] bg-[var(--bh-bg-raised)] p-[var(--bh-space-xl-12)] text-[length:var(--bh-text-body-xs-regular-font-size)] font-[var(--bh-text-body-xs-regular-font-weight)] leading-[var(--bh-text-body-xs-regular-line-height)] tracking-[var(--bh-text-body-xs-regular-letter-spacing)] text-[var(--bh-content-default)] shadow-[var(--shadow-popover)]",
+        "grid min-w-[var(--bh-space-17xl-288)] gap-[var(--bh-space-sm-6)] rounded-[var(--bh-radius-lg-8)] bg-[var(--bh-bg-raised)] p-[var(--bh-space-xl-12)] text-[length:var(--bh-text-body-xs-regular-font-size)] font-[var(--bh-text-body-xs-regular-font-weight)] leading-[var(--bh-text-body-xs-regular-line-height)] tracking-[var(--bh-text-body-xs-regular-letter-spacing)] text-[var(--bh-content-default)] shadow-[var(--elevation-popover)]",
         className
       )}
       {...forwardableDomProps(props)}

package/registry/components/checkbox.tsx

@@ -13,11 +13,11 @@ type CheckboxCheckedState = NonNullable<
 type CheckboxCardControlPosition = "start" | "end"
 
 const checkboxVariants = cva(
-  "peer group/checkbox relative size-[var(--bh-checkbox-root-size)] shrink-0 rounded-[var(--bh-checkbox-control-radius)] outline-none transition-[box-shadow] focus-visible:[&>[data-slot=checkbox-control]]:shadow-[var(--shadow-checkbox-focus)] disabled:pointer-events-none data-[disabled]:pointer-events-none data-[state=checked]:hover:[&>[data-slot=checkbox-control]]:bg-[var(--bh-interactive-checkbox-hover)] data-[state=indeterminate]:hover:[&>[data-slot=checkbox-control]]:bg-[var(--bh-interactive-checkbox-hover)]"
+  "peer group/checkbox relative size-[var(--bh-checkbox-root-size)] shrink-0 rounded-[var(--bh-checkbox-control-radius)] outline-none transition-[box-shadow] focus-visible:[&>[data-slot=checkbox-control]]:shadow-[var(--elevation-checkbox-focus)] disabled:pointer-events-none data-[disabled]:pointer-events-none data-[state=checked]:hover:[&>[data-slot=checkbox-control]]:bg-[var(--bh-interactive-checkbox-hover)] data-[state=indeterminate]:hover:[&>[data-slot=checkbox-control]]:bg-[var(--bh-interactive-checkbox-hover)]"
 )
 
 const checkboxCardVariants = cva(
-  "group/checkbox-card relative flex w-[var(--bh-checkbox-card-width)] max-w-full overflow-hidden rounded-[var(--bh-checkbox-card-radius)] bg-[var(--bh-bg-raised)] p-[var(--bh-checkbox-card-padding)] text-start shadow-[var(--shadow-checkbox-card)] outline-none transition-[background-color,box-shadow] [--bh-checkbox-card-border:var(--bh-border-subtle)] [--bh-checkbox-card-border-width-current:var(--bh-checkbox-card-border-width)] [--shadow-checkbox-card:inset_0px_0px_0px_var(--bh-checkbox-card-border-width-current,var(--bh-border-width-default))_var(--bh-checkbox-card-border,var(--bh-border-subtle)),var(--shadow-component-default)] hover:bg-[var(--bh-bg-raised-hover)] focus-visible:shadow-[var(--shadow-checkbox-card-focus)] data-[checked=true]:bg-[var(--bh-bg-raised)] data-[checked=true]:[--bh-checkbox-card-border:var(--bh-border-brand-strong)] data-[checked=true]:[--bh-checkbox-card-border-width-current:var(--bh-checkbox-card-border-width-active)] disabled:pointer-events-none disabled:bg-[var(--bh-bg-disabled)] disabled:shadow-[inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-border-disabled)] data-[disabled=true]:pointer-events-none data-[disabled=true]:bg-[var(--bh-bg-disabled)] data-[disabled=true]:shadow-[inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-border-disabled)]",
+  "group/checkbox-card relative flex w-[var(--bh-checkbox-card-width)] max-w-full overflow-hidden rounded-[var(--bh-checkbox-card-radius)] bg-[var(--bh-bg-raised)] p-[var(--bh-checkbox-card-padding)] text-start shadow-[var(--elevation-checkbox-card)] outline-none transition-[background-color,box-shadow] [--bh-checkbox-card-border:var(--bh-border-subtle)] [--bh-checkbox-card-border-width-current:var(--bh-checkbox-card-border-width)] [--elevation-checkbox-card:inset_0px_0px_0px_var(--bh-checkbox-card-border-width-current,var(--bh-border-width-default))_var(--bh-checkbox-card-border,var(--bh-border-subtle)),var(--elevation-component-default)] hover:bg-[var(--bh-bg-raised-hover)] focus-visible:shadow-[var(--elevation-checkbox-card-focus)] data-[checked=true]:bg-[var(--bh-bg-raised)] data-[checked=true]:[--bh-checkbox-card-border:var(--bh-border-brand-strong)] data-[checked=true]:[--bh-checkbox-card-border-width-current:var(--bh-checkbox-card-border-width-active)] disabled:pointer-events-none disabled:bg-[var(--bh-bg-disabled)] disabled:shadow-[inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-border-disabled)] data-[disabled=true]:pointer-events-none data-[disabled=true]:bg-[var(--bh-bg-disabled)] data-[disabled=true]:shadow-[inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-border-disabled)]",
   {
     variants: {
       controlPosition: {
@@ -53,11 +53,11 @@ const Checkbox = React.forwardRef<
       <span
         aria-hidden="true"
         data-slot="checkbox-control"
-        className="pointer-events-none absolute top-1/2 left-1/2 size-[var(--bh-checkbox-control-size)] -translate-x-1/2 -translate-y-1/2 rounded-[var(--bh-checkbox-control-radius)] bg-[var(--bh-bg-default)] shadow-[var(--shadow-checkbox-control)] transition-[background-color,box-shadow] [--bh-checkbox-control-border:var(--bh-border-input)] [--shadow-checkbox-control:inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-checkbox-control-border,var(--bh-border-input)),var(--shadow-component-default)] group-data-[state=checked]/checkbox:[--bh-checkbox-control-border:transparent] group-data-[state=checked]/checkbox:bg-[var(--bh-interactive-checkbox-default)] group-data-[state=indeterminate]/checkbox:[--bh-checkbox-control-border:transparent] group-data-[state=indeterminate]/checkbox:bg-[var(--bh-interactive-checkbox-default)] group-data-[disabled]/checkbox:bg-[var(--bh-bg-disabled)] group-data-[disabled]/checkbox:shadow-[inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-border-disabled)]"
+        className="pointer-events-none absolute top-1/2 left-1/2 size-[var(--bh-checkbox-control-size)] -translate-x-1/2 -translate-y-1/2 rounded-[var(--bh-checkbox-control-radius)] bg-[var(--bh-bg-default)] shadow-[var(--elevation-checkbox-control)] transition-[background-color,box-shadow] [--bh-checkbox-control-border:var(--bh-border-input)] [--elevation-checkbox-control:inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-checkbox-control-border,var(--bh-border-input)),var(--elevation-component-default)] group-data-[state=checked]/checkbox:[--bh-checkbox-control-border:transparent] group-data-[state=checked]/checkbox:bg-[var(--bh-interactive-checkbox-default)] group-data-[state=indeterminate]/checkbox:[--bh-checkbox-control-border:transparent] group-data-[state=indeterminate]/checkbox:bg-[var(--bh-interactive-checkbox-default)] group-data-[disabled]/checkbox:bg-[var(--bh-bg-disabled)] group-data-[disabled]/checkbox:shadow-[inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-border-disabled)]"
       />
       <CheckboxPrimitive.Indicator
         data-slot="checkbox-indicator"
-        className="pointer-events-none absolute top-1/2 left-1/2 flex size-[var(--bh-checkbox-icon-size)] -translate-x-1/2 -translate-y-1/2 items-center justify-center text-[var(--bh-content-on-color)] group-data-[disabled]/checkbox:text-[var(--bh-content-disabled)]"
+        className="pointer-events-none absolute top-1/2 left-1/2 flex size-[var(--bh-checkbox-icon-size)] -translate-x-1/2 -translate-y-1/2 items-center justify-center text-[var(--bh-interactive-checkbox-content)] group-data-[disabled]/checkbox:text-[var(--bh-content-disabled)]"
       >
         <CheckIcon
           aria-hidden="true"
@@ -224,12 +224,12 @@ function CheckboxCardIndicator({
         data-disabled={disabled ? "true" : undefined}
         data-slot="checkbox-control"
         data-state={checked ? "checked" : "unchecked"}
-        className="pointer-events-none absolute top-1/2 left-1/2 size-[var(--bh-checkbox-control-size)] -translate-x-1/2 -translate-y-1/2 rounded-[var(--bh-checkbox-control-radius)] bg-[var(--bh-bg-default)] shadow-[var(--shadow-checkbox-control)] [--bh-checkbox-control-border:var(--bh-border-input)] [--shadow-checkbox-control:inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-checkbox-control-border,var(--bh-border-input)),var(--shadow-component-default)] data-[state=checked]:[--bh-checkbox-control-border:transparent] data-[state=checked]:bg-[var(--bh-interactive-checkbox-default)] data-[disabled=true]:bg-[var(--bh-bg-disabled)] data-[disabled=true]:shadow-[inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-border-disabled)]"
+        className="pointer-events-none absolute top-1/2 left-1/2 size-[var(--bh-checkbox-control-size)] -translate-x-1/2 -translate-y-1/2 rounded-[var(--bh-checkbox-control-radius)] bg-[var(--bh-bg-default)] shadow-[var(--elevation-checkbox-control)] [--bh-checkbox-control-border:var(--bh-border-input)] [--elevation-checkbox-control:inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-checkbox-control-border,var(--bh-border-input)),var(--elevation-component-default)] data-[state=checked]:[--bh-checkbox-control-border:transparent] data-[state=checked]:bg-[var(--bh-interactive-checkbox-default)] data-[disabled=true]:bg-[var(--bh-bg-disabled)] data-[disabled=true]:shadow-[inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-border-disabled)]"
       />
       {checked ? (
         <CheckIcon
           aria-hidden="true"
-          className="absolute top-1/2 left-1/2 size-[var(--bh-checkbox-icon-size)] -translate-x-1/2 -translate-y-1/2 text-[var(--bh-content-on-color)]"
+          className="absolute top-1/2 left-1/2 size-[var(--bh-checkbox-icon-size)] -translate-x-1/2 -translate-y-1/2 text-[var(--bh-interactive-checkbox-content)]"
           focusable="false"
           strokeWidth="var(--bh-icon-stroke-300)"
         />