@alpic-ai/ui 1.160.0 → 1.162.0

package/src/components/combobox.tsx

@@ -10,8 +10,6 @@ import { Popover, PopoverContent, PopoverTrigger } from "./popover";
 import { selectTriggerVariants } from "./select-trigger-variants";
 import { TagDismissible } from "./tag";
 
-/* ── Context ──────────────────────────────────────────────────────────────── */
-
 interface ComboboxContextValue {
   multiple: boolean;
   value: string | null;
@@ -35,8 +33,6 @@ function useComboboxContext() {
   return context;
 }
 
-/* ── Root ─────────────────────────────────────────────────────────────────── */
-
 interface ComboboxBaseProps {
   children: ReactNode;
   open?: boolean;
@@ -72,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 ?? []) : [],
   );
@@ -97,7 +91,6 @@ function Combobox(props: ComboboxProps) {
     [isOpenControlled, controlledOnOpenChange],
   );
 
-  // Resolve current values
   const singleValue = multiple
     ? null
     : (((props as ComboboxSingleProps).value !== undefined
@@ -136,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);
@@ -194,8 +187,6 @@ function Combobox(props: ComboboxProps) {
   );
 }
 
-/* ── Trigger ──────────────────────────────────────────────────────────────── */
-
 interface ComboboxTriggerProps
   extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "size">,
     VariantProps<typeof selectTriggerVariants> {
@@ -232,8 +223,6 @@ function ComboboxTrigger({ className, size, placeholder, children, ...props }: C
   );
 }
 
-/* ── Tags (internal, for multi-select trigger) ────────────────────────────── */
-
 function ComboboxTags({ values, onDeselect }: { values: string[]; onDeselect: (value: string) => void }) {
   const { getOptionLabel } = useComboboxContext();
   return (
@@ -251,8 +240,6 @@ function ComboboxTags({ values, onDeselect }: { values: string[]; onDeselect: (v
   );
 }
 
-/* ── Content ──────────────────────────────────────────────────────────────── */
-
 interface ComboboxContentProps extends React.ComponentProps<typeof PopoverContent> {
   className?: string;
   children?: ReactNode;
@@ -280,8 +267,6 @@ function ComboboxContent({ className, children, filter, ...props }: ComboboxCont
   );
 }
 
-/* ── Search ───────────────────────────────────────────────────────────────── */
-
 function ComboboxSearch({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Input>) {
   return (
     <div data-slot="combobox-search" className="flex items-center gap-2 border-b border-border-secondary px-3 py-2.5">
@@ -300,8 +285,6 @@ function ComboboxSearch({ className, ...props }: React.ComponentProps<typeof Com
   );
 }
 
-/* ── List ─────────────────────────────────────────────────────────────────── */
-
 function ComboboxList({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.List>) {
   return (
     <CommandPrimitive.List
@@ -312,8 +295,6 @@ function ComboboxList({ className, ...props }: React.ComponentProps<typeof Comma
   );
 }
 
-/* ── Empty ────────────────────────────────────────────────────────────────── */
-
 function ComboboxEmpty({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Empty>) {
   return (
     <CommandPrimitive.Empty
@@ -324,8 +305,6 @@ function ComboboxEmpty({ className, ...props }: React.ComponentProps<typeof Comm
   );
 }
 
-/* ── Group ────────────────────────────────────────────────────────────────── */
-
 function ComboboxGroup({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Group>) {
   return (
     <CommandPrimitive.Group
@@ -339,8 +318,6 @@ function ComboboxGroup({ className, ...props }: React.ComponentProps<typeof Comm
   );
 }
 
-/* ── Separator ────────────────────────────────────────────────────────────── */
-
 function ComboboxSeparator({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Separator>) {
   return (
     <CommandPrimitive.Separator
@@ -351,10 +328,7 @@ function ComboboxSeparator({ className, ...props }: React.ComponentProps<typeof
   );
 }
 
-/* ── Item ─────────────────────────────────────────────────────────────────── */
-
 interface ComboboxItemProps extends Omit<React.ComponentProps<typeof CommandPrimitive.Item>, "onSelect"> {
-  /** The value stored when this item is selected */
   itemValue: string;
 }
 
@@ -384,8 +358,6 @@ function ComboboxItem({ className, children, itemValue, ...props }: ComboboxItem
   );
 }
 
-/* ── Item supporting text ─────────────────────────────────────────────────── */
-
 function ComboboxItemText({ className, children, ...props }: React.HTMLAttributes<HTMLSpanElement>) {
   return (
     <span

package/src/components/dropdown-menu.tsx

@@ -51,8 +51,6 @@ function DropdownMenuGroup({ ...props }: React.ComponentProps<typeof DropdownMen
   return <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />;
 }
 
-/* ── Item ─────────────────────────────────────────────────────────────────── */
-
 const dropdownMenuItemVariants = cva(
   [
     "relative flex cursor-default items-center gap-2 rounded-sm px-2.5 py-2 outline-hidden select-none",
@@ -103,8 +101,6 @@ function DropdownMenuItem({
   );
 }
 
-/* ── Label ────────────────────────────────────────────────────────────────── */
-
 function DropdownMenuLabel({
   className,
   inset,
@@ -121,8 +117,6 @@ function DropdownMenuLabel({
   );
 }
 
-/* ── Header (avatar group) ────────────────────────────────────────────────── */
-
 function DropdownMenuHeader({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>) {
   return (
     <div
@@ -135,8 +129,6 @@ function DropdownMenuHeader({ className, children, ...props }: React.HTMLAttribu
   );
 }
 
-/* ── Separator ────────────────────────────────────────────────────────────── */
-
 function DropdownMenuSeparator({ className, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
   return (
     <DropdownMenuPrimitive.Separator
@@ -147,8 +139,6 @@ function DropdownMenuSeparator({ className, ...props }: React.ComponentProps<typ
   );
 }
 
-/* ── Shortcut ─────────────────────────────────────────────────────────────── */
-
 function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<"span">) {
   return (
     <span
@@ -162,8 +152,6 @@ function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<"spa
   );
 }
 
-/* ── Sub menu ─────────────────────────────────────────────────────────────── */
-
 function DropdownMenuSub({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
   return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />;
 }

package/src/components/form.tsx

@@ -166,8 +166,6 @@ function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
   );
 }
 
-/* ── Layout components ───────────────────────────────────────────────────── */
-
 interface FormHeaderProps extends React.ComponentProps<"div"> {
   title: string;
   description?: string;
@@ -186,8 +184,6 @@ function FormFields({ className, ...props }: React.ComponentProps<"div">) {
   return <div className={cn("flex flex-col gap-6", className)} {...props} />;
 }
 
-/* ── Convenience field wrappers ─────────────────────────────────────────── */
-
 interface FormFieldBaseProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> {
   control: ControllerProps<TFieldValues, TName>["control"];
   name: TName;

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/select.tsx

@@ -20,8 +20,6 @@ function SelectValue({ ...props }: React.ComponentProps<typeof SelectPrimitive.V
   return <SelectPrimitive.Value data-slot="select-value" {...props} />;
 }
 
-/* ── Trigger ──────────────────────────────────────────────────────────────── */
-
 function SelectTrigger({
   className,
   size = "md",
@@ -47,8 +45,6 @@ function SelectTrigger({
   );
 }
 
-/* ── Content ──────────────────────────────────────────────────────────────── */
-
 function SelectContent({
   className,
   children,
@@ -89,8 +85,6 @@ function SelectContent({
   );
 }
 
-/* ── Label ────────────────────────────────────────────────────────────────── */
-
 function SelectLabel({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Label>) {
   return (
     <SelectPrimitive.Label
@@ -101,8 +95,6 @@ function SelectLabel({ className, ...props }: React.ComponentProps<typeof Select
   );
 }
 
-/* ── Item ─────────────────────────────────────────────────────────────────── */
-
 function SelectItem({ className, children, ...props }: React.ComponentProps<typeof SelectPrimitive.Item>) {
   return (
     <SelectPrimitive.Item
@@ -128,8 +120,6 @@ function SelectItem({ className, children, ...props }: React.ComponentProps<type
   );
 }
 
-/* ── Separator ────────────────────────────────────────────────────────────── */
-
 function SelectSeparator({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Separator>) {
   return (
     <SelectPrimitive.Separator

package/src/components/sidebar.tsx

@@ -88,7 +88,6 @@ function SidebarProvider({
     [setOpenProp, open],
   );
 
-  // Helper to toggle the sidebar.
   const toggleSidebar = React.useCallback(() => {
     return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);
   }, [isMobile, setOpen]);
@@ -240,7 +239,6 @@ function Sidebar({
           side === "left"
             ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
             : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
-          // Adjust the padding for floating and inset variants.
           variant === "floating" || variant === "inset"
             ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
             : "border-sidebar-border group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",

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";
@@ -21,8 +10,6 @@ import { createContext, use } from "react";
 
 import { cn } from "../lib/cn";
 
-/* ─── Shared trigger styles ──────────────────────────────────────────────── */
-
 const tabsTriggerVariants = cva(
   [
     "type-text-sm items-center gap-1.5 font-medium",
@@ -57,8 +44,6 @@ const tabsTriggerVariants = cva(
   },
 );
 
-/* ─── Tabs (state-based, in-page content switching) ────────────────── */
-
 function Tabs({ className, orientation = "horizontal", ...props }: React.ComponentProps<typeof TabsPrimitive.Root>) {
   return (
     <TabsPrimitive.Root
@@ -134,8 +119,6 @@ function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPr
   return <TabsPrimitive.Content data-slot="tabs-content" className={cn("flex-1 outline-none", className)} {...props} />;
 }
 
-/* ─── Navigation tabs (semantic <nav>/<ul>/<a>, for URL-based routing) ──── */
-
 type TabsNavVariant = "line" | "pill";
 type TabsNavOrientation = "horizontal" | "vertical";
 

package/src/components/tag.tsx

@@ -9,8 +9,6 @@ interface TagBaseProps {
   icon?: React.ReactNode;
 }
 
-/* ── Tag (text only) ──────────────────────────────────────────── */
-
 interface TagProps extends React.ComponentProps<"span">, TagBaseProps {}
 
 function Tag({ className, icon, children, ...props }: TagProps) {
@@ -22,8 +20,6 @@ function Tag({ className, icon, children, ...props }: TagProps) {
   );
 }
 
-/* ── TagDismissible (with × button) ───────────────────────────── */
-
 interface TagDismissibleProps extends React.ComponentProps<"span">, TagBaseProps {
   onDismiss?: () => void;
 }
@@ -61,8 +57,6 @@ function TagDismissible({ className, icon, children, onDismiss, ...props }: TagD
   );
 }
 
-/* ── TagCount (with count badge) ──────────────────────────────── */
-
 interface TagCountProps extends React.ComponentProps<"span">, TagBaseProps {
   count: number;
 }

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));