@alpic-ai/ui 0.0.0-dev.g05467b7 → 0.0.0-dev.g05c89ce

package/dist/components/wizard.mjs

@@ -1,25 +1,7 @@
 "use client";
 import { cn } from "../lib/cn.mjs";
-import { TabsNav, TabsNavList, TabsNavTrigger } from "./tabs.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/wizard.tsx
-function WizardSteps({ steps, activeIdx, onSelect, ariaLabel = "Wizard steps", className }) {
-	return /* @__PURE__ */ jsx(TabsNav, {
-		orientation: "vertical",
-		"aria-label": ariaLabel,
-		className,
-		children: /* @__PURE__ */ jsx(TabsNavList, { children: steps.map((step, idx) => /* @__PURE__ */ jsx(TabsNavTrigger, {
-			active: idx === activeIdx,
-			asChild: true,
-			children: /* @__PURE__ */ jsx("button", {
-				type: "button",
-				onClick: () => onSelect(idx),
-				className: "w-full justify-start text-left",
-				children: step.label
-			})
-		}, step.id)) })
-	});
-}
 function WizardProgress({ current, total, className, ...props }) {
 	const percent = total > 0 ? Math.round(current / total * 100) : 0;
 	return /* @__PURE__ */ jsxs("div", {
@@ -43,4 +25,4 @@ function WizardProgress({ current, total, className, ...props }) {
 	});
 }
 //#endregion
-export { WizardProgress, WizardSteps };
+export { WizardProgress };

package/dist/lib/chart.mjs

@@ -1,4 +1,5 @@
 import { luminance, paletteColor } from "./chart-palette.mjs";
+import * as React$1 from "react";
 //#region src/lib/chart.ts
 const formatShare = (fraction) => `${(fraction * 100).toFixed(fraction >= .1 ? 0 : 1)}%`;
 const semanticColor = (theme, semantic) => {
@@ -23,5 +24,19 @@ const resolveSeries = (series, palette, theme) => series.map((entry, index) => (
 * stack order in Recharts — first entry sits at the bottom.
 */
 const orderByLuminance = (series) => [...series].sort((lower, upper) => luminance(lower.color) - luminance(upper.color));
+const makeXAxisTick = (theme) => ({ x, y, payload, index, visibleTicksCount }) => {
+	const isFirst = index === 0;
+	const isLast = visibleTicksCount != null && index === visibleTicksCount - 1;
+	const anchor = isFirst ? "start" : isLast ? "end" : "middle";
+	return React$1.createElement("text", {
+		x: Number(x ?? 0),
+		y: Number(y ?? 0),
+		dy: 12,
+		textAnchor: anchor,
+		fill: theme.axisForeground,
+		fontFamily: theme.fontMono,
+		fontSize: 10
+	}, String(payload?.value ?? ""));
+};
 //#endregion
-export { formatShare, orderByLuminance, resolveSeries };
+export { formatShare, makeXAxisTick, orderByLuminance, resolveSeries };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alpic-ai/ui",
-  "version": "0.0.0-dev.g05467b7",
+  "version": "0.0.0-dev.g05c89ce",
   "description": "Alpic design system — shared UI components",
   "type": "module",
   "exports": {
@@ -23,32 +23,32 @@
     "src"
   ],
   "peerDependencies": {
-    "lucide-react": "^1.18.0",
+    "lucide-react": "^1.21.0",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
-    "react-hook-form": "^7.79.0",
+    "react-hook-form": "^7.80.0",
     "sonner": "^2.0.7",
     "tailwindcss": "^4.3.1",
     "tw-animate-css": "^1.4.0"
   },
   "dependencies": {
-    "@radix-ui/react-accordion": "^1.2.13",
-    "@radix-ui/react-avatar": "^1.1.12",
-    "@radix-ui/react-checkbox": "^1.3.4",
-    "@radix-ui/react-collapsible": "^1.1.13",
-    "@radix-ui/react-dialog": "^1.1.16",
-    "@radix-ui/react-dropdown-menu": "^2.1.17",
-    "@radix-ui/react-label": "^2.1.9",
-    "@radix-ui/react-popover": "^1.1.16",
-    "@radix-ui/react-radio-group": "^1.4.0",
-    "@radix-ui/react-scroll-area": "^1.2.11",
-    "@radix-ui/react-select": "^2.3.0",
-    "@radix-ui/react-separator": "^1.1.9",
-    "@radix-ui/react-slot": "^1.2.5",
-    "@radix-ui/react-switch": "^1.3.0",
-    "@radix-ui/react-tabs": "^1.1.14",
-    "@radix-ui/react-toggle-group": "^1.1.12",
-    "@radix-ui/react-tooltip": "^1.2.9",
+    "@radix-ui/react-accordion": "^1.2.14",
+    "@radix-ui/react-avatar": "^1.2.0",
+    "@radix-ui/react-checkbox": "^1.3.5",
+    "@radix-ui/react-collapsible": "^1.1.14",
+    "@radix-ui/react-dialog": "^1.1.17",
+    "@radix-ui/react-dropdown-menu": "^2.1.18",
+    "@radix-ui/react-label": "^2.1.10",
+    "@radix-ui/react-popover": "^1.1.17",
+    "@radix-ui/react-radio-group": "^1.4.1",
+    "@radix-ui/react-scroll-area": "^1.2.12",
+    "@radix-ui/react-select": "^2.3.1",
+    "@radix-ui/react-separator": "^1.1.10",
+    "@radix-ui/react-slot": "^1.3.0",
+    "@radix-ui/react-switch": "^1.3.1",
+    "@radix-ui/react-tabs": "^1.1.15",
+    "@radix-ui/react-toggle-group": "^1.1.13",
+    "@radix-ui/react-tooltip": "^1.2.10",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
@@ -60,12 +60,12 @@
     "@tailwindcss/postcss": "^4.3.1",
     "@types/react": "19.2.17",
     "@types/react-dom": "19.2.3",
-    "lucide-react": "^1.18.0",
-    "react-hook-form": "^7.79.0",
+    "lucide-react": "^1.21.0",
+    "react-hook-form": "^7.80.0",
     "shx": "^0.4.0",
     "sonner": "^2.0.7",
     "tailwindcss": "^4.3.1",
-    "tsdown": "^0.22.2",
+    "tsdown": "^0.22.3",
     "tw-animate-css": "^1.4.0",
     "typescript": "^6.0.3"
   },

package/src/components/area-chart.tsx

@@ -16,7 +16,7 @@ import {
 } from "recharts";
 
 import { useReducedMotion } from "../hooks/use-reduced-motion";
-import { type ChartSeries, orderByLuminance, resolveSeries } from "../lib/chart";
+import { type ChartSeries, makeXAxisTick, orderByLuminance, resolveSeries } from "../lib/chart";
 import type { ChartPaletteName } from "../lib/chart-palette";
 import { cn } from "../lib/cn";
 import { useChartContext } from "./chart-container";
@@ -39,6 +39,7 @@ export interface AreaChartProps {
   variant?: "stacked" | "grouped" | "expand";
   curve?: keyof typeof CURVE_TYPE;
   legend?: boolean;
+  legendAlign?: "left" | "center" | "right";
   valueFlags?: boolean;
   height?: number;
   yAxisWidth?: number;
@@ -60,6 +61,7 @@ function AreaChart({
   variant = "stacked",
   curve = "monotone",
   legend = false,
+  legendAlign = "left",
   valueFlags = false,
   height = 200,
   yAxisWidth = 48,
@@ -205,7 +207,7 @@ function AreaChart({
             no data in range
           </div>
         ) : (
-          <ResponsiveContainer width="100%" height="100%">
+          <ResponsiveContainer width="100%" height="100%" initialDimension={{ width: 0, height }}>
             <RechartsAreaChart
               data={data as Record<string, string | number>[]}
               stackOffset={variant === "expand" ? "expand" : "none"}
@@ -234,7 +236,13 @@ function AreaChart({
               </defs>
 
               <CartesianGrid vertical={false} stroke={theme.grid} strokeDasharray="2 4" />
-              <XAxis dataKey={index} {...axis} interval="preserveStartEnd" minTickGap={44} />
+              <XAxis
+                dataKey={index}
+                {...axis}
+                tick={makeXAxisTick(theme)}
+                interval="preserveStartEnd"
+                minTickGap={44}
+              />
               <YAxis
                 {...axis}
                 width={yAxisWidth}
@@ -331,7 +339,7 @@ function AreaChart({
         )}
       </div>
 
-      {legend && !isEmpty && <ChartLegend items={legendItems} style={{ paddingLeft: yAxisWidth }} />}
+      {legend && !isEmpty && <ChartLegend items={legendItems} align={legendAlign} insetLeft={yAxisWidth} />}
     </div>
   );
 }

package/src/components/bar-chart.tsx

@@ -16,7 +16,7 @@ import {
 } from "recharts";
 
 import { useReducedMotion } from "../hooks/use-reduced-motion";
-import { type ChartSeries, orderByLuminance, resolveSeries } from "../lib/chart";
+import { type ChartSeries, makeXAxisTick, orderByLuminance, resolveSeries } from "../lib/chart";
 import type { ChartPaletteName } from "../lib/chart-palette";
 import { cn } from "../lib/cn";
 import type { ChartMarker } from "./area-chart";
@@ -33,6 +33,7 @@ export interface BarChartProps {
   series: ChartSeries[];
   variant?: "stacked" | "grouped" | "expand";
   legend?: boolean;
+  legendAlign?: "left" | "center" | "right";
   valueLabels?: boolean;
   height?: number;
   yAxisWidth?: number;
@@ -52,6 +53,7 @@ function BarChart({
   series,
   variant = "stacked",
   legend = false,
+  legendAlign = "left",
   valueLabels = false,
   height = 200,
   yAxisWidth = 48,
@@ -168,7 +170,7 @@ function BarChart({
             no data in range
           </div>
         ) : (
-          <ResponsiveContainer width="100%" height="100%">
+          <ResponsiveContainer width="100%" height="100%" initialDimension={{ width: 0, height }}>
             <RechartsBarChart
               data={data as Record<string, string | number>[]}
               stackOffset={variant === "expand" ? "expand" : "none"}
@@ -198,7 +200,13 @@ function BarChart({
               </defs>
 
               <CartesianGrid vertical={false} stroke={theme.grid} strokeDasharray="2 4" />
-              <XAxis dataKey={index} {...axis} interval="preserveStartEnd" minTickGap={44} />
+              <XAxis
+                dataKey={index}
+                {...axis}
+                tick={makeXAxisTick(theme)}
+                interval="preserveStartEnd"
+                minTickGap={44}
+              />
               <YAxis
                 {...axis}
                 width={yAxisWidth}
@@ -301,7 +309,7 @@ function BarChart({
         )}
       </div>
 
-      {legend && !isEmpty && <ChartLegend items={legendItems} style={{ paddingLeft: yAxisWidth }} />}
+      {legend && !isEmpty && <ChartLegend items={legendItems} align={legendAlign} insetLeft={yAxisWidth} />}
     </div>
   );
 }

package/src/components/bar-list.tsx

@@ -15,15 +15,22 @@ export interface BarListProps {
   dataKey?: string;
   maxItems?: number;
   palette?: ChartPaletteName;
+  /** Renders bars in a single semantic hue (e.g. red for errors) rather than the palette ramp. */
+  semantic?: "error" | "warning" | "success";
   loading?: boolean;
   valueFormatter?: (value: number) => string;
   labelFormatter?: (label: string | number) => string;
   className?: string;
 }
 
+const SEMANTIC_KEY = { error: "destructive", warning: "warning", success: "success" } as const;
+
 const PLACEHOLDER_HEIGHT = 168;
 // Cap the ramp off its palest end so low-rank bars stay legible on a light card.
 const RAMP_CEILING = 0.8;
+// Semantic bars keep a single hue: the lightest bar still holds this much colour
+// (mixed toward white) so a long error list never fades to near-invisible.
+const SEMANTIC_FLOOR = 0.62;
 const IN_FILL_SHADOW = "0 1px 2px rgb(0 0 0 / 0.28)";
 
 function BarList({
@@ -32,12 +39,14 @@ function BarList({
   dataKey = "value",
   maxItems,
   palette,
+  semantic,
   loading = false,
   valueFormatter = (value) => value.toLocaleString("en-US"),
   labelFormatter,
   className,
 }: BarListProps) {
-  const { paletteName } = useChartContext(palette);
+  const { paletteName, theme } = useChartContext(palette);
+  const accent = semantic ? theme[SEMANTIC_KEY[semantic]] : null;
   const reducedMotion = useReducedMotion();
   const [mounted, setMounted] = React.useState(false);
   const [active, setActive] = React.useState<number | null>(null);
@@ -55,11 +64,17 @@ function BarList({
     }));
     mapped.sort((lower, upper) => upper.value - lower.value);
     const capped = maxItems ? mapped.slice(0, maxItems) : mapped;
-    return capped.map((row, rank) => ({
-      ...row,
-      color: rampColor(paletteName, (capped.length > 1 ? rank / (capped.length - 1) : 0) * RAMP_CEILING),
-    }));
-  }, [data, index, dataKey, maxItems, paletteName]);
+    return capped.map((row, rank) => {
+      const rankFraction = capped.length > 1 ? rank / (capped.length - 1) : 0;
+      const accentWeight = Math.round((1 - rankFraction * (1 - SEMANTIC_FLOOR)) * 100);
+      return {
+        ...row,
+        color: accent
+          ? `color-mix(in oklab, ${accent} ${accentWeight}%, white)`
+          : rampColor(paletteName, rankFraction * RAMP_CEILING),
+      };
+    });
+  }, [data, index, dataKey, maxItems, paletteName, accent]);
 
   const maxValue = rows.reduce((max, row) => (row.value > max ? row.value : max), 0);
   const isEmpty = rows.length === 0;
@@ -95,7 +110,7 @@ function BarList({
   }
 
   return (
-    <div data-slot="bar-list" className={cn("flex w-full flex-col gap-2", className)}>
+    <div data-slot="bar-list" className={cn("flex w-full flex-col", className)}>
       {rows.map((row, slot) => {
         const fraction = maxValue > 0 ? row.value / maxValue : 0;
         const fillWidth = !reducedMotion && !mounted ? "0%" : `${fraction * 100}%`;
@@ -107,19 +122,20 @@ function BarList({
             key={row.name}
             onMouseEnter={() => setActive(slot)}
             onMouseLeave={() => setActive(null)}
-            className="flex items-center gap-3"
+            className="flex items-center gap-3 py-1"
           >
             <div className="relative h-[30px] flex-1 overflow-hidden rounded-md bg-muted">
               <span className="pointer-events-none absolute inset-x-3 top-1/2 z-0 -translate-y-1/2 truncate type-text-xs font-medium text-foreground">
                 {formatName(row.name)}
               </span>
               <div
-                className="absolute inset-y-0 left-0 z-10 overflow-hidden rounded-md motion-safe:transition-[width,opacity] motion-safe:duration-700 motion-safe:ease-out"
+                className="absolute inset-y-0 left-0 z-10 overflow-hidden rounded-md"
                 style={{
                   width: fillWidth,
                   background: `linear-gradient(90deg, ${row.color}, color-mix(in oklab, ${row.color} 82%, transparent))`,
                   boxShadow: `inset 0 0 0 1px ${row.color}`,
                   opacity: dimmed ? 0.45 : 1,
+                  transition: reducedMotion ? undefined : "width 700ms ease-out",
                 }}
               >
                 <span
@@ -135,7 +151,7 @@ function BarList({
               </div>
             </div>
             <span
-              className="w-16 shrink-0 text-right font-mono text-text-xs tabular-nums motion-safe:transition-colors"
+              className="min-w-[4rem] shrink-0 whitespace-nowrap text-right font-mono text-text-xs tabular-nums motion-safe:transition-colors"
               style={{ color: isActive ? row.color : undefined }}
             >
               {isActive ? formatShare(total > 0 ? row.value / total : 0) : valueFormatter(row.value)}

package/src/components/chart-card.tsx

@@ -12,7 +12,7 @@ export interface ChartCardProps extends Omit<React.ComponentProps<"section">, "t
   title?: React.ReactNode;
   description?: React.ReactNode;
   action?: React.ReactNode;
-  accent?: "top" | "left";
+  accent?: "top" | "left" | "none";
 }
 
 function ChartCard({
@@ -40,11 +40,13 @@ function ChartCard({
       )}
       {...props}
     >
-      <span
-        aria-hidden
-        className={cn("absolute", isLeft ? "inset-y-0 left-0 w-[3px]" : "inset-x-0 top-0 h-[3px]")}
-        style={{ background: lead }}
-      />
+      {accent !== "none" && (
+        <span
+          aria-hidden
+          className={cn("absolute", isLeft ? "inset-y-0 left-0 w-[3px]" : "inset-x-0 top-0 h-[3px]")}
+          style={{ background: lead }}
+        />
+      )}
       {(kicker || title || action) && (
         <header className="mb-4 flex items-start justify-between gap-4">
           <div className="flex flex-col gap-1">

package/src/components/chart-container.tsx

@@ -6,6 +6,8 @@ import { type ChartTheme, useChartTheme } from "../hooks/use-chart-theme";
 import { CHART_PALETTES, type ChartPaletteName } from "../lib/chart-palette";
 import { cn } from "../lib/cn";
 
+export type { ChartPaletteName } from "../lib/chart-palette";
+
 interface ChartContextValue {
   palette: readonly string[];
   paletteName: ChartPaletteName;

package/src/components/chart-legend.tsx

@@ -10,8 +10,12 @@ export interface ChartLegendItem {
 
 export interface ChartLegendProps extends React.HTMLAttributes<HTMLDivElement> {
   items: ChartLegendItem[];
+  align?: "left" | "center" | "right";
+  insetLeft?: number;
 }
 
+const ALIGN_CLASS = { left: "justify-start", center: "justify-center", right: "justify-end" } as const;
+
 function Swatch({ color, dashed }: { color: string; dashed?: boolean }) {
   return (
     <span
@@ -22,9 +26,13 @@ function Swatch({ color, dashed }: { color: string; dashed?: boolean }) {
   );
 }
 
-function ChartLegend({ items, className, ...props }: ChartLegendProps) {
+function ChartLegend({ items, align = "left", insetLeft, className, style, ...props }: ChartLegendProps) {
   return (
-    <div className={cn("flex flex-wrap gap-x-4 gap-y-1.5", className)} {...props}>
+    <div
+      className={cn("flex flex-wrap gap-x-4 gap-y-1.5", ALIGN_CLASS[align], className)}
+      style={{ paddingLeft: align === "left" ? insetLeft : undefined, ...style }}
+      {...props}
+    >
       {items.map((item) => (
         <span
           key={item.name}

package/src/components/donut-chart.tsx

@@ -99,7 +99,7 @@ function DonutChart({
       ) : (
         <div className="flex flex-col items-center gap-5 @md:flex-row">
           <div className="relative shrink-0" style={{ width: height, height }}>
-            <ResponsiveContainer width="100%" height="100%">
+            <ResponsiveContainer width="100%" height="100%" initialDimension={{ width: 0, height }}>
               <RechartsPieChart>
                 <defs>
                   {slices.map((slice, slot) => (
@@ -142,7 +142,7 @@ function DonutChart({
             </ResponsiveContainer>
 
             <div className="pointer-events-none absolute inset-0 flex flex-col items-center justify-center gap-1 text-center">
-              <span className="max-w-[72%] truncate font-mono text-[10px] text-quaternary-foreground uppercase tracking-[0.18em]">
+              <span className="max-w-[52%] truncate font-mono text-[10px] text-quaternary-foreground uppercase tracking-[0.18em]">
                 {centerTitle}
               </span>
               <span className="font-mono font-semibold text-[28px] text-foreground leading-none tabular-nums">
@@ -176,7 +176,7 @@ function DonutChart({
                     active === slot ? "bg-muted/50" : "bg-transparent",
                   )}
                 >
-                  <div className="flex items-center justify-between gap-3">
+                  <div className="flex items-center justify-between gap-2">
                     <span className="inline-flex min-w-0 items-center gap-2 text-muted-foreground">
                       <span
                         aria-hidden
@@ -185,11 +185,11 @@ function DonutChart({
                       />
                       <span className="truncate">{formatName(slice.name)}</span>
                     </span>
-                    <span className="flex shrink-0 items-center gap-3 font-mono tabular-nums">
-                      <span className="min-w-[3.5rem] text-right font-semibold text-foreground">
+                    <span className="flex shrink-0 items-center gap-2 font-mono tabular-nums">
+                      <span className="min-w-[2.25rem] text-right font-semibold text-foreground">
                         {valueFormatter(slice.value)}
                       </span>
-                      <span className="w-10 text-right text-quaternary-foreground">
+                      <span className="w-9 text-right text-quaternary-foreground">
                         {formatShare(slice.value / total)}
                       </span>
                     </span>

package/src/components/form.tsx

@@ -106,7 +106,7 @@ function FormLabel({ className, required, tooltip, children, ...props }: FormLab
         {children}
       </Label>
       {required && (
-        <span aria-hidden className="type-text-sm font-medium text-required">
+        <span aria-hidden className="type-text-sm font-medium text-required leading-none">
           *
         </span>
       )}

package/src/components/heatmap-chart.tsx

@@ -17,21 +17,26 @@ export interface HeatmapChartProps {
   palette?: ChartPaletteName;
   xLabels?: readonly string[];
   yLabels?: readonly string[];
+  showAllXLabels?: boolean;
   highlightPeak?: boolean;
   loading?: boolean;
   valueFormatter?: (value: number) => string;
   xTickFormatter?: (label: string) => string;
   yTickFormatter?: (label: string) => string;
+  tooltipMetrics?: ReadonlyArray<{ key: string; label: string; format?: (value: number) => string }>;
   ariaLabel?: string;
   className?: string;
 }
 
+type CellRecord = Record<string, string | number | null | undefined>;
+
 interface HoverState {
   x: number;
   y: number;
   rowLabel: string;
   colLabel: string;
   value: number;
+  record: CellRecord | null;
 }
 
 const PLACEHOLDER_HEIGHT = 168;
@@ -71,11 +76,13 @@ function HeatmapChart({
   palette,
   xLabels,
   yLabels,
+  showAllXLabels = false,
   highlightPeak = true,
   loading = false,
   valueFormatter = (value) => value.toLocaleString("en-US"),
   xTickFormatter,
   yTickFormatter,
+  tooltipMetrics,
   ariaLabel = "Activity heatmap",
   className,
 }: HeatmapChartProps) {
@@ -91,19 +98,23 @@ function HeatmapChart({
     const columns = xLabels ? [...xLabels] : uniqueInOrder(data.map((row) => String(row[xKey] ?? "")));
     const rows = yLabels ? [...yLabels] : uniqueInOrder(data.map((row) => String(row[yKey] ?? "")));
     const valueAt = new Map<string, number>();
+    const recordAt = new Map<string, CellRecord>();
     for (const row of data) {
-      valueAt.set(pairKey(String(row[yKey] ?? ""), String(row[xKey] ?? "")), Number(row[dataKey]) || 0);
+      const key = pairKey(String(row[yKey] ?? ""), String(row[xKey] ?? ""));
+      valueAt.set(key, Number(row[dataKey]) || 0);
+      recordAt.set(key, row);
     }
     let maxValue = 0;
     let peakKey = "";
     const cells = rows.flatMap((rowLabel, rowIndex) =>
       columns.map((colLabel, colIndex) => {
-        const value = valueAt.get(pairKey(rowLabel, colLabel)) ?? 0;
+        const key = pairKey(rowLabel, colLabel);
+        const value = valueAt.get(key) ?? 0;
         if (value > maxValue) {
           maxValue = value;
-          peakKey = pairKey(rowLabel, colLabel);
+          peakKey = key;
         }
-        return { rowLabel, colLabel, rowIndex, colIndex, value };
+        return { rowLabel, colLabel, rowIndex, colIndex, value, record: recordAt.get(key) ?? null };
       }),
     );
     return { columns, rows, cells, maxValue, peakKey };
@@ -144,7 +155,7 @@ function HeatmapChart({
   const ramp = heatRamp(paletteName, theme.isDark ? HEAT_EMPTY.dark : HEAT_EMPTY.light);
   const totalWidth = PAD.left + columns.length * CELL + (columns.length - 1) * GAP + PAD.right;
   const totalHeight = PAD.top + rows.length * CELL + (rows.length - 1) * GAP + PAD.bottom;
-  const xStride = Math.ceil(columns.length / MAX_X_TICKS);
+  const xStride = showAllXLabels ? 1 : Math.ceil(columns.length / MAX_X_TICKS);
   const cellX = (col: number) => PAD.left + col * (CELL + GAP);
   const cellY = (row: number) => PAD.top + row * (CELL + GAP);
   const formatX = (label: string) => (xTickFormatter ? xTickFormatter(label) : label);
@@ -247,6 +258,7 @@ function HeatmapChart({
                   rowLabel: cell.rowLabel,
                   colLabel: cell.colLabel,
                   value: cell.value,
+                  record: cell.record,
                 })
               }
             />
@@ -264,19 +276,51 @@ function HeatmapChart({
             <p className="mb-1.5 font-mono text-[10px] text-quaternary-foreground uppercase tracking-wider">
               {formatY(hovered.rowLabel)} · {formatX(hovered.colLabel)}
             </p>
-            <div className="flex items-center justify-between gap-4 text-text-xs">
-              <span className="inline-flex items-center gap-2 text-muted-foreground">
-                <span
-                  aria-hidden
-                  className="size-2 shrink-0 rounded-[2px]"
-                  style={{ background: heatColor(ramp, hovered.value / maxValue) }}
-                />
-                activity
-              </span>
-              <span className="font-mono font-semibold tabular-nums text-foreground">
-                {valueFormatter(hovered.value)}
-              </span>
-            </div>
+            {tooltipMetrics && tooltipMetrics.length > 0 ? (
+              <div className="flex flex-col gap-1">
+                {tooltipMetrics.map((metric) => {
+                  const raw = hovered.record ? Number(hovered.record[metric.key]) || 0 : 0;
+                  const isActive = metric.key === dataKey;
+                  return (
+                    <div key={metric.key} className="flex items-center justify-between gap-4 text-text-xs">
+                      <span className="inline-flex items-center gap-2 text-muted-foreground">
+                        <span
+                          aria-hidden
+                          className="size-2 shrink-0 rounded-[2px]"
+                          style={{
+                            background: isActive ? heatColor(ramp, hovered.value / maxValue) : theme.mutedForeground,
+                            opacity: isActive ? 1 : 0.35,
+                          }}
+                        />
+                        {metric.label}
+                      </span>
+                      <span
+                        className={cn(
+                          "font-mono tabular-nums",
+                          isActive ? "font-semibold text-foreground" : "text-muted-foreground",
+                        )}
+                      >
+                        {(metric.format ?? valueFormatter)(raw)}
+                      </span>
+                    </div>
+                  );
+                })}
+              </div>
+            ) : (
+              <div className="flex items-center justify-between gap-4 text-text-xs">
+                <span className="inline-flex items-center gap-2 text-muted-foreground">
+                  <span
+                    aria-hidden
+                    className="size-2 shrink-0 rounded-[2px]"
+                    style={{ background: heatColor(ramp, hovered.value / maxValue) }}
+                  />
+                  activity
+                </span>
+                <span className="font-mono font-semibold tabular-nums text-foreground">
+                  {valueFormatter(hovered.value)}
+                </span>
+              </div>
+            )}
           </div>,
           document.body,
         )}