@alpic-ai/ui 1.143.0 → 1.145.0

package/dist/components/line-chart.mjs

@@ -1,10 +1,10 @@
 "use client";
 import { cn } from "../lib/cn.mjs";
-import { useReducedMotion } from "../hooks/use-reduced-motion.mjs";
 import { makeXAxisTick, resolveSeries } from "../lib/chart.mjs";
 import { useChartContext } from "./chart-container.mjs";
 import { ChartLegend } from "./chart-legend.mjs";
 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 { CartesianGrid, LabelList, Line, LineChart as LineChart$1, ReferenceArea, ReferenceDot, ReferenceLine, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
@@ -16,7 +16,6 @@ const CURVE_TYPE = {
 };
 function LineChart({ data, index, series, curve = "monotone", legend = false, legendAlign = "left", valueFlags = false, dots = false, height = 200, yAxisWidth = 48, palette, referenceLine, markers, lastValueLabel = false, loading = false, valueFormatter = (value) => value.toLocaleString("en-US"), labelFormatter, className }) {
 	const { palette: paletteColors, theme } = useChartContext(palette);
-	const animated = !useReducedMotion();
 	const resolved = resolveSeries(series, paletteColors, theme);
 	const numericMax = React$1.useMemo(() => {
 		let max = 0;
@@ -93,14 +92,11 @@ function LineChart({ data, index, series, curve = "monotone", legend = false, le
 	const isEmpty = data.length === 0 || resolved.length === 0;
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "line-chart",
-		className: cn("flex w-full flex-col gap-3", className),
+		className: cn("flex w-full flex-col gap-3", "[&_.recharts-surface]:outline-none [&_.recharts-wrapper]:outline-none", className),
 		children: [/* @__PURE__ */ jsx("div", {
 			className: "w-full",
 			style: { height },
-			children: loading ? /* @__PURE__ */ jsxs("div", {
-				className: "flex h-full items-center justify-center gap-2.5 font-mono text-quaternary-foreground text-text-xs",
-				children: [/* @__PURE__ */ jsx("span", { className: "size-4 animate-spin rounded-full border-2 border-border border-t-foreground" }), "loading…"]
-			}) : isEmpty ? /* @__PURE__ */ jsx("div", {
+			children: loading ? /* @__PURE__ */ jsx(Skeleton, { className: "h-full w-full rounded-lg" }) : isEmpty ? /* @__PURE__ */ jsx("div", {
 				className: "flex h-full items-center justify-center rounded-lg border border-border border-dashed font-mono text-quaternary-foreground text-text-xs",
 				children: "no data in range"
 			}) : /* @__PURE__ */ jsx(ResponsiveContainer, {
@@ -124,7 +120,7 @@ function LineChart({ data, index, series, curve = "monotone", legend = false, le
 							...axis,
 							tick: makeXAxisTick(theme),
 							interval: "preserveStartEnd",
-							minTickGap: 44
+							minTickGap: 56
 						}),
 						/* @__PURE__ */ jsx(YAxis, {
 							...axis,
@@ -181,7 +177,7 @@ function LineChart({ data, index, series, curve = "monotone", legend = false, le
 								strokeWidth: 0
 							} : false,
 							activeDot: activeDotFor(entry),
-							isAnimationActive: animated,
+							isAnimationActive: false,
 							animationDuration: 650,
 							animationEasing: "ease-out",
 							children: lastValueLabel && /* @__PURE__ */ jsx(LabelList, {

package/dist/components/sidebar.mjs

@@ -1,11 +1,11 @@
 "use client";
 import { cn } from "../lib/cn.mjs";
+import { Skeleton } from "./skeleton.mjs";
 import { Button } from "./button.mjs";
 import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.mjs";
 import { Separator } from "./separator.mjs";
 import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "./sheet.mjs";
 import { useIsMobile } from "../hooks/use-mobile.mjs";
-import { Skeleton } from "./skeleton.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import * as React$1 from "react";

package/dist/components/skeleton.mjs

@@ -3,7 +3,7 @@ import { cn } from "../lib/cn.mjs";
 import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 //#region src/components/skeleton.tsx
-const skeletonVariants = cva("bg-accent motion-safe:animate-pulse", {
+const skeletonVariants = cva("bg-foreground/10 motion-safe:animate-pulse", {
 	variants: { shape: {
 		rectangle: "rounded-md",
 		circle: "rounded-full"

package/dist/components/stat.mjs

@@ -35,13 +35,13 @@ function Stat({ value, unit, delta, sparkline, semantic, className, ...props })
 	const sentiment = delta && (delta.invert ? delta.direction === "down" : delta.direction === "up") ? "positive" : "negative";
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "stat",
-		className: cn("flex flex-col gap-2.5", className),
+		className: cn("flex min-w-0 flex-col gap-2.5", className),
 		...props,
 		children: [/* @__PURE__ */ jsxs("div", {
-			className: "flex items-baseline gap-3",
+			className: "flex min-w-0 items-baseline gap-x-2.5",
 			children: [
 				/* @__PURE__ */ jsx("span", {
-					className: "type-display-sm font-bold leading-none tracking-tight tabular-nums text-foreground",
+					className: "type-display-sm min-w-0 truncate font-bold leading-none tracking-tight tabular-nums text-foreground",
 					children: value
 				}),
 				unit && /* @__PURE__ */ jsx("span", {
@@ -55,7 +55,7 @@ function Stat({ value, unit, delta, sparkline, semantic, className, ...props })
 				})
 			]
 		}), hasSpark && /* @__PURE__ */ jsx("div", {
-			className: "h-9 w-full",
+			className: "pointer-events-none h-9 w-full",
 			children: /* @__PURE__ */ jsx(ResponsiveContainer, {
 				width: "100%",
 				height: "100%",

package/dist/lib/chart-palette.mjs

@@ -1,23 +1,23 @@
 const CHART_PALETTES = {
 	magenta: [
-		"#e90060",
-		"#ff7eb6",
-		"#9b5de5",
-		"#5b8def",
-		"#36c5f0",
-		"#6eece7",
-		"#d98a3d",
-		"#2bb6a3"
+		"#da1b6a",
+		"#ec82b0",
+		"#9a67d7",
+		"#668fdf",
+		"#47bde0",
+		"#75ddd8",
+		"#cd8c4d",
+		"#3eb0a1"
 	],
 	cyan: [
-		"#17b8cf",
-		"#41ddc9",
-		"#3f8ff0",
-		"#8b6cf0",
-		"#c46bf0",
-		"#ff7eb6",
-		"#e90060",
-		"#c98be0"
+		"#2eb2c5",
+		"#50d0c0",
+		"#4f90e0",
+		"#8d74e0",
+		"#bc73e0",
+		"#ec82b0",
+		"#da1b6a",
+		"#c08dd3"
 	]
 };
 const heatRampMagenta = (empty) => [
@@ -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": "1.143.0",
+  "version": "1.145.0",
   "description": "Alpic design system — shared UI components",
   "type": "module",
   "exports": {
@@ -52,7 +52,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
-    "recharts": "^3.8.1",
+    "recharts": "^3.9.0",
     "tailwind-merge": "^3.6.0"
   },
   "devDependencies": {

package/src/components/area-chart.tsx

@@ -15,13 +15,13 @@ import {
   YAxis,
 } from "recharts";
 
-import { useReducedMotion } from "../hooks/use-reduced-motion";
 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";
 import { ChartLegend } from "./chart-legend";
 import { ChartTooltipContent } from "./chart-tooltip";
+import { Skeleton } from "./skeleton";
 
 const CURVE_TYPE = { monotone: "monotone", linear: "linear", step: "stepAfter" } as const;
 
@@ -77,8 +77,6 @@ function AreaChart({
 }: AreaChartProps) {
   const { palette: paletteColors, theme } = useChartContext(palette);
   const reactId = React.useId().replace(/:/g, "");
-  const reducedMotion = useReducedMotion();
-  const animated = !reducedMotion;
 
   const resolved = resolveSeries(series, paletteColors, theme);
   const stacked = variant === "stacked" || variant === "expand";
@@ -195,13 +193,17 @@ function AreaChart({
   const isEmpty = data.length === 0 || rendered.length === 0;
 
   return (
-    <div data-slot="area-chart" className={cn("flex w-full flex-col gap-3", className)}>
+    <div
+      data-slot="area-chart"
+      className={cn(
+        "flex w-full flex-col gap-3",
+        "[&_.recharts-surface]:outline-none [&_.recharts-wrapper]:outline-none",
+        className,
+      )}
+    >
       <div className="w-full" style={{ height }}>
         {loading ? (
-          <div className="flex h-full items-center justify-center gap-2.5 font-mono text-quaternary-foreground text-text-xs">
-            <span className="size-4 animate-spin rounded-full border-2 border-border border-t-foreground" />
-            loading…
-          </div>
+          <Skeleton className="h-full w-full rounded-lg" />
         ) : isEmpty ? (
           <div className="flex h-full items-center justify-center rounded-lg border border-border border-dashed font-mono text-quaternary-foreground text-text-xs">
             no data in range
@@ -241,7 +243,7 @@ function AreaChart({
                 {...axis}
                 tick={makeXAxisTick(theme)}
                 interval="preserveStartEnd"
-                minTickGap={44}
+                minTickGap={56}
               />
               <YAxis
                 {...axis}
@@ -304,7 +306,7 @@ function AreaChart({
                   fill={fillFor(entry, slot)}
                   dot={false}
                   activeDot={activeDotFor(entry)}
-                  isAnimationActive={animated}
+                  isAnimationActive={false}
                   animationDuration={650}
                   animationEasing="ease-out"
                 >

package/src/components/bar-chart.tsx

@@ -15,7 +15,6 @@ import {
   YAxis,
 } from "recharts";
 
-import { useReducedMotion } from "../hooks/use-reduced-motion";
 import { type ChartSeries, makeXAxisTick, orderByLuminance, resolveSeries } from "../lib/chart";
 import type { ChartPaletteName } from "../lib/chart-palette";
 import { cn } from "../lib/cn";
@@ -23,6 +22,7 @@ import type { ChartMarker } from "./area-chart";
 import { useChartContext } from "./chart-container";
 import { ChartLegend } from "./chart-legend";
 import { ChartTooltipContent } from "./chart-tooltip";
+import { Skeleton } from "./skeleton";
 
 const BAR_RADIUS = 4;
 const MAX_BAR_SIZE = 48;
@@ -68,8 +68,6 @@ function BarChart({
 }: BarChartProps) {
   const { palette: paletteColors, theme } = useChartContext(palette);
   const reactId = React.useId().replace(/:/g, "");
-  const reducedMotion = useReducedMotion();
-  const animated = !reducedMotion;
 
   const resolved = resolveSeries(series, paletteColors, theme);
   const stacked = variant === "stacked" || variant === "expand";
@@ -158,13 +156,17 @@ function BarChart({
   const isEmpty = data.length === 0 || rendered.length === 0;
 
   return (
-    <div data-slot="bar-chart" className={cn("flex w-full flex-col gap-3", className)}>
+    <div
+      data-slot="bar-chart"
+      className={cn(
+        "flex w-full flex-col gap-3",
+        "[&_.recharts-surface]:outline-none [&_.recharts-wrapper]:outline-none",
+        className,
+      )}
+    >
       <div className="w-full" style={{ height }}>
         {loading ? (
-          <div className="flex h-full items-center justify-center gap-2.5 font-mono text-quaternary-foreground text-text-xs">
-            <span className="size-4 animate-spin rounded-full border-2 border-border border-t-foreground" />
-            loading…
-          </div>
+          <Skeleton className="h-full w-full rounded-lg" />
         ) : isEmpty ? (
           <div className="flex h-full items-center justify-center rounded-lg border border-border border-dashed font-mono text-quaternary-foreground text-text-xs">
             no data in range
@@ -205,7 +207,7 @@ function BarChart({
                 {...axis}
                 tick={makeXAxisTick(theme)}
                 interval="preserveStartEnd"
-                minTickGap={44}
+                minTickGap={56}
               />
               <YAxis
                 {...axis}
@@ -271,8 +273,8 @@ function BarChart({
                   strokeWidth={0}
                   radius={radiusFor(slot)}
                   maxBarSize={MAX_BAR_SIZE}
-                  activeBar={{ fillOpacity: 1, stroke: theme.card, strokeWidth: 1 }}
-                  isAnimationActive={animated}
+                  activeBar={false}
+                  isAnimationActive={false}
                   animationDuration={650}
                   animationEasing="ease-out"
                 >

package/src/components/bar-list.tsx

@@ -2,7 +2,6 @@
 
 import * as React from "react";
 
-import { useReducedMotion } from "../hooks/use-reduced-motion";
 import { formatShare } from "../lib/chart";
 import type { ChartPaletteName } from "../lib/chart-palette";
 import { rampColor } from "../lib/chart-palette";
@@ -47,14 +46,8 @@ function BarList({
 }: BarListProps) {
   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);
 
-  React.useEffect(() => {
-    setMounted(true);
-  }, []);
-
   const total = React.useMemo(() => data.reduce((sum, row) => sum + (Number(row[dataKey]) || 0), 0), [data, dataKey]);
 
   const rows = React.useMemo(() => {
@@ -113,7 +106,7 @@ function BarList({
     <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}%`;
+        const fillWidth = `${fraction * 100}%`;
         const dimmed = active !== null && active !== slot;
         const isActive = active === slot;
         return (
@@ -135,7 +128,6 @@ function BarList({
                   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

package/src/components/chart-tooltip.tsx

@@ -3,6 +3,8 @@
 import { cn } from "../lib/cn";
 import { useChartContext } from "./chart-container";
 
+const MAX_TOOLTIP_ROWS = 8;
+
 export interface ChartTooltipItem {
   name?: string | number;
   value?: number | string;
@@ -41,10 +43,14 @@ function ChartTooltipContent({
     return null;
   }
 
-  const total = payload.reduce(
-    (sum, item) => sum + (typeof item.value === "number" ? item.value : Number(item.value ?? 0)),
-    0,
-  );
+  const toNumber = (value: ChartTooltipItem["value"]) => (typeof value === "number" ? value : Number(value ?? 0));
+  const total = payload.reduce((sum, item) => sum + toNumber(item.value), 0);
+
+  const sorted = [...payload].sort((lower, upper) => toNumber(upper.value) - toNumber(lower.value));
+
+  const rows = sorted.slice(0, MAX_TOOLTIP_ROWS);
+  const overflow = sorted.slice(MAX_TOOLTIP_ROWS);
+  const overflowTotal = overflow.reduce((sum, item) => sum + toNumber(item.value), 0);
 
   return (
     <div
@@ -60,13 +66,13 @@ function ChartTooltipContent({
         </p>
       )}
       <div className="flex flex-col gap-1">
-        {payload.map((item, index) => {
+        {rows.map((item, index) => {
           const swatch =
             [item.color, item.stroke, item.fill].find(
               (candidate): candidate is string =>
                 typeof candidate === "string" && candidate.length > 0 && !candidate.startsWith("url("),
             ) ?? theme.mutedForeground;
-          const numeric = typeof item.value === "number" ? item.value : Number(item.value ?? 0);
+          const numeric = toNumber(item.value);
           return (
             <div key={`${item.dataKey ?? index}`} className="flex items-center justify-between gap-4 text-text-xs">
               <span className="inline-flex items-center gap-2 text-muted-foreground">
@@ -77,6 +83,16 @@ function ChartTooltipContent({
             </div>
           );
         })}
+        {overflow.length > 0 && (
+          <div className="flex items-center justify-between gap-4 text-text-xs">
+            <span className="inline-flex items-center gap-2 text-quaternary-foreground">
+              <span aria-hidden className="size-2 shrink-0" />+{overflow.length} more
+            </span>
+            <span className="font-mono font-semibold tabular-nums text-quaternary-foreground">
+              {valueFormatter(overflowTotal)}
+            </span>
+          </div>
+        )}
         {showTotal && (
           <div className="mt-1 flex items-center justify-between gap-4 border-border border-t pt-1.5 text-text-xs">
             <span className="font-mono text-quaternary-foreground uppercase tracking-wider text-[10px]">

package/src/components/donut-chart.tsx

@@ -3,7 +3,6 @@
 import * as React from "react";
 import { Cell, Pie, PieChart as RechartsPieChart, ResponsiveContainer } from "recharts";
 
-import { useReducedMotion } from "../hooks/use-reduced-motion";
 import { formatShare } from "../lib/chart";
 import type { ChartPaletteName } from "../lib/chart-palette";
 import { paletteColor } from "../lib/chart-palette";
@@ -48,8 +47,6 @@ function DonutChart({
 }: DonutChartProps) {
   const { palette: paletteColors, theme } = useChartContext(palette);
   const reactId = React.useId().replace(/:/g, "");
-  const reducedMotion = useReducedMotion();
-  const animated = !reducedMotion;
   const [active, setActive] = React.useState<number | null>(null);
   const rowRefs = React.useRef<Array<HTMLDivElement | null>>([]);
 
@@ -121,7 +118,7 @@ function DonutChart({
                   cornerRadius={2}
                   stroke={theme.card}
                   strokeWidth={1.5}
-                  isAnimationActive={animated}
+                  isAnimationActive={false}
                   animationDuration={650}
                   animationEasing="ease-out"
                   onMouseEnter={(_entry, sliceIndex) => setActive(sliceIndex)}

package/src/components/form.tsx

@@ -78,10 +78,12 @@ const FormItemContext = React.createContext<FormItemContextValue>({} as FormItem
 
 function FormItem({ className, ...props }: React.ComponentProps<"div">) {
   const id = React.useId();
+  const { name } = React.useContext(FormFieldContext);
 
   return (
     <FormItemContext.Provider value={{ id }}>
-      <div data-slot="form-item" className={cn("grid gap-2", className)} {...props} />
+      {/* Expose the field name as generic metadata so hosts can react to focus without per-field wiring. */}
+      <div data-slot="form-item" data-field-name={name} className={cn("grid gap-2", className)} {...props} />
     </FormItemContext.Provider>
   );
 }

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/line-chart.tsx

@@ -15,7 +15,6 @@ import {
   YAxis,
 } from "recharts";
 
-import { useReducedMotion } from "../hooks/use-reduced-motion";
 import { type ChartSeries, makeXAxisTick, resolveSeries } from "../lib/chart";
 import type { ChartPaletteName } from "../lib/chart-palette";
 import { cn } from "../lib/cn";
@@ -23,6 +22,7 @@ import type { ChartMarker } from "./area-chart";
 import { useChartContext } from "./chart-container";
 import { ChartLegend } from "./chart-legend";
 import { ChartTooltipContent } from "./chart-tooltip";
+import { Skeleton } from "./skeleton";
 
 const CURVE_TYPE = { monotone: "monotone", linear: "linear", step: "stepAfter" } as const;
 
@@ -68,8 +68,6 @@ function LineChart({
   className,
 }: LineChartProps) {
   const { palette: paletteColors, theme } = useChartContext(palette);
-  const reducedMotion = useReducedMotion();
-  const animated = !reducedMotion;
 
   const resolved = resolveSeries(series, paletteColors, theme);
 
@@ -160,13 +158,17 @@ function LineChart({
   const isEmpty = data.length === 0 || resolved.length === 0;
 
   return (
-    <div data-slot="line-chart" className={cn("flex w-full flex-col gap-3", className)}>
+    <div
+      data-slot="line-chart"
+      className={cn(
+        "flex w-full flex-col gap-3",
+        "[&_.recharts-surface]:outline-none [&_.recharts-wrapper]:outline-none",
+        className,
+      )}
+    >
       <div className="w-full" style={{ height }}>
         {loading ? (
-          <div className="flex h-full items-center justify-center gap-2.5 font-mono text-quaternary-foreground text-text-xs">
-            <span className="size-4 animate-spin rounded-full border-2 border-border border-t-foreground" />
-            loading…
-          </div>
+          <Skeleton className="h-full w-full rounded-lg" />
         ) : isEmpty ? (
           <div className="flex h-full items-center justify-center rounded-lg border border-border border-dashed font-mono text-quaternary-foreground text-text-xs">
             no data in range
@@ -180,7 +182,7 @@ function LineChart({
                 {...axis}
                 tick={makeXAxisTick(theme)}
                 interval="preserveStartEnd"
-                minTickGap={44}
+                minTickGap={56}
               />
               <YAxis
                 {...axis}
@@ -234,7 +236,7 @@ function LineChart({
                   strokeDasharray={entry.dashed ? "5 3" : undefined}
                   dot={dots ? { r: 2.5, fill: entry.color, strokeWidth: 0 } : false}
                   activeDot={activeDotFor(entry)}
-                  isAnimationActive={animated}
+                  isAnimationActive={false}
                   animationDuration={650}
                   animationEasing="ease-out"
                 >

package/src/components/skeleton.tsx

@@ -3,7 +3,7 @@
 import { cn } from "@alpic-ai/ui/lib/cn";
 import { cva, type VariantProps } from "class-variance-authority";
 
-const skeletonVariants = cva("bg-accent motion-safe:animate-pulse", {
+const skeletonVariants = cva("bg-foreground/10 motion-safe:animate-pulse", {
   variants: {
     shape: {
       rectangle: "rounded-md",

package/src/components/stat.tsx

@@ -55,9 +55,9 @@ function Stat({ value, unit, delta, sparkline, semantic, className, ...props }:
     delta && (delta.invert ? delta.direction === "down" : delta.direction === "up") ? "positive" : "negative";
 
   return (
-    <div data-slot="stat" className={cn("flex flex-col gap-2.5", className)} {...props}>
-      <div className="flex items-baseline gap-3">
-        <span className="type-display-sm font-bold leading-none tracking-tight tabular-nums text-foreground">
+    <div data-slot="stat" className={cn("flex min-w-0 flex-col gap-2.5", className)} {...props}>
+      <div className="flex min-w-0 items-baseline gap-x-2.5">
+        <span className="type-display-sm min-w-0 truncate font-bold leading-none tracking-tight tabular-nums text-foreground">
           {value}
         </span>
         {unit && <span className="font-mono text-[11px] leading-none text-quaternary-foreground mb-0.5">{unit}</span>}
@@ -69,7 +69,7 @@ function Stat({ value, unit, delta, sparkline, semantic, className, ...props }:
         )}
       </div>
       {hasSpark && (
-        <div className="h-9 w-full">
+        <div className="pointer-events-none h-9 w-full">
           <ResponsiveContainer width="100%" height="100%" initialDimension={{ width: 0, height: 36 }}>
             <AreaChart data={sparkData} margin={{ top: 4, right: 2, bottom: 0, left: 2 }}>
               <defs>