@keyfunc/keybricks-ds 1.0.0

package/components/charts/Bar3D.jsx

@@ -0,0 +1,93 @@
+import React from "react";
+import { fmtNum, seriesColor, stack, niceTicks } from "./chart-geometry.js";
+import { makeProj, cuboidFaces, shade, dragRotate, facePath } from "./chart-3d.js";
+import { ChartTooltip, wrapStyle } from "./ChartKit.jsx";
+
+const FACE_SHADE = { top: 0.22, front: 0, right: -0.22, left: -0.3, back: -0.1, bottom: -0.4 };
+
+/**
+ * 3D bars — categories along x, series as depth rows (or stacked in place). Drag to orbit.
+ * mode "grouped" (one depth row per series) | "stacked" (segments pile up in one row).
+ */
+export function Bar3D({ series = [], categories = [], width = 460, height = 300, yaw: yaw0 = 30, pitch: pitch0 = 26, mode = "grouped", gap = 0.35, interactive = true, valueFormat = fmtNum, style }) {
+  const [rot, setRot] = React.useState({ yaw: yaw0, pitch: pitch0 });
+  const [hover, setHover] = React.useState(null);
+  const n = categories.length || Math.max(...series.map((s) => s.values.length));
+  const m = mode === "grouped" ? series.length : 1;
+  const hi = mode === "stacked"
+    ? Math.max(...[...Array(n)].map((_, i) => series.reduce((t, s) => t + (s.values[i] || 0), 0)))
+    : Math.max(...series.flatMap((s) => s.values));
+  const bands = mode === "stacked" ? stack(series.map((s) => s.values)) : null;
+  const scale = Math.min(width, height) * 0.42;
+  const P = makeProj(width / 2, height / 2 + height * 0.06, scale, rot.yaw, rot.pitch);
+  const bw = (1 - gap) / n, bd = (1 - gap) / Math.max(m, 2);
+  const bars = [];
+  series.forEach((s, si) => s.values.forEach((v, i) => {
+    if (v == null) return;
+    const x0 = i / n - 0.5 + (gap / n) / 2, x1 = x0 + bw / (n / (n)) * (1 / 1) * (bw > 0 ? 1 : 1) * 1;
+    const cx0 = i / n - 0.5 + (1 / n) * (gap / 2), cx1 = cx0 + (1 / n) * (1 - gap);
+    const zi = mode === "grouped" ? si : 0;
+    const cz0 = zi / Math.max(m, 1) - 0.5 + (1 / Math.max(m, 2)) * (gap / 2), cz1 = cz0 + (1 / Math.max(m, 2)) * (1 - gap);
+    const y0 = mode === "stacked" ? (bands[si][i][0] / hi) : 0;
+    const y1 = mode === "stacked" ? (bands[si][i][1] / hi) : v / hi;
+    bars.push({ s, si, i, v, x0: cx0, x1: cx1, z0: cz0, z1: cz1, y0: (y0 - 0.5) * 0.9, y1: (y1 - 0.5) * 0.9 });
+  }));
+  // draw far-to-near: sort by projected center depth
+  const drawn = bars.map((b, key) => {
+    const faces = cuboidFaces(P, b.x0, b.x1, b.y0, b.y1, b.z0, b.z1);
+    const depth = faces.reduce((s2, f) => s2 + f.depth, 0) / faces.length;
+    const top = P((b.x0 + b.x1) / 2, b.y1, (b.z0 + b.z1) / 2);
+    return { ...b, key, faces, depth, top, color: b.s.color || seriesColor(b.si) };
+  }).sort((a, b2) => b2.depth - a.depth);
+  const base = [P(-0.5, -0.46, -0.5), P(0.5, -0.46, -0.5), P(0.5, -0.46, 0.5), P(-0.5, -0.46, 0.5)];
+  /* Vertical value axis with real ticks at the front-left corner. */
+  const vt = niceTicks(0, hi, 3);
+  const vTicks = vt.ticks.filter((t) => t <= hi * 1.001).map((t) => ({ p: P(-0.5, (t / hi - 0.5) * 0.9, 0.5), v: valueFormat(t) }));
+  const vAxis = [P(-0.5, -0.45, 0.5), P(-0.5, 0.45, 0.5)];
+  const handlers = interactive ? dragRotate(() => rot, setRot) : {};
+  return (
+    <div style={{ ...wrapStyle, ...style }}>
+      <svg width={width} height={height} {...handlers} role="img" style={{ cursor: interactive ? "grab" : "default", touchAction: "none" }}>
+        <path d={facePath(base)} fill="var(--bg-inset)" stroke="var(--chart-axis)" strokeWidth="1" />
+        <line x1={vAxis[0].x} y1={vAxis[0].y} x2={vAxis[1].x} y2={vAxis[1].y} stroke="var(--chart-guide)" strokeWidth="1" />
+        {vTicks.map((t, i) => (
+          <g key={"vt" + i}>
+            <line x1={t.p.x - 4} y1={t.p.y} x2={t.p.x} y2={t.p.y} stroke="var(--chart-guide)" strokeWidth="1" />
+            <text x={t.p.x - 7} y={t.p.y + 3} textAnchor="end" style={{ fontFamily: "var(--font-mono)", fontSize: 9, fill: "var(--chart-label)" }}>{t.v}</text>
+          </g>
+        ))}
+        {categories.map((c, i) => {
+          /* Labels follow whichever base edge currently faces the viewer (larger screen y),
+             sit outside it, and paint BEFORE the bars, so they never cover a column. */
+          const zE = P(0, -0.46, 0.5).y >= P(0, -0.46, -0.5).y ? 0.5 : -0.5;
+          const p0 = P(i / n - 0.5 + 0.5 / n, -0.46, zE);
+          const ctr = P(0, -0.46, 0);
+          const dx = p0.x - ctr.x, dy = p0.y - ctr.y, len = Math.hypot(dx, dy) || 1;
+          return <text key={"c" + i} x={p0.x + (dx / len) * 18} y={p0.y + (dy / len) * 18 + 3} textAnchor="middle" style={{ fontFamily: "var(--font-sans)", fontSize: 10, fill: "var(--chart-label)" }}>{c}</text>;
+        })}
+        {drawn.map((b) => (
+          <g key={b.key} opacity={hover == null || hover === b.key ? 1 : 0.45}
+            onMouseEnter={interactive ? () => setHover(b.key) : undefined} onMouseLeave={interactive ? () => setHover(null) : undefined}
+            style={{ transition: "opacity var(--dur-fast) var(--ease-out)" }}>
+            {b.faces.map((f, fi) => (
+              <path key={fi} d={f.d} fill={shade(b.color, FACE_SHADE[f.kind])} stroke="var(--bg-surface)" strokeWidth="0.4" />
+            ))}
+          </g>
+        ))}
+      </svg>
+      {hover != null && interactive ? (() => {
+        const b = drawn.find((x) => x.key === hover);
+        return <ChartTooltip x={b.top.x} y={b.top.y} flip={b.top.x > width * 0.6} title={categories[b.i]}
+          rows={[{ label: b.s.name, value: valueFormat(b.v), color: b.color }]} />;
+      })() : null}
+      <div style={{ display: "flex", gap: 14, paddingTop: 6, lineHeight: "normal" }}>
+        {series.map((s, i) => (
+          <span key={s.name} style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
+            <span style={{ width: 8, height: 8, borderRadius: 2, background: s.color || seriesColor(i) }} />
+            <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)", color: "var(--text-secondary)" }}>{s.name}</span>
+          </span>
+        ))}
+      </div>
+    </div>
+  );
+}

package/components/charts/Bar3D.vue

@@ -0,0 +1,79 @@
+<script setup>
+import { ref, computed } from 'vue'
+import { fmtNum, SERIES, stack, niceTicks } from './chart-geometry.js'
+import { makeProj, cuboidFaces, shade, facePath } from './chart-3d.js'
+// 3D cuboid bars — categories on x, series as depth rows or stacked; drag to orbit.
+const FACE_SHADE = { top:0.22, front:0, right:-0.22, left:-0.3, back:-0.1, bottom:-0.4 }
+const props = defineProps({ series:{type:Array,default:()=>[]}, categories:{type:Array,default:()=>[]}, mode:{type:String,default:'grouped'}, width:{type:Number,default:460}, height:{type:Number,default:300}, yaw:{type:Number,default:30}, pitch:{type:Number,default:26}, gap:{type:Number,default:0.35}, interactive:{type:Boolean,default:true}, valueFormat:{type:Function,default:fmtNum}, style:Object })
+const rot = ref({ yaw: props.yaw, pitch: props.pitch })
+const hover = ref(null)
+function down(e){ e.currentTarget.__kbDrag = { x:e.clientX, y:e.clientY, ...rot.value }; e.currentTarget.setPointerCapture && e.currentTarget.setPointerCapture(e.pointerId) }
+function move(e){ const s = e.currentTarget.__kbDrag; if(!s) return; rot.value = { yaw: s.yaw+(e.clientX-s.x)*0.45, pitch: Math.max(8, Math.min(80, s.pitch+(e.clientY-s.y)*0.35)) } }
+function up(e){ e.currentTarget.__kbDrag = null }
+const g = computed(() => {
+  const n = props.categories.length || Math.max(...props.series.map(s=>s.values.length))
+  const m = props.mode==='grouped' ? props.series.length : 1
+  const hi = props.mode==='stacked'
+    ? Math.max(...[...Array(n)].map((_,i)=>props.series.reduce((t,s)=>t+(s.values[i]||0),0)))
+    : Math.max(...props.series.flatMap(s=>s.values))
+  const bands = props.mode==='stacked' ? stack(props.series.map(s=>s.values)) : null
+  const scale = Math.min(props.width, props.height)*0.42
+  const P = makeProj(props.width/2, props.height/2 + props.height*0.06, scale, rot.value.yaw, rot.value.pitch)
+  const bars = []
+  props.series.forEach((s,si)=>s.values.forEach((v,i)=>{
+    if (v==null) return
+    const cx0 = i/n-0.5+(1/n)*(props.gap/2), cx1 = cx0+(1/n)*(1-props.gap)
+    const zi = props.mode==='grouped' ? si : 0
+    const cz0 = zi/Math.max(m,1)-0.5+(1/Math.max(m,2))*(props.gap/2), cz1 = cz0+(1/Math.max(m,2))*(1-props.gap)
+    const y0 = props.mode==='stacked' ? (bands[si][i][0]/hi) : 0
+    const y1 = props.mode==='stacked' ? (bands[si][i][1]/hi) : v/hi
+    bars.push({ s, si, i, v, x0:cx0, x1:cx1, z0:cz0, z1:cz1, y0:(y0-0.5)*0.9, y1:(y1-0.5)*0.9 })
+  }))
+  const drawn = bars.map((b,key)=>{
+    const faces = cuboidFaces(P, b.x0, b.x1, b.y0, b.y1, b.z0, b.z1)
+    return { ...b, key, faces, depth: faces.reduce((s2,f)=>s2+f.depth,0)/faces.length,
+      top: P((b.x0+b.x1)/2, b.y1, (b.z0+b.z1)/2), color: b.s.color || SERIES[b.si%SERIES.length] }
+  }).sort((a,b2)=>b2.depth-a.depth)
+  const base = [P(-0.5,-0.46,-0.5), P(0.5,-0.46,-0.5), P(0.5,-0.46,0.5), P(-0.5,-0.46,0.5)]
+  const vt = niceTicks(0, hi, 3)
+  const vTicks = vt.ticks.filter(t=>t<=hi*1.001).map(t=>({ p:P(-0.5,(t/hi-0.5)*0.9,0.5), v:props.valueFormat(t) }))
+  // Labels follow whichever base edge faces the viewer, outside it.
+  const zE = P(0,-0.46,0.5).y >= P(0,-0.46,-0.5).y ? 0.5 : -0.5
+  const ctr = P(0,-0.46,0)
+  const labels = props.categories.map((c,i)=>{
+    const p0 = P(i/n-0.5+0.5/n, -0.46, zE)
+    const dx = p0.x-ctr.x, dy = p0.y-ctr.y, len = Math.hypot(dx,dy)||1
+    return { c, x: p0.x+(dx/len)*18, y: p0.y+(dy/len)*18+3 }
+  })
+  return { drawn, basePath: facePath(base), vTicks, vAxis:[P(-0.5,-0.45,0.5), P(-0.5,0.45,0.5)], labels, FACE_SHADE }
+})
+</script>
+<template>
+  <div :style="{position:'relative',display:'inline-block',lineHeight:0,...style}">
+    <svg :width="width" :height="height" @pointerdown="down" @pointermove="move" @pointerup="up" @pointerleave="up"
+      role="img" :style="{cursor:interactive?'grab':'default',touchAction:'none'}">
+      <path :d="g.basePath" fill="var(--bg-inset)" stroke="var(--chart-axis)" stroke-width="1"/>
+      <line :x1="g.vAxis[0].x" :y1="g.vAxis[0].y" :x2="g.vAxis[1].x" :y2="g.vAxis[1].y" stroke="var(--chart-guide)" stroke-width="1"/>
+      <g v-for="(t,i) in g.vTicks" :key="'vt'+i">
+        <line :x1="t.p.x-4" :y1="t.p.y" :x2="t.p.x" :y2="t.p.y" stroke="var(--chart-guide)" stroke-width="1"/>
+        <text :x="t.p.x-7" :y="t.p.y+3" text-anchor="end" style="font-family:var(--font-mono);font-size:9px;fill:var(--chart-label)">{{ t.v }}</text>
+      </g>
+      <text v-for="(l,i) in g.labels" :key="'c'+i" :x="l.x" :y="l.y" text-anchor="middle" style="font-family:var(--font-sans);font-size:10px;fill:var(--chart-label)">{{ l.c }}</text>
+      <g v-for="b in g.drawn" :key="b.key" :opacity="hover==null||hover===b.key?1:0.45"
+        @mouseenter="interactive && (hover=b.key)" @mouseleave="interactive && (hover=null)"
+        style="transition:opacity var(--dur-fast) var(--ease-out)">
+        <path v-for="(f,fi) in b.faces" :key="fi" :d="f.d" :fill="shade(b.color, g.FACE_SHADE[f.kind])" stroke="var(--bg-surface)" stroke-width="0.4"/>
+      </g>
+    </svg>
+    <div v-if="hover!=null && interactive" :style="{position:'absolute',left:g.drawn.find(b=>b.key===hover).top.x+'px',top:g.drawn.find(b=>b.key===hover).top.y+'px',transform:g.drawn.find(b=>b.key===hover).top.x>width*0.6?'translate(calc(-100% - 10px),-50%)':'translate(10px,-50%)',pointerEvents:'none',zIndex:5,background:'var(--bg-surface)',border:'1px solid var(--border-card)',borderRadius:'var(--radius-md)',boxShadow:'var(--shadow-menu)',padding:'7px 10px',lineHeight:'normal',whiteSpace:'nowrap'}">
+      <div style="font-family:var(--font-sans);font-size:var(--text-2xs);color:var(--text-muted);padding-bottom:3px">{{ categories[g.drawn.find(b=>b.key===hover).i] }}</div>
+      <div style="font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-heading)">{{ g.drawn.find(b=>b.key===hover).s.name }} · {{ valueFormat(g.drawn.find(b=>b.key===hover).v) }}</div>
+    </div>
+    <div style="display:flex;gap:14px;padding-top:6px;line-height:normal">
+      <span v-for="(s,i) in series" :key="s.name" style="display:inline-flex;align-items:center;gap:6px">
+        <span :style="{width:'8px',height:'8px',borderRadius:'2px',background:s.color||SERIES[i%SERIES.length]}"/>
+        <span style="font-family:var(--font-sans);font-size:var(--text-xs);color:var(--text-secondary)">{{ s.name }}</span>
+      </span>
+    </div>
+  </div>
+</template>

package/components/charts/BarChart.d.ts

@@ -0,0 +1,23 @@
+import * as React from "react";
+export interface BarSeries { name: string; values: number[]; color?: string; }
+export interface BarOverlay { name: string; values: number[]; color?: string; }
+/** Vertical bars: grouped, stacked, or diverging (variance ±). overlay adds a line on a right-hand axis (combo). */
+export interface BarChartProps {
+  series?: BarSeries[];
+  categories?: string[];
+  mode?: "grouped" | "stacked" | "stacked100" | "diverging";
+  /** Swap the axes — long category names, ranked comparisons */
+  orientation?: "vertical" | "horizontal";
+  /** Print the value inside each bar (skipped where it wouldn't fit) */
+  showValues?: boolean;
+  /** Corner radius on the outer end of a bar. Default 2 */
+  radius?: number;
+  /** Line on its own right axis, e.g. margin % over revenue bars */
+  overlay?: BarOverlay;
+  width?: number; height?: number;
+  axes?: boolean; legend?: boolean; interactive?: boolean;
+  yFormat?: (v: number) => string;
+  overlayFormat?: (v: number) => string;
+  style?: React.CSSProperties;
+}
+export declare function BarChart(props: BarChartProps): JSX.Element;

package/components/charts/BarChart.jsx

@@ -0,0 +1,135 @@
+import React from "react";
+import { fmtNum, extent, scaleLin, stack, niceTicks, seriesColor, linePath } from "./chart-geometry.js";
+import { ChartLegend, ChartTooltip, PlotGrid, thinLabels, wrapStyle } from "./ChartKit.jsx";
+
+/** Bar with only its outer end rounded — a stack must read as one bar, not stacked pills. */
+function barPath(x, y, w, h, r, side) {
+  const rr = Math.max(0, Math.min(r, w / 2, h / 2));
+  if (!rr) return `M${x} ${y} h${w} v${h} h${-w} Z`;
+  if (side === "top") return `M${x} ${y + h} V${y + rr} a${rr} ${rr} 0 0 1 ${rr} ${-rr} h${w - rr * 2} a${rr} ${rr} 0 0 1 ${rr} ${rr} V${y + h} Z`;
+  if (side === "bottom") return `M${x} ${y} V${y + h - rr} a${rr} ${rr} 0 0 0 ${rr} ${rr} h${w - rr * 2} a${rr} ${rr} 0 0 0 ${rr} ${-rr} V${y} Z`;
+  if (side === "right") return `M${x} ${y} h${w - rr} a${rr} ${rr} 0 0 1 ${rr} ${rr} v${h - rr * 2} a${rr} ${rr} 0 0 1 ${-rr} ${rr} h${-(w - rr)} Z`;
+  if (side === "left") return `M${x + w} ${y} h${-(w - rr)} a${rr} ${rr} 0 0 0 ${-rr} ${rr} v${h - rr * 2} a${rr} ${rr} 0 0 0 ${rr} ${rr} h${w - rr} Z`;
+  return `M${x} ${y} h${w} v${h} h${-w} Z`;
+}
+
+/**
+ * Bar chart. series over shared categories; mode "grouped" | "stacked" | "stacked100"
+ * (share of each category) | "diverging" (single series, positive --chart-pos / negative
+ * --chart-neg — variance vs. plan). orientation="horizontal" swaps the axes for long
+ * category names and ranked comparisons. overlay draws a line on its own secondary axis
+ * (vertical only). Inside a stack only the outermost segment is rounded, so joins are flush.
+ */
+export function BarChart({ series = [], categories = [], mode = "grouped", orientation = "vertical", overlay, width = 560, height = 240, axes = true, legend = true, interactive = true, showValues = false, radius = 2, yFormat = fmtNum, overlayFormat = (v) => fmtNum(v, { pct: true }), style }) {
+  const [hidden, setHidden] = React.useState([]);
+  const [hover, setHover] = React.useState(null);
+  const horiz = orientation === "horizontal";
+  const shown = series.filter((s) => !hidden.includes(s.name));
+  const n = categories.length || Math.max(...series.map((s) => s.values.length));
+  const pct = mode === "stacked100";
+  const stacked = mode === "stacked" || pct;
+
+  const norm = pct
+    ? shown.map((s) => s.values.map((v, i) => {
+        const tot = shown.reduce((t, o) => t + (o.values[i] || 0), 0) || 1;
+        return ((v || 0) / tot) * 100;
+      }))
+    : shown.map((s) => s.values);
+  const bands = stacked && shown.length ? stack(norm) : null;
+  const [lo0, hi0] = pct ? [0, 100] : stacked ? extent([(bands[bands.length - 1] || []).map((b) => b[1])]) : extent(norm);
+  const { ticks, lo, hi } = niceTicks(lo0, hi0, 4);
+  const labelPad = horiz ? Math.min(140, Math.max(...categories.map((c) => String(c).length)) * 6.4 + 12) : 44;
+  const pad = horiz
+    ? { l: axes ? labelPad : 4, r: 12, t: 6, b: axes ? 22 : 4 }
+    : { l: axes ? 44 : 4, r: overlay ? 40 : 8, t: 10, b: axes ? 24 : 4 };
+
+  const sv = horiz ? scaleLin(lo, hi, pad.l, width - pad.r) : scaleLin(lo, hi, height - pad.b, pad.t);
+  const band = ((horiz ? height - pad.t - pad.b : width - pad.l - pad.r) / n);
+  const mid = (i) => (horiz ? pad.t : pad.l) + band * i + band / 2;
+  const groupW = Math.min(band * 0.66, mode === "grouped" ? 20 * Math.max(1, shown.length) : 30);
+  const bw = mode === "grouped" ? groupW / Math.max(1, shown.length) : groupW;
+  const colorOf = (s) => s.color || seriesColor(series.indexOf(s));
+  const zero = sv(Math.max(lo, 0));
+
+  const oScale = overlay && !horiz ? (() => { const [ol, oh] = extent([overlay.values]); const t = niceTicks(ol, oh, 4); return { sy: scaleLin(t.lo, t.hi, height - pad.b, pad.t), ticks: t.ticks }; })() : null;
+  const move = (e) => {
+    if (!interactive) return;
+    const r = e.currentTarget.getBoundingClientRect();
+    const off = horiz ? e.clientY - r.top - pad.t : e.clientX - r.left - pad.l;
+    const i = Math.floor(off / band);
+    setHover(i >= 0 && i < n ? i : null);
+  };
+  const fmtVal = (s, i) => (pct ? norm[shown.indexOf(s)][i].toFixed(1) + "%" : yFormat(s.values[i]));
+
+  const rects = [];
+  shown.forEach((s, si) => (pct ? norm[si] : s.values).forEach((v, i) => {
+    if (v == null) return;
+    let fill = mode === "diverging" ? (v >= 0 ? "var(--chart-pos)" : "var(--chart-neg)") : colorOf(s);
+    const outer = !shown.slice(si + 1).some((o) => ((pct ? norm[shown.indexOf(o)][i] : o.values[i]) || 0) > 0);
+    let x, y, w, h, side;
+    if (stacked) {
+      const a = sv(bands[si][i][0]), b = sv(bands[si][i][1]);
+      if (horiz) { x = Math.min(a, b); w = Math.max(1, Math.abs(b - a)); y = mid(i) - bw / 2; h = bw; side = outer ? "right" : null; }
+      else { y = Math.min(a, b); h = Math.max(1, Math.abs(a - b)); x = mid(i) - bw / 2; w = bw; side = outer ? "top" : null; }
+    } else if (horiz) {
+      const e = sv(v);
+      x = Math.min(zero, e); w = Math.max(1, Math.abs(e - zero)); y = mid(i) - groupW / 2 + si * bw + 0.5; h = Math.max(1, bw - 1);
+      side = v >= 0 ? "right" : "left";
+    } else {
+      const e = sv(v);
+      y = Math.min(zero, e); h = Math.max(1, Math.abs(e - zero)); x = mid(i) - groupW / 2 + si * bw + 0.5; w = Math.max(1, bw - 1);
+      side = v >= 0 ? "top" : "bottom";
+    }
+    rects.push({ key: s.name + i, d: barPath(x, y, w, h, radius, side), fill, x, y, w, h, v, s, i });
+  }));
+
+  return (
+    <div style={{ ...wrapStyle, ...style }}>
+      <svg width={width} height={height} onMouseMove={move} onMouseLeave={() => setHover(null)} role="img">
+        {axes && !horiz ? <PlotGrid w={width} h={height} pad={pad} ticks={ticks} sy={sv} xLabels={thinLabels(categories)} sxLabel={mid} yFormat={pct ? (v) => v + "%" : yFormat} /> : null}
+        {axes && horiz ? (
+          <g>
+            {ticks.map((t) => (
+              <g key={t}>
+                <line x1={sv(t)} x2={sv(t)} y1={pad.t} y2={height - pad.b} stroke={t === 0 ? "var(--chart-axis)" : "var(--chart-grid)"} strokeWidth="1" />
+                <text x={sv(t)} y={height - pad.b + 15} textAnchor="middle" style={{ fontFamily: "var(--font-mono)", fontSize: 10, fill: "var(--chart-label)" }}>{pct ? t + "%" : yFormat(t)}</text>
+              </g>
+            ))}
+            {categories.map((c, i) => (
+              <text key={i} x={pad.l - 8} y={mid(i) + 3.5} textAnchor="end" style={{ fontFamily: "var(--font-sans)", fontSize: 10.5, fill: hover === i ? "var(--text-heading)" : "var(--chart-label)" }}>{c}</text>
+            ))}
+          </g>
+        ) : null}
+        {hover != null ? (horiz
+          ? <rect x={pad.l} y={pad.t + band * hover} width={width - pad.l - pad.r} height={band} fill="var(--bg-hover)" />
+          : <rect x={pad.l + band * hover} y={pad.t} width={band} height={height - pad.t - pad.b} fill="var(--bg-hover)" />) : null}
+        {rects.map((r) => <path key={r.key} d={r.d} fill={r.fill} opacity={hover == null || hover === r.i ? 1 : 0.55} style={{ transition: "opacity var(--dur-fast) var(--ease-out)" }} />)}
+        {showValues ? rects.map((r) => (
+          (horiz ? r.w : r.h) < 22 ? null : (
+            <text key={"v" + r.key} x={horiz ? r.x + r.w - 5 : r.x + r.w / 2} y={horiz ? r.y + r.h / 2 + 3.5 : r.y + 12}
+              textAnchor={horiz ? "end" : "middle"} style={{ fontFamily: "var(--font-mono)", fontSize: 10, fill: "var(--on-accent)" }}>{fmtVal(r.s, r.i)}</text>
+          )
+        )) : null}
+        {oScale ? <g>
+          <path d={linePath(overlay.values.map((v, i) => [mid(i), oScale.sy(v)]))} fill="none" stroke={overlay.color || "var(--chart-total)"} strokeWidth="1.5" />
+          {overlay.values.map((v, i) => <circle key={i} cx={mid(i)} cy={oScale.sy(v)} r="2.5" fill={overlay.color || "var(--chart-total)"} />)}
+          {axes ? oScale.ticks.map((t) => <text key={t} x={width - pad.r + 6} y={oScale.sy(t) + 3} style={{ fontFamily: "var(--font-mono)", fontSize: 10, fill: "var(--chart-label)" }}>{overlayFormat(t)}</text>) : null}
+        </g> : null}
+      </svg>
+      {hover != null && interactive ? (
+        <ChartTooltip
+          x={horiz ? Math.min(width - 20, pad.l + (width - pad.l - pad.r) * 0.5) : mid(hover)}
+          y={horiz ? pad.t + band * hover + band / 2 : height / 2 - 10}
+          flip={horiz ? true : mid(hover) > width * 0.62} title={categories[hover]}
+          rows={shown.map((s) => ({ label: s.name, value: fmtVal(s, hover), color: mode === "diverging" ? (s.values[hover] >= 0 ? "var(--chart-pos)" : "var(--chart-neg)") : colorOf(s) }))
+            .concat(overlay ? [{ label: overlay.name, value: overlayFormat(overlay.values[hover]), color: overlay.color || "var(--chart-total)" }] : [])} />
+      ) : null}
+      {legend && (series.length > 1 || overlay) ? (
+        <ChartLegend style={{ paddingTop: 8 }}
+          items={series.map((s) => ({ label: s.name, color: colorOf(s) })).concat(overlay ? [{ label: overlay.name, color: overlay.color || "var(--chart-total)" }] : [])}
+          hidden={hidden}
+          onToggle={(l) => series.some((s) => s.name === l) && setHidden(hidden.includes(l) ? hidden.filter((x) => x !== l) : hidden.length + 1 < series.length ? [...hidden, l] : hidden)} />
+      ) : null}
+    </div>
+  );
+}

package/components/charts/BarChart.vue

@@ -0,0 +1,139 @@
+<script setup>
+import { ref, computed } from 'vue'
+import { fmtNum, extent, scaleLin, stack, niceTicks, SERIES, linePath } from './chart-geometry.js'
+/**
+ * Bar chart. mode "grouped" | "stacked" | "stacked100" | "diverging";
+ * orientation="horizontal" swaps the axes. Only the outermost stack segment is rounded,
+ * so colour joins inside a stack stay flush. overlay = line on a secondary axis (vertical).
+ */
+const props = defineProps({ series:{type:Array,default:()=>[]}, categories:{type:Array,default:()=>[]}, mode:{type:String,default:'grouped'}, orientation:{type:String,default:'vertical'}, overlay:Object, width:{type:Number,default:560}, height:{type:Number,default:240}, axes:{type:Boolean,default:true}, legend:{type:Boolean,default:true}, interactive:{type:Boolean,default:true}, showValues:Boolean, radius:{type:Number,default:2}, yFormat:{type:Function,default:fmtNum}, overlayFormat:{type:Function,default:(v)=>fmtNum(v,{pct:true})}, style:Object })
+const hidden = ref([]); const hover = ref(null)
+function barPath(x,y,w,h,r,side){
+  const rr = Math.max(0, Math.min(r, w/2, h/2))
+  if (!rr) return `M${x} ${y} h${w} v${h} h${-w} Z`
+  if (side==='top') return `M${x} ${y+h} V${y+rr} a${rr} ${rr} 0 0 1 ${rr} ${-rr} h${w-rr*2} a${rr} ${rr} 0 0 1 ${rr} ${rr} V${y+h} Z`
+  if (side==='bottom') return `M${x} ${y} V${y+h-rr} a${rr} ${rr} 0 0 0 ${rr} ${rr} h${w-rr*2} a${rr} ${rr} 0 0 0 ${rr} ${-rr} V${y} Z`
+  if (side==='right') return `M${x} ${y} h${w-rr} a${rr} ${rr} 0 0 1 ${rr} ${rr} v${h-rr*2} a${rr} ${rr} 0 0 1 ${-rr} ${rr} h${-(w-rr)} Z`
+  if (side==='left') return `M${x+w} ${y} h${-(w-rr)} a${rr} ${rr} 0 0 0 ${-rr} ${rr} v${h-rr*2} a${rr} ${rr} 0 0 0 ${rr} ${rr} h${w-rr} Z`
+  return `M${x} ${y} h${w} v${h} h${-w} Z`
+}
+const g = computed(() => {
+  const horiz = props.orientation === 'horizontal'
+  const shown = props.series.filter(s=>!hidden.value.includes(s.name))
+  const n = props.categories.length || Math.max(...props.series.map(s=>s.values.length))
+  const pct = props.mode === 'stacked100'
+  const stacked = props.mode === 'stacked' || pct
+  const norm = pct
+    ? shown.map(s=>s.values.map((v,i)=>{ const tot = shown.reduce((t,o)=>t+(o.values[i]||0),0)||1; return ((v||0)/tot)*100 }))
+    : shown.map(s=>s.values)
+  const bands = stacked && shown.length ? stack(norm) : null
+  const ext = pct ? [0,100] : (stacked ? extent([(bands[bands.length-1]||[]).map(b=>b[1])]) : extent(norm))
+  const { ticks, lo, hi } = niceTicks(ext[0], ext[1], 4)
+  const labelPad = horiz ? Math.min(140, Math.max(...props.categories.map(c=>String(c).length))*6.4+12) : 44
+  const pad = horiz ? { l: props.axes?labelPad:4, r:12, t:6, b: props.axes?22:4 }
+                    : { l: props.axes?44:4, r: props.overlay?40:8, t:10, b: props.axes?24:4 }
+  const sv = horiz ? scaleLin(lo,hi,pad.l,props.width-pad.r) : scaleLin(lo,hi,props.height-pad.b,pad.t)
+  const band = (horiz ? props.height-pad.t-pad.b : props.width-pad.l-pad.r)/n
+  const mid = i => (horiz?pad.t:pad.l) + band*i + band/2
+  const groupW = Math.min(band*0.66, props.mode==='grouped' ? 20*Math.max(1,shown.length) : 30)
+  const bw = props.mode==='grouped' ? groupW/Math.max(1,shown.length) : groupW
+  const colorOf = s => s.color || SERIES[props.series.indexOf(s)%SERIES.length]
+  const zero = sv(Math.max(lo,0))
+  const rects = []
+  shown.forEach((s,si)=>(pct?norm[si]:s.values).forEach((v,i)=>{
+    if (v==null) return
+    const fill = props.mode==='diverging' ? (v>=0?'var(--chart-pos)':'var(--chart-neg)') : colorOf(s)
+    const outer = !shown.slice(si+1).some(o=>((pct?norm[shown.indexOf(o)][i]:o.values[i])||0)>0)
+    let x,y,w,h,side
+    if (stacked) {
+      const a = sv(bands[si][i][0]), b = sv(bands[si][i][1])
+      if (horiz) { x=Math.min(a,b); w=Math.max(1,Math.abs(b-a)); y=mid(i)-bw/2; h=bw; side=outer?'right':null }
+      else { y=Math.min(a,b); h=Math.max(1,Math.abs(a-b)); x=mid(i)-bw/2; w=bw; side=outer?'top':null }
+    } else if (horiz) {
+      const e = sv(v); x=Math.min(zero,e); w=Math.max(1,Math.abs(e-zero)); y=mid(i)-groupW/2+si*bw+0.5; h=Math.max(1,bw-1); side=v>=0?'right':'left'
+    } else {
+      const e = sv(v); y=Math.min(zero,e); h=Math.max(1,Math.abs(e-zero)); x=mid(i)-groupW/2+si*bw+0.5; w=Math.max(1,bw-1); side=v>=0?'top':'bottom'
+    }
+    rects.push({ key:s.name+i, d:barPath(x,y,w,h,props.radius,side), fill, x, y, w, h, s, i,
+      text: pct ? norm[si][i].toFixed(1)+'%' : props.yFormat(s.values[i]) })
+  }))
+  let ov = null
+  if (props.overlay && !horiz) {
+    const e2 = extent([props.overlay.values]); const t = niceTicks(e2[0],e2[1],4)
+    const osy = scaleLin(t.lo,t.hi,props.height-pad.b,pad.t)
+    ov = { path: linePath(props.overlay.values.map((v,i)=>[mid(i),osy(v)])), dots: props.overlay.values.map((v,i)=>[mid(i),osy(v)]), ticks:t.ticks, osy, color: props.overlay.color||'var(--chart-total)' }
+  }
+  return { horiz, shown, pct, stacked, ticks, sv, band, mid, pad, rects, ov, n, colorOf,
+    fmtAxis: pct ? (v=>v+'%') : props.yFormat }
+})
+function move(e){
+  if(!props.interactive) return
+  const r = e.currentTarget.getBoundingClientRect()
+  const off = g.value.horiz ? e.clientY-r.top-g.value.pad.t : e.clientX-r.left-g.value.pad.l
+  const i = Math.floor(off/g.value.band)
+  hover.value = i>=0 && i<g.value.n ? i : null
+}
+function toggle(name){
+  if (hidden.value.includes(name)) hidden.value = hidden.value.filter(x=>x!==name)
+  else if (hidden.value.length+1 < props.series.length) hidden.value = [...hidden.value, name]
+}
+function rowVal(s){
+  const i = hover.value
+  return g.value.pct ? (g.value.rects.find(r=>r.s===s && r.i===i)||{}).text : props.yFormat(s.values[i])
+}
+</script>
+<template>
+  <div :style="{position:'relative',display:'inline-block',lineHeight:0,...style}">
+    <svg :width="width" :height="height" @mousemove="move" @mouseleave="hover=null" role="img">
+      <template v-if="axes">
+        <g v-for="t in g.ticks" :key="t">
+          <line v-if="g.horiz" :x1="g.sv(t)" :x2="g.sv(t)" :y1="g.pad.t" :y2="height-g.pad.b" :stroke="t===0?'var(--chart-axis)':'var(--chart-grid)'" stroke-width="1"/>
+          <line v-else :x1="g.pad.l" :x2="width-g.pad.r" :y1="g.sv(t)" :y2="g.sv(t)" :stroke="t===0?'var(--chart-axis)':'var(--chart-grid)'" stroke-width="1"/>
+          <text v-if="g.horiz" :x="g.sv(t)" :y="height-g.pad.b+15" text-anchor="middle" style="font-family:var(--font-mono);font-size:10px;fill:var(--chart-label)">{{ g.fmtAxis(t) }}</text>
+          <text v-else :x="g.pad.l-8" :y="g.sv(t)+3" text-anchor="end" style="font-family:var(--font-mono);font-size:10px;fill:var(--chart-label)">{{ g.fmtAxis(t) }}</text>
+        </g>
+        <text v-for="(c,i) in categories" :key="'c'+i"
+          :x="g.horiz ? g.pad.l-8 : g.mid(i)" :y="g.horiz ? g.mid(i)+3.5 : height-g.pad.b+16"
+          :text-anchor="g.horiz ? 'end' : 'middle'"
+          :style="{fontFamily:'var(--font-sans)',fontSize:g.horiz?'10.5px':'10px',fill:hover===i?'var(--text-heading)':'var(--chart-label)'}">{{ c }}</text>
+      </template>
+      <rect v-if="hover!=null && g.horiz" :x="g.pad.l" :y="g.pad.t+g.band*hover" :width="width-g.pad.l-g.pad.r" :height="g.band" fill="var(--bg-hover)"/>
+      <rect v-else-if="hover!=null" :x="g.pad.l+g.band*hover" :y="g.pad.t" :width="g.band" :height="height-g.pad.t-g.pad.b" fill="var(--bg-hover)"/>
+      <path v-for="r in g.rects" :key="r.key" :d="r.d" :fill="r.fill" :opacity="hover==null||hover===r.i?1:0.55" style="transition:opacity var(--dur-fast) var(--ease-out)"/>
+      <template v-if="showValues">
+        <text v-for="r in g.rects.filter(r=>(g.horiz?r.w:r.h)>=22)" :key="'v'+r.key"
+          :x="g.horiz ? r.x+r.w-5 : r.x+r.w/2" :y="g.horiz ? r.y+r.h/2+3.5 : r.y+12"
+          :text-anchor="g.horiz ? 'end' : 'middle'" style="font-family:var(--font-mono);font-size:10px;fill:var(--on-accent)">{{ r.text }}</text>
+      </template>
+      <template v-if="g.ov">
+        <path :d="g.ov.path" fill="none" :stroke="g.ov.color" stroke-width="1.5"/>
+        <circle v-for="(d,i) in g.ov.dots" :key="'o'+i" :cx="d[0]" :cy="d[1]" r="2.5" :fill="g.ov.color"/>
+        <text v-if="axes" v-for="t in g.ov.ticks" :key="'ot'+t" :x="width-g.pad.r+6" :y="g.ov.osy(t)+3" style="font-family:var(--font-mono);font-size:10px;fill:var(--chart-label)">{{ overlayFormat(t) }}</text>
+      </template>
+    </svg>
+    <div v-if="hover!=null && interactive" :style="{position:'absolute',left:(g.horiz ? Math.min(width-20, g.pad.l+(width-g.pad.l-g.pad.r)*0.5) : g.mid(hover))+'px',top:(g.horiz ? g.pad.t+g.band*hover+g.band/2 : height/2-10)+'px',transform:(g.horiz || g.mid(hover)>width*0.62)?'translate(calc(-100% - 10px),-50%)':'translate(10px,-50%)',pointerEvents:'none',zIndex:5,background:'var(--bg-surface)',border:'1px solid var(--border-card)',borderRadius:'var(--radius-md)',boxShadow:'var(--shadow-menu)',padding:'7px 10px',lineHeight:'normal',whiteSpace:'nowrap'}">
+      <div style="font-family:var(--font-sans);font-size:var(--text-2xs);color:var(--text-muted);padding-bottom:4px">{{ categories[hover] }}</div>
+      <div v-for="s in g.shown" :key="s.name" style="display:flex;align-items:center;gap:6px;padding:1px 0">
+        <span :style="{width:'7px',height:'7px',borderRadius:'2px',background:mode==='diverging'?(s.values[hover]>=0?'var(--chart-pos)':'var(--chart-neg)'):g.colorOf(s),flexShrink:0}"/>
+        <span style="font-family:var(--font-sans);font-size:var(--text-xs);color:var(--text-secondary)">{{ s.name }}</span>
+        <span style="font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-heading);margin-left:auto;padding-left:10px">{{ rowVal(s) }}</span>
+      </div>
+      <div v-if="overlay" style="display:flex;align-items:center;gap:6px;padding:1px 0">
+        <span :style="{width:'7px',height:'7px',borderRadius:'2px',background:overlay.color||'var(--chart-total)'}"/>
+        <span style="font-family:var(--font-sans);font-size:var(--text-xs);color:var(--text-secondary)">{{ overlay.name }}</span>
+        <span style="font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-heading);margin-left:auto;padding-left:10px">{{ overlayFormat(overlay.values[hover]) }}</span>
+      </div>
+    </div>
+    <div v-if="legend && (series.length>1 || overlay)" style="display:flex;flex-wrap:wrap;gap:4px 14px;padding-top:8px;line-height:normal">
+      <span v-for="(s,i) in series" :key="s.name" role="button" tabindex="0" @click="toggle(s.name)"
+        :style="{display:'inline-flex',alignItems:'center',gap:'6px',cursor:'pointer',opacity:hidden.includes(s.name)?0.4:1}">
+        <span :style="{width:'8px',height:'8px',borderRadius:'2px',background:s.color||SERIES[i%SERIES.length]}"/>
+        <span :style="{fontFamily:'var(--font-sans)',fontSize:'var(--text-xs)',color:'var(--text-secondary)',textDecoration:hidden.includes(s.name)?'line-through':'none'}">{{ s.name }}</span>
+      </span>
+      <span v-if="overlay" style="display:inline-flex;align-items:center;gap:6px">
+        <span :style="{width:'8px',height:'8px',borderRadius:'2px',background:overlay.color||'var(--chart-total)'}"/>
+        <span style="font-family:var(--font-sans);font-size:var(--text-xs);color:var(--text-secondary)">{{ overlay.name }}</span>
+      </span>
+    </div>
+  </div>
+</template>

package/components/charts/BarList.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+export interface BarListRow { label: string; value: number; color?: string; /** Signed % shown at the right */ delta?: number; }
+/** Horizontal labeled bars — top-N rankings, budget consumption. */
+export interface BarListProps {
+  rows?: BarListRow[];
+  /** Scale cap; defaults to the largest row */ max?: number;
+  width?: number; barHeight?: number; showTrack?: boolean;
+  valueFormat?: (v: number) => string;
+  interactive?: boolean;
+  onSelect?: (row: BarListRow) => void;
+  style?: React.CSSProperties;
+}
+export declare function BarList(props: BarListProps): JSX.Element;

package/components/charts/BarList.jsx

@@ -0,0 +1,31 @@
+import React from "react";
+import { fmtNum } from "./chart-geometry.js";
+
+/**
+ * Horizontal labeled bars — top-N rankings, budget consumption, category comparison.
+ * rows: [{label, value, color?, delta?}] — delta renders a signed % at the right.
+ */
+export function BarList({ rows = [], max, width = 360, valueFormat = fmtNum, showTrack = true, barHeight = 8, interactive = true, onSelect, style }) {
+  const [hover, setHover] = React.useState(null);
+  const top = max != null ? max : Math.max(1, ...rows.map((r) => r.value));
+  const total = rows.reduce((s, r) => s + r.value, 0) || 1;
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: 10, width, ...style }}>
+      {rows.map((r) => (
+        <div key={r.label} onMouseEnter={interactive ? () => setHover(r.label) : undefined} onMouseLeave={interactive ? () => setHover(null) : undefined}
+          onClick={onSelect ? () => onSelect(r) : undefined}
+          style={{ opacity: hover == null || hover === r.label ? 1 : 0.5, cursor: onSelect ? "pointer" : "default", transition: "var(--t-hover)" }}>
+          <div style={{ display: "flex", alignItems: "baseline", gap: 8, paddingBottom: 4 }}>
+            <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-sm)", color: "var(--text-body)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{r.label}</span>
+            <span style={{ marginLeft: "auto", fontFamily: "var(--font-mono)", fontSize: "var(--text-xs)", color: "var(--text-heading)" }}>{valueFormat(r.value)}</span>
+            {hover === r.label && r.delta == null ? <span style={{ fontFamily: "var(--font-mono)", fontSize: "var(--text-2xs)", color: "var(--text-muted)", paddingLeft: 6 }}>{((r.value / total) * 100).toFixed(1)}%</span> : null}
+            {r.delta != null ? <span style={{ fontFamily: "var(--font-mono)", fontSize: "var(--text-2xs)", color: r.delta >= 0 ? "var(--chart-pos)" : "var(--chart-neg)", minWidth: 38, textAlign: "right" }}>{(r.delta >= 0 ? "+" : "") + r.delta.toFixed(1)}%</span> : null}
+          </div>
+          <div style={{ height: barHeight, borderRadius: "var(--radius-full)", background: showTrack ? "var(--chart-track)" : "transparent", overflow: "hidden" }}>
+            <div style={{ width: Math.max(1, (r.value / top) * 100) + "%", height: "100%", borderRadius: "var(--radius-full)", background: r.color || "var(--series-1)", filter: hover === r.label ? "brightness(1.08)" : "none", transition: "width var(--dur) var(--ease-out), filter var(--dur-fast) var(--ease-out)" }} />
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

package/components/charts/BarList.vue

@@ -0,0 +1,25 @@
+<script setup>
+import { computed, ref } from 'vue'
+import { fmtNum } from './chart-geometry.js'
+// Horizontal labeled bars — top-N rankings, budget consumption.
+const props = defineProps({ rows:{type:Array,default:()=>[]}, max:Number, width:{type:Number,default:360}, barHeight:{type:Number,default:8}, showTrack:{type:Boolean,default:true}, valueFormat:{type:Function,default:fmtNum}, interactive:{type:Boolean,default:true}, style:Object })
+const top = computed(() => props.max!=null ? props.max : Math.max(1,...props.rows.map(r=>r.value)))
+const total = computed(() => props.rows.reduce((s,r)=>s+r.value,0)||1)
+const hover = ref(null)
+</script>
+<template>
+  <div :style="{display:'flex',flexDirection:'column',gap:'10px',width:width+'px',...style}">
+    <div v-for="r in rows" :key="r.label" @mouseenter="interactive && (hover=r.label)" @mouseleave="interactive && (hover=null)"
+      :style="{opacity:hover==null||hover===r.label?1:0.5,transition:'var(--t-hover)'}">
+      <div style="display:flex;align-items:baseline;gap:8px;padding-bottom:4px">
+        <span style="font-family:var(--font-sans);font-size:var(--text-sm);color:var(--text-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis">{{ r.label }}</span>
+        <span style="margin-left:auto;font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-heading)">{{ valueFormat(r.value) }}</span>
+        <span v-if="hover===r.label && r.delta==null" style="font-family:var(--font-mono);font-size:var(--text-2xs);color:var(--text-muted);padding-left:6px">{{ ((r.value/total)*100).toFixed(1) }}%</span>
+        <span v-if="r.delta!=null" :style="{fontFamily:'var(--font-mono)',fontSize:'var(--text-2xs)',color:r.delta>=0?'var(--chart-pos)':'var(--chart-neg)',minWidth:'38px',textAlign:'right'}">{{ (r.delta>=0?'+':'')+r.delta.toFixed(1) }}%</span>
+      </div>
+      <div :style="{height:barHeight+'px',borderRadius:'var(--radius-full)',background:showTrack?'var(--chart-track)':'transparent',overflow:'hidden'}">
+        <div :style="{width:Math.max(1,(r.value/top)*100)+'%',height:'100%',borderRadius:'var(--radius-full)',background:r.color||'var(--series-1)',filter:hover===r.label?'brightness(1.08)':'none',transition:'width var(--dur) var(--ease-out), filter var(--dur-fast) var(--ease-out)'}"/>
+      </div>
+    </div>
+  </div>
+</template>

package/components/charts/BoxPlot.d.ts

@@ -0,0 +1,18 @@
+import * as React from "react";
+export interface BoxGroup {
+  label: string;
+  /** Raw values — summarized for you */ values?: number[];
+  q1?: number; med?: number; q3?: number; lo?: number; hi?: number; outliers?: number[];
+  color?: string;
+}
+/** Box & whisker with Tukey-fence outliers. */
+export interface BoxPlotProps {
+  groups?: BoxGroup[];
+  width?: number; height?: number;
+  axes?: boolean; interactive?: boolean;
+  valueFormat?: (v: number) => string;
+  style?: React.CSSProperties;
+}
+export declare function BoxPlot(props: BoxPlotProps): JSX.Element;
+/** Five-number summary helper (q1, med, q3, fences, outliers). */
+export declare function summarize(values: number[]): { q1: number; med: number; q3: number; lo: number; hi: number; outliers: number[] };