@alpic-ai/ui 1.160.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

@@ -1,14 +1,9 @@
 //#region src/components/attachment-tile.d.ts
 interface AttachmentTileProps {
-  /** Source URL for the attachment thumbnail */
   src?: string;
-  /** Whether the attachment is an image */
   isImage?: boolean;
-  /** Accessible label describing the attachment */
   label?: string;
-  /** Called when the remove button is clicked */
   onRemove?: () => void;
-  /** Called when the tile is clicked (e.g. to open a preview) */
   onClick?: () => void;
   className?: string;
 }

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.160.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

@@ -7,15 +7,10 @@ import { cn } from "../lib/cn";
 import { TooltipIconButton } from "./tooltip-icon-button";
 
 interface AttachmentTileProps {
-  /** Source URL for the attachment thumbnail */
   src?: string;
-  /** Whether the attachment is an image */
   isImage?: boolean;
-  /** Accessible label describing the attachment */
   label?: string;
-  /** Called when the remove button is clicked */
   onRemove?: () => void;
-  /** Called when the tile is clicked (e.g. to open a preview) */
   onClick?: () => void;
   className?: string;
 }

package/src/components/avatar.tsx

@@ -84,8 +84,6 @@ function AvatarFallback({ className, ...props }: React.ComponentProps<typeof Ava
   );
 }
 
-// ─── AvatarLabelGroup ─────────────────────────────────────────────────────────
-
 interface AvatarLabelGroupProps extends React.ComponentProps<"div"> {
   size?: "sm" | "md";
   src?: string;

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,