@keyfunc/keybricks-ds 1.0.0

package/components/charts/Scatter3D.jsx

@@ -0,0 +1,69 @@
+import React from "react";
+import { fmtNum } from "./chart-geometry.js";
+import { makeProj, dragRotate } from "./chart-3d.js";
+import { ChartTooltip, wrapStyle } from "./ChartKit.jsx";
+
+/**
+ * 3D scatter — points in x/y/z with group coloring; drag to orbit. Depth-sorted circles
+ * with radius attenuated by distance so nearer points read closer.
+ */
+export function Scatter3D({ points = [], width = 420, height = 300, yaw: yaw0 = 35, pitch: pitch0 = 28, r = 4, xLabel = "x", yLabel = "y", zLabel = "z", legend = true, interactive = true, valueFormat = fmtNum, style }) {
+  const [rot, setRot] = React.useState({ yaw: yaw0, pitch: pitch0 });
+  const [hover, setHover] = React.useState(null);
+  const names = [...new Set(points.map((p) => p.series).filter(Boolean))];
+  const norm = (arr) => { const l = Math.min(...arr), h = Math.max(...arr), s = h - l || 1; return (v) => (v - l) / s - 0.5; };
+  const nx = norm(points.map((p) => p.x)), ny = norm(points.map((p) => p.y)), nz = norm(points.map((p) => p.z));
+  const scale = Math.min(width, height) * 0.44;
+  const P = makeProj(width / 2, height / 2, scale, rot.yaw, rot.pitch);
+  const dots = points.map((p, i) => ({ p, i, ...P(nx(p.x), ny(p.y), nz(p.z)) })).sort((a, b) => b.depth - a.depth);
+  // Cube edges for orientation
+  const C = [-0.5, 0.5];
+  const edges = [];
+  C.forEach((a) => C.forEach((b) => { edges.push([P(a, b, -0.5), P(a, b, 0.5)], [P(a, -0.5, b), P(a, 0.5, b)], [P(-0.5, a, b), P(0.5, a, b)]); }));
+  const colorOf = (p) => p.color || `var(--series-${(names.indexOf(p.series) % 10) + 1})`;
+  /* Three axis edges meet at visible cube corners; names sit outside the cube along the
+     screen-space outward direction, so they never land inside the plot at any rotation. */
+  const axes3 = [
+    { a: P(-0.5, -0.5, 0.5), b: P(0.5, -0.5, 0.5), name: xLabel },
+    { a: P(-0.5, -0.5, 0.5), b: P(-0.5, 0.5, 0.5), name: yLabel },
+    { a: P(0.5, -0.5, 0.5), b: P(0.5, -0.5, -0.5), name: zLabel },
+  ].map((ax) => {
+    const mx = (ax.a.x + ax.b.x) / 2, my = (ax.a.y + ax.b.y) / 2;
+    const dx = mx - width / 2, dy = my - height / 2;
+    const len = Math.hypot(dx, dy) || 1;
+    return { ...ax, nx: mx + (dx / len) * 18, ny: my + (dy / len) * 18 };
+  });
+  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" }}>
+        {edges.map(([a, b], i) => <line key={i} x1={a.x} y1={a.y} x2={b.x} y2={b.y} stroke="var(--chart-axis)" strokeWidth="1" />)}
+        {axes3.map((ax, i) => <line key={"ae" + i} x1={ax.a.x} y1={ax.a.y} x2={ax.b.x} y2={ax.b.y} stroke="var(--chart-guide)" strokeWidth="1" />)}
+        {axes3.map((ax, i) => (
+          <text key={"at" + i} x={ax.nx} y={ax.ny + 3} textAnchor="middle" style={{ fontFamily: "var(--font-sans)", fontSize: 10, fill: "var(--text-secondary)" }}>{ax.name}</text>
+        ))}
+        {dots.map((d) => (
+          <circle key={d.i} cx={d.x} cy={d.y} r={r * (1.18 - (d.depth + 0.75) * 0.35) * (hover === d.i ? 1.5 : 1)}
+            fill={colorOf(d.p)} opacity={hover === d.i ? 1 : (0.85 - (d.depth + 0.75) * 0.28) * (hover == null ? 1 : 0.45)}
+            stroke={hover === d.i ? "var(--bg-surface)" : "none"} strokeWidth="1.5"
+            onMouseEnter={interactive ? () => setHover(d.i) : undefined} onMouseLeave={interactive ? () => setHover(null) : undefined} />
+        ))}
+      </svg>
+      {hover != null && interactive ? (() => {
+        const d = dots.find((x) => x.i === hover), p = d.p;
+        return <ChartTooltip x={d.x} y={d.y} flip={d.x > width * 0.6} title={p.label || p.series}
+          rows={[{ label: "x", value: valueFormat(p.x) }, { label: "y", value: valueFormat(p.y) }, { label: "z", value: valueFormat(p.z) }]} />;
+      })() : null}
+      {legend && names.length > 1 ? (
+        <div style={{ display: "flex", gap: 14, paddingTop: 6, lineHeight: "normal" }}>
+          {names.map((nm, i) => (
+            <span key={nm} style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
+              <span style={{ width: 8, height: 8, borderRadius: 4, background: `var(--series-${(i % 10) + 1})` }} />
+              <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)", color: "var(--text-secondary)" }}>{nm}</span>
+            </span>
+          ))}
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/components/charts/Scatter3D.vue

@@ -0,0 +1,59 @@
+<script setup>
+import { ref, computed } from 'vue'
+import { fmtNum, SERIES } from './chart-geometry.js'
+import { makeProj } from './chart-3d.js'
+// 3D scatter in an orientation cube; drag to orbit. Depth attenuates radius and opacity.
+const props = defineProps({ points:{type:Array,default:()=>[]}, width:{type:Number,default:420}, height:{type:Number,default:300}, yaw:{type:Number,default:35}, pitch:{type:Number,default:28}, r:{type:Number,default:4}, xLabel:{type:String,default:'x'}, yLabel:{type:String,default:'y'}, zLabel:{type:String,default:'z'}, legend:{type:Boolean,default:true}, 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 names = [...new Set(props.points.map(p=>p.series).filter(Boolean))]
+  const norm = arr => { const l=Math.min(...arr), h=Math.max(...arr), s=h-l||1; return v=>(v-l)/s-0.5 }
+  const nx = norm(props.points.map(p=>p.x)), ny = norm(props.points.map(p=>p.y)), nz = norm(props.points.map(p=>p.z))
+  const scale = Math.min(props.width, props.height)*0.44
+  const P = makeProj(props.width/2, props.height/2, scale, rot.value.yaw, rot.value.pitch)
+  const dots = props.points.map((p,i)=>({ p, i, ...P(nx(p.x), ny(p.y), nz(p.z)),
+    color: p.color || SERIES[(p.series?names.indexOf(p.series):0)%SERIES.length] })).sort((a,b)=>b.depth-a.depth)
+  const C = [-0.5,0.5]; const edges = []
+  C.forEach(a=>C.forEach(b=>{ edges.push([P(a,b,-0.5),P(a,b,0.5)],[P(a,-0.5,b),P(a,0.5,b)],[P(-0.5,a,b),P(0.5,a,b)]) }))
+  // Axis names sit outside the cube along the screen-space outward direction.
+  const axes3 = [
+    { a:P(-0.5,-0.5,0.5), b:P(0.5,-0.5,0.5), name:props.xLabel },
+    { a:P(-0.5,-0.5,0.5), b:P(-0.5,0.5,0.5), name:props.yLabel },
+    { a:P(0.5,-0.5,0.5), b:P(0.5,-0.5,-0.5), name:props.zLabel },
+  ].map(ax=>{
+    const mx=(ax.a.x+ax.b.x)/2, my=(ax.a.y+ax.b.y)/2
+    const dx=mx-props.width/2, dy=my-props.height/2, len=Math.hypot(dx,dy)||1
+    return { ...ax, nx: mx+(dx/len)*18, ny: my+(dy/len)*18 }
+  })
+  return { names, dots, edges, axes3 }
+})
+</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'}">
+      <line v-for="(e,i) in g.edges" :key="'e'+i" :x1="e[0].x" :y1="e[0].y" :x2="e[1].x" :y2="e[1].y" stroke="var(--chart-axis)" stroke-width="1"/>
+      <line v-for="(ax,i) in g.axes3" :key="'ae'+i" :x1="ax.a.x" :y1="ax.a.y" :x2="ax.b.x" :y2="ax.b.y" stroke="var(--chart-guide)" stroke-width="1"/>
+      <text v-for="(ax,i) in g.axes3" :key="'at'+i" :x="ax.nx" :y="ax.ny+3" text-anchor="middle" style="font-family:var(--font-sans);font-size:10px;fill:var(--text-secondary)">{{ ax.name }}</text>
+      <circle v-for="d in g.dots" :key="d.i" :cx="d.x" :cy="d.y"
+        :r="r*(1.18-(d.depth+0.75)*0.35)*(hover===d.i?1.5:1)" :fill="d.color"
+        :opacity="hover===d.i ? 1 : (0.85-(d.depth+0.75)*0.28)*(hover==null?1:0.45)"
+        :stroke="hover===d.i?'var(--bg-surface)':'none'" stroke-width="1.5"
+        @mouseenter="interactive && (hover=d.i)" @mouseleave="interactive && (hover=null)"/>
+    </svg>
+    <div v-if="hover!=null && interactive" :style="{position:'absolute',left:g.dots.find(d=>d.i===hover).x+'px',top:g.dots.find(d=>d.i===hover).y+'px',transform:g.dots.find(d=>d.i===hover).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">{{ points[hover].label || points[hover].series }}</div>
+      <div style="font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-heading)">{{ xLabel }} {{ valueFormat(points[hover].x) }} · {{ yLabel }} {{ valueFormat(points[hover].y) }} · {{ zLabel }} {{ valueFormat(points[hover].z) }}</div>
+    </div>
+    <div v-if="legend && g.names.length>1" style="display:flex;gap:14px;padding-top:6px;line-height:normal">
+      <span v-for="(nm,i) in g.names" :key="nm" style="display:inline-flex;align-items:center;gap:6px">
+        <span :style="{width:'8px',height:'8px',borderRadius:'4px',background:SERIES[i%SERIES.length]}"/>
+        <span style="font-family:var(--font-sans);font-size:var(--text-xs);color:var(--text-secondary)">{{ nm }}</span>
+      </span>
+    </div>
+  </div>
+</template>

package/components/charts/ScatterChart.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+export interface ScatterPoint { x: number; y: number; /** Bubble size in data units */ r?: number; label?: string; series?: string; color?: string; }
+/** Scatter / bubble with nearest-point tooltip. */
+export interface ScatterChartProps {
+  points?: ScatterPoint[];
+  width?: number; height?: number;
+  xFormat?: (v: number) => string; yFormat?: (v: number) => string;
+  xLabel?: string; yLabel?: string;
+  axes?: boolean; legend?: boolean; interactive?: boolean;
+  style?: React.CSSProperties;
+}
+export declare function ScatterChart(props: ScatterChartProps): JSX.Element;

package/components/charts/ScatterChart.jsx

@@ -0,0 +1,53 @@
+import React from "react";
+import { fmtNum, extent, scaleLin, niceTicks, seriesColor } from "./chart-geometry.js";
+import { ChartLegend, ChartTooltip, PlotGrid, wrapStyle } from "./ChartKit.jsx";
+
+/**
+ * Scatter / bubble. points: [{x, y, r?, label?, series?}] — r in data units scaled to
+ * 3–14px bubbles. Hover pins a tooltip to the nearest point.
+ */
+export function ScatterChart({ points = [], width = 560, height = 260, xFormat = fmtNum, yFormat = fmtNum, xLabel, yLabel, axes = true, legend = true, interactive = true, style }) {
+  const [hover, setHover] = React.useState(null);
+  const names = [...new Set(points.map((p) => p.series).filter(Boolean))];
+  const pad = { l: axes ? 44 : 4, r: 10, t: 10, b: axes ? 26 : 4 };
+  const [xl, xh] = extent([points.map((p) => p.x)], false);
+  const [yl, yh] = extent([points.map((p) => p.y)], false);
+  const tx = niceTicks(xl, xh, 5), ty = niceTicks(yl, yh, 4);
+  const sx = scaleLin(tx.lo, tx.hi, pad.l + 6, width - pad.r - 6);
+  const sy = scaleLin(ty.lo, ty.hi, height - pad.b - 6, pad.t + 6);
+  const rs = points.map((p) => p.r != null ? p.r : 1);
+  const [rl, rh] = extent([rs], false);
+  const sr = (r) => 3 + ((r - rl) / (rh - rl || 1)) * 11;
+  const colorOf = (p) => p.color || seriesColor(p.series ? names.indexOf(p.series) : 0);
+  const move = (e) => {
+    if (!interactive) return;
+    const rc = e.currentTarget.getBoundingClientRect();
+    const mx = e.clientX - rc.left, my = e.clientY - rc.top;
+    let best = null, bd = 24 * 24;
+    points.forEach((p, i) => { const d = (sx(p.x) - mx) ** 2 + (sy(p.y) - my) ** 2; if (d < bd) { bd = d; best = i; } });
+    setHover(best);
+  };
+  const h = hover != null ? points[hover] : null;
+  return (
+    <div style={{ ...wrapStyle, ...style }}>
+      <svg width={width} height={height} onMouseMove={move} onMouseLeave={() => setHover(null)} role="img">
+        {axes ? <g>
+          <PlotGrid w={width} h={height} pad={pad} ticks={ty.ticks} sy={sy} xLabels={[]} sxLabel={() => 0} yFormat={yFormat} />
+          {tx.ticks.map((t) => <text key={t} x={sx(t)} y={height - pad.b + 16} textAnchor="middle" style={{ fontFamily: "var(--font-mono)", fontSize: 10, fill: "var(--chart-label)" }}>{xFormat(t)}</text>)}
+          {xLabel ? <text x={width - pad.r} y={height - 2} textAnchor="end" style={{ fontFamily: "var(--font-sans)", fontSize: 10, fill: "var(--chart-label)" }}>{xLabel}</text> : null}
+          {yLabel ? <text x={pad.l} y={pad.t - 1} style={{ fontFamily: "var(--font-sans)", fontSize: 10, fill: "var(--chart-label)" }}>{yLabel}</text> : null}
+        </g> : null}
+        {points.map((p, i) => (
+          <circle key={i} cx={sx(p.x)} cy={sy(p.y)} r={sr(p.r != null ? p.r : 1)} fill={colorOf(p)}
+            opacity={hover == null ? 0.55 : hover === i ? 0.9 : 0.2} stroke={hover === i ? "var(--bg-surface)" : "none"} strokeWidth="1.5"
+            style={{ transition: "opacity var(--dur-fast) var(--ease-out)" }} />
+        ))}
+      </svg>
+      {h && interactive ? (
+        <ChartTooltip x={sx(h.x)} y={sy(h.y)} flip={sx(h.x) > width * 0.62} title={h.label || h.series}
+          rows={[{ label: xLabel || "x", value: xFormat(h.x) }, { label: yLabel || "y", value: yFormat(h.y) }].concat(h.r != null ? [{ label: "size", value: fmtNum(h.r) }] : [])} />
+      ) : null}
+      {legend && names.length > 1 ? <ChartLegend style={{ paddingTop: 8 }} items={names.map((nm, i) => ({ label: nm, color: seriesColor(i) }))} /> : null}
+    </div>
+  );
+}

package/components/charts/ScatterChart.vue

@@ -0,0 +1,57 @@
+<script setup>
+import { ref, computed } from 'vue'
+import { fmtNum, extent, scaleLin, niceTicks, SERIES } from './chart-geometry.js'
+// Scatter / bubble with nearest-point tooltip.
+const props = defineProps({ points:{type:Array,default:()=>[]}, width:{type:Number,default:560}, height:{type:Number,default:260}, xFormat:{type:Function,default:fmtNum}, yFormat:{type:Function,default:fmtNum}, xLabel:String, yLabel:String, axes:{type:Boolean,default:true}, legend:{type:Boolean,default:true}, interactive:{type:Boolean,default:true}, style:Object })
+const hover = ref(null)
+const g = computed(() => {
+  const names = [...new Set(props.points.map(p=>p.series).filter(Boolean))]
+  const pad = { l: props.axes?44:4, r:10, t:10, b: props.axes?26:4 }
+  const [xl,xh] = extent([props.points.map(p=>p.x)], false)
+  const [yl,yh] = extent([props.points.map(p=>p.y)], false)
+  const tx = niceTicks(xl,xh,5), ty = niceTicks(yl,yh,4)
+  const sx = scaleLin(tx.lo,tx.hi,pad.l+6,props.width-pad.r-6)
+  const sy = scaleLin(ty.lo,ty.hi,props.height-pad.b-6,pad.t+6)
+  const rs = props.points.map(p=>p.r!=null?p.r:1)
+  const [rl,rh] = extent([rs], false)
+  return { names, pad, tx, ty, sx, sy,
+    dots: props.points.map((p,i)=>({ p, i, cx:sx(p.x), cy:sy(p.y), r: 3+(((p.r!=null?p.r:1)-rl)/(rh-rl||1))*11,
+      color: p.color || SERIES[(p.series?names.indexOf(p.series):0)%SERIES.length] })) }
+})
+function move(e){
+  if (!props.interactive) return
+  const rc = e.currentTarget.getBoundingClientRect()
+  const mx = e.clientX-rc.left, my = e.clientY-rc.top
+  let best=null, bd=576
+  g.value.dots.forEach(d=>{ const dd=(d.cx-mx)**2+(d.cy-my)**2; if(dd<bd){bd=dd;best=d.i} })
+  hover.value = best
+}
+</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.ty.ticks" :key="t">
+          <line :x1="g.pad.l" :x2="width-g.pad.r" :y1="g.sy(t)" :y2="g.sy(t)" :stroke="t===0?'var(--chart-axis)':'var(--chart-grid)'" stroke-width="1"/>
+          <text :x="g.pad.l-8" :y="g.sy(t)+3" text-anchor="end" style="font-family:var(--font-mono);font-size:10px;fill:var(--chart-label)">{{ yFormat(t) }}</text>
+        </g>
+        <text v-for="t in g.tx.ticks" :key="'x'+t" :x="g.sx(t)" :y="height-g.pad.b+16" text-anchor="middle" style="font-family:var(--font-mono);font-size:10px;fill:var(--chart-label)">{{ xFormat(t) }}</text>
+        <text v-if="xLabel" :x="width-g.pad.r" :y="height-2" text-anchor="end" style="font-family:var(--font-sans);font-size:10px;fill:var(--chart-label)">{{ xLabel }}</text>
+        <text v-if="yLabel" :x="g.pad.l" :y="g.pad.t-1" style="font-family:var(--font-sans);font-size:10px;fill:var(--chart-label)">{{ yLabel }}</text>
+      </template>
+      <circle v-for="d in g.dots" :key="d.i" :cx="d.cx" :cy="d.cy" :r="d.r" :fill="d.color"
+        :opacity="hover==null?.55:hover===d.i?.9:.2" :stroke="hover===d.i?'var(--bg-surface)':'none'" stroke-width="1.5"
+        style="transition:opacity var(--dur-fast) var(--ease-out)"/>
+    </svg>
+    <div v-if="hover!=null && interactive" :style="{position:'absolute',left:g.dots[hover].cx+'px',top:g.dots[hover].cy+'px',transform:g.dots[hover].cx>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'}">
+      <div style="font-family:var(--font-sans);font-size:var(--text-2xs);color:var(--text-muted);padding-bottom:4px;white-space:nowrap">{{ points[hover].label || points[hover].series }}</div>
+      <div style="font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-heading);white-space:nowrap">{{ (xLabel||'x')+' '+xFormat(points[hover].x) }} · {{ (yLabel||'y')+' '+yFormat(points[hover].y) }}</div>
+    </div>
+    <div v-if="legend && g.names.length>1" style="display:flex;gap:14px;padding-top:8px;line-height:normal">
+      <span v-for="(nm,i) in g.names" :key="nm" style="display:inline-flex;align-items:center;gap:6px">
+        <span :style="{width:'8px',height:'8px',borderRadius:'2px',background:SERIES[i%SERIES.length]}"/>
+        <span style="font-family:var(--font-sans);font-size:var(--text-xs);color:var(--text-secondary)">{{ nm }}</span>
+      </span>
+    </div>
+  </div>
+</template>

package/components/charts/Sparkline.d.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+/** Micro trend for stat tiles, table cells, list rows — no axes, no labels. */
+export interface SparklineProps {
+  values?: number[];
+  mode?: "line" | "area" | "bars";
+  curve?: "linear" | "smooth" | "step";
+  /** "auto" colors by direction (green up / red down) */
+  tone?: "default" | "auto" | "pos" | "neg" | "muted";
+  width?: number; height?: number; strokeWidth?: number;
+  /** End-point dot (line/area) */
+  dot?: boolean;
+  /** Dashed reference value */
+  baseline?: number;
+  /** Hover readout (on by default even at tile size) */ interactive?: boolean;
+  /** Point labels shown in the hover chip */ labels?: string[];
+  valueFormat?: (v: number) => string;
+  style?: React.CSSProperties;
+}
+export declare function Sparkline(props: SparklineProps): JSX.Element;

package/components/charts/Sparkline.jsx

@@ -0,0 +1,63 @@
+import React from "react";
+import { extent, scaleLin, shapePath, closeToBaseline, fmtNum } from "./chart-geometry.js";
+
+/**
+ * Micro line/area/bar chart for stat tiles, table cells and list rows. No axes, no labels.
+ * mode: "line" | "area" | "bars". curve: "linear" | "smooth" | "step".
+ * tone: "default" (series-1) | "auto" (green up / red down) | "pos" | "neg" | "muted".
+ * Interactive by default: hovering snaps to the nearest point and shows a compact value chip.
+ */
+export function Sparkline({ values = [], mode = "line", curve = "linear", tone = "default", width = 96, height = 28, strokeWidth = 1.5, dot = true, baseline, interactive = true, labels, valueFormat = fmtNum, style }) {
+  const [hover, setHover] = React.useState(null);
+  const uid = React.useId ? React.useId().replace(/:/g, "") : "kbspark";
+  const [lo, hi] = extent([values], mode === "bars");
+  const pad = strokeWidth + 1.5;
+  const sx = scaleLin(0, values.length - 1 || 1, pad, width - pad);
+  const sy = scaleLin(lo, hi, height - pad, pad);
+  const up = values.length > 1 && values[values.length - 1] >= values[0];
+  const color = tone === "auto" ? (up ? "var(--chart-pos)" : "var(--chart-neg)")
+    : tone === "pos" ? "var(--chart-pos)" : tone === "neg" ? "var(--chart-neg)"
+    : tone === "muted" ? "var(--chart-guide)" : "var(--series-1)";
+  const pts = values.map((v, i) => [sx(i), sy(v)]);
+  const d = shapePath(pts, curve);
+  const bw = Math.max(2, (width - pad * 2) / (values.length || 1) - 2);
+  const move = (e) => {
+    if (!interactive) return;
+    const r = e.currentTarget.getBoundingClientRect();
+    const i = Math.round(((e.clientX - r.left - pad) / (width - pad * 2)) * (values.length - 1 || 1));
+    setHover(Math.max(0, Math.min(values.length - 1, i)));
+  };
+  const chip = hover != null && interactive ? (
+    <span style={{ position: "absolute", left: Math.min(Math.max(sx(hover), 18), width - 18), top: -4, transform: "translate(-50%,-100%)", pointerEvents: "none", whiteSpace: "nowrap", background: "var(--bg-surface)", border: "1px solid var(--border-card)", borderRadius: "var(--radius-sm)", boxShadow: "var(--shadow-menu)", padding: "2px 6px", fontFamily: "var(--font-mono)", fontSize: 10, lineHeight: "14px", color: "var(--text-heading)", zIndex: 5 }}>
+      {labels && labels[hover] ? <span style={{ color: "var(--text-muted)", paddingRight: 5 }}>{labels[hover]}</span> : null}
+      {valueFormat(values[hover])}
+    </span>
+  ) : null;
+  return (
+    <span style={{ position: "relative", display: "inline-block", verticalAlign: "middle", lineHeight: 0, ...style }}>
+      <svg width={width} height={height} onMouseMove={move} onMouseLeave={() => setHover(null)} role="img" style={{ display: "block", overflow: "visible" }}>
+        {mode === "area" ? (
+          <defs>
+            <linearGradient id={uid} x1="0" y1="0" x2="0" y2="1">
+              <stop offset="0%" stopColor={color} stopOpacity="0.38" />
+              <stop offset="100%" stopColor={color} stopOpacity="0.02" />
+            </linearGradient>
+          </defs>
+        ) : null}
+        {mode === "bars" ? values.map((v, i) => {
+          const y = sy(Math.max(0, v)), y0 = sy(Math.min(0, v));
+          return <rect key={i} x={sx(i) - bw / 2} y={y} width={bw} height={Math.max(1.5, y0 - y)} rx="1" fill={v < 0 ? "var(--chart-neg)" : color} opacity={hover === i ? 1 : hover != null ? 0.4 : i === values.length - 1 ? 1 : 0.55} />;
+        }) : (
+          <>
+            {baseline != null ? <line x1={pad} x2={width - pad} y1={sy(baseline)} y2={sy(baseline)} stroke="var(--chart-guide)" strokeWidth="1" strokeDasharray="2 3" /> : null}
+            {mode === "area" ? <path d={closeToBaseline(d, pts, height - pad)} fill={"url(#" + uid + ")"} /> : null}
+            <path d={d} fill="none" stroke={color} strokeWidth={strokeWidth} strokeLinejoin="round" strokeLinecap="round" />
+            {dot && pts.length ? <circle cx={pts[pts.length - 1][0]} cy={pts[pts.length - 1][1]} r={strokeWidth + 0.8} fill={color} /> : null}
+            {hover != null && interactive ? <circle cx={sx(hover)} cy={sy(values[hover])} r={strokeWidth + 1.4} fill={color} stroke="var(--bg-surface)" strokeWidth="1.5" /> : null}
+          </>
+        )}
+      </svg>
+      {chip}
+    </span>
+  );
+}

package/components/charts/Sparkline.vue

@@ -0,0 +1,54 @@
+<script setup>
+import { computed, ref } from 'vue'
+import { extent, scaleLin, shapePath, closeToBaseline, fmtNum } from './chart-geometry.js'
+// Micro line/area/bar trend — no axes, no labels. tone "auto" = green up / red down.
+const props = defineProps({ values:{type:Array,default:()=>[]}, mode:{type:String,default:'line'}, curve:{type:String,default:'linear'}, tone:{type:String,default:'default'}, width:{type:Number,default:96}, height:{type:Number,default:28}, strokeWidth:{type:Number,default:1.5}, dot:{type:Boolean,default:true}, baseline:Number, interactive:{type:Boolean,default:true}, labels:Array, valueFormat:{type:Function,default:fmtNum}, style:Object })
+const hover = ref(null)
+const uid = 'kbspark-' + Math.random().toString(36).slice(2, 8)
+function move(e){
+  if (!props.interactive) return
+  const r = e.currentTarget.getBoundingClientRect()
+  const pad = props.strokeWidth + 1.5
+  const i = Math.round(((e.clientX-r.left-pad)/(props.width-pad*2))*(props.values.length-1||1))
+  hover.value = Math.max(0, Math.min(props.values.length-1, i))
+}
+const g = computed(() => {
+  const [lo,hi] = extent([props.values], props.mode==='bars')
+  const pad = props.strokeWidth + 1.5
+  const sx = scaleLin(0, props.values.length-1||1, pad, props.width-pad)
+  const sy = scaleLin(lo, hi, props.height-pad, pad)
+  const up = props.values.length>1 && props.values[props.values.length-1] >= props.values[0]
+  const color = props.tone==='auto' ? (up?'var(--chart-pos)':'var(--chart-neg)') : props.tone==='pos'?'var(--chart-pos)' : props.tone==='neg'?'var(--chart-neg)' : props.tone==='muted'?'var(--chart-guide)':'var(--series-1)'
+  const pts = props.values.map((v,i)=>[sx(i),sy(v)])
+  const bw = Math.max(2,(props.width-pad*2)/props.values.length-2)
+  return { pad, sx, sy, color, pts, bw,
+    line: shapePath(pts, props.curve), area: closeToBaseline(shapePath(pts, props.curve), pts, props.height-pad),
+    baseY: props.baseline!=null ? sy(props.baseline) : null,
+    bars: props.values.map((v,i)=>({x:sx(i)-bw/2,y:sy(Math.max(0,v)),h:Math.max(1.5,sy(Math.min(0,v))-sy(Math.max(0,v))),neg:v<0,last:i===props.values.length-1})) }
+})
+</script>
+<template>
+  <span :style="{position:'relative',display:'inline-block',verticalAlign:'middle',lineHeight:0,...style}">
+  <svg :width="width" :height="height" @mousemove="move" @mouseleave="hover=null" role="img" style="display:block;overflow:visible">
+    <defs v-if="mode==='area'">
+      <linearGradient :id="uid" x1="0" y1="0" x2="0" y2="1">
+        <stop offset="0%" :stop-color="g.color" stop-opacity="0.38"/>
+        <stop offset="100%" :stop-color="g.color" stop-opacity="0.02"/>
+      </linearGradient>
+    </defs>
+    <template v-if="mode==='bars'">
+      <rect v-for="(b,i) in g.bars" :key="i" :x="b.x" :y="b.y" :width="g.bw" :height="b.h" rx="1" :fill="b.neg?'var(--chart-neg)':g.color" :opacity="hover===i?1:(hover!=null?.4:(b.last?1:.55))"/>
+    </template>
+    <template v-else>
+      <line v-if="g.baseY!=null" :x1="g.pad" :x2="width-g.pad" :y1="g.baseY" :y2="g.baseY" stroke="var(--chart-guide)" stroke-width="1" stroke-dasharray="2 3"/>
+      <path v-if="mode==='area'" :d="g.area" :fill="'url(#'+uid+')'"/>
+      <path :d="g.line" fill="none" :stroke="g.color" :stroke-width="strokeWidth" stroke-linejoin="round" stroke-linecap="round"/>
+      <circle v-if="dot && g.pts.length" :cx="g.pts[g.pts.length-1][0]" :cy="g.pts[g.pts.length-1][1]" :r="strokeWidth+0.8" :fill="g.color"/>
+      <circle v-if="hover!=null && interactive" :cx="g.sx(hover)" :cy="g.sy(values[hover])" :r="strokeWidth+1.4" :fill="g.color" stroke="var(--bg-surface)" stroke-width="1.5"/>
+    </template>
+  </svg>
+  <span v-if="hover!=null && interactive" :style="{position:'absolute',left:Math.min(Math.max(g.sx(hover),18),width-18)+'px',top:'-4px',transform:'translate(-50%,-100%)',pointerEvents:'none',whiteSpace:'nowrap',background:'var(--bg-surface)',border:'1px solid var(--border-card)',borderRadius:'var(--radius-sm)',boxShadow:'var(--shadow-menu)',padding:'2px 6px',fontFamily:'var(--font-mono)',fontSize:'10px',lineHeight:'14px',color:'var(--text-heading)',zIndex:5}">
+    <span v-if="labels && labels[hover]" style="color:var(--text-muted);padding-right:5px">{{ labels[hover] }}</span>{{ valueFormat(values[hover]) }}
+  </span>
+  </span>
+</template>

package/components/charts/SunburstChart.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+export interface SunburstNode { label: string; value?: number; children?: SunburstNode[]; }
+/** Hierarchy as concentric rings; click to zoom a branch, click the center to go back. */
+export interface SunburstChartProps {
+  data?: SunburstNode;
+  size?: number;
+  /** Ring thickness; derived from depth when omitted */ ringWidth?: number;
+  valueFormat?: (v: number) => string;
+  interactive?: boolean;
+  style?: React.CSSProperties;
+}
+export declare function SunburstChart(props: SunburstChartProps): JSX.Element;

package/components/charts/SunburstChart.jsx

@@ -0,0 +1,61 @@
+import React from "react";
+import { fmtNum, arcPath, polar, seriesColor } from "./chart-geometry.js";
+import { ChartTooltip, wrapStyle } from "./ChartKit.jsx";
+
+/**
+ * Sunburst — a hierarchy as concentric rings (the radial treemap). data: a root
+ * {label, children:[{label, value, children?}]} tree; leaf values roll up. Clicking a
+ * ring zooms into that branch, and the center returns to the parent.
+ */
+export function SunburstChart({ data, size = 320, ringWidth, valueFormat = fmtNum, interactive = true, style }) {
+  const [zoom, setZoom] = React.useState([]);
+  const [hover, setHover] = React.useState(null);
+  const roll = (n) => (n.children && n.children.length ? { ...n, value: n.children.reduce((s, c) => s + roll(c).value, 0), children: n.children.map(roll) } : { ...n, value: n.value || 0 });
+  const rooted = data ? roll(data) : { label: "", value: 0, children: [] };
+  const focus = zoom.reduce((n, i) => (n.children ? n.children[i] : n), rooted);
+  const depthOf = (n) => (n.children && n.children.length ? 1 + Math.max(...n.children.map(depthOf)) : 0);
+  const rings = Math.max(1, depthOf(focus));
+  const rInner = size * 0.17;
+  const rw = ringWidth || (size / 2 - 6 - rInner) / rings;
+  const segs = [];
+  const walk = (node, depth, a0, a1, path, colorIdx) => {
+    (node.children || []).forEach((c, ci) => {
+      const span = (c.value / (node.value || 1)) * (a1 - a0);
+      const idx = depth === 0 ? ci : colorIdx;
+      segs.push({ node: c, depth, a0, a1: a0 + span, path: [...path, ci], colorIdx: idx });
+      walk(c, depth + 1, a0, a0 + span, [...path, ci], idx);
+      a0 += span;
+    });
+  };
+  walk(focus, 0, 0, 360, [], 0);
+  const h = hover != null ? segs[hover] : null;
+  const tipAt = h ? polar(size / 2, size / 2, rInner + rw * (h.depth + 0.5), (h.a0 + h.a1) / 2) : null;
+  return (
+    <div style={{ ...wrapStyle, ...style }}>
+      <div style={{ position: "relative", width: size, height: size }}>
+        <svg width={size} height={size} role="img">
+          {segs.map((s, i) => (
+            <path key={i} d={arcPath(size / 2, size / 2, rInner + rw * (s.depth + 1) - 1.5, rInner + rw * s.depth, s.a0 + 0.35, Math.max(s.a0 + 0.5, s.a1 - 0.35))}
+              fill={seriesColor(s.colorIdx)} opacity={hover == null ? 0.92 - s.depth * 0.16 : hover === i ? 1 : 0.28}
+              onMouseEnter={interactive ? () => setHover(i) : undefined} onMouseLeave={interactive ? () => setHover(null) : undefined}
+              onClick={interactive && s.node.children ? () => { setZoom([...zoom, ...s.path]); setHover(null); } : undefined}
+              style={{ transition: "opacity var(--dur-fast) var(--ease-out)", cursor: interactive && s.node.children ? "pointer" : "default" }} />
+          ))}
+          <circle cx={size / 2} cy={size / 2} r={rInner - 2} fill="var(--bg-surface)" stroke="var(--border-subtle)" strokeWidth="1"
+            onClick={interactive && zoom.length ? () => setZoom(zoom.slice(0, -1)) : undefined} style={{ cursor: interactive && zoom.length ? "pointer" : "default" }} />
+        </svg>
+        <div style={{ position: "absolute", inset: 0, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", pointerEvents: "none", lineHeight: "normal", gap: 2 }}>
+          <span style={{ fontFamily: "var(--font-sans)", fontWeight: "var(--weight-light)", fontSize: Math.round(size / 13), color: "var(--text-heading)" }}>{valueFormat(focus.value)}</span>
+          <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-2xs)", color: "var(--text-muted)", maxWidth: rInner * 1.7, textAlign: "center", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
+            {zoom.length ? focus.label : focus.label || "Total"}
+          </span>
+          {zoom.length ? <span style={{ fontFamily: "var(--font-sans)", fontSize: 9, color: "var(--action-primary)" }}>↑ back</span> : null}
+        </div>
+        {h && interactive ? (
+          <ChartTooltip x={tipAt[0]} y={tipAt[1]} flip={tipAt[0] > size * 0.55} title={h.node.label}
+            rows={[{ label: "value", value: valueFormat(h.node.value), color: seriesColor(h.colorIdx) }, { label: "of parent", value: ((h.node.value / (focus.value || 1)) * 100).toFixed(1) + "%" }]} />
+        ) : null}
+      </div>
+    </div>
+  );
+}

package/components/charts/SunburstChart.vue

@@ -0,0 +1,60 @@
+<script setup>
+import { ref, computed } from 'vue'
+import { fmtNum, arcPath, polar, SERIES } from './chart-geometry.js'
+// Hierarchy as concentric rings; click to zoom a branch, click the center to go back.
+const props = defineProps({ data:Object, size:{type:Number,default:320}, ringWidth:Number, valueFormat:{type:Function,default:fmtNum}, interactive:{type:Boolean,default:true}, style:Object })
+const zoom = ref([]); const hover = ref(null)
+function roll(n){ return n.children && n.children.length ? Object.assign({}, n, { value: n.children.reduce((s,c)=>s+roll(c).value,0), children: n.children.map(roll) }) : Object.assign({}, n, { value: n.value||0 }) }
+const g = computed(() => {
+  const rooted = props.data ? roll(props.data) : { label:'', value:0, children:[] }
+  const focus = zoom.value.reduce((n,i)=> n.children ? n.children[i] : n, rooted)
+  const depthOf = n => n.children && n.children.length ? 1+Math.max(...n.children.map(depthOf)) : 0
+  const rings = Math.max(1, depthOf(focus))
+  const rInner = props.size*0.17
+  const rw = props.ringWidth || (props.size/2-6-rInner)/rings
+  const segs = []
+  const walk = (node, depth, a0, a1, path, colorIdx) => {
+    (node.children||[]).forEach((c,ci)=>{
+      const span = (c.value/(node.value||1))*(a1-a0)
+      const idx = depth===0 ? ci : colorIdx
+      segs.push({ node:c, depth, a0, a1:a0+span, path:[...path,ci], colorIdx:idx,
+        d: arcPath(props.size/2, props.size/2, rInner+rw*(depth+1)-1.5, rInner+rw*depth, a0+0.35, Math.max(a0+0.5, a0+span-0.35)),
+        color: SERIES[idx%SERIES.length] })
+      walk(c, depth+1, a0, a0+span, [...path,ci], idx)
+      a0 += span
+    })
+  }
+  walk(focus, 0, 0, 360, [], 0)
+  return { focus, rInner, rw, segs }
+})
+const tip = computed(()=>{
+  if (hover.value==null) return null
+  const s = g.value.segs[hover.value]
+  const p = polar(props.size/2, props.size/2, g.value.rInner+g.value.rw*(s.depth+0.5), (s.a0+s.a1)/2)
+  return { x:p[0], y:p[1], title:s.node.label, value: props.valueFormat(s.node.value)+' · '+((s.node.value/(g.value.focus.value||1))*100).toFixed(1)+'%' }
+})
+</script>
+<template>
+  <div :style="{position:'relative',display:'inline-block',lineHeight:0,...style}">
+    <div :style="{position:'relative',width:size+'px',height:size+'px'}">
+      <svg :width="size" :height="size" role="img">
+        <path v-for="(s,i) in g.segs" :key="i" :d="s.d" :fill="s.color"
+          :opacity="hover==null ? 0.92-s.depth*0.16 : (hover===i?1:0.28)"
+          @mouseenter="interactive && (hover=i)" @mouseleave="interactive && (hover=null)"
+          @click="interactive && s.node.children && (zoom=[...zoom,...s.path], hover=null)"
+          :style="{transition:'opacity var(--dur-fast) var(--ease-out)',cursor:interactive&&s.node.children?'pointer':'default'}"/>
+        <circle :cx="size/2" :cy="size/2" :r="g.rInner-2" fill="var(--bg-surface)" stroke="var(--border-subtle)" stroke-width="1"
+          @click="interactive && zoom.length && (zoom=zoom.slice(0,-1))" :style="{cursor:interactive&&zoom.length?'pointer':'default'}"/>
+      </svg>
+      <div style="position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;line-height:normal;gap:2px">
+        <span :style="{fontFamily:'var(--font-sans)',fontWeight:'var(--weight-light)',fontSize:Math.round(size/13)+'px',color:'var(--text-heading)'}">{{ valueFormat(g.focus.value) }}</span>
+        <span :style="{fontFamily:'var(--font-sans)',fontSize:'var(--text-2xs)',color:'var(--text-muted)',maxWidth:g.rInner*1.7+'px',textAlign:'center',whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'}">{{ g.focus.label || 'Total' }}</span>
+        <span v-if="zoom.length" style="font-family:var(--font-sans);font-size:9px;color:var(--action-primary)">↑ back</span>
+      </div>
+      <div v-if="tip && interactive" :style="{position:'absolute',left:tip.x+'px',top:tip.y+'px',transform:tip.x>size*0.55?'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">{{ tip.title }}</div>
+        <div style="font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-heading)">{{ tip.value }}</div>
+      </div>
+    </div>
+  </div>
+</template>

package/components/charts/Surface3D.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+/** 3D surface z = f(x,y) over a grid; drag to orbit. Cells shade on the heat ramp by height. */
+export interface Surface3DProps {
+  /** values[row][col] */ values?: number[][];
+  width?: number; height?: number;
+  /** Initial orbit angles (degrees) */ yaw?: number; pitch?: number;
+  /** Vertical exaggeration, 0–1 */ zScale?: number;
+  /** Cell outlines */ wire?: boolean;
+  /** Drag-to-orbit */ interactive?: boolean;
+  valueFormat?: (v: number) => string;
+  style?: React.CSSProperties;
+}
+export declare function Surface3D(props: Surface3DProps): JSX.Element;

package/components/charts/Surface3D.jsx

@@ -0,0 +1,70 @@
+import React from "react";
+import { fmtNum, niceTicks } from "./chart-geometry.js";
+import { makeProj, facePath, faceDepth, shade, lightOf, dragRotate, heatColor } from "./chart-3d.js";
+import { ChartTooltip, wrapStyle } from "./ChartKit.jsx";
+
+/**
+ * 3D surface — z = f(x, y) over a grid. values[row][col]; drag to orbit. Cells shade on
+ * the sequential heat ramp by height with light from the upper left, so the shape reads
+ * in both themes without a legend.
+ */
+export function Surface3D({ values = [], width = 420, height = 300, yaw: yaw0 = 38, pitch: pitch0 = 32, zScale = 0.55, wire = true, xLabel = "x", yLabel = "y", interactive = true, valueFormat = fmtNum, style }) {
+  const [rot, setRot] = React.useState({ yaw: yaw0, pitch: pitch0 });
+  const [hover, setHover] = React.useState(null);
+  const rows = values.length, cols = values[0] ? values[0].length : 0;
+  let lo = Infinity, hi = -Infinity;
+  values.forEach((r) => r.forEach((v) => { if (v < lo) lo = v; if (v > hi) hi = v; }));
+  const span = hi - lo || 1;
+  const scale = Math.min(width, height) * 0.42;
+  const P = makeProj(width / 2, height / 2 + height * 0.05, scale, rot.yaw, rot.pitch);
+  const pt = (r, c) => P((c / (cols - 1)) - 0.5, (((values[r][c] - lo) / span) - 0.5) * zScale * 2, (r / (rows - 1)) - 0.5);
+  const quads = [];
+  for (let r = 0; r < rows - 1; r++) for (let c = 0; c < cols - 1; c++) {
+    const pts = [pt(r, c), pt(r, c + 1), pt(r + 1, c + 1), pt(r + 1, c)];
+    const avg = (values[r][c] + values[r][c + 1] + values[r + 1][c] + values[r + 1][c + 1]) / 4;
+    const t = (avg - lo) / span;
+    quads.push({ pts, t, avg, r, c, depth: faceDepth(pts), light: lightOf(pts[0], pts[1], pts[3]) });
+  }
+  quads.sort((a, b) => b.depth - a.depth);
+  /* Base frame + three axes meeting at the front-left corner: X along the columns,
+     Y along the rows (depth), Z vertical with real ticks. */
+  const yB = -zScale - 0.06;
+  const base = [P(-0.5, yB, -0.5), P(0.5, yB, -0.5), P(0.5, yB, 0.5), P(-0.5, yB, 0.5)];
+  const basePath = "M" + base.map((p) => p.x.toFixed(1) + " " + p.y.toFixed(1)).join(" L") + " Z";
+  const corner = P(-0.5, yB, 0.5);
+  const axes3 = [
+    { a: corner, b: P(0.5, yB, 0.5), label: xLabel, lp: P(0, yB - 0.16, 0.5), anchor: "middle" },
+    { a: corner, b: P(-0.5, yB, -0.5), label: yLabel, lp: P(-0.62, yB - 0.12, 0), anchor: "end" },
+    { a: corner, b: P(-0.5, zScale, 0.5) },
+  ];
+  const zt = niceTicks(lo, hi, 3);
+  const zTicks = zt.ticks.filter((t) => t >= lo && t <= hi).map((t) => ({
+    p: P(-0.5, ((t - lo) / span - 0.5) * zScale * 2, 0.5), v: valueFormat(t),
+  }));
+  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={basePath} fill="var(--bg-inset)" stroke="var(--chart-axis)" strokeWidth="1" />
+        {axes3.map((ax, i) => <line key={"ae" + i} x1={ax.a.x} y1={ax.a.y} x2={ax.b.x} y2={ax.b.y} stroke="var(--chart-guide)" strokeWidth="1" />)}
+        {axes3.map((ax, i) => ax.label ? <text key={"al" + i} x={ax.lp.x} y={ax.lp.y + 3} textAnchor={ax.anchor} style={{ fontFamily: "var(--font-sans)", fontSize: 10, fill: "var(--text-secondary)" }}>{ax.label}</text> : null)}
+        {zTicks.map((t, i) => (
+          <g key={"zt" + 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>
+        ))}
+        {quads.map((q, i) => (
+          <path key={i} d={facePath(q.pts)} fill={shade(heatColor(q.t), Math.max(-0.35, Math.min(0.3, q.light * 0.4)) + (hover && hover.i === i ? 0.18 : 0))}
+            stroke={wire ? "var(--bg-surface)" : "none"} strokeWidth="0.5"
+            onMouseEnter={interactive ? () => setHover({ i, q, x: q.pts.reduce((s, p) => s + p.x, 0) / 4, y: q.pts.reduce((s, p) => s + p.y, 0) / 4 }) : undefined}
+            onMouseLeave={interactive ? () => setHover(null) : undefined} />
+        ))}
+      </svg>
+      {hover && interactive ? (
+        <ChartTooltip x={hover.x} y={hover.y} flip={hover.x > width * 0.6} title={"row " + (hover.q.r + 1) + " · col " + (hover.q.c + 1)}
+          rows={[{ label: "value", value: valueFormat(hover.q.avg), color: heatColor(hover.q.t) }]} />
+      ) : null}
+    </div>
+  );
+}