@alpic-ai/ui 0.0.0-staging.g4a0bec2 → 0.0.0-staging.g4d42ca0

package/dist/components/bar-chart.d.mts

@@ -22,6 +22,7 @@ interface BarChartProps {
   };
   markers?: ChartMarker[];
   texture?: boolean;
+  partialLastBar?: boolean;
   loading?: boolean;
   valueFormatter?: (value: number) => string;
   labelFormatter?: (label: string | number) => string;
@@ -41,6 +42,7 @@ declare function BarChart({
   referenceLine,
   markers,
   texture,
+  partialLastBar,
   loading,
   valueFormatter,
   labelFormatter,

package/dist/components/bar-chart.mjs

@@ -7,11 +7,11 @@ import { ChartTooltipContent } from "./chart-tooltip.mjs";
 import { Skeleton } from "./skeleton.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React$1 from "react";
-import { Bar, BarChart as BarChart$1, CartesianGrid, LabelList, ReferenceArea, ReferenceDot, ReferenceLine, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
+import { Bar, BarChart as BarChart$1, CartesianGrid, Cell, LabelList, ReferenceArea, ReferenceDot, ReferenceLine, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
 //#region src/components/bar-chart.tsx
 const BAR_RADIUS = 4;
 const MAX_BAR_SIZE = 48;
-function BarChart({ data, index, series, variant = "stacked", legend = false, legendAlign = "left", valueLabels = false, height = 200, yAxisWidth = 48, palette, referenceLine, markers, texture = false, loading = false, valueFormatter = (value) => value.toLocaleString("en-US"), labelFormatter, className }) {
+function BarChart({ data, index, series, variant = "stacked", legend = false, legendAlign = "left", valueLabels = false, height = 200, yAxisWidth = 48, palette, referenceLine, markers, texture = false, partialLastBar = false, loading = false, valueFormatter = (value) => value.toLocaleString("en-US"), labelFormatter, className }) {
 	const { palette: paletteColors, theme } = useChartContext(palette);
 	const reactId = React$1.useId().replace(/:/g, "");
 	const resolved = resolveSeries(series, paletteColors, theme);
@@ -38,6 +38,20 @@ function BarChart({ data, index, series, variant = "stacked", legend = false, le
 		series,
 		stacked
 	]);
+	const topSlotByRow = React$1.useMemo(() => {
+		if (!stacked) return [];
+		return data.map((row) => {
+			for (let slot = rendered.length - 1; slot >= 0; slot -= 1) {
+				const value = Number(row[rendered[slot]?.key ?? ""]);
+				if (Number.isFinite(value) && value > 0) return slot;
+			}
+			return -1;
+		});
+	}, [
+		data,
+		rendered,
+		stacked
+	]);
 	const margin = {
 		top: markers?.length || valueLabels ? 18 : 8,
 		right: 8,
@@ -207,7 +221,7 @@ function BarChart({ data, index, series, variant = "stacked", legend = false, le
 								position: "insideBottomRight"
 							} : void 0
 						}),
-						rendered.map((entry, slot) => /* @__PURE__ */ jsx(Bar, {
+						rendered.map((entry, slot) => /* @__PURE__ */ jsxs(Bar, {
 							dataKey: entry.key,
 							name: entry.name,
 							stackId: stacked ? "stack" : void 0,
@@ -220,10 +234,30 @@ function BarChart({ data, index, series, variant = "stacked", legend = false, le
 							isAnimationActive: false,
 							animationDuration: 650,
 							animationEasing: "ease-out",
-							children: valueLabels && (!stacked || rendered.length === 1) && /* @__PURE__ */ jsx(LabelList, {
+							children: [(stacked || partialLastBar) && data.map((row, rowIndex) => {
+								const roundedTop = stacked ? topSlotByRow[rowIndex] === slot : true;
+								const isPartial = partialLastBar && rowIndex === data.length - 1;
+								return /* @__PURE__ */ jsx(Cell, {
+									radius: roundedTop ? [
+										BAR_RADIUS,
+										BAR_RADIUS,
+										0,
+										0
+									] : [
+										0,
+										0,
+										0,
+										0
+									],
+									fillOpacity: isPartial ? .15 : 1,
+									stroke: isPartial ? entry.color : void 0,
+									strokeWidth: isPartial ? 1.25 : 0,
+									strokeDasharray: isPartial ? "3 2" : void 0
+								}, `${entry.key}-${row[index] ?? rowIndex}`);
+							}), valueLabels && (!stacked || rendered.length === 1) && /* @__PURE__ */ jsx(LabelList, {
 								dataKey: entry.key,
 								content: renderValueLabel(entry.color)
-							})
+							})]
 						}, entry.key)),
 						markers?.map((marker) => /* @__PURE__ */ jsx(ReferenceDot, {
 							x: marker.x,

package/dist/components/heatmap-chart.d.mts

@@ -22,6 +22,9 @@ interface HeatmapChartProps {
     label: string;
     format?: (value: number) => string;
   }>;
+  tooltipTitleKey?: string;
+  colorScale?: "linear" | "rank";
+  showLegend?: boolean;
   ariaLabel?: string;
   className?: string;
 }
@@ -41,6 +44,9 @@ declare function HeatmapChart({
   xTickFormatter,
   yTickFormatter,
   tooltipMetrics,
+  tooltipTitleKey,
+  colorScale,
+  showLegend,
   ariaLabel,
   className
 }: HeatmapChartProps): React$1.JSX.Element;

package/dist/components/heatmap-chart.mjs

@@ -31,7 +31,7 @@ const uniqueInOrder = (values) => {
 	}
 	return ordered;
 };
-function HeatmapChart({ data, xKey, yKey, dataKey = "value", variant = "square", palette, xLabels, yLabels, showAllXLabels = false, highlightPeak = true, loading = false, valueFormatter = (value) => value.toLocaleString("en-US"), xTickFormatter, yTickFormatter, tooltipMetrics, ariaLabel = "Activity heatmap", className }) {
+function HeatmapChart({ data, xKey, yKey, dataKey = "value", variant = "square", palette, xLabels, yLabels, showAllXLabels = false, highlightPeak = true, loading = false, valueFormatter = (value) => value.toLocaleString("en-US"), xTickFormatter, yTickFormatter, tooltipMetrics, tooltipTitleKey, colorScale = "linear", showLegend = false, ariaLabel = "Activity heatmap", className }) {
 	const { paletteName, theme } = useChartContext(palette);
 	const [hovered, setHovered] = React$1.useState(null);
 	const [mounted, setMounted] = React$1.useState(false);
@@ -81,6 +81,19 @@ function HeatmapChart({ data, xKey, yKey, dataKey = "value", variant = "square",
 		yLabels
 	]);
 	const isEmpty = columns.length === 0 || rows.length === 0 || maxValue <= 0;
+	const colorFractionOf = React$1.useMemo(() => {
+		if (colorScale === "rank") {
+			const sorted = [...new Set(cells.map((cell) => cell.value).filter((value) => value > 0))].sort((lower, upper) => lower - upper);
+			const RANK_FLOOR = .18;
+			const fractionByValue = new Map(sorted.map((value, index) => [value, sorted.length > 1 ? RANK_FLOOR + (1 - RANK_FLOOR) * (index / (sorted.length - 1)) : 1]));
+			return (value) => value > 0 ? fractionByValue.get(value) ?? 0 : 0;
+		}
+		return (value) => maxValue > 0 ? value / maxValue : 0;
+	}, [
+		cells,
+		colorScale,
+		maxValue
+	]);
 	if (loading) return /* @__PURE__ */ jsxs("div", {
 		className: cn("flex items-center justify-center gap-2.5 font-mono text-quaternary-foreground text-text-xs", className),
 		style: { minHeight: PLACEHOLDER_HEIGHT },
@@ -91,7 +104,7 @@ function HeatmapChart({ data, xKey, yKey, dataKey = "value", variant = "square",
 		style: { minHeight: PLACEHOLDER_HEIGHT },
 		children: "no data in range"
 	});
-	const ramp = heatRamp(paletteName, theme.isDark ? HEAT_EMPTY.dark : HEAT_EMPTY.light);
+	const ramp = heatRamp(paletteName, theme.isDark ? HEAT_EMPTY.dark : HEAT_EMPTY.light, theme.isDark);
 	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 = showAllXLabels ? 1 : Math.ceil(columns.length / MAX_X_TICKS);
@@ -104,125 +117,142 @@ function HeatmapChart({ data, xKey, yKey, dataKey = "value", variant = "square",
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "heatmap-chart",
 		className: cn("w-full", className),
-		children: [/* @__PURE__ */ jsx("div", {
-			className: "overflow-x-auto",
-			children: /* @__PURE__ */ jsxs("svg", {
-				viewBox: `0 0 ${totalWidth} ${totalHeight}`,
-				className: "block min-w-[480px]",
-				style: {
-					width: "100%",
-					height: "auto"
-				},
-				role: "img",
-				"aria-label": ariaLabel,
-				onMouseLeave: () => setHovered(null),
-				children: [
-					columns.map((label, col) => col % xStride === 0 ? /* @__PURE__ */ jsx("text", {
-						x: cellX(col) + CELL / 2,
-						y: PAD.top - 7,
-						textAnchor: "middle",
-						className: "fill-quaternary-foreground font-mono text-[8.5px]",
-						children: formatX(label)
-					}, `x-${label}`) : null),
-					rows.map((label, row) => /* @__PURE__ */ jsx("text", {
-						x: PAD.left - 8,
-						y: cellY(row) + CELL / 2 + 3,
-						textAnchor: "end",
-						className: "fill-quaternary-foreground font-mono text-[8.5px]",
-						children: formatY(label)
-					}, `y-${label}`)),
-					cells.map((cell) => {
-						const fraction = cell.value / maxValue;
-						const fill = heatColor(ramp, fraction);
-						const key = pairKey(cell.rowLabel, cell.colLabel);
-						const isPeak = highlightPeak && key === peakKey;
-						if (variant === "dot") return /* @__PURE__ */ jsx("circle", {
-							cx: cellX(cell.colIndex) + CELL / 2,
-							cy: cellY(cell.rowIndex) + CELL / 2,
-							r: CELL / 2 * (DOT_MIN + DOT_RANGE * fraction),
-							fill,
-							stroke: isPeak ? theme.foreground : void 0,
-							strokeWidth: isPeak ? 1.4 : void 0
-						}, key);
-						return /* @__PURE__ */ jsx("rect", {
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "overflow-x-auto",
+				children: /* @__PURE__ */ jsxs("svg", {
+					viewBox: `0 0 ${totalWidth} ${totalHeight}`,
+					className: "block min-w-[480px]",
+					style: {
+						width: "100%",
+						height: "auto"
+					},
+					role: "img",
+					"aria-label": ariaLabel,
+					onMouseLeave: () => setHovered(null),
+					children: [
+						columns.map((label, col) => col % xStride === 0 ? /* @__PURE__ */ jsx("text", {
+							x: cellX(col) + CELL / 2,
+							y: PAD.top - 7,
+							textAnchor: "middle",
+							className: "fill-quaternary-foreground font-mono text-[8.5px]",
+							children: formatX(label)
+						}, `x-${label}`) : null),
+						rows.map((label, row) => /* @__PURE__ */ jsx("text", {
+							x: PAD.left - 8,
+							y: cellY(row) + CELL / 2 + 3,
+							textAnchor: "end",
+							className: "fill-quaternary-foreground font-mono text-[8.5px]",
+							children: formatY(label)
+						}, `y-${label}`)),
+						cells.map((cell) => {
+							const fraction = colorFractionOf(cell.value);
+							const fill = heatColor(ramp, fraction);
+							const key = pairKey(cell.rowLabel, cell.colLabel);
+							const isPeak = highlightPeak && key === peakKey;
+							if (variant === "dot") return /* @__PURE__ */ jsx("circle", {
+								cx: cellX(cell.colIndex) + CELL / 2,
+								cy: cellY(cell.rowIndex) + CELL / 2,
+								r: CELL / 2 * (DOT_MIN + DOT_RANGE * fraction),
+								fill,
+								stroke: isPeak ? theme.foreground : void 0,
+								strokeWidth: isPeak ? 1.4 : void 0
+							}, key);
+							return /* @__PURE__ */ jsx("rect", {
+								x: cellX(cell.colIndex),
+								y: cellY(cell.rowIndex),
+								width: CELL,
+								height: CELL,
+								rx: 2.5,
+								fill,
+								stroke: isPeak ? theme.foreground : void 0,
+								strokeWidth: isPeak ? 1.4 : void 0
+							}, key);
+						}),
+						cells.map((cell) => /* @__PURE__ */ jsx("rect", {
 							x: cellX(cell.colIndex),
 							y: cellY(cell.rowIndex),
-							width: CELL,
-							height: CELL,
-							rx: 2.5,
-							fill,
-							stroke: isPeak ? theme.foreground : void 0,
-							strokeWidth: isPeak ? 1.4 : void 0
-						}, key);
-					}),
-					cells.map((cell) => /* @__PURE__ */ jsx("rect", {
-						x: cellX(cell.colIndex),
-						y: cellY(cell.rowIndex),
-						width: 25,
-						height: 25,
-						fill: "transparent",
-						onMouseMove: (event) => setHovered({
-							x: event.clientX,
-							y: event.clientY,
-							rowLabel: cell.rowLabel,
-							colLabel: cell.colLabel,
-							value: cell.value,
-							record: cell.record
-						})
-					}, `hit-${pairKey(cell.rowLabel, cell.colLabel)}`))
-				]
-			})
-		}), mounted && hovered && createPortal(/* @__PURE__ */ jsxs("div", {
-			className: "pointer-events-none fixed z-50 min-w-[130px] rounded-lg border border-border bg-popover px-3 py-2.5 text-popover-foreground shadow-lg",
-			style: {
-				left: tooltipLeft,
-				top: tooltipTop
-			},
-			children: [/* @__PURE__ */ jsxs("p", {
-				className: "mb-1.5 font-mono text-[10px] text-quaternary-foreground uppercase tracking-wider",
-				children: [
-					formatY(hovered.rowLabel),
-					" · ",
-					formatX(hovered.colLabel)
-				]
-			}), tooltipMetrics && tooltipMetrics.length > 0 ? /* @__PURE__ */ jsx("div", {
-				className: "flex flex-col gap-1",
-				children: tooltipMetrics.map((metric) => {
-					const raw = hovered.record ? Number(hovered.record[metric.key]) || 0 : 0;
-					const isActive = metric.key === dataKey;
-					return /* @__PURE__ */ jsxs("div", {
-						className: "flex items-center justify-between gap-4 text-text-xs",
-						children: [/* @__PURE__ */ jsxs("span", {
-							className: "inline-flex items-center gap-2 text-muted-foreground",
-							children: [/* @__PURE__ */ jsx("span", {
-								"aria-hidden": true,
-								className: "size-2 shrink-0 rounded-[2px]",
-								style: {
-									background: isActive ? heatColor(ramp, hovered.value / maxValue) : theme.mutedForeground,
-									opacity: isActive ? 1 : .35
-								}
-							}), metric.label]
-						}), /* @__PURE__ */ jsx("span", {
-							className: cn("font-mono tabular-nums", isActive ? "font-semibold text-foreground" : "text-muted-foreground"),
-							children: (metric.format ?? valueFormatter)(raw)
-						})]
-					}, metric.key);
+							width: 25,
+							height: 25,
+							fill: "transparent",
+							onMouseMove: (event) => setHovered({
+								x: event.clientX,
+								y: event.clientY,
+								rowLabel: cell.rowLabel,
+								colLabel: cell.colLabel,
+								value: cell.value,
+								record: cell.record
+							})
+						}, `hit-${pairKey(cell.rowLabel, cell.colLabel)}`))
+					]
 				})
-			}) : /* @__PURE__ */ jsxs("div", {
-				className: "flex items-center justify-between gap-4 text-text-xs",
-				children: [/* @__PURE__ */ jsxs("span", {
-					className: "inline-flex items-center gap-2 text-muted-foreground",
-					children: [/* @__PURE__ */ jsx("span", {
+			}),
+			showLegend && /* @__PURE__ */ jsxs("div", {
+				className: "mt-3 flex items-center justify-end gap-2",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "font-mono text-[9px] text-quaternary-foreground uppercase tracking-[0.14em]",
+						children: "Less"
+					}),
+					/* @__PURE__ */ jsx("span", {
 						"aria-hidden": true,
-						className: "size-2 shrink-0 rounded-[2px]",
-						style: { background: heatColor(ramp, hovered.value / maxValue) }
-					}), "activity"]
-				}), /* @__PURE__ */ jsx("span", {
-					className: "font-mono font-semibold tabular-nums text-foreground",
-					children: valueFormatter(hovered.value)
+						className: "h-2 w-24 rounded-full border border-border",
+						style: { background: `linear-gradient(90deg, ${ramp.join(", ")})` }
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "font-mono text-[9px] text-quaternary-foreground uppercase tracking-[0.14em]",
+						children: "More"
+					})
+				]
+			}),
+			mounted && hovered && createPortal(/* @__PURE__ */ jsxs("div", {
+				className: "pointer-events-none fixed z-50 min-w-[130px] rounded-lg border border-border bg-popover px-3 py-2.5 text-popover-foreground shadow-lg",
+				style: {
+					left: tooltipLeft,
+					top: tooltipTop
+				},
+				children: [/* @__PURE__ */ jsx("p", {
+					className: "mb-1.5 font-mono text-[10px] text-quaternary-foreground uppercase tracking-wider",
+					children: tooltipTitleKey && typeof hovered.record?.[tooltipTitleKey] === "string" ? hovered.record[tooltipTitleKey] : `${formatY(hovered.rowLabel)} · ${formatX(hovered.colLabel)}`
+				}), tooltipMetrics && tooltipMetrics.length > 0 ? /* @__PURE__ */ jsx("div", {
+					className: "flex flex-col gap-1",
+					children: tooltipMetrics.map((metric) => {
+						const raw = hovered.record ? Number(hovered.record[metric.key]) || 0 : 0;
+						const isActive = metric.key === dataKey;
+						return /* @__PURE__ */ jsxs("div", {
+							className: "flex items-center justify-between gap-4 text-text-xs",
+							children: [/* @__PURE__ */ jsxs("span", {
+								className: "inline-flex items-center gap-2 text-muted-foreground",
+								children: [/* @__PURE__ */ jsx("span", {
+									"aria-hidden": true,
+									className: "size-2 shrink-0 rounded-[2px]",
+									style: {
+										background: isActive ? heatColor(ramp, colorFractionOf(hovered.value)) : theme.mutedForeground,
+										opacity: isActive ? 1 : .35
+									}
+								}), metric.label]
+							}), /* @__PURE__ */ jsx("span", {
+								className: cn("font-mono tabular-nums", isActive ? "font-semibold text-foreground" : "text-muted-foreground"),
+								children: (metric.format ?? valueFormatter)(raw)
+							})]
+						}, metric.key);
+					})
+				}) : /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center justify-between gap-4 text-text-xs",
+					children: [/* @__PURE__ */ jsxs("span", {
+						className: "inline-flex items-center gap-2 text-muted-foreground",
+						children: [/* @__PURE__ */ jsx("span", {
+							"aria-hidden": true,
+							className: "size-2 shrink-0 rounded-[2px]",
+							style: { background: heatColor(ramp, colorFractionOf(hovered.value)) }
+						}), "activity"]
+					}), /* @__PURE__ */ jsx("span", {
+						className: "font-mono font-semibold tabular-nums text-foreground",
+						children: valueFormatter(hovered.value)
+					})]
 				})]
-			})]
-		}), document.body)]
+			}), document.body)
+		]
 	});
 }
 //#endregion

package/dist/components/stat.mjs

@@ -7,7 +7,7 @@ import { cva } from "class-variance-authority";
 import * as React$1 from "react";
 import { Area, AreaChart, ResponsiveContainer } from "recharts";
 //#region src/components/stat.tsx
-const statDeltaVariants = cva("inline-flex items-center gap-0.5 rounded-md px-1.5 py-0.5 font-mono text-[11px] font-medium leading-none", {
+const statDeltaVariants = cva("inline-flex items-center gap-0.5 rounded-md px-2 py-1 font-mono text-xs font-medium leading-none", {
 	variants: { sentiment: {
 		positive: "text-success bg-success/12",
 		negative: "text-destructive bg-destructive/12"
@@ -51,7 +51,7 @@ function Stat({ value, unit, delta, sparkline, semantic, className, ...props })
 				delta && /* @__PURE__ */ jsxs(DeltaPill, {
 					sentiment,
 					className: "mb-0.5",
-					children: [delta.direction === "up" ? /* @__PURE__ */ jsx(ArrowUp, { className: "size-3" }) : /* @__PURE__ */ jsx(ArrowDown, { className: "size-3" }), delta.label ?? `${delta.value}%`]
+					children: [delta.direction === "up" ? /* @__PURE__ */ jsx(ArrowUp, { className: "size-3.5" }) : /* @__PURE__ */ jsx(ArrowDown, { className: "size-3.5" }), delta.label ?? `${delta.value}%`]
 				})
 			]
 		}), hasSpark && /* @__PURE__ */ jsx("div", {

package/dist/components/table.d.mts

@@ -1,10 +1,14 @@
 import * as React$1 from "react";
 
 //#region src/components/table.d.ts
+interface TableProps extends React$1.ComponentProps<"table"> {
+  containerClassName?: string;
+}
 declare function Table({
   className,
+  containerClassName,
   ...props
-}: React$1.ComponentProps<"table">): React$1.JSX.Element;
+}: TableProps): React$1.JSX.Element;
 declare function TableHeader({
   className,
   ...props

package/dist/components/table.mjs

@@ -2,9 +2,9 @@
 import { cn } from "../lib/cn.mjs";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/table.tsx
-function Table({ className, ...props }) {
+function Table({ className, containerClassName, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: "relative w-full overflow-auto rounded-xl border border-border-secondary bg-background",
+		className: cn("relative w-full overflow-auto rounded-xl border border-border-secondary bg-background", containerClassName),
 		children: /* @__PURE__ */ jsx("table", {
 			"data-slot": "table",
 			className: cn("w-full caption-bottom type-text-sm", className),

package/dist/lib/chart-palette.mjs

@@ -42,7 +42,10 @@ const HEAT_RAMPS = {
 	magenta: heatRampMagenta,
 	cyan: heatRampMint
 };
-const heatRamp = (palette, empty) => HEAT_RAMPS[palette](empty);
+const heatRamp = (palette, empty, isDark = true) => {
+	const [, ...colored] = HEAT_RAMPS[palette](empty);
+	return [empty, ...isDark ? colored : colored.reverse()];
+};
 const hexToRgb = (hex) => {
 	const value = Number.parseInt(hex.slice(1), 16);
 	return [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alpic-ai/ui",
-  "version": "0.0.0-staging.g4a0bec2",
+  "version": "0.0.0-staging.g4d42ca0",
   "description": "Alpic design system — shared UI components",
   "type": "module",
   "exports": {
@@ -23,48 +23,48 @@
     "src"
   ],
   "peerDependencies": {
-    "lucide-react": "^1.21.0",
+    "lucide-react": "^1.23.0",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
-    "react-hook-form": "^7.80.0",
+    "react-hook-form": "^7.81.0",
     "sonner": "^2.0.7",
-    "tailwindcss": "^4.3.1",
+    "tailwindcss": "^4.3.2",
     "tw-animate-css": "^1.4.0"
   },
   "dependencies": {
-    "@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-accordion": "^1.2.15",
+    "@radix-ui/react-avatar": "^1.2.1",
+    "@radix-ui/react-checkbox": "^1.3.6",
+    "@radix-ui/react-collapsible": "^1.1.15",
+    "@radix-ui/react-dialog": "^1.1.18",
+    "@radix-ui/react-dropdown-menu": "^2.1.19",
+    "@radix-ui/react-label": "^2.1.11",
+    "@radix-ui/react-popover": "^1.1.18",
+    "@radix-ui/react-radio-group": "^1.4.2",
+    "@radix-ui/react-scroll-area": "^1.2.13",
+    "@radix-ui/react-select": "^2.3.2",
+    "@radix-ui/react-separator": "^1.1.11",
     "@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",
+    "@radix-ui/react-switch": "^1.3.2",
+    "@radix-ui/react-tabs": "^1.1.16",
+    "@radix-ui/react-toggle-group": "^1.1.14",
+    "@radix-ui/react-tooltip": "^1.2.11",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
-    "recharts": "^3.9.0",
+    "recharts": "^3.9.2",
     "tailwind-merge": "^3.6.0"
   },
   "devDependencies": {
     "@ladle/react": "^5.1.1",
-    "@tailwindcss/postcss": "^4.3.1",
+    "@tailwindcss/postcss": "^4.3.2",
     "@types/react": "19.2.17",
     "@types/react-dom": "19.2.3",
-    "lucide-react": "^1.21.0",
-    "react-hook-form": "^7.80.0",
+    "lucide-react": "^1.23.0",
+    "react-hook-form": "^7.81.0",
     "shx": "^0.4.0",
     "sonner": "^2.0.7",
-    "tailwindcss": "^4.3.1",
+    "tailwindcss": "^4.3.2",
     "tsdown": "^0.22.3",
     "tw-animate-css": "^1.4.0",
     "typescript": "^6.0.3"
@@ -72,7 +72,7 @@
   "scripts": {
     "build": "shx rm -rf dist && tsdown",
     "format": "biome check --write --error-on-warnings .",
-    "test:type": "tsc --noEmit",
+    "test:type": "tsgo --noEmit",
     "test:format": "biome check --error-on-warnings .",
     "dev:ui": "ladle serve",
     "publish:npm": "pnpm publish --tag \"${NPM_TAG}\" --access public --no-git-checks"

package/src/components/bar-chart.tsx

@@ -4,6 +4,7 @@ import * as React from "react";
 import {
   Bar,
   CartesianGrid,
+  Cell,
   LabelList,
   BarChart as RechartsBarChart,
   ReferenceArea,
@@ -41,6 +42,7 @@ export interface BarChartProps {
   referenceLine?: { y: number; label?: string; band?: boolean };
   markers?: ChartMarker[];
   texture?: boolean;
+  partialLastBar?: boolean;
   loading?: boolean;
   valueFormatter?: (value: number) => string;
   labelFormatter?: (label: string | number) => string;
@@ -61,6 +63,7 @@ function BarChart({
   referenceLine,
   markers,
   texture = false,
+  partialLastBar = false,
   loading = false,
   valueFormatter = (value) => value.toLocaleString("en-US"),
   labelFormatter,
@@ -97,6 +100,21 @@ function BarChart({
     return max;
   }, [data, series, stacked]);
 
+  const topSlotByRow = React.useMemo(() => {
+    if (!stacked) {
+      return [];
+    }
+    return data.map((row) => {
+      for (let slot = rendered.length - 1; slot >= 0; slot -= 1) {
+        const value = Number(row[rendered[slot]?.key ?? ""]);
+        if (Number.isFinite(value) && value > 0) {
+          return slot;
+        }
+      }
+      return -1;
+    });
+  }, [data, rendered, stacked]);
+
   const margin = { top: markers?.length || valueLabels ? 18 : 8, right: 8, bottom: 2, left: 0 };
 
   const axis = {
@@ -278,6 +296,24 @@ function BarChart({
                   animationDuration={650}
                   animationEasing="ease-out"
                 >
+                  {(stacked || partialLastBar) &&
+                    data.map((row, rowIndex) => {
+                      const roundedTop = stacked ? topSlotByRow[rowIndex] === slot : true;
+                      const isPartial = partialLastBar && rowIndex === data.length - 1;
+                      const cellRadius = (roundedTop
+                        ? [BAR_RADIUS, BAR_RADIUS, 0, 0]
+                        : [0, 0, 0, 0]) as unknown as number;
+                      return (
+                        <Cell
+                          key={`${entry.key}-${row[index] ?? rowIndex}`}
+                          radius={cellRadius}
+                          fillOpacity={isPartial ? 0.15 : 1}
+                          stroke={isPartial ? entry.color : undefined}
+                          strokeWidth={isPartial ? 1.25 : 0}
+                          strokeDasharray={isPartial ? "3 2" : undefined}
+                        />
+                      );
+                    })}
                   {valueLabels && (!stacked || rendered.length === 1) && (
                     <LabelList dataKey={entry.key} content={renderValueLabel(entry.color)} />
                   )}

package/src/components/heatmap-chart.tsx

@@ -24,6 +24,9 @@ export interface HeatmapChartProps {
   xTickFormatter?: (label: string) => string;
   yTickFormatter?: (label: string) => string;
   tooltipMetrics?: ReadonlyArray<{ key: string; label: string; format?: (value: number) => string }>;
+  tooltipTitleKey?: string;
+  colorScale?: "linear" | "rank";
+  showLegend?: boolean;
   ariaLabel?: string;
   className?: string;
 }
@@ -83,6 +86,9 @@ function HeatmapChart({
   xTickFormatter,
   yTickFormatter,
   tooltipMetrics,
+  tooltipTitleKey,
+  colorScale = "linear",
+  showLegend = false,
   ariaLabel = "Activity heatmap",
   className,
 }: HeatmapChartProps) {
@@ -123,6 +129,28 @@ function HeatmapChart({
   const { columns, rows, cells, maxValue, peakKey } = layout;
   const isEmpty = columns.length === 0 || rows.length === 0 || maxValue <= 0;
 
+  // "rank" spreads clustered values across the whole ramp by colouring each cell
+  // by its position among the distinct non-zero values rather than its raw ratio
+  // to the max — the right read for skewed activity counts (à la GitHub).
+  const colorFractionOf = React.useMemo(() => {
+    if (colorScale === "rank") {
+      const sorted = [...new Set(cells.map((cell) => cell.value).filter((value) => value > 0))].sort(
+        (lower, upper) => lower - upper,
+      );
+      // Floor non-zero ranks above the empty colour so the quietest active day
+      // still reads as coloured, never mistaken for no data.
+      const RANK_FLOOR = 0.18;
+      const fractionByValue = new Map(
+        sorted.map((value, index) => [
+          value,
+          sorted.length > 1 ? RANK_FLOOR + (1 - RANK_FLOOR) * (index / (sorted.length - 1)) : 1,
+        ]),
+      );
+      return (value: number) => (value > 0 ? (fractionByValue.get(value) ?? 0) : 0);
+    }
+    return (value: number) => (maxValue > 0 ? value / maxValue : 0);
+  }, [cells, colorScale, maxValue]);
+
   if (loading) {
     return (
       <div
@@ -152,7 +180,7 @@ function HeatmapChart({
     );
   }
 
-  const ramp = heatRamp(paletteName, theme.isDark ? HEAT_EMPTY.dark : HEAT_EMPTY.light);
+  const ramp = heatRamp(paletteName, theme.isDark ? HEAT_EMPTY.dark : HEAT_EMPTY.light, theme.isDark);
   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 = showAllXLabels ? 1 : Math.ceil(columns.length / MAX_X_TICKS);
@@ -209,7 +237,7 @@ function HeatmapChart({
             </text>
           ))}
           {cells.map((cell) => {
-            const fraction = cell.value / maxValue;
+            const fraction = colorFractionOf(cell.value);
             const fill = heatColor(ramp, fraction);
             const key = pairKey(cell.rowLabel, cell.colLabel);
             const isPeak = highlightPeak && key === peakKey;
@@ -266,6 +294,18 @@ function HeatmapChart({
         </svg>
       </div>
 
+      {showLegend && (
+        <div className="mt-3 flex items-center justify-end gap-2">
+          <span className="font-mono text-[9px] text-quaternary-foreground uppercase tracking-[0.14em]">Less</span>
+          <span
+            aria-hidden
+            className="h-2 w-24 rounded-full border border-border"
+            style={{ background: `linear-gradient(90deg, ${ramp.join(", ")})` }}
+          />
+          <span className="font-mono text-[9px] text-quaternary-foreground uppercase tracking-[0.14em]">More</span>
+        </div>
+      )}
+
       {mounted &&
         hovered &&
         createPortal(
@@ -274,7 +314,9 @@ function HeatmapChart({
             style={{ left: tooltipLeft, top: tooltipTop }}
           >
             <p className="mb-1.5 font-mono text-[10px] text-quaternary-foreground uppercase tracking-wider">
-              {formatY(hovered.rowLabel)} · {formatX(hovered.colLabel)}
+              {tooltipTitleKey && typeof hovered.record?.[tooltipTitleKey] === "string"
+                ? hovered.record[tooltipTitleKey]
+                : `${formatY(hovered.rowLabel)} · ${formatX(hovered.colLabel)}`}
             </p>
             {tooltipMetrics && tooltipMetrics.length > 0 ? (
               <div className="flex flex-col gap-1">
@@ -288,7 +330,9 @@ function HeatmapChart({
                           aria-hidden
                           className="size-2 shrink-0 rounded-[2px]"
                           style={{
-                            background: isActive ? heatColor(ramp, hovered.value / maxValue) : theme.mutedForeground,
+                            background: isActive
+                              ? heatColor(ramp, colorFractionOf(hovered.value))
+                              : theme.mutedForeground,
                             opacity: isActive ? 1 : 0.35,
                           }}
                         />
@@ -312,7 +356,7 @@ function HeatmapChart({
                   <span
                     aria-hidden
                     className="size-2 shrink-0 rounded-[2px]"
-                    style={{ background: heatColor(ramp, hovered.value / maxValue) }}
+                    style={{ background: heatColor(ramp, colorFractionOf(hovered.value)) }}
                   />
                   activity
                 </span>

package/src/components/stat.tsx

@@ -9,7 +9,7 @@ import { cn } from "../lib/cn";
 import { useChartContext } from "./chart-container";
 
 const statDeltaVariants = cva(
-  "inline-flex items-center gap-0.5 rounded-md px-1.5 py-0.5 font-mono text-[11px] font-medium leading-none",
+  "inline-flex items-center gap-0.5 rounded-md px-2 py-1 font-mono text-xs font-medium leading-none",
   {
     variants: {
       sentiment: {
@@ -63,7 +63,7 @@ function Stat({ value, unit, delta, sparkline, semantic, className, ...props }:
         {unit && <span className="font-mono text-[11px] leading-none text-quaternary-foreground mb-0.5">{unit}</span>}
         {delta && (
           <DeltaPill sentiment={sentiment} className="mb-0.5">
-            {delta.direction === "up" ? <ArrowUp className="size-3" /> : <ArrowDown className="size-3" />}
+            {delta.direction === "up" ? <ArrowUp className="size-3.5" /> : <ArrowDown className="size-3.5" />}
             {delta.label ?? `${delta.value}%`}
           </DeltaPill>
         )}

package/src/components/table.tsx

@@ -4,9 +4,18 @@ import type * as React from "react";
 
 import { cn } from "../lib/cn";
 
-function Table({ className, ...props }: React.ComponentProps<"table">) {
+interface TableProps extends React.ComponentProps<"table"> {
+  containerClassName?: string;
+}
+
+function Table({ className, containerClassName, ...props }: TableProps) {
   return (
-    <div className="relative w-full overflow-auto rounded-xl border border-border-secondary bg-background">
+    <div
+      className={cn(
+        "relative w-full overflow-auto rounded-xl border border-border-secondary bg-background",
+        containerClassName,
+      )}
+    >
       <table data-slot="table" className={cn("w-full caption-bottom type-text-sm", className)} {...props} />
     </div>
   );

package/src/lib/chart-palette.ts

@@ -55,7 +55,10 @@ const HEAT_RAMPS: Record<ChartPaletteName, (empty: string) => string[]> = {
   cyan: heatRampMint,
 };
 
-export const heatRamp = (palette: ChartPaletteName, empty: string) => HEAT_RAMPS[palette](empty);
+export const heatRamp = (palette: ChartPaletteName, empty: string, isDark = true) => {
+  const [, ...colored] = HEAT_RAMPS[palette](empty);
+  return [empty, ...(isDark ? colored : colored.reverse())];
+};
 
 const hexToRgb = (hex: string) => {
   const value = Number.parseInt(hex.slice(1), 16);