@iloveagents/foundry-web-ui 0.23.0 → 0.24.0

package/dist/chart.d.ts

@@ -7,7 +7,7 @@
  * `@iloveagents/foundry-agent/msal`); import from the subpath.
  */
 export { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent, useChart, compactAxisTick, type ChartContainerProps, type ChartTooltipContentProps, type ChartLegendContentProps, } from "./components/chart/chart.js";
-export { chartSlotColor, chartStyleVars, foldCategoryTail, formatBucketLabel, formatCompactNumber, seriesColor, seriesLabel, seriesVar, seriesVarName, CHART_SLOT_COUNT, type ChartConfig, type ChartSeriesConfig, } from "./components/chart/chart-config.js";
+export { FOLD_COLOR, OTHER_LABEL, categoryColorResolver, chartSlotColor, chartStyleVars, foldCategoryTail, formatBucketLabel, formatCompactNumber, seriesColor, seriesLabel, seriesVar, seriesVarName, CHART_SLOT_COUNT, type ChartConfig, type ChartSeriesConfig, } from "./components/chart/chart-config.js";
 export { StatCard, type StatCardProps } from "./components/chart/stat-card.js";
 export { ChartCard, DashboardGrid, DashboardTile, type ChartCardProps, type DashboardGridProps, type DashboardTileProps, } from "./components/chart/chart-card.js";
 export { TimeSeriesChart, type TimeSeriesChartProps, } from "./components/chart/time-series-chart.js";

package/dist/chart.js

@@ -7,7 +7,7 @@
  * `@iloveagents/foundry-agent/msal`); import from the subpath.
  */
 export { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent, useChart, compactAxisTick, } from "./components/chart/chart.js";
-export { chartSlotColor, chartStyleVars, foldCategoryTail, formatBucketLabel, formatCompactNumber, seriesColor, seriesLabel, seriesVar, seriesVarName, CHART_SLOT_COUNT, } from "./components/chart/chart-config.js";
+export { FOLD_COLOR, OTHER_LABEL, categoryColorResolver, chartSlotColor, chartStyleVars, foldCategoryTail, formatBucketLabel, formatCompactNumber, seriesColor, seriesLabel, seriesVar, seriesVarName, CHART_SLOT_COUNT, } from "./components/chart/chart-config.js";
 export { StatCard } from "./components/chart/stat-card.js";
 export { ChartCard, DashboardGrid, DashboardTile, } from "./components/chart/chart-card.js";
 export { TimeSeriesChart, } from "./components/chart/time-series-chart.js";

package/dist/components/chart/category-bar-chart.js

@@ -2,42 +2,30 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import * as React from "react";
 import * as RechartsPrimitive from "recharts";
 import { ChartContainer, ChartTooltip, ChartTooltipContent, compactAxisTick } from "./chart.js";
-import { CHART_SLOT_COUNT, chartSlotColor, foldCategoryTail, seriesColor, } from "./chart-config.js";
-export function CategoryBarChart({ data, categoryKey, valueKey, config = {}, horizontal = true, maxBars, colorByCategory = false, height, width, valueFormatter, categoryFormatter, className, }) {
+import { CHART_SLOT_COUNT, categoryColorResolver, foldCategoryTail, seriesColor, } from "./chart-config.js";
+const EMPTY_CONFIG = {};
+export function CategoryBarChart({ data, categoryKey, valueKey, config = EMPTY_CONFIG, horizontal = true, maxBars, colorByCategory = false, height, width, valueFormatter, categoryFormatter, className, }) {
     // Identity coloring caps at the palette (5 + Other); a single-hue ranked
     // list caps at what stays readable. Both fold rather than overflow.
-    const effectiveMax = maxBars ?? (colorByCategory ? CHART_SLOT_COUNT : 12);
+    const barDefault = colorByCategory ? CHART_SLOT_COUNT : 12;
+    // A non-finite cap keeps THIS chart's default, not the palette-wide one.
+    const effectiveMax = Number.isFinite(maxBars) ? maxBars : barDefault;
     const rows = React.useMemo(() => {
         // This is a RANKED breakdown by contract, and the fold keeps the head —
         // rank first so an unsorted input never folds its biggest categories.
         const ranked = [...data].sort((a, b) => (Number(b[valueKey]) || 0) - (Number(a[valueKey]) || 0));
         return foldCategoryTail(ranked, { categoryKey, valueKey, max: effectiveMax });
     }, [data, categoryKey, valueKey, effectiveMax]);
-    // Identity follows the category's position in the ORIGINAL data (or its
-    // explicit config color) — filtering/sorting must not repaint survivors.
-    const categoryColor = React.useCallback((category) => {
-        const explicit = config[category]?.color;
-        if (explicit)
-            return explicit;
-        // Declared identity first: a category's position in the CONFIG is
-        // immune to the caller filtering the data. Data order is only the
-        // fallback for undeclared categories.
-        // The measure's own entry (labels/colors for the value column) is
-        // not a category — it must not shift the identity order.
-        const configIndex = Object.keys(config)
-            .filter((key) => key !== valueKey)
-            .indexOf(category);
-        if (configIndex !== -1)
-            return chartSlotColor(configIndex);
-        const declared = data.findIndex((row) => String(row[categoryKey]) === category);
-        return chartSlotColor(declared === -1 ? CHART_SLOT_COUNT - 1 : declared);
-    }, [config, data, categoryKey]);
+    // Identity resolved from the ORIGINAL categories, with the measure's own
+    // config entry excluded — it labels the value column, it is not a
+    // category and must not shift the order.
+    const categoryColor = React.useMemo(() => categoryColorResolver(config, rows.map((row) => String(row[categoryKey] ?? "")), { exclude: valueKey }), [config, rows, categoryKey, valueKey]);
     const fixed = width !== undefined;
     const resolvedHeight = height ?? (horizontal ? Math.max(160, rows.length * 36 + 24) : 240);
     const formatCategory = categoryFormatter ?? ((v) => String(v ?? ""));
     return (_jsx(ChartContainer, { config: config, responsive: !fixed, className: className, style: fixed ? undefined : { height: resolvedHeight, aspectRatio: "auto" }, children: _jsxs(RechartsPrimitive.BarChart, { data: rows, layout: horizontal ? "vertical" : "horizontal", width: width, height: fixed ? resolvedHeight : undefined, margin: { top: 4, right: 12, bottom: 0, left: 0 }, children: [horizontal ? (_jsxs(_Fragment, { children: [_jsx(RechartsPrimitive.XAxis, { type: "number", tickLine: false, axisLine: false, tickFormatter: compactAxisTick }), _jsx(RechartsPrimitive.YAxis, { type: "category", dataKey: categoryKey, width: 140, tickLine: false, axisLine: false, tickFormatter: formatCategory })] })) : (_jsxs(_Fragment, { children: [_jsx(RechartsPrimitive.CartesianGrid, { vertical: false, strokeDasharray: "3 3" }), _jsx(RechartsPrimitive.XAxis, { dataKey: categoryKey, tickLine: false, axisLine: false, tickMargin: 8, tickFormatter: formatCategory }), _jsx(RechartsPrimitive.YAxis, { width: 48, tickLine: false, axisLine: false, tickFormatter: compactAxisTick })] })), _jsx(ChartTooltip, { content: _jsx(ChartTooltipContent, { labelFormatter: (label) => formatCategory(label), valueFormatter: valueFormatter, indicatorColor: colorByCategory ? (_key, label) => categoryColor(String(label)) : undefined }) }), _jsx(RechartsPrimitive.Bar, { dataKey: valueKey, fill: seriesColor(config, valueKey), maxBarSize: 28, radius: horizontal ? [0, 4, 4, 0] : [4, 4, 0, 0], isAnimationActive: false, children: colorByCategory &&
                         rows.map((row, i) => {
                             const category = String(row[categoryKey] ?? i);
-                            return _jsx(RechartsPrimitive.Cell, { fill: categoryColor(category) }, category);
+                            return (_jsx(RechartsPrimitive.Cell, { fill: categoryColor(category) }, `${i}-${category}`));
                         }) })] }) }));
 }

package/dist/components/chart/chart-config.d.ts

@@ -37,6 +37,37 @@ export declare const CHART_SLOT_COUNT = 5;
 export declare function chartSlotColor(index: number): string;
 /** Resolved color for a series: explicit config first, theme slot second. */
 export declare function seriesColor(config: ChartConfig, key: string): string;
+/** The label a folded tail wears, and the muted color that marks it. */
+export declare const OTHER_LABEL = "Other";
+export declare const FOLD_COLOR = "var(--muted-foreground)";
+/**
+ * The color resolver for a CATEGORICAL chart, where every category is an
+ * identity rather than a series.
+ *
+ * Two requirements pull against each other, and both are real:
+ *   - a DECLARED category must keep its color when a filter removes its
+ *     neighbours (identity follows the entity, never its rank), and
+ *   - a DRAWN category must never take the muted past-the-palette color
+ *     just because the config also names categories this chart does not
+ *     draw.
+ *
+ * Resolved by giving each side its own claim on the palette. A declared
+ * key OWNS its declared index — reserved whether or not it is drawn, which
+ * is what makes it stable — and undeclared drawn categories fill the slots
+ * no declaration claimed, in drawn order. Past the palette, or with every
+ * slot spoken for, a category takes the muted fold color rather than
+ * wrapping modulo five onto a color another category already owns.
+ *
+ * So: declare the categories whose colors must not move, and the rest sort
+ * themselves out.
+ *
+ * `exclude` drops the measure's own config entry (a bar chart labels its
+ * value column there); it is not a category and must not shift the order.
+ */
+export declare function categoryColorResolver(config: ChartConfig, categories: Iterable<string>, options?: {
+    exclude?: string;
+    otherLabel?: string;
+}): (category: string) => string;
 /** Resolved label for a series: explicit config first, the key itself second. */
 export declare function seriesLabel(config: ChartConfig, key: string): React.ReactNode;
 /**
@@ -46,8 +77,14 @@ export declare function seriesLabel(config: ChartConfig, key: string): React.Rea
  * two sides can never disagree.
  */
 export declare function seriesVarName(key: string): string;
-/** The `var(--color-<key>)` reference marks use for their series color. */
-export declare function seriesVar(key: string): string;
+/**
+ * The `var()` reference marks use for their series color.
+ *
+ * A key with no configured series resolves to an UNDEFINED custom property,
+ * which makes `fill` fall back to black and `stroke` to none — a silent
+ * black band. The fallback keeps an undeclared series visible.
+ */
+export declare function seriesVar(key: string, fallback?: string): string;
 /**
  * The per-series CSS custom properties a `ChartContainer` injects, so chart
  * marks can reference {@link seriesVar} and pick up theme changes live.
@@ -63,9 +100,16 @@ export declare function formatCompactNumber(value: number): string;
  */
 export declare function formatBucketLabel(bucket: unknown): string;
 /**
- * Fold a sorted category list's tail into a single "Other" row once it
- * exceeds `max` rows — the discipline for categorical charts: a 9th slice
- * is never a 9th color.
+ * Fold a category list's tail into a single "Other" row once it exceeds
+ * `max` rows — the discipline for categorical charts: a 9th slice is never
+ * a 9th color.
+ *
+ * Ranks by value FIRST. The fold keeps the head, so on an unranked list it
+ * would swallow whatever happened to be sorted late — a donut of six
+ * equal-ish categories plus one dominant one at the end rendered as four
+ * slivers and an unlabeled 96% "Other". Ranking here rather than trusting
+ * callers makes that unreachable, including for charts a builder agent
+ * writes.
  */
 export declare function foldCategoryTail<T extends Record<string, unknown>>(rows: T[], options: {
     categoryKey: keyof T & string;

package/dist/components/chart/chart-config.js

@@ -18,6 +18,64 @@ export function seriesColor(config, key) {
     const declaredIndex = Object.keys(config).indexOf(key);
     return chartSlotColor(declaredIndex === -1 ? 0 : declaredIndex);
 }
+/** The label a folded tail wears, and the muted color that marks it. */
+export const OTHER_LABEL = "Other";
+export const FOLD_COLOR = "var(--muted-foreground)";
+/**
+ * The color resolver for a CATEGORICAL chart, where every category is an
+ * identity rather than a series.
+ *
+ * Two requirements pull against each other, and both are real:
+ *   - a DECLARED category must keep its color when a filter removes its
+ *     neighbours (identity follows the entity, never its rank), and
+ *   - a DRAWN category must never take the muted past-the-palette color
+ *     just because the config also names categories this chart does not
+ *     draw.
+ *
+ * Resolved by giving each side its own claim on the palette. A declared
+ * key OWNS its declared index — reserved whether or not it is drawn, which
+ * is what makes it stable — and undeclared drawn categories fill the slots
+ * no declaration claimed, in drawn order. Past the palette, or with every
+ * slot spoken for, a category takes the muted fold color rather than
+ * wrapping modulo five onto a color another category already owns.
+ *
+ * So: declare the categories whose colors must not move, and the rest sort
+ * themselves out.
+ *
+ * `exclude` drops the measure's own config entry (a bar chart labels its
+ * value column there); it is not a category and must not shift the order.
+ */
+export function categoryColorResolver(config, categories, options = {}) {
+    const { exclude, otherLabel = OTHER_LABEL } = options;
+    const declared = Object.keys(config).filter((key) => key !== exclude && key !== otherLabel);
+    const slotOf = new Map();
+    declared.forEach((key, i) => slotOf.set(key, i));
+    // Whatever the declarations did not claim is free for the rest.
+    const claimed = new Set(slotOf.values());
+    const free = [];
+    for (let slot = 0; slot < CHART_SLOT_COUNT; slot++) {
+        if (!claimed.has(slot))
+            free.push(slot);
+    }
+    let next = 0;
+    for (const category of categories) {
+        if (category === otherLabel || slotOf.has(category))
+            continue;
+        const slot = free[next++];
+        slotOf.set(category, slot === undefined ? CHART_SLOT_COUNT : slot);
+    }
+    return (category) => {
+        const explicit = config[category]?.color;
+        if (explicit)
+            return explicit;
+        if (category === otherLabel)
+            return FOLD_COLOR;
+        const slot = slotOf.get(category);
+        if (slot === undefined || slot >= CHART_SLOT_COUNT)
+            return FOLD_COLOR;
+        return chartSlotColor(slot);
+    };
+}
 /** Resolved label for a series: explicit config first, the key itself second. */
 export function seriesLabel(config, key) {
     return config[key]?.label ?? key;
@@ -31,18 +89,24 @@ export function seriesLabel(config, key) {
 export function seriesVarName(key) {
     const safe = key.replace(/[^a-zA-Z0-9_-]/g, "-");
     if (safe === key)
-        return `--color-${key}`;
+        return `--chart-color-${key}`;
     // Two keys may sanitize to the same ident ("metrics.tokens" vs
     // "metrics tokens") — a short stable hash of the RAW key keeps them
     // apart without leaking invalid characters.
     let hash = 5381;
     for (let i = 0; i < key.length; i++)
         hash = ((hash << 5) + hash + key.charCodeAt(i)) | 0;
-    return `--color-${safe}-${(hash >>> 0).toString(36)}`;
+    return `--chart-color-${safe}-${(hash >>> 0).toString(36)}`;
 }
-/** The `var(--color-<key>)` reference marks use for their series color. */
-export function seriesVar(key) {
-    return `var(${seriesVarName(key)})`;
+/**
+ * The `var()` reference marks use for their series color.
+ *
+ * A key with no configured series resolves to an UNDEFINED custom property,
+ * which makes `fill` fall back to black and `stroke` to none — a silent
+ * black band. The fallback keeps an undeclared series visible.
+ */
+export function seriesVar(key, fallback = chartSlotColor(0)) {
+    return `var(${seriesVarName(key)}, ${fallback})`;
 }
 /**
  * The per-series CSS custom properties a `ChartContainer` injects, so chart
@@ -88,27 +152,36 @@ export function formatBucketLabel(bucket) {
     return bucket;
 }
 /**
- * Fold a sorted category list's tail into a single "Other" row once it
- * exceeds `max` rows — the discipline for categorical charts: a 9th slice
- * is never a 9th color.
+ * Fold a category list's tail into a single "Other" row once it exceeds
+ * `max` rows — the discipline for categorical charts: a 9th slice is never
+ * a 9th color.
+ *
+ * Ranks by value FIRST. The fold keeps the head, so on an unranked list it
+ * would swallow whatever happened to be sorted late — a donut of six
+ * equal-ish categories plus one dominant one at the end rendered as four
+ * slivers and an unlabeled 96% "Other". Ranking here rather than trusting
+ * callers makes that unreachable, including for charts a builder agent
+ * writes.
  */
 export function foldCategoryTail(rows, options) {
-    const { categoryKey, valueKey, otherLabel = "Other" } = options;
-    // A cap below 2 cannot hold a fold (one real row + "Other" is the floor).
-    const max = Math.max(2, options.max ?? CHART_SLOT_COUNT);
+    const { categoryKey, valueKey, otherLabel = OTHER_LABEL } = options;
+    // A cap below 2 cannot hold a fold (one real row + "Other" is the floor);
+    // a non-finite cap would fold everything into a single bucket.
+    const requested = options.max ?? CHART_SLOT_COUNT;
+    const max = Math.max(2, Number.isFinite(requested) ? requested : CHART_SLOT_COUNT);
     if (rows.length <= max)
         return rows;
-    const head = rows.slice(0, max - 1);
-    const tail = rows.slice(max - 1);
-    // A pre-existing "Other" row in the head merges into the fold — two
-    // rows wearing the same label would double the category.
-    const kept = head.filter((row) => String(row[categoryKey]) !== otherLabel);
-    const folded = [...head.filter((row) => String(row[categoryKey]) === otherLabel), ...tail];
+    const ranked = [...rows].sort((a, b) => (Number(b[valueKey]) || 0) - (Number(a[valueKey]) || 0));
+    // A pre-existing "Other" row always joins the fold, so set it aside
+    // BEFORE taking the head: leaving it there would cost a real category
+    // its place for a row that gets folded away anyway.
+    const existingOther = ranked.filter((row) => String(row[categoryKey]) === otherLabel);
+    const real = ranked.filter((row) => String(row[categoryKey]) !== otherLabel);
+    const kept = real.slice(0, max - 1);
+    const folded = [...existingOther, ...real.slice(max - 1)];
+    if (!folded.length)
+        return kept;
     const otherTotal = folded.reduce((sum, row) => sum + (Number(row[valueKey]) || 0), 0);
-    const other = {
-        ...(tail[0] ?? folded[0]),
-        [categoryKey]: otherLabel,
-        [valueKey]: otherTotal,
-    };
+    const other = { ...folded[0], [categoryKey]: otherLabel, [valueKey]: otherTotal };
     return [...kept, other];
 }

package/dist/components/chart/chart.d.ts

@@ -3,9 +3,9 @@ import * as RechartsPrimitive from "recharts";
 import { type ChartConfig } from "./chart-config.js";
 /**
  * The shadcn-style chart layer over recharts: `ChartContainer` injects one
- * `--color-<key>` CSS variable per configured series (resolved from the
+ * `--chart-color-<key>` CSS variable per configured series (resolved from the
  * theme's `--chart-1..5` slots unless overridden), so every mark inside can
- * reference its series color with `var(--color-<key>)` and follow theme
+ * reference its series color with `seriesVar(key)` and follow theme
  * changes — light/dark and tenant themes alike — without re-rendering logic.
  *
  * Tooltip and legend CONTENT components read the same config through
@@ -48,6 +48,8 @@ export interface ChartTooltipContentProps {
     valueFormatter?: (value: number) => React.ReactNode;
     /** Hide the color indicator squares. */
     hideIndicator?: boolean;
+    /** Drop the header row entirely (a donut names its slice on the row). */
+    hideLabel?: boolean;
     /**
      * Override the indicator color per row — for charts whose CELLS recolor
      * the marks (colorByCategory) while the payload still carries the parent
@@ -59,7 +61,7 @@ export interface ChartTooltipContentProps {
  * The hover layer's content. Rows are named from the chart config (the
  * series key is a data column name — never show it raw when a label exists).
  */
-declare function ChartTooltipContent({ active, label, payload, className, labelFormatter, valueFormatter, hideIndicator, indicatorColor, }: ChartTooltipContentProps): import("react/jsx-runtime").JSX.Element | null;
+declare function ChartTooltipContent({ active, label, payload, className, labelFormatter, valueFormatter, hideIndicator, hideLabel, indicatorColor, }: ChartTooltipContentProps): import("react/jsx-runtime").JSX.Element | null;
 export interface ChartLegendContentProps {
     payload?: Array<{
         dataKey?: string | number;

package/dist/components/chart/chart.js

@@ -27,11 +27,11 @@ const ChartLegend = RechartsPrimitive.Legend;
  * The hover layer's content. Rows are named from the chart config (the
  * series key is a data column name — never show it raw when a label exists).
  */
-function ChartTooltipContent({ active, label, payload, className, labelFormatter, valueFormatter, hideIndicator = false, indicatorColor, }) {
+function ChartTooltipContent({ active, label, payload, className, labelFormatter, valueFormatter, hideIndicator = false, hideLabel = false, indicatorColor, }) {
     const { config } = useChart();
     if (!active || !payload?.length)
         return null;
-    return (_jsxs("div", { className: cn("min-w-[9rem] rounded-lg border border-border bg-popover px-3 py-2 text-xs shadow-md", className), children: [_jsx("div", { className: "mb-1.5 font-medium text-foreground", children: labelFormatter ? labelFormatter(label) : String(label ?? "") }), _jsx("div", { className: "grid gap-1", children: payload.map((entry, i) => {
+    return (_jsxs("div", { className: cn("min-w-[9rem] rounded-lg border border-border bg-popover px-3 py-2 text-xs shadow-md", className), children: [!hideLabel && (_jsx("div", { className: "mb-1.5 font-medium text-foreground", children: labelFormatter ? labelFormatter(label) : String(label ?? "") })), _jsx("div", { className: "grid gap-1", children: payload.map((entry, i) => {
                     // `name` first: a Pie names entries by its nameKey (the category),
                     // while its dataKey is the measure column — the one label a donut
                     // row must NOT wear. Series charts set name = dataKey, so nothing
@@ -45,7 +45,7 @@ function ChartTooltipContent({ active, label, payload, className, labelFormatter
                                     ? valueFormatter(numeric)
                                     : finite
                                         ? numeric.toLocaleString()
-                                        : String(entry.value ?? "") })] }, key));
+                                        : String(entry.value ?? "") })] }, `${i}-${key}`));
                 }) })] }));
 }
 /** Legend rows named from the chart config, color chips from the payload. */
@@ -55,7 +55,7 @@ function ChartLegendContent({ payload, className }) {
         return null;
     return (_jsx("div", { className: cn("flex flex-wrap items-center justify-center gap-x-4 gap-y-1 pt-3", className), children: payload.map((entry, i) => {
             const key = String(entry.dataKey ?? entry.value ?? i);
-            return (_jsxs("div", { className: "flex items-center gap-1.5 text-xs text-muted-foreground", children: [_jsx("span", { "aria-hidden": true, className: "size-2.5 shrink-0 rounded-[3px]", style: { background: entry.color ?? seriesVar(key) } }), _jsx("span", { children: seriesLabel(config, key) })] }, key));
+            return (_jsxs("div", { className: "flex items-center gap-1.5 text-xs text-muted-foreground", children: [_jsx("span", { "aria-hidden": true, className: "size-2.5 shrink-0 rounded-[3px]", style: { background: entry.color ?? seriesVar(key) } }), _jsx("span", { children: seriesLabel(config, key) })] }, `${i}-${key}`));
         }) }));
 }
 /** Compact y-axis tick formatter shared by the chart wrappers. */

package/dist/components/chart/donut-chart.d.ts

@@ -2,11 +2,12 @@ import * as React from "react";
 import { type ChartConfig } from "./chart-config.js";
 /**
  * Share of a whole ("tokens per model"). Slices are identities, so each
- * takes its theme slot in data order — and there are only five slots, so
- * `maxSlices` (default 5) folds the tail into a muted "Other" instead of
- * inventing colors. The center carries the headline total; the legend
- * carries names + shares, so the hover layer is confirmation, not the only
- * way to read the chart.
+ * takes a theme slot resolved over the DRAWN slices — declared config keys
+ * first, the rest in drawn order — and there are only five slots,
+ * so `maxSlices` folds the tail into a muted "Other" (ranked first, so the
+ * fold can never swallow the largest slice) instead of inventing colors.
+ * The center carries the headline total; the legend carries names + shares,
+ * so the hover layer is confirmation, not the only way to read the chart.
  */
 export interface DonutChartProps {
     data: Array<Record<string, unknown>>;

package/dist/components/chart/donut-chart.js

@@ -3,35 +3,36 @@ import * as React from "react";
 import * as RechartsPrimitive from "recharts";
 import { cn } from "@iloveagents/foundry-web-primitives";
 import { ChartContainer, ChartTooltip, ChartTooltipContent } from "./chart.js";
-import { CHART_SLOT_COUNT, chartSlotColor, foldCategoryTail, formatCompactNumber, } from "./chart-config.js";
-const OTHER_COLOR = "var(--muted-foreground)";
-export function DonutChart({ data, categoryKey, valueKey, config = {}, maxSlices = 5, centerLabel, centerValue, height = 240, width, valueFormatter, showLegend = true, className, }) {
+import { CHART_SLOT_COUNT, categoryColorResolver, foldCategoryTail, formatCompactNumber, } from "./chart-config.js";
+const EMPTY_CONFIG = {};
+export function DonutChart({ data, categoryKey, valueKey, config = EMPTY_CONFIG, maxSlices = 5, centerLabel, centerValue, height = 240, width, valueFormatter, showLegend = true, className, }) {
     // The donut's slices are identities and the palette has five slots —
     // a cap above that would wrap colors modulo five.
     const cappedSlices = Math.min(CHART_SLOT_COUNT, maxSlices);
+    // One expression for "this row's category", so the color resolver and
+    // the rendered cell can never disagree about a missing value.
+    const categoryOf = React.useCallback((row, i) => String(row[categoryKey] ?? i), [categoryKey]);
     const rows = React.useMemo(() => foldCategoryTail(data, { categoryKey, valueKey, max: cappedSlices }), [data, categoryKey, valueKey, cappedSlices]);
-    const total = React.useMemo(() => rows.reduce((sum, row) => sum + (Number(row[valueKey]) || 0), 0), [rows, valueKey]);
-    const sliceColor = React.useCallback((category, index) => {
-        if (config[category]?.color)
-            return config[category].color;
-        if (category === "Other" && index === rows.length - 1 && data.length > rows.length)
-            return OTHER_COLOR;
-        // Declared identity first (immune to data filtering/sorting); the
-        // row position is only the fallback for undeclared categories.
-        const configIndex = Object.keys(config).indexOf(category);
-        return chartSlotColor(configIndex !== -1 ? configIndex : index);
-    }, [config, rows.length, data.length]);
+    const total = React.useMemo(() => rows.reduce((sum, row) => {
+        const value = Number(row[valueKey]);
+        return sum + (Number.isFinite(value) ? value : 0);
+    }, 0), [rows, valueKey]);
+    // Identity resolved over the DRAWN slices: the fold ranks, so a category
+    // late in the input can be promoted, and resolving from input order would
+    // paint that visible slice the muted past-the-palette grey.
+    const sliceColor = React.useMemo(() => categoryColorResolver(config, rows.map((row) => String(row[categoryKey] ?? ""))), [config, rows, categoryOf]);
     const fixed = width !== undefined;
     const sliceLabel = (category) => config[category]?.label ?? category;
-    return (_jsxs("div", { className: cn("flex flex-col", className), children: [_jsxs("div", { className: "relative", children: [_jsx(ChartContainer, { config: config, responsive: !fixed, style: fixed ? undefined : { height, aspectRatio: "auto" }, children: _jsxs(RechartsPrimitive.PieChart, { width: width, height: fixed ? height : undefined, children: [_jsx(ChartTooltip, { content: _jsx(ChartTooltipContent, { labelFormatter: () => null, valueFormatter: valueFormatter }) }), _jsx(RechartsPrimitive.Pie, { data: rows, dataKey: valueKey, nameKey: categoryKey, innerRadius: "62%", outerRadius: "88%", paddingAngle: 2, strokeWidth: 0, isAnimationActive: false, children: rows.map((row, i) => {
+    return (_jsxs("div", { className: cn("flex flex-col", className), children: [_jsxs("div", { className: "relative", children: [_jsx(ChartContainer, { config: config, responsive: !fixed, style: fixed ? undefined : { height, aspectRatio: "auto" }, children: _jsxs(RechartsPrimitive.PieChart, { width: width, height: fixed ? height : undefined, children: [_jsx(ChartTooltip, { content: _jsx(ChartTooltipContent, { hideLabel: true, valueFormatter: valueFormatter }) }), _jsx(RechartsPrimitive.Pie, { data: rows, dataKey: valueKey, nameKey: categoryKey, innerRadius: "62%", outerRadius: "88%", paddingAngle: 2, strokeWidth: 0, isAnimationActive: false, children: rows.map((row, i) => {
                                         const category = String(row[categoryKey] ?? i);
-                                        return _jsx(RechartsPrimitive.Cell, { fill: sliceColor(category, i) }, category);
+                                        return (_jsx(RechartsPrimitive.Cell, { fill: sliceColor(category) }, `${i}-${category}`));
                                     }) })] }) }), _jsxs("div", { className: "pointer-events-none absolute inset-0 flex flex-col items-center justify-center", children: [_jsx("span", { className: "text-xl font-semibold tabular-nums", "data-donut-center": "", children: centerValue ?? formatCompactNumber(total) }), centerLabel && _jsx("span", { className: "text-[11px] text-muted-foreground", children: centerLabel })] })] }), showLegend && (_jsx("div", { className: "flex flex-wrap items-center justify-center gap-x-4 gap-y-1 pt-3", children: rows.map((row, i) => {
                     const category = String(row[categoryKey] ?? i);
-                    const value = Number(row[valueKey]) || 0;
+                    const raw = Number(row[valueKey]);
+                    const value = Number.isFinite(raw) ? raw : 0;
                     const pct = total > 0 ? (value / total) * 100 : 0;
                     // A real slice must never read as absent: below 1% says so.
                     const share = pct > 0 && pct < 1 ? "<1" : String(Math.round(pct));
-                    return (_jsxs("div", { className: "flex items-center gap-1.5 text-xs text-muted-foreground", children: [_jsx("span", { "aria-hidden": true, className: "size-2.5 shrink-0 rounded-[3px]", style: { background: sliceColor(category, i) } }), _jsx("span", { children: sliceLabel(category) }), _jsxs("span", { className: "tabular-nums", children: [share, "%"] })] }, category));
+                    return (_jsxs("div", { className: "flex items-center gap-1.5 text-xs text-muted-foreground", children: [_jsx("span", { "aria-hidden": true, className: "size-2.5 shrink-0 rounded-[3px]", style: { background: sliceColor(category) } }), _jsx("span", { children: sliceLabel(category) }), _jsxs("span", { className: "tabular-nums", children: [share, "%"] })] }, `${i}-${category}`));
                 }) }))] }));
 }

package/dist/components/chart/stat-card.js

@@ -7,12 +7,19 @@ function formatValue(value, format) {
         return "–";
     if (typeof value === "string")
         return value;
+    // Both branches take the same guard: a NaN must not render as "NaN" in
+    // one format and "–" in the other.
+    if (!Number.isFinite(value))
+        return "–";
     return format === "plain" ? value.toLocaleString() : formatCompactNumber(value);
 }
 const StatCard = React.forwardRef(({ label, value, format = "compact", delta, deltaLabel, invertDelta = false, hint, icon, loading = false, className, ...props }, ref) => {
-    const direction = delta === undefined || delta === 0 ? "flat" : delta > 0 ? "up" : "down";
+    // A delta of Infinity is the natural result of dividing by a zero
+    // previous period, and "▲ ∞%" styled as GOOD is worse than no badge.
+    const hasDelta = delta !== undefined && Number.isFinite(delta);
+    const direction = !hasDelta || delta === 0 ? "flat" : delta > 0 ? "up" : "down";
     const good = delta !== undefined && delta !== 0 && (invertDelta ? delta < 0 : delta > 0);
-    return (_jsxs("div", { ref: ref, "data-stat-card": "", className: cn("rounded-xl border border-border bg-card p-4 text-card-foreground", className), ...props, children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx("span", { className: "truncate text-xs font-medium text-muted-foreground", children: label }), icon && _jsx("span", { className: "shrink-0 text-muted-foreground [&_svg]:size-4", children: icon })] }), _jsxs("div", { className: "mt-2 flex items-baseline gap-2", children: [loading ? (_jsx("span", { className: "h-7 w-20 animate-pulse rounded-md bg-muted", "data-stat-skeleton": "" })) : (_jsx("span", { className: "text-2xl font-semibold tabular-nums tracking-tight", "data-stat-value": "", children: formatValue(value, format) })), !loading && delta !== undefined && (_jsxs("span", { "data-stat-delta": direction === "flat" ? "flat" : good ? "good" : "bad", className: cn("inline-flex items-center gap-0.5 rounded-md px-1.5 py-0.5 text-[11px] font-medium tabular-nums", direction === "flat"
+    return (_jsxs("div", { ref: ref, "data-stat-card": "", className: cn("rounded-xl border border-border bg-card p-4 text-card-foreground", className), ...props, children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx("span", { className: "truncate text-xs font-medium text-muted-foreground", children: label }), icon && _jsx("span", { className: "shrink-0 text-muted-foreground [&_svg]:size-4", children: icon })] }), _jsxs("div", { className: "mt-2 flex items-baseline gap-2", children: [loading ? (_jsx("span", { className: "h-7 w-20 animate-pulse rounded-md bg-muted", "data-stat-skeleton": "" })) : (_jsx("span", { className: "text-2xl font-semibold tabular-nums tracking-tight", "data-stat-value": "", children: formatValue(value, format) })), !loading && hasDelta && (_jsxs("span", { "data-stat-delta": direction === "flat" ? "flat" : good ? "good" : "bad", className: cn("inline-flex items-center gap-0.5 rounded-md px-1.5 py-0.5 text-[11px] font-medium tabular-nums", direction === "flat"
                             ? "bg-muted text-muted-foreground"
                             : good
                                 ? "bg-success/10 text-success"

package/dist/components/chart/time-series-chart.js

@@ -1,9 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as RechartsPrimitive from "recharts";
 import { ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent, compactAxisTick, } from "./chart.js";
-import { formatBucketLabel, seriesVar } from "./chart-config.js";
+import { chartSlotColor, formatBucketLabel, seriesVar } from "./chart-config.js";
 export function TimeSeriesChart({ data, config, xKey = "bucket", series, kind = "area", stacked = false, height = 240, width, valueFormatter, xTickFormatter = formatBucketLabel, showLegend, className, }) {
     const keys = series ?? Object.keys(config);
+    // A drawn key with no config takes the next slot AFTER the configured
+    // ones — the rendered index would collide with a configured series when
+    // an undeclared key is drawn first.
+    const configured = Object.keys(config);
+    const fallbackSlot = (key) => {
+        const declared = configured.indexOf(key);
+        if (declared !== -1)
+            return declared;
+        const undeclared = keys.filter((k) => !configured.includes(k)).indexOf(key);
+        return configured.length + Math.max(0, undeclared);
+    };
     const legend = showLegend ?? keys.length > 1;
     const fixed = width !== undefined;
     const ChartRoot = kind === "line"
@@ -11,7 +22,7 @@ export function TimeSeriesChart({ data, config, xKey = "bucket", series, kind =
         : kind === "bar"
             ? RechartsPrimitive.BarChart
             : RechartsPrimitive.AreaChart;
-    return (_jsx(ChartContainer, { config: config, responsive: !fixed, className: className, style: fixed ? undefined : { height, aspectRatio: "auto" }, children: _jsxs(ChartRoot, { data: data, width: width, height: fixed ? height : undefined, margin: { top: 4, right: 8, bottom: 0, left: 0 }, children: [_jsx(RechartsPrimitive.CartesianGrid, { vertical: false, strokeDasharray: "3 3" }), _jsx(RechartsPrimitive.XAxis, { dataKey: xKey, tickLine: false, axisLine: false, tickMargin: 8, minTickGap: 24, tickFormatter: xTickFormatter }), _jsx(RechartsPrimitive.YAxis, { width: 48, tickLine: false, axisLine: false, tickFormatter: compactAxisTick }), _jsx(ChartTooltip, { content: _jsx(ChartTooltipContent, { labelFormatter: xTickFormatter, valueFormatter: valueFormatter }) }), legend && _jsx(ChartLegend, { content: _jsx(ChartLegendContent, {}) }), keys.map((key) => kind === "line" ? (_jsx(RechartsPrimitive.Line, { type: "monotone", dataKey: key, stroke: seriesVar(key), strokeWidth: 2, dot: data.length <= 3 ? { r: 3 } : false, isAnimationActive: false }, key)) : kind === "bar" ? (_jsx(RechartsPrimitive.Bar, { dataKey: key, stackId: stacked ? "stack" : undefined, fill: seriesVar(key), maxBarSize: 48, radius: stacked ? 0 : [4, 4, 0, 0], isAnimationActive: false }, key)) : (_jsx(RechartsPrimitive.Area, { type: "monotone", dataKey: key, stackId: stacked ? "stack" : undefined, stroke: seriesVar(key), fill: seriesVar(key), fillOpacity: 0.25, strokeWidth: 2, 
+    return (_jsx(ChartContainer, { config: config, responsive: !fixed, className: className, style: fixed ? undefined : { height, aspectRatio: "auto" }, children: _jsxs(ChartRoot, { data: data, width: width, height: fixed ? height : undefined, margin: { top: 4, right: 8, bottom: 0, left: 0 }, children: [_jsx(RechartsPrimitive.CartesianGrid, { vertical: false, strokeDasharray: "3 3" }), _jsx(RechartsPrimitive.XAxis, { dataKey: xKey, tickLine: false, axisLine: false, tickMargin: 8, minTickGap: 24, tickFormatter: xTickFormatter }), _jsx(RechartsPrimitive.YAxis, { width: 48, tickLine: false, axisLine: false, tickFormatter: compactAxisTick }), _jsx(ChartTooltip, { content: _jsx(ChartTooltipContent, { labelFormatter: xTickFormatter, valueFormatter: valueFormatter }) }), legend && _jsx(ChartLegend, { content: _jsx(ChartLegendContent, {}) }), keys.map((key) => kind === "line" ? (_jsx(RechartsPrimitive.Line, { type: "monotone", dataKey: key, stroke: seriesVar(key, chartSlotColor(fallbackSlot(key))), strokeWidth: 2, dot: data.length <= 3 ? { r: 3 } : false, isAnimationActive: false }, key)) : kind === "bar" ? (_jsx(RechartsPrimitive.Bar, { dataKey: key, stackId: stacked ? "stack" : undefined, fill: seriesVar(key, chartSlotColor(fallbackSlot(key))), maxBarSize: 48, radius: stacked ? 0 : [4, 4, 0, 0], isAnimationActive: false }, key)) : (_jsx(RechartsPrimitive.Area, { type: "monotone", dataKey: key, stackId: stacked ? "stack" : undefined, stroke: seriesVar(key, chartSlotColor(fallbackSlot(key))), fill: seriesVar(key, chartSlotColor(fallbackSlot(key))), fillOpacity: 0.25, strokeWidth: 2, 
                     // A one-or-two point window would otherwise draw a floating
                     // speck; dots make sparse data read as sparse, not broken.
                     dot: data.length <= 3 ? { r: 3 } : false, isAnimationActive: false }, key)))] }) }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iloveagents/foundry-web-ui",
-  "version": "0.23.0",
+  "version": "0.24.0",
   "license": "MIT",
   "description": "React agent UI core for Foundry UI — chat, composer, AG-UI adapter for assistant-ui, tool cards, panels, sidebar, theme runtime, and UI stores.",
   "keywords": [
@@ -76,8 +76,8 @@
     "recharts": "^3.10.1",
     "remark-gfm": "^4.0.0",
     "tailwind-merge": "^3.5.0",
-    "@iloveagents/foundry-agent": "^0.23.0",
-    "@iloveagents/foundry-web-primitives": "^0.23.0"
+    "@iloveagents/foundry-agent": "^0.24.0",
+    "@iloveagents/foundry-web-primitives": "^0.24.0"
   },
   "devDependencies": {
     "@ag-ui/client": "^0.0.52",