@alpic-ai/ui 1.161.0 → 1.162.0

package/dist/components/accordion-card.d.mts

@@ -9,11 +9,7 @@ declare function AccordionCard({ defaultOpen, open, onOpenChange, disabled, clas
 } & Omit<React$1.ComponentProps<typeof AccordionPrimitive.Root>, "type" | "collapsible" | "defaultValue" | "value" | "onValueChange" | "disabled">): React$1.JSX.Element;
 declare function AccordionCardHeader({ className, children, ...props }: React$1.ComponentProps<typeof AccordionPrimitive.Trigger>): React$1.JSX.Element;
 declare function AccordionCardTitle({ className, children, ...props }: React$1.HTMLAttributes<HTMLHeadingElement>): React$1.JSX.Element;
-/**
- * `className` is forwarded to the inner padding wrapper, not the Radix Content root.
- * The root always applies overflow-hidden and the accordion animations.
- * To override overflow or animation behavior, wrap this component in an additional element.
- */
+/** `className` styles the inner padding wrapper, not the Radix Content root, which keeps overflow-hidden and the accordion animations. */
 declare function AccordionCardContent({ className, children, ...props }: React$1.ComponentProps<typeof AccordionPrimitive.Content>): React$1.JSX.Element;
 //#endregion
 export { AccordionCard, AccordionCardContent, AccordionCardHeader, AccordionCardTitle };

package/dist/components/accordion-card.mjs

@@ -41,11 +41,7 @@ function AccordionCardTitle({ className, children, ...props }) {
 		children
 	});
 }
-/**
-* `className` is forwarded to the inner padding wrapper, not the Radix Content root.
-* The root always applies overflow-hidden and the accordion animations.
-* To override overflow or animation behavior, wrap this component in an additional element.
-*/
+/** `className` styles the inner padding wrapper, not the Radix Content root, which keeps overflow-hidden and the accordion animations. */
 function AccordionCardContent({ className, children, ...props }) {
 	return /* @__PURE__ */ jsx(AccordionPrimitive.Content, {
 		"data-slot": "accordion-card-content",

package/dist/components/accordion.d.mts

@@ -4,11 +4,7 @@ import * as React$1 from "react";
 declare function Accordion({ ...props }: React$1.ComponentProps<typeof AccordionPrimitive.Root>): React$1.JSX.Element;
 declare function AccordionItem({ className, ...props }: React$1.ComponentProps<typeof AccordionPrimitive.Item>): React$1.JSX.Element;
 declare function AccordionTrigger({ className, children, ...props }: React$1.ComponentProps<typeof AccordionPrimitive.Trigger>): React$1.JSX.Element;
-/**
- * `className` is forwarded to the inner padding wrapper, not the Radix Content root.
- * The root always applies overflow-hidden and the accordion animations.
- * To override overflow or animation behavior, wrap this component in an additional element.
- */
+/** `className` styles the inner padding wrapper, not the Radix Content root, which keeps overflow-hidden and the accordion animations. */
 declare function AccordionContent({ className, children, ...props }: React$1.ComponentProps<typeof AccordionPrimitive.Content>): React$1.JSX.Element;
 //#endregion
 export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };

package/dist/components/accordion.mjs

@@ -28,11 +28,7 @@ function AccordionTrigger({ className, children, ...props }) {
 		})
 	});
 }
-/**
-* `className` is forwarded to the inner padding wrapper, not the Radix Content root.
-* The root always applies overflow-hidden and the accordion animations.
-* To override overflow or animation behavior, wrap this component in an additional element.
-*/
+/** `className` styles the inner padding wrapper, not the Radix Content root, which keeps overflow-hidden and the accordion animations. */
 function AccordionContent({ className, children, ...props }) {
 	return /* @__PURE__ */ jsx(AccordionPrimitive.Content, {
 		"data-slot": "accordion-content",

package/dist/components/attachment-tile.d.mts

@@ -2,7 +2,6 @@
 interface AttachmentTileProps {
   src?: string;
   isImage?: boolean;
-  /** Accessible label describing the attachment */
   label?: string;
   onRemove?: () => void;
   onClick?: () => void;

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

@@ -1,5 +1,6 @@
 //#region src/components/chart-legend.d.ts
 interface ChartLegendItem {
+  key: string;
   name: string;
   color: string;
   dashed?: boolean;
@@ -8,7 +9,9 @@ interface ChartLegendProps extends React.HTMLAttributes<HTMLDivElement> {
   items: ChartLegendItem[];
   align?: "left" | "center" | "right";
   insetLeft?: number;
+  hiddenKeys?: ReadonlySet<string>;
+  onItemClick?: (key: string) => void;
 }
-declare function ChartLegend({ items, align, insetLeft, className, style, ...props }: ChartLegendProps): import("react").JSX.Element;
+declare function ChartLegend({ items, align, insetLeft, hiddenKeys, onItemClick, className, style, ...props }: ChartLegendProps): import("react").JSX.Element;
 //#endregion
 export { ChartLegend, ChartLegendItem, ChartLegendProps };

package/dist/components/chart-legend.mjs

@@ -1,12 +1,14 @@
 "use client";
 import { cn } from "../lib/cn.mjs";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/chart-legend.tsx
 const ALIGN_CLASS = {
 	left: "justify-start",
 	center: "justify-center",
 	right: "justify-end"
 };
+const ITEM_CLASS = "inline-flex items-center gap-1.5 font-mono text-[10px] text-muted-foreground uppercase tracking-[0.12em]";
+const INTERACTIVE_CLASS = "rounded-sm outline-none transition-opacity focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-card [@media(hover:hover)]:hover:text-foreground";
 function Swatch({ color, dashed }) {
 	return /* @__PURE__ */ jsx("span", {
 		"aria-hidden": true,
@@ -14,7 +16,7 @@ function Swatch({ color, dashed }) {
 		style: dashed ? { border: `1.5px solid ${color}` } : { background: color }
 	});
 }
-function ChartLegend({ items, align = "left", insetLeft, className, style, ...props }) {
+function ChartLegend({ items, align = "left", insetLeft, hiddenKeys, onItemClick, className, style, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		className: cn("flex flex-wrap gap-x-4 gap-y-1.5", ALIGN_CLASS[align], className),
 		style: {
@@ -22,13 +24,25 @@ function ChartLegend({ items, align = "left", insetLeft, className, style, ...pr
 			...style
 		},
 		...props,
-		children: items.map((item) => /* @__PURE__ */ jsxs("span", {
-			className: "inline-flex items-center gap-1.5 font-mono text-[10px] text-muted-foreground uppercase tracking-[0.12em]",
-			children: [/* @__PURE__ */ jsx(Swatch, {
+		children: items.map((item) => {
+			const swatchAndName = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Swatch, {
 				color: item.color,
 				dashed: item.dashed
-			}), item.name]
-		}, item.name))
+			}), item.name] });
+			if (!onItemClick) return /* @__PURE__ */ jsx("span", {
+				className: ITEM_CLASS,
+				children: swatchAndName
+			}, item.key);
+			const hidden = hiddenKeys?.has(item.key) ?? false;
+			return /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": `${item.name} series`,
+				"aria-pressed": !hidden,
+				onClick: () => onItemClick(item.key),
+				className: cn(ITEM_CLASS, INTERACTIVE_CLASS, hidden && "opacity-40"),
+				children: swatchAndName
+			}, item.key);
+		})
 	});
 }
 //#endregion

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

@@ -22,14 +22,12 @@ declare function makeChartAxis(theme: ChartTheme): {
   };
 };
 declare function makeLegendItems(resolved: ResolvedSeries[]): {
+  key: string;
   name: string;
   color: string;
   dashed: boolean | undefined;
 }[];
-/**
- * Stacked series must reach the stack height (sum per x-point), not the tallest
- * single series, or reference bands and explicit Y domains clip a tall stack short.
- */
+/** Stacked series must reach the stack height (sum per x-point), or reference bands and explicit Y domains clip a tall stack short. */
 declare function computeNumericMax(data: ChartData, series: ChartSeries[], stacked: boolean): number;
 declare function makeActiveDot(entry: ResolvedSeries, { valueFlags, theme, valueFormatter }: {
   valueFlags: boolean;
@@ -55,10 +53,7 @@ declare function makeLastValueLabel(color: string, { dataLength, theme, valueFor
   value?: string | number | boolean | Array<string | number | boolean> | null;
   index?: number;
 }) => import("react").JSX.Element | null;
-/**
- * Returns recharts elements (not a wrapper component) so recharts still detects
- * them as direct children when spread into a chart via `{renderReferenceLine(...)}`.
- */
+/** Returns recharts elements (not a wrapper component) so recharts still detects them as direct chart children. */
 declare function renderReferenceLine({ referenceLine, numericMax, theme }: {
   referenceLine: ReferenceLineConfig | undefined;
   numericMax: number;

package/dist/components/chart-primitives.mjs

@@ -19,15 +19,13 @@ function makeChartAxis(theme) {
 }
 function makeLegendItems(resolved) {
 	return resolved.map((entry) => ({
+		key: entry.key,
 		name: entry.name,
 		color: entry.color,
 		dashed: entry.dashed
 	}));
 }
-/**
-* Stacked series must reach the stack height (sum per x-point), not the tallest
-* single series, or reference bands and explicit Y domains clip a tall stack short.
-*/
+/** Stacked series must reach the stack height (sum per x-point), or reference bands and explicit Y domains clip a tall stack short. */
 function computeNumericMax(data, series, stacked) {
 	let max = 0;
 	for (const row of data) {
@@ -87,10 +85,7 @@ function makeLastValueLabel(color, { dataLength, theme, valueFormatter }) {
 		});
 	};
 }
-/**
-* Returns recharts elements (not a wrapper component) so recharts still detects
-* them as direct children when spread into a chart via `{renderReferenceLine(...)}`.
-*/
+/** Returns recharts elements (not a wrapper component) so recharts still detects them as direct chart children. */
 function renderReferenceLine({ referenceLine, numericMax, theme }) {
 	if (!referenceLine) return null;
 	return [referenceLine.band ? /* @__PURE__ */ jsx(ReferenceArea, {

package/dist/components/combobox.d.mts

@@ -42,7 +42,6 @@ declare function ComboboxEmpty({ className, ...props }: React.ComponentProps<typ
 declare function ComboboxGroup({ className, ...props }: React.ComponentProps<typeof Command.Group>): import("react").JSX.Element;
 declare function ComboboxSeparator({ className, ...props }: React.ComponentProps<typeof Command.Separator>): import("react").JSX.Element;
 interface ComboboxItemProps extends Omit<React.ComponentProps<typeof Command.Item>, "onSelect"> {
-  /** The value stored when this item is selected */
   itemValue: string;
 }
 declare function ComboboxItem({ className, children, itemValue, ...props }: ComboboxItemProps): import("react").JSX.Element;

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

@@ -28,10 +28,12 @@ interface LineChartProps {
   markers?: ChartMarker[];
   lastValueLabel?: boolean;
   loading?: boolean;
+  hiddenSeries?: ReadonlySet<string>;
+  onLegendItemClick?: (key: string) => void;
   valueFormatter?: (value: number) => string;
   labelFormatter?: (label: string | number) => string;
   className?: string;
 }
-declare function LineChart({ data, index, series, curve, legend, legendAlign, valueFlags, dots, height, yAxisWidth, palette, referenceLine, markers, lastValueLabel, loading, valueFormatter, labelFormatter, className }: LineChartProps): React$1.JSX.Element;
+declare function LineChart({ data, index, series, curve, legend, legendAlign, valueFlags, dots, height, yAxisWidth, palette, referenceLine, markers, lastValueLabel, loading, hiddenSeries, onLegendItemClick, valueFormatter, labelFormatter, className }: LineChartProps): React$1.JSX.Element;
 //#endregion
 export { LineChart, LineChartProps };

package/dist/components/line-chart.mjs

@@ -15,10 +15,11 @@ const CURVE_TYPE = {
 	linear: "linear",
 	step: "stepAfter"
 };
-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 }) {
+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, hiddenSeries, onLegendItemClick, valueFormatter = (value) => value.toLocaleString("en-US"), labelFormatter, className }) {
 	const { palette: paletteColors, theme } = useChartContext(palette);
 	const resolved = resolveSeries(series, paletteColors, theme);
-	const numericMax = React$1.useMemo(() => computeNumericMax(data, series, false), [data, series]);
+	const visible = resolved.filter((entry) => !hiddenSeries?.has(entry.key));
+	const numericMax = React$1.useMemo(() => computeNumericMax(data, visible, false), [data, visible]);
 	const curveType = CURVE_TYPE[curve];
 	const margin = {
 		top: markers?.length ? 18 : 8,
@@ -88,7 +89,7 @@ function LineChart({ data, index, series, curve = "monotone", legend = false, le
 							numericMax,
 							theme
 						}),
-						resolved.map((entry) => /* @__PURE__ */ jsx(Line, {
+						visible.map((entry) => /* @__PURE__ */ jsx(Line, {
 							type: curveType,
 							dataKey: entry.key,
 							name: entry.name,
@@ -124,7 +125,9 @@ function LineChart({ data, index, series, curve = "monotone", legend = false, le
 		}), legend && !isEmpty && /* @__PURE__ */ jsx(ChartLegend, {
 			items: legendItems,
 			align: legendAlign,
-			insetLeft: yAxisWidth
+			insetLeft: yAxisWidth,
+			hiddenKeys: hiddenSeries,
+			onItemClick: onLegendItemClick
 		})]
 	});
 }

package/dist/components/select-trigger-variants.d.mts

@@ -1,9 +1,5 @@
 //#region src/components/select-trigger-variants.d.ts
-/**
- * Shared trigger styles for Select and Combobox.
- * Both components use the same visual treatment for their trigger buttons.
- * Edit here to keep them in sync.
- */
+/** Shared by Select and Combobox so their trigger buttons stay visually in sync. */
 declare const selectTriggerVariants: (props?: ({
   size?: "sm" | "md" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/components/select-trigger-variants.mjs

@@ -1,10 +1,6 @@
 import { cva } from "class-variance-authority";
 //#region src/components/select-trigger-variants.ts
-/**
-* Shared trigger styles for Select and Combobox.
-* Both components use the same visual treatment for their trigger buttons.
-* Edit here to keep them in sync.
-*/
+/** Shared by Select and Combobox so their trigger buttons stay visually in sync. */
 const selectTriggerVariants = cva([
 	"flex w-full items-center gap-2 rounded-md border bg-background text-foreground shadow-xs outline-hidden",
 	"transition-colors",

package/dist/components/table.d.mts

@@ -10,11 +10,7 @@ declare function TableFooter({ className, ...props }: React$1.ComponentProps<"tf
 declare function TableRow({ className, ...props }: React$1.ComponentProps<"tr">): React$1.JSX.Element;
 declare function TableHead({ className, ...props }: React$1.ComponentProps<"th">): React$1.JSX.Element;
 interface TableCellProps extends React$1.ComponentProps<"td"> {
-  /**
-   * When true, the cell renders edge-to-edge so the child can act as the
-   * interactive surface (e.g. a button or popover trigger filling the cell).
-   * Defaults to false (standard padded cell).
-   */
+  /** Renders the cell edge-to-edge so the child (e.g. a button or popover trigger) can fill it as the interactive surface. */
   interactive?: boolean;
 }
 declare function TableCell({ className, interactive, ...props }: TableCellProps): React$1.JSX.Element;

package/dist/components/task-progress.d.mts

@@ -8,10 +8,7 @@ interface TaskProgressStep {
 interface TaskProgressProps extends Omit<React.ComponentProps<"div">, "children"> {
   steps: readonly TaskProgressStep[];
   trailingLabel?: string;
-  /**
-   * Optional mount-time stagger: each row fades + slides in with `animation-delay = index × stepRevealDelayMs`.
-   * Pure CSS, runs once on mount. Omit for no animation.
-   */
+  /** Mount-time stagger: each row fades in after `index × stepRevealDelayMs`; omit for no animation. */
   stepRevealDelayMs?: number;
 }
 declare function TaskProgress({ steps, trailingLabel, stepRevealDelayMs, className, ...props }: TaskProgressProps): import("react").JSX.Element;

package/dist/lib/chart-palette.d.mts

@@ -1,19 +1,4 @@
 //#region src/lib/chart-palette.d.ts
-/**
- * Chart palettes — the locked "paired system" from the analytics-v2 design.
- *
- * These are charting-API color values (consumed by Recharts at draw time, which
- * cannot read CSS custom properties), so per the design-system rules they live
- * as documented hex constants rather than `--color-*` tokens. They are
- * theme-independent: the same series colors read on light and dark canvases.
- * Only the chrome (grid, axis text, tooltip surface, semantic colors) is
- * theme-aware — see `useChartTheme`.
- *
- * Rules baked in:
- *  - Pink leads (index 0) — never buried, fixing the V1 "pink last" bug.
- *  - Adjacent dashboard cards alternate lead palette (magenta / cyan) — the
- *    page decides which to pass; the component just receives one.
- */
 declare const MAGENTA_PALETTE: readonly ["#da1b6a", "#ec82b0", "#9a67d7", "#668fdf", "#47bde0", "#75ddd8", "#cd8c4d", "#3eb0a1"];
 declare const CYAN_PALETTE: readonly ["#2eb2c5", "#50d0c0", "#4f90e0", "#8d74e0", "#bc73e0", "#ec82b0", "#da1b6a", "#c08dd3"];
 type ChartPaletteName = "magenta" | "cyan";
@@ -28,11 +13,7 @@ declare const heatRamp: (palette: ChartPaletteName, empty: string, isDark?: bool
 declare const luminance: (hex: string) => number;
 declare const paletteColor: (palette: readonly string[], index: number) => string;
 declare const rampColor: (palette: ChartPaletteName, fraction: number) => string;
-/**
- * Interpolate continuously across a multi-stop heat ramp (e.g. `heatRampMagenta`),
- * so a normalized 0..1 value reads as a smooth single-hue gradient rather than
- * the five discrete bands.
- */
+/** Interpolates continuously across the ramp so a 0..1 value reads as a smooth gradient rather than five discrete bands. */
 declare const heatColor: (stops: readonly string[], fraction: number) => string;
 //#endregion
 export { CHART_PALETTES, CYAN_PALETTE, ChartPaletteName, HEAT_EMPTY, MAGENTA_PALETTE, heatColor, heatRamp, heatRampMagenta, heatRampMint, luminance, paletteColor, rampColor };

package/dist/lib/chart-palette.mjs

@@ -1,19 +1,4 @@
 //#region src/lib/chart-palette.ts
-/**
-* Chart palettes — the locked "paired system" from the analytics-v2 design.
-*
-* These are charting-API color values (consumed by Recharts at draw time, which
-* cannot read CSS custom properties), so per the design-system rules they live
-* as documented hex constants rather than `--color-*` tokens. They are
-* theme-independent: the same series colors read on light and dark canvases.
-* Only the chrome (grid, axis text, tooltip surface, semantic colors) is
-* theme-aware — see `useChartTheme`.
-*
-* Rules baked in:
-*  - Pink leads (index 0) — never buried, fixing the V1 "pink last" bug.
-*  - Adjacent dashboard cards alternate lead palette (magenta / cyan) — the
-*    page decides which to pass; the component just receives one.
-*/
 const MAGENTA_PALETTE = [
 	"#da1b6a",
 	"#ec82b0",
@@ -101,11 +86,7 @@ const rampColor = (palette, fraction) => {
 	const [from, to] = RAMP_ENDS[palette];
 	return mixHex(from, to, fraction);
 };
-/**
-* Interpolate continuously across a multi-stop heat ramp (e.g. `heatRampMagenta`),
-* so a normalized 0..1 value reads as a smooth single-hue gradient rather than
-* the five discrete bands.
-*/
+/** Interpolates continuously across the ramp so a 0..1 value reads as a smooth gradient rather than five discrete bands. */
 const heatColor = (stops, fraction) => {
 	const clamped = Math.min(1, Math.max(0, fraction));
 	const segment = (stops.length - 1) * clamped;

package/dist/lib/chart.d.mts

@@ -1,9 +1,6 @@
 import "react";
 //#region src/lib/chart.d.ts
-/**
- * Declarative description of one plotted series. The same shape drives area,
- * line and bar charts — what differs is how each chart renders it.
- */
+/** One plotted series; the same shape drives area, line and bar charts. */
 interface ChartSeries {
   key: string;
   name?: string;

package/dist/lib/chart.mjs

@@ -7,22 +7,13 @@ const semanticColor = (theme, semantic) => {
 	if (semantic === "warning") return theme.warning;
 	return theme.success;
 };
-/**
-* Resolve each series to a concrete color and name. Color precedence:
-* explicit `color` → `semantic` token → palette slot by declared index (so the
-* lead series keeps the lead color even after the bands are reordered).
-*/
+/** Palette fallback uses the declared index so the lead series keeps the lead color even after reordering. */
 const resolveSeries = (series, palette, theme) => series.map((entry, index) => ({
 	...entry,
 	name: entry.name ?? entry.key,
 	color: entry.color ?? (entry.semantic ? semanticColor(theme, entry.semantic) : paletteColor(palette, index))
 }));
-/**
-* Stacked bands read cleanest as a vertical gradient: darkest at the baseline,
-* lightest at the top edge. Sorting by luminance enforces that for any palette
-* (this is what fixed the "muddy cyan" stack in the lab). Render order maps to
-* stack order in Recharts — first entry sits at the bottom.
-*/
+/** Stacked bands read cleanest darkest-at-baseline to lightest-on-top; sorting by luminance enforces that for any palette. */
 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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alpic-ai/ui",
-  "version": "1.161.0",
+  "version": "1.162.0",
   "description": "Alpic design system — shared UI components",
   "type": "module",
   "exports": {
@@ -62,10 +62,10 @@
   "devDependencies": {
     "@ladle/react": "^5.1.1",
     "@tailwindcss/postcss": "^4.3.3",
-    "@types/react": "19.2.17",
-    "@types/react-dom": "19.2.3",
-    "lucide-react": "^1.27.0",
-    "react-hook-form": "^7.83.0",
+    "@types/react": "19.2.18",
+    "@types/react-dom": "19.2.4",
+    "lucide-react": "^1.28.0",
+    "react-hook-form": "^7.84.0",
     "shx": "^0.4.0",
     "sonner": "^2.0.7",
     "tailwindcss": "^4.3.3",

package/src/components/accordion-card.tsx

@@ -79,11 +79,7 @@ function AccordionCardTitle({ className, children, ...props }: React.HTMLAttribu
   );
 }
 
-/**
- * `className` is forwarded to the inner padding wrapper, not the Radix Content root.
- * The root always applies overflow-hidden and the accordion animations.
- * To override overflow or animation behavior, wrap this component in an additional element.
- */
+/** `className` styles the inner padding wrapper, not the Radix Content root, which keeps overflow-hidden and the accordion animations. */
 function AccordionCardContent({
   className,
   children,

package/src/components/accordion.tsx

@@ -43,11 +43,7 @@ function AccordionTrigger({ className, children, ...props }: React.ComponentProp
   );
 }
 
-/**
- * `className` is forwarded to the inner padding wrapper, not the Radix Content root.
- * The root always applies overflow-hidden and the accordion animations.
- * To override overflow or animation behavior, wrap this component in an additional element.
- */
+/** `className` styles the inner padding wrapper, not the Radix Content root, which keeps overflow-hidden and the accordion animations. */
 function AccordionContent({ className, children, ...props }: React.ComponentProps<typeof AccordionPrimitive.Content>) {
   return (
     <AccordionPrimitive.Content

package/src/components/attachment-tile.tsx

@@ -9,7 +9,6 @@ import { TooltipIconButton } from "./tooltip-icon-button";
 interface AttachmentTileProps {
   src?: string;
   isImage?: boolean;
-  /** Accessible label describing the attachment */
   label?: string;
   onRemove?: () => void;
   onClick?: () => void;

package/src/components/bar-chart.tsx

@@ -122,8 +122,7 @@ function BarChart({
     if (texture && lead && entry.key === lead.key) {
       return `url(#bar-hatch-${reactId})`;
     }
-    // Stacked segments read cleanest as flat solids — a per-segment gradient
-    // banding looks like a drop shadow between bands. Grouped bars keep the fade.
+    // Stacked segments stay flat solids — per-segment gradients read as drop shadows between bands; grouped bars keep the fade.
     if (stacked) {
       return entry.color;
     }

package/src/components/bar-list.tsx

@@ -27,8 +27,7 @@ const SEMANTIC_KEY = { error: "destructive", warning: "warning", success: "succe
 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.
+// The lightest semantic bar keeps this much hue (mixed toward white) so a long list never fades to near-invisible.
 const SEMANTIC_FLOOR = 0.62;
 const IN_FILL_SHADOW = "0 1px 2px rgb(0 0 0 / 0.28)";
 

package/src/components/chart-legend.tsx

@@ -3,6 +3,7 @@
 import { cn } from "../lib/cn";
 
 export interface ChartLegendItem {
+  key: string;
   name: string;
   color: string;
   dashed?: boolean;
@@ -12,10 +13,18 @@ export interface ChartLegendProps extends React.HTMLAttributes<HTMLDivElement> {
   items: ChartLegendItem[];
   align?: "left" | "center" | "right";
   insetLeft?: number;
+  hiddenKeys?: ReadonlySet<string>;
+  onItemClick?: (key: string) => void;
 }
 
 const ALIGN_CLASS = { left: "justify-start", center: "justify-center", right: "justify-end" } as const;
 
+const ITEM_CLASS =
+  "inline-flex items-center gap-1.5 font-mono text-[10px] text-muted-foreground uppercase tracking-[0.12em]";
+
+const INTERACTIVE_CLASS =
+  "rounded-sm outline-none transition-opacity focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-card [@media(hover:hover)]:hover:text-foreground";
+
 function Swatch({ color, dashed }: { color: string; dashed?: boolean }) {
   return (
     <span
@@ -26,22 +35,50 @@ function Swatch({ color, dashed }: { color: string; dashed?: boolean }) {
   );
 }
 
-function ChartLegend({ items, align = "left", insetLeft, className, style, ...props }: ChartLegendProps) {
+function ChartLegend({
+  items,
+  align = "left",
+  insetLeft,
+  hiddenKeys,
+  onItemClick,
+  className,
+  style,
+  ...props
+}: ChartLegendProps) {
   return (
     <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}
-          className="inline-flex items-center gap-1.5 font-mono text-[10px] text-muted-foreground uppercase tracking-[0.12em]"
-        >
-          <Swatch color={item.color} dashed={item.dashed} />
-          {item.name}
-        </span>
-      ))}
+      {items.map((item) => {
+        const swatchAndName = (
+          <>
+            <Swatch color={item.color} dashed={item.dashed} />
+            {item.name}
+          </>
+        );
+        if (!onItemClick) {
+          return (
+            <span key={item.key} className={ITEM_CLASS}>
+              {swatchAndName}
+            </span>
+          );
+        }
+        const hidden = hiddenKeys?.has(item.key) ?? false;
+        return (
+          <button
+            key={item.key}
+            type="button"
+            aria-label={`${item.name} series`}
+            aria-pressed={!hidden}
+            onClick={() => onItemClick(item.key)}
+            className={cn(ITEM_CLASS, INTERACTIVE_CLASS, hidden && "opacity-40")}
+          >
+            {swatchAndName}
+          </button>
+        );
+      })}
     </div>
   );
 }

package/src/components/chart-primitives.tsx

@@ -19,13 +19,10 @@ export function makeChartAxis(theme: ChartTheme) {
 }
 
 export function makeLegendItems(resolved: ResolvedSeries[]) {
-  return resolved.map((entry) => ({ name: entry.name, color: entry.color, dashed: entry.dashed }));
+  return resolved.map((entry) => ({ key: entry.key, name: entry.name, color: entry.color, dashed: entry.dashed }));
 }
 
-/**
- * Stacked series must reach the stack height (sum per x-point), not the tallest
- * single series, or reference bands and explicit Y domains clip a tall stack short.
- */
+/** Stacked series must reach the stack height (sum per x-point), or reference bands and explicit Y domains clip a tall stack short. */
 export function computeNumericMax(data: ChartData, series: ChartSeries[], stacked: boolean) {
   let max = 0;
   for (const row of data) {
@@ -114,10 +111,7 @@ export function makeLastValueLabel(
   };
 }
 
-/**
- * Returns recharts elements (not a wrapper component) so recharts still detects
- * them as direct children when spread into a chart via `{renderReferenceLine(...)}`.
- */
+/** Returns recharts elements (not a wrapper component) so recharts still detects them as direct chart children. */
 export function renderReferenceLine({
   referenceLine,
   numericMax,

package/src/components/combobox.tsx

@@ -68,12 +68,10 @@ function Combobox(props: ComboboxProps) {
     getOptionLabel,
   } = props;
 
-  // Single mode state
   const [uncontrolledSingleValue, setUncontrolledSingleValue] = useState<string | null>(
     !multiple ? ((props as ComboboxSingleProps).defaultValue ?? null) : null,
   );
 
-  // Multi mode state
   const [uncontrolledMultiValue, setUncontrolledMultiValue] = useState<string[]>(
     multiple ? ((props as ComboboxMultipleProps).defaultValue ?? []) : [],
   );
@@ -93,7 +91,6 @@ function Combobox(props: ComboboxProps) {
     [isOpenControlled, controlledOnOpenChange],
   );
 
-  // Resolve current values
   const singleValue = multiple
     ? null
     : (((props as ComboboxSingleProps).value !== undefined
@@ -132,7 +129,7 @@ function Combobox(props: ComboboxProps) {
           setUncontrolledMultiValue(next);
         }
         onValueChangeMulti?.(next);
-        // Stay open in multi mode
+        // Intentionally stays open in multi mode so several items can be picked.
       } else {
         if (!isControlledSingle) {
           setUncontrolledSingleValue(itemValue);
@@ -332,7 +329,6 @@ function ComboboxSeparator({ className, ...props }: React.ComponentProps<typeof
 }
 
 interface ComboboxItemProps extends Omit<React.ComponentProps<typeof CommandPrimitive.Item>, "onSelect"> {
-  /** The value stored when this item is selected */
   itemValue: string;
 }
 

package/src/components/dropdown-menu.tsx

@@ -117,8 +117,6 @@ function DropdownMenuLabel({
   );
 }
 
-/* ── Header (avatar group) ────────────────────────────────────────────────── */
-
 function DropdownMenuHeader({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>) {
   return (
     <div

package/src/components/heatmap-chart.tsx

@@ -129,16 +129,13 @@ 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).
+  // "rank" colours each cell by its position among distinct non-zero values, spreading skewed activity counts across the whole ramp (à 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.
+      // Floor non-zero ranks above the empty colour so the quietest active day is never mistaken for no data.
       const RANK_FLOOR = 0.18;
       const fractionByValue = new Map(
         sorted.map((value, index) => [
@@ -189,9 +186,7 @@ function HeatmapChart({
   const formatX = (label: string) => (xTickFormatter ? xTickFormatter(label) : label);
   const formatY = (label: string) => (yTickFormatter ? yTickFormatter(label) : label);
 
-  // The tooltip follows the cursor; rendered through a portal so a transformed/
-  // clipped ancestor (e.g. the card's mount animation + overflow-hidden) can't
-  // shift or trim it. Flip near the viewport edges.
+  // The tooltip renders through a portal so a transformed/clipped ancestor (e.g. the card's mount animation + overflow-hidden) can't shift or trim it.
   const tooltipLeft =
     hovered && hovered.x + TOOLTIP_OFFSET + TOOLTIP_WIDTH > window.innerWidth
       ? hovered.x - TOOLTIP_OFFSET - TOOLTIP_WIDTH
@@ -268,8 +263,7 @@ function HeatmapChart({
               />
             );
           })}
-          {/* Transparent hit layer over the full pitch so every cell — and the gaps
-              between dots — registers hover uniformly. */}
+          {/* Transparent hit layer over the full pitch so cells and the gaps between dots register hover uniformly. */}
           {cells.map((cell) => (
             // biome-ignore lint/a11y/noStaticElementInteractions: decorative hover tooltip; all values are visible on the cells
             <rect

package/src/components/line-chart.tsx

@@ -48,6 +48,8 @@ export interface LineChartProps {
   markers?: ChartMarker[];
   lastValueLabel?: boolean;
   loading?: boolean;
+  hiddenSeries?: ReadonlySet<string>;
+  onLegendItemClick?: (key: string) => void;
   valueFormatter?: (value: number) => string;
   labelFormatter?: (label: string | number) => string;
   className?: string;
@@ -69,6 +71,8 @@ function LineChart({
   markers,
   lastValueLabel = false,
   loading = false,
+  hiddenSeries,
+  onLegendItemClick,
   valueFormatter = (value) => value.toLocaleString("en-US"),
   labelFormatter,
   className,
@@ -76,8 +80,9 @@ function LineChart({
   const { palette: paletteColors, theme } = useChartContext(palette);
 
   const resolved = resolveSeries(series, paletteColors, theme);
+  const visible = resolved.filter((entry) => !hiddenSeries?.has(entry.key));
 
-  const numericMax = React.useMemo(() => computeNumericMax(data, series, false), [data, series]);
+  const numericMax = React.useMemo(() => computeNumericMax(data, visible, false), [data, visible]);
 
   const curveType = CURVE_TYPE[curve];
   const margin = { top: markers?.length ? 18 : 8, right: lastValueLabel ? 56 : 8, bottom: 2, left: 0 };
@@ -129,7 +134,7 @@ function LineChart({
               />
               {renderReferenceLine({ referenceLine, numericMax, theme })}
 
-              {resolved.map((entry) => (
+              {visible.map((entry) => (
                 <Line
                   key={entry.key}
                   type={curveType}
@@ -159,7 +164,15 @@ function LineChart({
         )}
       </div>
 
-      {legend && !isEmpty && <ChartLegend items={legendItems} align={legendAlign} insetLeft={yAxisWidth} />}
+      {legend && !isEmpty && (
+        <ChartLegend
+          items={legendItems}
+          align={legendAlign}
+          insetLeft={yAxisWidth}
+          hiddenKeys={hiddenSeries}
+          onItemClick={onLegendItemClick}
+        />
+      )}
     </div>
   );
 }

package/src/components/select-trigger-variants.ts

@@ -1,10 +1,6 @@
 import { cva } from "class-variance-authority";
 
-/**
- * Shared trigger styles for Select and Combobox.
- * Both components use the same visual treatment for their trigger buttons.
- * Edit here to keep them in sync.
- */
+/** Shared by Select and Combobox so their trigger buttons stay visually in sync. */
 export const selectTriggerVariants = cva(
   [
     "flex w-full items-center gap-2 rounded-md border bg-background text-foreground shadow-xs outline-hidden",

package/src/components/table.tsx

@@ -75,11 +75,7 @@ function TableHead({ className, ...props }: React.ComponentProps<"th">) {
 }
 
 interface TableCellProps extends React.ComponentProps<"td"> {
-  /**
-   * When true, the cell renders edge-to-edge so the child can act as the
-   * interactive surface (e.g. a button or popover trigger filling the cell).
-   * Defaults to false (standard padded cell).
-   */
+  /** Renders the cell edge-to-edge so the child (e.g. a button or popover trigger) can fill it as the interactive surface. */
   interactive?: boolean;
 }
 

package/src/components/tabs.tsx

@@ -1,17 +1,6 @@
 "use client";
 
-/*
- * Two tab families, one visual system:
- *
- * - Tabs / TabsList / TabsTrigger / TabsContent — state-managed.
- *   Use when tab content lives in the same page (e.g. "Code" vs "Preview").
- *
- * - TabsNav / TabsNavList / TabsNavTrigger — semantic <nav>/<ul>/<a>, URL-based.
- *   Use when each tab is a route (e.g. settings pages). Pair with <Link> via asChild.
- *
- * Both share `tabsTriggerVariants` for visual styles (colors, spacing, active state).
- * Layout concerns (flex-1, orientation group selectors) stay component-specific.
- */
+/* Two families sharing `tabsTriggerVariants`: Tabs for in-page state-switched content, TabsNav (semantic <nav>/<ul>/<a>) for URL-routed tabs. */
 
 import { Slot } from "@radix-ui/react-slot";
 import * as TabsPrimitive from "@radix-ui/react-tabs";

package/src/components/task-progress.tsx

@@ -1,15 +1,6 @@
 "use client";
 
-/*
- * TaskProgress — multi-step async progress primitive.
- *
- * Dumb component: the consumer owns orchestration (timer, websocket, polling) and
- * passes `steps` with each step's status. Renders a percentage bar at the top
- * and one row per step with done/running/pending state badges.
- *
- * `trailingLabel` is for "still working on something not in the step list" —
- * shows after the last step as a running row that isn't counted in the percent.
- */
+/* Dumb component: the consumer owns orchestration (timer, websocket, polling) and passes each step's status. */
 
 import { CheckIcon } from "lucide-react";
 
@@ -27,10 +18,7 @@ interface TaskProgressStep {
 interface TaskProgressProps extends Omit<React.ComponentProps<"div">, "children"> {
   steps: readonly TaskProgressStep[];
   trailingLabel?: string;
-  /**
-   * Optional mount-time stagger: each row fades + slides in with `animation-delay = index × stepRevealDelayMs`.
-   * Pure CSS, runs once on mount. Omit for no animation.
-   */
+  /** Mount-time stagger: each row fades in after `index × stepRevealDelayMs`; omit for no animation. */
   stepRevealDelayMs?: number;
 }
 

package/src/components/wizard.tsx

@@ -1,11 +1,5 @@
 "use client";
 
-/*
- * Wizard family — primitives for multi-step flows.
- *
- * - WizardProgress — step counter + progress bar
- */
-
 import type * as React from "react";
 
 import { cn } from "../lib/cn";

package/src/lib/chart-palette.ts

@@ -1,18 +1,4 @@
-/**
- * Chart palettes — the locked "paired system" from the analytics-v2 design.
- *
- * These are charting-API color values (consumed by Recharts at draw time, which
- * cannot read CSS custom properties), so per the design-system rules they live
- * as documented hex constants rather than `--color-*` tokens. They are
- * theme-independent: the same series colors read on light and dark canvases.
- * Only the chrome (grid, axis text, tooltip surface, semantic colors) is
- * theme-aware — see `useChartTheme`.
- *
- * Rules baked in:
- *  - Pink leads (index 0) — never buried, fixing the V1 "pink last" bug.
- *  - Adjacent dashboard cards alternate lead palette (magenta / cyan) — the
- *    page decides which to pass; the component just receives one.
- */
+// Theme-independent hex constants (Recharts can't read CSS custom properties); pink leads at index 0 and adjacent cards alternate magenta/cyan lead palettes.
 
 export const MAGENTA_PALETTE = [
   "#da1b6a",
@@ -46,8 +32,7 @@ export const CHART_PALETTES: Record<ChartPaletteName, readonly string[]> = {
 export const heatRampMagenta = (empty: string) => [empty, "#5b0a31", "#a3034a", "#e90060", "#ff7eb6"];
 export const heatRampMint = (empty: string) => [empty, "#0c4a52", "#17b8cf", "#41ddc9", "#6eece7"];
 
-// Empty heat cell — the only theme-dependent charting value, so it travels as a
-// light/dark pair rather than a `--color-*` token (heatmaps draw to SVG fills).
+// The only theme-dependent charting value; a light/dark pair rather than a `--color-*` token because heatmaps draw to SVG fills.
 export const HEAT_EMPTY = { light: "#eef3f3", dark: "#102222" } as const;
 
 const HEAT_RAMPS: Record<ChartPaletteName, (empty: string) => string[]> = {
@@ -99,11 +84,7 @@ export const rampColor = (palette: ChartPaletteName, fraction: number) => {
   return mixHex(from, to, fraction);
 };
 
-/**
- * Interpolate continuously across a multi-stop heat ramp (e.g. `heatRampMagenta`),
- * so a normalized 0..1 value reads as a smooth single-hue gradient rather than
- * the five discrete bands.
- */
+/** Interpolates continuously across the ramp so a 0..1 value reads as a smooth gradient rather than five discrete bands. */
 export const heatColor = (stops: readonly string[], fraction: number) => {
   const clamped = Math.min(1, Math.max(0, fraction));
   const segment = (stops.length - 1) * clamped;

package/src/lib/chart.ts

@@ -2,10 +2,7 @@ import * as React from "react";
 import type { ChartTheme } from "../hooks/use-chart-theme";
 import { luminance, paletteColor } from "./chart-palette";
 
-/**
- * Declarative description of one plotted series. The same shape drives area,
- * line and bar charts — what differs is how each chart renders it.
- */
+/** One plotted series; the same shape drives area, line and bar charts. */
 export interface ChartSeries {
   key: string;
   name?: string;
@@ -31,11 +28,7 @@ const semanticColor = (theme: ChartTheme, semantic: NonNullable<ChartSeries["sem
   return theme.success;
 };
 
-/**
- * Resolve each series to a concrete color and name. Color precedence:
- * explicit `color` → `semantic` token → palette slot by declared index (so the
- * lead series keeps the lead color even after the bands are reordered).
- */
+/** Palette fallback uses the declared index so the lead series keeps the lead color even after reordering. */
 export const resolveSeries = (
   series: readonly ChartSeries[],
   palette: readonly string[],
@@ -47,12 +40,7 @@ export const resolveSeries = (
     color: entry.color ?? (entry.semantic ? semanticColor(theme, entry.semantic) : paletteColor(palette, index)),
   }));
 
-/**
- * Stacked bands read cleanest as a vertical gradient: darkest at the baseline,
- * lightest at the top edge. Sorting by luminance enforces that for any palette
- * (this is what fixed the "muddy cyan" stack in the lab). Render order maps to
- * stack order in Recharts — first entry sits at the bottom.
- */
+/** Stacked bands read cleanest darkest-at-baseline to lightest-on-top; sorting by luminance enforces that for any palette. */
 export const orderByLuminance = (series: ResolvedSeries[]) =>
   [...series].sort((lower, upper) => luminance(lower.color) - luminance(upper.color));
 

package/src/stories/button.stories.tsx

@@ -2,8 +2,7 @@ import { ArrowRight, Plus, Sparkles } from "lucide-react";
 
 import { Button } from "../components/button";
 
-// Simulated states via className — matches Figma page layout:
-// variants stacked top-to-bottom, states left-to-right.
+// Hover states are simulated via className; layout matches the Figma page (variants top-to-bottom, states left-to-right).
 
 const VARIANT_LABEL = "type-text-xs text-muted-foreground w-20 shrink-0";
 const STATE_HEADER = "type-text-xs text-muted-foreground font-medium w-32 text-center";

package/src/stories/heatmap-chart.stories.tsx

@@ -18,7 +18,6 @@ function mulberry32(seed: number) {
   };
 }
 
-// Long-format activity rows: one record per (day, hour) with a working-hours hump.
 const ACTIVITY = (() => {
   const random = mulberry32(99);
   const rows: Array<{ day: string; hour: string; sessions: number }> = [];

package/src/stories/line-chart.stories.tsx

@@ -1,4 +1,5 @@
 import type { Story } from "@ladle/react";
+import { useState } from "react";
 
 import { ChartCard } from "../components/chart-card";
 import { LineChart } from "../components/line-chart";
@@ -37,7 +38,8 @@ const genLatency = (seed: number) => {
   return Array.from({ length }, (_, index) => {
     p50 = Math.max(120, p50 + (rnd() - 0.48) * 40);
     p95 = Math.max(p50 + 200, p95 + (rnd() - 0.46) * 120);
-    return { t: hourLabel(index, length), p50: Math.round(p50), p95: Math.round(p95 * (index === 19 ? 1.7 : 1)) };
+    const spiked = Math.round(p95 * (index === 19 ? 1.7 : 1));
+    return { t: hourLabel(index, length), p50: Math.round(p50), p95: spiked, p99: Math.round(spiked * 1.6) };
   });
 };
 
@@ -64,83 +66,121 @@ const ms = (value: number) => `${value}ms`;
 const tokensSpark = tokens.map((row) => row.v);
 const latencyPeak = latency.reduce((best, row) => (row.p95 > best.p95 ? row : best));
 
-export const AllVariants: Story = () => (
-  <div className="mx-auto max-w-[1600px] p-8">
-    <div className="grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-3">
-      <ChartCard
-        palette="cyan"
-        accent="left"
-        kicker="Last 24h"
-        title="Sessions"
-        description="Full-width · left accent"
-        className="md:col-span-2 xl:col-span-3"
-      >
-        <LineChart
-          data={compare}
-          index="t"
-          series={[
-            { key: "claude", name: "Claude" },
-            { key: "chatgpt", name: "ChatGPT" },
-          ]}
-          lastValueLabel
-          legend
-          valueFormatter={nf}
-        />
-      </ChartCard>
-
-      <ChartCard palette="magenta" kicker="Last 24h" title="Output tokens" description="Single series · value flags">
-        <Stat value="1.4M" unit="tokens" delta={{ value: 8.1, direction: "up" }} sparkline={tokensSpark} />
-        <LineChart data={tokens} index="t" series={[{ key: "v", name: "tokens" }]} valueFlags valueFormatter={fmtK} />
-      </ChartCard>
-
-      <ChartCard palette="magenta" kicker="Last 24h" title="Request latency" description="p50 vs p95 · SLA band + peak">
-        <Stat value="240ms" unit="p50 · current" delta={{ value: 4.2, direction: "down", invert: true }} />
-        <LineChart
-          data={latency}
-          index="t"
-          series={[
-            { key: "p50", name: "p50" },
-            { key: "p95", name: "p95", dashed: true, color: "#9b5de5" },
-          ]}
-          referenceLine={{ y: 1000, label: "SLA 1s", band: true }}
-          markers={[{ x: latencyPeak.t, y: latencyPeak.p95, label: "peak", color: "#9b5de5" }]}
-          legend
-          valueFormatter={ms}
-        />
-      </ChartCard>
-
-      <ChartCard palette="cyan" kicker="Last 24h" title="Sessions" description="Claude vs ChatGPT · last values">
-        <LineChart
-          data={compare}
-          index="t"
-          series={[
-            { key: "claude", name: "Claude" },
-            { key: "chatgpt", name: "ChatGPT" },
-          ]}
-          lastValueLabel
-          legend
-          valueFormatter={nf}
-        />
-      </ChartCard>
-
-      <ChartCard palette="cyan" kicker="Last 24h" title="Throughput" description="Dots · stepped curve">
-        <LineChart
-          data={tokens}
-          index="t"
-          series={[{ key: "v", name: "tokens" }]}
-          curve="step"
-          dots
-          valueFormatter={fmtK}
-        />
-      </ChartCard>
-
-      <ChartCard palette="magenta" kicker="State" title="Loading" description="Mono spinner placeholder">
-        <LineChart data={[]} index="t" series={[{ key: "v", name: "tokens" }]} loading />
-      </ChartCard>
-
-      <ChartCard palette="magenta" kicker="State" title="Empty" description="No data in range">
-        <LineChart data={[]} index="t" series={[{ key: "v", name: "tokens" }]} />
-      </ChartCard>
+const percentileSeries = [
+  { key: "p95", name: "p95" },
+  { key: "p50", name: "p50" },
+  { key: "p99", name: "p99", dashed: true },
+];
+
+export const AllVariants: Story = () => {
+  const [isolated, setIsolated] = useState<string | null>(null);
+  const hiddenPercentiles = new Set(
+    isolated == null ? [] : percentileSeries.map((entry) => entry.key).filter((key) => key !== isolated),
+  );
+
+  return (
+    <div className="mx-auto max-w-[1600px] p-8">
+      <div className="grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-3">
+        <ChartCard
+          palette="cyan"
+          accent="left"
+          kicker="Last 24h"
+          title="Sessions"
+          description="Full-width · left accent"
+          className="md:col-span-2 xl:col-span-3"
+        >
+          <LineChart
+            data={compare}
+            index="t"
+            series={[
+              { key: "claude", name: "Claude" },
+              { key: "chatgpt", name: "ChatGPT" },
+            ]}
+            lastValueLabel
+            legend
+            valueFormatter={nf}
+          />
+        </ChartCard>
+
+        <ChartCard palette="magenta" kicker="Last 24h" title="Output tokens" description="Single series · value flags">
+          <Stat value="1.4M" unit="tokens" delta={{ value: 8.1, direction: "up" }} sparkline={tokensSpark} />
+          <LineChart data={tokens} index="t" series={[{ key: "v", name: "tokens" }]} valueFlags valueFormatter={fmtK} />
+        </ChartCard>
+
+        <ChartCard
+          palette="magenta"
+          kicker="Last 24h"
+          title="Request latency"
+          description="p50 vs p95 · SLA band + peak"
+        >
+          <Stat value="240ms" unit="p50 · current" delta={{ value: 4.2, direction: "down", invert: true }} />
+          <LineChart
+            data={latency}
+            index="t"
+            series={[
+              { key: "p50", name: "p50" },
+              { key: "p95", name: "p95", dashed: true, color: "#9b5de5" },
+            ]}
+            referenceLine={{ y: 1000, label: "SLA 1s", band: true }}
+            markers={[{ x: latencyPeak.t, y: latencyPeak.p95, label: "peak", color: "#9b5de5" }]}
+            legend
+            valueFormatter={ms}
+          />
+        </ChartCard>
+
+        <ChartCard
+          palette="magenta"
+          kicker="Last 24h"
+          title="Percentiles"
+          description="Interactive legend · click to isolate"
+        >
+          <LineChart
+            data={latency}
+            index="t"
+            series={percentileSeries}
+            dots
+            legend
+            legendAlign="center"
+            lastValueLabel
+            hiddenSeries={hiddenPercentiles}
+            onLegendItemClick={(key) => setIsolated((current) => (current === key ? null : key))}
+            valueFormatter={ms}
+          />
+        </ChartCard>
+
+        <ChartCard palette="cyan" kicker="Last 24h" title="Sessions" description="Claude vs ChatGPT · last values">
+          <LineChart
+            data={compare}
+            index="t"
+            series={[
+              { key: "claude", name: "Claude" },
+              { key: "chatgpt", name: "ChatGPT" },
+            ]}
+            lastValueLabel
+            legend
+            valueFormatter={nf}
+          />
+        </ChartCard>
+
+        <ChartCard palette="cyan" kicker="Last 24h" title="Throughput" description="Dots · stepped curve">
+          <LineChart
+            data={tokens}
+            index="t"
+            series={[{ key: "v", name: "tokens" }]}
+            curve="step"
+            dots
+            valueFormatter={fmtK}
+          />
+        </ChartCard>
+
+        <ChartCard palette="magenta" kicker="State" title="Loading" description="Mono spinner placeholder">
+          <LineChart data={[]} index="t" series={[{ key: "v", name: "tokens" }]} loading />
+        </ChartCard>
+
+        <ChartCard palette="magenta" kicker="State" title="Empty" description="No data in range">
+          <LineChart data={[]} index="t" series={[{ key: "v", name: "tokens" }]} />
+        </ChartCard>
+      </div>
     </div>
-  </div>
-);
+  );
+};

package/src/stories/sidebar.stories.tsx

@@ -23,10 +23,7 @@ import {
   SidebarTrigger,
 } from "../components/sidebar";
 
-/**
- * Wraps stories so `fixed` inside SidebarProvider becomes `absolute`
- * relative to this container (via `transform: scale(1)` trick).
- */
+/** `transform: scale(1)` makes the SidebarProvider's `fixed` elements position relative to this frame. */
 function StoryFrame({ children, height = 600 }: { children: ReactNode; height?: number }) {
   return (
     <div

package/src/stories/wizard.stories.tsx

@@ -14,7 +14,6 @@ const steps = [
   { id: "review", label: "Review & export" },
 ];
 
-/** The step rail is a vertical `TabsNav` composed with the consumer's selection state. */
 function StepRail({ activeIdx, onSelect }: { activeIdx: number; onSelect: (idx: number) => void }) {
   return (
     <TabsNav orientation="vertical" aria-label="Submission steps">